agusmakmun / agusmakmun/django-markdown-editor
Copy/Paste clipboard images
- Dominant language
- JavaScript
- Stars
- 901
- Forks
- 1.3k
- PR merge metrics
- No merged PRs in 30d
Description
Having a hook for the paste event would be really helpful in order to upload images directly from clipboard. I created a view in my project and added the below function for the paste event
```javascript
function uploadClipboardImage(event, martorUploadUrl) {
if (event.clipboardData.files.length >= 1) {
let targetField = event.target.parentElement;
if (targetField.id.startsWith('martor-')
&& targetField.classList.contains('martor-field')
&& targetField.classList.contains('ace_editor')
) {
let aceEditor = ace.edit(targetField.id);
for (const f of event.clipboardData.files) {
const formData = new FormData();
formData.append('martor-image-upload', f);
fetch(martorUploadUrl, {
method: 'POST',
headers: {
'X-CSRFToken': '{{ csrf_token }}',
},
body: formData
}).then(response => {
if (response.ok) {
response.json().then(
data => aceEditor.insert(`\n${data.link}\n`)
)
} else {
console.log(response.status)
}
})
}
}
}
}
```
data-upload-url attribute can also be used for getting the url from the event's target element. Official implementation would be highly appreciated.
Contributor guide
Research direction
Use the supplied uploadClipboardImage function as the behavior reference and inspect where the editor handles paste events. Check how the martor upload URL and CSRF token are exposed, then verify that pasted clipboard images are uploaded and their links are inserted into the Ace editor without disrupting normal paste behavior.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- django, javascript
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 42/100