[FIX] website_form, *: allow to update buttons using link dialog

*: web_editor, website_mass_mailing

When we double click a link/button, a link dialog appears
to update the target properties, and since the current link dialog
can only handle anchor targets, using it on buttons leads to some
inconsistencies :

- visible href options for button & url required to save changes.
- missing preview when button style changed.
...

The goal of this commit is to add a fix (with minimum of code) on
summernote linkdialog to handle button elements using the same logic as
anchor nodes.

Also, update website form test tour to test those new changes.

Part of https://github.com/odoo/odoo/pull/62206
task-2381305

1 files changed, 27 insertions, 7 deletions

diff --git a/addons/web_editor/static/lib/summernote/src/js/module/Editor.js b/addons/web_editor/static/lib/summernote/src/js/module/Editor.js
index 40b7c95e98d..b5e3190ce2e 100644
--- a/addons/web_editor/static/lib/summernote/src/js/module/Editor.js
+++ b/addons/web_editor/static/lib/summernote/src/js/module/Editor.js
@@ -618,6 +618,9 @@ define([
       var isNewWindow = linkInfo.isNewWindow;
       var rng = linkInfo.range || this.createRange($editable);
       var isTextChanged = rng.toString() !== linkText;
+      // Hack : This method was updated to create buttons as well (using the same logic as anchor nodes).
+      const nodeName = linkInfo.isButton ? 'BUTTON' : 'A';
+      const pred = dom.makePredByNodeName(nodeName);
 
       options = options || dom.makeLayoutInfo($editable).editor().data('options');
 
@@ -629,23 +632,25 @@ define([
 
       var anchors = [];
       // ODOO: adding this branch to modify existing anchor if it fully contains the range
-      var ancestor_anchor = dom.ancestor(rng.sc, dom.isAnchor);
-      if(ancestor_anchor && ancestor_anchor === dom.ancestor(rng.ec, dom.isAnchor)) {
+      var ancestor_anchor = dom.ancestor(rng.sc, pred);
+      if (ancestor_anchor && ancestor_anchor === dom.ancestor(rng.ec, pred)) {
           anchors.push($(ancestor_anchor).html(linkText).get(0));
       } else if (isTextChanged) {
-        // Create a new link when text changed.
-        var anchor = rng.insertNode($('<A>' + linkText + '</A>')[0]);
+        // Create a new element when text changed.
+        var anchor = rng.insertNode($(`<${nodeName}>${linkText}</${nodeName}>`)[0]);
         anchors.push(anchor);
       } else {
         anchors = style.styleNodes(rng, {
-          nodeName: 'A',
+          nodeName: nodeName,
           expandClosestSibling: true,
           onlyPartialContains: true
         });
       }
 
       $.each(anchors, function (idx, anchor) {
-        $(anchor).attr('href', linkUrl);
+        if (!linkInfo.isButton) {
+          $(anchor).attr('href', linkUrl);
+        }
         $(anchor).attr('class', linkInfo.className || null); // ODOO: addition
         $(anchor).css(linkInfo.style || {}); // ODOO: addition
         if (isNewWindow) {
@@ -672,6 +677,8 @@ define([
 
     /**
      * returns link info
+     * Hack : This method was updated to return a boolean attribute 'isButton' to allow
+     * handling buttons in linkDialog.
      *
      * @return {Object}
      * @return {WrappedRange} return.range
@@ -706,11 +713,24 @@ define([
       // Get the first anchor on range(for edit).
       var $anchor = $(list.head(rng.nodes(dom.isAnchor)));
 
+      // Check if the target is a button element.
+      let isButton = false;
+      if (!$anchor.length) {
+        const pred = dom.makePredByNodeName('BUTTON');
+        const rngNew = range.create().expand(pred);
+        const target = list.head(rngNew.nodes(pred));
+        if (target && target.nodeName === 'BUTTON') {
+          isButton = true;
+          rng = rngNew;
+        }
+      }
+
       return {
         range: rng,
         text: rng.toString(),
         isNewWindow: $anchor.length ? $anchor.attr('target') === '_blank' : false,
-        url: $anchor.length ? $anchor.attr('href') : ''
+        url: $anchor.length ? $anchor.attr('href') : '',
+        isButton: isButton,
       };
     };