experimental: adapt tailwind to webstudio breakpoints (#5244)

Ref #2651

There is an edge case which will prevent from converting breakpoints.
When there is no base breakpoint there is no value to fill with inverted
space. Though it should be very rare usecase. Need to test how often it
will create new breakpoints.

Author: TrySound

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(),