@webiny/app-admin 0.0.0-unstable.496cf268ac → 0.0.0-unstable.5387e5f7c8

package/components/IconPicker/plugins/customPlugin.js

@@ -0,0 +1,89 @@
+import react from "react";
+import { observer } from "mobx-react-lite";
+import { Button } from "@webiny/admin-ui";
+import { useFeature } from "@webiny/app";
+import { FileManager } from "../../../base/ui/FileManager.js";
+import { IconPickerTab } from "../IconPickerTab.js";
+import { useIcon } from "../index.js";
+import { useIconPicker } from "../IconPickerPresenterProvider.js";
+import { IconPickerConfig } from "../config/index.js";
+import { CustomIconsPresenterFeature } from "../../../presentation/iconPicker/customIcons/feature.js";
+const CustomIcon = ()=>{
+    const { icon, size } = useIcon();
+    return /*#__PURE__*/ react.createElement("img", {
+        width: size,
+        height: size,
+        src: icon.value,
+        alt: icon.name,
+        style: {
+            verticalAlign: "middle"
+        }
+    });
+};
+const IconFilePicker = ({ onUpload, onChange })=>/*#__PURE__*/ react.createElement(FileManager, {
+        onUploadCompletion: ([file])=>{
+            onUpload(file);
+        },
+        onChange: onChange,
+        scope: "scope:iconPicker",
+        accept: [
+            "image/svg+xml"
+        ],
+        render: ({ showFileManager })=>/*#__PURE__*/ react.createElement(Button, {
+                variant: "primary",
+                text: "Browse",
+                onClick: ()=>{
+                    showFileManager();
+                }
+            })
+    });
+const CustomIconTab = observer(()=>{
+    const presenter = useIconPicker();
+    const onIconSelect = (icon)=>{
+        presenter.setIcon(icon);
+        presenter.closeMenu();
+    };
+    const onIconFileSelect = (file)=>{
+        presenter.setIcon({
+            type: "custom",
+            name: file.name,
+            value: file.src
+        });
+        presenter.closeMenu();
+    };
+    const onIconFileUpload = (file)=>{
+        const icon = {
+            type: "custom",
+            name: file.name,
+            value: file.src
+        };
+        presenter.addIcon(icon);
+        presenter.setIcon(icon);
+        presenter.closeMenu();
+    };
+    return /*#__PURE__*/ react.createElement(IconPickerTab, {
+        value: "custom",
+        label: "Custom",
+        onChange: onIconSelect,
+        actions: /*#__PURE__*/ react.createElement(IconFilePicker, {
+            onChange: onIconFileSelect,
+            onUpload: onIconFileUpload
+        })
+    });
+});
+const CustomIconPlugin = ()=>{
+    const { presenter } = useFeature(CustomIconsPresenterFeature);
+    return /*#__PURE__*/ react.createElement(IconPickerConfig, null, /*#__PURE__*/ react.createElement(IconPickerConfig.IconPack, {
+        name: "custom",
+        provider: ()=>presenter.load()
+    }), /*#__PURE__*/ react.createElement(IconPickerConfig.IconType, {
+        name: "custom"
+    }, /*#__PURE__*/ react.createElement(IconPickerConfig.IconType.Icon, {
+        element: /*#__PURE__*/ react.createElement(CustomIcon, null)
+    }), /*#__PURE__*/ react.createElement(IconPickerConfig.IconType.Tab, {
+        element: /*#__PURE__*/ react.createElement(CustomIconTab, null)
+    })));
+};
+export { CustomIconPlugin };
+
+//# sourceMappingURL=customPlugin.js.map

package/components/IconPicker/plugins/customPlugin.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"components/IconPicker/plugins/customPlugin.js","sources":["../../../../src/components/IconPicker/plugins/customPlugin.tsx"],"sourcesContent":["import React from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport { Button } from \"@webiny/admin-ui\";\nimport { useFeature } from \"@webiny/app\";\nimport type { FileManagerFileItem } from \"~/base/ui/FileManager.js\";\nimport { FileManager } from \"~/base/ui/FileManager.js\";\nimport { IconPickerTab } from \"../IconPickerTab.js\";\nimport { useIcon } from \"../index.js\";\nimport { useIconPicker } from \"../IconPickerPresenterProvider.js\";\nimport { IconPickerConfig } from \"../config/index.js\";\nimport { CustomIconsPresenterFeature } from \"~/presentation/iconPicker/customIcons/feature.js\";\nimport type { Icon } from \"../types.js\";\n\nconst CustomIcon = () => {\n    const { icon, size } = useIcon<Icon>();\n\n    return (\n        <img\n            width={size}\n            height={size}\n            src={icon.value}\n            alt={icon.name}\n            style={{\n                verticalAlign: \"middle\"\n            }}\n        />\n    );\n};\n\ninterface IconFilePickerProps {\n    onUpload: (file: FileManagerFileItem) => void;\n    onChange: (file: FileManagerFileItem) => void;\n}\n\nconst IconFilePicker = ({ onUpload, onChange }: IconFilePickerProps) => {\n    return (\n        <FileManager\n            onUploadCompletion={([file]) => {\n                onUpload(file);\n            }}\n            onChange={onChange}\n            scope=\"scope:iconPicker\"\n            accept={[\"image/svg+xml\"]}\n            render={({ showFileManager }) => (\n                <Button\n                    variant={\"primary\"}\n                    text={\"Browse\"}\n                    onClick={() => {\n                        showFileManager();\n                    }}\n                />\n            )}\n        ></FileManager>\n    );\n};\n\nconst CustomIconTab = observer(() => {\n    const presenter = useIconPicker();\n\n    const onIconSelect = (icon: Icon) => {\n        presenter.setIcon(icon);\n        presenter.closeMenu();\n    };\n\n    const onIconFileSelect = (file: FileManagerFileItem) => {\n        presenter.setIcon({\n            type: \"custom\",\n            name: file.name,\n            value: file.src\n        });\n        presenter.closeMenu();\n    };\n\n    const onIconFileUpload = (file: FileManagerFileItem) => {\n        const icon = {\n            type: \"custom\",\n            name: file.name,\n            value: file.src\n        };\n\n        presenter.addIcon(icon);\n        presenter.setIcon(icon);\n        presenter.closeMenu();\n    };\n\n    return (\n        <IconPickerTab\n            value={\"custom\"}\n            label={\"Custom\"}\n            onChange={onIconSelect}\n            actions={<IconFilePicker onChange={onIconFileSelect} onUpload={onIconFileUpload} />}\n        />\n    );\n});\n\nexport const CustomIconPlugin = () => {\n    const { presenter } = useFeature(CustomIconsPresenterFeature);\n\n    return (\n        <IconPickerConfig>\n            <IconPickerConfig.IconPack name=\"custom\" provider={() => presenter.load()} />\n            <IconPickerConfig.IconType name={\"custom\"}>\n                <IconPickerConfig.IconType.Icon element={<CustomIcon />} />\n                <IconPickerConfig.IconType.Tab element={<CustomIconTab />} />\n            </IconPickerConfig.IconType>\n        </IconPickerConfig>\n    );\n};\n"],"names":["CustomIcon","icon","size","useIcon","IconFilePicker","onUpload","onChange","FileManager","file","showFileManager","Button","CustomIconTab","observer","presenter","useIconPicker","onIconSelect","onIconFileSelect","onIconFileUpload","IconPickerTab","CustomIconPlugin","useFeature","CustomIconsPresenterFeature","IconPickerConfig"],"mappings":";;;;;;;;;;AAaA,MAAMA,aAAa;IACf,MAAM,EAAEC,IAAI,EAAEC,IAAI,EAAE,GAAGC;IAEvB,OAAO,WAAP,GACI,oBAAC;QACG,OAAOD;QACP,QAAQA;QACR,KAAKD,KAAK,KAAK;QACf,KAAKA,KAAK,IAAI;QACd,OAAO;YACH,eAAe;QACnB;;AAGZ;AAOA,MAAMG,iBAAiB,CAAC,EAAEC,QAAQ,EAAEC,QAAQ,EAAuB,GACxD,WAAP,GACI,oBAACC,aAAWA;QACR,oBAAoB,CAAC,CAACC,KAAK;YACvBH,SAASG;QACb;QACA,UAAUF;QACV,OAAM;QACN,QAAQ;YAAC;SAAgB;QACzB,QAAQ,CAAC,EAAEG,eAAe,EAAE,iBACxB,oBAACC,QAAMA;gBACH,SAAS;gBACT,MAAM;gBACN,SAAS;oBACLD;gBACJ;;;AAOpB,MAAME,gBAAgBC,SAAS;IAC3B,MAAMC,YAAYC;IAElB,MAAMC,eAAe,CAACd;QAClBY,UAAU,OAAO,CAACZ;QAClBY,UAAU,SAAS;IACvB;IAEA,MAAMG,mBAAmB,CAACR;QACtBK,UAAU,OAAO,CAAC;YACd,MAAM;YACN,MAAML,KAAK,IAAI;YACf,OAAOA,KAAK,GAAG;QACnB;QACAK,UAAU,SAAS;IACvB;IAEA,MAAMI,mBAAmB,CAACT;QACtB,MAAMP,OAAO;YACT,MAAM;YACN,MAAMO,KAAK,IAAI;YACf,OAAOA,KAAK,GAAG;QACnB;QAEAK,UAAU,OAAO,CAACZ;QAClBY,UAAU,OAAO,CAACZ;QAClBY,UAAU,SAAS;IACvB;IAEA,OAAO,WAAP,GACI,oBAACK,eAAaA;QACV,OAAO;QACP,OAAO;QACP,UAAUH;QACV,uBAAS,oBAACX,gBAAcA;YAAC,UAAUY;YAAkB,UAAUC;;;AAG3E;AAEO,MAAME,mBAAmB;IAC5B,MAAM,EAAEN,SAAS,EAAE,GAAGO,WAAWC;IAEjC,OAAO,WAAP,GACI,oBAACC,kBAAgBA,MAAAA,WAAAA,GACb,oBAACA,iBAAiB,QAAQ;QAAC,MAAK;QAAS,UAAU,IAAMT,UAAU,IAAI;sBACvE,oBAACS,iBAAiB,QAAQ;QAAC,MAAM;qBAC7B,oBAACA,iBAAiB,QAAQ,CAAC,IAAI;QAAC,uBAAS,oBAACtB,YAAUA;sBACpD,oBAACsB,iBAAiB,QAAQ,CAAC,GAAG;QAAC,uBAAS,oBAACX,eAAaA;;AAItE"}

