Merge pull request #3570 from bettyblocks/fix/rich-text-value-not-ser…

…ializing-correctly-PAGE-4765 chore: ensure markup attributes are passed to the children
bettyblocks · Jan 21, 2025 · cd4af51 · cd4af51
2 parents 73b2da5 + d31fe55
commit cd4af51
Showing 1 changed file with 19 additions and 19 deletions.
diff --git a/src/components/richTextInput.js b/src/components/richTextInput.js
@@ -113,7 +113,7 @@
       floatLabel,
     } = options;
     const isDev = env === 'dev';
-    const optionValue = useText(valueProp, { rawValue: true });
+    const optionValue = useText(valueProp);
     const [currentValue, setCurrentValue] = useState(optionValue);
     const [valueKey, setValueKey] = useState(0);
     const labelText = useText(label);
@@ -303,7 +303,6 @@
       UL: (el) => ({ type: 'bulleted-list', align: el.getAttribute('align') }),
     };
 
-    // COMPAT: `B` is omitted here because Google Docs uses `<b>` in weird ways.
     const TEXT_TAGS = {
       CODE: () => ({ code: true }),
       DEL: () => ({ strikethrough: true }),
@@ -319,9 +318,10 @@
       typeof window !== 'undefined' &&
       /Mac|iPod|iPhone|iPad/.test(window.navigator.platform);
 
-    const deserialize = (el) => {
+    const deserialize = (el, markAttributes = {}) => {
       if (el.nodeType === 3) {
-        return el.textContent;
+        // Node is a TEXT;
+        return jsx('text', markAttributes, el.textContent);
       }
       if (el.nodeType !== 1) {
         return null;
@@ -331,6 +331,7 @@
       }
 
       const { nodeName } = el;
+      let nodeAttributes = { ...markAttributes };
       let parent = el;
 
       if (
@@ -341,31 +342,30 @@
         // eslint-disable-next-line prefer-destructuring
         parent = el.childNodes[0];
       }
-      let children = Array.from(parent.childNodes).map(deserialize).flat();
-
-      if (children.length === 0) {
-        children = [{ text: '' }];
-      }
-
-      if (ELEMENT_TAGS[nodeName]) {
-        const attrs = ELEMENT_TAGS[nodeName](el);
-        return jsx('element', attrs, children);
-      }
 
+      // define attributes for text markup
       if (TEXT_TAGS[nodeName]) {
-        const attrs = TEXT_TAGS[nodeName](el);
-        return children.map((child) => jsx('text', attrs, child));
+        nodeAttributes = { ...nodeAttributes, ...TEXT_TAGS[nodeName](el) };
       }
 
-      if (!Element.isElementList(children)) {
-        const attrs = ELEMENT_TAGS.P(el);
-        children = jsx('element', attrs, children);
+      const children = Array.from(parent.childNodes)
+        .map((node) => deserialize(node, nodeAttributes))
+        .flat();
+
+      if (children.length === 0) {
+        children.push(jsx('text', nodeAttributes, ''));
       }
 
       if (el.nodeName === 'BODY') {
         return jsx('fragment', {}, children);
       }
 
+      // define attributes for text nodes
+      if (ELEMENT_TAGS[nodeName]) {
+        const attrs = ELEMENT_TAGS[nodeName](el);
+        return jsx('element', attrs, children);
+      }
+
       return children;
     };