fix(RTE): column break classes are applied twice to lic element (#1937)

Frontify · Jul 1, 2024 · 8f5f9e9 · 8f5f9e9
1 parent d6a42b8
commit 8f5f9e9
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 3 deletions.
diff --git a/.changeset/silent-dots-guess.md b/.changeset/silent-dots-guess.md
@@ -0,0 +1,5 @@
+---
+"@frontify/fondue": patch
+---
+
+fix(RTE): column break classes are applied twice to lic element
diff --git a/.../fondue/src/components/RichTextEditor/Plugins/ListPlugin/ListItemContentMarkupElement.tsx b/.../fondue/src/components/RichTextEditor/Plugins/ListPlugin/ListItemContentMarkupElement.tsx
@@ -12,9 +12,9 @@ import { justifyClassNames } from '../helper';
 
 export const LIST_ITEM_SPAN_CLASSES = 'tw-w-auto tw-min-w-[10px]';
 
-export const getLicElementClassNames = (element: TElement) =>
+export const getLicElementClassNames = (element: TElement, includeColumnBreakClasses = true) =>
     merge([
-        getColumnBreakClasses(element),
+        includeColumnBreakClasses && getColumnBreakClasses(element),
         element.align ? justifyClassNames[element.align as string] : 'tw-justify-start',
         'tw-grid tw-grid-cols-[min-content_repeat(3,_auto)]',
     ]);

diff --git a/...ondue/src/components/RichTextEditor/serializer/utils/serializeNodeToHtmlRecursive.spec.ts b/...ondue/src/components/RichTextEditor/serializer/utils/serializeNodeToHtmlRecursive.spec.ts
@@ -67,6 +67,38 @@ describe('serializeNodeToHtmlRecursive()', () => {
         );
     });
 
+    it('serializes ordered list to html with column break', () => {
+        const node = {
+            type: ELEMENT_OL,
+            children: [
+                {
+                    type: ELEMENT_LI,
+                    children: [
+                        {
+                            type: ELEMENT_LIC,
+                            children: [{ text: 'First item' }],
+                            breakAfterColumn: 'active',
+                        },
+                    ],
+                },
+                {
+                    type: ELEMENT_LI,
+                    children: [
+                        {
+                            type: ELEMENT_LIC,
+                            children: [{ text: 'Second item' }],
+                        },
+                    ],
+                },
+            ],
+        };
+        const result = serializeNodeToHtmlRecursive(node, defaultStyles, {});
+
+        expect(result).to.be.equal(
+            `<ol dir="auto" class="tw-list-none tw-pl-[10px] tw-mb-[10px] tw-ml-[15px] [&>li>p]:before:tw-pr-1 [&>li>p]:before:tw-tabular-nums [&>li>p]:before:tw-content-[counter(count,decimal)_'._'] tw-break-words" style="counter-reset: count;"><li dir="auto" class="tw-break-words [&>p]:before:tw-flex [&>p]:before:tw-justify-end [&>p]:before:tw-w-[1.2em] !tw-no-underline !tw-list-item" style="font-size: 14px; font-style: normal; font-weight: normal; counter-increment: count;"><p dir="auto" class="tw-break-words tw-break-after-column tw-break-inside-avoid-column tw-justify-start tw-grid tw-grid-cols-[min-content_repeat(3,_auto)]"><span class="${LIST_ITEM_SPAN_CLASSES}">First item</span></p></li><li dir="auto" class="tw-break-words [&>p]:before:tw-flex [&>p]:before:tw-justify-end [&>p]:before:tw-w-[1.2em] !tw-no-underline !tw-list-item" style="font-size: 14px; font-style: normal; font-weight: normal; counter-increment: count;"><p dir="auto" class="tw-break-words tw-justify-start tw-grid tw-grid-cols-[min-content_repeat(3,_auto)]"><span class="${LIST_ITEM_SPAN_CLASSES}">Second item</span></p></li></ol>`,
+        );
+    });
+
     it('serializes active break after column element to html', () => {
         const node = {
             type: ELEMENT_PARAGRAPH,

diff --git a/...ges/fondue/src/components/RichTextEditor/serializer/utils/serializeNodeToHtmlRecursive.ts b/...ges/fondue/src/components/RichTextEditor/serializer/utils/serializeNodeToHtmlRecursive.ts
@@ -131,7 +131,7 @@ const MapNodeTypesToHtml: { [key: string]: ({ ...args }: Arguments) => string }
             getLiStyles(node, styles),
         )}">${children}</li>`,
     [ELEMENT_LIC]: ({ classNames, children, node }) =>
-        `<p dir="auto" class="${classNames} ${getLicElementClassNames(node)}"><span class="${LIST_ITEM_SPAN_CLASSES}">${children}</span></p>`,
+        `<p dir="auto" class="${classNames} ${getLicElementClassNames(node, false)}"><span class="${LIST_ITEM_SPAN_CLASSES}">${children}</span></p>`,
     [ELEMENT_LINK]: ({ node, children, classNames, styles }) => linkNode(node, children, classNames, styles),
     [ELEMENT_BUTTON]: ({ node, children, classNames, styles }) =>
         buttonNode(node, children, classNames, styles as ButtonStylesType),