From 6db6134f97b603030ea71c1137f7ff971d3bed35 Mon Sep 17 00:00:00 2001 From: Antoine Guenet Date: Mon, 19 Apr 2021 12:13:57 +0000 Subject: [PATCH] [FIX] web_editor: create a history step on insert a link with link tools Prior to this fix, link tools didn't create a history step when they were destroyed, meaning that you couldn't undo the creation of the link. This ensures that the link tools are destroyed whenever a click is done outside the toolbar, which ends the link edition and commits it to the DOM. At that moment we can consider the link edition is over, equivalent to saving the link dialog, and we can create a history step. X-original-commit: 9b10c5923dadab3a49d474eb236c7c2617fb4be0 --- .../static/src/js/wysiwyg/widgets/link.js | 6 +++--- .../static/src/js/wysiwyg/widgets/link_tools.js | 16 ++++++---------- .../web_editor/static/src/js/wysiwyg/wysiwyg.js | 13 ++++++++++--- 3 files changed, 19 insertions(+), 16 deletions(-) diff --git a/addons/web_editor/static/src/js/wysiwyg/widgets/link.js b/addons/web_editor/static/src/js/wysiwyg/widgets/link.js index eee093774ef..4565001970b 100644 --- a/addons/web_editor/static/src/js/wysiwyg/widgets/link.js +++ b/addons/web_editor/static/src/js/wysiwyg/widgets/link.js @@ -127,7 +127,7 @@ const Link = Widget.extend({ } this._updateOptionsUI(); - this._adaptPreview(false); + this._adaptPreview(); this.$('input:visible:first').focus(); @@ -213,7 +213,7 @@ const Link = Widget.extend({ * @abstract * @private */ - _adaptPreview: function (createStep = true) {}, + _adaptPreview: function () {}, /** * @private */ @@ -318,7 +318,7 @@ const Link = Widget.extend({ return { content: content, url: this._correctLink(url), - classes: classes.replace(allWhitespace, ' ').replace(allStartAndEndSpace, '').replace(/oe_edited_link/, ''), + classes: classes.replace(allWhitespace, ' ').replace(allStartAndEndSpace, ''), oldAttributes: this.data.oldAttributes, isNewWindow: isNewWindow, doStripDomain: doStripDomain, diff --git a/addons/web_editor/static/src/js/wysiwyg/widgets/link_tools.js b/addons/web_editor/static/src/js/wysiwyg/widgets/link_tools.js index cc661c86700..18449cb1abc 100644 --- a/addons/web_editor/static/src/js/wysiwyg/widgets/link_tools.js +++ b/addons/web_editor/static/src/js/wysiwyg/widgets/link_tools.js @@ -21,7 +21,6 @@ const LinkTools = Link.extend({ * @override */ init: function (parent, options, editable, data, $button, link) { - options.wysiwyg.odooEditor.automaticStepSkipStack(); link = link || this.getOrCreateLink(editable); this._super(parent, options, editable, data, $button, link); }, @@ -29,21 +28,24 @@ const LinkTools = Link.extend({ * @override */ start: function () { + this.options.wysiwyg.odooEditor.observerUnactive(); this.$link.addClass('oe_edited_link'); this.$button.addClass('active'); return this._super(...arguments); }, destroy: function () { - this.options.wysiwyg.odooEditor.automaticStepSkipStack(); $('.oe_edited_link').removeClass('oe_edited_link'); const $contents = this.$link.contents(); if (!this.$link.attr('href') && !this.colorCombinationClass) { $contents.unwrap(); } this.$button.removeClass('active'); + this.options.wysiwyg.odooEditor.observerActive(); + this.applyLinkToDom(this._getData()); const start = $contents[0] || this.$link[0]; const end = $contents[$contents.length - 1] || this.$link[0]; setCursor(start, 0, end, nodeSize(end)); + this.options.wysiwyg.odooEditor.historyStep(); this._super(...arguments); }, @@ -54,19 +56,13 @@ const LinkTools = Link.extend({ /** * @override */ - _adaptPreview: function (createStep = true) { + _adaptPreview: function () { var data = this._getData(); if (data === null) { return; } - const $links = $('.oe_edited_link'); - $links.removeClass('oe_edited_link'); + data.classes += ' oe_edited_link'; this.applyLinkToDom(data); - if (createStep) { - this.options.wysiwyg.odooEditor.historyStep(); - } - this.options.wysiwyg.odooEditor.automaticStepSkipStack(); - $links.addClass('oe_edited_link'); }, /** * @override diff --git a/addons/web_editor/static/src/js/wysiwyg/wysiwyg.js b/addons/web_editor/static/src/js/wysiwyg/wysiwyg.js index 5bbca25a4e9..fa792d045ce 100644 --- a/addons/web_editor/static/src/js/wysiwyg/wysiwyg.js +++ b/addons/web_editor/static/src/js/wysiwyg/wysiwyg.js @@ -544,6 +544,16 @@ const Wysiwyg = Widget.extend({ if (forceOpen || !this.linkTools) { const $btn = this.toolbar.$el.find('#create-link'); this.linkTools = new weWidgets.LinkTools(this, {wysiwyg: this}, this.odooEditor.editable, {}, $btn, link); + const _onMousedown = ev => { + if (!ev.target.closest('.oe-toolbar')) { + // Destroy the link tools on click anywhere outside the + // toolbar. + this.linkTools && this.linkTools.destroy(); + this.linkTools = undefined; + this.odooEditor.document.removeEventListener('mousedown', _onMousedown, true); + } + }; + this.odooEditor.document.addEventListener('mousedown', _onMousedown, true); this.linkTools.appendTo(this.toolbar.$el); } else { this.linkTools = undefined; @@ -891,9 +901,6 @@ const Wysiwyg = Widget.extend({ // Remove the alt tools. this.altTools && this.altTools.destroy(); this.altTools = undefined; - // Remove the link tools. - this.linkTools && this.linkTools.destroy(); - this.linkTools = undefined; // Hide the create-link button if the selection spans several blocks. const selection = this.odooEditor.document.getSelection(); const range = selection.rangeCount && selection.getRangeAt(0);