package/components/IconPicker/plugins/emojisPlugin.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const EmojiPlugin: () => React.JSX.Element;

package/components/IconPicker/plugins/emojisPlugin.js

@@ -0,0 +1,102 @@
+import react, { useState } from "react";
+import { observer } from "mobx-react-lite";
+import { PopoverPrimitive, cn } from "@webiny/admin-ui";
+import { useIcon } from "../index.js";
+import { IconPickerTab } from "../IconPickerTab.js";
+import { IconProvider } from "../IconRenderer.js";
+import { useIconPicker } from "../IconPickerPresenterProvider.js";
+import { IconPickerConfig } from "../config/index.js";
+const SKIN_TONES = [
+    "",
+    "\uD83C\uDFFB",
+    "\uD83C\uDFFC",
+    "\uD83C\uDFFD",
+    "\uD83C\uDFFE",
+    "\uD83C\uDFFF"
+];
+const SkinToneSelectWrapper = (props)=>/*#__PURE__*/ react.createElement("div", {
+        className: cn("size-xl rounded-sm pointer border-solid border-sm border-neutral-muted flex justify-center items-center text-center")
+    }, props.children);
+const Emoji = ()=>{
+    const { icon, size } = useIcon();
+    return /*#__PURE__*/ react.createElement("div", {
+        style: {
+            display: "inline-block",
+            width: `${size}px`,
+            height: `${size}px`,
+            fontSize: `${4 * size / 5}px`,
+            lineHeight: `${size}px`,
+            color: "black"
+        }
+    }, icon.skinTone ? icon.value + icon.skinTone : icon.value);
+};
+const SkinToneSelect = ({ icon, hasSkinToneSupport, onChange })=>{
+    const [open, setOpen] = useState(false);
+    if (!icon || !isEmoji(icon)) return /*#__PURE__*/ react.createElement(SkinToneSelectWrapper, null);
+    if (!hasSkinToneSupport) return /*#__PURE__*/ react.createElement(SkinToneSelectWrapper, null, /*#__PURE__*/ react.createElement(IconProvider, {
+        icon: icon,
+        size: 24
+    }, /*#__PURE__*/ react.createElement(Emoji, null)));
+    return /*#__PURE__*/ react.createElement(PopoverPrimitive, {
+        open: open,
+        onOpenChange: (open)=>setOpen(open)
+    }, /*#__PURE__*/ react.createElement(PopoverPrimitive.Trigger, {
+        className: "outline-none"
+    }, /*#__PURE__*/ react.createElement(SkinToneSelectWrapper, null, /*#__PURE__*/ react.createElement(IconProvider, {
+        icon: icon,
+        size: 24
+    }, /*#__PURE__*/ react.createElement(Emoji, null)))), /*#__PURE__*/ react.createElement(PopoverPrimitive.Content, null, /*#__PURE__*/ react.createElement("div", {
+        className: "bg-neutral-base grid gap-xs p-xs text-center"
+    }, SKIN_TONES.map((skinTone, index)=>/*#__PURE__*/ react.createElement("div", {
+            key: index,
+            onClick: ()=>{
+                onChange(skinTone);
+            },
+            className: "cursor-pointer"
+        }, /*#__PURE__*/ react.createElement(IconProvider, {
+            icon: {
+                ...icon,
+                skinTone
+            },
+            size: 24
+        }, /*#__PURE__*/ react.createElement(Emoji, null)))))));
+};
+const isEmoji = (icon)=>{
+    if (!icon) return false;
+    return "emoji" === icon.type;
+};
+const EmojiTab = observer(()=>{
+    const presenter = useIconPicker();
+    const { selectedIcon } = presenter.vm;
+    const onSkinToneChange = (skinTone)=>{
+        if (isEmoji(selectedIcon)) presenter.setIcon({
+            ...selectedIcon,
+            skinTone
+        });
+    };
+    const onIconSelect = (icon)=>{
+        presenter.setIcon(icon);
+        presenter.closeMenu();
+    };
+    const hasSkinToneSupport = isEmoji(selectedIcon) ? selectedIcon.skinToneSupport : false;
+    return /*#__PURE__*/ react.createElement(IconPickerTab, {
+        value: "emoji",
+        label: "Emojis",
+        onChange: onIconSelect,
+        actions: /*#__PURE__*/ react.createElement(SkinToneSelect, {
+            icon: selectedIcon,
+            hasSkinToneSupport: hasSkinToneSupport,
+            onChange: onSkinToneChange
+        })
+    });
+});
+const EmojiPlugin = ()=>/*#__PURE__*/ react.createElement(IconPickerConfig, null, /*#__PURE__*/ react.createElement(IconPickerConfig.IconType, {
+        name: "emoji"
+    }, /*#__PURE__*/ react.createElement(IconPickerConfig.IconType.Icon, {
+        element: /*#__PURE__*/ react.createElement(Emoji, null)
+    }), /*#__PURE__*/ react.createElement(IconPickerConfig.IconType.Tab, {
+        element: /*#__PURE__*/ react.createElement(EmojiTab, null)
+    })));
+export { EmojiPlugin };
+
+//# sourceMappingURL=emojisPlugin.js.map

