From 3462b34fcac510eb1c5aab093584dda84cb4ca85 Mon Sep 17 00:00:00 2001
From: Julien Rebetez <julien@fhtagn.net>
Date: Mon, 19 Oct 2015 23:12:57 +0200
Subject: [PATCH 01/24] =?UTF-8?q?Implement=20markdown=20cell=20attachments?=
 =?UTF-8?q?.=20Allow=20drag=E2=80=99n=E2=80=99drop=20of=20images=20into=20?=
 =?UTF-8?q?markdown=20cells.=20See=20#613?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 notebook/static/base/js/security.js     |  4 ++
 notebook/static/notebook/js/textcell.js | 55 +++++++++++++++++++++++++
 2 files changed, 59 insertions(+)

diff --git a/notebook/static/base/js/security.js b/notebook/static/base/js/security.js
index 6e2b34345..f0d1b125a 100644
--- a/notebook/static/base/js/security.js
+++ b/notebook/static/base/js/security.js
@@ -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);
     };
     
diff --git a/notebook/static/notebook/js/textcell.js b/notebook/static/notebook/js/textcell.js
index ddab2bdc1..d8b8191ae 100644
--- a/notebook/static/notebook/js/textcell.js
+++ b/notebook/static/notebook/js/textcell.js
@@ -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});

From 398c90b0aa5fa518e34b0ddd410f0fd306e9a028 Mon Sep 17 00:00:00 2001
From: Julien Rebetez <julien@fhtagn.net>
Date: Tue, 20 Oct 2015 11:15:07 +0200
Subject: [PATCH 02/24] =?UTF-8?q?Use=20the=20cell=20=E2=80=98attachments?=
 =?UTF-8?q?=E2=80=99=20property=20instead=20of=20=E2=80=98metadata.attachm?=
 =?UTF-8?q?ents=E2=80=99.=20Use=20the=20mime-bundle=20storage=20format=20t?=
 =?UTF-8?q?o=20store=20the=20attachments?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 notebook/static/base/js/utils.js        | 18 ++++++++++++++
 notebook/static/notebook/js/cell.js     |  7 ++++++
 notebook/static/notebook/js/textcell.js | 31 +++++++++++++++----------
 3 files changed, 44 insertions(+), 12 deletions(-)

diff --git a/notebook/static/base/js/utils.js b/notebook/static/base/js/utils.js
index f4514180c..2c6a699a6 100644
--- a/notebook/static/base/js/utils.js
+++ b/notebook/static/base/js/utils.js
@@ -788,6 +788,23 @@ define([
             return MathJax.Hub.Queue(["Typeset", MathJax.Hub, this]);
         });
     };
+
+    var parse_b64_data_uri = function(uri) {
+        /**
+         * Parses a base64 encoded data-uri to extract mimetype and the
+         * base64 string.
+         *
+         * For example, given 'data:image/png;base64,iVBORw', it will return
+         * ["image/png", "iVBORw"]
+         *
+         * Parameters
+         */
+        var regex = /^data:(.+\/.+);base64,(.*)$/;
+        var matches = uri.match(regex);
+        var mime = matches[1];
+        var b64_data = matches[2];
+        return [mime, b64_data];
+    };
     
     var time = {};
     time.milliseconds = {};
