experimental: adapt tailwind to webstudio breakpoints

apps/builder/app/shared/copy-paste/plugin-markdown.test.tsx

@@ -141,11 +141,11 @@ test("inline code", () => {
 });
 
 test("code", () => {
-  expect(parse("```js meta\nfoo\n```")).toEqual(
+  expect(parse("```js meta\nfoo\nbar\n```")).toEqual(
     renderTemplate(
       <ws.element ws:tag="pre">
         <ws.element ws:tag="code" class="language-js">
-          {"foo "}
+          {"foo\nbar\n"}
         </ws.element>
       </ws.element>
     )
@@ -177,13 +177,30 @@ test("thematic break | separator", () => {
 });
 
 test("strikethrough", () => {
-  expect(parse("~One~ ~~two~~ ~~~three~~~.")).toEqual(
+  expect(parse("~One~\n\n~~two~~")).toEqual(
     renderTemplate(
-      <ws.element ws:tag="p">
-        <ws.element ws:tag="del">One</ws.element>
-        <ws.element ws:tag="del">two</ws.element>
-        <ws.element ws:tag="span"> ~~~three~~~.</ws.element>
-      </ws.element>
+      <>
+        <ws.element ws:tag="p">
+          <ws.element ws:tag="del">One</ws.element>
+        </ws.element>
+        <ws.element ws:tag="p">
+          <ws.element ws:tag="del">two</ws.element>
+        </ws.element>
+      </>
+    )
+  );
+});
+
+test("preserve spaces between strong and em", () => {
+  expect(parse("**One** *two* text")).toEqual(
+    renderTemplate(
+      <>
+        <ws.element ws:tag="p">
+          <ws.element ws:tag="strong">One</ws.element>{" "}
+          <ws.element ws:tag="em">two</ws.element>
+          {" text"}
+        </ws.element>
+      </>
     )
   );
 });

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

@@ -199,9 +199,26 @@ 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>
+        <i> line </i>
+        <b> another line </b>
+        text
+      </div>
+   `)
   ).toEqual(
     renderTemplate(
-      <ws.element ws:tag="div">{" line another line "}</ws.element>
+      <ws.element ws:tag="div">
+        <ws.element ws:tag="i">line</ws.element>{" "}
+        <ws.element ws:tag="b">another line</ws.element> text
+      </ws.element>
     )
   );
 });

apps/builder/app/shared/html.ts

@@ -231,22 +231,37 @@ 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)) {
-        if (spaceRegex.test(childNode.value)) {
-          continue;
+        // trim spaces around rich text
+        // do not for code
+        if (spaceRegex.test(childNode.value) && node.tagName !== "code") {
+          if (index === 0 || index === node.childNodes.length - 1) {
+            continue;
+          }
         }
         let child: Instance["children"][number] = {
           type: "text",
-          // collapse spacing characters inside of text to avoid preserved newlines
-          value: childNode.value.replaceAll(/\s+/g, " "),
+          value: childNode.value,
         };
+        if (node.tagName !== "code") {
+          // collapse spacing characters inside of text to avoid preserved newlines
+          child.value = child.value.replaceAll(/\s+/g, " ");
+          // remove unnecessary spacing in nodes
+          if (index === 0) {
+            child.value = child.value.trimStart();
+          }
+          if (index === node.childNodes.length - 1) {
+            child.value = child.value.trimEnd();
+          }
+        }
         // textarea content is initial value
         // and represented with fake value attribute
         if (node.tagName === "textarea") {
@@ -271,6 +286,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(),