package/components/IconPicker/plugins/emojisPlugin.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"components/IconPicker/plugins/emojisPlugin.js","sources":["../../../../src/components/IconPicker/plugins/emojisPlugin.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport { cn, PopoverPrimitive } from \"@webiny/admin-ui\";\nimport { useIcon } from \"../index.js\";\nimport { IconPickerTab } from \"../IconPickerTab.js\";\nimport { IconProvider } from \"../IconRenderer.js\";\nimport { useIconPicker } from \"../IconPickerPresenterProvider.js\";\nimport { IconPickerConfig } from \"../config/index.js\";\nimport type { Icon } from \"../types.js\";\n\nconst SKIN_TONES = [\"\", \"\\u{1f3fb}\", \"\\u{1f3fc}\", \"\\u{1f3fd}\", \"\\u{1f3fe}\", \"\\u{1f3ff}\"];\n\nconst SkinToneSelectWrapper = (props: React.HTMLAttributes<HTMLDivElement>) => {\n    return (\n        <div\n            className={cn(\n                \"size-xl rounded-sm pointer border-solid border-sm border-neutral-muted flex justify-center items-center text-center\"\n            )}\n        >\n            {props.children}\n        </div>\n    );\n};\n\n/**\n * NOTE: Avoid using `@emotion/styled` in icon renderer components across all plugins.\n * This is crucial for serializing component rendering into a string value as plain HTML,\n * which is necessary for usage in the website application. Please use inline styles here\n * to ensure proper serialization.\n */\n\ninterface Emoji extends Icon {\n    skinTone: string;\n    skinToneSupport: boolean;\n}\n\nconst Emoji = () => {\n    const { icon, size } = useIcon<Emoji>();\n\n    return (\n        <div\n            style={{\n                display: \"inline-block\",\n                width: `${size}px`,\n                height: `${size}px`,\n                fontSize: `${(size * 4) / 5}px`,\n                lineHeight: `${size}px`,\n                color: \"black\"\n            }}\n        >\n            {icon.skinTone ? icon.value + icon.skinTone : icon.value}\n        </div>\n    );\n};\n\ninterface SkinToneSelectProps {\n    icon: Icon | null;\n    hasSkinToneSupport: boolean;\n    onChange: (skinTone: string) => void;\n}\n\nconst SkinToneSelect = ({ icon, hasSkinToneSupport, onChange }: SkinToneSelectProps) => {\n    const [open, setOpen] = useState(false);\n\n    if (!icon || !isEmoji(icon)) {\n        return <SkinToneSelectWrapper />;\n    }\n\n    if (!hasSkinToneSupport) {\n        return (\n            <SkinToneSelectWrapper>\n                <IconProvider icon={icon} size={24}>\n                    <Emoji />\n                </IconProvider>\n            </SkinToneSelectWrapper>\n        );\n    }\n\n    return (\n        <PopoverPrimitive open={open} onOpenChange={open => setOpen(open)}>\n            <PopoverPrimitive.Trigger className={\"outline-none\"}>\n                <SkinToneSelectWrapper>\n                    <IconProvider icon={icon} size={24}>\n                        <Emoji />\n                    </IconProvider>\n                </SkinToneSelectWrapper>\n            </PopoverPrimitive.Trigger>\n            <PopoverPrimitive.Content>\n                <div className={\"bg-neutral-base grid gap-xs p-xs text-center\"}>\n                    {SKIN_TONES.map((skinTone, index) => (\n                        <div\n                            key={index}\n                            onClick={() => {\n                                onChange(skinTone);\n                            }}\n                            className={\"cursor-pointer\"}\n                        >\n                            <IconProvider icon={{ ...icon, skinTone }} size={24}>\n                                <Emoji />\n                            </IconProvider>\n                        </div>\n                    ))}\n                </div>\n            </PopoverPrimitive.Content>\n        </PopoverPrimitive>\n    );\n};\n\n/**\n * @see https://www.typescriptlang.org/docs/handbook/2/narrowing.html#using-type-predicates\n */\nconst isEmoji = (icon: Icon | null): icon is Emoji => {\n    if (!icon) {\n        return false;\n    }\n    return icon.type === \"emoji\";\n};\n\nconst EmojiTab = observer(() => {\n    const presenter = useIconPicker();\n    const { selectedIcon } = presenter.vm;\n\n    const onSkinToneChange = (skinTone: string) => {\n        if (isEmoji(selectedIcon)) {\n            presenter.setIcon({ ...selectedIcon, skinTone });\n        }\n    };\n\n    const onIconSelect = (icon: Icon) => {\n        presenter.setIcon(icon);\n        presenter.closeMenu();\n    };\n\n    const hasSkinToneSupport = isEmoji(selectedIcon) ? selectedIcon.skinToneSupport : false;\n\n    return (\n        <IconPickerTab\n            value={\"emoji\"}\n            label={\"Emojis\"}\n            onChange={onIconSelect}\n            actions={\n                <SkinToneSelect\n                    icon={selectedIcon}\n                    hasSkinToneSupport={hasSkinToneSupport}\n                    onChange={onSkinToneChange}\n                />\n            }\n        />\n    );\n});\n\nexport const EmojiPlugin = () => {\n    return (\n        <IconPickerConfig>\n            <IconPickerConfig.IconType name={\"emoji\"}>\n                <IconPickerConfig.IconType.Icon element={<Emoji />} />\n                <IconPickerConfig.IconType.Tab element={<EmojiTab />} />\n            </IconPickerConfig.IconType>\n        </IconPickerConfig>\n    );\n};\n"],"names":["SKIN_TONES","SkinToneSelectWrapper","props","cn","Emoji","icon","size","useIcon","SkinToneSelect","hasSkinToneSupport","onChange","open","setOpen","useState","isEmoji","IconProvider","PopoverPrimitive","skinTone","index","EmojiTab","observer","presenter","useIconPicker","selectedIcon","onSkinToneChange","onIconSelect","IconPickerTab","EmojiPlugin","IconPickerConfig"],"mappings":";;;;;;;;AAUA,MAAMA,aAAa;IAAC;IAAI;IAAa;IAAa;IAAa;IAAa;CAAY;AAExF,MAAMC,wBAAwB,CAACC,QACpB,WAAP,GACI,oBAAC;QACG,WAAWC,GACP;OAGHD,MAAM,QAAQ;AAiB3B,MAAME,QAAQ;IACV,MAAM,EAAEC,IAAI,EAAEC,IAAI,EAAE,GAAGC;IAEvB,OAAO,WAAP,GACI,oBAAC;QACG,OAAO;YACH,SAAS;YACT,OAAO,GAAGD,KAAK,EAAE,CAAC;YAClB,QAAQ,GAAGA,KAAK,EAAE,CAAC;YACnB,UAAU,GAAIA,AAAO,IAAPA,OAAY,EAAE,EAAE,CAAC;YAC/B,YAAY,GAAGA,KAAK,EAAE,CAAC;YACvB,OAAO;QACX;OAECD,KAAK,QAAQ,GAAGA,KAAK,KAAK,GAAGA,KAAK,QAAQ,GAAGA,KAAK,KAAK;AAGpE;AAQA,MAAMG,iBAAiB,CAAC,EAAEH,IAAI,EAAEI,kBAAkB,EAAEC,QAAQ,EAAuB;IAC/E,MAAM,CAACC,MAAMC,QAAQ,GAAGC,SAAS;IAEjC,IAAI,CAACR,QAAQ,CAACS,QAAQT,OAClB,OAAO,WAAP,GAAO,oBAACJ,uBAAqBA;IAGjC,IAAI,CAACQ,oBACD,OAAO,WAAP,GACI,oBAACR,uBAAqBA,MAAAA,WAAAA,GAClB,oBAACc,cAAYA;QAAC,MAAMV;QAAM,MAAM;qBAC5B,oBAACD,OAAKA;IAMtB,OAAO,WAAP,GACI,oBAACY,kBAAgBA;QAAC,MAAML;QAAM,cAAcA,CAAAA,OAAQC,QAAQD;qBACxD,oBAACK,iBAAiB,OAAO;QAAC,WAAW;qBACjC,oBAACf,uBAAqBA,MAAAA,WAAAA,GAClB,oBAACc,cAAYA;QAAC,MAAMV;QAAM,MAAM;qBAC5B,oBAACD,OAAKA,UAAAA,WAAAA,GAIlB,oBAACY,iBAAiB,OAAO,sBACrB,oBAAC;QAAI,WAAW;OACXhB,WAAW,GAAG,CAAC,CAACiB,UAAUC,QAAAA,WAAAA,GACvB,oBAAC;YACG,KAAKA;YACL,SAAS;gBACLR,SAASO;YACb;YACA,WAAW;yBAEX,oBAACF,cAAYA;YAAC,MAAM;gBAAE,GAAGV,IAAI;gBAAEY;YAAS;YAAG,MAAM;yBAC7C,oBAACb,OAAKA;AAQtC;AAKA,MAAMU,UAAU,CAACT;IACb,IAAI,CAACA,MACD,OAAO;IAEX,OAAOA,AAAc,YAAdA,KAAK,IAAI;AACpB;AAEA,MAAMc,WAAWC,SAAS;IACtB,MAAMC,YAAYC;IAClB,MAAM,EAAEC,YAAY,EAAE,GAAGF,UAAU,EAAE;IAErC,MAAMG,mBAAmB,CAACP;QACtB,IAAIH,QAAQS,eACRF,UAAU,OAAO,CAAC;YAAE,GAAGE,YAAY;YAAEN;QAAS;IAEtD;IAEA,MAAMQ,eAAe,CAACpB;QAClBgB,UAAU,OAAO,CAAChB;QAClBgB,UAAU,SAAS;IACvB;IAEA,MAAMZ,qBAAqBK,QAAQS,gBAAgBA,aAAa,eAAe,GAAG;IAElF,OAAO,WAAP,GACI,oBAACG,eAAaA;QACV,OAAO;QACP,OAAO;QACP,UAAUD;QACV,uBACI,oBAACjB,gBAAcA;YACX,MAAMe;YACN,oBAAoBd;YACpB,UAAUe;;;AAK9B;AAEO,MAAMG,cAAc,IAChB,WAAP,GACI,oBAACC,kBAAgBA,MAAAA,WAAAA,GACb,oBAACA,iBAAiB,QAAQ;QAAC,MAAM;qBAC7B,oBAACA,iBAAiB,QAAQ,CAAC,IAAI;QAAC,uBAAS,oBAACxB,OAAKA;sBAC/C,oBAACwB,iBAAiB,QAAQ,CAAC,GAAG;QAAC,uBAAS,oBAACT,UAAQA"}

