Tets mediatag plugin using widgets

www/common/sframe-common-file.js

@@ -333,6 +333,8 @@ define([
             var editor = config.ckeditor;
             editor.document.on('drop', function (ev) {
                 var dropped = ev.data.$.dataTransfer.files;
+                editor.document.focus();
+                if (!dropped || !dropped.length) { return; }
                 onFileDrop(dropped, ev);
                 ev.data.preventDefault(true);
             });

www/pad/inner.js

@@ -168,6 +168,30 @@ define([
                         return true;
                     }
                 }
+
+
+
+
+                    // CkEditor drag&drop icon container
+                    if (info.node && info.node.tagName === 'SPAN' &&
+                            info.node.getAttribute('class') &&
+                            info.node.getAttribute('class').split(' ').indexOf('cke_widget_drag_handler_container') !== -1) {
+                        //console.log('Preventing removal of the drag&drop icon container of a macro', info.node);
+                        return true;
+                    }
+                    // CkEditor drag&drop title (language fight)
+                    if (info.node && info.node.getAttribute &&
+                            info.node.getAttribute('class') &&
+                            (info.node.getAttribute('class').split(' ').indexOf('cke_widget_drag_handler') !== -1 ||
+                             info.node.getAttribute('class').split(' ').indexOf('cke_image_resizer') !== -1 ) ) {
+                        //console.log('Preventing removal of the drag&drop icon container of a macro', info.node);
+                        return true;
+                    }
+
+
+
+
+
                 /*
                     Also reject any elements which would insert any one of
                     our forbidden tag types: script, iframe, object,
@@ -370,8 +394,11 @@ define([
 
         framework.setMediaTagEmbedder(function ($mt) {
             $mt.attr('contenteditable', 'false');
-            $mt.attr('tabindex', '1');
+            //$mt.attr('tabindex', '1');
-            editor.insertElement(new window.CKEDITOR.dom.element($mt[0]));
+            console.log($mt);
+            var element = new window.CKEDITOR.dom.element($mt[0]);
+            editor.insertElement(element);
+            editor.widgets.initOn( element, 'mediatag' )
         });
 
         framework.setTitleRecommender(function () {
@@ -404,6 +431,8 @@ define([
             var patch = (DD).diff(inner, userDocStateDom);
             (DD).apply(inner, patch);
             displayMediaTags(framework, inner, mediaTagMap);
+            editor.widgets.instances = {};
+            editor.widgets.checkWidgets();
             if (framework.isReadOnly()) {
                 var $links = $(inner).find('a');
                 // off so that we don't end up with multiple identical handlers
@@ -463,7 +492,11 @@ define([
                     var hexFileName = Util.base64ToHex(parsed.hashData.channel);
                     var src = '/blob/' + hexFileName.slice(0,2) + '/' + hexFileName;
                     var mt = '<media-tag contenteditable="false" src="' + src + '" data-crypto-key="cryptpad:' + parsed.hashData.key + '" tabindex="1"></media-tag>';
-                    editor.insertElement(window.CKEDITOR.dom.element.createFromHtml(mt));
+                    //editor.insertElement(window.CKEDITOR.dom.element.createFromHtml(mt));
+                    //editor.insertHtml(mt);
+                    var element = window.CKEDITOR.dom.element.createFromHtml(mt);
+                    editor.insertElement(element);
+                    editor.widgets.initOn( element, 'mediatag' )
                 }
             };
             window.APP.FM = framework._.sfCommon.createFileManager(fmConfig);

www/pad/mediatag-plugin-dialog.js

@@ -23,7 +23,13 @@ CKEDITOR.dialog.add('mediatag', function (editor) {
             },
         ],
         onShow: function () {
-            var el = editor.plugins.mediatag.clicked;
+            var sel = editor.getSelection();
+            element = sel.getSelectedElement();
+            if (!element) { return; }
+
+            var el = element.findOne('media-tag');
+            if (!el) { return; }
+
             var rect = el.getClientRect();
             var dialog = this.parts.contents.$;
             var inputs = dialog.querySelectorAll('input');
@@ -34,7 +40,14 @@ CKEDITOR.dialog.add('mediatag', function (editor) {
         },
         onOk: function() {
             var dialog = this;
-            var el = editor.plugins.mediatag.clicked;
+
+            var sel = editor.getSelection();
+            element = sel.getSelectedElement();
+            if (!element) { return; }
+
+            var el = element.findOne('media-tag');
+            if (!el) { return; }
+
             var dialog = this.parts.contents.$;
             var inputs = dialog.querySelectorAll('input');
             var wInput = inputs[0];

www/pad/mediatag-plugin.js

@@ -10,7 +10,7 @@
 ( function() {
 
     CKEDITOR.plugins.add( 'mediatag', {
-        requires: 'dialog',
+        requires: 'dialog,widget',
         //icons: 'image',
         //hidpi: true,
         onLoad: function () {
@@ -38,144 +38,16 @@
             // Register the dialog.
             CKEDITOR.dialog.add( pluginName, this.path + 'mediatag-plugin-dialog.js' );
 
-            var allowed = 'media-tag[!data-crypto-key,!src,contenteditable,width,height]{border-style,border-width,float,height,margin,margin-bottom,margin-left,margin-right,margin-top,width}',
+            editor.widgets.add( 'mediatag', {
-                required = 'media-tag[data-crypto-key,src]';
 
-            // Register the command.
+                dialog: pluginName,
-            editor.addCommand( pluginName, new CKEDITOR.dialogCommand( pluginName, {
+                inline: true,
-                allowedContent: allowed,
+                upcast: function( element ) {
-                requiredContent: required,
+                    return element.name === 'media-tag';
-                contentTransformations: [
-                    [ 'media-tag{width}: sizeToStyle', 'media-tag[width]: sizeToAttribute' ],
-                    [ 'media-tag{float}: alignmentToStyle', 'media-tag[align]: alignmentToAttribute' ]
-                ]
-            } ) );
-
-            var isMediaTag = function (el) {
-                if (el.is('media-tag')) { return el; }
-                var mt = el.getParents().slice().filter(function (p) {
-                    return p.is('media-tag');
-                });
-                if (mt.length !== 1) { return; }
-                return mt[0];
-            };
-            editor.on('doubleclick', function (evt) {
-                var element = evt.data.element;
-                var mt = isMediaTag(element);
-                if (mt && !element.data('cke-realelement')) {
-                    editor.plugins.mediatag.clicked = mt;
-                    evt.data.dialog = 'mediatag';
                 }
-            });
 
-            // If the "contextmenu" plugin is loaded, register the listeners.
+            });
-            if (editor.contextMenu) {
-                editor.contextMenu.addListener(function (element) {
-                    if (getSelectedMediatag(editor, element)) {
-                        return { mediatag: CKEDITOR.TRISTATE_OFF };
-                    }
-                });
-            }
         },
-        afterInit: function( editor ) {
-            // Customize the behavior of the alignment commands. (http://dev.ckeditor.com/ticket/7430)
-            setupAlignCommand('left');
-            setupAlignCommand('right');
-            setupAlignCommand('center');
-            setupAlignCommand('block');
-
-            function setupAlignCommand (value) {
-                var command = editor.getCommand('justify' + value);
-                if (command) {
-                    if (value === 'left' || value === 'right') {
-                        command.on('exec', function (evt) {
-                            var img = getSelectedMediatag(editor), align;
-                            if (img) {
-                                align = getMediatagAlignment(img);
-                                if (align === value) {
-                                    img.removeStyle('float');
-
-                                    // Remove "align" attribute when necessary.
-                                    if (value === getMediatagAlignment(img))
-                                        img.removeAttribute( 'align' );
-                                } else {
-                                    img.setStyle( 'float', value );
-                                }
-
-                                evt.cancel();
-                            }
-                        } );
-                    }
-
-                    command.on('refresh', function (evt) {
-                        var img = getSelectedMediatag(editor), align;
-                        if (img) {
-                            align = getMediatagAlignment(img);
-
-                            this.setState(
-                            (align === value) ? CKEDITOR.TRISTATE_ON : ( value === 'right' || value === 'left' ) ? CKEDITOR.TRISTATE_OFF : CKEDITOR.TRISTATE_DISABLED );
-
-                            evt.cancel();
-                        }
-                    } );
-                }
-            }
-        }
     } );
-
-    function getSelectedMediatag (editor, element) {
-        if (!element) {
-            var sel = editor.getSelection();
-            element = sel.getSelectedElement();
-        }
-
-        if (element && element.is('media-tag') && !element.data('cke-realelement')
-            && !element.isReadOnly()) {
-            return element;
-        }
-    }
-
-    function getMediatagAlignment (element) {
-        var align = element.getStyle('float');
-
-        if (align === 'inherit' || align === 'none') {
-            align = 0;
-        }
-
-        if (!align) {
-            align = element.getAttribute('align');
-        }
-
-        return align;
-    }
 } )();
 
-/**
- * Determines whether dimension inputs should be automatically filled when the image URL changes in the Image plugin dialog window.
- *
- *      config.image_prefillDimensions = false;
- *
- * @since 4.5
- * @cfg {Boolean} [image_prefillDimensions=true]
- * @member CKEDITOR.config
- */
-
-/**
- * Whether to remove links when emptying the link URL field in the Image dialog window.
- *
- *      config.image_removeLinkByEmptyURL = false;
- *
- * @cfg {Boolean} [image_removeLinkByEmptyURL=true]
- * @member CKEDITOR.config
- */
-CKEDITOR.config.mediatag_removeLinkByEmptyURL = true;
-
-/**
- * Padding text to set off the image in the preview area.
- *
- *      config.image_previewText = CKEDITOR.tools.repeat( '___ ', 100 );
- *
- * @cfg {String} [image_previewText='Lorem ipsum dolor...' (placeholder text)]
- * @member CKEDITOR.config
- */
-