@webiny/website-builder-nextjs 6.0.0-alpha.4 β 6.0.0-rc.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/DocumentRenderer.d.ts +4 -0
- package/DocumentRenderer.js +16 -0
- package/DocumentRenderer.js.map +1 -0
- package/README.md +10 -2
- package/editorComponents/Image.d.ts +18 -0
- package/editorComponents/Image.js +89 -0
- package/editorComponents/Image.js.map +1 -0
- package/editorComponents/Image.manifest.d.ts +1 -0
- package/editorComponents/Image.manifest.js +45 -0
- package/editorComponents/Image.manifest.js.map +1 -0
- package/index.d.ts +1 -0
- package/index.js +2 -1
- package/index.js.map +1 -1
- package/lexical.css +379 -0
- package/package.json +9 -11
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { DocumentRenderer as BaseDocumentRenderer } from "@webiny/website-builder-react";
|
|
3
|
+
export type DocumentRendererProps = React.ComponentProps<typeof BaseDocumentRenderer>;
|
|
4
|
+
export declare const DocumentRenderer: ({ document, components, children }: DocumentRendererProps) => React.JSX.Element;
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { DocumentRenderer as BaseDocumentRenderer } from "@webiny/website-builder-react";
|
|
3
|
+
import { Image } from "./editorComponents/Image.manifest.js";
|
|
4
|
+
export const DocumentRenderer = ({
|
|
5
|
+
document,
|
|
6
|
+
components,
|
|
7
|
+
children
|
|
8
|
+
}) => {
|
|
9
|
+
const allComponents = [Image, ...components];
|
|
10
|
+
return /*#__PURE__*/React.createElement(BaseDocumentRenderer, {
|
|
11
|
+
document: document,
|
|
12
|
+
components: allComponents
|
|
13
|
+
}, children);
|
|
14
|
+
};
|
|
15
|
+
|
|
16
|
+
//# sourceMappingURL=DocumentRenderer.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["React","DocumentRenderer","BaseDocumentRenderer","Image","document","components","children","allComponents","createElement"],"sources":["DocumentRenderer.tsx"],"sourcesContent":["import React from \"react\";\nimport { DocumentRenderer as BaseDocumentRenderer } from \"@webiny/website-builder-react\";\nimport { Image } from \"~/editorComponents/Image.manifest.js\";\n\nexport type DocumentRendererProps = React.ComponentProps<typeof BaseDocumentRenderer>;\n\nexport const DocumentRenderer = ({ document, components, children }: DocumentRendererProps) => {\n const allComponents = [Image, ...components];\n return (\n <BaseDocumentRenderer document={document} components={allComponents}>\n {children}\n </BaseDocumentRenderer>\n );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,gBAAgB,IAAIC,oBAAoB,QAAQ,+BAA+B;AACxF,SAASC,KAAK;AAId,OAAO,MAAMF,gBAAgB,GAAGA,CAAC;EAAEG,QAAQ;EAAEC,UAAU;EAAEC;AAAgC,CAAC,KAAK;EAC3F,MAAMC,aAAa,GAAG,CAACJ,KAAK,EAAE,GAAGE,UAAU,CAAC;EAC5C,oBACIL,KAAA,CAAAQ,aAAA,CAACN,oBAAoB;IAACE,QAAQ,EAAEA,QAAS;IAACC,UAAU,EAAEE;EAAc,GAC/DD,QACiB,CAAC;AAE/B,CAAC","ignoreList":[]}
|
package/README.md
CHANGED
|
@@ -1,3 +1,11 @@
|
|
|
1
|
-
#
|
|
1
|
+
# @webiny/website-builder-nextjs
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
> [!NOTE]
|
|
4
|
+
> This package is part of the [Webiny](https://www.webiny.com) monorepo.
|
|
5
|
+
> Itβs **included in every Webiny project by default** and is not meant to be used as a standalone package.
|
|
6
|
+
|
|
7
|
+
π **Documentation:** [https://www.webiny.com/docs](https://www.webiny.com/docs)
|
|
8
|
+
|
|
9
|
+
---
|
|
10
|
+
|
|
11
|
+
_This README file is automatically generated during the publish process._
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import type { ComponentProps } from "@webiny/website-builder-react";
|
|
3
|
+
type ImageProps = ComponentProps<{
|
|
4
|
+
title: string;
|
|
5
|
+
altText: string;
|
|
6
|
+
highPriority: boolean;
|
|
7
|
+
image: {
|
|
8
|
+
id: string;
|
|
9
|
+
name: string;
|
|
10
|
+
size: number;
|
|
11
|
+
mimeType: string;
|
|
12
|
+
src: string;
|
|
13
|
+
width: number;
|
|
14
|
+
height: number;
|
|
15
|
+
};
|
|
16
|
+
}>;
|
|
17
|
+
export declare const ImageComponent: (props: ImageProps) => React.JSX.Element;
|
|
18
|
+
export {};
|
|
@@ -0,0 +1,89 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import Image from "next/image";
|
|
3
|
+
export const ImageComponent = props => {
|
|
4
|
+
const image = useImage(props);
|
|
5
|
+
if (!image.src) {
|
|
6
|
+
return /*#__PURE__*/React.createElement(ImagePlaceholder, {
|
|
7
|
+
style: props.styles
|
|
8
|
+
});
|
|
9
|
+
}
|
|
10
|
+
if (image.tag === "object") {
|
|
11
|
+
return /*#__PURE__*/React.createElement("object", {
|
|
12
|
+
style: image.styles,
|
|
13
|
+
title: image.title,
|
|
14
|
+
data: image.src
|
|
15
|
+
});
|
|
16
|
+
}
|
|
17
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
18
|
+
style: {
|
|
19
|
+
position: "relative",
|
|
20
|
+
...props.styles
|
|
21
|
+
}
|
|
22
|
+
}, /*#__PURE__*/React.createElement(Image, {
|
|
23
|
+
alt: image.altText,
|
|
24
|
+
title: image.title,
|
|
25
|
+
src: image.src,
|
|
26
|
+
width: props.inputs.image.width,
|
|
27
|
+
height: props.inputs.image.height,
|
|
28
|
+
style: image.styles,
|
|
29
|
+
priority: props.inputs.highPriority,
|
|
30
|
+
loading: props.inputs.highPriority ? "eager" : "lazy",
|
|
31
|
+
sizes: "100vw",
|
|
32
|
+
loader: ({
|
|
33
|
+
src,
|
|
34
|
+
width
|
|
35
|
+
}) => `${src}?width=${width}`
|
|
36
|
+
}));
|
|
37
|
+
};
|
|
38
|
+
const ImagePlaceholder = ({
|
|
39
|
+
style
|
|
40
|
+
}) => {
|
|
41
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
42
|
+
style: {
|
|
43
|
+
display: "flex",
|
|
44
|
+
height: "200px",
|
|
45
|
+
backgroundColor: "#f4f4f4",
|
|
46
|
+
justifyContent: "center",
|
|
47
|
+
alignItems: "center",
|
|
48
|
+
fill: "#ffffff",
|
|
49
|
+
...style
|
|
50
|
+
}
|
|
51
|
+
}, /*#__PURE__*/React.createElement("svg", {
|
|
52
|
+
style: {
|
|
53
|
+
width: "70px",
|
|
54
|
+
height: "70px",
|
|
55
|
+
filter: "drop-shadow(rgba(0, 0, 0, 0.16) 0px 1px 0px)"
|
|
56
|
+
},
|
|
57
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
58
|
+
height: "24px",
|
|
59
|
+
viewBox: "0 -960 960 960",
|
|
60
|
+
width: "24px"
|
|
61
|
+
}, /*#__PURE__*/React.createElement("path", {
|
|
62
|
+
d: "M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm0-80h560v-560H200v560Zm40-80h480L570-480 450-320l-90-120-120 160Zm-40 80v-560 560Z"
|
|
63
|
+
})));
|
|
64
|
+
};
|
|
65
|
+
const useImage = ({
|
|
66
|
+
inputs,
|
|
67
|
+
styles
|
|
68
|
+
}) => {
|
|
69
|
+
const {
|
|
70
|
+
title = "",
|
|
71
|
+
altText,
|
|
72
|
+
image
|
|
73
|
+
} = inputs;
|
|
74
|
+
const src = image?.src;
|
|
75
|
+
const tag = src && src.endsWith(".svg") ? "object" : "img";
|
|
76
|
+
const imageStyles = {
|
|
77
|
+
maxWidth: "100%",
|
|
78
|
+
...styles
|
|
79
|
+
};
|
|
80
|
+
return {
|
|
81
|
+
altText,
|
|
82
|
+
src: inputs.image?.src,
|
|
83
|
+
styles: imageStyles,
|
|
84
|
+
tag,
|
|
85
|
+
title
|
|
86
|
+
};
|
|
87
|
+
};
|
|
88
|
+
|
|
89
|
+
//# sourceMappingURL=Image.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["React","Image","ImageComponent","props","image","useImage","src","createElement","ImagePlaceholder","style","styles","tag","title","data","position","alt","altText","width","inputs","height","priority","highPriority","loading","sizes","loader","display","backgroundColor","justifyContent","alignItems","fill","filter","xmlns","viewBox","d","endsWith","imageStyles","maxWidth"],"sources":["Image.tsx"],"sourcesContent":["import React from \"react\";\nimport Image from \"next/image\";\nimport type { CssProperties } from \"@webiny/website-builder-react\";\nimport type { ComponentProps } from \"@webiny/website-builder-react\";\n\ntype ImageProps = ComponentProps<{\n title: string;\n altText: string;\n highPriority: boolean;\n image: {\n id: string;\n name: string;\n size: number;\n mimeType: string;\n src: string;\n width: number;\n height: number;\n };\n}>;\n\nexport const ImageComponent = (props: ImageProps) => {\n const image = useImage(props);\n\n if (!image.src) {\n return <ImagePlaceholder style={props.styles} />;\n }\n\n if (image.tag === \"object\") {\n return <object style={image.styles} title={image.title} data={image.src} />;\n }\n\n return (\n <div\n style={{\n position: \"relative\",\n ...props.styles\n }}\n >\n {/* <ImagePlaceholder style={image.styles} /> */}\n <Image\n alt={image.altText}\n title={image.title}\n src={image.src}\n width={props.inputs.image.width}\n height={props.inputs.image.height}\n style={image.styles}\n priority={props.inputs.highPriority}\n loading={props.inputs.highPriority ? \"eager\" : \"lazy\"}\n sizes={\"100vw\"}\n loader={({ src, width }) => `${src}?width=${width}`}\n />\n </div>\n );\n};\n\nconst ImagePlaceholder = ({ style }: { style: CssProperties }) => {\n return (\n <div\n style={{\n display: \"flex\",\n height: \"200px\",\n backgroundColor: \"#f4f4f4\",\n justifyContent: \"center\",\n alignItems: \"center\",\n fill: \"#ffffff\",\n ...style\n }}\n >\n <svg\n style={{\n width: \"70px\",\n height: \"70px\",\n filter: \"drop-shadow(rgba(0, 0, 0, 0.16) 0px 1px 0px)\"\n }}\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24px\"\n viewBox=\"0 -960 960 960\"\n width=\"24px\"\n >\n <path d=\"M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm0-80h560v-560H200v560Zm40-80h480L570-480 450-320l-90-120-120 160Zm-40 80v-560 560Z\" />\n </svg>\n </div>\n );\n};\n\nconst useImage = ({ inputs, styles }: ImageProps) => {\n const { title = \"\", altText, image } = inputs;\n const src = image?.src;\n\n const tag = src && src.endsWith(\".svg\") ? \"object\" : \"img\";\n\n const imageStyles = {\n maxWidth: \"100%\",\n ...styles\n };\n\n return {\n altText,\n src: inputs.image?.src,\n styles: imageStyles,\n tag,\n title\n };\n};\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const Image: import("../../../website-builder-sdk/src/types.js").Component;
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
|
|
3
|
+
import { createFileInput, createTextInput, createBooleanInput, createComponent } from "@webiny/website-builder-react";
|
|
4
|
+
import { ImageComponent } from "./Image.js";
|
|
5
|
+
export const Image = createComponent(ImageComponent, {
|
|
6
|
+
name: "Webiny/Image",
|
|
7
|
+
label: "Image",
|
|
8
|
+
group: "basic",
|
|
9
|
+
image: `<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px"><path d="M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm0-80h560v-560H200v560Zm40-80h480L570-480 450-320l-90-120-120 160Zm-40 80v-560 560Z"/></svg>`,
|
|
10
|
+
autoApplyStyles: false,
|
|
11
|
+
inputs: {
|
|
12
|
+
image: createFileInput({
|
|
13
|
+
label: "Image",
|
|
14
|
+
allowedFileTypes: ["image/*"],
|
|
15
|
+
onChange: ({
|
|
16
|
+
inputs
|
|
17
|
+
}) => {
|
|
18
|
+
if (inputs.image) {
|
|
19
|
+
inputs.title = inputs.image.name;
|
|
20
|
+
inputs.altText = inputs.image.name;
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
}),
|
|
24
|
+
title: createTextInput({
|
|
25
|
+
label: "Title",
|
|
26
|
+
description: "Title of the image"
|
|
27
|
+
}),
|
|
28
|
+
altText: createTextInput({
|
|
29
|
+
label: "Alternate Text",
|
|
30
|
+
description: "Shown when the user has disabled images"
|
|
31
|
+
}),
|
|
32
|
+
highPriority: createBooleanInput({
|
|
33
|
+
label: "High Priority",
|
|
34
|
+
description: "Prioritize this image loading over other images on the page",
|
|
35
|
+
defaultValue: false
|
|
36
|
+
})
|
|
37
|
+
},
|
|
38
|
+
defaults: {
|
|
39
|
+
styles: {
|
|
40
|
+
width: "100%"
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
});
|
|
44
|
+
|
|
45
|
+
//# sourceMappingURL=Image.manifest.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["createFileInput","createTextInput","createBooleanInput","createComponent","ImageComponent","Image","name","label","group","image","autoApplyStyles","inputs","allowedFileTypes","onChange","title","altText","description","highPriority","defaultValue","defaults","styles","width"],"sources":["Image.manifest.ts"],"sourcesContent":["\"use client\";\nimport {\n createFileInput,\n createTextInput,\n createBooleanInput,\n createComponent\n} from \"@webiny/website-builder-react\";\nimport { ImageComponent } from \"./Image.js\";\n\nexport const Image = createComponent(ImageComponent, {\n name: \"Webiny/Image\",\n label: \"Image\",\n group: \"basic\",\n image: `<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\"><path d=\"M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm0-80h560v-560H200v560Zm40-80h480L570-480 450-320l-90-120-120 160Zm-40 80v-560 560Z\"/></svg>`,\n autoApplyStyles: false,\n inputs: {\n image: createFileInput({\n label: \"Image\",\n allowedFileTypes: [\"image/*\"],\n onChange: ({ inputs }) => {\n if (inputs.image) {\n inputs.title = inputs.image.name;\n inputs.altText = inputs.image.name;\n }\n }\n }),\n title: createTextInput({\n label: \"Title\",\n description: \"Title of the image\"\n }),\n altText: createTextInput({\n label: \"Alternate Text\",\n description: \"Shown when the user has disabled images\"\n }),\n highPriority: createBooleanInput({\n label: \"High Priority\",\n description: \"Prioritize this image loading over other images on the page\",\n defaultValue: false\n })\n },\n defaults: {\n styles: {\n width: \"100%\"\n }\n }\n});\n"],"mappings":"AAAA,YAAY;;AACZ,SACIA,eAAe,EACfC,eAAe,EACfC,kBAAkB,EAClBC,eAAe,QACZ,+BAA+B;AACtC,SAASC,cAAc;AAEvB,OAAO,MAAMC,KAAK,GAAGF,eAAe,CAACC,cAAc,EAAE;EACjDE,IAAI,EAAE,cAAc;EACpBC,KAAK,EAAE,OAAO;EACdC,KAAK,EAAE,OAAO;EACdC,KAAK,EAAE,0TAA0T;EACjUC,eAAe,EAAE,KAAK;EACtBC,MAAM,EAAE;IACJF,KAAK,EAAET,eAAe,CAAC;MACnBO,KAAK,EAAE,OAAO;MACdK,gBAAgB,EAAE,CAAC,SAAS,CAAC;MAC7BC,QAAQ,EAAEA,CAAC;QAAEF;MAAO,CAAC,KAAK;QACtB,IAAIA,MAAM,CAACF,KAAK,EAAE;UACdE,MAAM,CAACG,KAAK,GAAGH,MAAM,CAACF,KAAK,CAACH,IAAI;UAChCK,MAAM,CAACI,OAAO,GAAGJ,MAAM,CAACF,KAAK,CAACH,IAAI;QACtC;MACJ;IACJ,CAAC,CAAC;IACFQ,KAAK,EAAEb,eAAe,CAAC;MACnBM,KAAK,EAAE,OAAO;MACdS,WAAW,EAAE;IACjB,CAAC,CAAC;IACFD,OAAO,EAAEd,eAAe,CAAC;MACrBM,KAAK,EAAE,gBAAgB;MACvBS,WAAW,EAAE;IACjB,CAAC,CAAC;IACFC,YAAY,EAAEf,kBAAkB,CAAC;MAC7BK,KAAK,EAAE,eAAe;MACtBS,WAAW,EAAE,6DAA6D;MAC1EE,YAAY,EAAE;IAClB,CAAC;EACL,CAAC;EACDC,QAAQ,EAAE;IACNC,MAAM,EAAE;MACJC,KAAK,EAAE;IACX;EACJ;AACJ,CAAC,CAAC","ignoreList":[]}
|
package/index.d.ts
CHANGED
package/index.js
CHANGED
|
@@ -1,11 +1,12 @@
|
|
|
1
1
|
export * from "@webiny/website-builder-react";
|
|
2
|
+
export { DocumentRenderer } from "./DocumentRenderer.js";
|
|
2
3
|
import { setHeadersProvider } from "@webiny/website-builder-react";
|
|
3
4
|
setHeadersProvider(async () => {
|
|
4
5
|
// Settings @ts-expect-error breaks the build if the dependency is installed in the repo.
|
|
5
6
|
// @ts-ignore This is a peer dependency.
|
|
6
7
|
const {
|
|
7
8
|
headers
|
|
8
|
-
} = await import("next/headers");
|
|
9
|
+
} = await import("next/headers.js");
|
|
9
10
|
return await headers();
|
|
10
11
|
});
|
|
11
12
|
|
package/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["setHeadersProvider","headers"],"sources":["index.ts"],"sourcesContent":["export * from \"@webiny/website-builder-react\";\n\nimport { setHeadersProvider } from \"@webiny/website-builder-react\";\n\nsetHeadersProvider(async () => {\n // Settings @ts-expect-error breaks the build if the dependency is installed in the repo.\n // @ts-ignore This is a peer dependency.\n const { headers } = await import(\"next/headers\");\n return await headers();\n});\n"],"mappings":"AAAA,cAAc,+BAA+B;
|
|
1
|
+
{"version":3,"names":["DocumentRenderer","setHeadersProvider","headers"],"sources":["index.ts"],"sourcesContent":["export * from \"@webiny/website-builder-react\";\nexport { DocumentRenderer } from \"./DocumentRenderer.js\";\n\nimport { setHeadersProvider } from \"@webiny/website-builder-react\";\n\nsetHeadersProvider(async () => {\n // Settings @ts-expect-error breaks the build if the dependency is installed in the repo.\n // @ts-ignore This is a peer dependency.\n const { headers } = await import(\"next/headers.js\");\n return await headers();\n});\n"],"mappings":"AAAA,cAAc,+BAA+B;AAC7C,SAASA,gBAAgB;AAEzB,SAASC,kBAAkB,QAAQ,+BAA+B;AAElEA,kBAAkB,CAAC,YAAY;EAC3B;EACA;EACA,MAAM;IAAEC;EAAQ,CAAC,GAAG,MAAM,MAAM,CAAC,iBAAiB,CAAC;EACnD,OAAO,MAAMA,OAAO,CAAC,CAAC;AAC1B,CAAC,CAAC","ignoreList":[]}
|
package/lexical.css
ADDED
|
@@ -0,0 +1,379 @@
|
|
|
1
|
+
.wb-lx-ltr {
|
|
2
|
+
text-align: inherit;
|
|
3
|
+
}
|
|
4
|
+
.wb-lx-rtl {
|
|
5
|
+
text-align: inherit;
|
|
6
|
+
}
|
|
7
|
+
.wb-lx-paragraph {
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
.wb-lx-quote {
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
.wb-lx-h1,
|
|
14
|
+
.wb-lx-h2,
|
|
15
|
+
.wb-lx-h3,
|
|
16
|
+
.wb-lx-h4,
|
|
17
|
+
.wb-lx-h5,
|
|
18
|
+
.wb-lx-h6 {
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
.wb-lx-textBold {
|
|
22
|
+
font-weight: bold;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
.wb-lx-textItalic {
|
|
26
|
+
font-style: italic;
|
|
27
|
+
}
|
|
28
|
+
.wb-lx-textUnderline {
|
|
29
|
+
text-decoration: underline;
|
|
30
|
+
}
|
|
31
|
+
.wb-lx-textStrikethrough {
|
|
32
|
+
text-decoration: line-through;
|
|
33
|
+
}
|
|
34
|
+
.wb-lx-textUnderlineStrikethrough {
|
|
35
|
+
text-decoration: underline line-through;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
.wb-lx-textSubscript {
|
|
39
|
+
font-size: 0.8em;
|
|
40
|
+
vertical-align: sub !important;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
.wb-lx-textSuperscript {
|
|
44
|
+
font-size: 0.8em;
|
|
45
|
+
vertical-align: super;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
.wb-lx-textCode {
|
|
49
|
+
background-color: rgb(240, 242, 245);
|
|
50
|
+
padding: 1px 0.25rem;
|
|
51
|
+
font-family: Menlo, Consolas, Monaco, monospace;
|
|
52
|
+
font-size: 94%;
|
|
53
|
+
}
|
|
54
|
+
.wb-lx-hashtag {
|
|
55
|
+
background-color: rgba(88, 144, 255, 0.15);
|
|
56
|
+
border-bottom: 1px solid rgba(88, 144, 255, 0.3);
|
|
57
|
+
}
|
|
58
|
+
.wb-lx-link {
|
|
59
|
+
color: var(--wb-theme-color1);
|
|
60
|
+
text-decoration: none;
|
|
61
|
+
> * {
|
|
62
|
+
color: inherit !important;
|
|
63
|
+
}
|
|
64
|
+
}
|
|
65
|
+
.wb-lx-link:hover {
|
|
66
|
+
text-decoration: underline;
|
|
67
|
+
}
|
|
68
|
+
.wb-lx-code {
|
|
69
|
+
background-color: rgb(240, 242, 245);
|
|
70
|
+
font-family: Menlo, Consolas, Monaco, monospace;
|
|
71
|
+
display: block;
|
|
72
|
+
padding: 8px 8px 8px 52px;
|
|
73
|
+
line-height: 1.53;
|
|
74
|
+
font-size: 13px;
|
|
75
|
+
margin: 8px 0;
|
|
76
|
+
tab-size: 2;
|
|
77
|
+
/* white-space: pre; */
|
|
78
|
+
overflow-x: auto;
|
|
79
|
+
position: relative;
|
|
80
|
+
}
|
|
81
|
+
.wb-lx-code:before {
|
|
82
|
+
content: attr(data-gutter);
|
|
83
|
+
position: absolute;
|
|
84
|
+
background-color: #eee;
|
|
85
|
+
left: 0;
|
|
86
|
+
top: 0;
|
|
87
|
+
border-right: 1px solid #ccc;
|
|
88
|
+
padding: 8px;
|
|
89
|
+
color: #777;
|
|
90
|
+
white-space: pre-wrap;
|
|
91
|
+
text-align: right;
|
|
92
|
+
min-width: 25px;
|
|
93
|
+
}
|
|
94
|
+
.wb-lx-table {
|
|
95
|
+
border-collapse: collapse;
|
|
96
|
+
border-spacing: 0;
|
|
97
|
+
max-width: 100%;
|
|
98
|
+
overflow-y: scroll;
|
|
99
|
+
table-layout: fixed;
|
|
100
|
+
width: calc(100% - 25px);
|
|
101
|
+
margin: 30px 0;
|
|
102
|
+
}
|
|
103
|
+
.wb-lx-tableSelected {
|
|
104
|
+
outline: 2px solid rgb(60, 132, 244);
|
|
105
|
+
}
|
|
106
|
+
.wb-lx-tableCell {
|
|
107
|
+
border: 1px solid #bbb;
|
|
108
|
+
min-width: 75px;
|
|
109
|
+
vertical-align: top;
|
|
110
|
+
text-align: start;
|
|
111
|
+
padding: 6px 8px;
|
|
112
|
+
position: relative;
|
|
113
|
+
cursor: default;
|
|
114
|
+
outline: none;
|
|
115
|
+
}
|
|
116
|
+
.wb-lx-tableCellSortedIndicator {
|
|
117
|
+
display: block;
|
|
118
|
+
opacity: 0.5;
|
|
119
|
+
position: absolute;
|
|
120
|
+
bottom: 0;
|
|
121
|
+
left: 0;
|
|
122
|
+
width: 100%;
|
|
123
|
+
height: 4px;
|
|
124
|
+
background-color: #999;
|
|
125
|
+
}
|
|
126
|
+
.wb-lx-tableCellResizer {
|
|
127
|
+
position: absolute;
|
|
128
|
+
right: -4px;
|
|
129
|
+
height: 100%;
|
|
130
|
+
width: 8px;
|
|
131
|
+
cursor: ew-resize;
|
|
132
|
+
z-index: 10;
|
|
133
|
+
top: 0;
|
|
134
|
+
}
|
|
135
|
+
.wb-lx-tableCellHeader {
|
|
136
|
+
background-color: #f2f3f5;
|
|
137
|
+
text-align: start;
|
|
138
|
+
}
|
|
139
|
+
.wb-lx-tableCellSelected {
|
|
140
|
+
background-color: #c9dbf0;
|
|
141
|
+
}
|
|
142
|
+
.wb-lx-tableCellPrimarySelected {
|
|
143
|
+
border: 2px solid rgb(60, 132, 244);
|
|
144
|
+
display: block;
|
|
145
|
+
height: calc(100% - 2px);
|
|
146
|
+
position: absolute;
|
|
147
|
+
width: calc(100% - 2px);
|
|
148
|
+
left: -1px;
|
|
149
|
+
top: -1px;
|
|
150
|
+
z-index: 2;
|
|
151
|
+
}
|
|
152
|
+
.wb-lx-tableCellEditing {
|
|
153
|
+
box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
|
|
154
|
+
border-radius: 3px;
|
|
155
|
+
}
|
|
156
|
+
.wb-lx-tableAddColumns {
|
|
157
|
+
position: absolute;
|
|
158
|
+
top: 0;
|
|
159
|
+
width: 20px;
|
|
160
|
+
background-color: #eee;
|
|
161
|
+
height: 100%;
|
|
162
|
+
right: 0;
|
|
163
|
+
animation: table-controls 0.2s ease;
|
|
164
|
+
border: 0;
|
|
165
|
+
cursor: pointer;
|
|
166
|
+
}
|
|
167
|
+
|
|
168
|
+
.wb-lx-tableAddColumns:hover {
|
|
169
|
+
background-color: #c9dbf0;
|
|
170
|
+
}
|
|
171
|
+
.wb-lx-tableAddRows {
|
|
172
|
+
position: absolute;
|
|
173
|
+
bottom: -25px;
|
|
174
|
+
width: calc(100% - 25px);
|
|
175
|
+
background-color: #eee;
|
|
176
|
+
height: 20px;
|
|
177
|
+
left: 0;
|
|
178
|
+
animation: table-controls 0.2s ease;
|
|
179
|
+
border: 0;
|
|
180
|
+
cursor: pointer;
|
|
181
|
+
}
|
|
182
|
+
.wb-lx-tableAddRows:hover {
|
|
183
|
+
background-color: #c9dbf0;
|
|
184
|
+
}
|
|
185
|
+
@keyframes table-controls {
|
|
186
|
+
0% {
|
|
187
|
+
opacity: 0;
|
|
188
|
+
}
|
|
189
|
+
100% {
|
|
190
|
+
opacity: 1;
|
|
191
|
+
}
|
|
192
|
+
}
|
|
193
|
+
.wb-lx-tableCellResizeRuler {
|
|
194
|
+
display: block;
|
|
195
|
+
position: absolute;
|
|
196
|
+
width: 1px;
|
|
197
|
+
background-color: rgb(60, 132, 244);
|
|
198
|
+
height: 100%;
|
|
199
|
+
top: 0;
|
|
200
|
+
}
|
|
201
|
+
.wb-lx-tableCellActionButtonContainer {
|
|
202
|
+
display: block;
|
|
203
|
+
right: 5px;
|
|
204
|
+
top: 6px;
|
|
205
|
+
position: absolute;
|
|
206
|
+
z-index: 4;
|
|
207
|
+
width: 20px;
|
|
208
|
+
height: 20px;
|
|
209
|
+
}
|
|
210
|
+
.wb-lx-tableCellActionButton {
|
|
211
|
+
background-color: #eee;
|
|
212
|
+
display: block;
|
|
213
|
+
border: 0;
|
|
214
|
+
border-radius: 20px;
|
|
215
|
+
width: 20px;
|
|
216
|
+
height: 20px;
|
|
217
|
+
color: #222;
|
|
218
|
+
cursor: pointer;
|
|
219
|
+
}
|
|
220
|
+
.wb-lx-tableCellActionButton:hover {
|
|
221
|
+
background-color: #ddd;
|
|
222
|
+
}
|
|
223
|
+
.wb-lx-characterLimit {
|
|
224
|
+
display: inline;
|
|
225
|
+
background-color: #ffbbbb !important;
|
|
226
|
+
}
|
|
227
|
+
.wb-lx-ol1 {
|
|
228
|
+
padding: 0;
|
|
229
|
+
margin: 0 0 0 16px;
|
|
230
|
+
list-style: inside;
|
|
231
|
+
}
|
|
232
|
+
.wb-lx-ol2 {
|
|
233
|
+
padding: 0;
|
|
234
|
+
margin: 0 0 0 16px;
|
|
235
|
+
list-style: upper-alpha inside;
|
|
236
|
+
}
|
|
237
|
+
.wb-lx-ol3 {
|
|
238
|
+
list-style: initial;
|
|
239
|
+
list-style: auto;
|
|
240
|
+
padding: 0;
|
|
241
|
+
margin: 0 0 0 16px;
|
|
242
|
+
list-style-type: lower-alpha;
|
|
243
|
+
list-style-position: inside;
|
|
244
|
+
}
|
|
245
|
+
.wb-lx-ol4 {
|
|
246
|
+
padding: 0;
|
|
247
|
+
margin: 0 0 0 16px;
|
|
248
|
+
list-style: upper-roman inside;
|
|
249
|
+
}
|
|
250
|
+
.wb-lx-ol5 {
|
|
251
|
+
padding: 0;
|
|
252
|
+
margin: 0 0 0 16px;
|
|
253
|
+
list-style: lower-roman inside;
|
|
254
|
+
}
|
|
255
|
+
.wb-lx-ul {
|
|
256
|
+
padding: 0;
|
|
257
|
+
margin: 0 0 0 16px;
|
|
258
|
+
list-style: inside;
|
|
259
|
+
}
|
|
260
|
+
.wb-lx-listItem {
|
|
261
|
+
margin: 0 32px;
|
|
262
|
+
}
|
|
263
|
+
.wb-lx-listItemChecked,
|
|
264
|
+
.wb-lx-listItemUnchecked {
|
|
265
|
+
position: relative;
|
|
266
|
+
margin-left: 8px;
|
|
267
|
+
margin-right: 8px;
|
|
268
|
+
padding-left: 24px;
|
|
269
|
+
padding-right: 24px;
|
|
270
|
+
list-style-type: none;
|
|
271
|
+
outline: none;
|
|
272
|
+
}
|
|
273
|
+
.wb-lx-listItemChecked {
|
|
274
|
+
text-decoration: line-through;
|
|
275
|
+
}
|
|
276
|
+
.wb-lx-listItemUnchecked:before,
|
|
277
|
+
.wb-lx-listItemChecked:before {
|
|
278
|
+
content: "";
|
|
279
|
+
width: 16px;
|
|
280
|
+
height: 16px;
|
|
281
|
+
top: 2px;
|
|
282
|
+
left: 0;
|
|
283
|
+
cursor: pointer;
|
|
284
|
+
display: block;
|
|
285
|
+
background-size: cover;
|
|
286
|
+
position: absolute;
|
|
287
|
+
}
|
|
288
|
+
.wb-lx-listItemUnchecked[dir="rtl"]:before,
|
|
289
|
+
.wb-lx-listItemChecked[dir="rtl"]:before {
|
|
290
|
+
left: auto;
|
|
291
|
+
right: 0;
|
|
292
|
+
}
|
|
293
|
+
.wb-lx-listItemUnchecked:focus:before,
|
|
294
|
+
.wb-lx-listItemChecked:focus:before {
|
|
295
|
+
box-shadow: 0 0 0 2px #a6cdfe;
|
|
296
|
+
border-radius: 2px;
|
|
297
|
+
}
|
|
298
|
+
.wb-lx-listItemUnchecked:before {
|
|
299
|
+
border: 1px solid #999;
|
|
300
|
+
border-radius: 2px;
|
|
301
|
+
}
|
|
302
|
+
.wb-lx-listItemChecked:before {
|
|
303
|
+
border: 1px solid rgb(61, 135, 245);
|
|
304
|
+
border-radius: 2px;
|
|
305
|
+
background-color: #3d87f5;
|
|
306
|
+
background-repeat: no-repeat;
|
|
307
|
+
}
|
|
308
|
+
.wb-lx-listItemChecked:after {
|
|
309
|
+
content: "";
|
|
310
|
+
cursor: pointer;
|
|
311
|
+
border-color: #fff;
|
|
312
|
+
border-style: solid;
|
|
313
|
+
position: absolute;
|
|
314
|
+
display: block;
|
|
315
|
+
top: 6px;
|
|
316
|
+
width: 3px;
|
|
317
|
+
left: 7px;
|
|
318
|
+
height: 6px;
|
|
319
|
+
transform: rotate(45deg);
|
|
320
|
+
border-width: 0 2px 2px 0;
|
|
321
|
+
}
|
|
322
|
+
.wb-lx-nestedListItem {
|
|
323
|
+
list-style-type: none;
|
|
324
|
+
}
|
|
325
|
+
.wb-lx-nestedListItem:before,
|
|
326
|
+
.wb-lx-nestedListItem:after {
|
|
327
|
+
display: none;
|
|
328
|
+
}
|
|
329
|
+
.wb-lx-tokenComment {
|
|
330
|
+
color: slategray;
|
|
331
|
+
}
|
|
332
|
+
.wb-lx-tokenPunctuation {
|
|
333
|
+
color: #999;
|
|
334
|
+
}
|
|
335
|
+
.wb-lx-tokenProperty {
|
|
336
|
+
color: #905;
|
|
337
|
+
}
|
|
338
|
+
.wb-lx-tokenSelector {
|
|
339
|
+
color: #690;
|
|
340
|
+
}
|
|
341
|
+
.wb-lx-tokenOperator {
|
|
342
|
+
color: #9a6e3a;
|
|
343
|
+
}
|
|
344
|
+
.wb-lx-tokenAttr {
|
|
345
|
+
color: #07a;
|
|
346
|
+
}
|
|
347
|
+
.wb-lx-tokenVariable {
|
|
348
|
+
color: #e90;
|
|
349
|
+
}
|
|
350
|
+
.wb-lx-tokenFunction {
|
|
351
|
+
color: #dd4a68;
|
|
352
|
+
}
|
|
353
|
+
.wb-lx-mark {
|
|
354
|
+
background: rgba(255, 212, 0, 0.14);
|
|
355
|
+
border-bottom: 2px solid rgba(255, 212, 0, 0.3);
|
|
356
|
+
padding-bottom: 2px;
|
|
357
|
+
}
|
|
358
|
+
.wb-lx-markOverlap {
|
|
359
|
+
background: rgba(255, 212, 0, 0.3);
|
|
360
|
+
border-bottom: 2px solid rgba(255, 212, 0, 0.7);
|
|
361
|
+
}
|
|
362
|
+
.wb-lx-mark.selected {
|
|
363
|
+
background: rgba(255, 212, 0, 0.5);
|
|
364
|
+
border-bottom: 2px solid rgba(255, 212, 0, 1);
|
|
365
|
+
}
|
|
366
|
+
.wb-lx-markOverlap.selected {
|
|
367
|
+
background: rgba(255, 212, 0, 0.7);
|
|
368
|
+
border-bottom: 2px solid rgba(255, 212, 0, 0.7);
|
|
369
|
+
}
|
|
370
|
+
.wb-lx-embedBlock {
|
|
371
|
+
user-select: none;
|
|
372
|
+
}
|
|
373
|
+
.wb-lx-embedBlockFocus {
|
|
374
|
+
outline: 2px solid rgb(60, 132, 244);
|
|
375
|
+
}
|
|
376
|
+
|
|
377
|
+
.wb-lx-placeholder {
|
|
378
|
+
text-align: left;
|
|
379
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@webiny/website-builder-nextjs",
|
|
3
|
-
"version": "6.0.0-
|
|
3
|
+
"version": "6.0.0-rc.0",
|
|
4
|
+
"type": "module",
|
|
4
5
|
"main": "index.js",
|
|
5
6
|
"repository": {
|
|
6
7
|
"type": "git",
|
|
@@ -18,25 +19,22 @@
|
|
|
18
19
|
],
|
|
19
20
|
"license": "MIT",
|
|
20
21
|
"dependencies": {
|
|
21
|
-
"@webiny/website-builder-react": "6.0.0-
|
|
22
|
+
"@webiny/website-builder-react": "6.0.0-rc.0",
|
|
22
23
|
"postcss": "8.5.6",
|
|
23
24
|
"postcss-import": "16.1.1"
|
|
24
25
|
},
|
|
25
26
|
"devDependencies": {
|
|
26
27
|
"@types/postcss-import": "14.0.3",
|
|
27
|
-
"@webiny/
|
|
28
|
-
"next": "15.
|
|
29
|
-
"typescript": "5.
|
|
30
|
-
"
|
|
28
|
+
"@webiny/build-tools": "6.0.0-rc.0",
|
|
29
|
+
"next": "15.5.12",
|
|
30
|
+
"typescript": "5.9.3",
|
|
31
|
+
"vitest": "4.0.18",
|
|
32
|
+
"webpack": "5.105.2"
|
|
31
33
|
},
|
|
32
34
|
"publishConfig": {
|
|
33
35
|
"access": "public",
|
|
34
36
|
"directory": "dist"
|
|
35
37
|
},
|
|
36
|
-
"scripts": {
|
|
37
|
-
"build": "node ../cli/bin.js run build",
|
|
38
|
-
"watch": "node ../cli/bin.js run watch"
|
|
39
|
-
},
|
|
40
38
|
"adio": {
|
|
41
39
|
"ignore": {
|
|
42
40
|
"dependencies": [
|
|
@@ -46,5 +44,5 @@
|
|
|
46
44
|
]
|
|
47
45
|
}
|
|
48
46
|
},
|
|
49
|
-
"gitHead": "
|
|
47
|
+
"gitHead": "0f2aa699f4642e550ab62c96fcd050e8d02345c9"
|
|
50
48
|
}
|