package/components/IconPicker/plugins/iconsPlugin.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const SimpleIconPlugin: () => React.JSX.Element;

package/components/IconPicker/plugins/iconsPlugin.js

@@ -0,0 +1,84 @@
+import react, { useEffect, useState } from "react";
+import { observer } from "mobx-react-lite";
+import { ColorPicker, DelayedOnChange } from "@webiny/admin-ui";
+import { useIcon } from "../index.js";
+import { IconPickerTab } from "../IconPickerTab.js";
+import { useIconPicker } from "../IconPickerPresenterProvider.js";
+import { IconPickerConfig } from "../config/index.js";
+const IconSvg = ()=>{
+    const { icon, size } = useIcon();
+    return /*#__PURE__*/ react.createElement("svg", {
+        width: size,
+        height: size,
+        viewBox: `0 0 ${icon.width || 512} 512`,
+        color: icon?.color || "inherit",
+        dangerouslySetInnerHTML: {
+            __html: icon.value || ""
+        },
+        style: {
+            verticalAlign: "middle",
+            width: "100%",
+            height: "100%"
+        }
+    });
+};
+const IconColorPicker = ({ color, onChange })=>/*#__PURE__*/ react.createElement(DelayedOnChange, {
+        value: color,
+        onChange: onChange
+    }, ({ value, onChange })=>/*#__PURE__*/ react.createElement(ColorPicker, {
+            align: "end",
+            value: value,
+            onChange: onChange
+        }));
+const isSimpleIcon = (icon)=>{
+    if (!icon) return false;
+    return "icon" === icon.type;
+};
+const IconTab = observer(()=>{
+    const presenter = useIconPicker();
+    const { selectedIcon } = presenter.vm;
+    const [color, setColor] = useState("inherit");
+    useEffect(()=>{
+        if ("inherit" === color && isSimpleIcon(selectedIcon)) setColor(selectedIcon.color);
+    }, [
+        selectedIcon
+    ]);
+    const onColorChange = (color)=>{
+        setColor(color);
+        if (isSimpleIcon(selectedIcon)) presenter.setIcon({
+            ...selectedIcon,
+            color
+        });
+    };
+    const onIconSelect = (icon)=>{
+        presenter.setIcon({
+            ...icon,
+            color
+        });
+        presenter.closeMenu();
+    };
+    return /*#__PURE__*/ react.createElement(IconPickerTab, {
+        value: "icon",
+        label: "Icons",
+        onChange: onIconSelect,
+        cellDecorator: (cell)=>/*#__PURE__*/ react.createElement("span", {
+                style: {
+                    color
+                }
+            }, cell),
+        actions: /*#__PURE__*/ react.createElement(IconColorPicker, {
+            color: color,
+            onChange: onColorChange
+        })
+    });
+});
+const SimpleIconPlugin = ()=>/*#__PURE__*/ react.createElement(IconPickerConfig, null, /*#__PURE__*/ react.createElement(IconPickerConfig.IconType, {
+        name: "icon"
+    }, /*#__PURE__*/ react.createElement(IconPickerConfig.IconType.Icon, {
+        element: /*#__PURE__*/ react.createElement(IconSvg, null)
+    }), /*#__PURE__*/ react.createElement(IconPickerConfig.IconType.Tab, {
+        element: /*#__PURE__*/ react.createElement(IconTab, null)
+    })));
+export { SimpleIconPlugin };
+
+//# sourceMappingURL=iconsPlugin.js.map

