@webiny/lexical-editor 5.39.1-beta.0 → 5.39.1

package/components/Editor/RichTextEditor.d.ts

@@ -28,7 +28,4 @@ export interface RichTextEditorProps {
 /**
  * @description Main editor container
  */
-export declare const RichTextEditor: React.FunctionComponent<RichTextEditorProps> & {
-    original: React.ComponentType<RichTextEditorProps>;
-    originalName: string;
-};
+export declare const RichTextEditor: import("@webiny/react-composition").DecoratableComponent<(props: RichTextEditorProps) => JSX.Element | null>;

package/components/Editor/RichTextEditor.js

@@ -162,7 +162,7 @@ var BaseRichTextEditor = function BaseRichTextEditor(_ref) {
 /**
  * @description Main editor container
  */
-var RichTextEditor = (0, _reactComposition.makeComposable)("RichTextEditor", function (props) {
+var RichTextEditor = (0, _reactComposition.makeDecoratable)("RichTextEditor", function (props) {
   return /*#__PURE__*/_react.default.createElement(_LexicalEditorConfig.LexicalEditorWithConfig, null, /*#__PURE__*/_react.default.createElement(_RichTextEditorContext.RichTextEditorProvider, null, /*#__PURE__*/_react.default.createElement(_react2.ClassNames, null, function (_ref2) {
     var css = _ref2.css;
     var themeEmotionMap = props?.themeEmotionMap ?? (0, _lexicalTheme.toTypographyEmotionMap)(css, props.theme, props.themeStylesTransformer);

package/components/Editor/RichTextEditor.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_react2","_LexicalComposer","_LexicalOnChangePlugin","_LexicalAutoFocusPlugin","_LexicalClearEditorPlugin","_LexicalRichTextPlugin","_LexicalErrorBoundary","_interopRequireDefault","_reactComposition","_LexicalHistoryPlugin","_LexicalContentEditable","_RichTextEditorContext","_isValidLexicalData","_LexicalUpdateStatePlugin","_BlurEventPlugin","_Placeholder","_generateInitialLexicalValue","_lexicalTheme","_lexicalNodes","_SharedHistoryContext","_useRichTextEditor2","_LexicalEditorConfig","BaseRichTextEditor","_ref","toolbar","staticToolbar","onChange","value","nodes","placeholder","children","onBlur","focus","styles","width","height","theme","themeEmotionMap","toolbarActionPlugins","contentEditableStyles","placeholderStyles","editorTheme","useRef","createTheme","config","useLexicalEditorConfig","_useSharedHistoryCont","useSharedHistoryContext","historyState","placeholderElem","default","createElement","Placeholder","scrollRef","_useState","useState","undefined","_useState2","_slicedToArray2","floatingAnchorElem","setFloatingAnchorElem","_useRichTextEditor","useRichTextEditor","setTheme","setThemeEmotionMap","setToolbarActionPlugins","useEffect","onRef","_floatingAnchorElem","sizeStyle","configNodes","map","node","configPlugins","plugins","plugin","Fragment","key","name","element","editorValue","isValidLexicalData","generateInitialLexicalValue","initialConfig","editorState","namespace","onError","concat","_toConsumableArray2","allNodes","_objectSpread2","current","emotionMap","handleOnChange","editor","read","getEditorState","JSON","stringify","toJSON","LexicalComposer","length","className","ref","style","overflow","position","OnChangePlugin","UpdateStatePlugin","ClearEditorPlugin","HistoryPlugin","externalHistoryState","BlurEventPlugin","AutoFocusPlugin","RichTextPlugin","contentEditable","ContentEditable","outline","ErrorBoundary","LexicalErrorBoundary","RichTextEditor","makeComposable","props","LexicalEditorWithConfig","RichTextEditorProvider","ClassNames","_ref2","css","toTypographyEmotionMap","themeStylesTransformer","SharedHistoryContext","Object","assign","exports"],"sources":["RichTextEditor.tsx"],"sourcesContent":["import React, { Fragment, useEffect, useRef, useState } from \"react\";\nimport { ClassNames, CSSObject } from \"@emotion/react\";\nimport { Klass, LexicalEditor, LexicalNode } from \"lexical\";\nimport { EditorState } from \"lexical/LexicalEditorState\";\nimport { LexicalComposer } from \"@lexical/react/LexicalComposer\";\nimport { OnChangePlugin } from \"@lexical/react/LexicalOnChangePlugin\";\nimport { AutoFocusPlugin } from \"@lexical/react/LexicalAutoFocusPlugin\";\nimport { ClearEditorPlugin } from \"@lexical/react/LexicalClearEditorPlugin\";\nimport { RichTextPlugin } from \"@lexical/react/LexicalRichTextPlugin\";\nimport LexicalErrorBoundary from \"@lexical/react/LexicalErrorBoundary\";\nimport { makeComposable } from \"@webiny/react-composition\";\nimport { HistoryPlugin } from \"@lexical/react/LexicalHistoryPlugin\";\nimport { ContentEditable } from \"@lexical/react/LexicalContentEditable\";\nimport { RichTextEditorProvider } from \"~/context/RichTextEditorContext\";\nimport { isValidLexicalData } from \"~/utils/isValidLexicalData\";\nimport { UpdateStatePlugin } from \"~/plugins/LexicalUpdateStatePlugin\";\nimport { BlurEventPlugin } from \"~/plugins/BlurEventPlugin/BlurEventPlugin\";\nimport { LexicalValue, ToolbarActionPlugin } from \"~/types\";\nimport { Placeholder } from \"~/ui/Placeholder\";\nimport { generateInitialLexicalValue } from \"~/utils/generateInitialLexicalValue\";\nimport {\n    createTheme,\n    WebinyTheme,\n    ThemeEmotionMap,\n    toTypographyEmotionMap\n} from \"@webiny/lexical-theme\";\nimport { allNodes } from \"@webiny/lexical-nodes\";\nimport { SharedHistoryContext, useSharedHistoryContext } from \"~/context/SharedHistoryContext\";\nimport { useRichTextEditor } from \"~/hooks/useRichTextEditor\";\nimport {\n    LexicalEditorWithConfig,\n    useLexicalEditorConfig\n} from \"~/components/LexicalEditorConfig/LexicalEditorConfig\";\n\nexport interface RichTextEditorProps {\n    children?: React.ReactNode | React.ReactNode[];\n    classes?: string;\n    contentEditableStyles?: React.CSSProperties;\n    focus?: boolean;\n    height?: number | string;\n    nodes?: Klass<LexicalNode>[];\n    onBlur?: (editorState: LexicalValue) => void;\n    onChange?: (json: LexicalValue) => void;\n    placeholder?: string;\n    placeholderStyles?: React.CSSProperties;\n    staticToolbar?: React.ReactNode;\n    styles?: React.CSSProperties;\n    tag?: string;\n    theme: WebinyTheme;\n    themeEmotionMap?: ThemeEmotionMap;\n    themeStylesTransformer?: (cssObject: Record<string, any>) => CSSObject;\n    toolbar?: React.ReactNode;\n    toolbarActionPlugins?: ToolbarActionPlugin[];\n    value: LexicalValue | null;\n    width?: number | string;\n}\n\nconst BaseRichTextEditor = ({\n    toolbar,\n    staticToolbar,\n    onChange,\n    value,\n    nodes,\n    placeholder,\n    children,\n    onBlur,\n    focus,\n    styles,\n    width,\n    height,\n    theme,\n    themeEmotionMap,\n    toolbarActionPlugins,\n    contentEditableStyles,\n    placeholderStyles\n}: RichTextEditorProps) => {\n    const editorTheme = useRef(createTheme());\n    const config = useLexicalEditorConfig();\n    const { historyState } = useSharedHistoryContext();\n    const placeholderElem = (\n        <Placeholder styles={placeholderStyles}>{placeholder || \"Enter text...\"}</Placeholder>\n    );\n    const scrollRef = useRef(null);\n    const [floatingAnchorElem, setFloatingAnchorElem] = useState<HTMLElement | undefined>(\n        undefined\n    );\n    const { setTheme, setThemeEmotionMap, setToolbarActionPlugins } = useRichTextEditor();\n\n    useEffect(() => {\n        setTheme(theme);\n        setThemeEmotionMap(themeEmotionMap);\n    }, [themeEmotionMap, theme]);\n\n    useEffect(() => {\n        if (toolbarActionPlugins) {\n            setToolbarActionPlugins(toolbarActionPlugins || []);\n        }\n    }, [toolbarActionPlugins]);\n\n    const onRef = (_floatingAnchorElem: HTMLDivElement) => {\n        if (_floatingAnchorElem !== null) {\n            setFloatingAnchorElem(_floatingAnchorElem);\n        }\n    };\n\n    const sizeStyle = {\n        height: height || \"\",\n        width: width || \"\"\n    };\n\n    const configNodes = config.nodes.map(node => node.node);\n    const configPlugins = config.plugins.map(plugin => (\n        <Fragment key={plugin.name}>{plugin.element}</Fragment>\n    ));\n\n    const editorValue = isValidLexicalData(value) ? value : generateInitialLexicalValue();\n\n    const initialConfig = {\n        // We update the state via the `<LexicalUpdateStatePlugin/>`.\n        editorState: null,\n        namespace: \"webiny\",\n        onError: () => {\n            // Ignore errors. We don't want to break the app because of errors caused by config/value updates.\n            // These are usually resolved in the next component render cycle.\n        },\n        nodes: [...allNodes, ...configNodes, ...(nodes || [])],\n        theme: { ...editorTheme.current, emotionMap: themeEmotionMap }\n    };\n\n    function handleOnChange(editorState: EditorState, editor: LexicalEditor) {\n        editorState.read(() => {\n            if (typeof onChange === \"function\") {\n                const editorState = editor.getEditorState();\n                onChange(JSON.stringify(editorState.toJSON()));\n            }\n        });\n    }\n\n    return (\n        /**\n         * Once the LexicalComposer is mounted, it caches the `initialConfig` internally, and all future\n         * updates to the config will be ignored. This is a problem because we pull in Nodes from our config,\n         * and initially, there can be multiple re-renders, while the config object is settled.\n         *\n         * To bypass this issue, we generate a naive `key` based on the number of Nodes.\n         */\n        <LexicalComposer initialConfig={initialConfig} key={initialConfig.nodes.length}>\n            <>\n                {staticToolbar && staticToolbar}\n                <div\n                    /* This className is necessary for targeting of editor container from CSS files. */\n                    className={\"editor-shell\"}\n                    ref={scrollRef}\n                    style={{ ...styles, ...sizeStyle, overflow: \"auto\", position: \"relative\" }}\n                >\n                    {/* data */}\n                    <OnChangePlugin onChange={handleOnChange} />\n                    <UpdateStatePlugin value={editorValue} />\n                    <ClearEditorPlugin />\n                    <HistoryPlugin externalHistoryState={historyState} />\n                    {/* Events */}\n                    {onBlur && <BlurEventPlugin onBlur={onBlur} />}\n                    {focus && <AutoFocusPlugin />}\n                    {/* External plugins and components */}\n                    {configPlugins}\n                    {children}\n                    <RichTextPlugin\n                        contentEditable={\n                            <div className=\"editor-scroller\" style={{ ...sizeStyle }}>\n                                <div className=\"editor\" ref={onRef}>\n                                    <ContentEditable\n                                        style={{ outline: 0, ...contentEditableStyles }}\n                                    />\n                                </div>\n                            </div>\n                        }\n                        placeholder={placeholderElem}\n                        ErrorBoundary={LexicalErrorBoundary}\n                    />\n                    {/* Toolbar */}\n                    {floatingAnchorElem && toolbar}\n                </div>\n            </>\n        </LexicalComposer>\n    );\n};\n\n/**\n * @description Main editor container\n */\nexport const RichTextEditor = makeComposable<RichTextEditorProps>(\"RichTextEditor\", props => {\n    return (\n        <LexicalEditorWithConfig>\n            <RichTextEditorProvider>\n                <ClassNames>\n                    {({ css }) => {\n                        const themeEmotionMap =\n                            props?.themeEmotionMap ??\n                            toTypographyEmotionMap(css, props.theme, props.themeStylesTransformer);\n                        return (\n                            <SharedHistoryContext>\n                                <BaseRichTextEditor {...props} themeEmotionMap={themeEmotionMap} />\n                            </SharedHistoryContext>\n                        );\n                    }}\n                </ClassNames>\n            </RichTextEditorProvider>\n        </LexicalEditorWithConfig>\n    );\n});\n"],"mappings":"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"}
+{"version":3,"names":["_react","_interopRequireWildcard","require","_react2","_LexicalComposer","_LexicalOnChangePlugin","_LexicalAutoFocusPlugin","_LexicalClearEditorPlugin","_LexicalRichTextPlugin","_LexicalErrorBoundary","_interopRequireDefault","_reactComposition","_LexicalHistoryPlugin","_LexicalContentEditable","_RichTextEditorContext","_isValidLexicalData","_LexicalUpdateStatePlugin","_BlurEventPlugin","_Placeholder","_generateInitialLexicalValue","_lexicalTheme","_lexicalNodes","_SharedHistoryContext","_useRichTextEditor2","_LexicalEditorConfig","BaseRichTextEditor","_ref","toolbar","staticToolbar","onChange","value","nodes","placeholder","children","onBlur","focus","styles","width","height","theme","themeEmotionMap","toolbarActionPlugins","contentEditableStyles","placeholderStyles","editorTheme","useRef","createTheme","config","useLexicalEditorConfig","_useSharedHistoryCont","useSharedHistoryContext","historyState","placeholderElem","default","createElement","Placeholder","scrollRef","_useState","useState","undefined","_useState2","_slicedToArray2","floatingAnchorElem","setFloatingAnchorElem","_useRichTextEditor","useRichTextEditor","setTheme","setThemeEmotionMap","setToolbarActionPlugins","useEffect","onRef","_floatingAnchorElem","sizeStyle","configNodes","map","node","configPlugins","plugins","plugin","Fragment","key","name","element","editorValue","isValidLexicalData","generateInitialLexicalValue","initialConfig","editorState","namespace","onError","concat","_toConsumableArray2","allNodes","_objectSpread2","current","emotionMap","handleOnChange","editor","read","getEditorState","JSON","stringify","toJSON","LexicalComposer","length","className","ref","style","overflow","position","OnChangePlugin","UpdateStatePlugin","ClearEditorPlugin","HistoryPlugin","externalHistoryState","BlurEventPlugin","AutoFocusPlugin","RichTextPlugin","contentEditable","ContentEditable","outline","ErrorBoundary","LexicalErrorBoundary","RichTextEditor","makeDecoratable","props","LexicalEditorWithConfig","RichTextEditorProvider","ClassNames","_ref2","css","toTypographyEmotionMap","themeStylesTransformer","SharedHistoryContext","Object","assign","exports"],"sources":["RichTextEditor.tsx"],"sourcesContent":["import React, { Fragment, useEffect, useRef, useState } from \"react\";\nimport { ClassNames, CSSObject } from \"@emotion/react\";\nimport { Klass, LexicalEditor, LexicalNode } from \"lexical\";\nimport { EditorState } from \"lexical/LexicalEditorState\";\nimport { LexicalComposer } from \"@lexical/react/LexicalComposer\";\nimport { OnChangePlugin } from \"@lexical/react/LexicalOnChangePlugin\";\nimport { AutoFocusPlugin } from \"@lexical/react/LexicalAutoFocusPlugin\";\nimport { ClearEditorPlugin } from \"@lexical/react/LexicalClearEditorPlugin\";\nimport { RichTextPlugin } from \"@lexical/react/LexicalRichTextPlugin\";\nimport LexicalErrorBoundary from \"@lexical/react/LexicalErrorBoundary\";\nimport { makeDecoratable } from \"@webiny/react-composition\";\nimport { HistoryPlugin } from \"@lexical/react/LexicalHistoryPlugin\";\nimport { ContentEditable } from \"@lexical/react/LexicalContentEditable\";\nimport { RichTextEditorProvider } from \"~/context/RichTextEditorContext\";\nimport { isValidLexicalData } from \"~/utils/isValidLexicalData\";\nimport { UpdateStatePlugin } from \"~/plugins/LexicalUpdateStatePlugin\";\nimport { BlurEventPlugin } from \"~/plugins/BlurEventPlugin/BlurEventPlugin\";\nimport { LexicalValue, ToolbarActionPlugin } from \"~/types\";\nimport { Placeholder } from \"~/ui/Placeholder\";\nimport { generateInitialLexicalValue } from \"~/utils/generateInitialLexicalValue\";\nimport {\n    createTheme,\n    WebinyTheme,\n    ThemeEmotionMap,\n    toTypographyEmotionMap\n} from \"@webiny/lexical-theme\";\nimport { allNodes } from \"@webiny/lexical-nodes\";\nimport { SharedHistoryContext, useSharedHistoryContext } from \"~/context/SharedHistoryContext\";\nimport { useRichTextEditor } from \"~/hooks/useRichTextEditor\";\nimport {\n    LexicalEditorWithConfig,\n    useLexicalEditorConfig\n} from \"~/components/LexicalEditorConfig/LexicalEditorConfig\";\n\nexport interface RichTextEditorProps {\n    children?: React.ReactNode | React.ReactNode[];\n    classes?: string;\n    contentEditableStyles?: React.CSSProperties;\n    focus?: boolean;\n    height?: number | string;\n    nodes?: Klass<LexicalNode>[];\n    onBlur?: (editorState: LexicalValue) => void;\n    onChange?: (json: LexicalValue) => void;\n    placeholder?: string;\n    placeholderStyles?: React.CSSProperties;\n    staticToolbar?: React.ReactNode;\n    styles?: React.CSSProperties;\n    tag?: string;\n    theme: WebinyTheme;\n    themeEmotionMap?: ThemeEmotionMap;\n    themeStylesTransformer?: (cssObject: Record<string, any>) => CSSObject;\n    toolbar?: React.ReactNode;\n    toolbarActionPlugins?: ToolbarActionPlugin[];\n    value: LexicalValue | null;\n    width?: number | string;\n}\n\nconst BaseRichTextEditor = ({\n    toolbar,\n    staticToolbar,\n    onChange,\n    value,\n    nodes,\n    placeholder,\n    children,\n    onBlur,\n    focus,\n    styles,\n    width,\n    height,\n    theme,\n    themeEmotionMap,\n    toolbarActionPlugins,\n    contentEditableStyles,\n    placeholderStyles\n}: RichTextEditorProps) => {\n    const editorTheme = useRef(createTheme());\n    const config = useLexicalEditorConfig();\n    const { historyState } = useSharedHistoryContext();\n    const placeholderElem = (\n        <Placeholder styles={placeholderStyles}>{placeholder || \"Enter text...\"}</Placeholder>\n    );\n    const scrollRef = useRef(null);\n    const [floatingAnchorElem, setFloatingAnchorElem] = useState<HTMLElement | undefined>(\n        undefined\n    );\n    const { setTheme, setThemeEmotionMap, setToolbarActionPlugins } = useRichTextEditor();\n\n    useEffect(() => {\n        setTheme(theme);\n        setThemeEmotionMap(themeEmotionMap);\n    }, [themeEmotionMap, theme]);\n\n    useEffect(() => {\n        if (toolbarActionPlugins) {\n            setToolbarActionPlugins(toolbarActionPlugins || []);\n        }\n    }, [toolbarActionPlugins]);\n\n    const onRef = (_floatingAnchorElem: HTMLDivElement) => {\n        if (_floatingAnchorElem !== null) {\n            setFloatingAnchorElem(_floatingAnchorElem);\n        }\n    };\n\n    const sizeStyle = {\n        height: height || \"\",\n        width: width || \"\"\n    };\n\n    const configNodes = config.nodes.map(node => node.node);\n    const configPlugins = config.plugins.map(plugin => (\n        <Fragment key={plugin.name}>{plugin.element}</Fragment>\n    ));\n\n    const editorValue = isValidLexicalData(value) ? value : generateInitialLexicalValue();\n\n    const initialConfig = {\n        // We update the state via the `<LexicalUpdateStatePlugin/>`.\n        editorState: null,\n        namespace: \"webiny\",\n        onError: () => {\n            // Ignore errors. We don't want to break the app because of errors caused by config/value updates.\n            // These are usually resolved in the next component render cycle.\n        },\n        nodes: [...allNodes, ...configNodes, ...(nodes || [])],\n        theme: { ...editorTheme.current, emotionMap: themeEmotionMap }\n    };\n\n    function handleOnChange(editorState: EditorState, editor: LexicalEditor) {\n        editorState.read(() => {\n            if (typeof onChange === \"function\") {\n                const editorState = editor.getEditorState();\n                onChange(JSON.stringify(editorState.toJSON()));\n            }\n        });\n    }\n\n    return (\n        /**\n         * Once the LexicalComposer is mounted, it caches the `initialConfig` internally, and all future\n         * updates to the config will be ignored. This is a problem because we pull in Nodes from our config,\n         * and initially, there can be multiple re-renders, while the config object is settled.\n         *\n         * To bypass this issue, we generate a naive `key` based on the number of Nodes.\n         */\n        <LexicalComposer initialConfig={initialConfig} key={initialConfig.nodes.length}>\n            <>\n                {staticToolbar && staticToolbar}\n                <div\n                    /* This className is necessary for targeting of editor container from CSS files. */\n                    className={\"editor-shell\"}\n                    ref={scrollRef}\n                    style={{ ...styles, ...sizeStyle, overflow: \"auto\", position: \"relative\" }}\n                >\n                    {/* data */}\n                    <OnChangePlugin onChange={handleOnChange} />\n                    <UpdateStatePlugin value={editorValue} />\n                    <ClearEditorPlugin />\n                    <HistoryPlugin externalHistoryState={historyState} />\n                    {/* Events */}\n                    {onBlur && <BlurEventPlugin onBlur={onBlur} />}\n                    {focus && <AutoFocusPlugin />}\n                    {/* External plugins and components */}\n                    {configPlugins}\n                    {children}\n                    <RichTextPlugin\n                        contentEditable={\n                            <div className=\"editor-scroller\" style={{ ...sizeStyle }}>\n                                <div className=\"editor\" ref={onRef}>\n                                    <ContentEditable\n                                        style={{ outline: 0, ...contentEditableStyles }}\n                                    />\n                                </div>\n                            </div>\n                        }\n                        placeholder={placeholderElem}\n                        ErrorBoundary={LexicalErrorBoundary}\n                    />\n                    {/* Toolbar */}\n                    {floatingAnchorElem && toolbar}\n                </div>\n            </>\n        </LexicalComposer>\n    );\n};\n\n/**\n * @description Main editor container\n */\nexport const RichTextEditor = makeDecoratable(\"RichTextEditor\", (props: RichTextEditorProps) => {\n    return (\n        <LexicalEditorWithConfig>\n            <RichTextEditorProvider>\n                <ClassNames>\n                    {({ css }) => {\n                        const themeEmotionMap =\n                            props?.themeEmotionMap ??\n                            toTypographyEmotionMap(css, props.theme, props.themeStylesTransformer);\n                        return (\n                            <SharedHistoryContext>\n                                <BaseRichTextEditor {...props} themeEmotionMap={themeEmotionMap} />\n                            </SharedHistoryContext>\n                        );\n                    }}\n                </ClassNames>\n            </RichTextEditorProvider>\n        </LexicalEditorWithConfig>\n    );\n});\n"],"mappings":"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"}

package/components/LexicalEditorConfig/LexicalEditorConfig.js

@@ -14,7 +14,7 @@ var _reactProperties = require("@webiny/react-properties");
 var _ToolbarElement = require("./components/ToolbarElement");
 var _Plugin = require("./components/Plugin");
 var _Node = require("./components/Node");
-var LexicalEditorConfigApply = (0, _reactComposition.makeComposable)("LexicalEditorConfigApply", function (_ref) {
+var LexicalEditorConfigApply = (0, _reactComposition.makeDecoratable)("LexicalEditorConfigApply", function (_ref) {
   var children = _ref.children;
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children);
 });

package/components/LexicalEditorConfig/LexicalEditorConfig.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_reactComposition","_reactProperties","_ToolbarElement","_Plugin","_Node","LexicalEditorConfigApply","makeComposable","_ref","children","default","createElement","Fragment","createHOC","newChildren","BaseComponent","ConfigHOC","_ref2","LexicalEditorConfig","_ref3","Compose","component","with","exports","ToolbarElement","Plugin","Node","ViewContext","React","createContext","properties","LexicalEditorWithConfig","_ref4","_useState","useState","_useState2","_slicedToArray2","setProperties","context","stateUpdater","Provider","value","Properties","onChange","useLexicalEditorConfig","_useContext","useContext","config","useMemo","toObject","toolbarElements","plugins","nodes"],"sources":["LexicalEditorConfig.tsx"],"sourcesContent":["import React, { useContext, useMemo, useState } from \"react\";\nimport { makeComposable, Compose, HigherOrderComponent } from \"@webiny/react-composition\";\nimport { Property, Properties, toObject } from \"@webiny/react-properties\";\nimport { ToolbarElement, ToolbarElementConfig } from \"./components/ToolbarElement\";\nimport { Plugin, PluginConfig } from \"./components/Plugin\";\nimport { Node, NodeConfig } from \"./components/Node\";\n\nconst LexicalEditorConfigApply = makeComposable(\"LexicalEditorConfigApply\", ({ children }) => {\n    return <>{children}</>;\n});\n\nconst createHOC =\n    (newChildren: React.ReactNode): HigherOrderComponent =>\n    BaseComponent => {\n        return function ConfigHOC({ children }) {\n            return (\n                <BaseComponent>\n                    {newChildren}\n                    {children}\n                </BaseComponent>\n            );\n        };\n    };\n\nexport const LexicalEditorConfig = ({ children }: { children: React.ReactNode }) => {\n    return <Compose component={LexicalEditorConfigApply} with={createHOC(children)} />;\n};\n\nLexicalEditorConfig.ToolbarElement = ToolbarElement;\nLexicalEditorConfig.Plugin = Plugin;\nLexicalEditorConfig.Node = Node;\n\ninterface ViewContext {\n    properties: Property[];\n}\n\nconst ViewContext = React.createContext<ViewContext>({ properties: [] });\n\nexport const LexicalEditorWithConfig = ({ children }: { children: React.ReactNode }) => {\n    const [properties, setProperties] = useState<Property[]>([]);\n    const context = { properties };\n\n    const stateUpdater = (properties: Property[]) => {\n        setProperties(properties);\n    };\n\n    return (\n        <ViewContext.Provider value={context}>\n            <Properties onChange={stateUpdater}>\n                <LexicalEditorConfigApply />\n                {children}\n            </Properties>\n        </ViewContext.Provider>\n    );\n};\n\ninterface LexicalEditorConfigData {\n    toolbarElements: ToolbarElementConfig[];\n    plugins: PluginConfig[];\n    nodes: NodeConfig[];\n}\n\nexport function useLexicalEditorConfig() {\n    const { properties } = useContext(ViewContext);\n\n    const config = useMemo(() => {\n        return toObject<LexicalEditorConfigData>(properties);\n    }, [properties]);\n\n    return {\n        toolbarElements: config.toolbarElements || [],\n        plugins: config.plugins || [],\n        nodes: config.nodes || []\n    };\n}\n"],"mappings":"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"}
+{"version":3,"names":["_react","_interopRequireWildcard","require","_reactComposition","_reactProperties","_ToolbarElement","_Plugin","_Node","LexicalEditorConfigApply","makeDecoratable","_ref","children","default","createElement","Fragment","createHOC","newChildren","BaseComponent","ConfigHOC","_ref2","LexicalEditorConfig","_ref3","Compose","component","with","exports","ToolbarElement","Plugin","Node","ViewContext","React","createContext","properties","LexicalEditorWithConfig","_ref4","_useState","useState","_useState2","_slicedToArray2","setProperties","context","stateUpdater","Provider","value","Properties","onChange","useLexicalEditorConfig","_useContext","useContext","config","useMemo","toObject","toolbarElements","plugins","nodes"],"sources":["LexicalEditorConfig.tsx"],"sourcesContent":["import React, { useContext, useMemo, useState } from \"react\";\nimport { makeDecoratable, Compose, Decorator, GenericComponent } from \"@webiny/react-composition\";\nimport { Property, Properties, toObject } from \"@webiny/react-properties\";\nimport { ToolbarElement, ToolbarElementConfig } from \"./components/ToolbarElement\";\nimport { Plugin, PluginConfig } from \"./components/Plugin\";\nimport { Node, NodeConfig } from \"./components/Node\";\n\nconst LexicalEditorConfigApply = makeDecoratable(\"LexicalEditorConfigApply\", ({ children }) => {\n    return <>{children}</>;\n});\n\nconst createHOC =\n    (newChildren: React.ReactNode): Decorator<GenericComponent> =>\n    BaseComponent => {\n        return function ConfigHOC({ children }) {\n            return (\n                <BaseComponent>\n                    {newChildren}\n                    {children}\n                </BaseComponent>\n            );\n        };\n    };\n\nexport const LexicalEditorConfig = ({ children }: { children: React.ReactNode }) => {\n    return <Compose component={LexicalEditorConfigApply} with={createHOC(children)} />;\n};\n\nLexicalEditorConfig.ToolbarElement = ToolbarElement;\nLexicalEditorConfig.Plugin = Plugin;\nLexicalEditorConfig.Node = Node;\n\ninterface ViewContext {\n    properties: Property[];\n}\n\nconst ViewContext = React.createContext<ViewContext>({ properties: [] });\n\nexport const LexicalEditorWithConfig = ({ children }: { children: React.ReactNode }) => {\n    const [properties, setProperties] = useState<Property[]>([]);\n    const context = { properties };\n\n    const stateUpdater = (properties: Property[]) => {\n        setProperties(properties);\n    };\n\n    return (\n        <ViewContext.Provider value={context}>\n            <Properties onChange={stateUpdater}>\n                <LexicalEditorConfigApply />\n                {children}\n            </Properties>\n        </ViewContext.Provider>\n    );\n};\n\ninterface LexicalEditorConfigData {\n    toolbarElements: ToolbarElementConfig[];\n    plugins: PluginConfig[];\n    nodes: NodeConfig[];\n}\n\nexport function useLexicalEditorConfig() {\n    const { properties } = useContext(ViewContext);\n\n    const config = useMemo(() => {\n        return toObject<LexicalEditorConfigData>(properties);\n    }, [properties]);\n\n    return {\n        toolbarElements: config.toolbarElements || [],\n        plugins: config.plugins || [],\n        nodes: config.nodes || []\n    };\n}\n"],"mappings":"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"}

package/components/ToolbarActions/FontColorAction.d.ts

@@ -1,8 +1,5 @@
 import React from "react";
-export declare const FontColorPicker: React.FunctionComponent<unknown> & {
-    original: React.ComponentType<unknown>;
-    originalName: string;
-};
+export declare const FontColorPicker: import("@webiny/react-composition").DecoratableComponent<() => JSX.Element | null>;
 interface FontActionColorPicker {
     element: JSX.Element;
 }

package/components/ToolbarActions/FontColorAction.js

@@ -14,7 +14,7 @@ var _FontColorActionContext = require("../../context/FontColorActionContext");
 var _lexicalNodes = require("@webiny/lexical-nodes");
 var _getSelectedNode = require("../../utils/getSelectedNode");
 var _useCurrentSelection = require("../../hooks/useCurrentSelection");
-var FontColorPicker = (0, _reactComposition.makeComposable)("FontColorPicker", function () {
+var FontColorPicker = (0, _reactComposition.makeDecoratable)("FontColorPicker", function () {
   (0, _react.useEffect)(function () {
     console.log("Default FontColorPicker, please add your own component");
   }, []);

package/components/ToolbarActions/FontColorAction.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_LexicalComposerContext","_reactComposition","_FontColorActionContext","_lexicalNodes","_getSelectedNode","_useCurrentSelection","FontColorPicker","makeComposable","useEffect","console","log","exports","FontActionColorPicker","_ref","element","default","createElement","Compose","component","with","_with","FontColorAction","_useLexicalComposerCo","useLexicalComposerContext","_useLexicalComposerCo2","_slicedToArray2","editor","fontColor","useDeriveValueFromSelection","_ref2","rangeSelection","node","getSelectedNode","$isFontColorNode","getColorStyle","color","onFontColorSelect","useCallback","colorValue","themeColorName","dispatchCommand","ADD_FONT_COLOR_COMMAND","context","useMemo","value","applyColor","FontColorActionContext","Provider","ColorPicker"],"sources":["FontColorAction.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useMemo } from \"react\";\nimport { useLexicalComposerContext } from \"@lexical/react/LexicalComposerContext\";\nimport { LexicalCommand } from \"lexical\";\nimport { Compose, makeComposable } from \"@webiny/react-composition\";\nimport { FontColorActionContext } from \"~/context/FontColorActionContext\";\nimport { $isFontColorNode, ADD_FONT_COLOR_COMMAND, FontColorPayload } from \"@webiny/lexical-nodes\";\nimport { getSelectedNode } from \"~/utils/getSelectedNode\";\nimport { useDeriveValueFromSelection } from \"~/hooks/useCurrentSelection\";\n\nexport const FontColorPicker = makeComposable(\"FontColorPicker\", (): JSX.Element | null => {\n    useEffect(() => {\n        console.log(\"Default FontColorPicker, please add your own component\");\n    }, []);\n    return null;\n});\n\ninterface FontActionColorPicker {\n    element: JSX.Element;\n}\n\nconst FontActionColorPicker = ({ element }: FontActionColorPicker): JSX.Element => {\n    return <Compose component={FontColorPicker} with={() => () => element} />;\n};\n\nexport type FontColorAction = React.ComponentType<unknown> & {\n    ColorPicker: typeof FontActionColorPicker;\n};\n\nexport const FontColorAction: FontColorAction = () => {\n    const [editor] = useLexicalComposerContext();\n    const fontColor = useDeriveValueFromSelection(({ rangeSelection }) => {\n        if (!rangeSelection) {\n            return \"#000\";\n        }\n\n        const node = getSelectedNode(rangeSelection);\n        return $isFontColorNode(node) ? node.getColorStyle().color : \"#000\";\n    });\n\n    const onFontColorSelect = useCallback(\n        (colorValue: string, themeColorName: string | undefined) => {\n            editor.dispatchCommand<LexicalCommand<FontColorPayload>>(ADD_FONT_COLOR_COMMAND, {\n                color: colorValue,\n                themeColorName\n            });\n        },\n        []\n    );\n\n    const context = useMemo(\n        () => ({\n            value: fontColor,\n            applyColor: onFontColorSelect\n        }),\n        [onFontColorSelect, fontColor]\n    );\n\n    return (\n        <FontColorActionContext.Provider value={context}>\n            <FontColorPicker />\n        </FontColorActionContext.Provider>\n    );\n};\n\nFontColorAction.ColorPicker = FontActionColorPicker;\n"],"mappings":";;;;;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,uBAAA,GAAAD,OAAA;AAEA,IAAAE,iBAAA,GAAAF,OAAA;AACA,IAAAG,uBAAA,GAAAH,OAAA;AACA,IAAAI,aAAA,GAAAJ,OAAA;AACA,IAAAK,gBAAA,GAAAL,OAAA;AACA,IAAAM,oBAAA,GAAAN,OAAA;AAEO,IAAMO,eAAe,GAAG,IAAAC,gCAAc,EAAC,iBAAiB,EAAE,YAA0B;EACvF,IAAAC,gBAAS,EAAC,YAAM;IACZC,OAAO,CAACC,GAAG,CAAC,wDAAwD,CAAC;EACzE,CAAC,EAAE,EAAE,CAAC;EACN,OAAO,IAAI;AACf,CAAC,CAAC;AAACC,OAAA,CAAAL,eAAA,GAAAA,eAAA;AAMH,IAAMM,qBAAqB,GAAG,SAAxBA,qBAAqBA,CAAAC,IAAA,EAAwD;EAAA,IAAlDC,OAAO,GAAAD,IAAA,CAAPC,OAAO;EACpC,oBAAOjB,MAAA,CAAAkB,OAAA,CAAAC,aAAA,CAACf,iBAAA,CAAAgB,OAAO;IAACC,SAAS,EAAEZ,eAAgB;IAACa,IAAI,EAAE,SAAAC,MAAA;MAAA,OAAM;QAAA,OAAMN,OAAO;MAAA;IAAA;EAAC,CAAE,CAAC;AAC7E,CAAC;AAMM,IAAMO,eAAgC,GAAG,SAAnCA,eAAgCA,CAAA,EAAS;EAClD,IAAAC,qBAAA,GAAiB,IAAAC,iDAAyB,EAAC,CAAC;IAAAC,sBAAA,OAAAC,eAAA,CAAAV,OAAA,EAAAO,qBAAA;IAArCI,MAAM,GAAAF,sBAAA;EACb,IAAMG,SAAS,GAAG,IAAAC,gDAA2B,EAAC,UAAAC,KAAA,EAAwB;IAAA,IAArBC,cAAc,GAAAD,KAAA,CAAdC,cAAc;IAC3D,IAAI,CAACA,cAAc,EAAE;MACjB,OAAO,MAAM;IACjB;IAEA,IAAMC,IAAI,GAAG,IAAAC,gCAAe,EAACF,cAAc,CAAC;IAC5C,OAAO,IAAAG,8BAAgB,EAACF,IAAI,CAAC,GAAGA,IAAI,CAACG,aAAa,CAAC,CAAC,CAACC,KAAK,GAAG,MAAM;EACvE,CAAC,CAAC;EAEF,IAAMC,iBAAiB,GAAG,IAAAC,kBAAW,EACjC,UAACC,UAAkB,EAAEC,cAAkC,EAAK;IACxDb,MAAM,CAACc,eAAe,CAAmCC,oCAAsB,EAAE;MAC7EN,KAAK,EAAEG,UAAU;MACjBC,cAAc,EAAdA;IACJ,CAAC,CAAC;EACN,CAAC,EACD,EACJ,CAAC;EAED,IAAMG,OAAO,GAAG,IAAAC,cAAO,EACnB;IAAA,OAAO;MACHC,KAAK,EAAEjB,SAAS;MAChBkB,UAAU,EAAET;IAChB,CAAC;EAAA,CAAC,EACF,CAACA,iBAAiB,EAAET,SAAS,CACjC,CAAC;EAED,oBACI9B,MAAA,CAAAkB,OAAA,CAAAC,aAAA,CAACd,uBAAA,CAAA4C,sBAAsB,CAACC,QAAQ;IAACH,KAAK,EAAEF;EAAQ,gBAC5C7C,MAAA,CAAAkB,OAAA,CAAAC,aAAA,CAACV,eAAe,MAAE,CACW,CAAC;AAE1C,CAAC;AAACK,OAAA,CAAAU,eAAA,GAAAA,eAAA;AAEFA,eAAe,CAAC2B,WAAW,GAAGpC,qBAAqB"}
+{"version":3,"names":["_react","_interopRequireWildcard","require","_LexicalComposerContext","_reactComposition","_FontColorActionContext","_lexicalNodes","_getSelectedNode","_useCurrentSelection","FontColorPicker","makeDecoratable","useEffect","console","log","exports","FontActionColorPicker","_ref","element","default","createElement","Compose","component","with","_with","FontColorAction","_useLexicalComposerCo","useLexicalComposerContext","_useLexicalComposerCo2","_slicedToArray2","editor","fontColor","useDeriveValueFromSelection","_ref2","rangeSelection","node","getSelectedNode","$isFontColorNode","getColorStyle","color","onFontColorSelect","useCallback","colorValue","themeColorName","dispatchCommand","ADD_FONT_COLOR_COMMAND","context","useMemo","value","applyColor","FontColorActionContext","Provider","ColorPicker"],"sources":["FontColorAction.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useMemo } from \"react\";\nimport { useLexicalComposerContext } from \"@lexical/react/LexicalComposerContext\";\nimport { LexicalCommand } from \"lexical\";\nimport { Compose, makeDecoratable } from \"@webiny/react-composition\";\nimport { FontColorActionContext } from \"~/context/FontColorActionContext\";\nimport { $isFontColorNode, ADD_FONT_COLOR_COMMAND, FontColorPayload } from \"@webiny/lexical-nodes\";\nimport { getSelectedNode } from \"~/utils/getSelectedNode\";\nimport { useDeriveValueFromSelection } from \"~/hooks/useCurrentSelection\";\n\nexport const FontColorPicker = makeDecoratable(\"FontColorPicker\", (): JSX.Element | null => {\n    useEffect(() => {\n        console.log(\"Default FontColorPicker, please add your own component\");\n    }, []);\n    return null;\n});\n\ninterface FontActionColorPicker {\n    element: JSX.Element;\n}\n\nconst FontActionColorPicker = ({ element }: FontActionColorPicker): JSX.Element => {\n    return <Compose component={FontColorPicker} with={() => () => element} />;\n};\n\nexport type FontColorAction = React.ComponentType<unknown> & {\n    ColorPicker: typeof FontActionColorPicker;\n};\n\nexport const FontColorAction: FontColorAction = () => {\n    const [editor] = useLexicalComposerContext();\n    const fontColor = useDeriveValueFromSelection(({ rangeSelection }) => {\n        if (!rangeSelection) {\n            return \"#000\";\n        }\n\n        const node = getSelectedNode(rangeSelection);\n        return $isFontColorNode(node) ? node.getColorStyle().color : \"#000\";\n    });\n\n    const onFontColorSelect = useCallback(\n        (colorValue: string, themeColorName: string | undefined) => {\n            editor.dispatchCommand<LexicalCommand<FontColorPayload>>(ADD_FONT_COLOR_COMMAND, {\n                color: colorValue,\n                themeColorName\n            });\n        },\n        []\n    );\n\n    const context = useMemo(\n        () => ({\n            value: fontColor,\n            applyColor: onFontColorSelect\n        }),\n        [onFontColorSelect, fontColor]\n    );\n\n    return (\n        <FontColorActionContext.Provider value={context}>\n            <FontColorPicker />\n        </FontColorActionContext.Provider>\n    );\n};\n\nFontColorAction.ColorPicker = FontActionColorPicker;\n"],"mappings":";;;;;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,uBAAA,GAAAD,OAAA;AAEA,IAAAE,iBAAA,GAAAF,OAAA;AACA,IAAAG,uBAAA,GAAAH,OAAA;AACA,IAAAI,aAAA,GAAAJ,OAAA;AACA,IAAAK,gBAAA,GAAAL,OAAA;AACA,IAAAM,oBAAA,GAAAN,OAAA;AAEO,IAAMO,eAAe,GAAG,IAAAC,iCAAe,EAAC,iBAAiB,EAAE,YAA0B;EACxF,IAAAC,gBAAS,EAAC,YAAM;IACZC,OAAO,CAACC,GAAG,CAAC,wDAAwD,CAAC;EACzE,CAAC,EAAE,EAAE,CAAC;EACN,OAAO,IAAI;AACf,CAAC,CAAC;AAACC,OAAA,CAAAL,eAAA,GAAAA,eAAA;AAMH,IAAMM,qBAAqB,GAAG,SAAxBA,qBAAqBA,CAAAC,IAAA,EAAwD;EAAA,IAAlDC,OAAO,GAAAD,IAAA,CAAPC,OAAO;EACpC,oBAAOjB,MAAA,CAAAkB,OAAA,CAAAC,aAAA,CAACf,iBAAA,CAAAgB,OAAO;IAACC,SAAS,EAAEZ,eAAgB;IAACa,IAAI,EAAE,SAAAC,MAAA;MAAA,OAAM;QAAA,OAAMN,OAAO;MAAA;IAAA;EAAC,CAAE,CAAC;AAC7E,CAAC;AAMM,IAAMO,eAAgC,GAAG,SAAnCA,eAAgCA,CAAA,EAAS;EAClD,IAAAC,qBAAA,GAAiB,IAAAC,iDAAyB,EAAC,CAAC;IAAAC,sBAAA,OAAAC,eAAA,CAAAV,OAAA,EAAAO,qBAAA;IAArCI,MAAM,GAAAF,sBAAA;EACb,IAAMG,SAAS,GAAG,IAAAC,gDAA2B,EAAC,UAAAC,KAAA,EAAwB;IAAA,IAArBC,cAAc,GAAAD,KAAA,CAAdC,cAAc;IAC3D,IAAI,CAACA,cAAc,EAAE;MACjB,OAAO,MAAM;IACjB;IAEA,IAAMC,IAAI,GAAG,IAAAC,gCAAe,EAACF,cAAc,CAAC;IAC5C,OAAO,IAAAG,8BAAgB,EAACF,IAAI,CAAC,GAAGA,IAAI,CAACG,aAAa,CAAC,CAAC,CAACC,KAAK,GAAG,MAAM;EACvE,CAAC,CAAC;EAEF,IAAMC,iBAAiB,GAAG,IAAAC,kBAAW,EACjC,UAACC,UAAkB,EAAEC,cAAkC,EAAK;IACxDb,MAAM,CAACc,eAAe,CAAmCC,oCAAsB,EAAE;MAC7EN,KAAK,EAAEG,UAAU;MACjBC,cAAc,EAAdA;IACJ,CAAC,CAAC;EACN,CAAC,EACD,EACJ,CAAC;EAED,IAAMG,OAAO,GAAG,IAAAC,cAAO,EACnB;IAAA,OAAO;MACHC,KAAK,EAAEjB,SAAS;MAChBkB,UAAU,EAAET;IAChB,CAAC;EAAA,CAAC,EACF,CAACA,iBAAiB,EAAET,SAAS,CACjC,CAAC;EAED,oBACI9B,MAAA,CAAAkB,OAAA,CAAAC,aAAA,CAACd,uBAAA,CAAA4C,sBAAsB,CAACC,QAAQ;IAACH,KAAK,EAAEF;EAAQ,gBAC5C7C,MAAA,CAAAkB,OAAA,CAAAC,aAAA,CAACV,eAAe,MAAE,CACW,CAAC;AAE1C,CAAC;AAACK,OAAA,CAAAU,eAAA,GAAAA,eAAA;AAEFA,eAAe,CAAC2B,WAAW,GAAGpC,qBAAqB"}

package/components/ToolbarActions/TextAlignmentAction.d.ts

@@ -1,8 +1,5 @@
 import React from "react";
-export declare const BaseTextAlignmentDropDown: React.FunctionComponent<unknown> & {
-    original: React.ComponentType<unknown>;
-    originalName: string;
-};
+export declare const BaseTextAlignmentDropDown: import("@webiny/react-composition").DecoratableComponent<() => JSX.Element | null>;
 interface TextAlignmentActionDropdownProps {
     element: JSX.Element;
 }

package/components/ToolbarActions/TextAlignmentAction.js

@@ -18,7 +18,7 @@ var _getSelectedNode = require("../../utils/getSelectedNode");
  * Base text alignment dropdown composable component.
  * Note: To add a custom dropdown component use @see LexicalEditorConfig API.
  */
-var BaseTextAlignmentDropDown = (0, _reactComposition.makeComposable)("BaseTextAlignmentDropDown", function () {
+var BaseTextAlignmentDropDown = (0, _reactComposition.makeDecoratable)("BaseTextAlignmentDropDown", function () {
   (0, _react.useEffect)(function () {
     console.log("Default BaseTextAlignmentDropDown, please add your own component");
   }, []);

package/components/ToolbarActions/TextAlignmentAction.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_lexical","_LexicalComposerContext","_reactComposition","_TextAlignmentActionContextProps","_useCurrentSelection","_getSelectedNode","BaseTextAlignmentDropDown","makeComposable","useEffect","console","log","exports","TextAlignmentActionDropDown","_ref","element","default","createElement","Compose","component","with","_with","TextAlignmentAction","_useLexicalComposerCo","useLexicalComposerContext","_useLexicalComposerCo2","_slicedToArray2","editor","alignmentValue","useDeriveValueFromSelection","_ref2","rangeSelection","node","getSelectedNode","getParent","getFormatType","applyTextAlignment","value","dispatchCommand","FORMAT_ELEMENT_COMMAND","outdentText","OUTDENT_CONTENT_COMMAND","undefined","indentText","INDENT_CONTENT_COMMAND","context","useMemo","TextAlignmentActionContext","Provider","TextAlignmentDropDown"],"sources":["TextAlignmentAction.tsx"],"sourcesContent":["import React, { useEffect, useMemo } from \"react\";\nimport {\n    ElementFormatType,\n    FORMAT_ELEMENT_COMMAND,\n    INDENT_CONTENT_COMMAND,\n    OUTDENT_CONTENT_COMMAND\n} from \"lexical\";\nimport { useLexicalComposerContext } from \"@lexical/react/LexicalComposerContext\";\nimport { Compose, makeComposable } from \"@webiny/react-composition\";\nimport { TextAlignmentActionContext } from \"~/context/TextAlignmentActionContextProps\";\nimport { useDeriveValueFromSelection } from \"~/hooks/useCurrentSelection\";\nimport { getSelectedNode } from \"~/utils/getSelectedNode\";\n\n/*\n * Base text alignment dropdown composable component.\n * Note: To add a custom dropdown component use @see LexicalEditorConfig API.\n */\nexport const BaseTextAlignmentDropDown = makeComposable(\n    \"BaseTextAlignmentDropDown\",\n    (): JSX.Element | null => {\n        useEffect(() => {\n            console.log(\"Default BaseTextAlignmentDropDown, please add your own component\");\n        }, []);\n        return null;\n    }\n);\n\ninterface TextAlignmentActionDropdownProps {\n    element: JSX.Element;\n}\n\nconst TextAlignmentActionDropDown = ({\n    element\n}: TextAlignmentActionDropdownProps): JSX.Element => {\n    return <Compose component={BaseTextAlignmentDropDown} with={() => () => element} />;\n};\n\nexport type TextAlignmentAction = React.ComponentType<unknown> & {\n    TextAlignmentDropDown: typeof TextAlignmentActionDropDown;\n};\n\nexport const TextAlignmentAction: TextAlignmentAction = () => {\n    const [editor] = useLexicalComposerContext();\n    const alignmentValue: ElementFormatType = useDeriveValueFromSelection(({ rangeSelection }) => {\n        const node = rangeSelection ? getSelectedNode(rangeSelection) : null;\n        if (node) {\n            return node.getParent()?.getFormatType() || \"\";\n        }\n        return \"\";\n    });\n\n    const applyTextAlignment = (value: ElementFormatType) => {\n        editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, value);\n    };\n\n    const outdentText = () => {\n        editor.dispatchCommand(OUTDENT_CONTENT_COMMAND, undefined);\n    };\n\n    const indentText = () => {\n        editor.dispatchCommand(INDENT_CONTENT_COMMAND, undefined);\n    };\n\n    const context = useMemo(\n        () => ({\n            value: alignmentValue,\n            applyTextAlignment,\n            outdentText,\n            indentText\n        }),\n        [alignmentValue]\n    );\n\n    return (\n        <TextAlignmentActionContext.Provider value={context}>\n            <BaseTextAlignmentDropDown />\n        </TextAlignmentActionContext.Provider>\n    );\n};\n\nTextAlignmentAction.TextAlignmentDropDown = TextAlignmentActionDropDown;\n"],"mappings":";;;;;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,QAAA,GAAAD,OAAA;AAMA,IAAAE,uBAAA,GAAAF,OAAA;AACA,IAAAG,iBAAA,GAAAH,OAAA;AACA,IAAAI,gCAAA,GAAAJ,OAAA;AACA,IAAAK,oBAAA,GAAAL,OAAA;AACA,IAAAM,gBAAA,GAAAN,OAAA;AAEA;AACA;AACA;AACA;AACO,IAAMO,yBAAyB,GAAG,IAAAC,gCAAc,EACnD,2BAA2B,EAC3B,YAA0B;EACtB,IAAAC,gBAAS,EAAC,YAAM;IACZC,OAAO,CAACC,GAAG,CAAC,kEAAkE,CAAC;EACnF,CAAC,EAAE,EAAE,CAAC;EACN,OAAO,IAAI;AACf,CACJ,CAAC;AAACC,OAAA,CAAAL,yBAAA,GAAAA,yBAAA;AAMF,IAAMM,2BAA2B,GAAG,SAA9BA,2BAA2BA,CAAAC,IAAA,EAEoB;EAAA,IADjDC,OAAO,GAAAD,IAAA,CAAPC,OAAO;EAEP,oBAAOjB,MAAA,CAAAkB,OAAA,CAAAC,aAAA,CAACd,iBAAA,CAAAe,OAAO;IAACC,SAAS,EAAEZ,yBAA0B;IAACa,IAAI,EAAE,SAAAC,MAAA;MAAA,OAAM;QAAA,OAAMN,OAAO;MAAA;IAAA;EAAC,CAAE,CAAC;AACvF,CAAC;AAMM,IAAMO,mBAAwC,GAAG,SAA3CA,mBAAwCA,CAAA,EAAS;EAC1D,IAAAC,qBAAA,GAAiB,IAAAC,iDAAyB,EAAC,CAAC;IAAAC,sBAAA,OAAAC,eAAA,CAAAV,OAAA,EAAAO,qBAAA;IAArCI,MAAM,GAAAF,sBAAA;EACb,IAAMG,cAAiC,GAAG,IAAAC,gDAA2B,EAAC,UAAAC,KAAA,EAAwB;IAAA,IAArBC,cAAc,GAAAD,KAAA,CAAdC,cAAc;IACnF,IAAMC,IAAI,GAAGD,cAAc,GAAG,IAAAE,gCAAe,EAACF,cAAc,CAAC,GAAG,IAAI;IACpE,IAAIC,IAAI,EAAE;MACN,OAAOA,IAAI,CAACE,SAAS,CAAC,CAAC,EAAEC,aAAa,CAAC,CAAC,IAAI,EAAE;IAClD;IACA,OAAO,EAAE;EACb,CAAC,CAAC;EAEF,IAAMC,kBAAkB,GAAG,SAArBA,kBAAkBA,CAAIC,KAAwB,EAAK;IACrDV,MAAM,CAACW,eAAe,CAACC,+BAAsB,EAAEF,KAAK,CAAC;EACzD,CAAC;EAED,IAAMG,WAAW,GAAG,SAAdA,WAAWA,CAAA,EAAS;IACtBb,MAAM,CAACW,eAAe,CAACG,gCAAuB,EAAEC,SAAS,CAAC;EAC9D,CAAC;EAED,IAAMC,UAAU,GAAG,SAAbA,UAAUA,CAAA,EAAS;IACrBhB,MAAM,CAACW,eAAe,CAACM,+BAAsB,EAAEF,SAAS,CAAC;EAC7D,CAAC;EAED,IAAMG,OAAO,GAAG,IAAAC,cAAO,EACnB;IAAA,OAAO;MACHT,KAAK,EAAET,cAAc;MACrBQ,kBAAkB,EAAlBA,kBAAkB;MAClBI,WAAW,EAAXA,WAAW;MACXG,UAAU,EAAVA;IACJ,CAAC;EAAA,CAAC,EACF,CAACf,cAAc,CACnB,CAAC;EAED,oBACI9B,MAAA,CAAAkB,OAAA,CAAAC,aAAA,CAACb,gCAAA,CAAA2C,0BAA0B,CAACC,QAAQ;IAACX,KAAK,EAAEQ;EAAQ,gBAChD/C,MAAA,CAAAkB,OAAA,CAAAC,aAAA,CAACV,yBAAyB,MAAE,CACK,CAAC;AAE9C,CAAC;AAACK,OAAA,CAAAU,mBAAA,GAAAA,mBAAA;AAEFA,mBAAmB,CAAC2B,qBAAqB,GAAGpC,2BAA2B"}
+{"version":3,"names":["_react","_interopRequireWildcard","require","_lexical","_LexicalComposerContext","_reactComposition","_TextAlignmentActionContextProps","_useCurrentSelection","_getSelectedNode","BaseTextAlignmentDropDown","makeDecoratable","useEffect","console","log","exports","TextAlignmentActionDropDown","_ref","element","default","createElement","Compose","component","with","_with","TextAlignmentAction","_useLexicalComposerCo","useLexicalComposerContext","_useLexicalComposerCo2","_slicedToArray2","editor","alignmentValue","useDeriveValueFromSelection","_ref2","rangeSelection","node","getSelectedNode","getParent","getFormatType","applyTextAlignment","value","dispatchCommand","FORMAT_ELEMENT_COMMAND","outdentText","OUTDENT_CONTENT_COMMAND","undefined","indentText","INDENT_CONTENT_COMMAND","context","useMemo","TextAlignmentActionContext","Provider","TextAlignmentDropDown"],"sources":["TextAlignmentAction.tsx"],"sourcesContent":["import React, { useEffect, useMemo } from \"react\";\nimport {\n    ElementFormatType,\n    FORMAT_ELEMENT_COMMAND,\n    INDENT_CONTENT_COMMAND,\n    OUTDENT_CONTENT_COMMAND\n} from \"lexical\";\nimport { useLexicalComposerContext } from \"@lexical/react/LexicalComposerContext\";\nimport { Compose, makeDecoratable } from \"@webiny/react-composition\";\nimport { TextAlignmentActionContext } from \"~/context/TextAlignmentActionContextProps\";\nimport { useDeriveValueFromSelection } from \"~/hooks/useCurrentSelection\";\nimport { getSelectedNode } from \"~/utils/getSelectedNode\";\n\n/*\n * Base text alignment dropdown composable component.\n * Note: To add a custom dropdown component use @see LexicalEditorConfig API.\n */\nexport const BaseTextAlignmentDropDown = makeDecoratable(\n    \"BaseTextAlignmentDropDown\",\n    (): JSX.Element | null => {\n        useEffect(() => {\n            console.log(\"Default BaseTextAlignmentDropDown, please add your own component\");\n        }, []);\n        return null;\n    }\n);\n\ninterface TextAlignmentActionDropdownProps {\n    element: JSX.Element;\n}\n\nconst TextAlignmentActionDropDown = ({\n    element\n}: TextAlignmentActionDropdownProps): JSX.Element => {\n    return <Compose component={BaseTextAlignmentDropDown} with={() => () => element} />;\n};\n\nexport type TextAlignmentAction = React.ComponentType<unknown> & {\n    TextAlignmentDropDown: typeof TextAlignmentActionDropDown;\n};\n\nexport const TextAlignmentAction: TextAlignmentAction = () => {\n    const [editor] = useLexicalComposerContext();\n    const alignmentValue: ElementFormatType = useDeriveValueFromSelection(({ rangeSelection }) => {\n        const node = rangeSelection ? getSelectedNode(rangeSelection) : null;\n        if (node) {\n            return node.getParent()?.getFormatType() || \"\";\n        }\n        return \"\";\n    });\n\n    const applyTextAlignment = (value: ElementFormatType) => {\n        editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, value);\n    };\n\n    const outdentText = () => {\n        editor.dispatchCommand(OUTDENT_CONTENT_COMMAND, undefined);\n    };\n\n    const indentText = () => {\n        editor.dispatchCommand(INDENT_CONTENT_COMMAND, undefined);\n    };\n\n    const context = useMemo(\n        () => ({\n            value: alignmentValue,\n            applyTextAlignment,\n            outdentText,\n            indentText\n        }),\n        [alignmentValue]\n    );\n\n    return (\n        <TextAlignmentActionContext.Provider value={context}>\n            <BaseTextAlignmentDropDown />\n        </TextAlignmentActionContext.Provider>\n    );\n};\n\nTextAlignmentAction.TextAlignmentDropDown = TextAlignmentActionDropDown;\n"],"mappings":";;;;;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,QAAA,GAAAD,OAAA;AAMA,IAAAE,uBAAA,GAAAF,OAAA;AACA,IAAAG,iBAAA,GAAAH,OAAA;AACA,IAAAI,gCAAA,GAAAJ,OAAA;AACA,IAAAK,oBAAA,GAAAL,OAAA;AACA,IAAAM,gBAAA,GAAAN,OAAA;AAEA;AACA;AACA;AACA;AACO,IAAMO,yBAAyB,GAAG,IAAAC,iCAAe,EACpD,2BAA2B,EAC3B,YAA0B;EACtB,IAAAC,gBAAS,EAAC,YAAM;IACZC,OAAO,CAACC,GAAG,CAAC,kEAAkE,CAAC;EACnF,CAAC,EAAE,EAAE,CAAC;EACN,OAAO,IAAI;AACf,CACJ,CAAC;AAACC,OAAA,CAAAL,yBAAA,GAAAA,yBAAA;AAMF,IAAMM,2BAA2B,GAAG,SAA9BA,2BAA2BA,CAAAC,IAAA,EAEoB;EAAA,IADjDC,OAAO,GAAAD,IAAA,CAAPC,OAAO;EAEP,oBAAOjB,MAAA,CAAAkB,OAAA,CAAAC,aAAA,CAACd,iBAAA,CAAAe,OAAO;IAACC,SAAS,EAAEZ,yBAA0B;IAACa,IAAI,EAAE,SAAAC,MAAA;MAAA,OAAM;QAAA,OAAMN,OAAO;MAAA;IAAA;EAAC,CAAE,CAAC;AACvF,CAAC;AAMM,IAAMO,mBAAwC,GAAG,SAA3CA,mBAAwCA,CAAA,EAAS;EAC1D,IAAAC,qBAAA,GAAiB,IAAAC,iDAAyB,EAAC,CAAC;IAAAC,sBAAA,OAAAC,eAAA,CAAAV,OAAA,EAAAO,qBAAA;IAArCI,MAAM,GAAAF,sBAAA;EACb,IAAMG,cAAiC,GAAG,IAAAC,gDAA2B,EAAC,UAAAC,KAAA,EAAwB;IAAA,IAArBC,cAAc,GAAAD,KAAA,CAAdC,cAAc;IACnF,IAAMC,IAAI,GAAGD,cAAc,GAAG,IAAAE,gCAAe,EAACF,cAAc,CAAC,GAAG,IAAI;IACpE,IAAIC,IAAI,EAAE;MACN,OAAOA,IAAI,CAACE,SAAS,CAAC,CAAC,EAAEC,aAAa,CAAC,CAAC,IAAI,EAAE;IAClD;IACA,OAAO,EAAE;EACb,CAAC,CAAC;EAEF,IAAMC,kBAAkB,GAAG,SAArBA,kBAAkBA,CAAIC,KAAwB,EAAK;IACrDV,MAAM,CAACW,eAAe,CAACC,+BAAsB,EAAEF,KAAK,CAAC;EACzD,CAAC;EAED,IAAMG,WAAW,GAAG,SAAdA,WAAWA,CAAA,EAAS;IACtBb,MAAM,CAACW,eAAe,CAACG,gCAAuB,EAAEC,SAAS,CAAC;EAC9D,CAAC;EAED,IAAMC,UAAU,GAAG,SAAbA,UAAUA,CAAA,EAAS;IACrBhB,MAAM,CAACW,eAAe,CAACM,+BAAsB,EAAEF,SAAS,CAAC;EAC7D,CAAC;EAED,IAAMG,OAAO,GAAG,IAAAC,cAAO,EACnB;IAAA,OAAO;MACHT,KAAK,EAAET,cAAc;MACrBQ,kBAAkB,EAAlBA,kBAAkB;MAClBI,WAAW,EAAXA,WAAW;MACXG,UAAU,EAAVA;IACJ,CAAC;EAAA,CAAC,EACF,CAACf,cAAc,CACnB,CAAC;EAED,oBACI9B,MAAA,CAAAkB,OAAA,CAAAC,aAAA,CAACb,gCAAA,CAAA2C,0BAA0B,CAACC,QAAQ;IAACX,KAAK,EAAEQ;EAAQ,gBAChD/C,MAAA,CAAAkB,OAAA,CAAAC,aAAA,CAACV,yBAAyB,MAAE,CACK,CAAC;AAE9C,CAAC;AAACK,OAAA,CAAAU,mBAAA,GAAAA,mBAAA;AAEFA,mBAAmB,CAAC2B,qBAAqB,GAAGpC,2BAA2B"}

package/components/ToolbarActions/TypographyAction.d.ts

@@ -1,8 +1,5 @@
 import React from "react";
-export declare const BaseTypographyActionDropDown: React.FunctionComponent<unknown> & {
-    original: React.ComponentType<unknown>;
-    originalName: string;
-};
+export declare const BaseTypographyActionDropDown: import("@webiny/react-composition").DecoratableComponent<() => JSX.Element | null>;
 interface TypographyActionDropdownProps {
     element: JSX.Element;
 }

package/components/ToolbarActions/TypographyAction.js

@@ -19,7 +19,7 @@ var _useCurrentElement2 = require("../../hooks/useCurrentElement");
  * Base composable action component that is mounted on toolbar action as a placeholder for the custom toolbar action.
  * Note: Toa add custom component access trough @see LexicalEditorConfig API
  * */
-var BaseTypographyActionDropDown = (0, _reactComposition.makeComposable)("BaseTypographyActionDropDown", function () {
+var BaseTypographyActionDropDown = (0, _reactComposition.makeDecoratable)("BaseTypographyActionDropDown", function () {
   (0, _react.useEffect)(function () {
     console.log("Default BaseTypographyActionDropDown, please add your own component");
   }, []);

package/components/ToolbarActions/TypographyAction.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_LexicalComposerContext","_reactComposition","_TypographyActionContext","_lexicalNodes","_useRichTextEditor2","_commands","_useCurrentElement2","BaseTypographyActionDropDown","makeComposable","useEffect","console","log","exports","TypographyActionDropDown","_ref","element","default","createElement","Compose","component","with","_with","TypographyAction","_useLexicalComposerCo","useLexicalComposerContext","_useLexicalComposerCo2","_slicedToArray2","editor","_useState","useState","_useState2","typography","setTypography","_useRichTextEditor","useRichTextEditor","themeEmotionMap","_useCurrentElement","useCurrentElement","isTypographySelected","$isTypographyNode","isParagraphSelected","$isParagraphNode","isHeadingSelected","$isHeadingNode","isQuoteSelected","$isQuoteNode","setTypographySelect","useCallback","value","onTypographySelect","tag","includes","dispatchCommand","ADD_TYPOGRAPHY_COMMAND","INSERT_ORDERED_LIST_COMMAND","themeStyleId","id","INSERT_UNORDERED_LIST_COMMAND","INSERT_QUOTE_COMMAND","el","getTypographyValue","styleId","getTypographyStyleId","style","name","css","styles","getStyleId","undefined","elementStyle","TypographyActionContext","Provider","applyTypography","TypographyDropDown"],"sources":["TypographyAction.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useState } from \"react\";\nimport { LexicalCommand } from \"lexical\";\nimport { useLexicalComposerContext } from \"@lexical/react/LexicalComposerContext\";\nimport { Compose, makeComposable } from \"@webiny/react-composition\";\nimport { TypographyValue } from \"@webiny/lexical-theme\";\nimport { TypographyActionContext } from \"~/context/TypographyActionContext\";\nimport {\n    $isHeadingNode,\n    $isParagraphNode,\n    $isQuoteNode,\n    $isTypographyNode,\n    ADD_TYPOGRAPHY_COMMAND,\n    TypographyNode,\n    TypographyPayload\n} from \"@webiny/lexical-nodes\";\nimport { useRichTextEditor } from \"~/hooks/useRichTextEditor\";\nimport {\n    INSERT_ORDERED_LIST_COMMAND,\n    INSERT_UNORDERED_LIST_COMMAND,\n    INSERT_QUOTE_COMMAND,\n    ListCommandPayload,\n    QuoteCommandPayload\n} from \"~/commands\";\nimport { useCurrentElement } from \"~/hooks/useCurrentElement\";\n\n/*\n * Base composable action component that is mounted on toolbar action as a placeholder for the custom toolbar action.\n * Note: Toa add custom component access trough @see LexicalEditorConfig API\n * */\nexport const BaseTypographyActionDropDown = makeComposable(\n    \"BaseTypographyActionDropDown\",\n    (): JSX.Element | null => {\n        useEffect(() => {\n            console.log(\"Default BaseTypographyActionDropDown, please add your own component\");\n        }, []);\n        return null;\n    }\n);\n\ninterface TypographyActionDropdownProps {\n    element: JSX.Element;\n}\n\nconst TypographyActionDropDown = ({ element }: TypographyActionDropdownProps): JSX.Element => {\n    return <Compose component={BaseTypographyActionDropDown} with={() => () => element} />;\n};\n\nexport type TypographyAction = React.ComponentType<unknown> & {\n    TypographyDropDown: typeof TypographyActionDropDown;\n};\n\nexport const TypographyAction: TypographyAction = () => {\n    const [editor] = useLexicalComposerContext();\n    const [typography, setTypography] = useState<TypographyValue>();\n    const { themeEmotionMap } = useRichTextEditor();\n    const { element } = useCurrentElement();\n    const isTypographySelected = $isTypographyNode(element);\n    const isParagraphSelected = $isParagraphNode(element);\n    const isHeadingSelected = $isHeadingNode(element);\n    const isQuoteSelected = $isQuoteNode(element);\n\n    const setTypographySelect = useCallback(\n        (value: TypographyValue) => {\n            setTypography(value);\n        },\n        [typography]\n    );\n\n    const onTypographySelect = useCallback((value: TypographyValue) => {\n        setTypographySelect(value);\n        if (value.tag.includes(\"h\") || value.tag.includes(\"p\")) {\n            editor.dispatchCommand<LexicalCommand<TypographyPayload>>(ADD_TYPOGRAPHY_COMMAND, {\n                value\n            });\n        }\n\n        if (value.tag === \"ol\") {\n            editor.dispatchCommand<LexicalCommand<ListCommandPayload>>(\n                INSERT_ORDERED_LIST_COMMAND,\n                {\n                    themeStyleId: value.id\n                }\n            );\n        }\n\n        if (value.tag === \"ul\") {\n            editor.dispatchCommand<LexicalCommand<ListCommandPayload>>(\n                INSERT_UNORDERED_LIST_COMMAND,\n                {\n                    themeStyleId: value.id\n                }\n            );\n        }\n\n        if (value.tag === \"quoteblock\") {\n            editor.dispatchCommand<LexicalCommand<QuoteCommandPayload>>(INSERT_QUOTE_COMMAND, {\n                themeStyleId: value.id\n            });\n        }\n    }, []);\n\n    useEffect(() => {\n        if (!element) {\n            return;\n        }\n        // header and paragraph elements inserted with typography node\n        if (isTypographySelected) {\n            const el = element as TypographyNode;\n            setTypography(el.getTypographyValue());\n            return;\n        }\n\n        if (isParagraphSelected || isHeadingSelected || isQuoteSelected) {\n            const styleId = element.getTypographyStyleId();\n            if (!styleId) {\n                return;\n            }\n\n            if (!themeEmotionMap) {\n                return;\n            }\n\n            const style = themeEmotionMap[styleId];\n            if (style) {\n                setTypography({\n                    name: style?.name,\n                    id: style.id,\n                    css: style.styles,\n                    tag: style.tag\n                });\n            }\n            return;\n        }\n\n        // list and quote element\n        if (themeEmotionMap && element?.getStyleId) {\n            const themeStyleId = element?.getStyleId() || undefined;\n            if (themeStyleId) {\n                const elementStyle = themeEmotionMap[themeStyleId];\n                if (elementStyle) {\n                    setTypography({\n                        id: elementStyle.id,\n                        css: elementStyle.styles,\n                        name: elementStyle.name,\n                        tag: elementStyle.tag\n                    });\n                }\n            }\n        }\n    }, [element, isTypographySelected, isQuoteSelected, isParagraphSelected, isHeadingSelected]);\n\n    return (\n        <TypographyActionContext.Provider\n            value={{\n                value: typography,\n                applyTypography: onTypographySelect\n            }}\n        >\n            <BaseTypographyActionDropDown />\n        </TypographyActionContext.Provider>\n    );\n};\n\nTypographyAction.TypographyDropDown = TypographyActionDropDown;\n"],"mappings":"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"}
+{"version":3,"names":["_react","_interopRequireWildcard","require","_LexicalComposerContext","_reactComposition","_TypographyActionContext","_lexicalNodes","_useRichTextEditor2","_commands","_useCurrentElement2","BaseTypographyActionDropDown","makeDecoratable","useEffect","console","log","exports","TypographyActionDropDown","_ref","element","default","createElement","Compose","component","with","_with","TypographyAction","_useLexicalComposerCo","useLexicalComposerContext","_useLexicalComposerCo2","_slicedToArray2","editor","_useState","useState","_useState2","typography","setTypography","_useRichTextEditor","useRichTextEditor","themeEmotionMap","_useCurrentElement","useCurrentElement","isTypographySelected","$isTypographyNode","isParagraphSelected","$isParagraphNode","isHeadingSelected","$isHeadingNode","isQuoteSelected","$isQuoteNode","setTypographySelect","useCallback","value","onTypographySelect","tag","includes","dispatchCommand","ADD_TYPOGRAPHY_COMMAND","INSERT_ORDERED_LIST_COMMAND","themeStyleId","id","INSERT_UNORDERED_LIST_COMMAND","INSERT_QUOTE_COMMAND","el","getTypographyValue","styleId","getTypographyStyleId","style","name","css","styles","getStyleId","undefined","elementStyle","TypographyActionContext","Provider","applyTypography","TypographyDropDown"],"sources":["TypographyAction.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useState } from \"react\";\nimport { LexicalCommand } from \"lexical\";\nimport { useLexicalComposerContext } from \"@lexical/react/LexicalComposerContext\";\nimport { Compose, makeDecoratable } from \"@webiny/react-composition\";\nimport { TypographyValue } from \"@webiny/lexical-theme\";\nimport { TypographyActionContext } from \"~/context/TypographyActionContext\";\nimport {\n    $isHeadingNode,\n    $isParagraphNode,\n    $isQuoteNode,\n    $isTypographyNode,\n    ADD_TYPOGRAPHY_COMMAND,\n    TypographyNode,\n    TypographyPayload\n} from \"@webiny/lexical-nodes\";\nimport { useRichTextEditor } from \"~/hooks/useRichTextEditor\";\nimport {\n    INSERT_ORDERED_LIST_COMMAND,\n    INSERT_UNORDERED_LIST_COMMAND,\n    INSERT_QUOTE_COMMAND,\n    ListCommandPayload,\n    QuoteCommandPayload\n} from \"~/commands\";\nimport { useCurrentElement } from \"~/hooks/useCurrentElement\";\n\n/*\n * Base composable action component that is mounted on toolbar action as a placeholder for the custom toolbar action.\n * Note: Toa add custom component access trough @see LexicalEditorConfig API\n * */\nexport const BaseTypographyActionDropDown = makeDecoratable(\n    \"BaseTypographyActionDropDown\",\n    (): JSX.Element | null => {\n        useEffect(() => {\n            console.log(\"Default BaseTypographyActionDropDown, please add your own component\");\n        }, []);\n        return null;\n    }\n);\n\ninterface TypographyActionDropdownProps {\n    element: JSX.Element;\n}\n\nconst TypographyActionDropDown = ({ element }: TypographyActionDropdownProps): JSX.Element => {\n    return <Compose component={BaseTypographyActionDropDown} with={() => () => element} />;\n};\n\nexport type TypographyAction = React.ComponentType<unknown> & {\n    TypographyDropDown: typeof TypographyActionDropDown;\n};\n\nexport const TypographyAction: TypographyAction = () => {\n    const [editor] = useLexicalComposerContext();\n    const [typography, setTypography] = useState<TypographyValue>();\n    const { themeEmotionMap } = useRichTextEditor();\n    const { element } = useCurrentElement();\n    const isTypographySelected = $isTypographyNode(element);\n    const isParagraphSelected = $isParagraphNode(element);\n    const isHeadingSelected = $isHeadingNode(element);\n    const isQuoteSelected = $isQuoteNode(element);\n\n    const setTypographySelect = useCallback(\n        (value: TypographyValue) => {\n            setTypography(value);\n        },\n        [typography]\n    );\n\n    const onTypographySelect = useCallback((value: TypographyValue) => {\n        setTypographySelect(value);\n        if (value.tag.includes(\"h\") || value.tag.includes(\"p\")) {\n            editor.dispatchCommand<LexicalCommand<TypographyPayload>>(ADD_TYPOGRAPHY_COMMAND, {\n                value\n            });\n        }\n\n        if (value.tag === \"ol\") {\n            editor.dispatchCommand<LexicalCommand<ListCommandPayload>>(\n                INSERT_ORDERED_LIST_COMMAND,\n                {\n                    themeStyleId: value.id\n                }\n            );\n        }\n\n        if (value.tag === \"ul\") {\n            editor.dispatchCommand<LexicalCommand<ListCommandPayload>>(\n                INSERT_UNORDERED_LIST_COMMAND,\n                {\n                    themeStyleId: value.id\n                }\n            );\n        }\n\n        if (value.tag === \"quoteblock\") {\n            editor.dispatchCommand<LexicalCommand<QuoteCommandPayload>>(INSERT_QUOTE_COMMAND, {\n                themeStyleId: value.id\n            });\n        }\n    }, []);\n\n    useEffect(() => {\n        if (!element) {\n            return;\n        }\n        // header and paragraph elements inserted with typography node\n        if (isTypographySelected) {\n            const el = element as TypographyNode;\n            setTypography(el.getTypographyValue());\n            return;\n        }\n\n        if (isParagraphSelected || isHeadingSelected || isQuoteSelected) {\n            const styleId = element.getTypographyStyleId();\n            if (!styleId) {\n                return;\n            }\n\n            if (!themeEmotionMap) {\n                return;\n            }\n\n            const style = themeEmotionMap[styleId];\n            if (style) {\n                setTypography({\n                    name: style?.name,\n                    id: style.id,\n                    css: style.styles,\n                    tag: style.tag\n                });\n            }\n            return;\n        }\n\n        // list and quote element\n        if (themeEmotionMap && element?.getStyleId) {\n            const themeStyleId = element?.getStyleId() || undefined;\n            if (themeStyleId) {\n                const elementStyle = themeEmotionMap[themeStyleId];\n                if (elementStyle) {\n                    setTypography({\n                        id: elementStyle.id,\n                        css: elementStyle.styles,\n                        name: elementStyle.name,\n                        tag: elementStyle.tag\n                    });\n                }\n            }\n        }\n    }, [element, isTypographySelected, isQuoteSelected, isParagraphSelected, isHeadingSelected]);\n\n    return (\n        <TypographyActionContext.Provider\n            value={{\n                value: typography,\n                applyTypography: onTypographySelect\n            }}\n        >\n            <BaseTypographyActionDropDown />\n        </TypographyActionContext.Provider>\n    );\n};\n\nTypographyAction.TypographyDropDown = TypographyActionDropDown;\n"],"mappings":";;;;;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AAEA,IAAAC,uBAAA,GAAAD,OAAA;AACA,IAAAE,iBAAA,GAAAF,OAAA;AAEA,IAAAG,wBAAA,GAAAH,OAAA;AACA,IAAAI,aAAA,GAAAJ,OAAA;AASA,IAAAK,mBAAA,GAAAL,OAAA;AACA,IAAAM,SAAA,GAAAN,OAAA;AAOA,IAAAO,mBAAA,GAAAP,OAAA;AAEA;AACA;AACA;AACA;AACO,IAAMQ,4BAA4B,GAAG,IAAAC,iCAAe,EACvD,8BAA8B,EAC9B,YAA0B;EACtB,IAAAC,gBAAS,EAAC,YAAM;IACZC,OAAO,CAACC,GAAG,CAAC,qEAAqE,CAAC;EACtF,CAAC,EAAE,EAAE,CAAC;EACN,OAAO,IAAI;AACf,CACJ,CAAC;AAACC,OAAA,CAAAL,4BAAA,GAAAA,4BAAA;AAMF,IAAMM,wBAAwB,GAAG,SAA3BA,wBAAwBA,CAAAC,IAAA,EAAgE;EAAA,IAA1DC,OAAO,GAAAD,IAAA,CAAPC,OAAO;EACvC,oBAAOlB,MAAA,CAAAmB,OAAA,CAAAC,aAAA,CAAChB,iBAAA,CAAAiB,OAAO;IAACC,SAAS,EAAEZ,4BAA6B;IAACa,IAAI,EAAE,SAAAC,MAAA;MAAA,OAAM;QAAA,OAAMN,OAAO;MAAA;IAAA;EAAC,CAAE,CAAC;AAC1F,CAAC;AAMM,IAAMO,gBAAkC,GAAG,SAArCA,gBAAkCA,CAAA,EAAS;EACpD,IAAAC,qBAAA,GAAiB,IAAAC,iDAAyB,EAAC,CAAC;IAAAC,sBAAA,OAAAC,eAAA,CAAAV,OAAA,EAAAO,qBAAA;IAArCI,MAAM,GAAAF,sBAAA;EACb,IAAAG,SAAA,GAAoC,IAAAC,eAAQ,EAAkB,CAAC;IAAAC,UAAA,OAAAJ,eAAA,CAAAV,OAAA,EAAAY,SAAA;IAAxDG,UAAU,GAAAD,UAAA;IAAEE,aAAa,GAAAF,UAAA;EAChC,IAAAG,kBAAA,GAA4B,IAAAC,qCAAiB,EAAC,CAAC;IAAvCC,eAAe,GAAAF,kBAAA,CAAfE,eAAe;EACvB,IAAAC,kBAAA,GAAoB,IAAAC,qCAAiB,EAAC,CAAC;IAA/BtB,OAAO,GAAAqB,kBAAA,CAAPrB,OAAO;EACf,IAAMuB,oBAAoB,GAAG,IAAAC,+BAAiB,EAACxB,OAAO,CAAC;EACvD,IAAMyB,mBAAmB,GAAG,IAAAC,8BAAgB,EAAC1B,OAAO,CAAC;EACrD,IAAM2B,iBAAiB,GAAG,IAAAC,4BAAc,EAAC5B,OAAO,CAAC;EACjD,IAAM6B,eAAe,GAAG,IAAAC,0BAAY,EAAC9B,OAAO,CAAC;EAE7C,IAAM+B,mBAAmB,GAAG,IAAAC,kBAAW,EACnC,UAACC,KAAsB,EAAK;IACxBhB,aAAa,CAACgB,KAAK,CAAC;EACxB,CAAC,EACD,CAACjB,UAAU,CACf,CAAC;EAED,IAAMkB,kBAAkB,GAAG,IAAAF,kBAAW,EAAC,UAACC,KAAsB,EAAK;IAC/DF,mBAAmB,CAACE,KAAK,CAAC;IAC1B,IAAIA,KAAK,CAACE,GAAG,CAACC,QAAQ,CAAC,GAAG,CAAC,IAAIH,KAAK,CAACE,GAAG,CAACC,QAAQ,CAAC,GAAG,CAAC,EAAE;MACpDxB,MAAM,CAACyB,eAAe,CAAoCC,oCAAsB,EAAE;QAC9EL,KAAK,EAALA;MACJ,CAAC,CAAC;IACN;IAEA,IAAIA,KAAK,CAACE,GAAG,KAAK,IAAI,EAAE;MACpBvB,MAAM,CAACyB,eAAe,CAClBE,qCAA2B,EAC3B;QACIC,YAAY,EAAEP,KAAK,CAACQ;MACxB,CACJ,CAAC;IACL;IAEA,IAAIR,KAAK,CAACE,GAAG,KAAK,IAAI,EAAE;MACpBvB,MAAM,CAACyB,eAAe,CAClBK,uCAA6B,EAC7B;QACIF,YAAY,EAAEP,KAAK,CAACQ;MACxB,CACJ,CAAC;IACL;IAEA,IAAIR,KAAK,CAACE,GAAG,KAAK,YAAY,EAAE;MAC5BvB,MAAM,CAACyB,eAAe,CAAsCM,8BAAoB,EAAE;QAC9EH,YAAY,EAAEP,KAAK,CAACQ;MACxB,CAAC,CAAC;IACN;EACJ,CAAC,EAAE,EAAE,CAAC;EAEN,IAAA/C,gBAAS,EAAC,YAAM;IACZ,IAAI,CAACM,OAAO,EAAE;MACV;IACJ;IACA;IACA,IAAIuB,oBAAoB,EAAE;MACtB,IAAMqB,EAAE,GAAG5C,OAAyB;MACpCiB,aAAa,CAAC2B,EAAE,CAACC,kBAAkB,CAAC,CAAC,CAAC;MACtC;IACJ;IAEA,IAAIpB,mBAAmB,IAAIE,iBAAiB,IAAIE,eAAe,EAAE;MAC7D,IAAMiB,OAAO,GAAG9C,OAAO,CAAC+C,oBAAoB,CAAC,CAAC;MAC9C,IAAI,CAACD,OAAO,EAAE;QACV;MACJ;MAEA,IAAI,CAAC1B,eAAe,EAAE;QAClB;MACJ;MAEA,IAAM4B,KAAK,GAAG5B,eAAe,CAAC0B,OAAO,CAAC;MACtC,IAAIE,KAAK,EAAE;QACP/B,aAAa,CAAC;UACVgC,IAAI,EAAED,KAAK,EAAEC,IAAI;UACjBR,EAAE,EAAEO,KAAK,CAACP,EAAE;UACZS,GAAG,EAAEF,KAAK,CAACG,MAAM;UACjBhB,GAAG,EAAEa,KAAK,CAACb;QACf,CAAC,CAAC;MACN;MACA;IACJ;;IAEA;IACA,IAAIf,eAAe,IAAIpB,OAAO,EAAEoD,UAAU,EAAE;MACxC,IAAMZ,YAAY,GAAGxC,OAAO,EAAEoD,UAAU,CAAC,CAAC,IAAIC,SAAS;MACvD,IAAIb,YAAY,EAAE;QACd,IAAMc,YAAY,GAAGlC,eAAe,CAACoB,YAAY,CAAC;QAClD,IAAIc,YAAY,EAAE;UACdrC,aAAa,CAAC;YACVwB,EAAE,EAAEa,YAAY,CAACb,EAAE;YACnBS,GAAG,EAAEI,YAAY,CAACH,MAAM;YACxBF,IAAI,EAAEK,YAAY,CAACL,IAAI;YACvBd,GAAG,EAAEmB,YAAY,CAACnB;UACtB,CAAC,CAAC;QACN;MACJ;IACJ;EACJ,CAAC,EAAE,CAACnC,OAAO,EAAEuB,oBAAoB,EAAEM,eAAe,EAAEJ,mBAAmB,EAAEE,iBAAiB,CAAC,CAAC;EAE5F,oBACI7C,MAAA,CAAAmB,OAAA,CAAAC,aAAA,CAACf,wBAAA,CAAAoE,uBAAuB,CAACC,QAAQ;IAC7BvB,KAAK,EAAE;MACHA,KAAK,EAAEjB,UAAU;MACjByC,eAAe,EAAEvB;IACrB;EAAE,gBAEFpD,MAAA,CAAAmB,OAAA,CAAAC,aAAA,CAACV,4BAA4B,MAAE,CACD,CAAC;AAE3C,CAAC;AAACK,OAAA,CAAAU,gBAAA,GAAAA,gBAAA;AAEFA,gBAAgB,CAACmD,kBAAkB,GAAG5D,wBAAwB"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@webiny/lexical-editor",
-	"version": "5.39.1-beta.0",
+	"version": "5.39.1",
 	"repository": {
 		"type": "git",
 		"url": "https://github.com/webiny/webiny-js.git"
@@ -14,17 +14,17 @@
 		"@lexical/rich-text": "0.12.2",
 		"@lexical/selection": "0.12.2",
 		"@lexical/utils": "0.12.2",
-		"@webiny/lexical-nodes": "5.39.1-beta.0",
-		"@webiny/lexical-theme": "5.39.1-beta.0",
-		"@webiny/react-composition": "5.39.1-beta.0",
-		"@webiny/react-properties": "5.39.1-beta.0",
+		"@webiny/lexical-nodes": "5.39.1",
+		"@webiny/lexical-theme": "5.39.1",
+		"@webiny/react-composition": "5.39.1",
+		"@webiny/react-properties": "5.39.1",
 		"lexical": "0.12.2",
 		"react": "17.0.2",
 		"react-dom": "17.0.2"
 	},
 	"devDependencies": {
-		"@webiny/cli": "5.39.1-beta.0",
-		"@webiny/project-utils": "5.39.1-beta.0"
+		"@webiny/cli": "5.39.1",
+		"@webiny/project-utils": "5.39.1"
 	},
 	"publishConfig": {
 		"access": "public",
@@ -34,5 +34,5 @@
 		"build": "yarn webiny run build",
 		"watch": "yarn webiny run watch"
 	},
-	"gitHead": "4637f8570aa523ec1069e5907c3535c3dcdda5fe"
+	"gitHead": "6fc74b45740bd4123dcf9b5890bfacee594208bf"
 }