Userscript to lazily display images and iframes in Workflowy

workflowyPlusRefac2.js

// ==UserScript==
// @name         WorkflowyPlus Refac 2
// @namespace    http://confusionstudios.com
// @version      0.2
// @author       Wizmann, DR2050
// @match        https://workflowy.com/*
// @require      https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js
// @grant        none
// ==/UserScript==
/* jshint -W097 */
'use strict';
// User.js

window.jQuery310 = $.noConflict(true);

window.addImageOrIFrame = function(button, url, useIFrame) {
    var $ = jQuery310; // switch to jQuery 310 for everything
    var html;
    if (useIFrame) {
        html = '<div class="content-iframe"><iframe width="90%" margin="auto" height="512" src="' + url + '" frameborder="0" allowfullscreen=""></iframe></div>';
    } else {
        html = '<div class="content-img"><image src="' + url + '"/></div>';
    }
    $(button).after(html);
    $(button).hide();
};


window.addButtonsToContentDivs = function() {
    var $ = jQuery310; // switch to jQuery 310 for everything
    $(this).nextAll(".content-img").remove();
    $(this).nextAll(".content-iframe").remove();
    $(this).nextAll(".show-button").remove();
    var lines = $(this).text().split("\n");
    // var imageRegex = /^\!\[(.*)\]\((.+)\)$/;
    var regex = /^(iframe|image):([^\s]*)$/;
    for (var i = 0; i < lines.length; i++) {
        var line = lines[i].trim();
        var result = line.match(regex);
        if (result !== null) {
            var url = result[2];
            var imageOrIframe = (result[1] === "iframe");
            var buttonTitle = imageOrIframe ? "Show iFrame" : "Show Image";
            var button = '<button  class="show-button" style=""  onclick="addImageOrIFrame(this, \'' + url + '\', ' + imageOrIframe + ');">' + buttonTitle + '</button>';
            $(this).after(button);
        }
    }
}

window.addEventsToDocument = function() {
    var $ = jQuery310; // switch to jQuery 310 for everything
    $("div.notes div.content").each(addButtonsToContentDivs);
    $("div.notes div.content").on("click keyup", addButtonsToContentDivs);
    $("#expandButton").on("click", function() {
        $("div.notes div.content").each(addButtonsToContentDivs);
    });
};


// the 2.5s delay is to allow the AJAX stuff to load... a terrible hack, of course, 
// but the AJAX events are many 
// $(window).bind("load hashchange", setTimeout(addEventsToDocument, 2500));
window.addEventsAfterDelay = function() {
    setTimeout(addEventsToDocument, 2500)
};

jQuery310(window).on('load hashchange', addEventsAfterDelay);

Use image:http://example.com/image.jpg or iframe:http://example.com/iframe... when you're editing the note, a button will come up for each.