@webiny/app-headless-cms 0.0.0-unstable.eb196ccd2f → 0.0.0-unstable.eb81deee7e

package/admin/components/IconPicker.js

@@ -1,17 +1,30 @@
-import React, { useMemo } from "react";
-import { IconPicker as AdminIconPicker } from "@webiny/admin-ui";
+import react, { useMemo } from "react";
+import { IconPicker } from "@webiny/admin-ui";
 import { plugins } from "@webiny/plugins";
-export const IconPicker = props => {
-  const icons = useMemo(() => {
-    const iconPlugins = plugins.byType("cms-icons");
-    return iconPlugins.reduce((icons, pl) => {
-      return icons.concat(pl.getIcons());
+const IconPicker_IconPicker = (props)=>{
+    const icons = useMemo(()=>{
+        const iconPlugins = plugins.byType("cms-icons");
+        return iconPlugins.reduce((icons, pl)=>icons.concat(pl.getIcons()), []);
     }, []);
-  }, []);
-  return /*#__PURE__*/React.createElement(AdminIconPicker, Object.assign({
-    size: "lg",
-    icons: icons
-  }, props));
+    const onChange = (value)=>{
+        if (props.onChange) {
+            if (!value) return void props.onChange(null);
+            props.onChange({
+                type: "icon",
+                name: value
+            });
+        }
+    };
+    let value = null;
+    if (props.value) value = "string" == typeof props.value ? props.value : props.value.name;
+    return /*#__PURE__*/ react.createElement(IconPicker, {
+        size: "lg",
+        icons: icons,
+        ...props,
+        onChange: onChange,
+        value: value
+    });
 };
+export { IconPicker_IconPicker as IconPicker };
 
 //# sourceMappingURL=IconPicker.js.map

package/admin/components/IconPicker.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useMemo","IconPicker","AdminIconPicker","plugins","props","icons","iconPlugins","byType","reduce","pl","concat","getIcons","createElement","Object","assign","size"],"sources":["IconPicker.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport type { IconPickerIconDto, IconPickerProps } from \"@webiny/admin-ui\";\nimport { IconPicker as AdminIconPicker } from \"@webiny/admin-ui\";\nimport { plugins } from \"@webiny/plugins\";\nimport type { CmsIconsPlugin } from \"~/types\";\n\nexport const IconPicker = (props: Omit<IconPickerProps, \"icons\">) => {\n    const icons: IconPickerIconDto[] = useMemo(() => {\n        const iconPlugins = plugins.byType<CmsIconsPlugin>(\"cms-icons\");\n        return iconPlugins.reduce((icons: Array<IconPickerIconDto>, pl) => {\n            return icons.concat(pl.getIcons());\n        }, []);\n    }, []);\n\n    return <AdminIconPicker size={\"lg\"} icons={icons} {...props} />;\n};\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,OAAO,QAAQ,OAAO;AAEtC,SAASC,UAAU,IAAIC,eAAe,QAAQ,kBAAkB;AAChE,SAASC,OAAO,QAAQ,iBAAiB;AAGzC,OAAO,MAAMF,UAAU,GAAIG,KAAqC,IAAK;EACjE,MAAMC,KAA0B,GAAGL,OAAO,CAAC,MAAM;IAC7C,MAAMM,WAAW,GAAGH,OAAO,CAACI,MAAM,CAAiB,WAAW,CAAC;IAC/D,OAAOD,WAAW,CAACE,MAAM,CAAC,CAACH,KAA+B,EAAEI,EAAE,KAAK;MAC/D,OAAOJ,KAAK,CAACK,MAAM,CAACD,EAAE,CAACE,QAAQ,CAAC,CAAC,CAAC;IACtC,CAAC,EAAE,EAAE,CAAC;EACV,CAAC,EAAE,EAAE,CAAC;EAEN,oBAAOZ,KAAA,CAAAa,aAAA,CAACV,eAAe,EAAAW,MAAA,CAAAC,MAAA;IAACC,IAAI,EAAE,IAAK;IAACV,KAAK,EAAEA;EAAM,GAAKD,KAAK,CAAG,CAAC;AACnE,CAAC","ignoreList":[]}
+{"version":3,"file":"admin/components/IconPicker.js","sources":["../../../src/admin/components/IconPicker.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport type { IconPickerIconDto, IconPickerProps } from \"@webiny/admin-ui\";\nimport { IconPicker as AdminIconPicker } from \"@webiny/admin-ui\";\nimport { plugins } from \"@webiny/plugins\";\nimport type { CmsIconsPlugin } from \"~/types.js\";\n\nexport const IconPicker = (props: Omit<IconPickerProps, \"icons\">) => {\n    const icons: IconPickerIconDto[] = useMemo(() => {\n        const iconPlugins = plugins.byType<CmsIconsPlugin>(\"cms-icons\");\n        return iconPlugins.reduce((icons: Array<IconPickerIconDto>, pl) => {\n            return icons.concat(pl.getIcons());\n        }, []);\n    }, []);\n\n    const onChange = (value: string | null) => {\n        if (props.onChange) {\n            if (!value) {\n                props.onChange(null);\n                return;\n            }\n\n            props.onChange({\n                type: \"icon\",\n                name: value\n            });\n        }\n    };\n\n    let value = null;\n    if (props.value) {\n        if (typeof props.value === \"string\") {\n            value = props.value;\n        } else {\n            value = props.value.name;\n        }\n    }\n\n    return (\n        <AdminIconPicker size={\"lg\"} icons={icons} {...props} onChange={onChange} value={value} />\n    );\n};\n"],"names":["IconPicker","props","icons","useMemo","iconPlugins","plugins","pl","onChange","value","AdminIconPicker"],"mappings":";;;AAMO,MAAMA,wBAAa,CAACC;IACvB,MAAMC,QAA6BC,QAAQ;QACvC,MAAMC,cAAcC,QAAQ,MAAM,CAAiB;QACnD,OAAOD,YAAY,MAAM,CAAC,CAACF,OAAiCI,KACjDJ,MAAM,MAAM,CAACI,GAAG,QAAQ,KAChC,EAAE;IACT,GAAG,EAAE;IAEL,MAAMC,WAAW,CAACC;QACd,IAAIP,MAAM,QAAQ,EAAE;YAChB,IAAI,CAACO,OAAO,YACRP,MAAM,QAAQ,CAAC;YAInBA,MAAM,QAAQ,CAAC;gBACX,MAAM;gBACN,MAAMO;YACV;QACJ;IACJ;IAEA,IAAIA,QAAQ;IACZ,IAAIP,MAAM,KAAK,EAEPO,QADA,AAAuB,YAAvB,OAAOP,MAAM,KAAK,GACVA,MAAM,KAAK,GAEXA,MAAM,KAAK,CAAC,IAAI;IAIhC,OAAO,WAAP,GACI,oBAACQ,YAAeA;QAAC,MAAM;QAAM,OAAOP;QAAQ,GAAGD,KAAK;QAAE,UAAUM;QAAU,OAAOC;;AAEzF"}

package/admin/components/IsModelPublishable.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+export interface IsPublishableProps {
+    children: React.ReactNode;
+}
+export declare const IsModelPublishable: (props: IsPublishableProps) => React.JSX.Element | null;

package/admin/components/IsModelPublishable.js

@@ -0,0 +1,9 @@
+import react from "react";
+import { useIsModelPublishable } from "../hooks/useIsModelPublishable.js";
+const IsModelPublishable = (props)=>{
+    const isPublishable = useIsModelPublishable();
+    return isPublishable ? /*#__PURE__*/ react.createElement(react.Fragment, null, props.children) : null;
+};
+export { IsModelPublishable };
+
+//# sourceMappingURL=IsModelPublishable.js.map

package/admin/components/IsModelPublishable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"admin/components/IsModelPublishable.js","sources":["../../../src/admin/components/IsModelPublishable.tsx"],"sourcesContent":["import React from \"react\";\nimport { useIsModelPublishable } from \"~/admin/hooks/useIsModelPublishable.js\";\n\nexport interface IsPublishableProps {\n    children: React.ReactNode;\n}\n\nexport const IsModelPublishable = (props: IsPublishableProps) => {\n    const isPublishable = useIsModelPublishable();\n\n    return isPublishable ? <>{props.children}</> : null;\n};\n"],"names":["IsModelPublishable","props","isPublishable","useIsModelPublishable"],"mappings":";;AAOO,MAAMA,qBAAqB,CAACC;IAC/B,MAAMC,gBAAgBC;IAEtB,OAAOD,gBAAgB,WAAhBA,GAAgB,0CAAGD,MAAM,QAAQ,IAAO;AACnD"}

package/admin/components/LexicalCmsEditor/LexicalEditor.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { LexicalEditor as BaseLexicalEditor } from "@webiny/app-admin";
+export type LexicalEditorProps = Omit<BaseLexicalEditor.Props, "theme">;
+export declare const LexicalEditor: (props: LexicalEditorProps) => React.JSX.Element;

package/admin/components/LexicalCmsEditor/LexicalEditor.js

@@ -0,0 +1,38 @@
+import react from "react";
+import { StaticToolbar } from "@webiny/lexical-editor";
+import { LexicalEditor } from "@webiny/app-admin";
+const placeholderStyles = {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    padding: "8px 12px",
+    marginTop: 0,
+    color: "var(--text-color-neutral-muted)"
+};
+const contentEditableStyles = {
+    minHeight: 200,
+    display: "block",
+    padding: "8px 12px"
+};
+const styles = {
+    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
+};
+const toolbar = /*#__PURE__*/ react.createElement(StaticToolbar, null);
+const LexicalEditor_LexicalEditor = (props)=>/*#__PURE__*/ react.createElement(LexicalEditor, {
+        ...props,
+        focus: true,
+        staticToolbar: toolbar,
+        tag: "p",
+        placeholder: props?.placeholder || "Enter your text here...",
+        placeholderStyles: placeholderStyles,
+        contentEditableStyles: contentEditableStyles,
+        styles: styles
+    });
+export { LexicalEditor_LexicalEditor as LexicalEditor };
+
+//# sourceMappingURL=LexicalEditor.js.map

package/admin/components/LexicalCmsEditor/LexicalEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"admin/components/LexicalCmsEditor/LexicalEditor.js","sources":["../../../../src/admin/components/LexicalCmsEditor/LexicalEditor.tsx"],"sourcesContent":["import React from \"react\";\nimport { StaticToolbar } from \"@webiny/lexical-editor\";\nimport { LexicalEditor as BaseLexicalEditor } 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 sits directly above and carries the top border, so the body\n    // drops its top border and rounds only the bottom corners — together one seamless\n    // rounded container, no internal divider (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};\n\nconst toolbar = <StaticToolbar />;\n\nexport type LexicalEditorProps = Omit<BaseLexicalEditor.Props, \"theme\">;\n\nexport const LexicalEditor = (props: LexicalEditorProps) => {\n    return (\n        <BaseLexicalEditor\n            {...props}\n            focus={true}\n            staticToolbar={toolbar}\n            tag={\"p\"}\n            placeholder={props?.placeholder || \"Enter your text here...\"}\n            placeholderStyles={placeholderStyles}\n            contentEditableStyles={contentEditableStyles}\n            styles={styles}\n        />\n    );\n};\n"],"names":["placeholderStyles","contentEditableStyles","styles","toolbar","StaticToolbar","LexicalEditor","props","BaseLexicalEditor"],"mappings":";;;AAOA,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;IAIR,WAAW;IACX,cAAc;IAEd,WAAW;IACX,WAAW;AACf;AAEA,MAAMC,UAAU,WAAHA,GAAG,oBAACC,eAAaA;AAIvB,MAAMC,8BAAgB,CAACC,QACnB,WAAP,GACI,oBAACC,eAAiBA;QACb,GAAGD,KAAK;QACT,OAAO;QACP,eAAeH;QACf,KAAK;QACL,aAAaG,OAAO,eAAe;QACnC,mBAAmBN;QACnB,uBAAuBC;QACvB,QAAQC"}

