From b2e12bd3bc5243e0524102de4614c31c8aade7da Mon Sep 17 00:00:00 2001
From: fulopdaniel <daniel.fulop@frontify.com>
Date: Mon, 9 Sep 2024 11:12:54 +0200
Subject: [PATCH 1/3] fix(RTE): ordered list points can break into multiple
 lines

---
 .../ListPlugin/OrderedListPlugin/OrderedListMarkupElement.tsx   | 2 +-
 .../UnorderedListPlugin/UnorderedListMarkupElement.tsx          | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/fondue/src/components/RichTextEditor/Plugins/ListPlugin/OrderedListPlugin/OrderedListMarkupElement.tsx b/packages/fondue/src/components/RichTextEditor/Plugins/ListPlugin/OrderedListPlugin/OrderedListMarkupElement.tsx
index 6fba41b915..335dbae793 100644
--- a/packages/fondue/src/components/RichTextEditor/Plugins/ListPlugin/OrderedListPlugin/OrderedListMarkupElement.tsx
+++ b/packages/fondue/src/components/RichTextEditor/Plugins/ListPlugin/OrderedListPlugin/OrderedListMarkupElement.tsx
@@ -24,7 +24,7 @@ const getNestingLevel = (editor: PlateEditor, element: TElement) => {
 };
 
 export const getOrderedListClasses = (nestingLevel: number) =>
-    `tw-list-none tw-pl-[10px] tw-mb-[10px] tw-ml-[15px] [&>li>p]:before:tw-pr-1 [&>li>p]:before:tw-tabular-nums ${
+    `tw-list-none tw-pl-[10px] tw-mb-[10px] tw-ml-[15px] [&>li>p]:before:tw-whitespace-nowrap [&>li>p]:before:tw-pr-1 [&>li>p]:before:tw-tabular-nums ${
         LIST_TYPES[nestingLevel % 3]
     }`;
 export const OL_STYLES = { counterReset: 'count' };
diff --git a/packages/fondue/src/components/RichTextEditor/Plugins/ListPlugin/UnorderedListPlugin/UnorderedListMarkupElement.tsx b/packages/fondue/src/components/RichTextEditor/Plugins/ListPlugin/UnorderedListPlugin/UnorderedListMarkupElement.tsx
index 59fb50f5be..0dd59582f9 100644
--- a/packages/fondue/src/components/RichTextEditor/Plugins/ListPlugin/UnorderedListPlugin/UnorderedListMarkupElement.tsx
+++ b/packages/fondue/src/components/RichTextEditor/Plugins/ListPlugin/UnorderedListPlugin/UnorderedListMarkupElement.tsx
@@ -6,7 +6,7 @@ import { ELEMENT_UL } from '@udecode/plate-list';
 import { MarkupElement } from '../../MarkupElement';
 
 export const UL_CLASSES =
-    "[&>li>p]:before:tw-content-['•'] [&>li>p]:before:tw-px-2 tw-list-none tw-pl-[10px] tw-mb-[10px] tw-ml-[15px]";
+    "[&>li>p]:before:tw-content-['•'] [&>li>p]:before:tw-whitespace-nowrap [&>li>p]:before:tw-px-2 tw-list-none tw-pl-[10px] tw-mb-[10px] tw-ml-[15px]";
 
 export const UnorderedListMarkupElementNode = ({ attributes, children }: PlateRenderLeafProps) => (
     <ul className={UL_CLASSES} {...attributes}>

From 2aee23f9e3e27e9931d4efafa1756ccc7cd63dd8 Mon Sep 17 00:00:00 2001
From: Daniel Fulop <daniel.fulop@frontify.com>
Date: Mon, 9 Sep 2024 11:13:38 +0200
Subject: [PATCH 2/3] Create eight-forks-marry.md

---
 .changeset/eight-forks-marry.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/eight-forks-marry.md

diff --git a/.changeset/eight-forks-marry.md b/.changeset/eight-forks-marry.md
new file mode 100644
index 0000000000..213ff3db8e
--- /dev/null
+++ b/.changeset/eight-forks-marry.md
@@ -0,0 +1,5 @@
+---
+"@frontify/fondue": patch
+---
+
+fix(RTE): ordered list points can break into multiple lines

From 23a581d521d0a8fdb022e2a27fb49ed4c0ed68ee Mon Sep 17 00:00:00 2001
From: fulopdaniel <daniel.fulop@frontify.com>
Date: Mon, 9 Sep 2024 11:19:13 +0200
Subject: [PATCH 3/3] fix tests

---
 .../serializer/utils/serializeNodeToHtmlRecursive.spec.ts   | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/fondue/src/components/RichTextEditor/serializer/utils/serializeNodeToHtmlRecursive.spec.ts b/packages/fondue/src/components/RichTextEditor/serializer/utils/serializeNodeToHtmlRecursive.spec.ts
index 7c3bc9feac..c5941e3c24 100644
--- a/packages/fondue/src/components/RichTextEditor/serializer/utils/serializeNodeToHtmlRecursive.spec.ts
+++ b/packages/fondue/src/components/RichTextEditor/serializer/utils/serializeNodeToHtmlRecursive.spec.ts
@@ -63,7 +63,7 @@ describe('serializeNodeToHtmlRecursive()', () => {
         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-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>`,
+            `<ol dir="auto" class="tw-list-none tw-pl-[10px] tw-mb-[10px] tw-ml-[15px] [&>li>p]:before:tw-whitespace-nowrap [&>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-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>`,
         );
     });
 
@@ -95,7 +95,7 @@ describe('serializeNodeToHtmlRecursive()', () => {
         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>`,
+            `<ol dir="auto" class="tw-list-none tw-pl-[10px] tw-mb-[10px] tw-ml-[15px] [&>li>p]:before:tw-whitespace-nowrap [&>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>`,
         );
     });
 
@@ -189,7 +189,7 @@ describe('serializeNodeToHtmlRecursive()', () => {
         const result = serializeNodeToHtmlRecursive(node, defaultStyles, {});
 
         expect(result).to.be.equal(
-            `<ul dir="auto" class="[&>li>p]:before:tw-content-['•'] [&>li>p]:before:tw-px-2 tw-list-none tw-pl-[10px] tw-mb-[10px] tw-ml-[15px] tw-break-words"><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}">This comes first.</span></p></li></ul>`,
+            `<ul dir="auto" class="[&>li>p]:before:tw-content-['•'] [&>li>p]:before:tw-whitespace-nowrap [&>li>p]:before:tw-px-2 tw-list-none tw-pl-[10px] tw-mb-[10px] tw-ml-[15px] tw-break-words"><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}">This comes first.</span></p></li></ul>`,
         );
     });