Ionaru / easy-markdown-editor

EasyMDE: A simple, beautiful, and embeddable JavaScript Markdown editor. Delightful editing for beginners and experts alike. Features built-in autosaving and spell checking.
https://stackblitz.com/edit/easymde
MIT License
2.41k stars 316 forks source link

Paste image from clipboard does not work #523

Open jjxtra opened 1 year ago

jjxtra commented 1 year ago

Describe the bug Paste image does nothing

To Reproduce Copy image to clipboard (the raw image from an image editor, not a url) Attempt to Ctrl (or MAC Cmd) + V to paste in the editor. Context menu paste also should be an option. Neither work and nothing happens when attempted

Expected behavior Image flow should be initiated with the image on the clipboard

Version information

Notes: Drag/drop and upload button work fine.

jjxtra commented 1 year ago

This is definitely a problem in the core code. The following works and shows an image is on the clipboard and parsed out successfully:

    easyMDE.codemirror.on("paste", function ()
    {
        var items = (event.clipboardData || event.originalEvent.clipboardData).items;
        console.log(JSON.stringify(items));
        for (index in items)
        {
            var item = items[index];
            if (item.kind === 'file')
            {
                var blob = item.getAsFile();
                var reader = new FileReader();
                reader.onload = function(event)
                {
                    // data url!
                    console.log(event.target.result)
                };
                reader.readAsDataURL(blob);
            }
        }
    });
jjxtra commented 1 year ago

Working example of paste using a custom function:

    easyMDE.codemirror.on("paste", function ()
    {
        var items = (event.clipboardData || event.originalEvent.clipboardData).items;
        console.log(JSON.stringify(items));
        for (index in items)
        {
            var item = items[index];
            if (item.kind === 'file')
            {
                var blob = item.getAsFile();
                easyMDE.uploadImagesUsingCustomFunction(easyMDE.options.imageUploadFunction, [blob]);
            }
        }
    });
bilogic commented 5 months ago

nice, can there be an indication during the file upload?