package/admin/components/LexicalCmsEditor/LexicalEditorCmsPlugin.js

@@ -1,94 +1,85 @@
-import React from "react";
-import { TypographyAction, LexicalEditorConfig, FontSizeAction, FontColorAction, Divider, BoldAction, ItalicAction, UnderlineAction, CodeHighlightAction, NumberedListAction, BulletListAction, ImageAction, LinkAction, QuoteAction, ImagesPlugin, QuotePlugin, CodeHighlightPlugin, FloatingLinkEditorPlugin, LinkPlugin, ListPlugin, TypographyPlugin, FontColorPlugin, TextAlignmentAction } from "@webiny/lexical-editor";
-import { TypographyDropDown } from "./TypographyDropDown";
+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";
 import { CompositionScope } from "@webiny/react-composition";
-const {
-  ToolbarElement,
-  Plugin
-} = LexicalEditorConfig;
-export const LexicalEditorCmsPlugin = () => {
-  return /*#__PURE__*/React.createElement(CompositionScope, {
-    name: "cms"
-  }, /*#__PURE__*/React.createElement(LexicalEditorConfig, null, /*#__PURE__*/React.createElement(ToolbarElement, {
-    name: "fontSize",
-    element: /*#__PURE__*/React.createElement(FontSizeAction, null)
-  }), /*#__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: "floatingLinkEditor",
-    element: /*#__PURE__*/React.createElement(FloatingLinkEditorPlugin, {
-      anchorElem: () => document.body
-    })
-  }), /*#__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)
-  })));
-};
+const { ToolbarElement: ToolbarElement, Plugin: Plugin } = LexicalEditorConfig;
+const LexicalEditorCmsPlugin = ()=>/*#__PURE__*/ react.createElement(CompositionScope, {
+        name: "cms",
+        inherit: true
+    }, /*#__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 { LexicalEditorCmsPlugin };
 
 //# sourceMappingURL=LexicalEditorCmsPlugin.js.map

package/admin/components/LexicalCmsEditor/LexicalEditorCmsPlugin.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","TypographyAction","LexicalEditorConfig","FontSizeAction","FontColorAction","Divider","BoldAction","ItalicAction","UnderlineAction","CodeHighlightAction","NumberedListAction","BulletListAction","ImageAction","LinkAction","QuoteAction","ImagesPlugin","QuotePlugin","CodeHighlightPlugin","FloatingLinkEditorPlugin","LinkPlugin","ListPlugin","TypographyPlugin","FontColorPlugin","TextAlignmentAction","TypographyDropDown","CompositionScope","ToolbarElement","Plugin","LexicalEditorCmsPlugin","createElement","name","element","anchorElem","document","body"],"sources":["LexicalEditorCmsPlugin.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport React from \"react\";\nimport {\n    TypographyAction,\n    LexicalEditorConfig,\n    FontSizeAction,\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    FloatingLinkEditorPlugin,\n    LinkPlugin,\n    ListPlugin,\n    TypographyPlugin,\n    FontColorPlugin,\n    TextAlignmentAction\n} from \"@webiny/lexical-editor\";\nimport { TypographyDropDown } from \"~/admin/components/LexicalCmsEditor/TypographyDropDown\";\nimport { CompositionScope } from \"@webiny/react-composition\";\n\nconst { ToolbarElement, Plugin } = LexicalEditorConfig;\n\nexport const LexicalEditorCmsPlugin: FC = () => {\n    return (\n        <CompositionScope name={\"cms\"}>\n            <LexicalEditorConfig>\n                <ToolbarElement name=\"fontSize\" element={<FontSizeAction />} />\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\n                    name={\"floatingLinkEditor\"}\n                    element={<FloatingLinkEditorPlugin anchorElem={() => document.body} />}\n                />\n                <Plugin name={\"images\"} element={<ImagesPlugin />} />\n                <Plugin name={\"quote\"} element={<QuotePlugin />} />\n                <TypographyAction.TypographyDropDown element={<TypographyDropDown />} />\n            </LexicalEditorConfig>\n        </CompositionScope>\n    );\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"admin/components/LexicalCmsEditor/LexicalEditorCmsPlugin.js","sources":["../../../../src/admin/components/LexicalCmsEditor/LexicalEditorCmsPlugin.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport 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 \"~/admin/components/LexicalCmsEditor/TypographyDropDown.js\";\nimport { CompositionScope } from \"@webiny/react-composition\";\n\nconst { ToolbarElement, Plugin } = LexicalEditorConfig;\n\nexport const LexicalEditorCmsPlugin: FC = () => {\n    return (\n        <CompositionScope name={\"cms\"} inherit={true}>\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        </CompositionScope>\n    );\n};\n"],"names":["ToolbarElement","Plugin","LexicalEditorConfig","LexicalEditorCmsPlugin","CompositionScope","FontColorAction","TypographyAction","TextAlignmentAction","Divider","BoldAction","ItalicAction","UnderlineAction","CodeHighlightAction","NumberedListAction","BulletListAction","ImageAction","LinkAction","QuoteAction","FontColorPlugin","ListPlugin","CodeHighlightPlugin","TypographyPlugin","LinkPlugin","ImagesPlugin","QuotePlugin","TypographyDropDown"],"mappings":";;;;AA4BA,MAAM,EAAEA,gBAAAA,cAAc,EAAEC,QAAAA,MAAM,EAAE,GAAGC;AAE5B,MAAMC,yBAA6B,IAC/B,WAAP,GACI,oBAACC,kBAAgBA;QAAC,MAAM;QAAO,SAAS;qBACpC,oBAACF,qBAAmBA;QAAC,UAAU;qBAC3B,oBAACF,gBAAcA;QAAC,MAAK;QAAY,uBAAS,oBAACK,iBAAeA;sBAC1D,oBAACL,gBAAcA;QAAC,MAAK;QAAa,uBAAS,oBAACM,kBAAgBA;sBAC5D,oBAACN,gBAAcA;QAAC,MAAK;QAAgB,uBAAS,oBAACO,qBAAmBA;sBAClE,oBAACP,gBAAcA;QAAC,MAAK;QAAW,uBAAS,oBAACQ,SAAOA;sBACjD,oBAACR,gBAAcA;QAAC,MAAK;QAAa,uBAAS,oBAACS,YAAUA;sBACtD,oBAACT,gBAAcA;QAAC,MAAK;QAAS,uBAAS,oBAACU,cAAYA;sBACpD,oBAACV,gBAAcA;QAAC,MAAK;QAAY,uBAAS,oBAACW,iBAAeA;sBAC1D,oBAACX,gBAAcA;QAAC,MAAK;QAAgB,uBAAS,oBAACY,qBAAmBA;sBAClE,oBAACZ,gBAAcA;QAAC,MAAK;QAAW,uBAAS,oBAACQ,SAAOA;sBACjD,oBAACR,gBAAcA;QAAC,MAAK;QAAe,uBAAS,oBAACa,oBAAkBA;sBAChE,oBAACb,gBAAcA;QAAC,MAAK;QAAa,uBAAS,oBAACc,kBAAgBA;sBAC5D,oBAACd,gBAAcA;QAAC,MAAK;QAAU,uBAAS,oBAACQ,SAAOA;sBAChD,oBAACR,gBAAcA;QAAC,MAAK;QAAQ,uBAAS,oBAACe,aAAWA;sBAClD,oBAACf,gBAAcA;QAAC,MAAK;QAAW,uBAAS,oBAACQ,SAAOA;sBACjD,oBAACR,gBAAcA;QAAC,MAAK;QAAO,uBAAS,oBAACgB,YAAUA;sBAChD,oBAAChB,gBAAcA;QAAC,MAAK;QAAQ,uBAAS,oBAACiB,aAAWA;sBAClD,oBAAChB,QAAMA;QAAC,MAAM;QAAa,uBAAS,oBAACiB,iBAAeA;sBACpD,oBAACjB,QAAMA;QAAC,MAAM;QAAQ,uBAAS,oBAACkB,YAAUA;sBAC1C,oBAAClB,QAAMA;QAAC,MAAM;QAAiB,uBAAS,oBAACmB,qBAAmBA;sBAC5D,oBAACnB,QAAMA;QAAC,MAAM;QAAc,uBAAS,oBAACoB,kBAAgBA;sBACtD,oBAACpB,QAAMA;QAAC,MAAM;QAAQ,uBAAS,oBAACqB,YAAUA;sBAC1C,oBAACrB,QAAMA;QAAC,MAAM;QAAU,uBAAS,oBAACsB,cAAYA;sBAC9C,oBAACtB,QAAMA;QAAC,MAAM;QAAS,uBAAS,oBAACuB,aAAWA;sBAC5C,oBAAClB,iBAAiB,kBAAkB;QAAC,uBAAS,oBAACmB,oBAAkBA"}

package/admin/components/LexicalCmsEditor/TypographyDropDown.d.ts

@@ -1,2 +1,8 @@
 import React from "react";
+export type TypographyStyle = {
+    id: string;
+    label: string;
+    tag: string;
+    className: string;
+};
 export declare const TypographyDropDown: () => React.JSX.Element;

package/admin/components/LexicalCmsEditor/TypographyDropDown.js

@@ -1,90 +1,61 @@
-import React, { useEffect, useState } from "react";
+import react, { useEffect, useState } from "react";
 import { $getNearestNodeOfType } from "@lexical/utils";
-import { DropDown, DropDownItem, useCurrentSelection, useCurrentElement, useTypographyAction } from "@webiny/lexical-editor";
-import { $isHeadingNode, $isParagraphNode, $isQuoteNode, $isListNode, ListNode } from "@webiny/lexical-nodes";
-import { useTheme } from "@webiny/app-admin";
-export const TypographyDropDown = () => {
-  const {
-    value,
-    applyTypography
-  } = useTypographyAction();
-  const {
-    theme
-  } = useTheme();
-  const [styles, setStyles] = useState([]);
-  const {
-    element
-  } = useCurrentElement();
-  const {
-    rangeSelection
-  } = useCurrentSelection();
-  const getAllTextStyles = () => {
-    if (!theme?.styles.typography) {
-      return [];
-    }
-    const headingsStyles = theme.styles.typography?.headings || [];
-    const paragraphStyles = theme.styles.typography?.paragraphs || [];
-    return [...headingsStyles, ...paragraphStyles];
-  };
-  useEffect(() => {
-    // In static toolbar typography, styles always need to be visible.
-    if (theme?.styles) {
-      setStyles(getAllTextStyles());
-    }
-  }, [theme?.styles]);
-  const getListStyles = tag => {
-    const listStyles = theme?.styles.typography.lists?.filter(x => x.tag === tag) || [];
-    if (listStyles.length > 0) {
-      return listStyles;
-    }
-    const fallbackTag = tag === "ul" ? "ol" : "ul";
-    return theme?.styles.typography.lists?.filter(x => x.tag === fallbackTag) || [];
-  };
-  useEffect(() => {
-    if (!element || !rangeSelection) {
-      return;
-    }
-    if ($isParagraphNode(element) || $isHeadingNode(element)) {
-      setStyles(getAllTextStyles());
-    } else if ($isListNode(element)) {
-      let type;
-      try {
-        const anchorNode = rangeSelection.anchor.getNode();
-        const parentList = $getNearestNodeOfType(anchorNode, ListNode);
-        if (parentList) {
-          type = parentList.getListType();
-        }
-      } catch {
-        type = element.getListType();
-      }
-      if (type === "bullet") {
-        setStyles(getListStyles("ul"));
-      } else {
-        setStyles(getListStyles("ol"));
-      }
-    } else if ($isQuoteNode(element)) {
-      setStyles(theme?.styles.typography?.quotes || []);
-    } else {
-      setStyles([]);
-    }
-  }, [element]);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, !!styles?.length ? /*#__PURE__*/React.createElement(DropDown, {
-    buttonClassName: "toolbar-item typography-dropdown",
-    buttonAriaLabel: "Typography formatting options",
-    buttonLabel: value?.name || "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" : ""}`,
-    onClick: () => applyTypography({
-      ...option,
-      css: option.styles
-    }),
-    key: option.id
-  }, /*#__PURE__*/React.createElement("span", {
-    className: "text"
-  }, option.name)))) : null);
+import { DropDown, DropDownItem, useCurrentElement, useCurrentSelection, useTypographyAction } from "@webiny/lexical-editor";
+import { $isHeadingNode, $isListNode, $isParagraphNode, $isQuoteNode, ListNode } from "@webiny/lexical-nodes";
+import { useAdminConfig } from "@webiny/app-admin";
+const TypographyDropDown = ()=>{
+    const { value, applyTypography } = useTypographyAction();
+    const { lexicalTheme } = useAdminConfig();
+    const [styles, setStyles] = useState([]);
+    const { element } = useCurrentElement();
+    const { rangeSelection } = useCurrentSelection();
+    const getAllTextStyles = ()=>{
+        const headingsStyles = lexicalTheme.typography.headings || [];
+        const paragraphStyles = lexicalTheme.typography.paragraphs || [];
+        return [
+            ...headingsStyles,
+            ...paragraphStyles
+        ];
+    };
+    const getListStyles = (tag)=>{
+        const listStyles = lexicalTheme.typography.lists?.filter((x)=>x.tag === tag) || [];
+        if (listStyles.length > 0) return listStyles;
+        const fallbackTag = "ul" === tag ? "ol" : "ul";
+        return lexicalTheme.typography.lists?.filter((x)=>x.tag === fallbackTag) || [];
+    };
+    useEffect(()=>{
+        if (!element || !rangeSelection) return;
+        if ($isParagraphNode(element) || $isHeadingNode(element)) setStyles(getAllTextStyles());
+        else if ($isListNode(element)) {
+            let type;
+            try {
+                const anchorNode = rangeSelection.anchor.getNode();
+                const parentList = $getNearestNodeOfType(anchorNode, ListNode);
+                if (parentList) type = parentList.getListType();
+            } catch  {
+                type = element.getListType();
+            }
+            "bullet" === type ? setStyles(getListStyles("ul")) : setStyles(getListStyles("ol"));
+        } else $isQuoteNode(element) ? setStyles(lexicalTheme.typography.quotes || []) : setStyles([]);
+    }, [
+        element
+    ]);
+    return /*#__PURE__*/ react.createElement(react.Fragment, null, styles?.length ? /*#__PURE__*/ react.createElement(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",
+            selected: value?.id === option.id,
+            onClick: ()=>applyTypography(option),
+            key: option.id
+        }, /*#__PURE__*/ react.createElement("span", {
+            className: "text"
+        }, option.label)))) : null);
 };
+export { TypographyDropDown };
 
 //# sourceMappingURL=TypographyDropDown.js.map

package/admin/components/LexicalCmsEditor/TypographyDropDown.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useEffect","useState","$getNearestNodeOfType","DropDown","DropDownItem","useCurrentSelection","useCurrentElement","useTypographyAction","$isHeadingNode","$isParagraphNode","$isQuoteNode","$isListNode","ListNode","useTheme","TypographyDropDown","value","applyTypography","theme","styles","setStyles","element","rangeSelection","getAllTextStyles","typography","headingsStyles","headings","paragraphStyles","paragraphs","getListStyles","tag","listStyles","lists","filter","x","length","fallbackTag","type","anchorNode","anchor","getNode","parentList","getListType","quotes","createElement","Fragment","buttonClassName","buttonAriaLabel","buttonLabel","name","stopCloseOnClickSelf","disabled","showScroll","map","option","className","id","onClick","css","key"],"sources":["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 type { TypographyStyle } from \"@webiny/theme/types\";\nimport type { TypographyValue } from \"@webiny/lexical-theme\";\nimport { useTheme } from \"@webiny/app-admin\";\n\nexport const TypographyDropDown = () => {\n    const { value, applyTypography } = useTypographyAction();\n    const { theme } = useTheme();\n    const [styles, setStyles] = useState<TypographyStyle[]>([]);\n    const { element } = useCurrentElement();\n    const { rangeSelection } = useCurrentSelection();\n\n    const getAllTextStyles = (): TypographyStyle[] => {\n        if (!theme?.styles.typography) {\n            return [];\n        }\n        const headingsStyles = theme.styles.typography?.headings || [];\n        const paragraphStyles = theme.styles.typography?.paragraphs || [];\n        return [...headingsStyles, ...paragraphStyles];\n    };\n\n    useEffect(() => {\n        // In static toolbar typography, styles always need to be visible.\n        if (theme?.styles) {\n            setStyles(getAllTextStyles());\n        }\n    }, [theme?.styles]);\n\n    const getListStyles = (tag: string): TypographyStyle[] => {\n        const listStyles = theme?.styles.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?.styles.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?.styles.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?.name || \"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={() =>\n                                applyTypography({\n                                    ...option,\n                                    css: option.styles\n                                } as TypographyValue)\n                            }\n                            key={option.id}\n                        >\n                            <span className=\"text\">{option.name}</span>\n                        </DropDownItem>\n                    ))}\n                </DropDown>\n            ) : null}\n        </>\n    );\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"admin/components/LexicalCmsEditor/TypographyDropDown.js","sources":["../../../../src/admin/components/LexicalCmsEditor/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 { useAdminConfig } from \"@webiny/app-admin\";\n\nexport type TypographyStyle = {\n    id: string;\n    label: string;\n    tag: string;\n    className: string;\n};\n\nexport const TypographyDropDown = () => {\n    const { value, applyTypography } = useTypographyAction();\n    const { lexicalTheme } = useAdminConfig();\n\n    const [styles, setStyles] = useState<TypographyStyle[]>([]);\n    const { element } = useCurrentElement();\n    const { rangeSelection } = useCurrentSelection();\n\n    const getAllTextStyles = (): TypographyStyle[] => {\n        const headingsStyles = lexicalTheme.typography.headings || [];\n        const paragraphStyles = lexicalTheme.typography.paragraphs || [];\n\n        return [...headingsStyles, ...paragraphStyles];\n    };\n\n    const getListStyles = (tag: string): TypographyStyle[] => {\n        const listStyles = lexicalTheme.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 lexicalTheme.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(lexicalTheme.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","lexicalTheme","useAdminConfig","styles","setStyles","useState","element","useCurrentElement","rangeSelection","useCurrentSelection","getAllTextStyles","headingsStyles","paragraphStyles","getListStyles","tag","listStyles","x","fallbackTag","useEffect","$isParagraphNode","$isHeadingNode","$isListNode","type","anchorNode","parentList","$getNearestNodeOfType","ListNode","$isQuoteNode","DropDown","option","DropDownItem"],"mappings":";;;;;AAyBO,MAAMA,qBAAqB;IAC9B,MAAM,EAAEC,KAAK,EAAEC,eAAe,EAAE,GAAGC;IACnC,MAAM,EAAEC,YAAY,EAAE,GAAGC;IAEzB,MAAM,CAACC,QAAQC,UAAU,GAAGC,SAA4B,EAAE;IAC1D,MAAM,EAAEC,OAAO,EAAE,GAAGC;IACpB,MAAM,EAAEC,cAAc,EAAE,GAAGC;IAE3B,MAAMC,mBAAmB;QACrB,MAAMC,iBAAiBV,aAAa,UAAU,CAAC,QAAQ,IAAI,EAAE;QAC7D,MAAMW,kBAAkBX,aAAa,UAAU,CAAC,UAAU,IAAI,EAAE;QAEhE,OAAO;eAAIU;eAAmBC;SAAgB;IAClD;IAEA,MAAMC,gBAAgB,CAACC;QACnB,MAAMC,aAAad,aAAa,UAAU,CAAC,KAAK,EAAE,OAAOe,CAAAA,IAAKA,EAAE,GAAG,KAAKF,QAAQ,EAAE;QAClF,IAAIC,WAAW,MAAM,GAAG,GACpB,OAAOA;QAGX,MAAME,cAAcH,AAAQ,SAARA,MAAe,OAAO;QAC1C,OAAOb,aAAa,UAAU,CAAC,KAAK,EAAE,OAAOe,CAAAA,IAAKA,EAAE,GAAG,KAAKC,gBAAgB,EAAE;IAClF;IAEAC,UAAU;QACN,IAAI,CAACZ,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,UAAUS,cAAc,SAExBT,UAAUS,cAAc;QAEhC,OAAWc,aAAarB,WACpBF,UAAUH,aAAa,UAAU,CAAC,MAAM,IAAI,EAAE,IAE9CG,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"}