package/components/IconPicker/plugins/iconsPlugin.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"components/IconPicker/plugins/iconsPlugin.js","sources":["../../../../src/components/IconPicker/plugins/iconsPlugin.tsx"],"sourcesContent":["import React, { useState, useEffect } from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport { DelayedOnChange, ColorPicker } from \"@webiny/admin-ui\";\n\nimport { useIcon } from \"../index.js\";\nimport { IconPickerTab } from \"../IconPickerTab.js\";\nimport { useIconPicker } from \"../IconPickerPresenterProvider.js\";\nimport { IconPickerConfig } from \"../config/index.js\";\nimport type { Icon } from \"../types.js\";\n\n/**\n * NOTE: Avoid using `@emotion/styled` in icon renderer components across all plugins.\n * This is crucial for serializing component rendering into a string value as plain HTML,\n * which is necessary for usage in the website application. Please use inline styles here\n * to ensure proper serialization.\n */\n\ninterface SimpleIcon extends Icon {\n    color: string;\n}\n\nconst IconSvg = () => {\n    const { icon, size } = useIcon<SimpleIcon>();\n\n    return (\n        <svg\n            width={size}\n            height={size}\n            viewBox={`0 0 ${icon.width || 512} 512`}\n            color={icon?.color || \"inherit\"}\n            dangerouslySetInnerHTML={{ __html: icon.value || \"\" }}\n            style={{\n                verticalAlign: \"middle\",\n                width: \"100%\",\n                height: \"100%\"\n            }}\n        />\n    );\n};\n\ninterface IconColorPickerProps {\n    color: string;\n    onChange: (value: string) => void;\n}\n\nconst IconColorPicker = ({ color, onChange }: IconColorPickerProps) => {\n    return (\n        <DelayedOnChange value={color} onChange={onChange}>\n            {({ value, onChange }) => (\n                <ColorPicker align={\"end\"} value={value} onChange={onChange} />\n            )}\n        </DelayedOnChange>\n    );\n};\n\n/**\n * @see https://www.typescriptlang.org/docs/handbook/2/narrowing.html#using-type-predicates\n */\nconst isSimpleIcon = (icon: Icon | null): icon is SimpleIcon => {\n    if (!icon) {\n        return false;\n    }\n    return icon.type === \"icon\";\n};\n\nconst IconTab = observer(() => {\n    const presenter = useIconPicker();\n    const { selectedIcon } = presenter.vm;\n\n    const [color, setColor] = useState(\"inherit\");\n\n    useEffect(() => {\n        if (color === \"inherit\" && isSimpleIcon(selectedIcon)) {\n            setColor(selectedIcon.color);\n        }\n    }, [selectedIcon]);\n\n    const onColorChange = (color: string) => {\n        setColor(color);\n\n        if (isSimpleIcon(selectedIcon)) {\n            presenter.setIcon({ ...selectedIcon, color });\n        }\n    };\n\n    const onIconSelect = (icon: Icon) => {\n        // Set icon and assign current color.\n        presenter.setIcon({ ...icon, color });\n        presenter.closeMenu();\n    };\n\n    return (\n        <IconPickerTab\n            value={\"icon\"}\n            label={\"Icons\"}\n            onChange={onIconSelect}\n            cellDecorator={cell => <span style={{ color }}>{cell}</span>}\n            actions={<IconColorPicker color={color} onChange={onColorChange} />}\n        />\n    );\n});\n\nexport const SimpleIconPlugin = () => {\n    return (\n        <IconPickerConfig>\n            <IconPickerConfig.IconType name={\"icon\"}>\n                <IconPickerConfig.IconType.Icon element={<IconSvg />} />\n                <IconPickerConfig.IconType.Tab element={<IconTab />} />\n            </IconPickerConfig.IconType>\n        </IconPickerConfig>\n    );\n};\n"],"names":["IconSvg","icon","size","useIcon","IconColorPicker","color","onChange","DelayedOnChange","value","ColorPicker","isSimpleIcon","IconTab","observer","presenter","useIconPicker","selectedIcon","setColor","useState","useEffect","onColorChange","onIconSelect","IconPickerTab","cell","SimpleIconPlugin","IconPickerConfig"],"mappings":";;;;;;;AAqBA,MAAMA,UAAU;IACZ,MAAM,EAAEC,IAAI,EAAEC,IAAI,EAAE,GAAGC;IAEvB,OAAO,WAAP,GACI,oBAAC;QACG,OAAOD;QACP,QAAQA;QACR,SAAS,CAAC,IAAI,EAAED,KAAK,KAAK,IAAI,IAAI,IAAI,CAAC;QACvC,OAAOA,MAAM,SAAS;QACtB,yBAAyB;YAAE,QAAQA,KAAK,KAAK,IAAI;QAAG;QACpD,OAAO;YACH,eAAe;YACf,OAAO;YACP,QAAQ;QACZ;;AAGZ;AAOA,MAAMG,kBAAkB,CAAC,EAAEC,KAAK,EAAEC,QAAQ,EAAwB,GACvD,WAAP,GACI,oBAACC,iBAAeA;QAAC,OAAOF;QAAO,UAAUC;OACpC,CAAC,EAAEE,KAAK,EAAEF,QAAQ,EAAE,iBACjB,oBAACG,aAAWA;YAAC,OAAO;YAAO,OAAOD;YAAO,UAAUF;;AASnE,MAAMI,eAAe,CAACT;IAClB,IAAI,CAACA,MACD,OAAO;IAEX,OAAOA,AAAc,WAAdA,KAAK,IAAI;AACpB;AAEA,MAAMU,UAAUC,SAAS;IACrB,MAAMC,YAAYC;IAClB,MAAM,EAAEC,YAAY,EAAE,GAAGF,UAAU,EAAE;IAErC,MAAM,CAACR,OAAOW,SAAS,GAAGC,SAAS;IAEnCC,UAAU;QACN,IAAIb,AAAU,cAAVA,SAAuBK,aAAaK,eACpCC,SAASD,aAAa,KAAK;IAEnC,GAAG;QAACA;KAAa;IAEjB,MAAMI,gBAAgB,CAACd;QACnBW,SAASX;QAET,IAAIK,aAAaK,eACbF,UAAU,OAAO,CAAC;YAAE,GAAGE,YAAY;YAAEV;QAAM;IAEnD;IAEA,MAAMe,eAAe,CAACnB;QAElBY,UAAU,OAAO,CAAC;YAAE,GAAGZ,IAAI;YAAEI;QAAM;QACnCQ,UAAU,SAAS;IACvB;IAEA,OAAO,WAAP,GACI,oBAACQ,eAAaA;QACV,OAAO;QACP,OAAO;QACP,UAAUD;QACV,eAAeE,CAAAA,OAAAA,WAAAA,GAAQ,oBAAC;gBAAK,OAAO;oBAAEjB;gBAAM;eAAIiB;QAChD,uBAAS,oBAAClB,iBAAeA;YAAC,OAAOC;YAAO,UAAUc;;;AAG9D;AAEO,MAAMI,mBAAmB,IACrB,WAAP,GACI,oBAACC,kBAAgBA,MAAAA,WAAAA,GACb,oBAACA,iBAAiB,QAAQ;QAAC,MAAM;qBAC7B,oBAACA,iBAAiB,QAAQ,CAAC,IAAI;QAAC,uBAAS,oBAACxB,SAAOA;sBACjD,oBAACwB,iBAAiB,QAAQ,CAAC,GAAG;QAAC,uBAAS,oBAACb,SAAOA"}

package/components/IconPicker/types.d.ts

@@ -0,0 +1,22 @@
+/**
+ * We want to have an abstract type, which does not define specifics of each possible icon (like color or skin tone).
+ */
+export type Icon = {
+    type: "icon" | "emoji" | "custom" | (string & {});
+    name: string;
+    value?: string;
+    [key: string]: any;
+};
+type IconsRow = {
+    type: "icons";
+    icons: Icon[];
+};
+type CategoryNameRow = {
+    type: "category-name";
+    name: string;
+};
+export type IconPickerGridRow = IconsRow | CategoryNameRow;
+export declare enum ICON_PICKER_SIZE {
+    SMALL = "sm"
+}
+export {};

package/components/IconPicker/types.js

@@ -0,0 +1,7 @@
+var types_ICON_PICKER_SIZE = /*#__PURE__*/ function(ICON_PICKER_SIZE) {
+    ICON_PICKER_SIZE["SMALL"] = "sm";
+    return ICON_PICKER_SIZE;
+}({});
+export { types_ICON_PICKER_SIZE as ICON_PICKER_SIZE };
+
+//# sourceMappingURL=types.js.map

package/components/IconPicker/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"components/IconPicker/types.js","sources":["../../../src/components/IconPicker/types.ts"],"sourcesContent":["/**\n * We want to have an abstract type, which does not define specifics of each possible icon (like color or skin tone).\n */\nexport type Icon = {\n    type: \"icon\" | \"emoji\" | \"custom\" | (string & {});\n    name: string;\n    value?: string;\n    [key: string]: any;\n};\n\ntype IconsRow = {\n    type: \"icons\";\n    icons: Icon[];\n};\n\ntype CategoryNameRow = {\n    type: \"category-name\";\n    name: string;\n};\n\nexport type IconPickerGridRow = IconsRow | CategoryNameRow;\n\nexport enum ICON_PICKER_SIZE {\n    SMALL = \"sm\"\n}\n"],"names":["ICON_PICKER_SIZE"],"mappings":"AAsBO,IAAKA,yBAAgBA,WAAAA,GAAAA,SAAhBA,gBAAgB;;WAAhBA"}

package/components/LexicalEditor/DefaultLexicalEditorConfig.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const DefaultLexicalEditorConfig: () => React.JSX.Element;

package/components/LexicalEditor/DefaultLexicalEditorConfig.js

