@webiny/app-website-builder 6.4.11 → 6.6.0-alpha.1

package/features/settings/updateSettings/abstractions/UpdateSettingsRepository.d.ts

@@ -0,0 +1,9 @@
+import type { IWebsiteBuilderSettings } from "../../../../features/settings/IWebsiteBuilderSettings.js";
+export interface IUpdateSettingsRepository {
+    execute(settings: IWebsiteBuilderSettings): Promise<void>;
+}
+export declare const UpdateSettingsRepository: import("@webiny/di").Abstraction<IUpdateSettingsRepository>;
+export declare namespace UpdateSettingsRepository {
+    type Interface = IUpdateSettingsRepository;
+    type Params = IWebsiteBuilderSettings;
+}

package/features/settings/updateSettings/abstractions/UpdateSettingsRepository.js

@@ -0,0 +1,5 @@
+import { createAbstraction } from "@webiny/feature/admin";
+const UpdateSettingsRepository = createAbstraction("WebsiteBuilder/UpdateSettingsRepository");
+export { UpdateSettingsRepository };
+
+//# sourceMappingURL=UpdateSettingsRepository.js.map

package/features/settings/updateSettings/abstractions/UpdateSettingsRepository.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"features/settings/updateSettings/abstractions/UpdateSettingsRepository.js","sources":["../../../../../src/features/settings/updateSettings/abstractions/UpdateSettingsRepository.ts"],"sourcesContent":["import { createAbstraction } from \"@webiny/feature/admin\";\nimport type { IWebsiteBuilderSettings } from \"~/features/settings/IWebsiteBuilderSettings.js\";\n\nexport interface IUpdateSettingsRepository {\n    execute(settings: IWebsiteBuilderSettings): Promise<void>;\n}\n\nexport const UpdateSettingsRepository = createAbstraction<IUpdateSettingsRepository>(\n    \"WebsiteBuilder/UpdateSettingsRepository\"\n);\n\nexport namespace UpdateSettingsRepository {\n    export type Interface = IUpdateSettingsRepository;\n    export type Params = IWebsiteBuilderSettings;\n}\n"],"names":["UpdateSettingsRepository","createAbstraction"],"mappings":";AAOO,MAAMA,2BAA2BC,kBACpC"}

package/features/settings/updateSettings/abstractions/UpdateSettingsUseCase.d.ts

@@ -0,0 +1,9 @@
+import type { IWebsiteBuilderSettings } from "../../../../features/settings/IWebsiteBuilderSettings.js";
+export interface IUpdateSettingsUseCase {
+    execute(settings: IWebsiteBuilderSettings): Promise<void>;
+}
+export declare const UpdateSettingsUseCase: import("@webiny/di").Abstraction<IUpdateSettingsUseCase>;
+export declare namespace UpdateSettingsUseCase {
+    type Interface = IUpdateSettingsUseCase;
+    type Params = IWebsiteBuilderSettings;
+}

package/features/settings/updateSettings/abstractions/UpdateSettingsUseCase.js

@@ -0,0 +1,5 @@
+import { createAbstraction } from "@webiny/feature/admin";
+const UpdateSettingsUseCase = createAbstraction("WebsiteBuilder/UpdateSettingsUseCase");
+export { UpdateSettingsUseCase };
+
+//# sourceMappingURL=UpdateSettingsUseCase.js.map

package/features/settings/updateSettings/abstractions/UpdateSettingsUseCase.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"features/settings/updateSettings/abstractions/UpdateSettingsUseCase.js","sources":["../../../../../src/features/settings/updateSettings/abstractions/UpdateSettingsUseCase.ts"],"sourcesContent":["import { createAbstraction } from \"@webiny/feature/admin\";\nimport type { IWebsiteBuilderSettings } from \"~/features/settings/IWebsiteBuilderSettings.js\";\n\nexport interface IUpdateSettingsUseCase {\n    execute(settings: IWebsiteBuilderSettings): Promise<void>;\n}\n\nexport const UpdateSettingsUseCase = createAbstraction<IUpdateSettingsUseCase>(\n    \"WebsiteBuilder/UpdateSettingsUseCase\"\n);\n\nexport namespace UpdateSettingsUseCase {\n    export type Interface = IUpdateSettingsUseCase;\n    export type Params = IWebsiteBuilderSettings;\n}\n"],"names":["UpdateSettingsUseCase","createAbstraction"],"mappings":";AAOO,MAAMA,wBAAwBC,kBACjC"}

package/features/settings/updateSettings/abstractions/index.d.ts

@@ -0,0 +1,6 @@
+export { UpdateSettingsUseCase } from "./UpdateSettingsUseCase.js";
+export type { IUpdateSettingsUseCase } from "./UpdateSettingsUseCase.js";
+export { UpdateSettingsRepository } from "./UpdateSettingsRepository.js";
+export type { IUpdateSettingsRepository } from "./UpdateSettingsRepository.js";
+export { UpdateSettingsGateway } from "./UpdateSettingsGateway.js";
+export type { IUpdateSettingsGateway } from "./UpdateSettingsGateway.js";

package/features/settings/updateSettings/abstractions/index.js

@@ -0,0 +1,3 @@
+export { UpdateSettingsUseCase } from "./UpdateSettingsUseCase.js";
+export { UpdateSettingsRepository } from "./UpdateSettingsRepository.js";
+export { UpdateSettingsGateway } from "./UpdateSettingsGateway.js";

package/features/settings/updateSettings/feature.d.ts

@@ -0,0 +1,3 @@
+export declare const UpdateSettingsFeature: import("@webiny/feature/admin").FeatureDefinition<{
+    useCase: import("./abstractions/UpdateSettingsUseCase.js").IUpdateSettingsUseCase;
+}, []>;

package/features/settings/updateSettings/feature.js

@@ -0,0 +1,21 @@
+import { createFeature } from "@webiny/feature/admin";
+import { UpdateSettingsUseCase } from "./abstractions/index.js";
+import { UpdateSettingsUseCase as external_UpdateSettingsUseCase_js_UpdateSettingsUseCase } from "./UpdateSettingsUseCase.js";
+import { UpdateSettingsRepository } from "./UpdateSettingsRepository.js";
+import { UpdateSettingsGateway } from "./UpdateSettingsGateway.js";
+const UpdateSettingsFeature = createFeature({
+    name: "WebsiteBuilder/UpdateSettings",
+    register (container) {
+        container.register(external_UpdateSettingsUseCase_js_UpdateSettingsUseCase);
+        container.register(UpdateSettingsRepository).inSingletonScope();
+        container.register(UpdateSettingsGateway).inSingletonScope();
+    },
+    resolve (container) {
+        return {
+            useCase: container.resolve(UpdateSettingsUseCase)
+        };
+    }
+});
+export { UpdateSettingsFeature };
+
+//# sourceMappingURL=feature.js.map

package/features/settings/updateSettings/feature.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"features/settings/updateSettings/feature.js","sources":["../../../../src/features/settings/updateSettings/feature.ts"],"sourcesContent":["import { createFeature } from \"@webiny/feature/admin\";\nimport { UpdateSettingsUseCase as UseCaseAbstraction } from \"./abstractions/index.js\";\nimport { UpdateSettingsUseCase } from \"./UpdateSettingsUseCase.js\";\nimport { UpdateSettingsRepository } from \"./UpdateSettingsRepository.js\";\nimport { UpdateSettingsGateway } from \"./UpdateSettingsGateway.js\";\n\nexport const UpdateSettingsFeature = createFeature({\n    name: \"WebsiteBuilder/UpdateSettings\",\n    register(container) {\n        container.register(UpdateSettingsUseCase);\n        container.register(UpdateSettingsRepository).inSingletonScope();\n        container.register(UpdateSettingsGateway).inSingletonScope();\n    },\n    resolve(container) {\n        return {\n            useCase: container.resolve(UseCaseAbstraction)\n        };\n    }\n});\n"],"names":["UpdateSettingsFeature","createFeature","container","UpdateSettingsUseCase","UpdateSettingsRepository","UpdateSettingsGateway","UseCaseAbstraction"],"mappings":";;;;;AAMO,MAAMA,wBAAwBC,cAAc;IAC/C,MAAM;IACN,UAASC,SAAS;QACdA,UAAU,QAAQ,CAACC;QACnBD,UAAU,QAAQ,CAACE,0BAA0B,gBAAgB;QAC7DF,UAAU,QAAQ,CAACG,uBAAuB,gBAAgB;IAC9D;IACA,SAAQH,SAAS;QACb,OAAO;YACH,SAASA,UAAU,OAAO,CAACI;QAC/B;IACJ;AACJ"}

package/features/settings/updateSettings/index.d.ts

@@ -0,0 +1 @@
+export { UpdateSettingsFeature } from "./feature.js";

package/features/settings/updateSettings/index.js

@@ -0,0 +1 @@
+export { UpdateSettingsFeature } from "./feature.js";

package/index.d.ts

@@ -1,6 +1,6 @@
 export * as Editor from "./BaseEditor/index.js";
 export * from "./shared/pagePathFromTitle.js";
-export { PageListConfig } from "./modules/pages/configs/index.js";
-export { RedirectListConfig } from "./modules/redirects/configs/index.js";
-export { PageEditorConfig } from "./modules/pages/PageEditor/PageEditorConfig.js";
+export { PageListConfig } from "./presentation/pages/PageList/configs/index.js";
+export { RedirectListConfig } from "./presentation/redirects/RedirectList/index.js";
+export { PageEditorConfig } from "./presentation/pages/PageEditor/PageEditorConfig.js";
 export { PreviewUrlModifier } from "./features/index.js";

package/index.js

@@ -1,7 +1,7 @@
 import * as __rspack_external__BaseEditor_index_js_dc6c77f1 from "./BaseEditor/index.js";
 export * from "./shared/pagePathFromTitle.js";
-export { PageListConfig } from "./modules/pages/configs/index.js";
-export { RedirectListConfig } from "./modules/redirects/configs/index.js";
-export { PageEditorConfig } from "./modules/pages/PageEditor/PageEditorConfig.js";
+export { PageListConfig } from "./presentation/pages/PageList/configs/index.js";
+export { RedirectListConfig } from "./presentation/redirects/RedirectList/index.js";
+export { PageEditorConfig } from "./presentation/pages/PageEditor/PageEditorConfig.js";
 export { PreviewUrlModifier } from "./features/index.js";
 export { __rspack_external__BaseEditor_index_js_dc6c77f1 as Editor };

package/inputRenderers/ColorPickerInput.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import type { ElementInputRendererProps } from "../BaseEditor/index.js";
+export declare const ColorPickerInputRenderer: ({ value, onChange, onPreviewChange, input, label }: ElementInputRendererProps) => React.JSX.Element;

package/inputRenderers/ColorPickerInput.js

@@ -0,0 +1,29 @@
+import react from "react";
+import { ColorPicker } from "@webiny/admin-ui";
+const ColorPickerInputRenderer = ({ value, onChange, onPreviewChange, input, label })=>{
+    const commitValue = (newValue)=>{
+        onChange(({ value })=>{
+            value.set(newValue);
+        });
+    };
+    const previewValue = (newValue)=>{
+        onPreviewChange(({ value })=>{
+            value.set(newValue);
+        });
+    };
+    return /*#__PURE__*/ react.createElement(ColorPicker, {
+        size: "md",
+        variant: "secondary",
+        value: value,
+        onChange: (newValue)=>{
+            previewValue(newValue);
+            commitValue(newValue);
+        },
+        label: label,
+        hint: input.description,
+        note: input.helperText
+    });
+};
+export { ColorPickerInputRenderer };
+
+//# sourceMappingURL=ColorPickerInput.js.map

package/inputRenderers/ColorPickerInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"inputRenderers/ColorPickerInput.js","sources":["../../src/inputRenderers/ColorPickerInput.tsx"],"sourcesContent":["import React from \"react\";\nimport { ColorPicker } from \"@webiny/admin-ui\";\nimport type { ElementInputRendererProps } from \"~/BaseEditor/index.js\";\n\nexport const ColorPickerInputRenderer = ({\n    value,\n    onChange,\n    onPreviewChange,\n    input,\n    label\n}: ElementInputRendererProps) => {\n    const commitValue = (newValue: string) => {\n        onChange(({ value }) => {\n            value.set(newValue);\n        });\n    };\n\n    const previewValue = (newValue: string) => {\n        onPreviewChange(({ value }) => {\n            value.set(newValue);\n        });\n    };\n\n    return (\n        <ColorPicker\n            size={\"md\"}\n            variant={\"secondary\"}\n            value={value}\n            onChange={(newValue: string) => {\n                previewValue(newValue);\n                commitValue(newValue);\n            }}\n            label={label}\n            hint={input.description}\n            note={input.helperText}\n        />\n    );\n};\n"],"names":["ColorPickerInputRenderer","value","onChange","onPreviewChange","input","label","commitValue","newValue","previewValue","ColorPicker"],"mappings":";;AAIO,MAAMA,2BAA2B,CAAC,EACrCC,KAAK,EACLC,QAAQ,EACRC,eAAe,EACfC,KAAK,EACLC,KAAK,EACmB;IACxB,MAAMC,cAAc,CAACC;QACjBL,SAAS,CAAC,EAAED,KAAK,EAAE;YACfA,MAAM,GAAG,CAACM;QACd;IACJ;IAEA,MAAMC,eAAe,CAACD;QAClBJ,gBAAgB,CAAC,EAAEF,KAAK,EAAE;YACtBA,MAAM,GAAG,CAACM;QACd;IACJ;IAEA,OAAO,WAAP,GACI,oBAACE,aAAWA;QACR,MAAM;QACN,SAAS;QACT,OAAOR;QACP,UAAU,CAACM;YACPC,aAAaD;YACbD,YAAYC;QAChB;QACA,OAAOF;QACP,MAAMD,MAAM,WAAW;QACvB,MAAMA,MAAM,UAAU;;AAGlC"}

package/inputRenderers/FileInput.js

@@ -1,15 +1,41 @@
-import react from "react";
-import { FilePicker } from "@webiny/admin-ui";
+import react, { useState } from "react";
+import { FilePicker, ImageEditor, RichItemPreview, getCroppedImageRenderStyles } from "@webiny/admin-ui";
 import { FileManager } from "@webiny/app-admin";
 import { useBreakpoint } from "../BaseEditor/hooks/useBreakpoint.js";
+import { getAssetCropParam, normalizeToAsset } from "@webiny/website-builder-sdk";
 import { fileManagerItemToValue } from "../shared/fileManagerItemToValue.js";
+const isEditableImage = (asset)=>!!asset?.src && "string" == typeof asset.type && asset.type.startsWith("image/") && "image/svg+xml" !== asset.type;
+const hasImageEdit = (image)=>{
+    if (!image?.width || !image?.height) return false;
+    const c = image.crop;
+    const fullCrop = !c || 0 === c.top && 0 === c.left && 0 === c.bottom && 0 === c.right;
+    const fp = image.focalPoint;
+    const centeredFocal = !fp || 0.5 === fp.x && 0.5 === fp.y;
+    return !fullCrop || !centeredFocal;
+};
+const toEditorValue = (image)=>{
+    if (!image) return;
+    return {
+        crop: image.crop,
+        hotspot: image.focalPoint ? {
+            x: image.focalPoint.x,
+            y: image.focalPoint.y,
+            width: 1,
+            height: 1
+        } : void 0,
+        alt: image.alt,
+        caption: image.caption
+    };
+};
 const FileInputRenderer = ({ value, onChange, label, ...props })=>{
     const input = props.input;
     const { isBaseBreakpoint } = useBreakpoint();
+    const [editorOpen, setEditorOpen] = useState(false);
+    const asset = normalizeToAsset(value) ?? void 0;
+    const editable = isEditableImage(asset);
     const onFileChange = (file)=>{
         onChange(({ value })=>{
-            const newValue = fileManagerItemToValue(file);
-            value.set(newValue);
+            value.set(fileManagerItemToValue(file));
         });
     };
     const onRemove = ()=>{
@@ -18,18 +44,78 @@ const FileInputRenderer = ({ value, onChange, label, ...props })=>{
             else value.set(null);
         });
     };
+    const onSaveEdit = (edit)=>{
+        onChange(({ value })=>{
+            if (!asset) return;
+            const image = {
+                width: asset.image?.width,
+                height: asset.image?.height,
+                crop: edit.crop,
+                focalPoint: edit.hotspot ? {
+                    x: edit.hotspot.x,
+                    y: edit.hotspot.y
+                } : void 0,
+                alt: edit.alt,
+                caption: edit.caption
+            };
+            const updated = {
+                ...asset,
+                image
+            };
+            const cropParam = getAssetCropParam(updated);
+            if (cropParam) {
+                const sep = asset.src.includes("?") ? "&" : "?";
+                updated.url = `${asset.src}${sep}crop=${cropParam}`;
+            } else updated.url = asset.src;
+            value.set(updated);
+        });
+    };
     return /*#__PURE__*/ react.createElement(FileManager, {
         accept: input.allowedFileTypes,
         onChange: onFileChange,
-        render: ({ showFileManager })=>/*#__PURE__*/ react.createElement(FilePicker, {
+        render: ({ showFileManager })=>/*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(FilePicker, {
                 variant: "secondary",
                 label: label,
                 description: input.description,
                 type: "compact",
-                value: value,
+                value: asset?.src,
+                renderFilePreview: editable && asset?.src && hasImageEdit(asset.image) ? (previewProps)=>/*#__PURE__*/ react.createElement(RichItemPreview, {
+                        ...previewProps,
+                        renderImage: ({ name })=>{
+                            const { wrapper, image } = getCroppedImageRenderStyles(asset.image?.width ?? 0, asset.image?.height ?? 0, asset.image?.crop, asset.image?.focalPoint ? {
+                                x: asset.image.focalPoint.x,
+                                y: asset.image.focalPoint.y,
+                                width: 1,
+                                height: 1
+                            } : void 0, {
+                                boxWidth: 1,
+                                boxHeight: 1,
+                                fit: "cover"
+                            });
+                            return /*#__PURE__*/ react.createElement("div", {
+                                style: wrapper
+                            }, /*#__PURE__*/ react.createElement("img", {
+                                src: asset.src,
+                                alt: name,
+                                draggable: false,
+                                style: image
+                            }));
+                        }
+                    }) : void 0,
                 onSelectItem: ()=>showFileManager(),
-                onRemoveItem: onRemove
-            })
+                onRemoveItem: onRemove,
+                onEditItem: editable ? ()=>setEditorOpen(true) : void 0
+            }), editable ? /*#__PURE__*/ react.createElement(ImageEditor, {
+                open: editorOpen,
+                onClose: ()=>setEditorOpen(false),
+                image: {
+                    src: asset.src,
+                    width: asset.image?.width ?? 0,
+                    height: asset.image?.height ?? 0
+                },
+                value: toEditorValue(asset.image),
+                onSave: onSaveEdit
+            }) : null)
     });
 };
 export { FileInputRenderer };

