In Workflowy, Ctrl+' turns urls into pictures

workflowy_txt2img.user.js

// ==UserScript==
// @name         workflowy_txt2img.user.js
// @namespace    http://voilaweb.com/
// @version      0.1
// @description  Simply type a url and it will be converted to an image if it ends with gif/png/jpg
// @author       Chris F Ravenscroft
// @homepage     http://nexus.zteo.com
// @include      http://workflowy.com/*
// @include      https://workflowy.com/*
// @include      http://*.workflowy.com/*
// @include      https://*.workflowy.com/*
// @grant        GM_addStyle
// ==/UserScript==

// CTRL+' shall be out shortcut

function CFR_main () {
    function CFR_expandImgTags() {
        var rootNode = document.querySelector('.mainTreeRoot');
        var txtWalker   = document.createTreeWalker (
            rootNode,
            NodeFilter.SHOW_TEXT,
            {   acceptNode: function (node) {
                if (node.nodeValue.trim() )
                    return NodeFilter.FILTER_ACCEPT;
                return NodeFilter.FILTER_SKIP;
            }
            },
            false
        );
        
        var deleteList = [];
        var txtNode = null;
        while (txtNode  = txtWalker.nextNode () ) {
            if(null != txtNode.nodeValue.match(/.+\.(jpg|png|gif|svg)/gi)) {
                var newImgNode = document.createElement('img');
                newImgNode.src = txtNode.nodeValue;
                txtNode.parentNode.insertBefore(newImgNode, txtNode);
                var newTxtNode = document.createElement('br');
                txtNode.parentNode.insertBefore(newTxtNode, txtNode);
                deleteList.push(txtNode);
            }
        }
        /*
         * Dead code for now! This almost works but when focusing/defocusing an
         * item the picture and more importantly its source url may be lost.
         * So, for now, this will be picture + br +url
        for(var i=0; i<deleteList.length; i++) {
            deleteList[i].parentNode.removeChild(deleteList[i]);
        }
        */
    }
    
    document.addEventListener('keyup', function(event) {
        switch(event.keyIdentifier) {
            case 'U+0027':
                if(event.ctrlKey) {
                    event.preventDefault();
                    CFR_expandImgTags();
                }
                break;
        }
    });
}

var script = document.createElement('script');
script.appendChild(document.createTextNode('('+ CFR_main +')();'));
(document.body || document.head || document.documentElement).appendChild(script);

I could use listeners to update in real time, but in many cases it is more manageable/lightweight to only load images on demand.

Wow! Where do I put that code to try it out???

Dave

Installed it in Firefox via Greasemonkey, tried Ctrl+', and nothing happens. Advice?

change the code:

    document.addEventListener('keyup', function(event) {
        switch(event.keyIdentifier) {
            case 'U+0027':
                if(event.ctrlKey) {
                    event.preventDefault();
                    CFR_expandImgTags();
                }
                break;
        }
    });

to

document.addEventListener('keyup', function(event) {
    switch(event.keyCode) {
        case 192:
            if (event.ctrlKey) {
                event.preventDefault();
                CFR_expandImgTags();
            }
            break;
    }
});

Press the keyboard Ctrl + `
Not the Ctrl + '