@webiny/lexical-editor 5.35.2 → 5.36.0-beta.0

package/components/Editor/HeadingEditor.js

@@ -22,7 +22,7 @@ var HeadingEditor = function HeadingEditor(_ref) {
     toolbar: /*#__PURE__*/_react.default.createElement(_HeadingToolbar.HeadingToolbar, null),
     tag: tag !== null && tag !== void 0 ? tag : "h1",
     placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : "Enter your heading text here..."
-  }, rest), /*#__PURE__*/_react.default.createElement(_LexicalLinkPlugin.LinkPlugin, null), /*#__PURE__*/_react.default.createElement(_WebinyQuoteNodePlugin.WebinyQuotePlugin, null), /*#__PURE__*/_react.default.createElement(_ClickableLinkPlugin.ClickableLinkPlugin, null), /*#__PURE__*/_react.default.createElement(_FloatingLinkEditorPlugin.FloatingLinkEditorPlugin, {
+  }, rest), /*#__PURE__*/_react.default.createElement(_LexicalLinkPlugin.LinkPlugin, null), /*#__PURE__*/_react.default.createElement(_WebinyQuoteNodePlugin.QuotePlugin, null), /*#__PURE__*/_react.default.createElement(_ClickableLinkPlugin.ClickableLinkPlugin, null), /*#__PURE__*/_react.default.createElement(_FloatingLinkEditorPlugin.FloatingLinkEditorPlugin, {
     anchorElem: document.body
   }));
 };

package/components/Editor/HeadingEditor.js.map

@@ -1 +1 @@
-{"version":3,"names":["HeadingEditor","tag","placeholder","rest","document","body"],"sources":["HeadingEditor.tsx"],"sourcesContent":["import React from \"react\";\nimport { LinkPlugin } from \"@lexical/react/LexicalLinkPlugin\";\nimport { ClickableLinkPlugin } from \"~/plugins/ClickableLinkPlugin/ClickableLinkPlugin\";\nimport { FloatingLinkEditorPlugin } from \"~/plugins/FloatingLinkEditorPlugin/FloatingLinkEditorPlugin\";\nimport { HeadingToolbar } from \"~/components/Toolbar/HeadingToolbar\";\nimport { RichTextEditor, RichTextEditorProps } from \"~/components/Editor/RichTextEditor\";\nimport { WebinyQuotePlugin } from \"~/plugins/WebinyQuoteNodePlugin/WebinyQuoteNodePlugin\";\n\ninterface HeadingEditorProps extends RichTextEditorProps {\n    tag?: \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\";\n}\n\nexport const HeadingEditor: React.FC<HeadingEditorProps> = ({ tag, placeholder, ...rest }) => {\n    return (\n        <RichTextEditor\n            toolbar={<HeadingToolbar />}\n            tag={tag ?? \"h1\"}\n            placeholder={placeholder ?? \"Enter your heading text here...\"}\n            {...rest}\n        >\n            <LinkPlugin />\n            <WebinyQuotePlugin />\n            <ClickableLinkPlugin />\n            <FloatingLinkEditorPlugin anchorElem={document.body} />\n        </RichTextEditor>\n    );\n};\n"],"mappings":";;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AAA0F;AAMnF,IAAMA,aAA2C,GAAG,SAA9CA,aAA2C,OAAsC;EAAA,IAAhCC,GAAG,QAAHA,GAAG;IAAEC,WAAW,QAAXA,WAAW;IAAKC,IAAI;EACnF,oBACI,6BAAC,8BAAc;IACX,OAAO,eAAE,6BAAC,8BAAc,OAAI;IAC5B,GAAG,EAAEF,GAAG,aAAHA,GAAG,cAAHA,GAAG,GAAI,IAAK;IACjB,WAAW,EAAEC,WAAW,aAAXA,WAAW,cAAXA,WAAW,GAAI;EAAkC,GAC1DC,IAAI,gBAER,6BAAC,6BAAU,OAAG,eACd,6BAAC,wCAAiB,OAAG,eACrB,6BAAC,wCAAmB,OAAG,eACvB,6BAAC,kDAAwB;IAAC,UAAU,EAAEC,QAAQ,CAACC;EAAK,EAAG,CAC1C;AAEzB,CAAC;AAAC"}
+{"version":3,"names":["HeadingEditor","tag","placeholder","rest","document","body"],"sources":["HeadingEditor.tsx"],"sourcesContent":["import React from \"react\";\nimport { LinkPlugin } from \"@lexical/react/LexicalLinkPlugin\";\nimport { ClickableLinkPlugin } from \"~/plugins/ClickableLinkPlugin/ClickableLinkPlugin\";\nimport { FloatingLinkEditorPlugin } from \"~/plugins/FloatingLinkEditorPlugin/FloatingLinkEditorPlugin\";\nimport { HeadingToolbar } from \"~/components/Toolbar/HeadingToolbar\";\nimport { RichTextEditor, RichTextEditorProps } from \"~/components/Editor/RichTextEditor\";\nimport { QuotePlugin } from \"~/plugins/WebinyQuoteNodePlugin/WebinyQuoteNodePlugin\";\n\ninterface HeadingEditorProps extends RichTextEditorProps {\n    tag?: \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\";\n}\n\nexport const HeadingEditor: React.FC<HeadingEditorProps> = ({ tag, placeholder, ...rest }) => {\n    return (\n        <RichTextEditor\n            toolbar={<HeadingToolbar />}\n            tag={tag ?? \"h1\"}\n            placeholder={placeholder ?? \"Enter your heading text here...\"}\n            {...rest}\n        >\n            <LinkPlugin />\n            <QuotePlugin />\n            <ClickableLinkPlugin />\n            <FloatingLinkEditorPlugin anchorElem={document.body} />\n        </RichTextEditor>\n    );\n};\n"],"mappings":";;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AAAoF;AAM7E,IAAMA,aAA2C,GAAG,SAA9CA,aAA2C,OAAsC;EAAA,IAAhCC,GAAG,QAAHA,GAAG;IAAEC,WAAW,QAAXA,WAAW;IAAKC,IAAI;EACnF,oBACI,6BAAC,8BAAc;IACX,OAAO,eAAE,6BAAC,8BAAc,OAAI;IAC5B,GAAG,EAAEF,GAAG,aAAHA,GAAG,cAAHA,GAAG,GAAI,IAAK;IACjB,WAAW,EAAEC,WAAW,aAAXA,WAAW,cAAXA,WAAW,GAAI;EAAkC,GAC1DC,IAAI,gBAER,6BAAC,6BAAU,OAAG,eACd,6BAAC,kCAAW,OAAG,eACf,6BAAC,wCAAmB,OAAG,eACvB,6BAAC,kDAAwB;IAAC,UAAU,EAAEC,QAAQ,CAACC;EAAK,EAAG,CAC1C;AAEzB,CAAC;AAAC"}

package/components/Editor/RichTextEditor.js

