Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
workflowy-with-image.js
// ==UserScript==
// @name Workflowy markdown tags with images -> images
// @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';
// you can just use markdown images like
// ![what](http://i.imgur.com/R72rW81.jpg)
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]);
// NOTE sure why this isn't working
// if ($(this)[0] != document.activeElement) { return; }
$(this).after('<div class="content-img" style="text-align: left"><img src="' + img[2] + '" alt="' + img[1] + '" title="' + img[1] + '" style="max-width: 400px"/></div>')
}
}
function parseImg() {
$("div.notes div.content").live("click keyup", do_parseImg);
$("div.notes div.content").each(do_parseImg);
};
$(window).bind("load hashchange", parseImg);
Owner

drosenstark commented Dec 26, 2015

Added alt and title tags, which make sense

Owner

drosenstark commented Dec 26, 2015

also centered image and made it smaller

Wizmann commented Dec 29, 2015

Great!

But I suppose the style of image width should be control by the property "max-width" rather than the "width" property with a magic number.

:)

Owner

drosenstark commented Mar 19, 2016

Thanks Wizmann, never saw this comment. Just changed to max-width per your suggestion, much better idea!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment