wip

Author: kof

apps/builder/app/shared/copy-paste/plugin-webflow/__generated__/style-presets.ts

@@ -108,6 +108,16 @@ const toFragment = (
       addInstance(component);
       return fragment;
     }
+    case "Figure": {
+      addInstance("Box");
+      addProp("tag", "figure");
+      return fragment;
+    }
+    case "Figcaption": {
+      addInstance("Text");
+      addProp("tag", "figcaption");
+      return fragment;
+    }
     case "Block": {
       const component = wfNode.data?.text ? "Text" : "Box";
       if (wfNode.tag !== "div") {

apps/builder/app/shared/copy-paste/plugin-webflow/instances-properties.ts

@@ -534,38 +534,6 @@ test("Section", async () => {
   `);
 });
 
-test("Figure", async () => {
-  const fragment = await toWebstudioFragment({
-    type: "@webflow/XscpData",
-    payload: {
-      nodes: [
-        {
-          _id: "7c6bc1fd-128d-514b-167b-605a910e435c",
-          type: "Block",
-          tag: "figure",
-          classes: [],
-          children: [],
-        },
-      ],
-      styles: [],
-      assets: [],
-    },
-  });
-
-  equalFragment(fragment, <$.Box tag="figure" />);
-  expect(toCss(fragment)).toMatchInlineSnapshot(`
-    "@media all {
-      figure {
-        display: block;
-        margin-top: 0;
-        margin-right: 0;
-        margin-bottom: 10px;
-        margin-left: 0
-      }
-    }"
-  `);
-});
-
 test("BlockContainer", async () => {
   const fragment = await toWebstudioFragment({
     type: "@webflow/XscpData",
@@ -1550,6 +1518,163 @@ test("RichText", async () => {
   `);
 });
 
