Handle spaces edge cases

Author: TrySound

apps/builder/app/shared/html.test.tsx

@@ -199,9 +199,25 @@ test("collapse any spacing characters inside text", () => {
         another line
       </div>
    `)
+  ).toEqual(
+    renderTemplate(<ws.element ws:tag="div">{"line another line"}</ws.element>)
+  );
+});
+
+test("collapse any spacing characters inside rich text", () => {
+  expect(
+    generateFragmentFromHtml(`
+      <div>
+        <span> line </span>
+        <b> another line </b>
+      </div>
+   `)
   ).toEqual(
     renderTemplate(
-      <ws.element ws:tag="div">{" line another line "}</ws.element>
+      <ws.element ws:tag="div">
+        <ws.element ws:tag="span">line</ws.element>{" "}
+        <ws.element ws:tag="b">another line</ws.element>
+      </ws.element>
     )
   );
 });

apps/builder/app/shared/html.ts

@@ -231,21 +231,26 @@ export const generateFragmentFromHtml = (
         }
       }
     }
-    for (const childNode of node.childNodes) {
+    for (let index = 0; index < node.childNodes.length; index += 1) {
+      const childNode = node.childNodes[index];
       if (defaultTreeAdapter.isElementNode(childNode)) {
         const child = convertElementToInstance(childNode);
         if (child) {
           instance.children.push(child);
         }
       }
       if (defaultTreeAdapter.isTextNode(childNode)) {
+        // trim spaces around rich text
         if (spaceRegex.test(childNode.value)) {
-          continue;
+          if (index === 0 || index === node.childNodes.length - 1) {
+            continue;
+          }
         }
+        const childValue = childNode.value.replaceAll(/\s+/g, " ");
         let child: Instance["children"][number] = {
           type: "text",
           // collapse spacing characters inside of text to avoid preserved newlines
-          value: childNode.value.replaceAll(/\s+/g, " "),
+          value: childValue === " " ? childValue : childValue.trim(),
         };
         // textarea content is initial value
         // and represented with fake value attribute
@@ -271,6 +276,10 @@ export const generateFragmentFromHtml = (
         //   <article></article>
         // </div>
         if (hasNonRichTextContent) {
+          // remove spaces between elements outside of rich text
+          if (spaceRegex.test(childNode.value)) {
+            continue;
+          }
           const span: Instance = {
             type: "instance",
             id: getNewId(),