Implement markdown cell attachments. Allow drag’n’drop of images into…

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));
             }
@@ -207,11 +210,185 @@ define(function(require) {
 
         modal_obj.on('shown.bs.modal', function(){ editor.refresh(); });
     };
+
+    var edit_attachments = function (options) {
+        // 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";
+
+            attachments_list = $('<div>')
+                .addClass('list_container')
+                .append(
+                    $('<div>')
+                    .addClass('row list_header')
+                    .append(
+                        $('<div>')
+                        .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('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();
+        }
+
+        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: {
+                Apply: { class : "btn-primary",
+                    click: function() {
+                        for (var key in to_delete) {
+                            delete options.attachments[key];
+                        }
+                        options.callback(options.attachments);
+                    }
+                },
+                Cancel: {}
+            },
+            notebook: options.notebook,
+            keyboard_manager: options.keyboard_manager,
+        });
+    };
+
+    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 id="insert-image-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,
+        insert_image : insert_image
     };
 
     return dialog;

notebook/static/base/js/security.js

@@ -30,6 +30,12 @@ define([
                 }
             }
         }
+        // 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);
     };
 

notebook/static/base/js/utils.js

@@ -788,6 +788,27 @@ 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
+         */
+        // 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];
+        // matches[0] contains the whole data-uri prefix
+        var b64_data = uri.slice(matches[0].length);
+        return [mime, b64_data];
+    };
 
     var time = {};
     time.milliseconds = {};
@@ -877,6 +898,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,

notebook/static/notebook/js/actions.js

@@ -153,6 +153,34 @@ define(function(require){
                 env.notebook.command_mode();
             }
         },
+        'insert-image': {
+            help      : 'insert image',
+            help_index : 'dz',
+            handler : function (env) {
+                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',

notebook/static/notebook/js/cell.js

@@ -70,6 +70,7 @@ define([
             }
         });
 
+
         // backward compat.
         Object.defineProperty(this, 'cm_config', {
             get: function() {
@@ -99,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);
@@ -272,6 +279,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;
@@ -340,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
@@ -735,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;

notebook/static/notebook/js/celltoolbarpresets/attachments.js

@@ -0,0 +1,50 @@
+// Copyright (c) Jupyter Development Team.
+// Distributed under the terms of the Modified BSD License.
+
+define([
+    '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;
+            // Force cell refresh
+            cell.unrender();
+            cell.render();
+          },
+          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}
+});