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;