@@ -0,0 +1,81 @@
+import react from "react";
+import { BoldAction, BulletListAction, CodeHighlightAction, CodeHighlightPlugin, Divider, FontColorAction, FontColorPlugin, ImageAction, ImagesPlugin, ItalicAction, LexicalEditorConfig, LinkAction, LinkPlugin, ListPlugin, NumberedListAction, QuoteAction, QuotePlugin, TextAlignmentAction, TypographyAction, TypographyPlugin, UnderlineAction } from "@webiny/lexical-editor";
+import { TypographyDropDown } from "./TypographyDropDown.js";
+const { ToolbarElement: ToolbarElement, Plugin: Plugin } = LexicalEditorConfig;
+const DefaultLexicalEditorConfig = ()=>/*#__PURE__*/ react.createElement(LexicalEditorConfig, {
+        priority: "primary"
+    }, /*#__PURE__*/ react.createElement(ToolbarElement, {
+        name: "fontColor",
+        element: /*#__PURE__*/ react.createElement(FontColorAction, null)
+    }), /*#__PURE__*/ react.createElement(ToolbarElement, {
+        name: "typography",
+        element: /*#__PURE__*/ react.createElement(TypographyAction, null)
+    }), /*#__PURE__*/ react.createElement(ToolbarElement, {
+        name: "textAlignment",
+        element: /*#__PURE__*/ react.createElement(TextAlignmentAction, null)
+    }), /*#__PURE__*/ react.createElement(ToolbarElement, {
+        name: "divider1",
+        element: /*#__PURE__*/ react.createElement(Divider, null)
+    }), /*#__PURE__*/ react.createElement(ToolbarElement, {
+        name: "boldAction",
+        element: /*#__PURE__*/ react.createElement(BoldAction, null)
+    }), /*#__PURE__*/ react.createElement(ToolbarElement, {
+        name: "italic",
+        element: /*#__PURE__*/ react.createElement(ItalicAction, null)
+    }), /*#__PURE__*/ react.createElement(ToolbarElement, {
+        name: "underline",
+        element: /*#__PURE__*/ react.createElement(UnderlineAction, null)
+    }), /*#__PURE__*/ react.createElement(ToolbarElement, {
+        name: "codeHighlight",
+        element: /*#__PURE__*/ react.createElement(CodeHighlightAction, null)
+    }), /*#__PURE__*/ react.createElement(ToolbarElement, {
+        name: "divider2",
+        element: /*#__PURE__*/ react.createElement(Divider, null)
+    }), /*#__PURE__*/ react.createElement(ToolbarElement, {
+        name: "numberedList",
+        element: /*#__PURE__*/ react.createElement(NumberedListAction, null)
+    }), /*#__PURE__*/ react.createElement(ToolbarElement, {
+        name: "bulletList",
+        element: /*#__PURE__*/ react.createElement(BulletListAction, null)
+    }), /*#__PURE__*/ react.createElement(ToolbarElement, {
+        name: "divider",
+        element: /*#__PURE__*/ react.createElement(Divider, null)
+    }), /*#__PURE__*/ react.createElement(ToolbarElement, {
+        name: "image",
+        element: /*#__PURE__*/ react.createElement(ImageAction, null)
+    }), /*#__PURE__*/ react.createElement(ToolbarElement, {
+        name: "divider3",
+        element: /*#__PURE__*/ react.createElement(Divider, null)
+    }), /*#__PURE__*/ react.createElement(ToolbarElement, {
+        name: "link",
+        element: /*#__PURE__*/ react.createElement(LinkAction, null)
+    }), /*#__PURE__*/ react.createElement(ToolbarElement, {
+        name: "quote",
+        element: /*#__PURE__*/ react.createElement(QuoteAction, null)
+    }), /*#__PURE__*/ react.createElement(Plugin, {
+        name: "fontColor",
+        element: /*#__PURE__*/ react.createElement(FontColorPlugin, null)
+    }), /*#__PURE__*/ react.createElement(Plugin, {
+        name: "list",
+        element: /*#__PURE__*/ react.createElement(ListPlugin, null)
+    }), /*#__PURE__*/ react.createElement(Plugin, {
+        name: "codeHighlight",
+        element: /*#__PURE__*/ react.createElement(CodeHighlightPlugin, null)
+    }), /*#__PURE__*/ react.createElement(Plugin, {
+        name: "typography",
+        element: /*#__PURE__*/ react.createElement(TypographyPlugin, null)
+    }), /*#__PURE__*/ react.createElement(Plugin, {
+        name: "link",
+        element: /*#__PURE__*/ react.createElement(LinkPlugin, null)
+    }), /*#__PURE__*/ react.createElement(Plugin, {
+        name: "images",
+        element: /*#__PURE__*/ react.createElement(ImagesPlugin, null)
+    }), /*#__PURE__*/ react.createElement(Plugin, {
+        name: "quote",
+        element: /*#__PURE__*/ react.createElement(QuotePlugin, null)
+    }), /*#__PURE__*/ react.createElement(TypographyAction.TypographyDropDown, {
+        element: /*#__PURE__*/ react.createElement(TypographyDropDown, null)
+    }));
+export { DefaultLexicalEditorConfig };
+
+//# sourceMappingURL=DefaultLexicalEditorConfig.js.map