@@ -877,6 +894,7 @@ define([
         resolve_promises_dict: resolve_promises_dict,
         reject: reject,
         typeset: typeset,
+        parse_b64_data_uri: parse_b64_data_uri,
         time: time,
         format_datetime: format_datetime,
         datetime_sort_helper: datetime_sort_helper,
diff --git a/notebook/static/notebook/js/cell.js b/notebook/static/notebook/js/cell.js
index 2a792cae9..21918b94d 100644
--- a/notebook/static/notebook/js/cell.js
+++ b/notebook/static/notebook/js/cell.js
@@ -70,6 +70,8 @@ define([
             }
         });
 
+        this.attachments = {};
+
         // backward compat.
         Object.defineProperty(this, 'cm_config', {
             get: function() {
@@ -472,6 +474,8 @@ define([
         var data = {};
         // deepcopy the metadata so copied cells don't share the same object
         data.metadata = JSON.parse(JSON.stringify(this.metadata));
+        // same for attachments
+        data.attachments = JSON.parse(JSON.stringify(this.attachments));
         data.cell_type = this.cell_type;
         return data;
     };
@@ -484,6 +488,9 @@ define([
         if (data.metadata !== undefined) {
             this.metadata = data.metadata;
         }
+        if (data.attachments !== undefined) {
+            this.attachments = data.attachments;
+        }
     };
 
 
diff --git a/notebook/static/notebook/js/textcell.js b/notebook/static/notebook/js/textcell.js
index d8b8191ae..a6db69c5d 100644
--- a/notebook/static/notebook/js/textcell.js
+++ b/notebook/static/notebook/js/textcell.js
@@ -263,8 +263,8 @@ define([
 
         // 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 the base64-encoded image into the cell attachments
+        //   directory, keyed by the filename.
         // - We insert an img tag with a 'nbdata' src that refers to the
         //   attachments entry.
         //
@@ -284,14 +284,19 @@ define([
               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 = {};
+                if (that.attachments === undefined) {
+                  that.attachments = {};
                 }
-                that.metadata.attachments[key] = {
-                  'data': reader.result,
-                  'mime': file.type
+                that.attachments[key] = {};
+                // Strip the "data:image/png;base64," prefix from the data-url
+                // to turn it into a base64 encoded string
+                var d = utils.parse_b64_data_uri(reader.result);
+                if (file.type != d[0]) {
+                    // TODO(julienr): Not sure what we should do in this case
+                    console.log('File type (' + file.type + ') != data-uri ' +
+                                'type (' + d[0] + ')');
                 }
-                //var img_md = '<img height="200px" src="' + reader.result + '" />';
+                that.attachments[key][file.type] = [d[1]];
                 that.code_mirror.replaceRange(img_md, pos);
               }
               reader.readAsDataURL(file);
@@ -339,10 +344,12 @@ define([
                 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']);
+
+                  if (that.attachments !== undefined &&
+                      key in that.attachments) {
+                    var att = that.attachments[key];
+                    var mime = Object.keys(att)[0];
+                    h.attr('src', 'data:' + mime + ';base64,' + att[mime][0]);
                   }
                 });
                 that.set_rendered(html);

From 3414b8385538e809abf4348fa46f0b7da42ba87c Mon Sep 17 00:00:00 2001
From: Julien Rebetez <julien@fhtagn.net>
Date: Tue, 20 Oct 2015 11:28:24 +0200
Subject: [PATCH 03/24] Insert markdown markup for attachments images instead
 of HTML

---
 notebook/static/notebook/js/textcell.js | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/notebook/static/notebook/js/textcell.js b/notebook/static/notebook/js/textcell.js
index a6db69c5d..552d910a2 100644
--- a/notebook/static/notebook/js/textcell.js
+++ b/notebook/static/notebook/js/textcell.js
@@ -283,7 +283,8 @@ define([
 
               var reader = new FileReader;
               reader.onloadend = function() {
-                var img_md = '<img width="200px" height="200px" src="nbdata:' + key + '" />';
+                var img_md = '![' + key + '](attachment:' + key + ')';
+
                 if (that.attachments === undefined) {
                   that.attachments = {};
                 }
@@ -339,11 +340,11 @@ 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) {
+                // replace attachment:<key> by the corresponding entry
+                // in the cell's attachments
+                html.find('img[src^="attachment:"]').each(function (i, h) {
                   h = $(h);
-                  var key = h.attr('src').replace(/^nbdata:/, '');
+                  var key = h.attr('src').replace(/^attachment:/, '');
 
                   if (that.attachments !== undefined &&
                       key in that.attachments) {

From 1c6f589ff65b24c9a5b62b117e0ff7230d5d0209 Mon Sep 17 00:00:00 2001
From: Julien Rebetez <julien@fhtagn.net>
Date: Tue, 20 Oct 2015 16:52:45 +0200
Subject: [PATCH 04/24] Add attachments cell toolbar option which opens a
 metadata-like JSON editor.

---
 notebook/static/base/js/dialog.js             | 63 +++++++++++++++++++
 .../js/celltoolbarpresets/attachments.js      | 48 ++++++++++++++
 notebook/static/notebook/js/notebook.js       |  2 +
 3 files changed, 113 insertions(+)
 create mode 100644 notebook/static/notebook/js/celltoolbarpresets/attachments.js

diff --git a/notebook/static/base/js/dialog.js b/notebook/static/base/js/dialog.js
index ac9885e84..02c113597 100644
--- a/notebook/static/base/js/dialog.js
+++ b/notebook/static/base/js/dialog.js
@@ -207,11 +207,74 @@ define(function(require) {
 
         modal_obj.on('shown.bs.modal', function(){ editor.refresh(); });
     };
+
+    var edit_attachments = function (options) {
+        options.name = options.name || "Cell";
+        var error_div = $('<div/>').css('color', 'red');
+        var message =
+            "Manually edit the JSON below to manipulate attachments for this " + options.name + ".";
+
+        var textarea = $('<textarea/>')
+            .attr('rows', '13')
+            .attr('cols', '80')
+            .attr('name', 'attachments')
+            .text(JSON.stringify(options.attachments || {}, null, 2));
+
+        var dialogform = $('<div/>').attr('title', 'Edit attachments')
+            .append(
+                $('<form/>').append(
+                    $('<fieldset/>').append(
+                        $('<label/>')
+                        .attr('for','attachments')
+                        .text(message)
+                        )
+                        .append(error_div)
+                        .append($('<br/>'))
+                        .append(textarea)
+                    )
+            );
+        var editor = CodeMirror.fromTextArea(textarea[0], {
+            lineNumbers: true,
+            matchBrackets: true,
+            indentUnit: 2,
+            autoIndent: true,
+            mode: 'application/json',
+        });
+        var modal_obj = modal({
+            title: "Edit " + options.name + " Attachments",
+            body: dialogform,
+            buttons: {
+                OK: { class : "btn-primary",
+                    click: function() {
+                        /**
+                         * validate json and set it
+                         */
+                        var new_att;
+                        try {
+                            new_att = JSON.parse(editor.getValue());
+                        } catch(e) {
+                            console.log(e);
+                            error_div.text('WARNING: Could not save invalid JSON.');
+                            return false;
+                        }
+                        options.callback(new_att);
+                    }
+                },
+                Cancel: {}
+            },
+            notebook: options.notebook,
+            keyboard_manager: options.keyboard_manager,
+        });
+
+        modal_obj.on('shown.bs.modal', function(){ editor.refresh(); });
+    };
+
     
     var dialog = {
         modal : modal,
         kernel_modal : kernel_modal,
         edit_metadata : edit_metadata,
+        edit_attachments : edit_attachments
     };
 
     return dialog;
diff --git a/notebook/static/notebook/js/celltoolbarpresets/attachments.js b/notebook/static/notebook/js/celltoolbarpresets/attachments.js
new file mode 100644
index 000000000..93f5de7a9
--- /dev/null
+++ b/notebook/static/notebook/js/celltoolbarpresets/attachments.js
@@ -0,0 +1,48 @@
+// Copyright (c) Jupyter Development Team.
+// Distributed under the terms of the Modified BSD License.
+
+define([
+    'jquery',
+    'notebook/js/celltoolbar',
+    'base/js/dialog',
+], function($, celltoolbar, dialog) {
+    "use strict";
+
+    var CellToolbar = celltoolbar.CellToolbar;
+
+    var edit_attachments_dialog = function(cell) {
+        dialog.edit_attachments({
+          attachments: cell.attachments,
+          callback: function(attachments) {
+            cell.attachments = attachments;
+          },
+          name: 'cell',
+          notebook: cell.notebook,
+          keyboard_manager: cell.keyboard_manager
+        });
+    };
+
+    var add_dialog_button = function(div, cell) {
+        var button_container = $(div);
+        var button = $('<button />')
+            .addClass('btn btn-default btn-xs')
+            .text('Edit Attachments')
+            .click( function() {
+              edit_attachments_dialog(cell);
+              return false;
+            });
+        button_container.append(button);
+    };
+
+    var register = function(notebook) {
+      CellToolbar.register_callback('attachments.edit', add_dialog_button);
+
+      var attachments_preset = [];
+      attachments_preset.push('attachments.edit');
+
+      CellToolbar.register_preset('Attachments', attachments_preset, notebook);
+      console.log('Attachments editing toolbar loaded.');
+
+    };
+    return {'register' : register}
+});
diff --git a/notebook/static/notebook/js/notebook.js b/notebook/static/notebook/js/notebook.js
index 020d0779a..3ba7b70ce 100644
--- a/notebook/static/notebook/js/notebook.js
+++ b/notebook/static/notebook/js/notebook.js
@@ -26,6 +26,7 @@ define(function (require) {
     var default_celltoolbar = require('notebook/js/celltoolbarpresets/default');
     var rawcell_celltoolbar = require('notebook/js/celltoolbarpresets/rawcell');
     var slideshow_celltoolbar = require('notebook/js/celltoolbarpresets/slideshow');
+    var attachments_celltoolbar = require('notebook/js/celltoolbarpresets/attachments');
     var scrollmanager = require('notebook/js/scrollmanager');
     var commandpalette = require('notebook/js/commandpalette');
 
@@ -155,6 +156,7 @@ define(function (require) {
         default_celltoolbar.register(this);
         rawcell_celltoolbar.register(this);
         slideshow_celltoolbar.register(this);
+        attachments_celltoolbar.register(this);
 
         // prevent assign to miss-typed properties.
         Object.seal(this);

From 13bcdc909569d4056ffd64e50e708d6e64edba61 Mon Sep 17 00:00:00 2001
From: Julien Rebetez <julien@fhtagn.net>
Date: Tue, 20 Oct 2015 17:05:44 +0200
Subject: [PATCH 05/24] Keep the attachments even if the cell type changes

---
 notebook/static/notebook/js/notebook.js | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/notebook/static/notebook/js/notebook.js b/notebook/static/notebook/js/notebook.js
index 3ba7b70ce..a37e83e11 100644
--- a/notebook/static/notebook/js/notebook.js
+++ b/notebook/static/notebook/js/notebook.js
@@ -1298,6 +1298,9 @@ define(function (require) {
                 }
                 //metadata
                 target_cell.metadata = source_cell.metadata;
+                // attachments (we transfer them so they aren't lost if the
+                // cell is turned back into markdown)
+                target_cell.attachments = source_cell.attachments;
 
                 target_cell.set_text(text);
                 // make this value the starting point, so that we can only undo
@@ -1346,6 +1349,8 @@ define(function (require) {
                 }
                 // metadata
                 target_cell.metadata = source_cell.metadata;
+                target_cell.attachments = source_cell.attachments;
+
                 // We must show the editor before setting its contents
                 target_cell.unrender();
                 target_cell.set_text(text);
@@ -1398,6 +1403,10 @@ define(function (require) {
                 }
                 //metadata
                 target_cell.metadata = source_cell.metadata;
+                // attachments (we transfer them so they aren't lost if the
+                // cell is turned back into markdown)
+                target_cell.attachments = source_cell.attachments;
+
                 // We must show the editor before setting its contents
                 target_cell.unrender();
                 target_cell.set_text(text);

From 480c90e4737487fd80f2d95a51447434579a59f3 Mon Sep 17 00:00:00 2001
From: Julien Rebetez <julien@fhtagn.net>
Date: Tue, 20 Oct 2015 23:17:53 +0200
Subject: [PATCH 06/24] Refactor the inline image drop logic. Preliminary
 copy/paste support.

---
 notebook/static/notebook/js/textcell.js | 125 ++++++++++++++++--------
 1 file changed, 86 insertions(+), 39 deletions(-)

diff --git a/notebook/static/notebook/js/textcell.js b/notebook/static/notebook/js/textcell.js
index 552d910a2..351fb7855 100644
--- a/notebook/static/notebook/js/textcell.js
+++ b/notebook/static/notebook/js/textcell.js
@@ -256,53 +256,100 @@ define([
         }
     };
 
+    // TODO(julienr): Move to cell if the attachments is accepted as a cell
+    // attribute (not markdown specific)
+    MarkdownCell.prototype.add_attachment = function (key, mime_type, b64_data) {
+        /**
+         * Add a new attachment to this cell
+         */
+        if (this.attachments === undefined) {
+            this.attachments = {};
+        }
+        this.attachments[key] = {};
+        this.attachments[key][mime_type] = [b64_data];
+    };
+
+    MarkdownCell.prototype.insert_inline_image_from_blob = function(blob) {
+        /**
+         * Insert markup for an inline image at the current cursor position.
+         * This works as follow :
+         * - We insert the base64-encoded blob data into the cell attachments
+         *   dictionary, keyed by the filename.
+         * - We insert an img tag with a 'attachment:key' src that refers to
+         *   the attachments entry.
+         *
+         * Parameters:
+         *  file: Blob
+         *      The JS Blob object (e.g. from the DataTransferItem)
+         */
+        var that = this;
+        var pos = this.code_mirror.getCursor();
+        var reader = new FileReader;
+        // We can get either a named file (drag'n'drop) or a blob (copy/paste)
+        // We generate names for blobs
+        var key;
+        if (blob.name !== undefined) {
+            key = blob.name;
+        } else {
+            if (that.attachments === undefined) {
+                key = '_auto_0';
+            } else {
+                key = '_auto_' + Object.keys(that.attachments).length;
+            }
+        }
+
+        reader.onloadend = function() {
+            var d = utils.parse_b64_data_uri(reader.result);
+            if (blob.type != d[0]) {
+                // TODO(julienr): Not sure what we should do in this case
+                console.log('File type (' + blob.type + ') != data-uri ' +
+                            'type (' + d[0] + ')');
+            }
+            that.add_attachment(key, blob.type, d[1]);
+            var img_md = '![' + key + '](attachment:' + key + ')';
+            that.code_mirror.replaceRange(img_md, pos);
+        }
+        reader.readAsDataURL(blob);
+    };
+
     /** @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 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 = '![' + key + '](attachment:' + key + ')';
-
-                if (that.attachments === undefined) {
-                  that.attachments = {};
+        var attachment_regex = /^image\/.*$/;
+
+        // Event handlers to allow users to insert image using either
+        // drag'n'drop or copy/paste
+        var div = that.code_mirror.getWrapperElement();
+        $(div).on('paste', function(evt) {
+            var data = evt.originalEvent.clipboardData;
+            var items = data.items;
+            for (var i = 0; i < items.length; ++i) {
+                var item = items[i];
+                if (item.kind == 'file' && attachment_regex.test(item.type)) {
+                    // TODO(julienr): This does not stop code_mirror from pasting
+                    // the filename.
+                    evt.stopPropagation();
+                    evt.preventDefault();
+                    that.insert_inline_image_from_blob(item.getAsFile());
                 }
-                that.attachments[key] = {};
-                // Strip the "data:image/png;base64," prefix from the data-url
-                // to turn it into a base64 encoded string
-                var d = utils.parse_b64_data_uri(reader.result);
-                if (file.type != d[0]) {
-                    // TODO(julienr): Not sure what we should do in this case
-                    console.log('File type (' + file.type + ') != data-uri ' +
-                                'type (' + d[0] + ')');
+            }
+        });
+
+        this.code_mirror.on("drop", function(cm, evt) {
+            var files = evt.dataTransfer.files;
+            for (var i = 0; i < files.length; ++i) {
+                var file = files[i];
+                if (attachment_regex.test(file.type)) {
+                    // Prevent the default code_mirror 'drop' event handler
+                    // (which inserts the file content) if this is a
+                    // recognized media file
+                    evt.stopPropagation();
+                    evt.preventDefault();
+                    that.insert_inline_image_from_blob(file);
                 }
-                that.attachments[key][file.type] = [d[1]];
-                that.code_mirror.replaceRange(img_md, pos);
-              }
-              reader.readAsDataURL(file);
             }
-          }
         });
     };
 

From 22fccff4435849a08d62eeaa590a5d256bca8569 Mon Sep 17 00:00:00 2001
From: Julien Rebetez <julien@fhtagn.net>
Date: Thu, 22 Oct 2015 10:02:28 +0200
Subject: [PATCH 07/24] Add a new insert-image action and corresponding dialog
 to insert inline images from menu.

---
 notebook/static/base/js/dialog.js       | 51 ++++++++++++++++++++++++-
 notebook/static/notebook/js/actions.js  |  7 ++++
 notebook/static/notebook/js/menubar.js  |  1 +
 notebook/static/notebook/js/notebook.js | 40 +++++++++++++++++++
 notebook/static/notebook/js/textcell.js | 19 +++++++++
 notebook/templates/notebook.html        |  2 +
 6 files changed, 119 insertions(+), 1 deletion(-)

diff --git a/notebook/static/base/js/dialog.js b/notebook/static/base/js/dialog.js
index 02c113597..8492c431c 100644
--- a/notebook/static/base/js/dialog.js
+++ b/notebook/static/base/js/dialog.js
@@ -80,6 +80,9 @@ define(function(require) {
                 .addClass("btn btn-default btn-sm")
                 .attr("data-dismiss", "modal")
                 .text(label);
+            if (btn_opts.id) {
+                button.attr('id', btn_opts.id);
+            }
             if (btn_opts.click) {
                 button.click($.proxy(btn_opts.click, dialog_content));
             }
@@ -269,12 +272,58 @@ define(function(require) {
         modal_obj.on('shown.bs.modal', function(){ editor.refresh(); });
     };
 
+    var insert_image = function (options) {
+        var message =
+            "Select a file to insert.";
+        var file_input = $('<input/>')
+            .attr('type', 'file')
+            .attr('accept', 'image/*')
+            .attr('name', 'file')
+            .on('change', function(file) {
+                var $btn = $(modal_obj).find('#btn_ok');
+                if (this.files.length > 0) {
+                    $btn.removeClass('disabled');
+                } else {
+                    $btn.addClass('disabled');
+                }
+            });
+        var dialogform = $('<div/>').attr('title', 'Edit attachments')
+            .append(
+                $('<form/>').append(
+                    $('<fieldset/>').append(
+                        $('<label/>')
+                        .attr('for','file')
+                        .text(message)
+                        )
+                        .append($('<br/>'))
+                        .append(file_input)
+                    )
+            );
+        var modal_obj = modal({
+            title: "Pick a file",
+            body: dialogform,
+            buttons: {
+                OK: {
+                    id : 'btn_ok',
+                    class : "btn-primary disabled",
+                    click: function() {
+                        options.callback(file_input[0].files[0]);
+                    }
+                },
+                Cancel: {}
+            },
+            notebook: options.notebook,
+            keyboard_manager: options.keyboard_manager,
+        });
+    };
+
     
     var dialog = {
         modal : modal,
         kernel_modal : kernel_modal,
         edit_metadata : edit_metadata,
-        edit_attachments : edit_attachments
+        edit_attachments : edit_attachments,
+        insert_image : insert_image
     };
 
     return dialog;
diff --git a/notebook/static/notebook/js/actions.js b/notebook/static/notebook/js/actions.js
index 152b6fbfc..682c8d0da 100644
--- a/notebook/static/notebook/js/actions.js
+++ b/notebook/static/notebook/js/actions.js
@@ -153,6 +153,13 @@ define(function(require){
                 env.notebook.command_mode();
             }
         },
+        'insert-image': {
+            help      : 'insert image',
+            help_index : 'dz',
+            handler : function (env) {
+                env.notebook.insert_image();
+            }
+        },
         'split-cell-at-cursor': {
             help    : 'split cell',
             help_index : 'ea',
diff --git a/notebook/static/notebook/js/menubar.js b/notebook/static/notebook/js/menubar.js
index 32ca35238..94912c943 100644
--- a/notebook/static/notebook/js/menubar.js
+++ b/notebook/static/notebook/js/menubar.js
@@ -228,6 +228,7 @@ define([
             '#toggle_all_output': 'toggle-all-cells-output-collapsed',
             '#toggle_all_output_scroll': 'toggle-all-cells-output-scrolled',
             '#clear_all_output': 'clear-all-cells-output',
+            '#insert_image': 'insert-image',
         };
 
         for(var idx in id_actions_dict){
diff --git a/notebook/static/notebook/js/notebook.js b/notebook/static/notebook/js/notebook.js
index a37e83e11..1c0d80d4a 100644
--- a/notebook/static/notebook/js/notebook.js
+++ b/notebook/static/notebook/js/notebook.js
@@ -1673,6 +1673,46 @@ define(function (require) {
         this.merge_cells([index, index+1], false);
     };
 
+    // Image insertion
+
+    /**
+     * Shows a dialog letting the user pick an image from her computer and
+     * insert it into the edited markdown cell
+     */
+    Notebook.prototype.insert_image = function () {
+        var that = this;
+        var cell = this.get_selected_cell();
+        // The following should not happen as the menu item is greyed out
+        // when those conditions are not fullfilled (see MarkdownCell
+        // unselect/select/unrender handlers)
+        if (cell.cell_type != 'markdown') {
+            console.log('Error: insert_image called on non-markdown cell');
+            return;
+        }
+        if (cell.rendered) {
+            console.log('Error: insert_image called on rendered cell');
+            return;
+        }
+        dialog.insert_image({
+            callback: function(file) {
+                cell.edit_mode();
+                cell.insert_inline_image_from_blob(file);
+            },
+            notebook: this,
+            keyboard_manager: this.keyboard_manager
+        });
+    };
+
+    /**
+     * Enable/disable the "Insert image" menu item
+     */
+    Notebook.prototype.set_insert_image_enabled = function(enabled) {
+        if (enabled) {
+            $('#insert_image').removeClass('disabled');
+        } else {
+            $('#insert_image').addClass('disabled');
+        }
+    };
 
     // Cell collapsing and output clearing
 
diff --git a/notebook/static/notebook/js/textcell.js b/notebook/static/notebook/js/textcell.js
index 351fb7855..516c8d4ae 100644
--- a/notebook/static/notebook/js/textcell.js
+++ b/notebook/static/notebook/js/textcell.js
@@ -51,6 +51,7 @@ define([
         this.notebook = options.notebook;
         this.events = options.events;
         this.config = options.config;
+        this.notebook = options.notebook;
         
         // we cannot put this as a class key as it has handle to "this".
         var config = utils.mergeopt(TextCell, this.config);
@@ -256,6 +257,24 @@ define([
         }
     };
 
+    MarkdownCell.prototype.unselect = function () {
+        var cont = TextCell.prototype.unselect.apply(this);
+        this.notebook.set_insert_image_enabled(false);
+    };
+
+    MarkdownCell.prototype.select = function () {
+        var cont = TextCell.prototype.select.apply(this);
+        if (cont) {
+            this.notebook.set_insert_image_enabled(!this.rendered);
+        }
+    };
+
+    MarkdownCell.prototype.unrender = function () {
+        var cont = TextCell.prototype.unrender.apply(this);
+        this.notebook.set_insert_image_enabled(true);
+    };
+
+
     // TODO(julienr): Move to cell if the attachments is accepted as a cell
     // attribute (not markdown specific)
     MarkdownCell.prototype.add_attachment = function (key, mime_type, b64_data) {
diff --git a/notebook/templates/notebook.html b/notebook/templates/notebook.html
index 31fd510f6..efa614b2c 100644
--- a/notebook/templates/notebook.html
+++ b/notebook/templates/notebook.html
@@ -143,6 +143,8 @@ data-notebook-path="{{notebook_path | urlencode}}"
                         <li id="edit_nb_metadata"><a href="#">Edit Notebook Metadata</a></li>
                         <li class="divider"></li>
                         <li id="find_and_replace"><a href="#"> Find and Replace </a></li>
+                        <li class="divider"></li>
+                        <li id="insert_image" class="disabled"><a href="#"> Insert Image </a></li>
                     </ul>
                 </li>
                 <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">View</a>

From c4bd66e4b237c6a7dfd3cb0151992ffd0a7d416a Mon Sep 17 00:00:00 2001
From: Julien Rebetez <julien@fhtagn.net>
Date: Mon, 26 Oct 2015 10:52:42 +0100
Subject: [PATCH 08/24] Nicer attachments editing dialog

---
 notebook/static/base/js/dialog.js             | 110 +++++++++++-------
 .../js/celltoolbarpresets/attachments.js      |   3 +
 2 files changed, 72 insertions(+), 41 deletions(-)

diff --git a/notebook/static/base/js/dialog.js b/notebook/static/base/js/dialog.js
index 8492c431c..9a4e5c150 100644
--- a/notebook/static/base/js/dialog.js
+++ b/notebook/static/base/js/dialog.js
@@ -212,55 +212,85 @@ define(function(require) {
     };
 
     var edit_attachments = function (options) {
-        options.name = options.name || "Cell";
-        var error_div = $('<div/>').css('color', 'red');
         var message =
-            "Manually edit the JSON below to manipulate attachments for this " + options.name + ".";
-
-        var textarea = $('<textarea/>')
-            .attr('rows', '13')
-            .attr('cols', '80')
-            .attr('name', 'attachments')
-            .text(JSON.stringify(options.attachments || {}, null, 2));
+            "Current cell attachments";
 
-        var dialogform = $('<div/>').attr('title', 'Edit attachments')
+        var attachments_list = $('<div>')
+            .addClass('list_container')
             .append(
-                $('<form/>').append(
-                    $('<fieldset/>').append(
-                        $('<label/>')
-                        .attr('for','attachments')
-                        .text(message)
-                        )
-                        .append(error_div)
-                        .append($('<br/>'))
-                        .append(textarea)
-                    )
+                $('<div>')
+                .addClass('row list_header')
+                .append(
+                    $('<div>')
+                    .text('Attachments')
+                )
             );
-        var editor = CodeMirror.fromTextArea(textarea[0], {
-            lineNumbers: true,
-            matchBrackets: true,
-            indentUnit: 2,
-            autoIndent: true,
-            mode: 'application/json',
-        });
+
+        var refresh_attachments_list = function() {
+            $(attachments_list).find('.att_row').remove();
+            for (var key in options.attachments) {
+                var mime = Object.keys(options.attachments[key])[0];
+                var delete_btn = $('<button>')
+                    .addClass('delete-button btn btn-default btn-xs btn-danger')
+                    .attr('title', 'Delete')
+                    .css('display', 'inline-block')
+                    .append(
+                        $('<i>')
+                        .addClass('fa fa-trash')
+                    );
+                // This ensures the current value of key is captured since
+                // javascript only has function scope
+                (function(){
+                    var del_key = key;
+                    delete_btn.click(function() {
+                        // TODO(julienr): Add confirmation dialog
+                        delete options.attachments[del_key];
+                        refresh_attachments_list();
+                        return false;
+                    });
+                })();
+                var row = $('<div>')
+                    .addClass('col-md-12 att_row')
+                    .append(
+                        $('<div>')
+                        .addClass('row')
+                        .append(
+                            $('<div>')
+                            .addClass('col-xs-4')
+                            .text(key)
+                        )
+                        .append(
+                            $('<div>')
+                            .addClass('col-xs-4 text-muted')
+                            .text(mime)
+                        )
+                        .append(
+                            $('<div>')
+                            .addClass('item-buttons pull-right')
+                            .append(delete_btn)
+                        )
+                    );
+
+                attachments_list.append($('<div>')
+                    .addClass('list_item row')
+                    .append(row)
+                );
+            }
+        };
+        refresh_attachments_list();
+
+        var dialogform = $('<div/>')
+            .attr('title', 'Edit attachments')
+            .append(message)
+            .append('<br />')
+            .append(attachments_list)
         var modal_obj = modal({
             title: "Edit " + options.name + " Attachments",
             body: dialogform,
             buttons: {
                 OK: { class : "btn-primary",
                     click: function() {
-                        /**
-                         * validate json and set it
-                         */
-                        var new_att;
-                        try {
-                            new_att = JSON.parse(editor.getValue());
-                        } catch(e) {
-                            console.log(e);
-                            error_div.text('WARNING: Could not save invalid JSON.');
-                            return false;
-                        }
-                        options.callback(new_att);
+                        options.callback(options.attachments);
                     }
                 },
                 Cancel: {}
@@ -268,8 +298,6 @@ define(function(require) {
             notebook: options.notebook,
             keyboard_manager: options.keyboard_manager,
         });
-
-        modal_obj.on('shown.bs.modal', function(){ editor.refresh(); });
     };
 
     var insert_image = function (options) {
diff --git a/notebook/static/notebook/js/celltoolbarpresets/attachments.js b/notebook/static/notebook/js/celltoolbarpresets/attachments.js
index 93f5de7a9..d41638ce9 100644
--- a/notebook/static/notebook/js/celltoolbarpresets/attachments.js
+++ b/notebook/static/notebook/js/celltoolbarpresets/attachments.js
@@ -15,6 +15,9 @@ define([
           attachments: cell.attachments,
           callback: function(attachments) {
             cell.attachments = attachments;
+            // Force cell refresh
+            cell.unrender();
+            cell.render();
           },
           name: 'cell',
           notebook: cell.notebook,

From b21348f75bb45879fb6bbd1dd005ca51bcdf4fbd Mon Sep 17 00:00:00 2001
From: Julien Rebetez <julien@fhtagn.net>
Date: Tue, 27 Oct 2015 10:02:25 +0100
Subject: [PATCH 09/24] =?UTF-8?q?Attachments=20dialog=20only=20apply=20del?=
 =?UTF-8?q?etion=20on=20=E2=80=98Apply=E2=80=99.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 notebook/static/base/js/dialog.js | 155 ++++++++++++++++++------------
 1 file changed, 96 insertions(+), 59 deletions(-)

diff --git a/notebook/static/base/js/dialog.js b/notebook/static/base/js/dialog.js
index 9a4e5c150..99d37440e 100644
--- a/notebook/static/base/js/dialog.js
+++ b/notebook/static/base/js/dialog.js
@@ -212,72 +212,106 @@ define(function(require) {
     };
 
     var edit_attachments = function (options) {
-        var message =
-            "Current cell attachments";
+        // This shows the Edit Attachments dialog. This dialog allows the
+        // user to delete attachments. We show a list of attachments to
+        // the user and he can mark some of them for deletion. The deletion
+        // is applied when the 'Apply' button of this dialog is pressed.
+        var message;
+        var attachments_list;
+        if (Object.keys(options.attachments).length == 0) {
+            message = "There are no attachments for this cell.";
+            attachments_list = $('<div>');
+        } else {
+            message = "Current cell attachments";
 
-        var attachments_list = $('<div>')
-            .addClass('list_container')
-            .append(
-                $('<div>')
-                .addClass('row list_header')
+            attachments_list = $('<div>')
+                .addClass('list_container')
                 .append(
                     $('<div>')
-                    .text('Attachments')
-                )
-            );
-
-        var refresh_attachments_list = function() {
-            $(attachments_list).find('.att_row').remove();
-            for (var key in options.attachments) {
-                var mime = Object.keys(options.attachments[key])[0];
-                var delete_btn = $('<button>')
-                    .addClass('delete-button btn btn-default btn-xs btn-danger')
-                    .attr('title', 'Delete')
-                    .css('display', 'inline-block')
-                    .append(
-                        $('<i>')
-                        .addClass('fa fa-trash')
-                    );
-                // This ensures the current value of key is captured since
-                // javascript only has function scope
-                (function(){
-                    var del_key = key;
-                    delete_btn.click(function() {
-                        // TODO(julienr): Add confirmation dialog
-                        delete options.attachments[del_key];
-                        refresh_attachments_list();
-                        return false;
-                    });
-                })();
-                var row = $('<div>')
-                    .addClass('col-md-12 att_row')
+                    .addClass('row list_header')
                     .append(
                         $('<div>')
-                        .addClass('row')
-                        .append(
-                            $('<div>')
-                            .addClass('col-xs-4')
-                            .text(key)
-                        )
-                        .append(
-                            $('<div>')
-                            .addClass('col-xs-4 text-muted')
-                            .text(mime)
-                        )
+                        .text('Attachments')
+                    )
+                );
+
+            // This is a set containing keys of attachments to be deleted when
+            // the Apply button is clicked
+            var to_delete = {};
+
+            var refresh_attachments_list = function() {
+                $(attachments_list).find('.row').remove();
+                for (var key in options.attachments) {
+                    var mime = Object.keys(options.attachments[key])[0];
+                    var deleted = key in to_delete;
+
+                    // This ensures the current value of key is captured since
+                    // javascript only has function scope
+                    var btn;
+                    // Trash/restore button
+                    (function(){
+                        var _key = key;
+                        btn = $('<button>')
+                            .addClass('btn btn-default btn-xs')
+                            .css('display', 'inline-block');
+                        if (deleted) {
+                            btn.attr('title', 'Restore')
+                               .append(
+                                   $('<i>')
+                                   .addClass('fa fa-plus')
+                               );
+                            btn.click(function() {
+                                delete to_delete[_key];
+                                refresh_attachments_list();
+                            });
+                        } else {
+                            btn.attr('title', 'Delete')
+                               .addClass('btn-danger')
+                               .append(
+                                   $('<i>')
+                                   .addClass('fa fa-trash')
+                               );
+                            btn.click(function() {
+                                to_delete[_key] = true;
+                                refresh_attachments_list();
+                            });
+                        }
+                        return btn;
+                    })();
+                    var row = $('<div>')
+                        .addClass('col-md-12 att_row')
                         .append(
                             $('<div>')
-                            .addClass('item-buttons pull-right')
-                            .append(delete_btn)
-                        )
-                    );
+                            .addClass('row')
+                            .append(
+                                $('<div>')
+                                .addClass('att-name col-xs-4')
+                                .text(key)
+                            )
+                            .append(
+                                $('<div>')
+                                .addClass('col-xs-4 text-muted')
+                                .text(mime)
+                            )
+                            .append(
+                                $('<div>')
+                                .addClass('item-buttons pull-right')
+                                .append(btn)
+                            )
+                        );
+                    if (deleted) {
+                        row.find('.att-name')
+                           .css('text-decoration', 'line-through');
+                    }
 
-                attachments_list.append($('<div>')
-                    .addClass('list_item row')
-                    .append(row)
-                );
-            }
-        };
-        refresh_attachments_list();
+                    attachments_list.append($('<div>')
+                        .addClass('list_item row')
+                        .append(row)
+                    );
+                }
+            };
+            refresh_attachments_list();
+        }
 
         var dialogform = $('<div/>')
             .attr('title', 'Edit attachments')
@@ -288,8 +322,11 @@ define(function(require) {
             title: "Edit " + options.name + " Attachments",
             body: dialogform,
             buttons: {
-                OK: { class : "btn-primary",
+                Apply: { class : "btn-primary",
                     click: function() {
+                        for (var key in to_delete) {
+                            delete options.attachments[key];
+                        }
                         options.callback(options.attachments);
                     }
                 },

From e66ff8f0018481f964ff72ec8610e1fc17935a35 Mon Sep 17 00:00:00 2001
From: Julien Rebetez <julien@fhtagn.net>
Date: Tue, 27 Oct 2015 11:09:54 +0100
Subject: [PATCH 10/24] =?UTF-8?q?Fix=20drag/drop=20event=20handler=20to=20?=
 =?UTF-8?q?be=20compatible=20with=20codemirror=205.8,=20which=20doesn?=
 =?UTF-8?q?=E2=80=99t=20allow=20binary=20file=20uploads=20by=20default.=20?=
 =?UTF-8?q?So=20we=20have=20to=20intercept=20the=20dragstart=20event.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 notebook/static/notebook/js/textcell.js | 89 +++++++++++++------------
 1 file changed, 48 insertions(+), 41 deletions(-)

diff --git a/notebook/static/notebook/js/textcell.js b/notebook/static/notebook/js/textcell.js
index 516c8d4ae..edab2b50c 100644
--- a/notebook/static/notebook/js/textcell.js
+++ b/notebook/static/notebook/js/textcell.js
@@ -331,47 +331,6 @@ define([
         reader.readAsDataURL(blob);
     };
 
-    /** @method bind_events **/
-    MarkdownCell.prototype.bind_events = function () {
-        TextCell.prototype.bind_events.apply(this);
-        var that = this;
-
-        var attachment_regex = /^image\/.*$/;
-
-        // Event handlers to allow users to insert image using either
-        // drag'n'drop or copy/paste
-        var div = that.code_mirror.getWrapperElement();
-        $(div).on('paste', function(evt) {
-            var data = evt.originalEvent.clipboardData;
-            var items = data.items;
-            for (var i = 0; i < items.length; ++i) {
-                var item = items[i];
-                if (item.kind == 'file' && attachment_regex.test(item.type)) {
-                    // TODO(julienr): This does not stop code_mirror from pasting
-                    // the filename.
-                    evt.stopPropagation();
-                    evt.preventDefault();
-                    that.insert_inline_image_from_blob(item.getAsFile());
-                }
-            }
-        });
-
-        this.code_mirror.on("drop", function(cm, evt) {
-            var files = evt.dataTransfer.files;
-            for (var i = 0; i < files.length; ++i) {
-                var file = files[i];
-                if (attachment_regex.test(file.type)) {
-                    // Prevent the default code_mirror 'drop' event handler
-                    // (which inserts the file content) if this is a
-                    // recognized media file
-                    evt.stopPropagation();
-                    evt.preventDefault();
-                    that.insert_inline_image_from_blob(file);
-                }
-            }
-        });
-    };
-
     /**
      * @method render
      */
@@ -438,8 +397,56 @@ define([
                 that.focus_editor();
             }
         });
+
+        var attachment_regex = /^image\/.*$/;
+
+        // Event handlers to allow users to insert image using either
+        // drag'n'drop or copy/paste
+        var div = that.code_mirror.getWrapperElement();
+        $(div).on('paste', function(evt) {
+            var data = evt.originalEvent.clipboardData;
+            var items = data.items;
+            for (var i = 0; i < items.length; ++i) {
+                var item = items[i];
+                if (item.kind == 'file' && attachment_regex.test(item.type)) {
+                    // TODO(julienr): This does not stop code_mirror from pasting
+                    // the filename.
+                    evt.stopPropagation();
+                    evt.preventDefault();
+                    that.insert_inline_image_from_blob(item.getAsFile());
+                }
+            }
+        });
+
+        // Allow drop event if the dragged file can be used as an attachment
+        this.code_mirror.on("dragstart", function(cm, evt) {
+            var files = evt.dataTransfer.files;
+            for (var i = 0; i < files.length; ++i) {
+                var file = files[i];
+                if (attachment_regex.test(file.type)) {
+                    return false;
+                }
+            }
+            return true;
+        });
+
+        this.code_mirror.on("drop", function(cm, evt) {
+            var files = evt.dataTransfer.files;
+            for (var i = 0; i < files.length; ++i) {
+                var file = files[i];
+                if (attachment_regex.test(file.type)) {
+                    // Prevent the default code_mirror 'drop' event handler
+                    // (which inserts the file content) if this is a
+                    // recognized media file
+                    evt.stopPropagation();
+                    evt.preventDefault();
+                    that.insert_inline_image_from_blob(file);
+                }
+            }
+        });
     };
 
+
     var RawCell = function (options) {
         /**
          * Constructor

From 646619d5cda85f7f313217247844fd30466f4ed6 Mon Sep 17 00:00:00 2001
From: Julien Rebetez <julien.rebetez@heig-vd.ch>
Date: Fri, 30 Oct 2015 10:52:00 +0100
Subject: [PATCH 11/24] Check that we have items in markdown cell paste handler

---
 notebook/static/notebook/js/textcell.js | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/notebook/static/notebook/js/textcell.js b/notebook/static/notebook/js/textcell.js
index edab2b50c..b598822b2 100644
--- a/notebook/static/notebook/js/textcell.js
+++ b/notebook/static/notebook/js/textcell.js
@@ -406,14 +406,16 @@ define([
         $(div).on('paste', function(evt) {
             var data = evt.originalEvent.clipboardData;
             var items = data.items;
-            for (var i = 0; i < items.length; ++i) {
-                var item = items[i];
-                if (item.kind == 'file' && attachment_regex.test(item.type)) {
-                    // TODO(julienr): This does not stop code_mirror from pasting
-                    // the filename.
-                    evt.stopPropagation();
-                    evt.preventDefault();
-                    that.insert_inline_image_from_blob(item.getAsFile());
+            if (data.items !== undefined) {
+                for (var i = 0; i < items.length; ++i) {
+                    var item = items[i];
+                    if (item.kind == 'file' && attachment_regex.test(item.type)) {
+                        // TODO(julienr): This does not stop code_mirror from pasting
+                        // the filename.
+                        evt.stopPropagation();
+                        evt.preventDefault();
+                        that.insert_inline_image_from_blob(item.getAsFile());
+                    }
                 }
             }
         });

From 865de472336c3624e4faf502216367a4991df0c3 Mon Sep 17 00:00:00 2001
From: Julien Rebetez <julien.rebetez@heig-vd.ch>
Date: Fri, 30 Oct 2015 10:52:36 +0100
Subject: [PATCH 12/24] Add Cut/Copy/Paste Cell attachments menu items

---
 notebook/static/notebook/js/actions.js  | 21 +++++++++
 notebook/static/notebook/js/notebook.js | 63 ++++++++++++++++++++++++-
 notebook/templates/notebook.html        |  4 ++
 3 files changed, 87 insertions(+), 1 deletion(-)

diff --git a/notebook/static/notebook/js/actions.js b/notebook/static/notebook/js/actions.js
index 682c8d0da..83df33bee 100644
--- a/notebook/static/notebook/js/actions.js
+++ b/notebook/static/notebook/js/actions.js
@@ -160,6 +160,27 @@ define(function(require){
                 env.notebook.insert_image();
             }
         },
+        'cut-cell-attachments': {
+            help    : 'cut cell attachments',
+            help_index : 'dza',
+            handler: function (env) {
+                env.notebook.cut_cell_attachments();
+            }
+        },
+        'copy-cell-attachments': {
+            help    : 'copy cell attachments',
+            help_index: 'dzb',
+            handler: function (env) {
+                env.notebook.copy_cell_attachments();
+            }
+        },
+        'paste-cell-attachments': {
+            help    : 'paste cell attachments',
+            help_index: 'dzc',
+            handler: function (env) {
+                env.notebook.paste_cell_attachments();
+            }
+        },
         'split-cell-at-cursor': {
             help    : 'split cell',
             help_index : 'ea',
diff --git a/notebook/static/notebook/js/notebook.js b/notebook/static/notebook/js/notebook.js
index 1c0d80d4a..28cc30c3c 100644
--- a/notebook/static/notebook/js/notebook.js
+++ b/notebook/static/notebook/js/notebook.js
@@ -128,6 +128,7 @@ define(function (require) {
         this.clipboard = null;
         this.undelete_backup_stack = [];
         this.paste_enabled = false;
+        this.paste_attachments_enabled = false;
         this.writable = false;
         // It is important to start out in command mode to match the intial mode
         // of the KeyboardManager.
@@ -1673,7 +1674,7 @@ define(function (require) {
         this.merge_cells([index, index+1], false);
     };
 
-    // Image insertion
+    // Attachments handling
 
     /**
      * Shows a dialog letting the user pick an image from her computer and
@@ -1703,6 +1704,66 @@ define(function (require) {
         });
     };
 
+    /**
+     * Cut the attachments of a cell
+     */
+    Notebook.prototype.cut_cell_attachments = function() {
+        var cell = this.get_selected_cell();
+        this.clipboard_attachments = cell.attachments;
+        this.enable_attachments_paste();
+        cell.attachments = {};
+        cell.unrender();
+        cell.render();
+    };
+
+    /**
+     * Copy the attachments of a cell
+     */
+    Notebook.prototype.copy_cell_attachments = function() {
+        var cell = this.get_selected_cell();
+        // Do a deep copy of attachments to avoid subsequent modification
+        // to the cell to modify the clipboard
+        this.clipboard_attachments = $.extend(true, {}, cell.attachments);
+        this.enable_attachments_paste();
+        cell.unrender();
+        cell.render();
+    };
+
+    /**
+     * Paste the attachments in the clipboard into the currently selected
+     * cell
+     */
+    Notebook.prototype.paste_cell_attachments = function() {
+        if (this.clipboard_attachments !== null &&
+            this.paste_attachments_enabled) {
+            var cell = this.get_selected_cell();
+            $.extend(cell.attachments, this.clipboard_attachments);
+            cell.unrender();
+            cell.render();
+        }
+    };
+
+    /**
+     * Disable the "Paste Cell Attachments" menu item
+     */
+    Notebook.prototype.disable_attachments_paste = function () {
+        if (this.paste_attachments_enabled) {
+            $('#paste_cell_attachments').addClass('disabled');
+            this.paste_attachments_enabled = false;
+        }
+    };
+
+    /**
+     * Enable the "Paste Cell Attachments" menu item
+     */
+    Notebook.prototype.enable_attachments_paste = function () {
+        var that = this;
+        if (!this.paste_attachments_enabled) {
+            $('#paste_cell_attachments').removeClass('disabled');
+            this.paste_attachments_enabled = true;
+        }
+    };
+
     /**
      * Enable/disable the "Insert image" menu item
      */
diff --git a/notebook/templates/notebook.html b/notebook/templates/notebook.html
index efa614b2c..c14d38ab1 100644
--- a/notebook/templates/notebook.html
+++ b/notebook/templates/notebook.html
@@ -144,6 +144,10 @@ data-notebook-path="{{notebook_path | urlencode}}"
                         <li class="divider"></li>
                         <li id="find_and_replace"><a href="#"> Find and Replace </a></li>
                         <li class="divider"></li>
+                        <li id="cut_cell_attachments"><a href="#">Cut Cell Attachments</a></li>
+                        <li id="copy_cell_attachments"><a href="#">Copy Cell Attachments</a></li>
+                        <li id="paste_cell_attachments" class="disabled"><a href="#">Paste Cell Attachments</a></li>
+                        <li class="divider"></li>
                         <li id="insert_image" class="disabled"><a href="#"> Insert Image </a></li>
                     </ul>
                 </li>

From 6cc468db526d73e8a191fa341c669d00ce3e6c36 Mon Sep 17 00:00:00 2001
From: Julien Rebetez <julien.rebetez@heig-vd.ch>
Date: Mon, 9 Nov 2015 11:07:38 +0100
Subject: [PATCH 13/24] Add tests for attachments insert menuitem

---
 notebook/static/base/js/dialog.js            |   2 +-
 notebook/tests/_testdata/black_square_22.png | Bin 0 -> 145 bytes
 notebook/tests/notebook/attachments.js       |  73 +++++++++++++++++++
 3 files changed, 74 insertions(+), 1 deletion(-)
 create mode 100644 notebook/tests/_testdata/black_square_22.png
 create mode 100644 notebook/tests/notebook/attachments.js

diff --git a/notebook/static/base/js/dialog.js b/notebook/static/base/js/dialog.js
index 99d37440e..f6877a935 100644
--- a/notebook/static/base/js/dialog.js
+++ b/notebook/static/base/js/dialog.js
@@ -354,7 +354,7 @@ define(function(require) {
             });
         var dialogform = $('<div/>').attr('title', 'Edit attachments')
             .append(
-                $('<form/>').append(
+                $('<form id="insert-image-form" />').append(
                     $('<fieldset/>').append(
                         $('<label/>')
                         .attr('for','file')
diff --git a/notebook/tests/_testdata/black_square_22.png b/notebook/tests/_testdata/black_square_22.png
new file mode 100644
index 0000000000000000000000000000000000000000..371f52044f75ab1b5793daeafc585370f6d8a78a
GIT binary patch
literal 145
zcmeAS@N?(olHy`uVBq!ia0vp^Od!kwBL7~QRScv!3p^r$G`BDaGcwGYBLNg-FY)ws
zWxvnO$*E~-;ULup6p}1)jVN)>&&^HED`9XhN=+<DO;IS%EXh!C_w)@2Z{!mPD&qEZ
haSY+Oo}A#o#=yYGz-ajLt|(BL!PC{xWt~$(69664AR+(&

literal 0
HcmV?d00001

diff --git a/notebook/tests/notebook/attachments.js b/notebook/tests/notebook/attachments.js
new file mode 100644
index 000000000..dafdeedc8
--- /dev/null
+++ b/notebook/tests/notebook/attachments.js
@@ -0,0 +1,73 @@
+//
+// Test cell attachments
+//
+var fs = require('fs');
+casper.notebook_test(function () {
+    // Test the Edit->Insert Image menu to insert new attachments
+    "use strict";
+    casper.test.info("Testing attachments insertion through the menuitem");
+
+    this.viewport(1024, 768);
+
+    // Click on menuitem
+    var selector = '#insert_image > a';
+    this.waitForSelector(selector);
+    this.thenEvaluate(function(sel) {
+        IPython.notebook.to_markdown();
+        var cell = IPython.notebook.get_selected_cell();
+        cell.set_text("");
+        cell.unrender();
+
+        $(sel).click();
+    }, selector);
+    // Wait for the dialog to be shown
+    this.waitUntilVisible(".modal-body");
+    this.wait(200);
+
+    // Select the image file to insert
+
+    // For some reason, this doesn't seem to work in a reliable way in
+    // phantomjs. So we manually set the input's files attribute
+    //this.page.uploadFile('.modal-body input[name=file]', 'test.png')
+    this.then(function() {
+        var fname = 'notebook/tests/_testdata/black_square_22.png';
+        if (!fs.exists(fname)) {
+            this.test.fail(
+                " does not exist, are you running the tests " +
+                "from the root directory ? "
+            );
+        }
+        this.fill('form#insert-image-form', {'file': fname});
+    });
+
+    // Validate and render the markdown cell
+    this.thenClick('#btn_ok');
+    this.thenEvaluate(function() {
+        IPython.notebook.get_cell(0).render();
+    });
+    this.wait(300);
+    // Check that an <img> tag has been inserted and that it contains the
+    // image
+    this.then(function() {
+        var img = this.evaluate(function() {
+            var cell = IPython.notebook.get_cell(0);
+            var img = $("div.text_cell_render").find("img");
+            return {
+                src: img.attr("src"),
+                width: img.width(),
+                height: img.height(),
+            };
+        });
+        this.test.assertType(img, "object", "Image('image/png')");
+        this.test.assertEquals(img.src.split(',')[0],
+                               "data:image/png;base64",
+                               "Image data-uri prefix");
+        this.test.assertEquals(img.width, 2, "width == 2");
+        this.test.assertEquals(img.height, 2, "height == 2");
+    });
+
+    //this.then(function() {
+        //this.capture('test.png');
+    //});
+});
+

From aa460ffecc9b4c3042a3a80ee1e459c789d8240c Mon Sep 17 00:00:00 2001
From: Julien Rebetez <julien.rebetez@heig-vd.ch>
Date: Tue, 9 Feb 2016 11:23:14 +0100
Subject: [PATCH 14/24] Fix speed issues when attaching large images

---
 notebook/static/base/js/utils.js | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/notebook/static/base/js/utils.js b/notebook/static/base/js/utils.js
index 2c6a699a6..6c15fd766 100644
--- a/notebook/static/base/js/utils.js
+++ b/notebook/static/base/js/utils.js
@@ -799,10 +799,14 @@ define([
          *
          * Parameters
          */
-        var regex = /^data:(.+\/.+);base64,(.*)$/;
+        // For performance reasons, the non-greedy ? qualifiers are crucial so
+        // that the matcher stops early on big blobs. Without them, it will try
+        // to match the whole blob which can take ages
+        var regex = /^data:(.+?\/.+?);base64,/;
         var matches = uri.match(regex);
         var mime = matches[1];
-        var b64_data = matches[2];
+        // matches[0] contains the whole data-uri prefix
+        var b64_data = uri.slice(matches[0].length);
         return [mime, b64_data];
     };
     

From c012835e675508376821c8f80c5037a8c3cf0e3b Mon Sep 17 00:00:00 2001
From: Julien Rebetez <julien.rebetez@heig-vd.ch>
Date: Tue, 9 Feb 2016 12:02:54 +0100
Subject: [PATCH 15/24] Fix 'insert-image' menu item toggling. Instead of
 disabling the menuitem in unselect, we preventively disable it in Cell.select
 and let cell subtypes re-enable it when needed.

The previous implementation was not handling the first cell correctly if it was non-markdown (because unselect was not called).
---
 notebook/static/notebook/js/cell.js     | 3 +++
 notebook/static/notebook/js/textcell.js | 5 -----
 2 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/notebook/static/notebook/js/cell.js b/notebook/static/notebook/js/cell.js
index 21918b94d..122cee957 100644
--- a/notebook/static/notebook/js/cell.js
+++ b/notebook/static/notebook/js/cell.js
@@ -274,6 +274,9 @@ define([
             this.element.addClass('selected');
             this.element.removeClass('unselected');
             this.selected = true;
+            // disable 'insert image' menu item (specific cell types will enable
+            // it in their override select())
+            this.notebook.set_insert_image_enabled(false);
             return true;
         } else {
             return false;
diff --git a/notebook/static/notebook/js/textcell.js b/notebook/static/notebook/js/textcell.js
index b598822b2..277f80a86 100644
--- a/notebook/static/notebook/js/textcell.js
+++ b/notebook/static/notebook/js/textcell.js
@@ -257,11 +257,6 @@ define([
         }
     };
 
-    MarkdownCell.prototype.unselect = function () {
-        var cont = TextCell.prototype.unselect.apply(this);
-        this.notebook.set_insert_image_enabled(false);
-    };
-
     MarkdownCell.prototype.select = function () {
         var cont = TextCell.prototype.select.apply(this);
         if (cont) {

From 84f38c2cf9bf3ca63d1a05b1b0710b73f55828ad Mon Sep 17 00:00:00 2001
From: Julien Rebetez <julien.rebetez@heig-vd.ch>
Date: Tue, 9 Feb 2016 15:09:11 +0100
Subject: [PATCH 16/24] Make attachments textcell-specific

---
 notebook/static/notebook/js/cell.js     |  6 ------
 notebook/static/notebook/js/textcell.js | 10 ++++++++++
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/notebook/static/notebook/js/cell.js b/notebook/static/notebook/js/cell.js
index 122cee957..97e50e803 100644
--- a/notebook/static/notebook/js/cell.js
+++ b/notebook/static/notebook/js/cell.js
@@ -70,7 +70,6 @@ define([
             }
         });
 
-        this.attachments = {};
 
         // backward compat.
         Object.defineProperty(this, 'cm_config', {
@@ -477,8 +476,6 @@ define([
         var data = {};
         // deepcopy the metadata so copied cells don't share the same object
         data.metadata = JSON.parse(JSON.stringify(this.metadata));
-        // same for attachments
-        data.attachments = JSON.parse(JSON.stringify(this.attachments));
         data.cell_type = this.cell_type;
         return data;
     };
@@ -491,9 +488,6 @@ define([
         if (data.metadata !== undefined) {
             this.metadata = data.metadata;
         }
-        if (data.attachments !== undefined) {
-            this.attachments = data.attachments;
-        }
     };
 
 
diff --git a/notebook/static/notebook/js/textcell.js b/notebook/static/notebook/js/textcell.js
index 277f80a86..104a54e98 100644
--- a/notebook/static/notebook/js/textcell.js
+++ b/notebook/static/notebook/js/textcell.js
@@ -184,7 +184,12 @@ define([
      */
     TextCell.prototype.fromJSON = function (data) {
         Cell.prototype.fromJSON.apply(this, arguments);
+        console.log('data cell_type : ' + data.cell_type + ' this.cell_type : ' + this.cell_type);
         if (data.cell_type === this.cell_type) {
+            if (data.attachments !== undefined) {
+                this.attachments = data.attachments;
+            }
+
             if (data.source !== undefined) {
                 this.set_text(data.source);
                 // make this value the starting point, so that we can only undo
@@ -208,6 +213,11 @@ define([
         if (data.source == this.placeholder) {
             data.source = "";
         }
+        // Deepcopy the attachments so copied cells don't share the same
+        // objects
+        if (this.attachments !== undefined) {
+            data.attachments = JSON.parse(JSON.stringify(this.attachments));
+        }
         return data;
     };
 

From ac9a345400d8a8def6c1fcff664cd333a2e05cd0 Mon Sep 17 00:00:00 2001
From: Julien Rebetez <julien.rebetez@heig-vd.ch>
Date: Tue, 9 Feb 2016 15:09:33 +0100
Subject: [PATCH 17/24] Bump nbformat minor to 4.1 to support attachments

---
 notebook/static/notebook/js/notebook.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/notebook/static/notebook/js/notebook.js b/notebook/static/notebook/js/notebook.js
index 28cc30c3c..a77de79de 100644
--- a/notebook/static/notebook/js/notebook.js
+++ b/notebook/static/notebook/js/notebook.js
@@ -144,7 +144,7 @@ define(function (require) {
         this.minimum_autosave_interval = 120000;
         this.notebook_name_blacklist_re = /[\/\\:]/;
         this.nbformat = 4; // Increment this when changing the nbformat
-        this.nbformat_minor = this.current_nbformat_minor = 0; // Increment this when changing the nbformat
+        this.nbformat_minor = this.current_nbformat_minor = 1; // Increment this when changing the nbformat
         this.codemirror_mode = 'text';
         this.create_elements();
         this.bind_events();

From c8266aa507cc996290872e24aca4e229fd64cf9a Mon Sep 17 00:00:00 2001
From: Julien Rebetez <julien.rebetez@heig-vd.ch>
Date: Tue, 9 Feb 2016 15:32:57 +0100
Subject: [PATCH 18/24] Fix cell attachments copy/paste

---
 notebook/static/notebook/js/menubar.js  |  3 +++
 notebook/static/notebook/js/notebook.js | 29 +++++++++++++++----------
 notebook/static/notebook/js/textcell.js |  3 ++-
 3 files changed, 23 insertions(+), 12 deletions(-)

diff --git a/notebook/static/notebook/js/menubar.js b/notebook/static/notebook/js/menubar.js
index 94912c943..04984803a 100644
--- a/notebook/static/notebook/js/menubar.js
+++ b/notebook/static/notebook/js/menubar.js
@@ -228,6 +228,9 @@ define([
             '#toggle_all_output': 'toggle-all-cells-output-collapsed',
             '#toggle_all_output_scroll': 'toggle-all-cells-output-scrolled',
             '#clear_all_output': 'clear-all-cells-output',
+            '#cut_cell_attachments': 'cut-cell-attachments',
+            '#copy_cell_attachments': 'copy-cell-attachments',
+            '#paste_cell_attachments': 'paste-cell-attachments',
             '#insert_image': 'insert-image',
         };
 
diff --git a/notebook/static/notebook/js/notebook.js b/notebook/static/notebook/js/notebook.js
index a77de79de..78bda1740 100644
--- a/notebook/static/notebook/js/notebook.js
+++ b/notebook/static/notebook/js/notebook.js
@@ -126,6 +126,7 @@ define(function (require) {
         this.kernel = null;
         this.kernel_busy = false;
         this.clipboard = null;
+        this.clipboard_attachments = null;
         this.undelete_backup_stack = [];
         this.paste_enabled = false;
         this.paste_attachments_enabled = false;
@@ -1709,11 +1710,13 @@ define(function (require) {
      */
     Notebook.prototype.cut_cell_attachments = function() {
         var cell = this.get_selected_cell();
-        this.clipboard_attachments = cell.attachments;
-        this.enable_attachments_paste();
-        cell.attachments = {};
-        cell.unrender();
-        cell.render();
+        if (cell.attachments !== undefined) {
+            this.clipboard_attachments = cell.attachments;
+            this.enable_attachments_paste();
+            delete cell.attachments;
+            cell.unrender();
+            cell.render();
+        }
     };
 
     /**
@@ -1721,12 +1724,13 @@ define(function (require) {
      */
     Notebook.prototype.copy_cell_attachments = function() {
         var cell = this.get_selected_cell();
-        // Do a deep copy of attachments to avoid subsequent modification
-        // to the cell to modify the clipboard
-        this.clipboard_attachments = $.extend(true, {}, cell.attachments);
-        this.enable_attachments_paste();
-        cell.unrender();
-        cell.render();
+        if (cell.attachments !== undefined) {
+          // Do a deep copy of attachments to avoid subsequent modification
+          // to the cell to modify the clipboard
+          console.log(cell.attachments);
+          this.clipboard_attachments = $.extend(true, {}, cell.attachments);
+          this.enable_attachments_paste();
+        }
     };
 
     /**
@@ -1737,6 +1741,9 @@ define(function (require) {
         if (this.clipboard_attachments !== null &&
             this.paste_attachments_enabled) {
             var cell = this.get_selected_cell();
+            if (cell.attachments === undefined) {
+              cell.attachments = {};
+            }
             $.extend(cell.attachments, this.clipboard_attachments);
             cell.unrender();
             cell.render();
diff --git a/notebook/static/notebook/js/textcell.js b/notebook/static/notebook/js/textcell.js
index 104a54e98..780923b73 100644
--- a/notebook/static/notebook/js/textcell.js
+++ b/notebook/static/notebook/js/textcell.js
@@ -215,7 +215,8 @@ define([
         }
         // Deepcopy the attachments so copied cells don't share the same
         // objects
-        if (this.attachments !== undefined) {
+        if (this.attachments !== undefined
+            && Object.keys(this.attachments).length > 0) {
             data.attachments = JSON.parse(JSON.stringify(this.attachments));
         }
         return data;

From a0920c47d8289a6a0297446e4302686d879e9775 Mon Sep 17 00:00:00 2001
From: Julien Rebetez <julien@fhtagn.net>
Date: Fri, 12 Feb 2016 12:12:10 +0100
Subject: [PATCH 19/24] Simplify attachments handling code by having an
 attachment attribute in every cell

---
 notebook/static/notebook/js/cell.js     |  6 ++++
 notebook/static/notebook/js/textcell.js | 40 ++++++++++---------------
 2 files changed, 21 insertions(+), 25 deletions(-)

diff --git a/notebook/static/notebook/js/cell.js b/notebook/static/notebook/js/cell.js
index 97e50e803..f724701c7 100644
--- a/notebook/static/notebook/js/cell.js
+++ b/notebook/static/notebook/js/cell.js
@@ -100,6 +100,12 @@ define([
         this.cell_type = this.cell_type || null;
         this.code_mirror = null;
 
+        // The nbformat only specifies attachments for textcell, but to avoid
+        // data loss when switching between cell types in the UI, all cells
+        // have an attachments property here. It is only saved to disk
+        // for textcell though (in toJSON)
+        this.attachments = {};
+
         this.create_element();
         if (this.element !== null) {
             this.element.data("cell", this);
diff --git a/notebook/static/notebook/js/textcell.js b/notebook/static/notebook/js/textcell.js
index 780923b73..a2e941908 100644
--- a/notebook/static/notebook/js/textcell.js
+++ b/notebook/static/notebook/js/textcell.js
@@ -114,7 +114,15 @@ define([
 
 
     // Cell level actions
-    
+
+    TextCell.prototype.add_attachment = function (key, mime_type, b64_data) {
+        /**
+         * Add a new attachment to this cell
+         */
+        this.attachments[key] = {};
+        this.attachments[key][mime_type] = [b64_data];
+    };
+
     TextCell.prototype.select = function () {
         var cont = Cell.prototype.select.apply(this, arguments);
         if (cont) {
@@ -215,8 +223,7 @@ define([
         }
         // Deepcopy the attachments so copied cells don't share the same
         // objects
-        if (this.attachments !== undefined
-            && Object.keys(this.attachments).length > 0) {
+        if (Object.keys(this.attachments).length > 0) {
             data.attachments = JSON.parse(JSON.stringify(this.attachments));
         }
         return data;
@@ -280,20 +287,6 @@ define([
         this.notebook.set_insert_image_enabled(true);
     };
 
-
-    // TODO(julienr): Move to cell if the attachments is accepted as a cell
-    // attribute (not markdown specific)
-    MarkdownCell.prototype.add_attachment = function (key, mime_type, b64_data) {
-        /**
-         * Add a new attachment to this cell
-         */
-        if (this.attachments === undefined) {
-            this.attachments = {};
-        }
-        this.attachments[key] = {};
-        this.attachments[key][mime_type] = [b64_data];
-    };
-
     MarkdownCell.prototype.insert_inline_image_from_blob = function(blob) {
         /**
          * Insert markup for an inline image at the current cursor position.
@@ -316,11 +309,7 @@ define([
         if (blob.name !== undefined) {
             key = blob.name;
         } else {
-            if (that.attachments === undefined) {
-                key = '_auto_0';
-            } else {
-                key = '_auto_' + Object.keys(that.attachments).length;
-            }
+            key = '_auto_' + Object.keys(that.attachments).length;
         }
 
         reader.onloadend = function() {
@@ -331,7 +320,7 @@ define([
                             'type (' + d[0] + ')');
             }
             that.add_attachment(key, blob.type, d[1]);
-            var img_md = '![' + key + '](attachment:' + key + ')';
+            var img_md = '![attachment:' + key + '](attachment:' + key + ')';
             that.code_mirror.replaceRange(img_md, pos);
         }
         reader.readAsDataURL(blob);
@@ -377,11 +366,12 @@ define([
                   h = $(h);
                   var key = h.attr('src').replace(/^attachment:/, '');
 
-                  if (that.attachments !== undefined &&
-                      key in that.attachments) {
+                  if (key in that.attachments) {
                     var att = that.attachments[key];
                     var mime = Object.keys(att)[0];
                     h.attr('src', 'data:' + mime + ';base64,' + att[mime][0]);
+                  } else {
+                    h.attr('src', '');
                   }
                 });
                 that.set_rendered(html);

From c7186d5c09646d10b5b95765ad08c783f8bca38d Mon Sep 17 00:00:00 2001
From: Julien Rebetez <julien@fhtagn.net>
Date: Fri, 19 Feb 2016 10:59:46 +0100
Subject: [PATCH 20/24] Remove unused attachments on manual save

---
 notebook/static/notebook/js/cell.js     | 17 ++++++++++-
 notebook/static/notebook/js/notebook.js | 30 +++++++++++++++++--
 notebook/static/notebook/js/textcell.js | 38 +++++++++++++++++++++++++
 3 files changed, 81 insertions(+), 4 deletions(-)

diff --git a/notebook/static/notebook/js/cell.js b/notebook/static/notebook/js/cell.js
index f724701c7..2c98082a6 100644
--- a/notebook/static/notebook/js/cell.js
+++ b/notebook/static/notebook/js/cell.js
@@ -350,6 +350,16 @@ define([
         }
     };
 
+    /**
+     * Garbage collects unused attachments in this cell
+     * @method remove_unused_attachments
+     */
+    Cell.prototype.remove_unused_attachments = function () {
+        // Cell subclasses which support attachments should override this
+        // and keep them when needed
+        this.attachments = {};
+    };
+
     /**
      * Delegates keyboard shortcut handling to either Jupyter keyboard
      * manager when in command mode, or CodeMirror when in edit mode
@@ -745,7 +755,12 @@ define([
         cell.append(inner_cell);
         this.element = cell;
     };
-    
+
+    UnrecognizedCell.prototype.remove_unused_attachments = function () {
+        // Do nothing to avoid removing attachments from a possible future
+        // attachment-supporting cell type
+    };
+
     UnrecognizedCell.prototype.bind_events = function () {
         Cell.prototype.bind_events.apply(this, arguments);
         var cell = this;
diff --git a/notebook/static/notebook/js/notebook.js b/notebook/static/notebook/js/notebook.js
index 78bda1740..4c91f8a7a 100644
--- a/notebook/static/notebook/js/notebook.js
+++ b/notebook/static/notebook/js/notebook.js
@@ -2401,6 +2401,17 @@ define(function (require) {
         }
     };
 
+    /**
+     * Garbage collects unused attachments in all the cells
+     */
+    Notebook.prototype.remove_unused_attachments = function() {
+      var cells = this.get_cells();
+      for (var i = 0; i < cells.length; i++) {
+          var cell = cells[i];
+          cell.remove_unused_attachments();
+      }
+    }
+
     /**
      * Load a notebook from JSON (.ipynb).
      * 
@@ -2514,11 +2525,17 @@ define(function (require) {
     /**
      * Save this notebook on the server. This becomes a notebook instance's
      * .save_notebook method *after* the entire notebook has been loaded.
+     *
+     * manual_save will be true if the save was manually trigered by the user
      */
-    Notebook.prototype.save_notebook = function (check_last_modified) {
+    Notebook.prototype.save_notebook = function (check_last_modified,
+                                                 manual_save) {
         if (check_last_modified === undefined) {
             check_last_modified = true;
         }
+        if (manual_save === undefined) {
+            manual_save = false;
+        }
         
         var error;
         if (!this._fully_loaded) {
@@ -2535,6 +2552,13 @@ define(function (require) {
         // the notebook as needed.
         this.events.trigger('before_save.Notebook');
 
+        // Garbage collect unused attachments. Only do this for manual save
+        // to avoid removing unused attachments while the user is editing if
+        // an autosave gets triggered in the midle of an edit
+        if (manual_save) {
+            this.remove_unused_attachments();
+        }
+
         // Create a JSON model to be sent to the server.
         var model = {
             type : "notebook",
@@ -2718,7 +2742,7 @@ define(function (require) {
         var parent = utils.url_path_split(this.notebook_path)[0];
         var p;
         if (this.dirty) {
-            p = this.save_notebook();
+            p = this.save_notebook(true, true);
         } else {
             p = Promise.resolve();
         }
@@ -2988,7 +3012,7 @@ define(function (require) {
      */
     Notebook.prototype.save_checkpoint = function () {
         this._checkpoint_after_save = true;
-        this.save_notebook();
+        this.save_notebook(true, true);
     };
     
     /**
diff --git a/notebook/static/notebook/js/textcell.js b/notebook/static/notebook/js/textcell.js
index a2e941908..b3c5dcf6c 100644
--- a/notebook/static/notebook/js/textcell.js
+++ b/notebook/static/notebook/js/textcell.js
@@ -123,6 +123,44 @@ define([
         this.attachments[key][mime_type] = [b64_data];
     };
 
+    TextCell.prototype.remove_unused_attachments = function () {
+        // The general idea is to render the text, find attachment like when
+        // we substitute them in render() and mark used attachments by adding
+        // a temporary .used property to them.
+        if (Object.keys(this.attachments).length > 0) {
+            var that = this;
+            // To find unused attachments, rendering to HTML is easier than
+            // searching in the markdown source for the multiple ways you can
+            // reference an image in markdown (using []() or a HTML <img> tag)
+            var text = this.get_text();
+            marked(text, function (err, html) {
+                html = security.sanitize_html(html);
+                html = $($.parseHTML(html));
+                html.find('img[src^="attachment:"]').each(function (i, h) {
+                    h = $(h);
+                    var key = h.attr('src').replace(/^attachment:/, '');
+                    if (key in that.attachments) {
+                        that.attachments[key].used = true;
+                    }
+
+                    // This is to avoid having the browser do a GET request
+                    // on the invalid attachment: URL
+                    h.attr('src', '');
+                });
+            });
+
+            for (var key in this.attachments) {
+                if (this.attachments[key].used === undefined) {
+                    console.log('Dropping unused attachment ' + key);
+                    delete this.attachments[key];
+                } else {
+                    // Remove temporary property
+                    delete this.attachments[key].used;
+                }
+            }
+        }
+    }
+
     TextCell.prototype.select = function () {
         var cont = Cell.prototype.select.apply(this, arguments);
         if (cont) {

From ea57ff74a61d688e110e05fb4d390eec28b82751 Mon Sep 17 00:00:00 2001
From: Julien Rebetez <julien.rebetez@heig-vd.ch>
Date: Wed, 24 Feb 2016 14:46:15 +0100
Subject: [PATCH 21/24] Explain why we disable caja uri checks on img::src

---
 notebook/static/base/js/security.js | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/notebook/static/base/js/security.js b/notebook/static/base/js/security.js
index f0d1b125a..5f6961f83 100644
--- a/notebook/static/base/js/security.js
+++ b/notebook/static/base/js/security.js
@@ -30,9 +30,11 @@ 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
+        // Caja doesn't allow data uri for img::src, see
+        // https://github.com/google/caja/issues/1558
+        // This is not a security issue for browser post ie6 though, so we
+        // disable the check
+        // https://www.owasp.org/index.php/Script_in_IMG_tags
         ATTRIBS['img::src'] = 0;
         return caja.sanitizeAttribs(tagName, attribs, opt_naiveUriRewriter, opt_nmTokenPolicy, opt_logger);
     };

From cc58b282fd4d4c08251e9c3075659c1e60594ee5 Mon Sep 17 00:00:00 2001
From: Julien Rebetez <julien@fhtagn.net>
Date: Thu, 25 Feb 2016 10:15:29 +0100
Subject: [PATCH 22/24] =?UTF-8?q?Remove=20jquery=20from=20dependencies=20s?=
 =?UTF-8?q?ince=20it=E2=80=99s=20a=20global?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 notebook/static/notebook/js/celltoolbarpresets/attachments.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/notebook/static/notebook/js/celltoolbarpresets/attachments.js b/notebook/static/notebook/js/celltoolbarpresets/attachments.js
index d41638ce9..5dd37c860 100644
--- a/notebook/static/notebook/js/celltoolbarpresets/attachments.js
+++ b/notebook/static/notebook/js/celltoolbarpresets/attachments.js
@@ -2,10 +2,9 @@
 // Distributed under the terms of the Modified BSD License.
 
 define([
-    'jquery',
     'notebook/js/celltoolbar',
     'base/js/dialog',
-], function($, celltoolbar, dialog) {
+], function(celltoolbar, dialog) {
     "use strict";
 
     var CellToolbar = celltoolbar.CellToolbar;

From 51cab51f1ca387e53486b747e4c03b512a831cc2 Mon Sep 17 00:00:00 2001
From: Julien Rebetez <julien@fhtagn.net>
Date: Thu, 25 Feb 2016 10:15:50 +0100
Subject: [PATCH 23/24] Add Copy/Paste cell attachments test

---
 notebook/static/notebook/js/notebook.js |  4 ++--
 notebook/tests/notebook/attachments.js  | 32 +++++++++++++++++++++++++
 2 files changed, 34 insertions(+), 2 deletions(-)

diff --git a/notebook/static/notebook/js/notebook.js b/notebook/static/notebook/js/notebook.js
index 4c91f8a7a..ce2d24235 100644
--- a/notebook/static/notebook/js/notebook.js
+++ b/notebook/static/notebook/js/notebook.js
@@ -1727,7 +1727,6 @@ define(function (require) {
         if (cell.attachments !== undefined) {
           // Do a deep copy of attachments to avoid subsequent modification
           // to the cell to modify the clipboard
-          console.log(cell.attachments);
           this.clipboard_attachments = $.extend(true, {}, cell.attachments);
           this.enable_attachments_paste();
         }
@@ -1744,7 +1743,8 @@ define(function (require) {
             if (cell.attachments === undefined) {
               cell.attachments = {};
             }
-            $.extend(cell.attachments, this.clipboard_attachments);
+            // Do a deep copy so we can paste multiple times
+            $.extend(true, cell.attachments, this.clipboard_attachments);
             cell.unrender();
             cell.render();
         }
diff --git a/notebook/tests/notebook/attachments.js b/notebook/tests/notebook/attachments.js
index dafdeedc8..e3d97eff0 100644
--- a/notebook/tests/notebook/attachments.js
+++ b/notebook/tests/notebook/attachments.js
@@ -69,5 +69,37 @@ casper.notebook_test(function () {
     //this.then(function() {
         //this.capture('test.png');
     //});
+
+    // Use the Edit->Copy/Paste Cell Attachments menu items
+    selector = '#copy_cell_attachments > a';
+    this.waitForSelector(selector);
+    this.thenClick(selector);
+
+    // append a new cell
+    this.append_cell('', 'markdown');
+    this.thenEvaluate(function() {
+        IPython.notebook.select_next();
+    });
+
+    // and paste the attachments into it
+    selector = '#paste_cell_attachments > a';
+    this.waitForSelector(selector);
+    this.thenClick(selector);
+    // Small delay so the paste has the time to complete
+    this.wait(500);
+
+    // check that the new cell has attachments
+    this.then(function() {
+        var cell = this.evaluate(function() {
+            return IPython.notebook.get_selected_cell();
+        });
+        var orig_cell = this.evaluate(function() {
+            return IPython.notebook.get_cell(0);
+        });
+        var clip = this.evaluate(function() { return IPython.notebook.clipboard_attachments; });
+        // Check that the two cells have the same attachments
+        this.test.assertEquals(cell.attachments, orig_cell.attachments,
+                               "both cells have the attachments");
+    });
 });
 

From f50474d60d94b5b934b85e4a398fbde4e77af3f7 Mon Sep 17 00:00:00 2001
From: Julien Rebetez <julien@fhtagn.net>
Date: Thu, 25 Feb 2016 10:38:18 +0100
Subject: [PATCH 24/24] Add test for attachments garbage collection

---
 notebook/tests/notebook/attachments.js | 26 ++++++++++++++++++++++----
 1 file changed, 22 insertions(+), 4 deletions(-)

diff --git a/notebook/tests/notebook/attachments.js b/notebook/tests/notebook/attachments.js
index e3d97eff0..cbeff5308 100644
--- a/notebook/tests/notebook/attachments.js
+++ b/notebook/tests/notebook/attachments.js
@@ -3,7 +3,7 @@
 //
 var fs = require('fs');
 casper.notebook_test(function () {
-    // Test the Edit->Insert Image menu to insert new attachments
+    // -- Test the Edit->Insert Image menu to insert new attachments
     "use strict";
     casper.test.info("Testing attachments insertion through the menuitem");
 
@@ -70,7 +70,7 @@ casper.notebook_test(function () {
         //this.capture('test.png');
     //});
 
-    // Use the Edit->Copy/Paste Cell Attachments menu items
+    // -- Use the Edit->Copy/Paste Cell Attachments menu items
     selector = '#copy_cell_attachments > a';
     this.waitForSelector(selector);
     this.thenClick(selector);
@@ -85,8 +85,6 @@ casper.notebook_test(function () {
     selector = '#paste_cell_attachments > a';
     this.waitForSelector(selector);
     this.thenClick(selector);
-    // Small delay so the paste has the time to complete
-    this.wait(500);
 
     // check that the new cell has attachments
     this.then(function() {
@@ -101,5 +99,25 @@ casper.notebook_test(function () {
         this.test.assertEquals(cell.attachments, orig_cell.attachments,
                                "both cells have the attachments");
     });
+
+    // -- Save the notebook. This should cause garbage collection for the
+    // second cell (since we just pasted the attachments but there is no
+    // markdown referencing them)
+    this.thenEvaluate(function() {
+        IPython.notebook.save_checkpoint();
+    });
+
+    this.then(function() {
+        var cell0 = this.evaluate(function() {
+            return IPython.notebook.get_cell(0);
+        });
+        var cell1 = this.evaluate(function() {
+            return IPython.notebook.get_cell(1);
+        });
+        this.test.assert('black_square_22.png' in cell0.attachments,
+                         'cell0 has kept its attachments');
+        this.test.assertEquals(Object.keys(cell1.attachments).length, 0,
+                               'cell1 attachments have been garbage collected');
+    });
 });