package/inputRenderers/FileInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"inputRenderers/FileInput.js","sources":["../../src/inputRenderers/FileInput.tsx"],"sourcesContent":["import React from \"react\";\nimport { FilePicker } from \"@webiny/admin-ui\";\nimport type { ElementInputRendererProps } from \"~/BaseEditor/index.js\";\nimport { FileManager, type FileManagerFileItem } from \"@webiny/app-admin\";\nimport { useBreakpoint } from \"~/BaseEditor/hooks/useBreakpoint.js\";\nimport type { FileInput } from \"@webiny/website-builder-sdk\";\nimport { fileManagerItemToValue } from \"~/shared/fileManagerItemToValue.js\";\n\nexport const FileInputRenderer = ({\n    value,\n    onChange,\n    label,\n    ...props\n}: ElementInputRendererProps) => {\n    const input = props.input as FileInput;\n    const { isBaseBreakpoint } = useBreakpoint();\n\n    const onFileChange = (file: FileManagerFileItem) => {\n        onChange(({ value }) => {\n            const newValue = fileManagerItemToValue(file);\n            value.set(newValue);\n        });\n    };\n\n    const onRemove = () => {\n        onChange(({ value }) => {\n            if (isBaseBreakpoint) {\n                value.set(undefined);\n            } else {\n                value.set(null);\n            }\n        });\n    };\n\n    return (\n        <FileManager\n            accept={input.allowedFileTypes}\n            onChange={onFileChange}\n            render={({ showFileManager }) => (\n                <FilePicker\n                    variant={\"secondary\"}\n                    label={label}\n                    description={input.description}\n                    type=\"compact\"\n                    value={value}\n                    onSelectItem={() => showFileManager()}\n                    onRemoveItem={onRemove}\n                />\n            )}\n        />\n    );\n};\n"],"names":["FileInputRenderer","value","onChange","label","props","input","isBaseBreakpoint","useBreakpoint","onFileChange","file","newValue","fileManagerItemToValue","onRemove","undefined","FileManager","showFileManager","FilePicker"],"mappings":";;;;;AAQO,MAAMA,oBAAoB,CAAC,EAC9BC,KAAK,EACLC,QAAQ,EACRC,KAAK,EACL,GAAGC,OACqB;IACxB,MAAMC,QAAQD,MAAM,KAAK;IACzB,MAAM,EAAEE,gBAAgB,EAAE,GAAGC;IAE7B,MAAMC,eAAe,CAACC;QAClBP,SAAS,CAAC,EAAED,KAAK,EAAE;YACf,MAAMS,WAAWC,uBAAuBF;YACxCR,MAAM,GAAG,CAACS;QACd;IACJ;IAEA,MAAME,WAAW;QACbV,SAAS,CAAC,EAAED,KAAK,EAAE;YACf,IAAIK,kBACAL,MAAM,GAAG,CAACY;iBAEVZ,MAAM,GAAG,CAAC;QAElB;IACJ;IAEA,OAAO,WAAP,GACI,oBAACa,aAAWA;QACR,QAAQT,MAAM,gBAAgB;QAC9B,UAAUG;QACV,QAAQ,CAAC,EAAEO,eAAe,EAAE,iBACxB,oBAACC,YAAUA;gBACP,SAAS;gBACT,OAAOb;gBACP,aAAaE,MAAM,WAAW;gBAC9B,MAAK;gBACL,OAAOJ;gBACP,cAAc,IAAMc;gBACpB,cAAcH;;;AAKlC"}
+{"version":3,"file":"inputRenderers/FileInput.js","sources":["../../src/inputRenderers/FileInput.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport {\n    FilePicker,\n    ImageEditor,\n    RichItemPreview,\n    getCroppedImageRenderStyles,\n    type ImageEditorValue\n} from \"@webiny/admin-ui\";\nimport type { ElementInputRendererProps } from \"~/BaseEditor/index.js\";\nimport { FileManager, type FileManagerFileItem } from \"@webiny/app-admin\";\nimport { useBreakpoint } from \"~/BaseEditor/hooks/useBreakpoint.js\";\nimport {\n    normalizeToAsset,\n    getAssetCropParam,\n    type Asset,\n    type AssetImage\n} from \"@webiny/website-builder-sdk\";\nimport type { FileInput } from \"@webiny/website-builder-sdk\";\nimport { fileManagerItemToValue } from \"~/shared/fileManagerItemToValue.js\";\n\nconst isEditableImage = (asset: Asset | undefined): asset is Asset => {\n    return (\n        !!asset?.src &&\n        typeof asset.type === \"string\" &&\n        asset.type.startsWith(\"image/\") &&\n        asset.type !== \"image/svg+xml\"\n    );\n};\n\n/** True when the image carries a non-trivial crop or focal point worth previewing. */\nconst hasImageEdit = (image: AssetImage | undefined): boolean => {\n    if (!image?.width || !image?.height) {\n        return false;\n    }\n    const c = image.crop;\n    const fullCrop = !c || (c.top === 0 && c.left === 0 && c.bottom === 0 && c.right === 0);\n    const fp = image.focalPoint;\n    const centeredFocal = !fp || (fp.x === 0.5 && fp.y === 0.5);\n    return !fullCrop || !centeredFocal;\n};\n\n/** Map the stored asset image into the shared `ImageEditor` value (focalPoint → hotspot). */\nconst toEditorValue = (image: AssetImage | undefined): ImageEditorValue | undefined => {\n    if (!image) {\n        return undefined;\n    }\n    return {\n        crop: image.crop,\n        hotspot: image.focalPoint\n            ? { x: image.focalPoint.x, y: image.focalPoint.y, width: 1, height: 1 }\n            : undefined,\n        alt: image.alt,\n        caption: image.caption\n    };\n};\n\nexport const FileInputRenderer = ({\n    value,\n    onChange,\n    label,\n    ...props\n}: ElementInputRendererProps) => {\n    const input = props.input as FileInput;\n    const { isBaseBreakpoint } = useBreakpoint();\n    const [editorOpen, setEditorOpen] = useState(false);\n\n    const asset = normalizeToAsset(value) ?? undefined;\n    const editable = isEditableImage(asset);\n\n    const onFileChange = (file: FileManagerFileItem) => {\n        onChange(({ value }) => {\n            value.set(fileManagerItemToValue(file));\n        });\n    };\n\n    const onRemove = () => {\n        onChange(({ value }) => {\n            if (isBaseBreakpoint) {\n                value.set(undefined);\n            } else {\n                value.set(null);\n            }\n        });\n    };\n\n    // Save the per-usage crop / focal point / alt override onto the element value,\n    // writing the unified asset shape (hotspot → focalPoint).\n    const onSaveEdit = (edit: ImageEditorValue) => {\n        onChange(({ value }) => {\n            if (!asset) {\n                return;\n            }\n            const image: AssetImage = {\n                width: asset.image?.width,\n                height: asset.image?.height,\n                crop: edit.crop,\n                focalPoint: edit.hotspot ? { x: edit.hotspot.x, y: edit.hotspot.y } : undefined,\n                alt: edit.alt,\n                caption: edit.caption\n            };\n            const updated = { ...asset, image };\n            const cropParam = getAssetCropParam(updated);\n            if (cropParam) {\n                const sep = asset.src.includes(\"?\") ? \"&\" : \"?\";\n                updated.url = `${asset.src}${sep}crop=${cropParam}`;\n            } else {\n                updated.url = asset.src;\n            }\n            value.set(updated);\n        });\n    };\n\n    return (\n        <FileManager\n            accept={input.allowedFileTypes}\n            onChange={onFileChange}\n            render={({ showFileManager }) => (\n                <>\n                    <FilePicker\n                        variant={\"secondary\"}\n                        label={label}\n                        description={input.description}\n                        type=\"compact\"\n                        value={asset?.src}\n                        // Reflect the per-usage crop + focal point in the thumbnail.\n                        renderFilePreview={\n                            editable && asset?.src && hasImageEdit(asset.image)\n                                ? previewProps => (\n                                      <RichItemPreview\n                                          {...previewProps}\n                                          renderImage={({ name }) => {\n                                              const { wrapper, image } =\n                                                  getCroppedImageRenderStyles(\n                                                      asset.image?.width ?? 0,\n                                                      asset.image?.height ?? 0,\n                                                      asset.image?.crop,\n                                                      asset.image?.focalPoint\n                                                          ? {\n                                                                x: asset.image.focalPoint.x,\n                                                                y: asset.image.focalPoint.y,\n                                                                width: 1,\n                                                                height: 1\n                                                            }\n                                                          : undefined,\n                                                      { boxWidth: 1, boxHeight: 1, fit: \"cover\" }\n                                                  );\n                                              return (\n                                                  <div style={wrapper}>\n                                                      <img\n                                                          src={asset.src as string}\n                                                          alt={name}\n                                                          draggable={false}\n                                                          style={image}\n                                                      />\n                                                  </div>\n                                              );\n                                          }}\n                                      />\n                                  )\n                                : undefined\n                        }\n                        onSelectItem={() => showFileManager()}\n                        onRemoveItem={onRemove}\n                        // The \"Edit\" (pencil) action edits the image (crop / focal\n                        // point / alt). Replacing the file is done by clicking the\n                        // preview. For non-images there is nothing to edit, so the\n                        // pencil is hidden.\n                        onEditItem={editable ? () => setEditorOpen(true) : undefined}\n                    />\n                    {editable ? (\n                        <ImageEditor\n                            open={editorOpen}\n                            onClose={() => setEditorOpen(false)}\n                            image={{\n                                src: asset.src,\n                                width: asset.image?.width ?? 0,\n                                height: asset.image?.height ?? 0\n                            }}\n                            value={toEditorValue(asset.image)}\n                            onSave={onSaveEdit}\n                        />\n                    ) : null}\n                </>\n            )}\n        />\n    );\n};\n"],"names":["isEditableImage","asset","hasImageEdit","image","c","fullCrop","fp","centeredFocal","toEditorValue","undefined","FileInputRenderer","value","onChange","label","props","input","isBaseBreakpoint","useBreakpoint","editorOpen","setEditorOpen","useState","normalizeToAsset","editable","onFileChange","file","fileManagerItemToValue","onRemove","onSaveEdit","edit","updated","cropParam","getAssetCropParam","sep","FileManager","showFileManager","FilePicker","previewProps","RichItemPreview","name","wrapper","getCroppedImageRenderStyles","ImageEditor"],"mappings":"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"}

package/inputRenderers/LexicalInput/LexicalEditor.d.ts

@@ -2,7 +2,10 @@ import React from "react";
 import { LexicalEditor as BaseLexicalEditor } from "@webiny/app-admin";
 import "./wbStaticToolbar.css";
 export type LexicalEditorProps = Omit<React.ComponentProps<typeof BaseLexicalEditor>, "theme">;
+declare const ExpandedLexicalEditor: (props: LexicalEditorProps) => React.JSX.Element;
+declare const CompactLexicalEditor: (props: LexicalEditorProps) => React.JSX.Element;
 export declare const LexicalEditor: {
-    Expanded: (props: LexicalEditorProps) => React.JSX.Element;
-    Compact: (props: LexicalEditorProps) => React.JSX.Element;
+    Expanded: typeof ExpandedLexicalEditor;
+    Compact: typeof CompactLexicalEditor;
 };
+export {};

package/inputRenderers/LexicalInput/LexicalEditor.js

