Skip to content

Commit

Permalink
Merge branch 'main' into MWPW-163214
Browse files Browse the repository at this point in the history
  • Loading branch information
@Axelcureno
Axelcureno committed Dec 3, 2024
2 parents 3916838 + 3aa499d commit 13ef33a
Show file tree
Hide file tree
Showing 3 changed files with 78 additions and 15 deletions.
2 changes: 1 addition & 1 deletion studio/src/rte/ost.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
81 changes: 72 additions & 9 deletions studio/src/rte/rte-field.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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),
});
}
Expand Down Expand Up @@ -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;
}
}
Expand All @@ -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);
Expand All @@ -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 {
Expand Down Expand Up @@ -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)
Expand Down Expand Up @@ -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 =
Expand Down
10 changes: 5 additions & 5 deletions studio/test/rte/rte-field.test.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down Expand Up @@ -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>',
);
});

Expand Down Expand Up @@ -346,7 +346,7 @@
data-promotion-code=""
data-quantity="1"
data-wcs-osi="Mutn1LYoGojkrcMdCLO7LQlx1FyTHw27ETsfLv0h8DQ"
href=""

data-ims-country="DE"
>Get Offer</a
>&nbsp;
Expand All @@ -360,7 +360,7 @@
data-promotion-code=""
data-quantity="1"
data-wcs-osi="Mutn1LYoGojkrcMdCLO7LQlx1FyTHw27ETsfLv0h8DQ"
href=""

>Buy now</a
></strong
>
Expand All @@ -381,7 +381,7 @@
<p>
<a
is="checkout-link"
href=""

data-checkout-workflow="UCv3"
data-checkout-workflow-step="email"
data-promotion-code=""
Expand Down

0 comments on commit 13ef33a

Please sign in to comment.