+test("RichText with Figure and Figcaption", async () => {
+  const fragment = await toWebstudioFragment({
+    type: "@webflow/XscpData",
+    payload: {
+      nodes: [
+        {
+          _id: "a7a2b490-c6c5-30aa-1827-b38a0ae42a08",
+          type: "RichText",
+          tag: "div",
+          classes: [],
+          children: ["3ddc1727-a0f4-33c5-3879-cb1d9d932c59"],
+        },
+        {
+          _id: "3ddc1727-a0f4-33c5-3879-cb1d9d932c59",
+          type: "Figure",
+          tag: "figure",
+          classes: [],
+          children: [
+            "72cdf71c-b2da-c44a-3ecd-9ec9891f6023",
+            "f48219da-c3ef-2439-07e3-a843ef8c0891",
+          ],
+          data: {
+            figure: {
+              type: "image",
+              align: "center",
+              maxWidth: "",
+            },
+          },
+        },
+        {
+          _id: "72cdf71c-b2da-c44a-3ecd-9ec9891f6023",
+          type: "Block",
+          tag: "div",
+          classes: [],
+          children: ["4b0dc79a-bbb0-b136-d913-f1e3581f2b36"],
+          data: {
+            text: false,
+          },
+        },
+        {
+          _id: "4b0dc79a-bbb0-b136-d913-f1e3581f2b36",
+          type: "Image",
+          tag: "img",
+          classes: [],
+          children: [],
+          data: {
+            //srcsetDisabled: false,
+            attr: {
+              width: "auto",
+              height: "auto",
+              alt: "__wf_reserved_inherit",
+              src: "https://test.com/image.jpg",
+              loading: "lazy",
+              id: "",
+            },
+            sizes: [],
+            devlink: {
+              runtimeProps: {},
+              slot: "",
+            },
+            displayName: "",
+            xattr: [],
+            search: {
+              exclude: false,
+            },
+            visibility: {
+              conditions: [],
+            },
+          },
+        },
+        {
+          _id: "f48219da-c3ef-2439-07e3-a843ef8c0891",
+          type: "Figcaption",
+          tag: "figcaption",
+          classes: [],
+          children: ["d5e8480a-f395-38d5-530b-78cb05b6888f"],
+        },
+        {
+          _id: "d5e8480a-f395-38d5-530b-78cb05b6888f",
+          text: true,
+          v: "test",
+        },
+      ],
+      styles: [],
+      assets: [
+        {
+          cdnUrl: "https://test.com/image.jpg",
+          siteId: "66ab8a32bcc969149d6a7a1a",
+          width: 174,
+          height: 136,
+          fileName:
+            "66d8522c8e9dbb5e2b2de76c_Screenshot 2024-09-02 at 18.20.14.png",
+          createdOn: "2024-09-04T12:27:24.621Z",
+          origFileName: "Screenshot 2024-09-02 at 18.20.14.png",
+          fileHash: "496bace14fbde33d31e0417dd70216d0",
+          //translationLoading: false,
+          variants: [],
+          mimeType: "image/png",
+          _id: "66d8522c8e9dbb5e2b2de76c",
+          updatedOn: "2024-09-04T12:55:38.572Z",
+          fileSize: 20599,
+          localizedSettings: {},
+        },
+      ],
+      ix1: [],
+      ix2: {
+        interactions: [],
+        events: [],
+        actionLists: [],
+      },
+    },
+    meta: {
+      droppedLinks: 0,
+      dynBindRemovedCount: 0,
+      dynListBindRemovedCount: 0,
+      paginationRemovedCount: 0,
+      universalBindingsRemovedCount: 0,
+      unlinkedSymbolCount: 0,
+    },
+  });
+
+  equalFragment(
+    fragment,
+    <$.Box>
+      <$.Box tag="figure">
+        <$.Box>
+          <$.Image loading="lazy" src="https://test.com/image.jpg" />
+        </$.Box>
+        <$.Text tag="figcaption">test</$.Text>
+      </$.Box>
+    </$.Box>
+  );
+
+  expect(toCss(fragment)).toMatchInlineSnapshot(`
+    "@media all {
+      figure {
+        display: block;
+        margin-top: 0;
+        margin-right: 0;
+        margin-bottom: 10px;
+        margin-left: 0
+      }
+      img {
+        vertical-align: middle;
+        max-width: 100%;
+        display: inline-block;
+        border: 0 none currentcolor
+      }
+      figcaption {
+        display: block;
+        text-align: center;
+        margin-top: 5px
+      }
+    }"
+  `);
+});
+
 test("Form", async () => {
   const fragment = await toWebstudioFragment({
     type: "@webflow/XscpData",

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

@@ -117,7 +117,7 @@ const parse = (clipboardData: string) => {
   if (data.type !== "@webflow/XscpData") {
     return;
   }
-
+  console.log(data);
   const unsupportedNodeTypes: Set<string> = new Set(
     data.payload.nodes
       .filter((node: { type: string }) => {
@@ -139,7 +139,7 @@ const parse = (clipboardData: string) => {
   const result = WfData.safeParse(data);
 
   if (result.success) {
-    const unpasedTypes = new Set<string>();
+    const unparsedTypes = new Set<string>();
 
     for (let i = 0; i !== result.data.payload.nodes.length; ++i) {
       if ("type" in result.data.payload.nodes[i]) {
@@ -156,11 +156,11 @@ const parse = (clipboardData: string) => {
         continue;
       }
 
-      unpasedTypes.add(probablyUnparsedType);
+      unparsedTypes.add(probablyUnparsedType);
     }
 
-    if (unpasedTypes.size !== 0) {
-      const message = `The following types were skipped due to a parsing error: ${[...unpasedTypes.values()].join(", ")}`;
+    if (unparsedTypes.size !== 0) {
+      const message = `The following types were skipped due to a parsing error: ${[...unparsedTypes.values()].join(", ")}`;
       toast.info(message);
       console.info(message);
     }

apps/builder/app/shared/copy-paste/plugin-webflow/plugin-webflow.ts

@@ -127,6 +127,8 @@ export const wfNodeTypes = [
   "NavbarContainer",
   "Icon",
   "LightboxWrapper",
+  "Figure",
+  "Figcaption",
 ] as const;
 
 const WfElementNode = z.union([
@@ -190,6 +192,23 @@ const WfElementNode = z.union([
   WfBaseNode.extend({ type: z.enum(["Grid"]) }),
   WfBaseNode.extend({ type: z.enum(["Row"]) }),
   WfBaseNode.extend({ type: z.enum(["Column"]) }),
+  WfBaseNode.extend({ type: z.enum(["Figcaption"]) }),
+  WfBaseNode.extend({
+    type: z.enum(["Figure"]),
+    data: WfNodeData.extend({
+      style: z.record(styleProperty, styleValue).optional(),
+      figure: z.object({
+        type: z.enum(["image"]), // @todo add more types
+        align: z.enum([
+          "normal",
+          "center",
+          "fullwidth",
+          "floatleft",
+          "floatright",
+        ]),
+      }),
+    }),
+  }),
   WfBaseNode.extend({
     type: z.enum(["CodeBlock"]),
     data: WfNodeData.extend({
@@ -209,8 +228,9 @@ const WfElementNode = z.union([
         alt: z.string().optional(),
         loading: z.enum(["lazy", "eager", "auto"]),
         src: z.string(),
-        width: z.string(),
-        height: z.string(),
+        // width/height is not provided for rich text image
+        width: z.string().optional(),
+        height: z.string().optional(),
       }),
     }),
   }),

apps/builder/app/shared/copy-paste/plugin-webflow/schema.ts

@@ -440,6 +440,16 @@ const mapComponentAndPresetStyles = (
     case "NavbarButton":
       presetStyles.push("w-nav-button");
       return presetStyles;
+
+    case "RichText":
+      presetStyles.push("w-richtext");
+      return presetStyles;
+    case "Figure": {
+      const { align } = wfNode.data.figure;
+      presetStyles.push("w-richtext-figure-type-image");
+      presetStyles.push(`w-richtext-align-${align}`);
+      return presetStyles;
+    }
   }
 
   return presetStyles;

apps/builder/app/shared/copy-paste/plugin-webflow/styles.ts

@@ -221,7 +221,7 @@ describe("Parse CSS", () => {
     ]);
   });
 
-  test("parse multiple selectors, both with state", () => {
+  test.only("parse multiple selectors, both with state", () => {
     expect(parseCss(`a:active, a:hover { color: #ff0000 }`)).toEqual([
       {
         selector: "a",
@@ -460,11 +460,33 @@ describe("Parse CSS", () => {
   });
 
   test("parse child combinator", () => {
-    expect(parseCss(`a > b { color: #ff0000 }`)).toEqual([]);
+    expect(parseCss(`a > b { color: #ff0000 }`)).toEqual([
+      {
+        selector: "a > b",
+        property: "color",
+        value: { alpha: 1, b: 0, g: 0, r: 255, type: "rgb" },
+      },
+    ]);
   });
 
   test("parse space combinator", () => {
-    expect(parseCss(`a b { color: #ff0000 }`)).toEqual([]);
+    expect(parseCss(`.a b { color: #ff0000 }`)).toEqual([
+      {
+        selector: "a b",
+        property: "color",
+        value: { alpha: 1, b: 0, g: 0, r: 255, type: "rgb" },
+      },
+    ]);
+  });
+
+  test("parse nested selectors as one token", () => {
+    expect(parseCss(`a b c.d { color: #ff0000 }`)).toEqual([
+      {
+        selector: "a b c.d",
+        property: "color",
+        value: { alpha: 1, b: 0, g: 0, r: 255, type: "rgb" },
+      },
+    ]);
   });
 });
 

packages/css-data/src/parse-css.test.ts

@@ -161,6 +161,7 @@
           if (node.type === "MediaQuery" && node.children.size > 1) {
             invalidBreakpoint = true;
           }
+          ``;
         },
       });
       const generated = csstree.generate(this.atrule.prelude);
@@ -173,32 +174,48 @@
     }
 
     const selectors: Selector[] = [];
+    //console.log(csstree.generate(this.rule.prelude));
+
     csstree.walk(this.rule.prelude, (node, item) => {
       if (node.type !== "ClassSelector" && node.type !== "TypeSelector") {
         return;
       }
-      // We don't support nesting yet.
-      if (
-        (item?.prev && item.prev.data.type === "Combinator") ||
-        (item?.next && item.next.data.type === "Combinator")
-      ) {
+
+      // Previous item is a combinator
+      if (item.prev?.data.type === "Combinator") {
+        selectors[selectors.length - 1].name += node.name;
+        return;
+      }
+
+      if (item.next?.data.type === "Combinator") {
+        const { name } = item.next.data;
+        // keep space as-is, but add space around other combinators
+        selectors[selectors.length - 1].name +=
+          name === " " ? name : ` ${name} `;
         return;
       }
 
-      if (item?.next && item.next.data.type === "PseudoElementSelector") {
-        selectors.push({
-          name: node.name,
-          state: `::${item.next.data.name}`,
-        });
-      } else if (item?.next && item.next.data.type === "PseudoClassSelector") {
-        selectors.push({
-          name: node.name,
-          state: `:${item.next.data.name}`,
-        });
+      let { name } = node;
+      let state: string | undefined;
+
+      if (item.next?.data.type === "PseudoElementSelector") {
+        state = `::${item.next.data.name}`;
+      } else if (item.next?.data.type === "PseudoClassSelector") {
+        state = `:${item.next.data.name}`;
+      } else if (selectors.length !== 0) {
+        // a.b
+        name = `.${node.name}`;
+      }
+
+      console.log(item);
+      if (selectors.length === 0) {
+        selectors.push({ name, state });
       } else {
-        selectors.push({
-          name: node.name,
-        });
+        const selector = selectors[selectors.length - 1];
+        selector.name += name;
+        if (state) {
+          selector.state = (selector.state ?? "") + state;
+        }
       }
     });