mirror/notebook
2
0
Fork 0
mirror of https://github.com/jupyter/notebook.git synced 2024-12-09 03:50:45 +08:00
Code Issues Packages Projects Releases Wiki Activity

Implement markdown cell attachments. Allow drag’n’drop of images into markdown cells. See #613

Browse Source
This commit is contained in:
Julien Rebetez 2015-10-19 23:12:57 +02:00
parent b0a49719eb
commit 3462b34fca
2 changed files with 59 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
notebook/static/base/js/security.js
View File

@ -30,6 +30,10 @@ define([
}
}
}
// TODO(julienr): This is a ugly hack to work around the fact that
// by default caja doesn't seem to like base64 src for inline markdown
// images. Not sure if we should do that here
ATTRIBS['img::src'] = 0;
return caja.sanitizeAttribs(tagName, attribs, opt_naiveUriRewriter, opt_nmTokenPolicy, opt_logger);
};

55
notebook/static/notebook/js/textcell.js
View File

@ -256,6 +256,50 @@ define([
}
};
/** @method bind_events **/
MarkdownCell.prototype.bind_events = function () {
TextCell.prototype.bind_events.apply(this);
var that = this;
// Inline images insertion. When a user drops an image in a markdown
// cell, we do the following :
// - We insert the base64-encoded image into the cell metadata
// attachments directory, keyed by the filename.
// - We insert an img tag with a 'nbdata' src that refers to the
// attachments entry.
//
// Prevent the default code_mirror 'drop' event handler (which inserts
// the file content) if this is a recognized media file
this.code_mirror.on("drop", function(cm, evt) {
var pos = that.code_mirror.getCursor();
var files = evt.dataTransfer.files;
for (var i = 0; i < files.length; ++i) {
var file = files[i];
var key = file.name;
// TODO: Do some wildcard mime matching (image/*)
if (file.type == "image/png") {
evt.stopPropagation();
evt.preventDefault();
var reader = new FileReader;
reader.onloadend = function() {
var img_md = '<img width="200px" height="200px" src="nbdata:' + key + '" />';
if (that.metadata.attachments === undefined) {
that.metadata.attachments = {};
}
that.metadata.attachments[key] = {
'data': reader.result,
'mime': file.type
}
//var img_md = '<img height="200px" src="' + reader.result + '" />';
that.code_mirror.replaceRange(img_md, pos);
}
reader.readAsDataURL(file);
}
}
});
};
/**
* @method render
*/
@ -290,6 +334,17 @@ define([
});
// links in markdown cells should open in new tabs
html.find("a[href]").not('[href^="#"]').attr("target", "_blank");
// replace nbdata:<key> by the corresponding entry in metadata
// attachments
html.find('img[src^="nbdata:"]').each(function (i, h) {
h = $(h);
var key = h.attr('src').replace(/^nbdata:/, '');
if (that.metadata.attachments !== undefined &&
key in that.metadata.attachments) {
var att = that.metadata.attachments[key];
h.attr('src', att['data']);
}
});
that.set_rendered(html);
that.typeset();
that.events.trigger("rendered.MarkdownCell", {cell: that});