@@ -100,7 +100,7 @@ var BaseRichTextEditor = function BaseRichTextEditor(_ref) {
     onChange: handleOnChange
   }), value && /*#__PURE__*/_react.default.createElement(_LexicalUpdateStatePlugin.LexicalUpdateStatePlugin, {
     value: value
-  }), /*#__PURE__*/_react.default.createElement(_LexicalClearEditorPlugin.ClearEditorPlugin, null), /*#__PURE__*/_react.default.createElement(_FontColorPlugin.FontColorPlugin, null), /*#__PURE__*/_react.default.createElement(_TypographyPlugin.TypographyPlugin, null), /*#__PURE__*/_react.default.createElement(_WebinyQuoteNodePlugin.WebinyQuotePlugin, null), /*#__PURE__*/_react.default.createElement(_LexicalHistoryPlugin.HistoryPlugin, {
+  }), /*#__PURE__*/_react.default.createElement(_LexicalClearEditorPlugin.ClearEditorPlugin, null), /*#__PURE__*/_react.default.createElement(_FontColorPlugin.FontColorPlugin, null), /*#__PURE__*/_react.default.createElement(_TypographyPlugin.TypographyPlugin, null), /*#__PURE__*/_react.default.createElement(_WebinyQuoteNodePlugin.QuotePlugin, null), /*#__PURE__*/_react.default.createElement(_LexicalHistoryPlugin.HistoryPlugin, {
     externalHistoryState: historyState
   }), onBlur && /*#__PURE__*/_react.default.createElement(_BlurEventPlugin.BlurEventPlugin, {
     onBlur: onBlur

package/components/Editor/RichTextEditor.js.map

@@ -1 +1 @@
-{"version":3,"names":["BaseRichTextEditor","toolbar","onChange","value","nodes","placeholder","children","onBlur","focus","width","height","theme","themeEmotionMap","useSharedHistoryContext","historyState","placeholderElem","scrollRef","useRef","useState","undefined","floatingAnchorElem","setFloatingAnchorElem","useRichTextEditor","setTheme","setThemeEmotionMap","useEffect","onRef","_floatingAnchorElem","sizeStyle","initialConfig","editorState","isValidLexicalData","generateInitialLexicalValue","namespace","onError","error","WebinyNodes","webinyEditorTheme","emotionMap","handleOnChange","editor","read","getEditorState","JSON","stringify","toJSON","outline","LexicalErrorBoundary","RichTextEditor","makeComposable","props","css","toTypographyEmotionMap"],"sources":["RichTextEditor.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from \"react\";\nimport { LexicalValue, ThemeEmotionMap } from \"~/types\";\nimport { Placeholder } from \"~/ui/Placeholder\";\nimport { generateInitialLexicalValue } from \"~/utils/generateInitialLexicalValue\";\nimport { EditorState } from \"lexical/LexicalEditorState\";\nimport { Klass, LexicalEditor, LexicalNode } from \"lexical\";\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 { ContentEditable } from \"@lexical/react/LexicalContentEditable\";\nimport { RichTextEditorProvider } from \"~/context/RichTextEditorContext\";\nimport { isValidLexicalData } from \"~/utils/isValidLexicalData\";\nimport { LexicalUpdateStatePlugin } from \"~/plugins/LexicalUpdateStatePlugin\";\nimport { BlurEventPlugin } from \"~/plugins/BlurEventPlugin/BlurEventPlugin\";\nimport { FontColorPlugin } from \"~/plugins/FontColorPlugin/FontColorPlugin\";\nimport { webinyEditorTheme, WebinyTheme } from \"~/themes/webinyLexicalTheme\";\nimport { WebinyNodes } from \"~/nodes/webinyNodes\";\nimport { TypographyPlugin } from \"~/plugins/TypographyPlugin/TypographyPlugin\";\nimport { WebinyQuotePlugin } from \"~/plugins/WebinyQuoteNodePlugin/WebinyQuoteNodePlugin\";\nimport { HistoryPlugin } from \"@lexical/react/LexicalHistoryPlugin\";\nimport { SharedHistoryContext, useSharedHistoryContext } from \"~/context/SharedHistoryContext\";\nimport { useRichTextEditor } from \"~/hooks/useRichTextEditor\";\nimport { ClassNames } from \"@emotion/react\";\nimport { toTypographyEmotionMap } from \"~/utils/toTypographyEmotionMap\";\n\nexport interface RichTextEditorProps {\n    toolbar?: React.ReactNode;\n    tag?: string;\n    onChange?: (json: LexicalValue) => void;\n    value: LexicalValue | null;\n    focus?: boolean;\n    placeholder?: string;\n    nodes?: Klass<LexicalNode>[];\n    /**\n     * @description Lexical plugins\n     */\n    children?: React.ReactNode | React.ReactNode[];\n    onBlur?: (editorState: LexicalValue) => void;\n    height?: number | string;\n    width?: number | string;\n    /*\n     * @description Theme to be injected into lexical editor\n     */\n    theme: WebinyTheme;\n    themeEmotionMap?: ThemeEmotionMap;\n}\n\nconst BaseRichTextEditor: React.FC<RichTextEditorProps> = ({\n    toolbar,\n    onChange,\n    value,\n    nodes,\n    placeholder,\n    children,\n    onBlur,\n    focus,\n    width,\n    height,\n    theme,\n    themeEmotionMap\n}: RichTextEditorProps) => {\n    const { historyState } = useSharedHistoryContext();\n    const placeholderElem = <Placeholder>{placeholder || \"Enter text...\"}</Placeholder>;\n    const scrollRef = useRef(null);\n    const [floatingAnchorElem, setFloatingAnchorElem] = useState<HTMLElement | undefined>(\n        undefined\n    );\n    const { setTheme, setThemeEmotionMap } = useRichTextEditor();\n\n    useEffect(() => {\n        setTheme(theme);\n        setThemeEmotionMap(themeEmotionMap);\n    }, [themeEmotionMap]);\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 initialConfig = {\n        editorState: isValidLexicalData(value) ? value : generateInitialLexicalValue(),\n        namespace: \"webiny\",\n        onError: (error: Error) => {\n            throw error;\n        },\n        nodes: [...WebinyNodes, ...(nodes || [])],\n        theme: { ...webinyEditorTheme, 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                //TODO: send plain JSON object\n                onChange(JSON.stringify(editorState.toJSON()));\n            }\n        });\n    }\n\n    return (\n        <LexicalComposer initialConfig={initialConfig}>\n            <div ref={scrollRef} style={{ ...sizeStyle }}>\n                {/* data */}\n                <OnChangePlugin onChange={handleOnChange} />\n                {value && <LexicalUpdateStatePlugin value={value} />}\n                <ClearEditorPlugin />\n                <FontColorPlugin />\n                <TypographyPlugin />\n                <WebinyQuotePlugin />\n                <HistoryPlugin externalHistoryState={historyState} />\n                {/* Events */}\n                {onBlur && <BlurEventPlugin onBlur={onBlur} />}\n                {focus && <AutoFocusPlugin />}\n                {/* External plugins and components */}\n                {children}\n                <RichTextPlugin\n                    contentEditable={\n                        <div className=\"editor-scroller\" style={{ ...sizeStyle }}>\n                            <div className=\"editor\" ref={onRef} style={{ ...sizeStyle }}>\n                                <ContentEditable style={{ outline: 0, ...sizeStyle }} />\n                            </div>\n                        </div>\n                    }\n                    placeholder={placeholderElem}\n                    ErrorBoundary={LexicalErrorBoundary}\n                />\n                {/* Toolbar */}\n                {floatingAnchorElem && toolbar}\n            </div>\n        </LexicalComposer>\n    );\n};\n\n/**\n * @description Main editor container\n */\nexport const RichTextEditor = makeComposable<RichTextEditorProps>(\"RichTextEditor\", props => {\n    return (\n        <RichTextEditorProvider>\n            <ClassNames>\n                {({ css }) => {\n                    const themeEmotionMap =\n                        props?.themeEmotionMap ?? toTypographyEmotionMap(css, props.theme);\n                    return (\n                        <SharedHistoryContext>\n                            <BaseRichTextEditor {...props} themeEmotionMap={themeEmotionMap} />\n                        </SharedHistoryContext>\n                    );\n                }}\n            </ClassNames>\n        </RichTextEditorProvider>\n    );\n});\n"],"mappings":"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"}
+{"version":3,"names":["BaseRichTextEditor","toolbar","onChange","value","nodes","placeholder","children","onBlur","focus","width","height","theme","themeEmotionMap","useSharedHistoryContext","historyState","placeholderElem","scrollRef","useRef","useState","undefined","floatingAnchorElem","setFloatingAnchorElem","useRichTextEditor","setTheme","setThemeEmotionMap","useEffect","onRef","_floatingAnchorElem","sizeStyle","initialConfig","editorState","isValidLexicalData","generateInitialLexicalValue","namespace","onError","error","WebinyNodes","webinyEditorTheme","emotionMap","handleOnChange","editor","read","getEditorState","JSON","stringify","toJSON","outline","LexicalErrorBoundary","RichTextEditor","makeComposable","props","css","toTypographyEmotionMap"],"sources":["RichTextEditor.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from \"react\";\nimport { LexicalValue, ThemeEmotionMap } from \"~/types\";\nimport { Placeholder } from \"~/ui/Placeholder\";\nimport { generateInitialLexicalValue } from \"~/utils/generateInitialLexicalValue\";\nimport { EditorState } from \"lexical/LexicalEditorState\";\nimport { Klass, LexicalEditor, LexicalNode } from \"lexical\";\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 { ContentEditable } from \"@lexical/react/LexicalContentEditable\";\nimport { RichTextEditorProvider } from \"~/context/RichTextEditorContext\";\nimport { isValidLexicalData } from \"~/utils/isValidLexicalData\";\nimport { LexicalUpdateStatePlugin } from \"~/plugins/LexicalUpdateStatePlugin\";\nimport { BlurEventPlugin } from \"~/plugins/BlurEventPlugin/BlurEventPlugin\";\nimport { FontColorPlugin } from \"~/plugins/FontColorPlugin/FontColorPlugin\";\nimport { webinyEditorTheme, WebinyTheme } from \"~/themes/webinyLexicalTheme\";\nimport { WebinyNodes } from \"~/nodes/webinyNodes\";\nimport { TypographyPlugin } from \"~/plugins/TypographyPlugin/TypographyPlugin\";\nimport { QuotePlugin } from \"~/plugins/WebinyQuoteNodePlugin/WebinyQuoteNodePlugin\";\nimport { HistoryPlugin } from \"@lexical/react/LexicalHistoryPlugin\";\nimport { SharedHistoryContext, useSharedHistoryContext } from \"~/context/SharedHistoryContext\";\nimport { useRichTextEditor } from \"~/hooks/useRichTextEditor\";\nimport { ClassNames } from \"@emotion/react\";\nimport { toTypographyEmotionMap } from \"~/utils/toTypographyEmotionMap\";\n\nexport interface RichTextEditorProps {\n    toolbar?: React.ReactNode;\n    tag?: string;\n    onChange?: (json: LexicalValue) => void;\n    value: LexicalValue | null;\n    focus?: boolean;\n    placeholder?: string;\n    nodes?: Klass<LexicalNode>[];\n    /**\n     * @description Lexical plugins\n     */\n    children?: React.ReactNode | React.ReactNode[];\n    onBlur?: (editorState: LexicalValue) => void;\n    height?: number | string;\n    width?: number | string;\n    /*\n     * @description Theme to be injected into lexical editor\n     */\n    theme: WebinyTheme;\n    themeEmotionMap?: ThemeEmotionMap;\n}\n\nconst BaseRichTextEditor: React.FC<RichTextEditorProps> = ({\n    toolbar,\n    onChange,\n    value,\n    nodes,\n    placeholder,\n    children,\n    onBlur,\n    focus,\n    width,\n    height,\n    theme,\n    themeEmotionMap\n}: RichTextEditorProps) => {\n    const { historyState } = useSharedHistoryContext();\n    const placeholderElem = <Placeholder>{placeholder || \"Enter text...\"}</Placeholder>;\n    const scrollRef = useRef(null);\n    const [floatingAnchorElem, setFloatingAnchorElem] = useState<HTMLElement | undefined>(\n        undefined\n    );\n    const { setTheme, setThemeEmotionMap } = useRichTextEditor();\n\n    useEffect(() => {\n        setTheme(theme);\n        setThemeEmotionMap(themeEmotionMap);\n    }, [themeEmotionMap]);\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 initialConfig = {\n        editorState: isValidLexicalData(value) ? value : generateInitialLexicalValue(),\n        namespace: \"webiny\",\n        onError: (error: Error) => {\n            throw error;\n        },\n        nodes: [...WebinyNodes, ...(nodes || [])],\n        theme: { ...webinyEditorTheme, 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                //TODO: send plain JSON object\n                onChange(JSON.stringify(editorState.toJSON()));\n            }\n        });\n    }\n\n    return (\n        <LexicalComposer initialConfig={initialConfig}>\n            <div ref={scrollRef} style={{ ...sizeStyle }}>\n                {/* data */}\n                <OnChangePlugin onChange={handleOnChange} />\n                {value && <LexicalUpdateStatePlugin value={value} />}\n                <ClearEditorPlugin />\n                <FontColorPlugin />\n                <TypographyPlugin />\n                <QuotePlugin />\n                <HistoryPlugin externalHistoryState={historyState} />\n                {/* Events */}\n                {onBlur && <BlurEventPlugin onBlur={onBlur} />}\n                {focus && <AutoFocusPlugin />}\n                {/* External plugins and components */}\n                {children}\n                <RichTextPlugin\n                    contentEditable={\n                        <div className=\"editor-scroller\" style={{ ...sizeStyle }}>\n                            <div className=\"editor\" ref={onRef} style={{ ...sizeStyle }}>\n                                <ContentEditable style={{ outline: 0, ...sizeStyle }} />\n                            </div>\n                        </div>\n                    }\n                    placeholder={placeholderElem}\n                    ErrorBoundary={LexicalErrorBoundary}\n                />\n                {/* Toolbar */}\n                {floatingAnchorElem && toolbar}\n            </div>\n        </LexicalComposer>\n    );\n};\n\n/**\n * @description Main editor container\n */\nexport const RichTextEditor = makeComposable<RichTextEditorProps>(\"RichTextEditor\", props => {\n    return (\n        <RichTextEditorProvider>\n            <ClassNames>\n                {({ css }) => {\n                    const themeEmotionMap =\n                        props?.themeEmotionMap ?? toTypographyEmotionMap(css, props.theme);\n                    return (\n                        <SharedHistoryContext>\n                            <BaseRichTextEditor {...props} themeEmotionMap={themeEmotionMap} />\n                        </SharedHistoryContext>\n                    );\n                }}\n            </ClassNames>\n        </RichTextEditorProvider>\n    );\n});\n"],"mappings":"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"}

package/components/ToolbarActions/QuoteAction.js

@@ -31,11 +31,9 @@ var QuoteAction = function QuoteAction() {
       var DEFAULT_QUOTE_ID = "quote";
       var hasQuoteStyles = themeEmotionMap && themeEmotionMap[DEFAULT_QUOTE_ID];
       (0, _formatToQuote.formatToQuote)(editor, hasQuoteStyles ? DEFAULT_QUOTE_ID : undefined);
-      setIsActive(true);
       return;
     }
     (0, _formatToParagraph.formatToParagraph)(editor);
-    setIsActive(false);
   };
   (0, _react.useEffect)(function () {
     setIsActive(isQuoteSelected);

package/components/ToolbarActions/QuoteAction.js.map

@@ -1 +1 @@
-{"version":3,"names":["QuoteAction","useLexicalComposerContext","editor","useState","isActive","setIsActive","useRichTextEditor","textBlockSelection","themeEmotionMap","isQuoteSelected","state","quote","isSelected","formatText","DEFAULT_QUOTE_ID","hasQuoteStyles","formatToQuote","undefined","formatToParagraph","useEffect"],"sources":["QuoteAction.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\nimport { useLexicalComposerContext } from \"@lexical/react/LexicalComposerContext\";\nimport { formatToQuote } from \"~/utils/nodes/formatToQuote\";\nimport { formatToParagraph } from \"~/utils/nodes/formatToParagraph\";\nimport { useRichTextEditor } from \"~/hooks/useRichTextEditor\";\nexport const QuoteAction = () => {\n    const [editor] = useLexicalComposerContext();\n    const [isActive, setIsActive] = useState<boolean>(false);\n    const { textBlockSelection, themeEmotionMap } = useRichTextEditor();\n    const isQuoteSelected = !!textBlockSelection?.state?.quote.isSelected;\n\n    const formatText = () => {\n        if (!isActive) {\n            // Try to set default quote style, when the action button is clicked for first time\n            const DEFAULT_QUOTE_ID = \"quote\";\n            const hasQuoteStyles = themeEmotionMap && themeEmotionMap[DEFAULT_QUOTE_ID];\n\n            formatToQuote(editor, hasQuoteStyles ? DEFAULT_QUOTE_ID : undefined);\n            setIsActive(true);\n            return;\n        }\n        formatToParagraph(editor);\n        setIsActive(false);\n    };\n\n    useEffect(() => {\n        setIsActive(isQuoteSelected);\n    }, [isQuoteSelected]);\n\n    return (\n        <button\n            onClick={() => formatText()}\n            className={\"popup-item \" + (isActive ? \"active\" : \"\")}\n            aria-label=\"Format text as quote\"\n        >\n            <i className=\"icon quote\" />\n        </button>\n    );\n};\n"],"mappings":";;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACO,IAAMA,WAAW,GAAG,SAAdA,WAAW,GAAS;EAAA;EAC7B,4BAAiB,IAAAC,iDAAyB,GAAE;IAAA;IAArCC,MAAM;EACb,gBAAgC,IAAAC,eAAQ,EAAU,KAAK,CAAC;IAAA;IAAjDC,QAAQ;IAAEC,WAAW;EAC5B,yBAAgD,IAAAC,qCAAiB,GAAE;IAA3DC,kBAAkB,sBAAlBA,kBAAkB;IAAEC,eAAe,sBAAfA,eAAe;EAC3C,IAAMC,eAAe,GAAG,CAAC,EAACF,kBAAkB,aAAlBA,kBAAkB,wCAAlBA,kBAAkB,CAAEG,KAAK,kDAAzB,sBAA2BC,KAAK,CAACC,UAAU;EAErE,IAAMC,UAAU,GAAG,SAAbA,UAAU,GAAS;IACrB,IAAI,CAACT,QAAQ,EAAE;MACX;MACA,IAAMU,gBAAgB,GAAG,OAAO;MAChC,IAAMC,cAAc,GAAGP,eAAe,IAAIA,eAAe,CAACM,gBAAgB,CAAC;MAE3E,IAAAE,4BAAa,EAACd,MAAM,EAAEa,cAAc,GAAGD,gBAAgB,GAAGG,SAAS,CAAC;MACpEZ,WAAW,CAAC,IAAI,CAAC;MACjB;IACJ;IACA,IAAAa,oCAAiB,EAAChB,MAAM,CAAC;IACzBG,WAAW,CAAC,KAAK,CAAC;EACtB,CAAC;EAED,IAAAc,gBAAS,EAAC,YAAM;IACZd,WAAW,CAACI,eAAe,CAAC;EAChC,CAAC,EAAE,CAACA,eAAe,CAAC,CAAC;EAErB,oBACI;IACI,OAAO,EAAE;MAAA,OAAMI,UAAU,EAAE;IAAA,CAAC;IAC5B,SAAS,EAAE,aAAa,IAAIT,QAAQ,GAAG,QAAQ,GAAG,EAAE,CAAE;IACtD,cAAW;EAAsB,gBAEjC;IAAG,SAAS,EAAC;EAAY,EAAG,CACvB;AAEjB,CAAC;AAAC"}
+{"version":3,"names":["QuoteAction","useLexicalComposerContext","editor","useState","isActive","setIsActive","useRichTextEditor","textBlockSelection","themeEmotionMap","isQuoteSelected","state","quote","isSelected","formatText","DEFAULT_QUOTE_ID","hasQuoteStyles","formatToQuote","undefined","formatToParagraph","useEffect"],"sources":["QuoteAction.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\nimport { useLexicalComposerContext } from \"@lexical/react/LexicalComposerContext\";\nimport { formatToQuote } from \"~/utils/nodes/formatToQuote\";\nimport { formatToParagraph } from \"~/utils/nodes/formatToParagraph\";\nimport { useRichTextEditor } from \"~/hooks/useRichTextEditor\";\nexport const QuoteAction = () => {\n    const [editor] = useLexicalComposerContext();\n    const [isActive, setIsActive] = useState<boolean>(false);\n    const { textBlockSelection, themeEmotionMap } = useRichTextEditor();\n    const isQuoteSelected = !!textBlockSelection?.state?.quote.isSelected;\n\n    const formatText = () => {\n        if (!isActive) {\n            // Try to set default quote style, when the action button is clicked for first time\n            const DEFAULT_QUOTE_ID = \"quote\";\n            const hasQuoteStyles = themeEmotionMap && themeEmotionMap[DEFAULT_QUOTE_ID];\n            formatToQuote(editor, hasQuoteStyles ? DEFAULT_QUOTE_ID : undefined);\n            return;\n        }\n        formatToParagraph(editor);\n    };\n\n    useEffect(() => {\n        setIsActive(isQuoteSelected);\n    }, [isQuoteSelected]);\n\n    return (\n        <button\n            onClick={() => formatText()}\n            className={\"popup-item \" + (isActive ? \"active\" : \"\")}\n            aria-label=\"Format text as quote\"\n        >\n            <i className=\"icon quote\" />\n        </button>\n    );\n};\n"],"mappings":";;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACO,IAAMA,WAAW,GAAG,SAAdA,WAAW,GAAS;EAAA;EAC7B,4BAAiB,IAAAC,iDAAyB,GAAE;IAAA;IAArCC,MAAM;EACb,gBAAgC,IAAAC,eAAQ,EAAU,KAAK,CAAC;IAAA;IAAjDC,QAAQ;IAAEC,WAAW;EAC5B,yBAAgD,IAAAC,qCAAiB,GAAE;IAA3DC,kBAAkB,sBAAlBA,kBAAkB;IAAEC,eAAe,sBAAfA,eAAe;EAC3C,IAAMC,eAAe,GAAG,CAAC,EAACF,kBAAkB,aAAlBA,kBAAkB,wCAAlBA,kBAAkB,CAAEG,KAAK,kDAAzB,sBAA2BC,KAAK,CAACC,UAAU;EAErE,IAAMC,UAAU,GAAG,SAAbA,UAAU,GAAS;IACrB,IAAI,CAACT,QAAQ,EAAE;MACX;MACA,IAAMU,gBAAgB,GAAG,OAAO;MAChC,IAAMC,cAAc,GAAGP,eAAe,IAAIA,eAAe,CAACM,gBAAgB,CAAC;MAC3E,IAAAE,4BAAa,EAACd,MAAM,EAAEa,cAAc,GAAGD,gBAAgB,GAAGG,SAAS,CAAC;MACpE;IACJ;IACA,IAAAC,oCAAiB,EAAChB,MAAM,CAAC;EAC7B,CAAC;EAED,IAAAiB,gBAAS,EAAC,YAAM;IACZd,WAAW,CAACI,eAAe,CAAC;EAChC,CAAC,EAAE,CAACA,eAAe,CAAC,CAAC;EAErB,oBACI;IACI,OAAO,EAAE;MAAA,OAAMI,UAAU,EAAE;IAAA,CAAC;IAC5B,SAAS,EAAE,aAAa,IAAIT,QAAQ,GAAG,QAAQ,GAAG,EAAE,CAAE;IACtD,cAAW;EAAsB,gBAEjC;IAAG,SAAS,EAAC;EAAY,EAAG,CACvB;AAEjB,CAAC;AAAC"}

package/components/ToolbarActions/TypographyAction.js

@@ -15,6 +15,9 @@ var _TypographyElementNode = require("../../nodes/TypographyElementNode");
 var _useRichTextEditor2 = require("../../hooks/useRichTextEditor");
 var _webinyList = require("../../commands/webiny-list");
 var _webinyQuote = require("../../commands/webiny-quote");
+var _ParagraphNode = require("../../nodes/ParagraphNode");
+var _HeadingNode = require("../../nodes/HeadingNode");
+var _QuoteNode = require("../../nodes/QuoteNode");
 /*
  * 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
@@ -38,7 +41,7 @@ var TypographyActionDropDown = function TypographyActionDropDown(_ref) {
   });
 };
 var TypographyAction = function TypographyAction() {
-  var _textBlockSelection$s, _textBlockSelection$s2;
+  var _textBlockSelection$s, _textBlockSelection$s2, _textBlockSelection$s3, _textBlockSelection$s4, _textBlockSelection$s5;
   var _useLexicalComposerCo = (0, _LexicalComposerContext.useLexicalComposerContext)(),
     _useLexicalComposerCo2 = (0, _slicedToArray2.default)(_useLexicalComposerCo, 1),
     editor = _useLexicalComposerCo2[0];
@@ -50,7 +53,10 @@ var TypographyAction = function TypographyAction() {
     textBlockSelection = _useRichTextEditor.textBlockSelection,
     themeEmotionMap = _useRichTextEditor.themeEmotionMap;
   var isTypographySelected = (textBlockSelection === null || textBlockSelection === void 0 ? void 0 : (_textBlockSelection$s = textBlockSelection.state) === null || _textBlockSelection$s === void 0 ? void 0 : _textBlockSelection$s.typography.isSelected) || false;
-  var textType = textBlockSelection === null || textBlockSelection === void 0 ? void 0 : (_textBlockSelection$s2 = textBlockSelection.state) === null || _textBlockSelection$s2 === void 0 ? void 0 : _textBlockSelection$s2.textType;
+  var isParagraphSelected = (textBlockSelection === null || textBlockSelection === void 0 ? void 0 : (_textBlockSelection$s2 = textBlockSelection.state) === null || _textBlockSelection$s2 === void 0 ? void 0 : _textBlockSelection$s2.paragraph.isSelected) || false;
+  var isHeadingSelected = (textBlockSelection === null || textBlockSelection === void 0 ? void 0 : (_textBlockSelection$s3 = textBlockSelection.state) === null || _textBlockSelection$s3 === void 0 ? void 0 : _textBlockSelection$s3.heading.isSelected) || false;
+  var textType = textBlockSelection === null || textBlockSelection === void 0 ? void 0 : (_textBlockSelection$s4 = textBlockSelection.state) === null || _textBlockSelection$s4 === void 0 ? void 0 : _textBlockSelection$s4.textType;
+  var isQuoteSelected = (textBlockSelection === null || textBlockSelection === void 0 ? void 0 : (_textBlockSelection$s5 = textBlockSelection.state) === null || _textBlockSelection$s5 === void 0 ? void 0 : _textBlockSelection$s5.quote.isSelected) || false;
   var setTypographySelect = (0, _react.useCallback)(function (value) {
     setTypography(value);
   }, [typography]);
@@ -86,6 +92,27 @@ var TypographyAction = function TypographyAction() {
         setTypography(el.getTypographyValue());
         return;
       }
+      if ((0, _ParagraphNode.$isParagraphNode)(textBlockSelection === null || textBlockSelection === void 0 ? void 0 : textBlockSelection.element) || (0, _HeadingNode.$isHeadingNode)(textBlockSelection === null || textBlockSelection === void 0 ? void 0 : textBlockSelection.element) || (0, _QuoteNode.$isQuoteNode)(textBlockSelection === null || textBlockSelection === void 0 ? void 0 : textBlockSelection.element)) {
+        var elementWithThemeStyle = textBlockSelection === null || textBlockSelection === void 0 ? void 0 : textBlockSelection.element;
+        var styleId = elementWithThemeStyle.getTypographyStyleId();
+        if (!styleId) {
+          return;
+        }
+        if (!themeEmotionMap) {
+          return;
+        }
+        var style = themeEmotionMap[styleId];
+        if (style) {
+          setTypography({
+            name: style === null || style === void 0 ? void 0 : style.name,
+            id: style.id,
+            css: style.styles,
+            tag: style.tag
+          });
+        }
+        return;
+      }
+
       // list and quote element
       if (themeEmotionMap && textBlockSelection !== null && textBlockSelection !== void 0 && (_textBlockSelection$e = textBlockSelection.element) !== null && _textBlockSelection$e !== void 0 && _textBlockSelection$e.getStyleId) {
         var _textBlockSelection$e2;
@@ -103,7 +130,7 @@ var TypographyAction = function TypographyAction() {
         }
       }
     }
-  }, [isTypographySelected, textType]);
+  }, [isTypographySelected, textType, isQuoteSelected, isParagraphSelected, isHeadingSelected]);
   return /*#__PURE__*/_react.default.createElement(_TypographyActionContext.TypographyActionContext.Provider, {
     value: {
       value: typography,

package/components/ToolbarActions/TypographyAction.js.map

@@ -1 +1 @@
-{"version":3,"names":["BaseTypographyActionDropDown","makeComposable","useEffect","console","log","TypographyActionDropDown","element","TypographyAction","useLexicalComposerContext","editor","useState","typography","setTypography","useRichTextEditor","textBlockSelection","themeEmotionMap","isTypographySelected","state","isSelected","textType","setTypographySelect","useCallback","value","onTypographySelect","tag","includes","dispatchCommand","ADD_TYPOGRAPHY_ELEMENT_COMMAND","INSERT_ORDERED_WEBINY_LIST_COMMAND","themeStyleId","id","INSERT_UNORDERED_WEBINY_LIST_COMMAND","INSERT_WEBINY_QUOTE_COMMAND","$isTypographyElementNode","el","getTypographyValue","getStyleId","undefined","elementStyle","css","styles","name","applyTypography","TypographyDropDown"],"sources":["TypographyAction.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useState } from \"react\";\nimport { useLexicalComposerContext } from \"@lexical/react/LexicalComposerContext\";\nimport { LexicalCommand } from \"lexical\";\nimport { Compose, makeComposable } from \"@webiny/react-composition\";\nimport { TypographyActionContext } from \"~/context/TypographyActionContext\";\n\nimport { TypographyValue } from \"~/types\";\nimport {\n    $isTypographyElementNode,\n    ADD_TYPOGRAPHY_ELEMENT_COMMAND,\n    TypographyElementNode,\n    TypographyPayload\n} from \"~/nodes/TypographyElementNode\";\nimport { useRichTextEditor } from \"~/hooks/useRichTextEditor\";\nimport {\n    INSERT_ORDERED_WEBINY_LIST_COMMAND,\n    INSERT_UNORDERED_WEBINY_LIST_COMMAND,\n    WebinyListCommandPayload\n} from \"~/commands/webiny-list\";\nimport { INSERT_WEBINY_QUOTE_COMMAND, WebinyQuoteCommandPayload } from \"~/commands/webiny-quote\";\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: React.FC<TypographyActionDropdownProps> = ({\n    element\n}): JSX.Element => {\n    return <Compose component={BaseTypographyActionDropDown} with={() => () => element} />;\n};\n\nexport interface TypographyAction extends React.FC<unknown> {\n    TypographyDropDown: typeof TypographyActionDropDown;\n}\n\nexport const TypographyAction: TypographyAction = () => {\n    const [editor] = useLexicalComposerContext();\n    const [typography, setTypography] = useState<TypographyValue>();\n    const { textBlockSelection, themeEmotionMap } = useRichTextEditor();\n    const isTypographySelected = textBlockSelection?.state?.typography.isSelected || false;\n    const textType = textBlockSelection?.state?.textType;\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\n        if (value.tag.includes(\"h\") || value.tag.includes(\"p\")) {\n            editor.dispatchCommand<LexicalCommand<TypographyPayload>>(\n                ADD_TYPOGRAPHY_ELEMENT_COMMAND,\n                {\n                    value\n                }\n            );\n        }\n\n        if (value.tag === \"ol\") {\n            editor.dispatchCommand<LexicalCommand<WebinyListCommandPayload>>(\n                INSERT_ORDERED_WEBINY_LIST_COMMAND,\n                {\n                    themeStyleId: value.id\n                }\n            );\n        }\n\n        if (value.tag === \"ul\") {\n            editor.dispatchCommand<LexicalCommand<WebinyListCommandPayload>>(\n                INSERT_UNORDERED_WEBINY_LIST_COMMAND,\n                {\n                    themeStyleId: value.id\n                }\n            );\n        }\n\n        if (value.tag === \"quoteblock\") {\n            editor.dispatchCommand<LexicalCommand<WebinyQuoteCommandPayload>>(\n                INSERT_WEBINY_QUOTE_COMMAND,\n                {\n                    themeStyleId: value.id\n                }\n            );\n        }\n    }, []);\n\n    useEffect(() => {\n        if (textBlockSelection) {\n            // header and paragraph elements inserted with typography node\n            if ($isTypographyElementNode(textBlockSelection?.element)) {\n                const el = textBlockSelection.element as TypographyElementNode;\n                setTypography(el.getTypographyValue());\n                return;\n            }\n            // list and quote element\n            if (themeEmotionMap && textBlockSelection?.element?.getStyleId) {\n                const themeStyleId = textBlockSelection?.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        }\n    }, [isTypographySelected, textType]);\n\n    return (\n        <TypographyActionContext.Provider\n            value={{\n                value: typography,\n                applyTypography: onTypographySelect\n            }}\n        >\n            <BaseTypographyActionDropDown />\n        </TypographyActionContext.Provider>\n    );\n};\n\n{\n    /* Color action settings */\n}\nTypographyAction.TypographyDropDown = TypographyActionDropDown;\n"],"mappings":"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"}
+{"version":3,"names":["BaseTypographyActionDropDown","makeComposable","useEffect","console","log","TypographyActionDropDown","element","TypographyAction","useLexicalComposerContext","editor","useState","typography","setTypography","useRichTextEditor","textBlockSelection","themeEmotionMap","isTypographySelected","state","isSelected","isParagraphSelected","paragraph","isHeadingSelected","heading","textType","isQuoteSelected","quote","setTypographySelect","useCallback","value","onTypographySelect","tag","includes","dispatchCommand","ADD_TYPOGRAPHY_ELEMENT_COMMAND","INSERT_ORDERED_WEBINY_LIST_COMMAND","themeStyleId","id","INSERT_UNORDERED_WEBINY_LIST_COMMAND","INSERT_WEBINY_QUOTE_COMMAND","$isTypographyElementNode","el","getTypographyValue","$isParagraphNode","$isHeadingNode","$isQuoteNode","elementWithThemeStyle","styleId","getTypographyStyleId","style","name","css","styles","getStyleId","undefined","elementStyle","applyTypography","TypographyDropDown"],"sources":["TypographyAction.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useState } from \"react\";\nimport { useLexicalComposerContext } from \"@lexical/react/LexicalComposerContext\";\nimport { LexicalCommand } from \"lexical\";\nimport { Compose, makeComposable } from \"@webiny/react-composition\";\nimport { TypographyActionContext } from \"~/context/TypographyActionContext\";\n\nimport { TypographyValue } from \"~/types\";\nimport {\n    $isTypographyElementNode,\n    ADD_TYPOGRAPHY_ELEMENT_COMMAND,\n    TypographyElementNode,\n    TypographyPayload\n} from \"~/nodes/TypographyElementNode\";\nimport { useRichTextEditor } from \"~/hooks/useRichTextEditor\";\nimport {\n    INSERT_ORDERED_WEBINY_LIST_COMMAND,\n    INSERT_UNORDERED_WEBINY_LIST_COMMAND,\n    WebinyListCommandPayload\n} from \"~/commands/webiny-list\";\nimport { INSERT_WEBINY_QUOTE_COMMAND, WebinyQuoteCommandPayload } from \"~/commands/webiny-quote\";\nimport { $isParagraphNode } from \"~/nodes/ParagraphNode\";\nimport { $isHeadingNode } from \"~/nodes/HeadingNode\";\nimport { $isQuoteNode } from \"~/nodes/QuoteNode\";\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: React.FC<TypographyActionDropdownProps> = ({\n    element\n}): JSX.Element => {\n    return <Compose component={BaseTypographyActionDropDown} with={() => () => element} />;\n};\n\nexport interface TypographyAction extends React.FC<unknown> {\n    TypographyDropDown: typeof TypographyActionDropDown;\n}\n\nexport const TypographyAction: TypographyAction = () => {\n    const [editor] = useLexicalComposerContext();\n    const [typography, setTypography] = useState<TypographyValue>();\n    const { textBlockSelection, themeEmotionMap } = useRichTextEditor();\n    const isTypographySelected = textBlockSelection?.state?.typography.isSelected || false;\n    const isParagraphSelected = textBlockSelection?.state?.paragraph.isSelected || false;\n    const isHeadingSelected = textBlockSelection?.state?.heading.isSelected || false;\n    const textType = textBlockSelection?.state?.textType;\n    const isQuoteSelected = textBlockSelection?.state?.quote.isSelected || false;\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>>(\n                ADD_TYPOGRAPHY_ELEMENT_COMMAND,\n                {\n                    value\n                }\n            );\n        }\n\n        if (value.tag === \"ol\") {\n            editor.dispatchCommand<LexicalCommand<WebinyListCommandPayload>>(\n                INSERT_ORDERED_WEBINY_LIST_COMMAND,\n                {\n                    themeStyleId: value.id\n                }\n            );\n        }\n\n        if (value.tag === \"ul\") {\n            editor.dispatchCommand<LexicalCommand<WebinyListCommandPayload>>(\n                INSERT_UNORDERED_WEBINY_LIST_COMMAND,\n                {\n                    themeStyleId: value.id\n                }\n            );\n        }\n\n        if (value.tag === \"quoteblock\") {\n            editor.dispatchCommand<LexicalCommand<WebinyQuoteCommandPayload>>(\n                INSERT_WEBINY_QUOTE_COMMAND,\n                {\n                    themeStyleId: value.id\n                }\n            );\n        }\n    }, []);\n\n    useEffect(() => {\n        if (textBlockSelection) {\n            // header and paragraph elements inserted with typography node\n            if ($isTypographyElementNode(textBlockSelection?.element)) {\n                const el = textBlockSelection.element as TypographyElementNode;\n                setTypography(el.getTypographyValue());\n                return;\n            }\n\n            if (\n                $isParagraphNode(textBlockSelection?.element) ||\n                $isHeadingNode(textBlockSelection?.element) ||\n                $isQuoteNode(textBlockSelection?.element)\n            ) {\n                const elementWithThemeStyle = textBlockSelection?.element;\n                const styleId = elementWithThemeStyle.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 && textBlockSelection?.element?.getStyleId) {\n                const themeStyleId = textBlockSelection?.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        }\n    }, [isTypographySelected, textType, 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\n{\n    /* Color action settings */\n}\nTypographyAction.TypographyDropDown = TypographyActionDropDown;\n"],"mappings":"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"}

package/hooks/useQuote.d.ts

@@ -0,0 +1,2 @@
+import type { LexicalEditor } from "lexical";
+export declare function useQuote(editor: LexicalEditor): void;

package/hooks/{useWebinyQuote.js → useQuote.js}

@@ -3,13 +3,13 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useWebinyQuote = useWebinyQuote;
+exports.useQuote = useQuote;
 var _utils = require("@lexical/utils");
 var _lexical = require("lexical");
 var _react = require("react");
 var _webinyQuote = require("../commands/webiny-quote");
 var _formatToQuote = require("../utils/nodes/formatToQuote");
-function useWebinyQuote(editor) {
+function useQuote(editor) {
   (0, _react.useEffect)(function () {
     return (0, _utils.mergeRegister)(editor.registerCommand(_webinyQuote.INSERT_WEBINY_QUOTE_COMMAND, function (_ref) {
       var themeStyleId = _ref.themeStyleId;

package/hooks/useQuote.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useQuote","editor","useEffect","mergeRegister","registerCommand","INSERT_WEBINY_QUOTE_COMMAND","themeStyleId","formatToQuote","COMMAND_PRIORITY_LOW"],"sources":["useQuote.ts"],"sourcesContent":["import type { LexicalEditor } from \"lexical\";\nimport { mergeRegister } from \"@lexical/utils\";\nimport { COMMAND_PRIORITY_LOW } from \"lexical\";\nimport { useEffect } from \"react\";\nimport { INSERT_WEBINY_QUOTE_COMMAND } from \"~/commands/webiny-quote\";\nimport { formatToQuote } from \"~/utils/nodes/formatToQuote\";\n\nexport function useQuote(editor: LexicalEditor): void {\n    useEffect(() => {\n        return mergeRegister(\n            editor.registerCommand(\n                INSERT_WEBINY_QUOTE_COMMAND,\n                ({ themeStyleId }) => {\n                    formatToQuote(editor, themeStyleId);\n                    return false;\n                },\n                COMMAND_PRIORITY_LOW\n            )\n        );\n    }, [editor]);\n}\n"],"mappings":";;;;;;AACA;AACA;AACA;AACA;AACA;AAEO,SAASA,QAAQ,CAACC,MAAqB,EAAQ;EAClD,IAAAC,gBAAS,EAAC,YAAM;IACZ,OAAO,IAAAC,oBAAa,EAChBF,MAAM,CAACG,eAAe,CAClBC,wCAA2B,EAC3B,gBAAsB;MAAA,IAAnBC,YAAY,QAAZA,YAAY;MACX,IAAAC,4BAAa,EAACN,MAAM,EAAEK,YAAY,CAAC;MACnC,OAAO,KAAK;IAChB,CAAC,EACDE,6BAAoB,CACvB,CACJ;EACL,CAAC,EAAE,CAACP,MAAM,CAAC,CAAC;AAChB"}

package/nodes/HeadingNode.d.ts

@@ -0,0 +1,34 @@
+/// <reference types="react" />
+/// <reference types="web" />
+import { LexicalNode, NodeKey, RangeSelection, Spread } from "lexical";
+import { EditorConfig } from "lexical";
+import { TypographyStylesNode, ThemeStyleValue, TextNodeThemeStyles } from "./types";
+import { WebinyTheme } from "../themes/webinyLexicalTheme";
+import { ThemeEmotionMap } from "../types";
+import { HeadingNode as BaseHeadingNode, HeadingTagType, SerializedHeadingNode as BaseSerializedHeadingNode } from "@lexical/rich-text";
+import { ParagraphNode } from "./ParagraphNode";
+export declare type SerializeHeadingNode = Spread<{
+    styles: ThemeStyleValue[];
+    type: "heading-element";
+}, BaseSerializedHeadingNode>;
+export declare class HeadingNode extends BaseHeadingNode implements TextNodeThemeStyles, TypographyStylesNode {
+    __styles: ThemeStyleValue[];
+    constructor(tag: HeadingTagType, typographyStyleId?: string, key?: NodeKey);
+    protected setDefaultTypography(themeEmotionMap: ThemeEmotionMap): void;
+    setTypography(typographyStyleId: string): this;
+    getTypographyStyleId(): string | undefined;
+    clearTypographyStyle(): this;
+    hasTypographyStyle(): boolean;
+    getThemeStyles(): ThemeStyleValue[];
+    setThemeStyles(styles: ThemeStyleValue[]): this;
+    static getType(): string;
+    static clone(node: HeadingNode): HeadingNode;
+    protected updateElementWithThemeClasses(element: HTMLElement, theme: WebinyTheme): HTMLElement;
+    createDOM(config: EditorConfig): HTMLElement;
+    static importJSON(serializedNode: SerializeHeadingNode): BaseHeadingNode;
+    exportJSON(): SerializeHeadingNode;
+    insertNewAfter(selection?: RangeSelection, restoreSelection?: boolean): ParagraphNode | HeadingNode;
+    collapseAtStart(): true;
+}
+export declare function $createHeadingNode(tag: HeadingTagType, typographyStyleId?: string): HeadingNode;
+export declare function $isHeadingNode(node: LexicalNode | null | undefined): node is HeadingNode;

package/nodes/HeadingNode.js

@@ -0,0 +1,192 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.$createHeadingNode = $createHeadingNode;
+exports.$isHeadingNode = $isHeadingNode;
+exports.HeadingNode = void 0;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+var _get2 = _interopRequireDefault(require("@babel/runtime/helpers/get"));
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _lexical = require("lexical");
+var _utils = require("@lexical/utils");
+var _findTypographyStyleByHtmlTag = require("../utils/findTypographyStyleByHtmlTag");
+var _richText = require("@lexical/rich-text");
+var _ParagraphNode = require("./ParagraphNode");
+var HeadingNode = /*#__PURE__*/function (_BaseHeadingNode) {
+  (0, _inherits2.default)(HeadingNode, _BaseHeadingNode);
+  var _super = (0, _createSuper2.default)(HeadingNode);
+  function HeadingNode(tag, typographyStyleId, key) {
+    var _this;
+    (0, _classCallCheck2.default)(this, HeadingNode);
+    _this = _super.call(this, tag, key);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "__styles", []);
+    if (typographyStyleId) {
+      _this.__styles.push({
+        styleId: typographyStyleId,
+        type: "typography"
+      });
+    }
+    return _this;
+  }
+  (0, _createClass2.default)(HeadingNode, [{
+    key: "setDefaultTypography",
+    value: function setDefaultTypography(themeEmotionMap) {
+      var typographyStyle = (0, _findTypographyStyleByHtmlTag.findTypographyStyleByHtmlTag)(this.__tag, themeEmotionMap);
+      if (typographyStyle) {
+        this.__styles.push({
+          styleId: typographyStyle.id,
+          type: "typography"
+        });
+      }
+    }
+  }, {
+    key: "setTypography",
+    value: function setTypography(typographyStyleId) {
+      var self = (0, _get2.default)((0, _getPrototypeOf2.default)(HeadingNode.prototype), "getWritable", this).call(this);
+      if (!this.hasTypographyStyle()) {
+        var themeStyle = {
+          styleId: typographyStyleId,
+          type: "typography"
+        };
+        self.__styles.push(themeStyle);
+      }
+      return self;
+    }
+  }, {
+    key: "getTypographyStyleId",
+    value: function getTypographyStyleId() {
+      var style = this.__styles.find(function (x) {
+        return x.type === "typography";
+      });
+      return (style === null || style === void 0 ? void 0 : style.styleId) || undefined;
+    }
+  }, {
+    key: "clearTypographyStyle",
+    value: function clearTypographyStyle() {
+      var self = (0, _get2.default)((0, _getPrototypeOf2.default)(HeadingNode.prototype), "getWritable", this).call(this);
+      self.__styles = self.__styles.filter(function (s) {
+        return s.type !== "typography";
+      });
+      return self;
+    }
+  }, {
+    key: "hasTypographyStyle",
+    value: function hasTypographyStyle() {
+      return !!this.getTypographyStyleId();
+    }
+  }, {
+    key: "getThemeStyles",
+    value: function getThemeStyles() {
+      var self = (0, _get2.default)((0, _getPrototypeOf2.default)(HeadingNode.prototype), "getLatest", this).call(this);
+      return self.__styles;
+    }
+  }, {
+    key: "setThemeStyles",
+    value: function setThemeStyles(styles) {
+      var self = (0, _get2.default)((0, _getPrototypeOf2.default)(HeadingNode.prototype), "getWritable", this).call(this);
+      self.__styles = (0, _toConsumableArray2.default)(styles);
+      return self;
+    }
+  }, {
+    key: "updateElementWithThemeClasses",
+    value: function updateElementWithThemeClasses(element, theme) {
+      if (!(theme !== null && theme !== void 0 && theme.emotionMap)) {
+        return element;
+      }
+      if (!this.hasTypographyStyle()) {
+        this.setDefaultTypography(theme.emotionMap);
+      }
+      var typoStyleId = this.getTypographyStyleId();
+      var themeClasses;
+
+      // Typography css class
+      if (typoStyleId) {
+        var typographyStyle = theme.emotionMap[typoStyleId];
+        if (typographyStyle) {
+          themeClasses = typographyStyle.className;
+        }
+      }
+      if (themeClasses) {
+        (0, _utils.addClassNamesToElement)(element, themeClasses);
+      }
+      return element;
+    }
+  }, {
+    key: "createDOM",
+    value: function createDOM(config) {
+      var element = (0, _get2.default)((0, _getPrototypeOf2.default)(HeadingNode.prototype), "createDOM", this).call(this, config);
+      return this.updateElementWithThemeClasses(element, config.theme);
+    }
+  }, {
+    key: "exportJSON",
+    value: function exportJSON() {
+      return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, (0, _get2.default)((0, _getPrototypeOf2.default)(HeadingNode.prototype), "exportJSON", this).call(this)), {}, {
+        styles: this.__styles,
+        type: "heading-element",
+        version: 1
+      });
+    }
+
+    // Mutation
+  }, {
+    key: "insertNewAfter",
+    value: function insertNewAfter(selection) {
+      var restoreSelection = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+      // Next line for headings are always headings with the same tag
+      var newElement = $createHeadingNode(this.getTag());
+      var direction = this.getDirection();
+      newElement.setDirection(direction);
+      this.insertAfter(newElement, restoreSelection);
+      return newElement;
+    }
+  }, {
+    key: "collapseAtStart",
+    value: function collapseAtStart() {
+      var newElement = !this.isEmpty() ? $createHeadingNode(this.getTag()) : (0, _ParagraphNode.$createParagraphNode)();
+      var children = this.getChildren();
+      children.forEach(function (child) {
+        return newElement.append(child);
+      });
+      this.replace(newElement);
+      return true;
+    }
+  }], [{
+    key: "getType",
+    value: function getType() {
+      return "heading-element";
+    }
+  }, {
+    key: "clone",
+    value: function clone(node) {
+      return new HeadingNode(node.getTag(), node.getTypographyStyleId(), node.__key);
+    }
+  }, {
+    key: "importJSON",
+    value: function importJSON(serializedNode) {
+      var node = $createHeadingNode(serializedNode.tag);
+      node.setFormat(serializedNode.format);
+      node.setIndent(serializedNode.indent);
+      node.setDirection(serializedNode.direction);
+      node.setThemeStyles(serializedNode.styles);
+      return node;
+    }
+  }]);
+  return HeadingNode;
+}(_richText.HeadingNode);
+exports.HeadingNode = HeadingNode;
+function $createHeadingNode(tag, typographyStyleId) {
+  return (0, _lexical.$applyNodeReplacement)(new HeadingNode(tag, typographyStyleId));
+}
+function $isHeadingNode(node) {
+  return node instanceof HeadingNode;
+}

package/nodes/HeadingNode.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["HeadingNode","tag","typographyStyleId","key","__styles","push","styleId","type","themeEmotionMap","typographyStyle","findTypographyStyleByHtmlTag","__tag","id","self","hasTypographyStyle","themeStyle","style","find","x","undefined","filter","s","getTypographyStyleId","styles","element","theme","emotionMap","setDefaultTypography","typoStyleId","themeClasses","className","addClassNamesToElement","config","updateElementWithThemeClasses","version","selection","restoreSelection","newElement","$createHeadingNode","getTag","direction","getDirection","setDirection","insertAfter","isEmpty","$createParagraphNode","children","getChildren","forEach","child","append","replace","node","__key","serializedNode","setFormat","format","setIndent","indent","setThemeStyles","BaseHeadingNode","$applyNodeReplacement","$isHeadingNode"],"sources":["HeadingNode.ts"],"sourcesContent":["import { $applyNodeReplacement, LexicalNode, NodeKey, RangeSelection, Spread } from \"lexical\";\nimport { EditorConfig } from \"lexical\";\nimport { TypographyStylesNode, ThemeStyleValue, TextNodeThemeStyles } from \"~/nodes/types\";\nimport { WebinyTheme } from \"~/themes/webinyLexicalTheme\";\nimport { addClassNamesToElement } from \"@lexical/utils\";\nimport { findTypographyStyleByHtmlTag } from \"~/utils/findTypographyStyleByHtmlTag\";\nimport { ThemeEmotionMap } from \"~/types\";\nimport {\n    HeadingNode as BaseHeadingNode,\n    HeadingTagType,\n    SerializedHeadingNode as BaseSerializedHeadingNode\n} from \"@lexical/rich-text\";\nimport { $createParagraphNode, ParagraphNode } from \"~/nodes/ParagraphNode\";\n\nexport type SerializeHeadingNode = Spread<\n    {\n        styles: ThemeStyleValue[];\n        type: \"heading-element\";\n    },\n    BaseSerializedHeadingNode\n>;\n\nexport class HeadingNode\n    extends BaseHeadingNode\n    implements TextNodeThemeStyles, TypographyStylesNode\n{\n    __styles: ThemeStyleValue[] = [];\n\n    constructor(tag: HeadingTagType, typographyStyleId?: string, key?: NodeKey) {\n        super(tag, key);\n\n        if (typographyStyleId) {\n            this.__styles.push({ styleId: typographyStyleId, type: \"typography\" });\n        }\n    }\n\n    protected setDefaultTypography(themeEmotionMap: ThemeEmotionMap) {\n        const typographyStyle = findTypographyStyleByHtmlTag(this.__tag, themeEmotionMap);\n        if (typographyStyle) {\n            this.__styles.push({ styleId: typographyStyle.id, type: \"typography\" });\n        }\n    }\n\n    setTypography(typographyStyleId: string): this {\n        const self = super.getWritable();\n        if (!this.hasTypographyStyle()) {\n            const themeStyle = {\n                styleId: typographyStyleId,\n                type: \"typography\"\n            } as ThemeStyleValue;\n            self.__styles.push(themeStyle);\n        }\n        return self;\n    }\n\n    getTypographyStyleId(): string | undefined {\n        const style = this.__styles.find(x => x.type === \"typography\");\n        return style?.styleId || undefined;\n    }\n\n    clearTypographyStyle(): this {\n        const self = super.getWritable();\n        self.__styles = self.__styles.filter(s => s.type !== \"typography\");\n        return self;\n    }\n\n    hasTypographyStyle(): boolean {\n        return !!this.getTypographyStyleId();\n    }\n\n    getThemeStyles(): ThemeStyleValue[] {\n        const self = super.getLatest();\n        return self.__styles;\n    }\n\n    setThemeStyles(styles: ThemeStyleValue[]) {\n        const self = super.getWritable();\n        self.__styles = [...styles];\n        return self;\n    }\n\n    static override getType(): string {\n        return \"heading-element\";\n    }\n\n    static override clone(node: HeadingNode): HeadingNode {\n        return new HeadingNode(node.getTag(), node.getTypographyStyleId(), node.__key);\n    }\n\n    protected updateElementWithThemeClasses(element: HTMLElement, theme: WebinyTheme): HTMLElement {\n        if (!theme?.emotionMap) {\n            return element;\n        }\n\n        if (!this.hasTypographyStyle()) {\n            this.setDefaultTypography(theme.emotionMap);\n        }\n\n        const typoStyleId = this.getTypographyStyleId();\n\n        let themeClasses;\n\n        // Typography css class\n        if (typoStyleId) {\n            const typographyStyle = theme.emotionMap[typoStyleId];\n            if (typographyStyle) {\n                themeClasses = typographyStyle.className;\n            }\n        }\n\n        if (themeClasses) {\n            addClassNamesToElement(element, themeClasses);\n        }\n\n        return element;\n    }\n\n    override createDOM(config: EditorConfig): HTMLElement {\n        const element = super.createDOM(config);\n        return this.updateElementWithThemeClasses(element, config.theme as WebinyTheme);\n    }\n\n    static override importJSON(serializedNode: SerializeHeadingNode): BaseHeadingNode {\n        const node = $createHeadingNode(serializedNode.tag);\n        node.setFormat(serializedNode.format);\n        node.setIndent(serializedNode.indent);\n        node.setDirection(serializedNode.direction);\n        node.setThemeStyles(serializedNode.styles);\n        return node;\n    }\n\n    override exportJSON(): SerializeHeadingNode {\n        return {\n            ...super.exportJSON(),\n            styles: this.__styles,\n            type: \"heading-element\",\n            version: 1\n        };\n    }\n\n    // Mutation\n    override insertNewAfter(\n        selection?: RangeSelection,\n        restoreSelection = true\n    ): ParagraphNode | HeadingNode {\n        // Next line for headings are always headings with the same tag\n        const newElement = $createHeadingNode(this.getTag());\n        const direction = this.getDirection();\n        newElement.setDirection(direction);\n        this.insertAfter(newElement, restoreSelection);\n        return newElement;\n    }\n\n    override collapseAtStart(): true {\n        const newElement = !this.isEmpty()\n            ? $createHeadingNode(this.getTag())\n            : $createParagraphNode();\n        const children = this.getChildren();\n        children.forEach(child => newElement.append(child));\n        this.replace(newElement);\n        return true;\n    }\n}\n\nexport function $createHeadingNode(tag: HeadingTagType, typographyStyleId?: string): HeadingNode {\n    return $applyNodeReplacement(new HeadingNode(tag, typographyStyleId));\n}\n\nexport function $isHeadingNode(node: LexicalNode | null | undefined): node is HeadingNode {\n    return node instanceof HeadingNode;\n}\n"],"mappings":"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"}

package/nodes/ParagraphNode.d.ts

@@ -0,0 +1,32 @@
+/// <reference types="react" />
+/// <reference types="web" />
+import { DOMConversionMap, LexicalNode, NodeKey, ParagraphNode as BaseParagraphNode, SerializedParagraphNode as SerializedBaseParagraphNode, Spread } from "lexical";
+import { EditorConfig } from "lexical";
+import { TypographyStylesNode, ThemeStyleValue, TextNodeThemeStyles } from "./types";
+import { WebinyTheme } from "../themes/webinyLexicalTheme";
+import { ThemeEmotionMap } from "../types";
+export declare type SerializeParagraphNode = Spread<{
+    styles: ThemeStyleValue[];
+    type: "paragraph-element";
+}, SerializedBaseParagraphNode>;
+export declare class ParagraphNode extends BaseParagraphNode implements TextNodeThemeStyles, TypographyStylesNode {
+    __styles: ThemeStyleValue[];
+    constructor(typographyStyleId?: string, key?: NodeKey);
+    protected setDefaultTypography(themeEmotionMap: ThemeEmotionMap): void;
+    setTypography(typographyStyleId: string): this;
+    getTypographyStyleId(): string | undefined;
+    clearTypographyStyle(): this;
+    hasTypographyStyle(): boolean;
+    getThemeStyles(): ThemeStyleValue[];
+    setThemeStyles(styles: ThemeStyleValue[]): this;
+    static getType(): string;
+    static clone(node: ParagraphNode): ParagraphNode;
+    protected updateElementWithThemeClasses(element: HTMLElement, theme: WebinyTheme): HTMLElement;
+    createDOM(config: EditorConfig): HTMLElement;
+    updateDOM(prevNode: BaseParagraphNode, dom: HTMLElement, config: EditorConfig): boolean;
+    static importDOM(): DOMConversionMap | null;
+    static importJSON(serializedNode: SerializeParagraphNode): BaseParagraphNode;
+    exportJSON(): SerializeParagraphNode;
+}
+export declare function $createParagraphNode(typographyStyleId?: string): ParagraphNode;
+export declare function $isParagraphNode(node: LexicalNode | null | undefined): node is ParagraphNode;