From 5eab39ad75e4cef55add025a6bffebd93ff7778d Mon Sep 17 00:00:00 2001 From: yflory Date: Thu, 19 Apr 2018 17:45:08 +0200 Subject: [PATCH 1/7] Tets mediatag plugin using widgets --- www/common/sframe-common-file.js | 2 + www/pad/inner.js | 39 +++++++- www/pad/mediatag-plugin-dialog.js | 17 +++- www/pad/mediatag-plugin.js | 142 ++---------------------------- 4 files changed, 60 insertions(+), 140 deletions(-) diff --git a/www/common/sframe-common-file.js b/www/common/sframe-common-file.js index ab3111ff0..2c212701e 100644 --- a/www/common/sframe-common-file.js +++ b/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); }); diff --git a/www/pad/inner.js b/www/pad/inner.js index d77770ce9..22eb5975e 100644 --- a/www/pad/inner.js +++ b/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'); - editor.insertElement(new window.CKEDITOR.dom.element($mt[0])); + //$mt.attr('tabindex', '1'); + 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 = ''; - 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); diff --git a/www/pad/mediatag-plugin-dialog.js b/www/pad/mediatag-plugin-dialog.js index a1a4c986b..45759bc9f 100644 --- a/www/pad/mediatag-plugin-dialog.js +++ b/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]; diff --git a/www/pad/mediatag-plugin.js b/www/pad/mediatag-plugin.js index c20066937..994c05f6c 100644 --- a/www/pad/mediatag-plugin.js +++ b/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 - */ - From 6a4f25bc9fc5a5355a6bd0f1d39a12dc3b6e985d Mon Sep 17 00:00:00 2001 From: yflory Date: Fri, 20 Apr 2018 15:33:14 +0200 Subject: [PATCH 2/7] Test widget filters --- customize.dist/ckeditor-config.js | 1 + www/pad/inner.js | 120 ++++++++++++++++++++++++++---- www/pad/mediatag-plugin.js | 1 + 3 files changed, 107 insertions(+), 15 deletions(-) diff --git a/customize.dist/ckeditor-config.js b/customize.dist/ckeditor-config.js index 36cac87f0..a8e6ad451 100644 --- a/customize.dist/ckeditor-config.js +++ b/customize.dist/ckeditor-config.js @@ -5,6 +5,7 @@ CKEDITOR.editorConfig = function( config ) { config.needsBrFiller= fixThings; config.needsNbspFiller= fixThings; + config.allowedContent = 'media-tag[*]'; config.removeButtons= 'Source,Maximize,Anchor'; // magicline plugin inserts html crap into the document which is not part of the // document itself and causes problems when it's sent across the wire and reflected back diff --git a/www/pad/inner.js b/www/pad/inner.js index 22eb5975e..429ef666f 100644 --- a/www/pad/inner.js +++ b/www/pad/inner.js @@ -82,12 +82,66 @@ define([ Cursor: Cursor, }; + // Filter elements to serialize + var isWidget = function (el) { + return typeof (el.getAttribute) === "function" && + (el.getAttribute('data-cke-hidden-sel') || + (el.getAttribute('class') && + (/cke_widget_drag/.test(el.getAttribute('class')) || + /cke_image_resizer/.test(el.getAttribute('class'))) + ) + ); + }; + var isNotMagicLine = function (el) { return !(el && typeof(el.getAttribute) === 'function' && el.getAttribute('class') && el.getAttribute('class').split(' ').indexOf('non-realtime') !== -1); }; + var shouldSerialize = function (el) { + return isNotMagicLine(el) && !isWidget(el); + }; + + // Filter attributes in the serialized elements + var widgetFilter = function (hj) { + // Send a widget ID == 0 to avoid a fight between broswers about it and + // prevent the container from having the "selected" class (blue border) + if (hj[1].class) { + var split = hj[1].class.split(' '); + /*if (split.indexOf('cke_widget_wrapper') !== -1) { + var child = (hj[2] || [])[0]; + if (child && child[0] === 'MEDIA-TAG') { + delete child[1].class; + delete child[1].contenteditable; + delete child[1]['data-cke-widget-data']; + delete child[1]['data-cke-widget-keep-attr']; + delete child[1]['data-widget']; + hj[0] = child[0]; + hj[1] = child[1]; + hj[2] = child[2]; + return hj; + } + }*/ + if (split.indexOf('cke_widget_wrapper') !== -1 && + split.indexOf('cke_widget_block') !== -1) { + hj[1].class = "cke_widget_wrapper cke_widget_block"; + hj[1]['data-cke-widget-id'] = "0"; + } + if (split.indexOf('cke_widget_wrapper') !== -1 && + split.indexOf('cke_widget_inline') !== -1) { + hj[1].class = "cke_widget_wrapper cke_widget_inline"; + hj[1]['data-cke-widget-id'] = "0"; + } + // Remove the title attribute of the drag&drop icons since they are localized and create fights over the language to use + if (split.indexOf('cke_widget_drag_handler') !== -1 || + split.indexOf('cke_image_resizer') !== -1) { + hj[1].title = undefined; + } + } + return hj; + }; + var hjsonFilters = function (hj) { /* catch `type="_moz"` before it goes over the wire */ var brFilter = function (hj) { @@ -100,6 +154,7 @@ define([ }; brFilter(hj); mediatagContentFilter(hj); + widgetFilter(hj); return hj; }; @@ -170,7 +225,23 @@ define([ } + // Do not change the widget ids + if (info.node && info.node.tagName === 'SPAN' && + info.diff.action === 'modifyAttribute' && info.diff.name === 'data-cke-widget-id') { + return true; + } + if (info.node && info.node.tagName === 'SPAN' && + info.node.getAttribute('class') && + /cke_widget_wrapper/.test(info.node.getAttribute('class'))) { + if (info.diff.action === 'modifyAttribute' && info.diff.name === 'class') { + return true; + } + console.log(info); + } + if (info.node && info.node.tagName === 'MEDIA-TAG') { + console.log(info); + } // CkEditor drag&drop icon container if (info.node && info.node.tagName === 'SPAN' && @@ -223,20 +294,26 @@ define([ if (info.node && info.node.tagName === 'SPAN' && info.node.getAttribute('contentEditable') === "false") { // it seems to be a magicline plugin element... + // but it can also be a widget (mediatag), in which case the removal was + // probably intentional + if (info.diff.action === 'removeElement') { // and you're about to remove it... - // this probably isn't what you want + if (!info.node.getAttribute('class') || + !/cke_widget_wrapper/.test(info.node.getAttribute('class'))) { + // This element is not a widget! + // this probably isn't what you want + /* + I have never seen this in the console, but the + magic line is still getting removed on remote + edits. This suggests that it's getting removed + by something other than diffDom. + */ + console.log("preventing removal of the magic line!"); - /* - I have never seen this in the console, but the - magic line is still getting removed on remote - edits. This suggests that it's getting removed - by something other than diffDom. - */ - console.log("preventing removal of the magic line!"); - - // return true to prevent diff application - return true; + // return true to prevent diff application + return true; + } } } @@ -246,6 +323,8 @@ define([ return true; } + if (info.diff.action === "removeElement") { console.log(info); } + if (info.node && info.node.name === "MEDIA-TAG") { console.log(info); } cursor.update(); // no use trying to recover the cursor if it doesn't exist @@ -396,9 +475,11 @@ define([ $mt.attr('contenteditable', 'false'); //$mt.attr('tabindex', '1'); console.log($mt); - var element = new window.CKEDITOR.dom.element($mt[0]); - editor.insertElement(element); - editor.widgets.initOn( element, 'mediatag' ) + //var element = new window.CKEDITOR.dom.element($mt[0]); + //editor.insertElement(element); + console.log($mt[0].outerHTML); + editor.insertHtml($mt[0].outerHTML); + //editor.widgets.initOn( element, 'mediatag' ) }); framework.setTitleRecommender(function () { @@ -426,12 +507,21 @@ define([ // Deal with adjasent text nodes userDocStateDom.normalize(); + + $(userDocStateDom).find('media-tag:not(.cke_widget_element)').each(function (i, el) { + console.log(el); + var element = window.CKEDITOR.dom.element.createFromHtml(el); + console.log(element); + editor.widgets.initOn( element, 'mediatag' ) + console.log(el, element); + }); + inner.normalize(); var patch = (DD).diff(inner, userDocStateDom); (DD).apply(inner, patch); displayMediaTags(framework, inner, mediaTagMap); - editor.widgets.instances = {}; + //editor.widgets.instances = {}; editor.widgets.checkWidgets(); if (framework.isReadOnly()) { var $links = $(inner).find('a'); diff --git a/www/pad/mediatag-plugin.js b/www/pad/mediatag-plugin.js index 994c05f6c..fe6b04703 100644 --- a/www/pad/mediatag-plugin.js +++ b/www/pad/mediatag-plugin.js @@ -40,6 +40,7 @@ editor.widgets.add( 'mediatag', { + getLabel: function () { return " "; }, dialog: pluginName, inline: true, upcast: function( element ) { From 41afc288026bac377e31cef91e34566638739f00 Mon Sep 17 00:00:00 2001 From: yflory Date: Fri, 20 Apr 2018 17:49:40 +0200 Subject: [PATCH 3/7] Fix conflicts, clean the code, add migration from old mediatags --- customize.dist/ckeditor-config.js | 1 - www/pad/inner.js | 119 ++++++++++++------------------ 2 files changed, 48 insertions(+), 72 deletions(-) diff --git a/customize.dist/ckeditor-config.js b/customize.dist/ckeditor-config.js index a8e6ad451..36cac87f0 100644 --- a/customize.dist/ckeditor-config.js +++ b/customize.dist/ckeditor-config.js @@ -5,7 +5,6 @@ CKEDITOR.editorConfig = function( config ) { config.needsBrFiller= fixThings; config.needsNbspFiller= fixThings; - config.allowedContent = 'media-tag[*]'; config.removeButtons= 'Source,Maximize,Anchor'; // magicline plugin inserts html crap into the document which is not part of the // document itself and causes problems when it's sent across the wire and reflected back diff --git a/www/pad/inner.js b/www/pad/inner.js index 429ef666f..b1d8b116c 100644 --- a/www/pad/inner.js +++ b/www/pad/inner.js @@ -82,7 +82,8 @@ define([ Cursor: Cursor, }; - // Filter elements to serialize + // MEDIATAG: Filter elements to serialize + // * Remove the drag&drop and resizers from the hyperjson var isWidget = function (el) { return typeof (el.getAttribute) === "function" && (el.getAttribute('data-cke-hidden-sel') || @@ -103,26 +104,12 @@ define([ return isNotMagicLine(el) && !isWidget(el); }; - // Filter attributes in the serialized elements + // MEDIATAG: Filter attributes in the serialized elements var widgetFilter = function (hj) { - // Send a widget ID == 0 to avoid a fight between broswers about it and + // Send a widget ID == 0 to avoid a fight between browsers and // prevent the container from having the "selected" class (blue border) if (hj[1].class) { var split = hj[1].class.split(' '); - /*if (split.indexOf('cke_widget_wrapper') !== -1) { - var child = (hj[2] || [])[0]; - if (child && child[0] === 'MEDIA-TAG') { - delete child[1].class; - delete child[1].contenteditable; - delete child[1]['data-cke-widget-data']; - delete child[1]['data-cke-widget-keep-attr']; - delete child[1]['data-widget']; - hj[0] = child[0]; - hj[1] = child[1]; - hj[2] = child[2]; - return hj; - } - }*/ if (split.indexOf('cke_widget_wrapper') !== -1 && split.indexOf('cke_widget_block') !== -1) { hj[1].class = "cke_widget_wrapper cke_widget_block"; @@ -133,7 +120,7 @@ define([ hj[1].class = "cke_widget_wrapper cke_widget_inline"; hj[1]['data-cke-widget-id'] = "0"; } - // Remove the title attribute of the drag&drop icons since they are localized and create fights over the language to use + // Remove the title attribute of the drag&drop icons (translation conflicts) if (split.indexOf('cke_widget_drag_handler') !== -1 || split.indexOf('cke_image_resizer') !== -1) { hj[1].title = undefined; @@ -225,42 +212,33 @@ define([ } - // Do not change the widget ids - if (info.node && info.node.tagName === 'SPAN' && - info.diff.action === 'modifyAttribute' && info.diff.name === 'data-cke-widget-id') { + // MEDIATAG + // Never modify widget ids + if (info.node && info.node.tagName === 'SPAN' && + info.diff.action === 'modifyAttribute' && info.diff.name === 'data-cke-widget-id') { + return true; + } + if (info.node && info.node.tagName === 'SPAN' && + info.node.getAttribute('class') && + /cke_widget_wrapper/.test(info.node.getAttribute('class'))) { + if (info.diff.action === 'modifyAttribute' && info.diff.name === 'class') { return true; } - - if (info.node && info.node.tagName === 'SPAN' && + //console.log(info); + } + // CkEditor drag&drop icon container + if (info.node && info.node.tagName === 'SPAN' && info.node.getAttribute('class') && - /cke_widget_wrapper/.test(info.node.getAttribute('class'))) { - if (info.diff.action === 'modifyAttribute' && info.diff.name === 'class') { - return true; - } - console.log(info); - } - if (info.node && info.node.tagName === 'MEDIA-TAG') { - console.log(info); - } - - // 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; - } - - - + info.node.getAttribute('class').split(' ').indexOf('cke_widget_drag_handler_container') !== -1) { + 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 ) ) { + return true; + } /* @@ -294,7 +272,7 @@ define([ if (info.node && info.node.tagName === 'SPAN' && info.node.getAttribute('contentEditable') === "false") { // it seems to be a magicline plugin element... - // but it can also be a widget (mediatag), in which case the removal was + // but it can also be a widget (MEDIATAG), in which case the removal was // probably intentional if (info.diff.action === 'removeElement') { @@ -474,11 +452,10 @@ define([ framework.setMediaTagEmbedder(function ($mt) { $mt.attr('contenteditable', 'false'); //$mt.attr('tabindex', '1'); - console.log($mt); + editor.insertHtml($mt[0].outerHTML); + //MEDIATAG editor.insertHtml can be replaced by: //var element = new window.CKEDITOR.dom.element($mt[0]); //editor.insertElement(element); - console.log($mt[0].outerHTML); - editor.insertHtml($mt[0].outerHTML); //editor.widgets.initOn( element, 'mediatag' ) }); @@ -507,22 +484,22 @@ define([ // Deal with adjasent text nodes userDocStateDom.normalize(); - - $(userDocStateDom).find('media-tag:not(.cke_widget_element)').each(function (i, el) { - console.log(el); - var element = window.CKEDITOR.dom.element.createFromHtml(el); - console.log(element); - editor.widgets.initOn( element, 'mediatag' ) - console.log(el, element); - }); - inner.normalize(); var patch = (DD).diff(inner, userDocStateDom); (DD).apply(inner, patch); + + // MEDIATAG: Migrate old mediatags to the widget system + $(inner).find('media-tag:not(.cke_widget_element)').each(function (i, el) { + var element = new window.CKEDITOR.dom.element(el); + var w = editor.widgets.initOn( element, 'mediatag' ) + }); + displayMediaTags(framework, inner, mediaTagMap); - //editor.widgets.instances = {}; + + // MEDIATAG: Initialize mediatag widgets inserted in the document by other users editor.widgets.checkWidgets(); + if (framework.isReadOnly()) { var $links = $(inner).find('a'); // off so that we don't end up with multiple identical handlers @@ -544,7 +521,7 @@ define([ framework.setContentGetter(function () { displayMediaTags(framework, inner, mediaTagMap); inner.normalize(); - return Hyperjson.fromDOM(inner, isNotMagicLine, hjsonFilters); + return Hyperjson.fromDOM(inner, shouldSerialize, hjsonFilters); }); $bar.find('#cke_1_toolbar_collapser').hide(); @@ -582,11 +559,11 @@ define([ var hexFileName = Util.base64ToHex(parsed.hashData.channel); var src = '/blob/' + hexFileName.slice(0,2) + '/' + hexFileName; var 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' ) + editor.insertHtml(mt); + // MEDIATAG: editor.insertHtml can be replaced by: + //var element = window.CKEDITOR.dom.element.createFromHtml(mt); + //editor.insertElement(element); + //editor.widgets.initOn( element, 'mediatag' ) } }; window.APP.FM = framework._.sfCommon.createFileManager(fmConfig); From cf549eeaef0de11e464f3fd737921067d9f3f33f Mon Sep 17 00:00:00 2001 From: yflory Date: Fri, 20 Apr 2018 17:57:48 +0200 Subject: [PATCH 4/7] Clean the code --- www/pad/inner.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/www/pad/inner.js b/www/pad/inner.js index b1d8b116c..d14ff2ee0 100644 --- a/www/pad/inner.js +++ b/www/pad/inner.js @@ -301,8 +301,6 @@ define([ return true; } - if (info.diff.action === "removeElement") { console.log(info); } - if (info.node && info.node.name === "MEDIA-TAG") { console.log(info); } cursor.update(); // no use trying to recover the cursor if it doesn't exist From 2d089244627a88a8977ba84994d2df6eda675252 Mon Sep 17 00:00:00 2001 From: yflory Date: Mon, 23 Apr 2018 14:33:39 +0200 Subject: [PATCH 5/7] Fix CkEditor issues --- www/pad/inner.js | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/www/pad/inner.js b/www/pad/inner.js index d14ff2ee0..10fd63748 100644 --- a/www/pad/inner.js +++ b/www/pad/inner.js @@ -118,7 +118,8 @@ define([ if (split.indexOf('cke_widget_wrapper') !== -1 && split.indexOf('cke_widget_inline') !== -1) { hj[1].class = "cke_widget_wrapper cke_widget_inline"; - hj[1]['data-cke-widget-id'] = "0"; + delete hj[1]['data-cke-widget-id']; + //hj[1]['data-cke-widget-id'] = "0"; } // Remove the title attribute of the drag&drop icons (translation conflicts) if (split.indexOf('cke_widget_drag_handler') !== -1 || @@ -214,8 +215,7 @@ define([ // MEDIATAG // Never modify widget ids - if (info.node && info.node.tagName === 'SPAN' && - info.diff.action === 'modifyAttribute' && info.diff.name === 'data-cke-widget-id') { + if (info.node && info.node.tagName === 'SPAN' && info.diff.name === 'data-cke-widget-id') { return true; } if (info.node && info.node.tagName === 'SPAN' && @@ -450,11 +450,11 @@ define([ framework.setMediaTagEmbedder(function ($mt) { $mt.attr('contenteditable', 'false'); //$mt.attr('tabindex', '1'); - editor.insertHtml($mt[0].outerHTML); + //editor.insertHtml($mt[0].outerHTML); //MEDIATAG editor.insertHtml can be replaced by: - //var element = new window.CKEDITOR.dom.element($mt[0]); - //editor.insertElement(element); - //editor.widgets.initOn( element, 'mediatag' ) + var element = new window.CKEDITOR.dom.element($mt[0]); + editor.insertElement(element); + editor.widgets.initOn( element, 'mediatag' ) }); framework.setTitleRecommender(function () { @@ -557,11 +557,11 @@ define([ var hexFileName = Util.base64ToHex(parsed.hashData.channel); var src = '/blob/' + hexFileName.slice(0,2) + '/' + hexFileName; var mt = ''; - editor.insertHtml(mt); + //editor.insertHtml(mt); // MEDIATAG: editor.insertHtml can be replaced by: - //var element = window.CKEDITOR.dom.element.createFromHtml(mt); - //editor.insertElement(element); - //editor.widgets.initOn( element, 'mediatag' ) + var element = window.CKEDITOR.dom.element.createFromHtml(mt); + editor.insertElement(element); + editor.widgets.initOn( element, 'mediatag' ) } }; window.APP.FM = framework._.sfCommon.createFileManager(fmConfig); From 9d30e48a4412c5e38191d3b4a301456fb0521495 Mon Sep 17 00:00:00 2001 From: yflory Date: Mon, 23 Apr 2018 15:35:55 +0200 Subject: [PATCH 6/7] Fix mediatag redrawn on content update --- www/pad/inner.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/www/pad/inner.js b/www/pad/inner.js index 10fd63748..824ea8718 100644 --- a/www/pad/inner.js +++ b/www/pad/inner.js @@ -401,7 +401,7 @@ define([ var src = tag.getAttribute('src'); if (mediaTagMap[src]) { mediaTagMap[src].forEach(function (n) { - tag.appendChild(n); + tag.appendChild(n.cloneNode()); }); } }); From 7384568f77c5fb2b407ef0310737f7202ab0aea2 Mon Sep 17 00:00:00 2001 From: yflory Date: Mon, 23 Apr 2018 15:38:21 +0200 Subject: [PATCH 7/7] Lint compliance --- www/pad/inner.js | 12 +++++------- 1 file changed, 5 insertions(+), 7 deletions(-) diff --git a/www/pad/inner.js b/www/pad/inner.js index 824ea8718..dcc310d09 100644 --- a/www/pad/inner.js +++ b/www/pad/inner.js @@ -450,11 +450,10 @@ define([ framework.setMediaTagEmbedder(function ($mt) { $mt.attr('contenteditable', 'false'); //$mt.attr('tabindex', '1'); - //editor.insertHtml($mt[0].outerHTML); - //MEDIATAG editor.insertHtml can be replaced by: + //MEDIATAG var element = new window.CKEDITOR.dom.element($mt[0]); editor.insertElement(element); - editor.widgets.initOn( element, 'mediatag' ) + editor.widgets.initOn( element, 'mediatag' ); }); framework.setTitleRecommender(function () { @@ -490,7 +489,7 @@ define([ // MEDIATAG: Migrate old mediatags to the widget system $(inner).find('media-tag:not(.cke_widget_element)').each(function (i, el) { var element = new window.CKEDITOR.dom.element(el); - var w = editor.widgets.initOn( element, 'mediatag' ) + editor.widgets.initOn( element, 'mediatag' ); }); displayMediaTags(framework, inner, mediaTagMap); @@ -557,11 +556,10 @@ define([ var hexFileName = Util.base64ToHex(parsed.hashData.channel); var src = '/blob/' + hexFileName.slice(0,2) + '/' + hexFileName; var mt = ''; - //editor.insertHtml(mt); - // MEDIATAG: editor.insertHtml can be replaced by: + // MEDIATAG var element = window.CKEDITOR.dom.element.createFromHtml(mt); editor.insertElement(element); - editor.widgets.initOn( element, 'mediatag' ) + editor.widgets.initOn( element, 'mediatag' ); } }; window.APP.FM = framework._.sfCommon.createFileManager(fmConfig);