Skip to content

Commit

Permalink
wip
Browse files Browse the repository at this point in the history
  • Loading branch information
@kof
kof committed Oct 1, 2024
1 parent d74b3e6 commit cbb31ba
Show file tree
Hide file tree
Showing 8 changed files with 285 additions and 74 deletions.
35 changes: 21 additions & 14 deletions apps/builder/app/shared/copy-paste/plugin-webflow/__generated__/style-presets.ts
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

10 changes: 10 additions & 0 deletions apps/builder/app/shared/copy-paste/plugin-webflow/instances-properties.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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") {
Expand Down
189 changes: 157 additions & 32 deletions apps/builder/app/shared/copy-paste/plugin-webflow/plugin-webflow.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -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",
Expand Down
10 changes: 5 additions & 5 deletions apps/builder/app/shared/copy-paste/plugin-webflow/plugin-webflow.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -117,7 +117,7 @@ const parse = (clipboardData: string) => {
if (data.type !== "@webflow/XscpData") {
return;
}

console.log(data);

Check failure on line 120 in apps/builder/app/shared/copy-paste/plugin-webflow/plugin-webflow.ts

View workflow job for this annotation

GitHub Actions / checks 

Unexpected console statement
const unsupportedNodeTypes: Set<string> = new Set(
data.payload.nodes
.filter((node: { type: string }) => {
Expand All @@ -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]) {
Expand All @@ -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);
}
Expand Down
24 changes: 22 additions & 2 deletions apps/builder/app/shared/copy-paste/plugin-webflow/schema.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -127,6 +127,8 @@ export const wfNodeTypes = [
"NavbarContainer",
"Icon",
"LightboxWrapper",
"Figure",
"Figcaption",
] as const;

const WfElementNode = z.union([
Expand Down Expand Up @@ -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({
Expand All @@ -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(),
}),
}),
}),
Expand Down
10 changes: 10 additions & 0 deletions apps/builder/app/shared/copy-paste/plugin-webflow/styles.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
Loading

0 comments on commit cbb31ba

Please sign in to comment.