@@ -6,18 +6,22 @@ import { useWebsiteBuilderTheme } from "../../BaseEditor/components/index.js";
 import "./wbStaticToolbar.css";
 const placeholderStyles = {
     position: "absolute",
-    top: 40,
-    left: 25
+    top: 0,
+    left: 0,
+    padding: "8px 12px",
+    marginTop: 0,
+    color: "var(--text-color-neutral-muted)"
 };
 const contentEditableStyles = {
     minHeight: 200,
     display: "block",
-    padding: 10
+    padding: "8px 12px"
 };
 const styles = {
-    backgroundColor: "#fff",
-    border: "1px solid #e1e1e1",
-    padding: "10px 14px",
+    backgroundColor: "var(--color-neutral-base)",
+    border: "1px solid var(--border-color-neutral-muted)",
+    borderTop: "none",
+    borderRadius: "0 0 var(--radius-md) var(--radius-md)",
     minHeight: 200,
     maxHeight: 350,
     fontFamily: "var(--wb-theme-font-family)"

package/inputRenderers/LexicalInput/LexicalEditor.js.map

@@ -1 +1 @@
-{"version":3,"file":"inputRenderers/LexicalInput/LexicalEditor.js","sources":["../../../src/inputRenderers/LexicalInput/LexicalEditor.tsx"],"sourcesContent":["import React from \"react\";\nimport { LexicalEditor as BaseLexicalEditor, AdminConfig } from \"@webiny/app-admin\";\nimport { StaticToolbar } from \"@webiny/lexical-editor\";\nimport type { EditorTheme } from \"@webiny/lexical-theme\";\nimport { createLexicalTokens } from \"@webiny/lexical-theme/createLexicalEditorTokens.js\";\nimport { useWebsiteBuilderTheme } from \"~/BaseEditor/components/index.js\";\nimport \"./wbStaticToolbar.css\";\nimport { CompositionScope } from \"@webiny/app-admin\";\n\nconst placeholderStyles: React.CSSProperties = { position: \"absolute\", top: 40, left: 25 };\n\nconst contentEditableStyles: React.CSSProperties = {\n    minHeight: 200,\n    display: \"block\",\n    padding: 10\n};\n\nconst styles: React.CSSProperties = {\n    backgroundColor: \"#fff\",\n    border: \"1px solid #e1e1e1\",\n    padding: \"10px 14px\",\n    minHeight: 200,\n    maxHeight: 350,\n    fontFamily: \"var(--wb-theme-font-family)\"\n};\n\nconst lexicalTokens = createLexicalTokens(\"wb-lx-\");\n\nexport type LexicalEditorProps = Omit<React.ComponentProps<typeof BaseLexicalEditor>, \"theme\">;\n\nconst { useAdminConfig } = AdminConfig;\n\nconst LexicalEditorComponent = (props: LexicalEditorProps) => {\n    const { theme } = useWebsiteBuilderTheme();\n    const { lexicalTheme } = useAdminConfig();\n\n    const editorTheme: EditorTheme = {\n        colors: theme?.colors ?? [],\n        typography: theme?.typography ?? {},\n        fontSizes: theme?.fontSizes ?? [],\n        tokens: lexicalTokens,\n        allowCustomColors: theme?.allowCustomColors ?? lexicalTheme.allowCustomColors\n    };\n\n    return (\n        <BaseLexicalEditor\n            {...props}\n            staticToolbar={<StaticToolbar className={\"wb-static-toolbar\"} />}\n            tag={\"p\"}\n            placeholder={props?.placeholder || \"Enter your text here...\"}\n            placeholderStyles={placeholderStyles}\n            contentEditableStyles={contentEditableStyles}\n            styles={styles}\n            theme={editorTheme}\n        />\n    );\n};\n\nconst ExpandedLexicalEditor = (props: LexicalEditorProps) => {\n    return (\n        <CompositionScope name={\"expanded\"}>\n            <LexicalEditorComponent {...props} />\n        </CompositionScope>\n    );\n};\n\nconst CompactLexicalEditor = (props: LexicalEditorProps) => {\n    return (\n        <CompositionScope name={\"compact\"}>\n            <LexicalEditorComponent {...props} />\n        </CompositionScope>\n    );\n};\n\nexport const LexicalEditor = {\n    Expanded: ExpandedLexicalEditor,\n    Compact: CompactLexicalEditor\n};\n"],"names":["placeholderStyles","contentEditableStyles","styles","lexicalTokens","createLexicalTokens","useAdminConfig","AdminConfig","LexicalEditorComponent","props","theme","useWebsiteBuilderTheme","lexicalTheme","editorTheme","BaseLexicalEditor","StaticToolbar","ExpandedLexicalEditor","CompositionScope","CompactLexicalEditor","LexicalEditor"],"mappings":";;;;;;AASA,MAAMA,oBAAyC;IAAE,UAAU;IAAY,KAAK;IAAI,MAAM;AAAG;AAEzF,MAAMC,wBAA6C;IAC/C,WAAW;IACX,SAAS;IACT,SAAS;AACb;AAEA,MAAMC,SAA8B;IAChC,iBAAiB;IACjB,QAAQ;IACR,SAAS;IACT,WAAW;IACX,WAAW;IACX,YAAY;AAChB;AAEA,MAAMC,gBAAgBC,oBAAoB;AAI1C,MAAM,EAAEC,gBAAAA,cAAc,EAAE,GAAGC;AAE3B,MAAMC,yBAAyB,CAACC;IAC5B,MAAM,EAAEC,KAAK,EAAE,GAAGC;IAClB,MAAM,EAAEC,YAAY,EAAE,GAAGN;IAEzB,MAAMO,cAA2B;QAC7B,QAAQH,OAAO,UAAU,EAAE;QAC3B,YAAYA,OAAO,cAAc,CAAC;QAClC,WAAWA,OAAO,aAAa,EAAE;QACjC,QAAQN;QACR,mBAAmBM,OAAO,qBAAqBE,aAAa,iBAAiB;IACjF;IAEA,OAAO,WAAP,GACI,oBAACE,eAAiBA;QACb,GAAGL,KAAK;QACT,6BAAe,oBAACM,eAAaA;YAAC,WAAW;;QACzC,KAAK;QACL,aAAaN,OAAO,eAAe;QACnC,mBAAmBR;QACnB,uBAAuBC;QACvB,QAAQC;QACR,OAAOU;;AAGnB;AAEA,MAAMG,wBAAwB,CAACP,QACpB,WAAP,GACI,oBAACQ,kBAAgBA;QAAC,MAAM;qBACpB,oBAACT,wBAA2BC;AAKxC,MAAMS,uBAAuB,CAACT,QACnB,WAAP,GACI,oBAACQ,kBAAgBA;QAAC,MAAM;qBACpB,oBAACT,wBAA2BC;AAKjC,MAAMU,8BAAgB;IACzB,UAAUH;IACV,SAASE;AACb"}
+{"version":3,"file":"inputRenderers/LexicalInput/LexicalEditor.js","sources":["../../../src/inputRenderers/LexicalInput/LexicalEditor.tsx"],"sourcesContent":["import React from \"react\";\nimport { LexicalEditor as BaseLexicalEditor, AdminConfig } from \"@webiny/app-admin\";\nimport { StaticToolbar } from \"@webiny/lexical-editor\";\nimport type { EditorTheme } from \"@webiny/lexical-theme\";\nimport { createLexicalTokens } from \"@webiny/lexical-theme/createLexicalEditorTokens.js\";\nimport { useWebsiteBuilderTheme } from \"~/BaseEditor/components/index.js\";\nimport \"./wbStaticToolbar.css\";\nimport { CompositionScope } from \"@webiny/app-admin\";\n\n// Overlay the contentEditable: same origin + same padding as `contentEditableStyles`, and\n// neutralize the Placeholder component's default -20px margin. This makes the placeholder's\n// first line land exactly on the editor's text start.\nconst placeholderStyles: React.CSSProperties = {\n    position: \"absolute\",\n    top: 0,\n    left: 0,\n    padding: \"8px 12px\",\n    marginTop: 0,\n    // Font size/family come from the paragraph typography class (applied by RichTextEditor);\n    // keep the placeholder muted.\n    color: \"var(--text-color-neutral-muted)\"\n};\n\nconst contentEditableStyles: React.CSSProperties = {\n    minHeight: 200,\n    display: \"block\",\n    padding: \"8px 12px\"\n};\n\nconst styles: React.CSSProperties = {\n    backgroundColor: \"var(--color-neutral-base)\",\n    border: \"1px solid var(--border-color-neutral-muted)\",\n    // The static toolbar carries the top border; the body drops it and rounds only the\n    // bottom corners so the two read as one seamless rounded box (matches Figma).\n    borderTop: \"none\",\n    borderRadius: \"0 0 var(--radius-md) var(--radius-md)\",\n    // Padding lives on the contentEditable only (avoids doubled inset).\n    minHeight: 200,\n    maxHeight: 350,\n    fontFamily: \"var(--wb-theme-font-family)\"\n};\n\nconst lexicalTokens = createLexicalTokens(\"wb-lx-\");\n\nexport type LexicalEditorProps = Omit<React.ComponentProps<typeof BaseLexicalEditor>, \"theme\">;\n\nconst { useAdminConfig } = AdminConfig;\n\nconst LexicalEditorComponent = (props: LexicalEditorProps) => {\n    const { theme } = useWebsiteBuilderTheme();\n    const { lexicalTheme } = useAdminConfig();\n\n    const editorTheme: EditorTheme = {\n        colors: theme?.colors ?? [],\n        typography: theme?.typography ?? {},\n        fontSizes: theme?.fontSizes ?? [],\n        tokens: lexicalTokens,\n        allowCustomColors: theme?.allowCustomColors ?? lexicalTheme.allowCustomColors\n    };\n\n    return (\n        <BaseLexicalEditor\n            {...props}\n            staticToolbar={<StaticToolbar className={\"wb-static-toolbar\"} />}\n            tag={\"p\"}\n            placeholder={props?.placeholder || \"Enter your text here...\"}\n            placeholderStyles={placeholderStyles}\n            contentEditableStyles={contentEditableStyles}\n            styles={styles}\n            theme={editorTheme}\n        />\n    );\n};\n\nconst ExpandedLexicalEditor = (props: LexicalEditorProps) => {\n    return (\n        <CompositionScope name={\"expanded\"}>\n            <LexicalEditorComponent {...props} />\n        </CompositionScope>\n    );\n};\n\nconst CompactLexicalEditor = (props: LexicalEditorProps) => {\n    return (\n        <CompositionScope name={\"compact\"}>\n            <LexicalEditorComponent {...props} />\n        </CompositionScope>\n    );\n};\n\nexport const LexicalEditor = {\n    Expanded: ExpandedLexicalEditor,\n    Compact: CompactLexicalEditor\n};\n"],"names":["placeholderStyles","contentEditableStyles","styles","lexicalTokens","createLexicalTokens","useAdminConfig","AdminConfig","LexicalEditorComponent","props","theme","useWebsiteBuilderTheme","lexicalTheme","editorTheme","BaseLexicalEditor","StaticToolbar","ExpandedLexicalEditor","CompositionScope","CompactLexicalEditor","LexicalEditor"],"mappings":";;;;;;AAYA,MAAMA,oBAAyC;IAC3C,UAAU;IACV,KAAK;IACL,MAAM;IACN,SAAS;IACT,WAAW;IAGX,OAAO;AACX;AAEA,MAAMC,wBAA6C;IAC/C,WAAW;IACX,SAAS;IACT,SAAS;AACb;AAEA,MAAMC,SAA8B;IAChC,iBAAiB;IACjB,QAAQ;IAGR,WAAW;IACX,cAAc;IAEd,WAAW;IACX,WAAW;IACX,YAAY;AAChB;AAEA,MAAMC,gBAAgBC,oBAAoB;AAI1C,MAAM,EAAEC,gBAAAA,cAAc,EAAE,GAAGC;AAE3B,MAAMC,yBAAyB,CAACC;IAC5B,MAAM,EAAEC,KAAK,EAAE,GAAGC;IAClB,MAAM,EAAEC,YAAY,EAAE,GAAGN;IAEzB,MAAMO,cAA2B;QAC7B,QAAQH,OAAO,UAAU,EAAE;QAC3B,YAAYA,OAAO,cAAc,CAAC;QAClC,WAAWA,OAAO,aAAa,EAAE;QACjC,QAAQN;QACR,mBAAmBM,OAAO,qBAAqBE,aAAa,iBAAiB;IACjF;IAEA,OAAO,WAAP,GACI,oBAACE,eAAiBA;QACb,GAAGL,KAAK;QACT,6BAAe,oBAACM,eAAaA;YAAC,WAAW;;QACzC,KAAK;QACL,aAAaN,OAAO,eAAe;QACnC,mBAAmBR;QACnB,uBAAuBC;QACvB,QAAQC;QACR,OAAOU;;AAGnB;AAEA,MAAMG,wBAAwB,CAACP,QACpB,WAAP,GACI,oBAACQ,kBAAgBA;QAAC,MAAM;qBACpB,oBAACT,wBAA2BC;AAKxC,MAAMS,uBAAuB,CAACT,QACnB,WAAP,GACI,oBAACQ,kBAAgBA;QAAC,MAAM;qBACpB,oBAACT,wBAA2BC;AAKjC,MAAMU,8BAAgB;IACzB,UAAUH;IACV,SAASE;AACb"}

package/inputRenderers/LexicalInput/LexicalEditorConfig.d.ts

@@ -1,36 +1,26 @@
 import React from "react";
 import { LexicalEditorConfig as BaseConfig } from "@webiny/lexical-editor";
-export declare const CompactEditorConfig: {
-    ({ children }: {
-        children: React.ReactNode;
-    }): React.JSX.Element;
-    ToolbarAction: (props: React.ComponentProps<typeof BaseConfig.ToolbarElement>) => React.JSX.Element;
-    Plugin: (props: React.ComponentProps<typeof BaseConfig.Plugin>) => React.JSX.Element;
-    Node: (props: React.ComponentProps<typeof BaseConfig.Node>) => React.JSX.Element;
-};
-export declare const ExpandedEditorConfig: {
-    ({ children }: {
-        children: React.ReactNode;
-    }): React.JSX.Element;
-    ToolbarAction: (props: React.ComponentProps<typeof BaseConfig.ToolbarElement>) => React.JSX.Element;
-    Plugin: (props: React.ComponentProps<typeof BaseConfig.Plugin>) => React.JSX.Element;
-    Node: (props: React.ComponentProps<typeof BaseConfig.Node>) => React.JSX.Element;
-};
+declare const ToolbarAction: (props: React.ComponentProps<typeof BaseConfig.ToolbarElement>) => React.JSX.Element;
+declare const PluginConfig: (props: React.ComponentProps<typeof BaseConfig.Plugin>) => React.JSX.Element;
+declare const NodeConfig: (props: React.ComponentProps<typeof BaseConfig.Node>) => React.JSX.Element;
+export declare function CompactEditorConfig({ children }: {
+    children: React.ReactNode;
+}): React.JSX.Element;
+export declare namespace CompactEditorConfig {
+    export { ToolbarAction };
+    export { PluginConfig as Plugin };
+    export { NodeConfig as Node };
+}
+export declare function ExpandedEditorConfig({ children }: {
+    children: React.ReactNode;
+}): React.JSX.Element;
+export declare namespace ExpandedEditorConfig {
+    export { ToolbarAction };
+    export { PluginConfig as Plugin };
+    export { NodeConfig as Node };
+}
 export declare const LexicalEditorConfig: {
-    Expanded: {
-        ({ children }: {
-            children: React.ReactNode;
-        }): React.JSX.Element;
-        ToolbarAction: (props: React.ComponentProps<typeof BaseConfig.ToolbarElement>) => React.JSX.Element;
-        Plugin: (props: React.ComponentProps<typeof BaseConfig.Plugin>) => React.JSX.Element;
-        Node: (props: React.ComponentProps<typeof BaseConfig.Node>) => React.JSX.Element;
-    };
-    Compact: {
-        ({ children }: {
-            children: React.ReactNode;
-        }): React.JSX.Element;
-        ToolbarAction: (props: React.ComponentProps<typeof BaseConfig.ToolbarElement>) => React.JSX.Element;
-        Plugin: (props: React.ComponentProps<typeof BaseConfig.Plugin>) => React.JSX.Element;
-        Node: (props: React.ComponentProps<typeof BaseConfig.Node>) => React.JSX.Element;
-    };
+    Expanded: typeof ExpandedEditorConfig;
+    Compact: typeof CompactEditorConfig;
 };
+export {};

package/inputRenderers/LexicalInput/TypographyDropDown.js

@@ -47,14 +47,15 @@ const TypographyDropDown = ()=>{
         element
     ]);
     return /*#__PURE__*/ react.createElement(react.Fragment, null, styles?.length ? /*#__PURE__*/ react.createElement(DropDown, {
-        buttonClassName: "toolbar-item typography-dropdown",
+        buttonClassName: "toolbar-item typography-dropdown block-type-dropdown",
         buttonAriaLabel: "Typography formatting options",
         buttonLabel: value?.label || "Typography",
         stopCloseOnClickSelf: true,
         disabled: false,
         showScroll: true
     }, styles?.map((option)=>/*#__PURE__*/ react.createElement(DropDownItem, {
-            className: `item typography-item ${value?.id === option.id ? "active dropdown-item-active" : ""}`,
+            className: "item typography-item",
+            selected: value?.id === option.id,
             onClick: ()=>applyTypography(option),
             key: option.id
         }, /*#__PURE__*/ react.createElement("span", {

package/inputRenderers/LexicalInput/TypographyDropDown.js.map

@@ -1 +1 @@
-{"version":3,"file":"inputRenderers/LexicalInput/TypographyDropDown.js","sources":["../../../src/inputRenderers/LexicalInput/TypographyDropDown.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\nimport { $getNearestNodeOfType } from \"@lexical/utils\";\nimport {\n    DropDown,\n    DropDownItem,\n    useCurrentSelection,\n    useCurrentElement,\n    useTypographyAction\n} from \"@webiny/lexical-editor\";\nimport {\n    $isHeadingNode,\n    $isParagraphNode,\n    $isQuoteNode,\n    $isListNode,\n    ListNode\n} from \"@webiny/lexical-nodes\";\nimport { useWebsiteBuilderTheme } from \"~/BaseEditor/components/index.js\";\nimport type { TypographyStyle } from \"@webiny/website-builder-sdk/types/WebsiteBuilderTheme.js\";\n\nexport const TypographyDropDown = () => {\n    const { value, applyTypography } = useTypographyAction();\n    const { theme } = useWebsiteBuilderTheme();\n    const [styles, setStyles] = useState<TypographyStyle[]>([]);\n    const { element } = useCurrentElement();\n    const { rangeSelection } = useCurrentSelection();\n\n    const getAllTextStyles = (): TypographyStyle[] => {\n        if (!theme?.typography) {\n            return [];\n        }\n        const headingsStyles = theme.typography?.headings || [];\n        const paragraphStyles = theme.typography?.paragraphs || [];\n        return [...headingsStyles, ...paragraphStyles];\n    };\n\n    useEffect(() => {\n        // In static toolbar typography, styles always need to be visible.\n        if (theme?.typography) {\n            setStyles(getAllTextStyles());\n        }\n    }, [theme?.typography]);\n\n    const getListStyles = (tag: string): TypographyStyle[] => {\n        const listStyles = theme?.typography.lists?.filter(x => x.tag === tag) || [];\n        if (listStyles.length > 0) {\n            return listStyles;\n        }\n\n        const fallbackTag = tag === \"ul\" ? \"ol\" : \"ul\";\n        return theme?.typography.lists?.filter(x => x.tag === fallbackTag) || [];\n    };\n\n    useEffect(() => {\n        if (!element || !rangeSelection) {\n            return;\n        }\n\n        if ($isParagraphNode(element) || $isHeadingNode(element)) {\n            setStyles(getAllTextStyles());\n        } else if ($isListNode(element)) {\n            let type;\n            try {\n                const anchorNode = rangeSelection.anchor.getNode();\n                const parentList = $getNearestNodeOfType<ListNode>(anchorNode, ListNode);\n                if (parentList) {\n                    type = parentList.getListType();\n                }\n            } catch {\n                type = element.getListType();\n            }\n\n            if (type === \"bullet\") {\n                setStyles(getListStyles(\"ul\"));\n            } else {\n                setStyles(getListStyles(\"ol\"));\n            }\n        } else if ($isQuoteNode(element)) {\n            setStyles(theme?.typography?.quotes || []);\n        } else {\n            setStyles([]);\n        }\n    }, [element]);\n\n    return (\n        <>\n            {!!styles?.length ? (\n                <DropDown\n                    buttonClassName=\"toolbar-item typography-dropdown\"\n                    buttonAriaLabel={\"Typography formatting options\"}\n                    buttonLabel={value?.label || \"Typography\"}\n                    stopCloseOnClickSelf={true}\n                    disabled={false}\n                    showScroll={true}\n                >\n                    {styles?.map(option => (\n                        <DropDownItem\n                            className={`item typography-item ${\n                                value?.id === option.id ? \"active dropdown-item-active\" : \"\"\n                            }`}\n                            onClick={() => applyTypography(option)}\n                            key={option.id}\n                        >\n                            <span className=\"text\">{option.label}</span>\n                        </DropDownItem>\n                    ))}\n                </DropDown>\n            ) : null}\n        </>\n    );\n};\n"],"names":["TypographyDropDown","value","applyTypography","useTypographyAction","theme","useWebsiteBuilderTheme","styles","setStyles","useState","element","useCurrentElement","rangeSelection","useCurrentSelection","getAllTextStyles","headingsStyles","paragraphStyles","useEffect","getListStyles","tag","listStyles","x","fallbackTag","$isParagraphNode","$isHeadingNode","$isListNode","type","anchorNode","parentList","$getNearestNodeOfType","ListNode","$isQuoteNode","DropDown","option","DropDownItem"],"mappings":";;;;;AAmBO,MAAMA,qBAAqB;IAC9B,MAAM,EAAEC,KAAK,EAAEC,eAAe,EAAE,GAAGC;IACnC,MAAM,EAAEC,KAAK,EAAE,GAAGC;IAClB,MAAM,CAACC,QAAQC,UAAU,GAAGC,SAA4B,EAAE;IAC1D,MAAM,EAAEC,OAAO,EAAE,GAAGC;IACpB,MAAM,EAAEC,cAAc,EAAE,GAAGC;IAE3B,MAAMC,mBAAmB;QACrB,IAAI,CAACT,OAAO,YACR,OAAO,EAAE;QAEb,MAAMU,iBAAiBV,MAAM,UAAU,EAAE,YAAY,EAAE;QACvD,MAAMW,kBAAkBX,MAAM,UAAU,EAAE,cAAc,EAAE;QAC1D,OAAO;eAAIU;eAAmBC;SAAgB;IAClD;IAEAC,UAAU;QAEN,IAAIZ,OAAO,YACPG,UAAUM;IAElB,GAAG;QAACT,OAAO;KAAW;IAEtB,MAAMa,gBAAgB,CAACC;QACnB,MAAMC,aAAaf,OAAO,WAAW,OAAO,OAAOgB,CAAAA,IAAKA,EAAE,GAAG,KAAKF,QAAQ,EAAE;QAC5E,IAAIC,WAAW,MAAM,GAAG,GACpB,OAAOA;QAGX,MAAME,cAAcH,AAAQ,SAARA,MAAe,OAAO;QAC1C,OAAOd,OAAO,WAAW,OAAO,OAAOgB,CAAAA,IAAKA,EAAE,GAAG,KAAKC,gBAAgB,EAAE;IAC5E;IAEAL,UAAU;QACN,IAAI,CAACP,WAAW,CAACE,gBACb;QAGJ,IAAIW,iBAAiBb,YAAYc,eAAed,UAC5CF,UAAUM;aACP,IAAIW,YAAYf,UAAU;YAC7B,IAAIgB;YACJ,IAAI;gBACA,MAAMC,aAAaf,eAAe,MAAM,CAAC,OAAO;gBAChD,MAAMgB,aAAaC,sBAAgCF,YAAYG;gBAC/D,IAAIF,YACAF,OAAOE,WAAW,WAAW;YAErC,EAAE,OAAM;gBACJF,OAAOhB,QAAQ,WAAW;YAC9B;YAEa,aAATgB,OACAlB,UAAUU,cAAc,SAExBV,UAAUU,cAAc;QAEhC,OAAWa,aAAarB,WACpBF,UAAUH,OAAO,YAAY,UAAU,EAAE,IAEzCG,UAAU,EAAE;IAEpB,GAAG;QAACE;KAAQ;IAEZ,OAAO,WAAP,GACI,0CACK,AAAEH,QAAQ,SAAS,WAAT,GACP,oBAACyB,UAAQA;QACL,iBAAgB;QAChB,iBAAiB;QACjB,aAAa9B,OAAO,SAAS;QAC7B,sBAAsB;QACtB,UAAU;QACV,YAAY;OAEXK,QAAQ,IAAI0B,CAAAA,SAAAA,WAAAA,GACT,oBAACC,cAAYA;YACT,WAAW,CAAC,qBAAqB,EAC7BhC,OAAO,OAAO+B,OAAO,EAAE,GAAG,gCAAgC,IAC5D;YACF,SAAS,IAAM9B,gBAAgB8B;YAC/B,KAAKA,OAAO,EAAE;yBAEd,oBAAC;YAAK,WAAU;WAAQA,OAAO,KAAK,OAIhD;AAGhB"}
+{"version":3,"file":"inputRenderers/LexicalInput/TypographyDropDown.js","sources":["../../../src/inputRenderers/LexicalInput/TypographyDropDown.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\nimport { $getNearestNodeOfType } from \"@lexical/utils\";\nimport {\n    DropDown,\n    DropDownItem,\n    useCurrentSelection,\n    useCurrentElement,\n    useTypographyAction\n} from \"@webiny/lexical-editor\";\nimport {\n    $isHeadingNode,\n    $isParagraphNode,\n    $isQuoteNode,\n    $isListNode,\n    ListNode\n} from \"@webiny/lexical-nodes\";\nimport { useWebsiteBuilderTheme } from \"~/BaseEditor/components/index.js\";\nimport type { TypographyStyle } from \"@webiny/website-builder-sdk/types/WebsiteBuilderTheme.js\";\n\nexport const TypographyDropDown = () => {\n    const { value, applyTypography } = useTypographyAction();\n    const { theme } = useWebsiteBuilderTheme();\n    const [styles, setStyles] = useState<TypographyStyle[]>([]);\n    const { element } = useCurrentElement();\n    const { rangeSelection } = useCurrentSelection();\n\n    const getAllTextStyles = (): TypographyStyle[] => {\n        if (!theme?.typography) {\n            return [];\n        }\n        const headingsStyles = theme.typography?.headings || [];\n        const paragraphStyles = theme.typography?.paragraphs || [];\n        return [...headingsStyles, ...paragraphStyles];\n    };\n\n    useEffect(() => {\n        // In static toolbar typography, styles always need to be visible.\n        if (theme?.typography) {\n            setStyles(getAllTextStyles());\n        }\n    }, [theme?.typography]);\n\n    const getListStyles = (tag: string): TypographyStyle[] => {\n        const listStyles = theme?.typography.lists?.filter(x => x.tag === tag) || [];\n        if (listStyles.length > 0) {\n            return listStyles;\n        }\n\n        const fallbackTag = tag === \"ul\" ? \"ol\" : \"ul\";\n        return theme?.typography.lists?.filter(x => x.tag === fallbackTag) || [];\n    };\n\n    useEffect(() => {\n        if (!element || !rangeSelection) {\n            return;\n        }\n\n        if ($isParagraphNode(element) || $isHeadingNode(element)) {\n            setStyles(getAllTextStyles());\n        } else if ($isListNode(element)) {\n            let type;\n            try {\n                const anchorNode = rangeSelection.anchor.getNode();\n                const parentList = $getNearestNodeOfType<ListNode>(anchorNode, ListNode);\n                if (parentList) {\n                    type = parentList.getListType();\n                }\n            } catch {\n                type = element.getListType();\n            }\n\n            if (type === \"bullet\") {\n                setStyles(getListStyles(\"ul\"));\n            } else {\n                setStyles(getListStyles(\"ol\"));\n            }\n        } else if ($isQuoteNode(element)) {\n            setStyles(theme?.typography?.quotes || []);\n        } else {\n            setStyles([]);\n        }\n    }, [element]);\n\n    return (\n        <>\n            {!!styles?.length ? (\n                <DropDown\n                    buttonClassName=\"toolbar-item typography-dropdown block-type-dropdown\"\n                    buttonAriaLabel={\"Typography formatting options\"}\n                    buttonLabel={value?.label || \"Typography\"}\n                    stopCloseOnClickSelf={true}\n                    disabled={false}\n                    showScroll={true}\n                >\n                    {styles?.map(option => (\n                        <DropDownItem\n                            className=\"item typography-item\"\n                            selected={value?.id === option.id}\n                            onClick={() => applyTypography(option)}\n                            key={option.id}\n                        >\n                            <span className=\"text\">{option.label}</span>\n                        </DropDownItem>\n                    ))}\n                </DropDown>\n            ) : null}\n        </>\n    );\n};\n"],"names":["TypographyDropDown","value","applyTypography","useTypographyAction","theme","useWebsiteBuilderTheme","styles","setStyles","useState","element","useCurrentElement","rangeSelection","useCurrentSelection","getAllTextStyles","headingsStyles","paragraphStyles","useEffect","getListStyles","tag","listStyles","x","fallbackTag","$isParagraphNode","$isHeadingNode","$isListNode","type","anchorNode","parentList","$getNearestNodeOfType","ListNode","$isQuoteNode","DropDown","option","DropDownItem"],"mappings":";;;;;AAmBO,MAAMA,qBAAqB;IAC9B,MAAM,EAAEC,KAAK,EAAEC,eAAe,EAAE,GAAGC;IACnC,MAAM,EAAEC,KAAK,EAAE,GAAGC;IAClB,MAAM,CAACC,QAAQC,UAAU,GAAGC,SAA4B,EAAE;IAC1D,MAAM,EAAEC,OAAO,EAAE,GAAGC;IACpB,MAAM,EAAEC,cAAc,EAAE,GAAGC;IAE3B,MAAMC,mBAAmB;QACrB,IAAI,CAACT,OAAO,YACR,OAAO,EAAE;QAEb,MAAMU,iBAAiBV,MAAM,UAAU,EAAE,YAAY,EAAE;QACvD,MAAMW,kBAAkBX,MAAM,UAAU,EAAE,cAAc,EAAE;QAC1D,OAAO;eAAIU;eAAmBC;SAAgB;IAClD;IAEAC,UAAU;QAEN,IAAIZ,OAAO,YACPG,UAAUM;IAElB,GAAG;QAACT,OAAO;KAAW;IAEtB,MAAMa,gBAAgB,CAACC;QACnB,MAAMC,aAAaf,OAAO,WAAW,OAAO,OAAOgB,CAAAA,IAAKA,EAAE,GAAG,KAAKF,QAAQ,EAAE;QAC5E,IAAIC,WAAW,MAAM,GAAG,GACpB,OAAOA;QAGX,MAAME,cAAcH,AAAQ,SAARA,MAAe,OAAO;QAC1C,OAAOd,OAAO,WAAW,OAAO,OAAOgB,CAAAA,IAAKA,EAAE,GAAG,KAAKC,gBAAgB,EAAE;IAC5E;IAEAL,UAAU;QACN,IAAI,CAACP,WAAW,CAACE,gBACb;QAGJ,IAAIW,iBAAiBb,YAAYc,eAAed,UAC5CF,UAAUM;aACP,IAAIW,YAAYf,UAAU;YAC7B,IAAIgB;YACJ,IAAI;gBACA,MAAMC,aAAaf,eAAe,MAAM,CAAC,OAAO;gBAChD,MAAMgB,aAAaC,sBAAgCF,YAAYG;gBAC/D,IAAIF,YACAF,OAAOE,WAAW,WAAW;YAErC,EAAE,OAAM;gBACJF,OAAOhB,QAAQ,WAAW;YAC9B;YAEa,aAATgB,OACAlB,UAAUU,cAAc,SAExBV,UAAUU,cAAc;QAEhC,OAAWa,aAAarB,WACpBF,UAAUH,OAAO,YAAY,UAAU,EAAE,IAEzCG,UAAU,EAAE;IAEpB,GAAG;QAACE;KAAQ;IAEZ,OAAO,WAAP,GACI,0CACK,AAAEH,QAAQ,SAAS,WAAT,GACP,oBAACyB,UAAQA;QACL,iBAAgB;QAChB,iBAAiB;QACjB,aAAa9B,OAAO,SAAS;QAC7B,sBAAsB;QACtB,UAAU;QACV,YAAY;OAEXK,QAAQ,IAAI0B,CAAAA,SAAAA,WAAAA,GACT,oBAACC,cAAYA;YACT,WAAU;YACV,UAAUhC,OAAO,OAAO+B,OAAO,EAAE;YACjC,SAAS,IAAM9B,gBAAgB8B;YAC/B,KAAKA,OAAO,EAAE;yBAEd,oBAAC;YAAK,WAAU;WAAQA,OAAO,KAAK,OAIhD;AAGhB"}