[FIX] web_editor: add label in link_dialog from wysiwg

Open the link dialog from the wysiwyg with the label input.

Task-2704538

closes odoo/odoo#83454

X-original-commit: f7a0c321d94f84ed7daf4f6abff0740ad81024bb
Signed-off-by: David Monjoie (dmo) <dmo@odoo.com>

addons/web_editor/static/src/js/wysiwyg/widgets/link.js

@@ -84,9 +84,14 @@ const Link = Widget.extend({
                 $node = $node.parent();
             }
             const linkNode = this.$link[0] || this.data.range.cloneContents();
-            const linkText = linkNode.innerHTML || linkNode.textContent;
+            const linkText = linkNode.textContent;
             this.data.content = linkText.replace(/[ \t\r\n]+/g, ' ');
             this.data.originalText = this.data.content;
+            if (linkNode instanceof DocumentFragment) {
+                this.data.originalHTML = $('<fakeEl>').append(linkNode).html();
+            } else {
+                this.data.originalHTML = linkNode.innerHTML;
+            }
             this.data.url = this.$link.attr('href') || '';
         } else {
             this.data.content = this.data.content ? this.data.content.replace(/[ \t\r\n]+/g, ' ') : '';
@@ -199,17 +204,7 @@ const Link = Widget.extend({
         if (!this.$link.attr('target')) {
             this.$link[0].removeAttribute('target');
         }
-        if (this._setLinkContent && (data.content !== this.data.originalText || data.url !== this.data.url)) {
-            const content = (data.content && data.content.length) ? data.content : data.url;
-            // If there is a this.data.originalText, it means that we selected
-            // the text and we could not change the content through the text
-            // input.html() is needed in case we selected rich html content.
-            if (this.data.originalText) {
-                this.$link.html(content);
-            } else {
-                this.$link.text(content);
-            }
-        }
+        this._updateLinkContent(this.$link, data);
     },
     /**
      * Return the link element to edit. Create one from selection if none was
@@ -459,6 +454,25 @@ const Link = Widget.extend({
      * @param {boolean} [active]
      */
     _setSelectOption: function ($option, active) {},
+    /**
+     * Update the link content.
+     *
+     * @private
+     * @param {JQuery} $link
+     * @param {object} linkInfos
+     * @param {boolean} force
+     */
+    _updateLinkContent($link, linkInfos, { force = false } = {}) {
+        if (force || (this._setLinkContent && (linkInfos.content !== this.data.originalText || linkInfos.url !== this.data.url))) {
+            if (linkInfos.content === this.data.originalText) {
+                $link.html(this.data.originalHTML);
+            } else if (linkInfos.content && linkInfos.content.length) {
+                $link.text(linkInfos.content);
+            } else {
+                $link.text(linkInfos.url);
+            }
+        }
+    },
     /**
      * @abstract
      * @private

addons/web_editor/static/src/js/wysiwyg/widgets/link_dialog.js

@@ -74,7 +74,10 @@ const _DialogLinkWidget = Link.extend({
             href: data.url && data.url.length ? data.url : '#',
             class: `${data.classes.replace(/float-\w+/, '')} o_btn_preview`,
         };
-        this.$("#link-preview").attr(attrs).html((data.content && data.content.length) ? data.content : data.url);
+
+        const $linkPreview = this.$("#link-preview");
+        $linkPreview.attr(attrs);
+        this._updateLinkContent($linkPreview, data, { force: true });
     },
     /**
      * @override

addons/web_editor/static/src/js/wysiwyg/wysiwyg.js

@@ -948,7 +948,9 @@ const Wysiwyg = Widget.extend({
             const linkDialog = new weWidgets.LinkDialog(this, {
                 forceNewWindow: this.options.linkForceNewWindow,
                 wysiwyg: this,
-            }, this.$editable[0], {}, undefined, options.link);
+            }, this.$editable[0], {
+                needLabel: true,
+            }, undefined, options.link);
             const restoreSelection = preserveCursor(this.odooEditor.document);
             linkDialog.open();
             linkDialog.on('save', this, data => {