Tets mediatag plugin using widgets

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}',
-                required = 'media-tag[data-crypto-key,src]';
+            editor.widgets.add( 'mediatag', {
 
-            // Register the command.
-            editor.addCommand( pluginName, new CKEDITOR.dialogCommand( pluginName, {
-                allowedContent: allowed,
-                requiredContent: required,
-                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';
+                dialog: pluginName,
+                inline: true,
+                upcast: function( element ) {
+                    return element.name === 'media-tag';
                 }
+
             });
-
-            // 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
- */
-