Add ability to paste image to Markdown block #73
Conversation
| EditorView.domEventHandlers({ | ||
| paste(e, view) { | ||
| const value = e.clipboardData?.items[0]; | ||
| if (value.type === "image/png") { |
There was a problem hiding this comment.
seems like you could handle other image types here without any other changes
There was a problem hiding this comment.
thanks for calling me on my laziness - I wasn't sure how to test with a jpg, but added support for this & "copy image" from a website as well
| }); | ||
| } | ||
| }; | ||
| reader.readAsDataURL(file); |
There was a problem hiding this comment.
for robustness you could put some reasonable size limit on pasted files, although it's not super clear what "reasonable" is here.
https://stackoverflow.com/questions/695151/data-protocol-url-size-limitations
| const value = e.clipboardData?.items[0]; | ||
| const MAX_IMAGE_SIZE = 5000000; | ||
| // handle images pasted from the web | ||
| if (value && value.type === "text/html") { |
There was a problem hiding this comment.
nice, I didn't know pasted web images work like this!
| from: view.state.selection.main.from, | ||
| to: view.state.selection.main.to, | ||
| insert: images | ||
| .filter((image) => image && image.length < MAX_IMAGE_SIZE) |
There was a problem hiding this comment.
I guess since this might be a data: URL it is consistent with the other case, but I was surprised at first since in other cases the URL length doesn't correspond to the image size. Maybe rename MAX_IMAGE_SIZE to MAX_URL_SIZE for clarity? Pickiest of nits.
There was a problem hiding this comment.
yep, that's a good call
Listens for a paste event and adds the base64 image string if it contains an image. It's not ideal (clutters up the code with a long string), but I think helpful enough for now!
Screen.Recording.2023-01-12.at.2.06.04.PM.mov