[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

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,

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

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);