package/components/LexicalEditor/DefaultLexicalEditorConfig.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"components/LexicalEditor/DefaultLexicalEditorConfig.js","sources":["../../../src/components/LexicalEditor/DefaultLexicalEditorConfig.tsx"],"sourcesContent":["import React from \"react\";\nimport {\n    TypographyAction,\n    LexicalEditorConfig,\n    FontColorAction,\n    Divider,\n    BoldAction,\n    ItalicAction,\n    UnderlineAction,\n    CodeHighlightAction,\n    NumberedListAction,\n    BulletListAction,\n    ImageAction,\n    LinkAction,\n    QuoteAction,\n    ImagesPlugin,\n    QuotePlugin,\n    CodeHighlightPlugin,\n    LinkPlugin,\n    ListPlugin,\n    TypographyPlugin,\n    FontColorPlugin,\n    TextAlignmentAction\n} from \"@webiny/lexical-editor\";\nimport { TypographyDropDown } from \"./TypographyDropDown.js\";\n\nconst { ToolbarElement, Plugin } = LexicalEditorConfig;\n\nexport const DefaultLexicalEditorConfig = () => {\n    return (\n        <LexicalEditorConfig priority={\"primary\"}>\n            <ToolbarElement name=\"fontColor\" element={<FontColorAction />} />\n            <ToolbarElement name=\"typography\" element={<TypographyAction />} />\n            <ToolbarElement name=\"textAlignment\" element={<TextAlignmentAction />} />\n            <ToolbarElement name=\"divider1\" element={<Divider />} />\n            <ToolbarElement name=\"boldAction\" element={<BoldAction />} />\n            <ToolbarElement name=\"italic\" element={<ItalicAction />} />\n            <ToolbarElement name=\"underline\" element={<UnderlineAction />} />\n            <ToolbarElement name=\"codeHighlight\" element={<CodeHighlightAction />} />\n            <ToolbarElement name=\"divider2\" element={<Divider />} />\n            <ToolbarElement name=\"numberedList\" element={<NumberedListAction />} />\n            <ToolbarElement name=\"bulletList\" element={<BulletListAction />} />\n            <ToolbarElement name=\"divider\" element={<Divider />} />\n            <ToolbarElement name=\"image\" element={<ImageAction />} />\n            <ToolbarElement name=\"divider3\" element={<Divider />} />\n            <ToolbarElement name=\"link\" element={<LinkAction />} />\n            <ToolbarElement name=\"quote\" element={<QuoteAction />} />\n            <Plugin name={\"fontColor\"} element={<FontColorPlugin />} />\n            <Plugin name={\"list\"} element={<ListPlugin />} />\n            <Plugin name={\"codeHighlight\"} element={<CodeHighlightPlugin />} />\n            <Plugin name={\"typography\"} element={<TypographyPlugin />} />\n            <Plugin name={\"link\"} element={<LinkPlugin />} />\n            <Plugin name={\"images\"} element={<ImagesPlugin />} />\n            <Plugin name={\"quote\"} element={<QuotePlugin />} />\n            <TypographyAction.TypographyDropDown element={<TypographyDropDown />} />\n        </LexicalEditorConfig>\n    );\n};\n"],"names":["ToolbarElement","Plugin","LexicalEditorConfig","DefaultLexicalEditorConfig","FontColorAction","TypographyAction","TextAlignmentAction","Divider","BoldAction","ItalicAction","UnderlineAction","CodeHighlightAction","NumberedListAction","BulletListAction","ImageAction","LinkAction","QuoteAction","FontColorPlugin","ListPlugin","CodeHighlightPlugin","TypographyPlugin","LinkPlugin","ImagesPlugin","QuotePlugin","TypographyDropDown"],"mappings":";;;AA0BA,MAAM,EAAEA,gBAAAA,cAAc,EAAEC,QAAAA,MAAM,EAAE,GAAGC;AAE5B,MAAMC,6BAA6B,IAC/B,WAAP,GACI,oBAACD,qBAAmBA;QAAC,UAAU;qBAC3B,oBAACF,gBAAcA;QAAC,MAAK;QAAY,uBAAS,oBAACI,iBAAeA;sBAC1D,oBAACJ,gBAAcA;QAAC,MAAK;QAAa,uBAAS,oBAACK,kBAAgBA;sBAC5D,oBAACL,gBAAcA;QAAC,MAAK;QAAgB,uBAAS,oBAACM,qBAAmBA;sBAClE,oBAACN,gBAAcA;QAAC,MAAK;QAAW,uBAAS,oBAACO,SAAOA;sBACjD,oBAACP,gBAAcA;QAAC,MAAK;QAAa,uBAAS,oBAACQ,YAAUA;sBACtD,oBAACR,gBAAcA;QAAC,MAAK;QAAS,uBAAS,oBAACS,cAAYA;sBACpD,oBAACT,gBAAcA;QAAC,MAAK;QAAY,uBAAS,oBAACU,iBAAeA;sBAC1D,oBAACV,gBAAcA;QAAC,MAAK;QAAgB,uBAAS,oBAACW,qBAAmBA;sBAClE,oBAACX,gBAAcA;QAAC,MAAK;QAAW,uBAAS,oBAACO,SAAOA;sBACjD,oBAACP,gBAAcA;QAAC,MAAK;QAAe,uBAAS,oBAACY,oBAAkBA;sBAChE,oBAACZ,gBAAcA;QAAC,MAAK;QAAa,uBAAS,oBAACa,kBAAgBA;sBAC5D,oBAACb,gBAAcA;QAAC,MAAK;QAAU,uBAAS,oBAACO,SAAOA;sBAChD,oBAACP,gBAAcA;QAAC,MAAK;QAAQ,uBAAS,oBAACc,aAAWA;sBAClD,oBAACd,gBAAcA;QAAC,MAAK;QAAW,uBAAS,oBAACO,SAAOA;sBACjD,oBAACP,gBAAcA;QAAC,MAAK;QAAO,uBAAS,oBAACe,YAAUA;sBAChD,oBAACf,gBAAcA;QAAC,MAAK;QAAQ,uBAAS,oBAACgB,aAAWA;sBAClD,oBAACf,QAAMA;QAAC,MAAM;QAAa,uBAAS,oBAACgB,iBAAeA;sBACpD,oBAAChB,QAAMA;QAAC,MAAM;QAAQ,uBAAS,oBAACiB,YAAUA;sBAC1C,oBAACjB,QAAMA;QAAC,MAAM;QAAiB,uBAAS,oBAACkB,qBAAmBA;sBAC5D,oBAAClB,QAAMA;QAAC,MAAM;QAAc,uBAAS,oBAACmB,kBAAgBA;sBACtD,oBAACnB,QAAMA;QAAC,MAAM;QAAQ,uBAAS,oBAACoB,YAAUA;sBAC1C,oBAACpB,QAAMA;QAAC,MAAM;QAAU,uBAAS,oBAACqB,cAAYA;sBAC9C,oBAACrB,QAAMA;QAAC,MAAM;QAAS,uBAAS,oBAACsB,aAAWA;sBAC5C,oBAAClB,iBAAiB,kBAAkB;QAAC,uBAAS,oBAACmB,oBAAkBA"}

package/components/LexicalEditor/LexicalEditor.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+import type { RichTextEditorProps } from "@webiny/lexical-editor/types.js";
+import { type RichTextValueWithHtml } from "./lexicalValueWithHtml.js";
+export interface LexicalEditorProps extends Omit<RichTextEditorProps, "value" | "onChange" | "theme"> {
+    value?: RichTextValueWithHtml;
+    onChange?: (value: RichTextValueWithHtml) => void;
+    theme?: RichTextEditorProps["theme"];
+}
+export declare const LexicalEditor: (props: LexicalEditorProps) => React.JSX.Element;
+export declare namespace LexicalEditor {
+    type Props = LexicalEditorProps;
+}

package/components/LexicalEditor/LexicalEditor.js

@@ -0,0 +1,48 @@
+import react, { useEffect, useMemo, useRef } from "react";
+import { FileManager } from "../index.js";
+import { RichTextEditor } from "@webiny/lexical-editor";
+import { DelayedOnChange } from "@webiny/admin-ui";
+import { useAdminConfig } from "../../config/AdminConfig.js";
+import { lexicalValueWithHtml } from "./lexicalValueWithHtml.js";
+import { lexicalValueFromHtml } from "./lexicalValueFromHtml.js";
+const imagesOnly = [
+    "image/*"
+];
+const noop = ()=>{};
+const LexicalEditor = (props)=>{
+    const { lexicalTheme } = useAdminConfig();
+    const configRef = useRef(void 0);
+    useEffect(()=>{
+        if (configRef.current && props.value?.html && !props.value.state && props.onChange) lexicalValueFromHtml(configRef, props.onChange)(props.value.html);
+    }, [
+        configRef.current,
+        props.value,
+        props.onChange
+    ]);
+    const onChange = useMemo(()=>lexicalValueWithHtml(configRef, props.onChange ?? noop), [
+        props.onChange
+    ]);
+    return /*#__PURE__*/ react.createElement(FileManager, {
+        accept: imagesOnly,
+        render: ({ showFileManager })=>/*#__PURE__*/ react.createElement(DelayedOnChange, {
+                value: props.value?.state,
+                onChange: onChange
+            }, ({ value, onChange })=>/*#__PURE__*/ react.createElement(RichTextEditor, {
+                    ...props,
+                    value: value,
+                    onChange: onChange,
+                    theme: props.theme ?? lexicalTheme,
+                    configRef: configRef,
+                    toolbarActionPlugins: [
+                        ...props.toolbarActionPlugins || [],
+                        {
+                            targetAction: "image-action",
+                            plugin: showFileManager
+                        }
+                    ]
+                }))
+    });
+};
+export { LexicalEditor };
+
+//# sourceMappingURL=LexicalEditor.js.map

