MWPW-162740: Fix unresponsive CTA RTE field (#102)

* MWPW-162740: Fix unresponsive CTA RTE field * Add LinkNodeView class and enhance link handling in RteField * OST link changes fix Co-Authored-By: Ilyas Türkben <isturkben@gmail.com> * removed text attr Co-Authored-By: Ilyas Türkben <isturkben@gmail.com> * fix failing tests --------- Co-authored-by: Ilyas Türkben <isturkben@gmail.com> Co-authored-by: Ilyas Türkben <ilyas@adobe.com>
adobecom · Dec 3, 2024 · 3aa499d · 3aa499d
1 parent d6ce301
commit 3aa499d
Show file tree

Hide file tree

Showing 3 changed files with 78 additions and 15 deletions.
diff --git a/studio/src/rte/ost.js b/studio/src/rte/ost.js
@@ -61,7 +61,7 @@ function getObjectDifference(values, defaults) {
 }
 
 export const attributeFilter = (key) =>
-    /^(class|data-|is|href|title)/.test(key);
+    /^(class|data-|is|href|title|target)/.test(key);
 
 const OST_TYPE_MAPPING = {
     price: null,

diff --git a/studio/src/rte/rte-field.js b/studio/src/rte/rte-field.js
@@ -23,6 +23,57 @@ const isNodeCheckoutLink = (node) => {
     return node.type.name === 'link' && node.attrs['data-wcs-osi'] !== null;
 };
 
+class LinkNodeView {
+    constructor(node, view, getPos) {
+        this.node = node;
+        this.view = view;
+        this.getPos = getPos;
+
+        const isCheckoutLink = isNodeCheckoutLink(node);
+        this.dom = isCheckoutLink
+            ? document.createElement('a', { is: CUSTOM_ELEMENT_CHECKOUT_LINK })
+            : document.createElement('a');
+
+        for (const [key, value] of Object.entries(node.attrs)) {
+            if (value !== null) {
+                this.dom.setAttribute(key, value);
+            }
+        }
+
+        this.dom.textContent = this.node.textContent || '';
+
+        this.dom.addEventListener('click', (e) => e.preventDefault());
+    }
+
+    update(node) {
+        if (node.type !== this.node.type) {
+            return false;
+        }
+        this.node = node;
+
+        // Update attributes (excluding 'text')
+        for (const [key, value] of Object.entries(node.attrs)) {
+            if (value !== null) {
+                this.dom.setAttribute(key, value);
+            }
+        }
+
+        // Update text content
+        this.dom.textContent = this.node.textContent || '';
+
+        return true;
+    }
+
+    selectNode() {
+        this.dom.classList.add('ProseMirror-selectednode');
+    }
+
+    deselectNode() {
+        this.dom.classList.remove('ProseMirror-selectednode');
+    }
+}
+
+
 let ostRteFieldSource;
 
 class RteField extends LitElement {
@@ -232,11 +283,20 @@ class RteField extends LitElement {
                     'data-perpetual': { default: null },
                     'data-promotion-code': { default: null },
                     'data-wcs-osi': { default: null },
+                    'data-template': { default: null },
                     title: { default: null },
                     target: { default: null },
                     'data-analytics-id': { default: null },
                 },
-                parseDOM: [{ tag: 'a', getAttrs: this.#collectDataAttributes }],
+                parseDOM: [
+                    {
+                        tag: 'a',
+                        getAttrs: (dom) => ({
+                            ...this.#collectDataAttributes(dom),
+                            text: dom.textContent || '', // Collect text content as an attribute
+                        }),
+                    },
+                ],
                 toDOM: this.#createLinkElement.bind(this),
             });
         }
@@ -301,7 +361,7 @@ class RteField extends LitElement {
         for (const name of dom.getAttributeNames()) {
             if (attributeFilter(name)) {
                 const value = dom.getAttribute(name);
-                if (!value) continue;
+                if (value === null) continue;
                 attrs[name] = value;
             }
         }
@@ -328,10 +388,11 @@ class RteField extends LitElement {
 
         // Set attributes
         for (const [key, value] of Object.entries(node.attrs)) {
-            if (value !== null && key !== 'text') {
+            if (value) {
                 element.setAttribute(key, value);
             }
         }
+        if (!element.title) element.removeAttribute('title');
         // Serialize and append child nodes (content)
         const fragment = this.#serializer.serializeFragment(node.content);
         element.appendChild(fragment);
@@ -354,6 +415,10 @@ class RteField extends LitElement {
                 focus: this.#boundHandlers.focus,
             },
             handleDoubleClickOn: this.#boundHandlers.doubleClickOn,
+            nodeViews: {
+                link: (node, view, getPos) =>
+                    new LinkNodeView(node, view, getPos),
+            },
         });
 
         try {
@@ -525,14 +590,12 @@ class RteField extends LitElement {
             'data-analytics-id': analyticsId || null,
         };
 
+        const content = state.schema.text(text || selection.node.textContent);
         if (selection.node?.type.name === 'link') {
-            const updatedNode = linkNodeType.create(
-                { ...selection.node.attrs, ...linkAttrs },
-                state.schema.text(text || selection.node.textContent),
-            );
+            const mergedAttributes = { ...selection.node.attrs, ...linkAttrs };
+            const updatedNode = linkNodeType.create(mergedAttributes, content);
             tr = tr.replaceWith(selection.from, selection.to, updatedNode);
         } else {
-            const content = state.schema.text(text || '');
             const linkNode = linkNodeType.create(linkAttrs, content);
             tr = selection.empty
                 ? tr.insert(selection.from, linkNode)
@@ -567,8 +630,8 @@ class RteField extends LitElement {
                 : state.schema.nodes.link; // Fixed to use 'link' node type
 
         const mergedAttributes = {
+            ...(selection.node?.attrs ?? {}),
             ...attributes,
-            class: attributes.class || selection.node?.attrs.class || '',
         };
 
         const content =

diff --git a/studio/test/rte/rte-field.test.html b/studio/test/rte/rte-field.test.html
@@ -200,7 +200,7 @@
                         );
                         await delay(100);
                         expect(rte.value).to.equal(
-                            '<span is="inline-price" data-wcs-osi="abm"></span><a is="checkout-link" class="accent" href="" data-wcs-osi="abm">Buy now</a><a is="checkout-link" class="primary-outline" href="" data-wcs-osi="abm">Buy now</a><a is="checkout-link" class="secondary" href="" data-wcs-osi="abm">Buy now</a><a is="checkout-link" class="secondary-outline" href="" data-wcs-osi="abm">Buy now</a><a is="checkout-link" class="primary-link" href="" data-wcs-osi="abm">Buy now</a><a is="checkout-link" class="secondary-link" href="" data-wcs-osi="abm">Buy now</a>',
+                            '<span is="inline-price" data-wcs-osi="abm"></span><a is="checkout-link" class="accent" data-wcs-osi="abm">Buy now</a><a is="checkout-link" class="primary-outline" data-wcs-osi="abm">Buy now</a><a is="checkout-link" class="secondary" data-wcs-osi="abm">Buy now</a><a is="checkout-link" class="secondary-outline" data-wcs-osi="abm">Buy now</a><a is="checkout-link" class="primary-link" data-wcs-osi="abm">Buy now</a><a is="checkout-link" class="secondary-link" data-wcs-osi="abm">Buy now</a>',
                         );
 
                         rte.offerSelectorToolButtonElement.click();
@@ -272,7 +272,7 @@
                         );
                         await delay(100);
                         expect(rte.value).to.equal(
-                            '<p>&nbsp;<a is="checkout-link" href="" data-checkout-workflow="UCv3" data-checkout-workflow-step="email" data-wcs-osi="Mutn1LYoGojkrcMdCLO7LQlx1FyTHw27ETsfLv0h8DQ">Get Offer</a>&nbsp;</p><p><a is="checkout-link" href="" data-checkout-workflow="UCv3" data-checkout-workflow-step="email" data-wcs-osi="Mutn1LYoGojkrcMdCLO7LQlx1FyTHw27ETsfLv0h8DQ">Buy now</a></p><p><a is="checkout-link" href="" data-checkout-workflow="UCv3" data-checkout-workflow-step="email" data-wcs-osi="Mutn1LYoGojkrcMdCLO7LQlx1FyTHw27ETsfLv0h8DQ">Buy now</a></p><p><a is="checkout-link" href="" data-checkout-workflow="UCv3" data-checkout-workflow-step="email" data-wcs-osi="Hnk2P6L5wYhnpZLFYTW5upuk2Y3AJXlso8VGWQ0l2TI">Buy now</a></p>',
+                            '<p>&nbsp;<a is="checkout-link" data-checkout-workflow="UCv3" data-checkout-workflow-step="email" data-wcs-osi="Mutn1LYoGojkrcMdCLO7LQlx1FyTHw27ETsfLv0h8DQ">Get Offer</a>&nbsp;</p><p><a is="checkout-link" data-checkout-workflow="UCv3" data-checkout-workflow-step="email" data-wcs-osi="Mutn1LYoGojkrcMdCLO7LQlx1FyTHw27ETsfLv0h8DQ">Buy now</a></p><p><a is="checkout-link" data-checkout-workflow="UCv3" data-checkout-workflow-step="email" data-wcs-osi="Mutn1LYoGojkrcMdCLO7LQlx1FyTHw27ETsfLv0h8DQ">Buy now</a></p><p><a is="checkout-link" data-checkout-workflow="UCv3" data-checkout-workflow-step="email" data-wcs-osi="Hnk2P6L5wYhnpZLFYTW5upuk2Y3AJXlso8VGWQ0l2TI">Buy now</a></p>',
                         );
                     });
 
@@ -346,7 +346,7 @@
                         data-promotion-code=""
                         data-quantity="1"
                         data-wcs-osi="Mutn1LYoGojkrcMdCLO7LQlx1FyTHw27ETsfLv0h8DQ"
-                        href=""
+
                         data-ims-country="DE"
                         >Get Offer</a
                     >&nbsp;
@@ -360,7 +360,7 @@
                             data-promotion-code=""
                             data-quantity="1"
                             data-wcs-osi="Mutn1LYoGojkrcMdCLO7LQlx1FyTHw27ETsfLv0h8DQ"
-                            href=""
+
                             >Buy now</a
                         ></strong
                     >
@@ -381,7 +381,7 @@
                 <p>
                     <a
                         is="checkout-link"
-                        href=""
+
                         data-checkout-workflow="UCv3"
                         data-checkout-workflow-step="email"
                         data-promotion-code=""