fix: wrap root node of the rich text input with a fragment instead of paragraph

Author: kark

.changeset/thick-jars-teach.md

@@ -0,0 +1,5 @@
+---
+'@commercetools-uikit/rich-text-utils': patch
+---
+
+Change behavior of the deserialization function to wrap the root node of the editor with a fragment instead of a paragraph

packages/components/inputs/rich-text-utils/src/html/html.spec.js

@@ -19,7 +19,7 @@ describe('html', () => {
           const htmlValue = '<span>hello</span>';
 
           expect(html.serialize(html.deserialize(htmlValue))).toEqual(
-            '<p><span>hello</span></p>'
+            '<span>hello</span>'
           );
         });
       });
@@ -28,7 +28,7 @@ describe('html', () => {
           const htmlValue = '<span style="font-weight: bold;">hello</span>';
 
           expect(html.serialize(html.deserialize(htmlValue))).toEqual(
-            '<p><strong>hello</strong></p>'
+            '<strong>hello</strong>'
           );
         });
       });
@@ -37,7 +37,7 @@ describe('html', () => {
           const htmlValue = '<span style="display: block;">hello</span>';
 
           expect(html.serialize(html.deserialize(htmlValue))).toEqual(
-            '<p><span>hello</span></p>'
+            '<span>hello</span>'
           );
         });
       });
@@ -47,7 +47,7 @@ describe('html', () => {
             '<span style="display: block; text-decoration: underline;">hello</span>';
 
           expect(html.serialize(html.deserialize(htmlValue))).toEqual(
-            '<p><u>hello</u></p>'
+            '<u>hello</u>'
           );
         });
       });
@@ -57,7 +57,7 @@ describe('html', () => {
             '<span style="font-weight: bold; text-decoration: underline;">hello</span>';
 
           expect(html.serialize(html.deserialize(htmlValue))).toEqual(
-            '<p><u><strong>hello</strong></u></p>'
+            '<u><strong>hello</strong></u>'
           );
         });
       });
@@ -67,7 +67,7 @@ describe('html', () => {
             '<span style="font-weight: bold; font-style: italic; text-decoration: underline;">hello</span>';
 
           expect(html.serialize(html.deserialize(htmlValue))).toEqual(
-            '<p><u><em><strong>hello</strong></em></u></p>'
+            '<u><em><strong>hello</strong></em></u>'
           );
         });
       });
@@ -77,7 +77,7 @@ describe('html', () => {
             '<span style="font-weight: bold; font-style: italic; text-decoration-line: underline line-through;">hello</span>';
 
           expect(html.serialize(html.deserialize(htmlValue))).toEqual(
-            '<p><del><u><em><strong>hello</strong></em></u></del></p>'
+            '<del><u><em><strong>hello</strong></em></u></del>'
           );
         });
       });
@@ -96,7 +96,7 @@ describe('html', () => {
             '<span style="font-weight: bold"><span style="font-style: italic;">hello</span></span>';
 
           expect(html.serialize(html.deserialize(htmlValue))).toEqual(
-            '<p><em><strong>hello</strong></em></p>'
+            '<em><strong>hello</strong></em>'
           );
         });
       });

packages/components/inputs/rich-text-utils/src/html/html.tsx

@@ -179,12 +179,16 @@ const wrapWithParagraph = (
   textContent: TElement | TText | (TElement | TText)[]
 ) => jsx('element', { type: 'paragraph' }, textContent);
 
-const wrapWithParagraphIfRootElement = (
+const wrapWithFragment = (
+  textContent: TElement | TText | (TElement | TText)[]
+) => jsx('fragment', {}, textContent);
+
+const wrapWithFragmentIfRootElement = (
   el: HTMLElement | ChildNode,
   textContent: TElement | TText | (TElement | TText)[]
 ) =>
   el.parentNode?.nodeName === 'BODY' // root element, because body is eventually turned to React fragment
-    ? wrapWithParagraph(textContent)
+    ? wrapWithFragment(textContent)
     : textContent;
 
 export type Deserialized = Descendant | null;
@@ -194,7 +198,7 @@ const deserializeElement = (
 ): Deserialized | Deserialized[] => {
   // https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType#value
   if (el.nodeType === 3) {
-    return wrapWithParagraphIfRootElement(el, { text: el.textContent || '' }); // for root TEXT_NODE -> wrap with <p>
+    return wrapWithFragmentIfRootElement(el, { text: el.textContent || '' }); // for root TEXT_NODE -> wrap with <></>
   } else if (el.nodeType !== 1) {
     return null; // for non-ELEMENT_NODE
   }
@@ -228,7 +232,7 @@ const deserializeElement = (
 
     if (isEmpty(styleObj)) {
       // if no style attrs -> just use `span`
-      return wrapWithParagraphIfRootElement(
+      return wrapWithFragmentIfRootElement(
         el,
         jsx('element', { type: 'span' }, children)
       );
@@ -252,12 +256,12 @@ const deserializeElement = (
       );
       if (isEmpty(attrs)) {
         // if all style attr values are irrelevant -> just use `span`
-        return wrapWithParagraphIfRootElement(
+        return wrapWithFragmentIfRootElement(
           el,
           jsx('element', { type: 'span' }, children)
         );
       }
-      return wrapWithParagraphIfRootElement(
+      return wrapWithFragmentIfRootElement(
         el,
         // children mapping to cover nested elements within text e.g. <span>Some <span>text</span></span>
         children.map((child) =>

packages/components/inputs/rich-text-utils/src/localized/localized.spec.js

@@ -20,7 +20,7 @@ describe('createLocalizedString', () => {
       expect(
         createLocalizedString(['en', 'de'], { en: 'hello world' })
       ).toEqual({
-        en: '<p>hello world</p>',
+        en: 'hello world',
         de: emptyValue,
       });
     });
@@ -30,8 +30,8 @@ describe('createLocalizedString', () => {
       expect(
         createLocalizedString(['en', 'de'], { en: 'hello world', de: 'Hallo' })
       ).toEqual({
-        en: '<p>hello world</p>',
-        de: '<p>Hallo</p>',
+        en: 'hello world',
+        de: 'Hallo',
       });
     });
   });