package/components/LexicalEditor/LexicalEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"components/LexicalEditor/LexicalEditor.js","sources":["../../../src/components/LexicalEditor/LexicalEditor.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useRef } from \"react\";\nimport { FileManager } from \"~/components/index.js\";\nimport { RichTextEditor as BaseEditor } from \"@webiny/lexical-editor\";\nimport type { RichTextEditorProps } from \"@webiny/lexical-editor/types.js\";\nimport { DelayedOnChange } from \"@webiny/admin-ui\";\nimport { useAdminConfig } from \"~/config/AdminConfig.js\";\nimport { lexicalValueWithHtml, type RichTextValueWithHtml } from \"./lexicalValueWithHtml.js\";\nimport { lexicalValueFromHtml } from \"./lexicalValueFromHtml.js\";\n\nexport interface LexicalEditorProps extends Omit<\n    RichTextEditorProps,\n    \"value\" | \"onChange\" | \"theme\"\n> {\n    value?: RichTextValueWithHtml;\n    onChange?: (value: RichTextValueWithHtml) => void;\n    theme?: RichTextEditorProps[\"theme\"];\n}\n\nconst imagesOnly = [\"image/*\"];\nconst noop = () => {};\n\nexport const LexicalEditor = (props: LexicalEditorProps) => {\n    const { lexicalTheme } = useAdminConfig();\n    const configRef = useRef<BaseEditor.InitialConfig | undefined>(undefined);\n\n    useEffect(() => {\n        if (configRef.current && props.value?.html && !props.value.state && props.onChange) {\n            lexicalValueFromHtml(configRef, props.onChange)(props.value.html);\n        }\n    }, [configRef.current, props.value, props.onChange]);\n\n    const onChange = useMemo(() => {\n        return lexicalValueWithHtml(configRef, props.onChange ?? noop);\n    }, [props.onChange]);\n\n    return (\n        <FileManager\n            accept={imagesOnly}\n            render={({ showFileManager }) => (\n                <DelayedOnChange value={props.value?.state} onChange={onChange}>\n                    {({ value, onChange }) => (\n                        <BaseEditor\n                            {...props}\n                            value={value}\n                            onChange={onChange}\n                            theme={props.theme ?? lexicalTheme}\n                            configRef={configRef}\n                            toolbarActionPlugins={[\n                                ...(props.toolbarActionPlugins || []),\n                                { targetAction: \"image-action\", plugin: showFileManager }\n                            ]}\n                        />\n                    )}\n                </DelayedOnChange>\n            )}\n        />\n    );\n};\n\nexport namespace LexicalEditor {\n    export type Props = LexicalEditorProps;\n}\n"],"names":["imagesOnly","noop","LexicalEditor","props","lexicalTheme","useAdminConfig","configRef","useRef","undefined","useEffect","lexicalValueFromHtml","onChange","useMemo","lexicalValueWithHtml","FileManager","showFileManager","DelayedOnChange","value","BaseEditor"],"mappings":";;;;;;;AAkBA,MAAMA,aAAa;IAAC;CAAU;AAC9B,MAAMC,OAAO,KAAO;AAEb,MAAMC,gBAAgB,CAACC;IAC1B,MAAM,EAAEC,YAAY,EAAE,GAAGC;IACzB,MAAMC,YAAYC,OAA6CC;IAE/DC,UAAU;QACN,IAAIH,UAAU,OAAO,IAAIH,MAAM,KAAK,EAAE,QAAQ,CAACA,MAAM,KAAK,CAAC,KAAK,IAAIA,MAAM,QAAQ,EAC9EO,qBAAqBJ,WAAWH,MAAM,QAAQ,EAAEA,MAAM,KAAK,CAAC,IAAI;IAExE,GAAG;QAACG,UAAU,OAAO;QAAEH,MAAM,KAAK;QAAEA,MAAM,QAAQ;KAAC;IAEnD,MAAMQ,WAAWC,QAAQ,IACdC,qBAAqBP,WAAWH,MAAM,QAAQ,IAAIF,OAC1D;QAACE,MAAM,QAAQ;KAAC;IAEnB,OAAO,WAAP,GACI,oBAACW,aAAWA;QACR,QAAQd;QACR,QAAQ,CAAC,EAAEe,eAAe,EAAE,iBACxB,oBAACC,iBAAeA;gBAAC,OAAOb,MAAM,KAAK,EAAE;gBAAO,UAAUQ;eACjD,CAAC,EAAEM,KAAK,EAAEN,QAAQ,EAAE,iBACjB,oBAACO,gBAAUA;oBACN,GAAGf,KAAK;oBACT,OAAOc;oBACP,UAAUN;oBACV,OAAOR,MAAM,KAAK,IAAIC;oBACtB,WAAWE;oBACX,sBAAsB;2BACdH,MAAM,oBAAoB,IAAI,EAAE;wBACpC;4BAAE,cAAc;4BAAgB,QAAQY;wBAAgB;qBAC3D;;;AAO7B"}

package/components/LexicalEditor/LexicalLinkForm.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+import type { FloatingLinkEditorPlugin } from "@webiny/lexical-editor";
+type LexicalLinkForm = NonNullable<React.ComponentProps<typeof FloatingLinkEditorPlugin>["LinkForm"]>;
+type LinkFormProps = React.ComponentProps<LexicalLinkForm>;
+export declare const LexicalLinkForm: ({ linkData, onSave, removeLink }: LinkFormProps) => React.JSX.Element;
+export {};

package/components/LexicalEditor/LexicalLinkForm.js

@@ -0,0 +1,91 @@
+import react, { useEffect, useRef } from "react";
+import { Button, Grid, Icon, IconButton, Input, Switch } from "@webiny/admin-ui";
+import { Form, useBind } from "@webiny/form";
+import { validation } from "@webiny/validation";
+import { ReactComponent } from "@webiny/icons/language.svg";
+import { ReactComponent as open_in_new_svg_ReactComponent } from "@webiny/icons/open_in_new.svg";
+import { ReactComponent as link_off_svg_ReactComponent } from "@webiny/icons/link_off.svg";
+const LexicalLinkForm = ({ linkData, onSave, removeLink })=>{
+    const onSubmit = (data)=>{
+        onSave(data);
+    };
+    return /*#__PURE__*/ react.createElement(Form, {
+        data: linkData,
+        onSubmit: onSubmit,
+        validateOnFirstSubmit: true,
+        submitOnEnter: true
+    }, (form)=>/*#__PURE__*/ react.createElement("div", {
+            className: "p-md"
+        }, /*#__PURE__*/ react.createElement(Grid, {
+            gap: "small"
+        }, /*#__PURE__*/ react.createElement(Grid.Column, {
+            span: 12
+        }, /*#__PURE__*/ react.createElement(UrlInput, null))), /*#__PURE__*/ react.createElement("div", {
+            className: "flex w-full items-center justify-between mt-sm gap-sm"
+        }, /*#__PURE__*/ react.createElement(TargetSwitch, null), /*#__PURE__*/ react.createElement(Button, {
+            variant: "ghost",
+            size: "sm",
+            text: "Remove link",
+            className: "text-destructive-primary! [&_svg]:fill-destructive",
+            onClick: removeLink,
+            icon: /*#__PURE__*/ react.createElement(Icon, {
+                label: "Remove link",
+                icon: /*#__PURE__*/ react.createElement(link_off_svg_ReactComponent, null)
+            })
+        }), /*#__PURE__*/ react.createElement(Button, {
+            variant: "primary",
+            size: "sm",
+            text: "Save",
+            onClick: form.submit
+        }))));
+};
+const UrlInput = ()=>{
+    const inputRef = useRef(null);
+    const urlBind = useBind({
+        name: "url",
+        validators: validation.create("required,url:allowRelative:allowHref")
+    });
+    useEffect(()=>{
+        if (inputRef.current) setTimeout(()=>{
+            inputRef.current?.focus();
+        }, 10);
+    }, []);
+    const openInNewTab = ()=>{
+        if (false !== urlBind.validation.isValid && urlBind.value) window.open(urlBind.value, "_blank");
+    };
+    return /*#__PURE__*/ react.createElement(Input, {
+        ...urlBind,
+        inputRef: (ref)=>{
+            inputRef.current = ref;
+        },
+        variant: "secondary",
+        size: "md",
+        placeholder: "Enter link",
+        autoFocus: true,
+        startIcon: /*#__PURE__*/ react.createElement(Icon, {
+            label: "globe",
+            icon: /*#__PURE__*/ react.createElement(ReactComponent, null)
+        }),
+        endIcon: /*#__PURE__*/ react.createElement(IconButton, {
+            variant: "ghost",
+            icon: /*#__PURE__*/ react.createElement(open_in_new_svg_ReactComponent, null),
+            onClick: openInNewTab
+        })
+    });
+};
+const TargetSwitch = ()=>{
+    const targetBind = useBind({
+        name: "target",
+        defaultValue: "_self"
+    });
+    return /*#__PURE__*/ react.createElement(Switch, {
+        checked: "_blank" === targetBind.value,
+        label: "Open in new tab",
+        onChange: (value)=>{
+            targetBind.onChange(true === value ? "_blank" : "_self");
+        }
+    });
+};
+export { LexicalLinkForm };
+
+//# sourceMappingURL=LexicalLinkForm.js.map