workflowy-with-image.js

workflowy-with-image.js

// ==UserScript==
// @name         New Userscript
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        https://workflowy.com/*
// @grant        none
// ==/UserScript==
/* jshint -W097 */
'use strict';

function do_parseImg() {
    $(this).nextAll(".content-img").remove();
    var lines = $(this).text().split("\n");
    var img_re = /^\!\[.*\]\((.+)\)$/;

    for (var i = 0; i < lines.length; i++) {
        var line = lines[i].trim();
        var img = line.match(img_re);
        if (img === null) {
            continue;
        }
        console.log(i, img[1]);
        $(this).after('<div class="content-img"><img src="' + img[1] + '"/></div>')
    }
}

function parseImg() {
    $("div.notes div.content").live("click keyup", do_parseImg);
    $("div.notes div.content").each(do_parseImg);
    $("#expandButton").live("click", function() {
        $("div.notes div.content").each(do_parseImg);
    });
};

$(window).bind("load hashchange", parseImg);

Hello, can you tell me which line in your code tells the script to parse the text in the note? I would like to change it to use an image link in the workflowy item itself, rather than in the item note.

Ahh, sorry, figured it out. Made a fork. My first fork! Exciting :)

Does this work anymore? I can't get it to work at all for any image.

@incace works like a charm

My improvement:
![75](http://i.imgur.com/R72rW81.jpg) will resize image to 75%

function do_parseImg() {
    $(this).nextAll(".content-img").remove();
    var lines = $(this).text().split("\n");
    var img_re = /^\!\[(.*)\]\((.+)\)$/;

    for (var i = 0; i < lines.length; i++) {
        var line = lines[i].trim();
        var img = line.match(img_re);
        if (img === null) {
            continue;
        }
        console.log(i, img[1]);
        console.log(i, img[2]);
        
        if (img[1] === "") {
            img[1] = 100;
        }
        
        $(this).after('<div class="content-img"><img width="' + img[1] + '%" height="'+ img[1] +'%" src="' + img[2] + '"/></div>')
    }
}

this code is outdated.. it simply doens't work with me

• first i added this line

// @require http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js

then i'm getting this error:

@abbood

working on that

sorry for the inconvenience

Hi Wizmann! Thanks for your work. Any hope for an upgrade on this one sometime in the future?