Prompt users to migrate base64 images to mediatags in the pad app

customize.dist/translations/messages.js

@@ -248,6 +248,9 @@ define(function () {
     out.pad_mediatagTitle = "Media-Tag settings";
     out.pad_mediatagWidth = "Width (px)";
     out.pad_mediatagHeight = "Height (px)";
+    out.pad_mediatagRatio = "Keep ratio";
+    out.pad_mediatagBorder = "Border width (px)";
+    out.pad_mediatagPreview = "Preview";
 
     // Kanban
     out.kanban_newBoard = "New board";
@@ -655,6 +658,7 @@ define(function () {
     // pad
     out.pad_showToolbar = "Show toolbar";
     out.pad_hideToolbar = "Hide toolbar";
+    out.pad_base64 = "This pad contains images stored in an inefficient way. These images will increase significantly the size of the pad in your CryptDrive, and they will make it slower to load.     Do you want to migrate these images to a better format (they will be stored separately in your drive)?"; // XXX
 
     // markdown toolbar
     out.mdToolbar_button = "Show or hide the Markdown toolbar";

www/common/common-util.js

@@ -154,6 +154,22 @@ define([], function () {
         xhr.send(null);
     };
 
+    Util.dataURIToBlob = function (dataURI) {
+        var byteString = atob(dataURI.split(',')[1]);
+        var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
+
+        // write the bytes of the string to an ArrayBuffer
+        var ab = new ArrayBuffer(byteString.length);
+        var ia = new Uint8Array(ab);
+        for (var i = 0; i < byteString.length; i++) {
+            ia[i] = byteString.charCodeAt(i);
+        }
+
+        // write the ArrayBuffer to a blob, and you're done
+        var bb = new Blob([ab], {type: mimeString});
+        return bb;
+    };
+
     Util.throttle = function (f, ms) {
         var to;
         var g = function () {

www/pad/inner.js

@@ -30,6 +30,7 @@ define([
     '/api/config',
     '/common/common-hash.js',
     '/common/common-util.js',
+    '/common/common-interface.js',
     '/bower_components/chainpad/chainpad.dist.js',
     '/customize/application_config.js',
     '/common/test.js',
@@ -52,6 +53,7 @@ define([
     ApiConfig,
     Hash,
     Util,
+    UI,
     ChainPad,
     AppConfig,
     Test
@@ -569,7 +571,11 @@ define([
                     var mt = '<media-tag contenteditable="false" src="' + src + '" data-crypto-key="cryptpad:' + key + '"></media-tag>';
                     // MEDIATAG
                     var element = window.CKEDITOR.dom.element.createFromHtml(mt);
-                    editor.insertElement(element);
+                    if (ev && ev.insertElement) {
+                        ev.insertElement(element);
+                    } else {
+                        editor.insertElement(element);
+                    }
                     editor.widgets.initOn( element, 'mediatag' );
                 }
             };
@@ -581,6 +587,28 @@ define([
                     $iframe.find('html').addClass('cke_body_width');
                 }
             });
+
+            var b64images = $(inner).find('img[src^="data:image"]:not(.cke_reset)');
+            if (b64images.length) {
+                UI.confirm(Messages.pad_base64, function (yes) {
+                    if (!yes) { return; }
+                    b64images.each(function (i, el) {
+                        var src = $(el).attr('src');
+                        var blob = Util.dataURIToBlob(src);
+                        var ext = '.' + (blob.type.split('/')[1] || 'png');
+                        var name = framework._.title.getTitle()+'_image' || 'Pad_image';
+                        blob.name = name + ext;
+                        var ev = {
+                            insertElement: function (newEl) {
+                                var element = new window.CKEDITOR.dom.element(el);
+                                newEl.replace(element);
+                                setTimeout(framework.localChange);
+                            }
+                        };
+                        window.APP.FM.handleFile(blob, ev);
+                    });
+                });
+            }
             /*setTimeout(function () {
                 $('iframe.cke_wysiwyg_frame').focus();
                 editor.focus();
@@ -749,7 +777,10 @@ define([
                 editor.plugins.mediatag.translations = {
                     title: Messages.pad_mediatagTitle,
                     width: Messages.pad_mediatagWidth,
-                    height: Messages.pad_mediatagHeight
+                    height: Messages.pad_mediatagHeight,
+                    ratio: Messages.pad_mediatagRatio,
+                    border: Messages.pad_mediatagBorder,
+                    preview: Messages.pad_mediatagPreview,
                 };
                 Links.addSupportForOpeningLinksInNewTab(Ckeditor)({editor: editor});
             }).nThen(function () {

www/pad/mediatag-plugin-dialog.js

@@ -13,12 +13,40 @@ CKEDITOR.dialog.add('mediatag', function (editor) {
                         type: 'text',
                         id: 'width',
                         label: Messages.width,
+                        validate: function () {
+                            if (isNaN(this.getValue())) { return false; }
+                        }
                     },
                     {
                         type: 'text',
                         id: 'height',
                         label: Messages.height,
-                    }
+                        validate: function () {
+                            if (isNaN(this.getValue())) { return false; }
+                        }
+                    },
+                    {
+                        type: 'checkbox',
+                        id: 'lock',
+                        'default': 'checked',
+                        label: Messages.ratio,
+                    },
+                    {
+                        type: 'text',
+                        id: 'border',
+                        label: Messages.border,
+                        validate: function () {
+                            if (isNaN(this.getValue())) { return false; }
+                        }
+                    },
+                    {
+                        type: 'html',
+                        id: 'preview',
+                        html: '<label>'+Messages.preview+'</label>'+
+                              '<div id="ck-mediatag-preview"'+
+                'style="margin:auto;resize:both;max-width:300px;max-height:300px;overflow:auto"'+
+                              '></div>'
+                    },
                 ]
             },
         ],
@@ -37,6 +65,57 @@ CKEDITOR.dialog.add('mediatag', function (editor) {
             var hInput = inputs[1];
             wInput.value = Math.round(rect.width);
             hInput.value = Math.round(rect.height);
+
+            var keepRatio = inputs[2];
+            var ratio = wInput.value/hInput.value;
+
+            var borderInput = inputs[3];
+            var bValue = el.getStyle('border-width').replace('px', '') || 0;
+            borderInput.value = bValue;
+
+            var $preview = $(dialog).find('#ck-mediatag-preview');
+            var $clone = $(el.$).clone();
+            $clone.css({
+                display: 'flex',
+                'border-style': 'solid',
+                'border-color': 'black'
+            });
+            $preview.html('').append($clone);
+
+            var update = function () {
+                var w = $(wInput).val() || Math.round(rect.width);
+                var h = $(hInput).val() || Math.round(rect.height);
+                var b = $(borderInput).val() || bValue;
+                $clone.css({
+                    width: w+'px',
+                    height: h+'px',
+                    'border-width': b+'px'
+                });
+            };
+
+            $(wInput).on('keyup', function () {
+                if (!$(keepRatio).is(':checked')) { return; }
+                var w = $(wInput).val();
+                if (isNaN(w)) { return; }
+                var newVal = w/ratio;
+                $(hInput).val(Math.round(newVal));
+                update();
+            });
+            $(hInput).on('keyup', function () {
+                if (!$(keepRatio).is(':checked')) { return; }
+                var h = $(hInput).val();
+                if (isNaN(h)) { return; }
+                var newVal = h*ratio;
+                $(wInput).val(Math.round(newVal));
+                update();
+            });
+            $(keepRatio).on('change', function () {
+                ratio = $(wInput).val()/$(hInput).val();
+            });
+
+            $(borderInput).on('keyup', function () {
+                update();
+            });
         },
         onOk: function() {
             var dialog = this;
@@ -52,6 +131,7 @@ CKEDITOR.dialog.add('mediatag', function (editor) {
             var inputs = dialog.querySelectorAll('input');
             var wInput = inputs[0];
             var hInput = inputs[1];
+            var bInput = inputs[3];
 
             window.setTimeout(function () {
                 if (wInput.value === "") {
@@ -66,6 +146,11 @@ CKEDITOR.dialog.add('mediatag', function (editor) {
                 } else {
                     el.setSize('height', parseInt(hInput.value));
                 }
+                if (bInput.value === "") {
+                    el.removeStyle('border-width');
+                } else {
+                    el.setStyle('border-width', parseInt(bInput.value)+'px');
+                }
                 editor.fire( 'change' );
             });
         }

www/pad/mediatag-plugin.js

@@ -9,6 +9,9 @@
             CKEDITOR.addCss(
             'media-tag{' +
                 'display:inline-block;' +
+                'border-style: solid;' +
+                'border-color: black;' +
+                'border-width: 0;' +
             '}' +
             'media-tag.selected{' +
                 'border: 1px solid black;' +
@@ -41,5 +44,17 @@
             });
         },
     } );
+
+
+    CKEDITOR.on('dialogDefinition', function (ev) {
+        var dialog = ev.data.definition;
+        if (ev.data.name === 'image') {
+            dialog.removeContents('Link');
+            dialog.removeContents('advanced');
+            //var info = dialog.getContents('info');
+            //info.remove('cmbAlign');
+        }
+    });
+
 } )();