From d31fe55d4004d4f2b28ced813691ce60622d194f Mon Sep 17 00:00:00 2001
From: Ewout Quax <ewout.quax@bettyblocks.com>
Date: Tue, 21 Jan 2025 11:27:34 +0100
Subject: [PATCH] chore: ensure markup attributes are passed to the children

E.g. when a span is used inside a strong-tag:
<strong>Hi, <span>everybody</span></strong>
---
 src/components/richTextInput.js | 38 ++++++++++++++++-----------------
 1 file changed, 19 insertions(+), 19 deletions(-)

diff --git a/src/components/richTextInput.js b/src/components/richTextInput.js
index 58f3b0ac7..131af1f68 100644
--- 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;
     };