Add image-pasting capability to StackEdit markdown editor.

se-image-paste.user.js

// ==UserScript==
// @name         StackEdit Image Extension
// @namespace    http://chri.sh/
// @version      0.4.1
// @description  Add image-pasting capability to StackEdit editor.
// @author       chrahunt
// @match        https://stackedit.io/editor
// @run-at       document-end
// @grant        none
// @downloadURL  https://gist.github.com/chrahunt/c27686b095a390c26ff8/raw/se-image-paste.user.js
// ==/UserScript==

(function(window, document, undefined) {
    var exts = {
        'image/png': 'png',
        'image/jpeg': 'jpg',
        'image/gif': 'gif'
    };

    // File is at a minimum a Blob with a string name property.
    function initImageUpload(file) {
        var evtElt = document.querySelector('body > div.layout-wrapper-l1 > div.layout-wrapper-l2 > div.layout-wrapper-l3');
        var evt = createDropEvent(file);
        evtElt.dispatchEvent(evt);
    }

    function createDropEvent(file) {
        var evt = new CustomEvent('drop');
        evt.dataTransfer = {
            files: [file]
        };
        return evt;
    }

    // Given a URL, retrieve the filename of the referenced resource.
    // From: http://stackoverflow.com/a/4549816/1698058
    function getFilename(url) {
        var a = document.createElement('a');
        a.href = url;
        return a.pathname.split('/').pop();
    }

    // Handle the clipboard data resulting from copying an image in a modern browser. If the clipboard
    // data is not formatted as expected, null is returned, otherwise a file.
    // Tested with Chrome 43 and Firefox 35.
    function handleBrowserImageCopy(items) {
        var text = items[0];
        var data = items[1];
        if (text.type !== "text/html" ||
            !(/image\/(jpeg|png|gif)/.test(data.type))) {
            return false;
        } else {
            var file = data.getAsFile();
            // HTML has img element with src attribute. If possible,
            // extract the filename from that.
            text.getAsString(function(html) {
                var m = html.match(/src="(.*?)"/);
                // Confirmed match and exclude data URI.
                if (m && m[1] && m[1].search("data") !== 0) {
                    var name = getFilename(m[1]); 
                    if (name) {
                        file.name = name;
                    }
                }

                if (!file.name) {
                    file.name = Date.now() + '.' + exts[file.type];
                }
                initImageUpload(file);
            });
            return true;
        }
    }

    function runOnEditor(fn) {
        var editor = document.querySelector('.editor-content');
        if (!editor) {
            setTimeout(function() {
                runOnEditor(fn);
            }, 10);
        } else {
            fn(editor);
        }
    }

    runOnEditor(function(editorElt) {
        editorElt.addEventListener('paste', function(evt) {
            var items = evt.clipboardData.items;
            if (items) {
                // Only image data, as from a screenshot or copied from
                // image-editing software.
                if (items.length === 1) {
                    var item = items[0];
                    if (/image\/(jpeg|png|gif)/.test(item.type)) {
                        var file = item.getAsFile();
                        file.name = Date.now() + '.' + exts[item.type];
                        initImageUpload(file);
                    }
                } else if (items.length === 2) {
                    // Handle html and image data, occurs when
                    // "Copy Image" is selected from context menu
                    // within various browsers.
                    var success = handleBrowserImageCopy(items);
                }
            }
        });
    });
})(window, document);