From 59a42ee9603357d986cacb093b179ed9805b3d22 Mon Sep 17 00:00:00 2001 From: Dariusz Szut Date: Thu, 12 Jul 2018 09:29:35 +0200 Subject: [PATCH] EZP-29254: Images embedded in RichText editor dissapear after undo --- Resources/public/js/alloyeditor/plugins/embed.js | 26 +++++++++++- Resources/public/js/alloyeditor/plugins/yui3.js | 6 ++- .../public/js/views/fields/ez-richtext-editview.js | 22 ++++++++++ .../fields/richtext/ez-richtext-resolveembed.js | 49 ++++++++++++++++++++-- .../fields/richtext/ez-richtext-resolveimage.js | 12 +++++- 5 files changed, 107 insertions(+), 8 deletions(-) diff --git a/Resources/public/js/alloyeditor/plugins/embed.js b/Resources/public/js/alloyeditor/plugins/embed.js index 0bab1fbf2..718c5ad61 100644 --- a/Resources/public/js/alloyeditor/plugins/embed.js +++ b/Resources/public/js/alloyeditor/plugins/embed.js @@ -7,7 +7,8 @@ YUI.add('ez-alloyeditor-plugin-embed', function (Y) { "use strict"; var IMAGE_TYPE_CLASS = 'ez-embed-type-image', - DATA_ALIGNMENT_ATTR = 'ezalign'; + DATA_ALIGNMENT_ATTR = 'ezalign', + reloadEmbedTimeout = null; if (CKEDITOR.plugins.get('ezembed')) { return; @@ -55,6 +56,8 @@ YUI.add('ez-alloyeditor-plugin-embed', function (Y) { temp = new CKEDITOR.dom.documentFragment(wrapper.getDocument()), instance; + editor.undoManager.lock(); + temp.append(wrapper); editor.widgets.initOn(element, this.name); editor.eZ.appendElement(wrapper); @@ -86,6 +89,27 @@ YUI.add('ez-alloyeditor-plugin-embed', function (Y) { this._getEzConfigElement(); this.setWidgetContent(''); this._cancelEditEvents(); + this._attachUndoListener(); + }, + + /** + * Attaches event listener for the undo in CKEditor. + * + * @method _attachUndoListener + * @private + */ + _attachUndoListener: function () { + editor.on('afterCommandExec', function(e) { + if (e.data.name === 'undo') { + window.clearTimeout(reloadEmbedTimeout); + + editor.fire('showLoading'); + + reloadEmbedTimeout = window.setTimeout(function() { + editor.fire('snapshotRestored'); + }, 1000); + } + }); }, /** diff --git a/Resources/public/js/alloyeditor/plugins/yui3.js b/Resources/public/js/alloyeditor/plugins/yui3.js index 40581273b..d77711ca2 100644 --- a/Resources/public/js/alloyeditor/plugins/yui3.js +++ b/Resources/public/js/alloyeditor/plugins/yui3.js @@ -10,7 +10,11 @@ YUI.add('ez-alloyeditor-plugin-yui3', function (Y) { return; } - function cleanUpIds(editor) { + function cleanUpIds(editor, event) { + if (event.data.name === 'undo') { + return; + } + editor.undoManager.lock(); Array.prototype.forEach.call( editor.element.$.querySelectorAll('[id]'), diff --git a/Resources/public/js/views/fields/ez-richtext-editview.js b/Resources/public/js/views/fields/ez-richtext-editview.js index 05cf4c569..a5213ebf3 100644 --- a/Resources/public/js/views/fields/ez-richtext-editview.js +++ b/Resources/public/js/views/fields/ez-richtext-editview.js @@ -186,6 +186,28 @@ YUI.add('ez-richtext-editview', function (Y) { nativeEd.on(evtName, Y.bind(this._forwardEditorEvent, this)); }, this); + nativeEd.on('showLoading', Y.bind(function () { + if (!nativeEd.undoManager.locked) { + nativeEd.undoManager.lock(false, true); + } + + this.get('processors').forEach(function (info) { + info.processor.showLoading(this); + }, this); + }, this)); + + nativeEd.on('snapshotRestored', Y.bind(function () { + this.get('processors').forEach(function (info) { + info.processor.loadEmbeds(this); + }, this); + }, this)); + + this.after('unlockUndoManager', function () { + if (nativeEd.undoManager.locked) { + nativeEd.undoManager.unlock(); + } + }); + nativeEd.on('blur', valid); nativeEd.on('focus', valid); nativeEd.on('change', valid); diff --git a/Resources/public/js/views/fields/richtext/ez-richtext-resolveembed.js b/Resources/public/js/views/fields/richtext/ez-richtext-resolveembed.js index f0f2fe933..6d407112d 100644 --- a/Resources/public/js/views/fields/richtext/ez-richtext-resolveembed.js +++ b/Resources/public/js/views/fields/richtext/ez-richtext-resolveembed.js @@ -51,6 +51,39 @@ YUI.add('ez-richtext-resolveembed', function (Y) { } }; + /** + * Shows the loading spinner. + * + * @method showLoading + * @param {eZ.FieldView|eZ.FieldEditView} view + */ + ResolveEmbed.prototype.showLoading = function (view) { + var embeds = this._getEmbedList(view), + mapNodes = this._buildEmbedMapNodes(embeds); + + if ( !Y.Object.isEmpty(mapNodes) ) { + this._renderLoadingEmbedElements(mapNodes); + } + }; + /** + * Loads the embedded contents. + * + * @method loadEmbeds + * @param {eZ.FieldView|eZ.FieldEditView} view + */ + ResolveEmbed.prototype.loadEmbeds = function (view) { + var embeds = this._getEmbedList(view, true), + mapNodes = this._buildEmbedMapNodes(embeds); + + if (!Object.keys(mapNodes).length) { + view.fire('unlockUndoManager'); + + return; + } + + this._loadEmbeds(mapNodes, view); + }; + /** * Renders the embed from the embedStruct provided in the event parameters * that triggered the process. @@ -65,6 +98,8 @@ YUI.add('ez-richtext-resolveembed', function (Y) { var embedNodes = mapNodes[embedStruct.contentInfo.get('contentId')]; if ( !embedNodes ) { + view.fire('unlockUndoManager'); + return; } @@ -73,6 +108,8 @@ YUI.add('ez-richtext-resolveembed', function (Y) { .setContent(embedStruct.contentInfo.get('name')); }, this); delete mapNodes[embedStruct.contentInfo.get('contentId')]; + + view.fire('unlockUndoManager'); }; /** @@ -84,12 +121,12 @@ YUI.add('ez-richtext-resolveembed', function (Y) { * @param {eZ.FieldView|eZ.FieldEditView} view * @return {Y.NodeList} */ - ResolveEmbed.prototype._getEmbedList = function (view) { + ResolveEmbed.prototype._getEmbedList = function (view, force) { var embeds = view.get('container').all('[data-ezelement="ezembed"]'), list = new Y.NodeList(); embeds.each(function (embed) { - if ( !this._getEmbedContent(embed) ) { + if ( !this._getEmbedContent(embed) || force ) { list.push(embed); } }, this); @@ -153,7 +190,7 @@ YUI.add('ez-richtext-resolveembed', function (Y) { filter: {'ContentIdCriterion': Object.keys(mapNode).join(',')}, offset: 0, }, - callback: Y.bind(this._renderEmbed, this, mapNode), + callback: Y.bind(this._renderEmbed, this, mapNode, view), }); }; @@ -166,11 +203,13 @@ YUI.add('ez-richtext-resolveembed', function (Y) { * @param {Error|false} error * @param {Array} results */ - ResolveEmbed.prototype._renderEmbed = function (mapNode, error, results) { + ResolveEmbed.prototype._renderEmbed = function (mapNode, view, error, results) { var localMapNode = Y.merge(mapNode); if ( error ) { this._renderNotLoadedEmbed(localMapNode); + view.fire('unlockUndoManager'); + return; } @@ -181,6 +220,8 @@ YUI.add('ez-richtext-resolveembed', function (Y) { delete localMapNode[content.get('contentId')]; }, this); this._renderNotLoadedEmbed(localMapNode); + + view.fire('unlockUndoManager'); }; /** diff --git a/Resources/public/js/views/fields/richtext/ez-richtext-resolveimage.js b/Resources/public/js/views/fields/richtext/ez-richtext-resolveimage.js index 344224518..0a8a210b2 100644 --- a/Resources/public/js/views/fields/richtext/ez-richtext-resolveimage.js +++ b/Resources/public/js/views/fields/richtext/ez-richtext-resolveimage.js @@ -25,12 +25,12 @@ YUI.add('ez-richtext-resolveimage', function (Y) { Y.extend(ResolveImage, Y.eZ.RichTextResolveEmbed); - ResolveImage.prototype._getEmbedList = function (view) { + ResolveImage.prototype._getEmbedList = function (view, force) { var embeds = view.get('container').all('.ez-embed-type-image[data-ezelement="ezembed"]'), list = new Y.NodeList(); embeds.each(function (embed) { - if ( !this._getEmbedContent(embed) ) { + if ( !this._getEmbedContent(embed) || force ) { list.push(embed); } }, this); @@ -45,6 +45,8 @@ YUI.add('ez-richtext-resolveimage', function (Y) { imageField; if ( !embedNodes ) { + view.fire('unlockUndoManager'); + return; } @@ -57,6 +59,8 @@ YUI.add('ez-richtext-resolveimage', function (Y) { this._loadVariation(view, content, imageField, node); }, this); delete mapNodes[contentId]; + + view.fire('unlockUndoManager'); }; ResolveImage.prototype._loadEmbeds = function (mapNode, view) { @@ -77,6 +81,8 @@ YUI.add('ez-richtext-resolveimage', function (Y) { if ( error ) { this._renderNotLoadedEmbed(localMapNode); + view.fire('unlockUndoManager'); + return; } @@ -101,6 +107,8 @@ YUI.add('ez-richtext-resolveimage', function (Y) { delete localMapNode[contentId]; }, this); this._renderNotLoadedEmbed(localMapNode); + + view.fire('unlockUndoManager'); }; ResolveImage.prototype._setEmptyImage = function (embedNode) {