@webiny/lexical-editor 6.0.0-alpha.5 → 6.0.0-rc.0

package/components/ToolbarActions/LinkAction.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useCallback","$isLinkNode","TOGGLE_LINK_COMMAND","getNodeFromSelection","useDeriveValueFromSelection","useRichTextEditor","LinkAction","editor","isLink","rangeSelection","node","getParent","insertLink","dispatchCommand","url","createElement","onClick","className"],"sources":["LinkAction.tsx"],"sourcesContent":["import React, { useCallback } from \"react\";\nimport { $isLinkNode, TOGGLE_LINK_COMMAND } from \"@webiny/lexical-nodes\";\nimport { getNodeFromSelection } from \"~/hooks/useCurrentElement\";\nimport { useDeriveValueFromSelection } from \"~/hooks/useCurrentSelection\";\nimport { useRichTextEditor } from \"~/hooks\";\n\nexport const LinkAction = () => {\n    const { editor } = useRichTextEditor();\n    const isLink = useDeriveValueFromSelection(({ rangeSelection }) => {\n        if (!rangeSelection) {\n            return false;\n        }\n        const node = getNodeFromSelection(rangeSelection);\n        return node ? $isLinkNode(node) || $isLinkNode(node.getParent()) : false;\n    });\n\n    const insertLink = useCallback(() => {\n        if (!isLink) {\n            editor.dispatchCommand(TOGGLE_LINK_COMMAND, { url: \"https://\" });\n        } else {\n            editor.dispatchCommand(TOGGLE_LINK_COMMAND, null);\n        }\n    }, [editor, isLink]);\n\n    return (\n        <button\n            onClick={insertLink}\n            className={\"popup-item spaced \" + (isLink ? \"active\" : \"\")}\n            aria-label=\"Insert link\"\n        >\n            <i className=\"format link\" />\n        </button>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,WAAW,QAAQ,OAAO;AAC1C,SAASC,WAAW,EAAEC,mBAAmB,QAAQ,uBAAuB;AACxE,SAASC,oBAAoB;AAC7B,SAASC,2BAA2B;AACpC,SAASC,iBAAiB;AAE1B,OAAO,MAAMC,UAAU,GAAGA,CAAA,KAAM;EAC5B,MAAM;IAAEC;EAAO,CAAC,GAAGF,iBAAiB,CAAC,CAAC;EACtC,MAAMG,MAAM,GAAGJ,2BAA2B,CAAC,CAAC;IAAEK;EAAe,CAAC,KAAK;IAC/D,IAAI,CAACA,cAAc,EAAE;MACjB,OAAO,KAAK;IAChB;IACA,MAAMC,IAAI,GAAGP,oBAAoB,CAACM,cAAc,CAAC;IACjD,OAAOC,IAAI,GAAGT,WAAW,CAACS,IAAI,CAAC,IAAIT,WAAW,CAACS,IAAI,CAACC,SAAS,CAAC,CAAC,CAAC,GAAG,KAAK;EAC5E,CAAC,CAAC;EAEF,MAAMC,UAAU,GAAGZ,WAAW,CAAC,MAAM;IACjC,IAAI,CAACQ,MAAM,EAAE;MACTD,MAAM,CAACM,eAAe,CAACX,mBAAmB,EAAE;QAAEY,GAAG,EAAE;MAAW,CAAC,CAAC;IACpE,CAAC,MAAM;MACHP,MAAM,CAACM,eAAe,CAACX,mBAAmB,EAAE,IAAI,CAAC;IACrD;EACJ,CAAC,EAAE,CAACK,MAAM,EAAEC,MAAM,CAAC,CAAC;EAEpB,oBACIT,KAAA,CAAAgB,aAAA;IACIC,OAAO,EAAEJ,UAAW;IACpBK,SAAS,EAAE,oBAAoB,IAAIT,MAAM,GAAG,QAAQ,GAAG,EAAE,CAAE;IAC3D,cAAW;EAAa,gBAExBT,KAAA,CAAAgB,aAAA;IAAGE,SAAS,EAAC;EAAa,CAAE,CACxB,CAAC;AAEjB,CAAC","ignoreList":[]}
+{"version":3,"names":["React","useCallback","$isLinkNode","TOGGLE_LINK_COMMAND","getNodeFromSelection","useDeriveValueFromSelection","useRichTextEditor","LinkAction","editor","isLink","rangeSelection","node","getParent","insertLink","dispatchCommand","url","createElement","onClick","className"],"sources":["LinkAction.tsx"],"sourcesContent":["import React, { useCallback } from \"react\";\nimport { $isLinkNode, TOGGLE_LINK_COMMAND } from \"@webiny/lexical-nodes\";\nimport { getNodeFromSelection } from \"~/hooks/useCurrentElement.js\";\nimport { useDeriveValueFromSelection } from \"~/hooks/useCurrentSelection.js\";\nimport { useRichTextEditor } from \"~/hooks/index.js\";\n\nexport const LinkAction = () => {\n    const { editor } = useRichTextEditor();\n    const isLink = useDeriveValueFromSelection(({ rangeSelection }) => {\n        if (!rangeSelection) {\n            return false;\n        }\n        const node = getNodeFromSelection(rangeSelection);\n        return node ? $isLinkNode(node) || $isLinkNode(node.getParent()) : false;\n    });\n\n    const insertLink = useCallback(() => {\n        if (!isLink) {\n            editor.dispatchCommand(TOGGLE_LINK_COMMAND, { url: \"https://\" });\n        } else {\n            editor.dispatchCommand(TOGGLE_LINK_COMMAND, null);\n        }\n    }, [editor, isLink]);\n\n    return (\n        <button\n            onClick={insertLink}\n            className={\"popup-item spaced \" + (isLink ? \"active\" : \"\")}\n            aria-label=\"Insert link\"\n        >\n            <i className=\"format link\" />\n        </button>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,WAAW,QAAQ,OAAO;AAC1C,SAASC,WAAW,EAAEC,mBAAmB,QAAQ,uBAAuB;AACxE,SAASC,oBAAoB;AAC7B,SAASC,2BAA2B;AACpC,SAASC,iBAAiB;AAE1B,OAAO,MAAMC,UAAU,GAAGA,CAAA,KAAM;EAC5B,MAAM;IAAEC;EAAO,CAAC,GAAGF,iBAAiB,CAAC,CAAC;EACtC,MAAMG,MAAM,GAAGJ,2BAA2B,CAAC,CAAC;IAAEK;EAAe,CAAC,KAAK;IAC/D,IAAI,CAACA,cAAc,EAAE;MACjB,OAAO,KAAK;IAChB;IACA,MAAMC,IAAI,GAAGP,oBAAoB,CAACM,cAAc,CAAC;IACjD,OAAOC,IAAI,GAAGT,WAAW,CAACS,IAAI,CAAC,IAAIT,WAAW,CAACS,IAAI,CAACC,SAAS,CAAC,CAAC,CAAC,GAAG,KAAK;EAC5E,CAAC,CAAC;EAEF,MAAMC,UAAU,GAAGZ,WAAW,CAAC,MAAM;IACjC,IAAI,CAACQ,MAAM,EAAE;MACTD,MAAM,CAACM,eAAe,CAACX,mBAAmB,EAAE;QAAEY,GAAG,EAAE;MAAW,CAAC,CAAC;IACpE,CAAC,MAAM;MACHP,MAAM,CAACM,eAAe,CAACX,mBAAmB,EAAE,IAAI,CAAC;IACrD;EACJ,CAAC,EAAE,CAACK,MAAM,EAAEC,MAAM,CAAC,CAAC;EAEpB,oBACIT,KAAA,CAAAgB,aAAA;IACIC,OAAO,EAAEJ,UAAW;IACpBK,SAAS,EAAE,oBAAoB,IAAIT,MAAM,GAAG,QAAQ,GAAG,EAAE,CAAE;IAC3D,cAAW;EAAa,gBAExBT,KAAA,CAAAgB,aAAA;IAAGE,SAAS,EAAC;EAAa,CAAE,CACxB,CAAC;AAEjB,CAAC","ignoreList":[]}

package/components/ToolbarActions/NumberedListAction.js

@@ -1,34 +1,30 @@
 import React from "react";
 import { $isListNode } from "@webiny/lexical-nodes";
-import { findTypographyStyleByHtmlTag } from "@webiny/lexical-theme";
-import { INSERT_ORDERED_LIST_COMMAND, REMOVE_LIST_COMMAND } from "../../commands";
-import { useRichTextEditor } from "../../hooks/useRichTextEditor";
-import { useCurrentElement } from "../../hooks/useCurrentElement";
+import { INSERT_ORDERED_LIST_COMMAND, REMOVE_LIST_COMMAND } from "../../commands/index.js";
+import { useRichTextEditor } from "../../hooks/useRichTextEditor.js";
+import { useCurrentElement } from "../../hooks/useCurrentElement.js";
 export const NumberedListAction = () => {
   const {
     element
   } = useCurrentElement();
   const {
     editor,
-    themeEmotionMap
+    theme
   } = useRichTextEditor();
   const isList = $isListNode(element);
   const isNumbered = isList && element.getListType() === "number";
   const getStyleId = () => {
-    if (!themeEmotionMap) {
-      return undefined;
-    }
     // check default style for numbered list
-    const id = findTypographyStyleByHtmlTag("ol", themeEmotionMap)?.id;
+    const id = theme.getTypographyByTag("ol")?.id;
     if (id) {
       return id;
     }
     // fallback to ul list styles
-    return findTypographyStyleByHtmlTag("ul", themeEmotionMap)?.id;
+    return theme.getTypographyByTag("ul")?.id;
   };
   const formatNumberedList = () => {
     if (!isNumbered) {
-      const styleId = themeEmotionMap ? getStyleId() : undefined;
+      const styleId = getStyleId();
       editor.dispatchCommand(INSERT_ORDERED_LIST_COMMAND, {
         themeStyleId: styleId
       });

package/components/ToolbarActions/NumberedListAction.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","$isListNode","findTypographyStyleByHtmlTag","INSERT_ORDERED_LIST_COMMAND","REMOVE_LIST_COMMAND","useRichTextEditor","useCurrentElement","NumberedListAction","element","editor","themeEmotionMap","isList","isNumbered","getListType","getStyleId","undefined","id","formatNumberedList","styleId","dispatchCommand","themeStyleId","createElement","onClick","className"],"sources":["NumberedListAction.tsx"],"sourcesContent":["import React from \"react\";\nimport type { ListNode } from \"@webiny/lexical-nodes\";\nimport { $isListNode } from \"@webiny/lexical-nodes\";\nimport { findTypographyStyleByHtmlTag } from \"@webiny/lexical-theme\";\nimport { INSERT_ORDERED_LIST_COMMAND, REMOVE_LIST_COMMAND } from \"~/commands\";\nimport { useRichTextEditor } from \"~/hooks/useRichTextEditor\";\nimport { useCurrentElement } from \"~/hooks/useCurrentElement\";\n\nexport const NumberedListAction = () => {\n    const { element } = useCurrentElement();\n    const { editor, themeEmotionMap } = useRichTextEditor();\n    const isList = $isListNode(element);\n    const isNumbered = isList && (element as ListNode).getListType() === \"number\";\n\n    const getStyleId = (): string | undefined => {\n        if (!themeEmotionMap) {\n            return undefined;\n        }\n        // check default style for numbered list\n        const id = findTypographyStyleByHtmlTag(\"ol\", themeEmotionMap)?.id;\n        if (id) {\n            return id;\n        }\n        // fallback to ul list styles\n        return findTypographyStyleByHtmlTag(\"ul\", themeEmotionMap)?.id;\n    };\n\n    const formatNumberedList = () => {\n        if (!isNumbered) {\n            const styleId = themeEmotionMap ? getStyleId() : undefined;\n            editor.dispatchCommand(INSERT_ORDERED_LIST_COMMAND, { themeStyleId: styleId });\n        } else {\n            editor.dispatchCommand(REMOVE_LIST_COMMAND, undefined);\n        }\n    };\n\n    return (\n        <button\n            onClick={() => formatNumberedList()}\n            className={\"popup-item spaced \" + (isNumbered ? \"active\" : \"\")}\n            aria-label=\"Format text as numbered list\"\n        >\n            <i className=\"icon numbered-list\" />\n        </button>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,SAASC,WAAW,QAAQ,uBAAuB;AACnD,SAASC,4BAA4B,QAAQ,uBAAuB;AACpE,SAASC,2BAA2B,EAAEC,mBAAmB;AACzD,SAASC,iBAAiB;AAC1B,SAASC,iBAAiB;AAE1B,OAAO,MAAMC,kBAAkB,GAAGA,CAAA,KAAM;EACpC,MAAM;IAAEC;EAAQ,CAAC,GAAGF,iBAAiB,CAAC,CAAC;EACvC,MAAM;IAAEG,MAAM;IAAEC;EAAgB,CAAC,GAAGL,iBAAiB,CAAC,CAAC;EACvD,MAAMM,MAAM,GAAGV,WAAW,CAACO,OAAO,CAAC;EACnC,MAAMI,UAAU,GAAGD,MAAM,IAAKH,OAAO,CAAcK,WAAW,CAAC,CAAC,KAAK,QAAQ;EAE7E,MAAMC,UAAU,GAAGA,CAAA,KAA0B;IACzC,IAAI,CAACJ,eAAe,EAAE;MAClB,OAAOK,SAAS;IACpB;IACA;IACA,MAAMC,EAAE,GAAGd,4BAA4B,CAAC,IAAI,EAAEQ,eAAe,CAAC,EAAEM,EAAE;IAClE,IAAIA,EAAE,EAAE;MACJ,OAAOA,EAAE;IACb;IACA;IACA,OAAOd,4BAA4B,CAAC,IAAI,EAAEQ,eAAe,CAAC,EAAEM,EAAE;EAClE,CAAC;EAED,MAAMC,kBAAkB,GAAGA,CAAA,KAAM;IAC7B,IAAI,CAACL,UAAU,EAAE;MACb,MAAMM,OAAO,GAAGR,eAAe,GAAGI,UAAU,CAAC,CAAC,GAAGC,SAAS;MAC1DN,MAAM,CAACU,eAAe,CAAChB,2BAA2B,EAAE;QAAEiB,YAAY,EAAEF;MAAQ,CAAC,CAAC;IAClF,CAAC,MAAM;MACHT,MAAM,CAACU,eAAe,CAACf,mBAAmB,EAAEW,SAAS,CAAC;IAC1D;EACJ,CAAC;EAED,oBACIf,KAAA,CAAAqB,aAAA;IACIC,OAAO,EAAEA,CAAA,KAAML,kBAAkB,CAAC,CAAE;IACpCM,SAAS,EAAE,oBAAoB,IAAIX,UAAU,GAAG,QAAQ,GAAG,EAAE,CAAE;IAC/D,cAAW;EAA8B,gBAEzCZ,KAAA,CAAAqB,aAAA;IAAGE,SAAS,EAAC;EAAoB,CAAE,CAC/B,CAAC;AAEjB,CAAC","ignoreList":[]}
+{"version":3,"names":["React","$isListNode","INSERT_ORDERED_LIST_COMMAND","REMOVE_LIST_COMMAND","useRichTextEditor","useCurrentElement","NumberedListAction","element","editor","theme","isList","isNumbered","getListType","getStyleId","id","getTypographyByTag","formatNumberedList","styleId","dispatchCommand","themeStyleId","undefined","createElement","onClick","className"],"sources":["NumberedListAction.tsx"],"sourcesContent":["import React from \"react\";\nimport type { ListNode } from \"@webiny/lexical-nodes\";\nimport { $isListNode } from \"@webiny/lexical-nodes\";\nimport { INSERT_ORDERED_LIST_COMMAND, REMOVE_LIST_COMMAND } from \"~/commands/index.js\";\nimport { useRichTextEditor } from \"~/hooks/useRichTextEditor.js\";\nimport { useCurrentElement } from \"~/hooks/useCurrentElement.js\";\n\nexport const NumberedListAction = () => {\n    const { element } = useCurrentElement();\n    const { editor, theme } = useRichTextEditor();\n    const isList = $isListNode(element);\n    const isNumbered = isList && (element as ListNode).getListType() === \"number\";\n\n    const getStyleId = (): string | undefined => {\n        // check default style for numbered list\n        const id = theme.getTypographyByTag(\"ol\")?.id;\n        if (id) {\n            return id;\n        }\n        // fallback to ul list styles\n        return theme.getTypographyByTag(\"ul\")?.id;\n    };\n\n    const formatNumberedList = () => {\n        if (!isNumbered) {\n            const styleId = getStyleId();\n            editor.dispatchCommand(INSERT_ORDERED_LIST_COMMAND, { themeStyleId: styleId });\n        } else {\n            editor.dispatchCommand(REMOVE_LIST_COMMAND, undefined);\n        }\n    };\n\n    return (\n        <button\n            onClick={() => formatNumberedList()}\n            className={\"popup-item spaced \" + (isNumbered ? \"active\" : \"\")}\n            aria-label=\"Format text as numbered list\"\n        >\n            <i className=\"icon numbered-list\" />\n        </button>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,SAASC,WAAW,QAAQ,uBAAuB;AACnD,SAASC,2BAA2B,EAAEC,mBAAmB;AACzD,SAASC,iBAAiB;AAC1B,SAASC,iBAAiB;AAE1B,OAAO,MAAMC,kBAAkB,GAAGA,CAAA,KAAM;EACpC,MAAM;IAAEC;EAAQ,CAAC,GAAGF,iBAAiB,CAAC,CAAC;EACvC,MAAM;IAAEG,MAAM;IAAEC;EAAM,CAAC,GAAGL,iBAAiB,CAAC,CAAC;EAC7C,MAAMM,MAAM,GAAGT,WAAW,CAACM,OAAO,CAAC;EACnC,MAAMI,UAAU,GAAGD,MAAM,IAAKH,OAAO,CAAcK,WAAW,CAAC,CAAC,KAAK,QAAQ;EAE7E,MAAMC,UAAU,GAAGA,CAAA,KAA0B;IACzC;IACA,MAAMC,EAAE,GAAGL,KAAK,CAACM,kBAAkB,CAAC,IAAI,CAAC,EAAED,EAAE;IAC7C,IAAIA,EAAE,EAAE;MACJ,OAAOA,EAAE;IACb;IACA;IACA,OAAOL,KAAK,CAACM,kBAAkB,CAAC,IAAI,CAAC,EAAED,EAAE;EAC7C,CAAC;EAED,MAAME,kBAAkB,GAAGA,CAAA,KAAM;IAC7B,IAAI,CAACL,UAAU,EAAE;MACb,MAAMM,OAAO,GAAGJ,UAAU,CAAC,CAAC;MAC5BL,MAAM,CAACU,eAAe,CAAChB,2BAA2B,EAAE;QAAEiB,YAAY,EAAEF;MAAQ,CAAC,CAAC;IAClF,CAAC,MAAM;MACHT,MAAM,CAACU,eAAe,CAACf,mBAAmB,EAAEiB,SAAS,CAAC;IAC1D;EACJ,CAAC;EAED,oBACIpB,KAAA,CAAAqB,aAAA;IACIC,OAAO,EAAEA,CAAA,KAAMN,kBAAkB,CAAC,CAAE;IACpCO,SAAS,EAAE,oBAAoB,IAAIZ,UAAU,GAAG,QAAQ,GAAG,EAAE,CAAE;IAC/D,cAAW;EAA8B,gBAEzCX,KAAA,CAAAqB,aAAA;IAAGE,SAAS,EAAC;EAAoB,CAAE,CAC/B,CAAC;AAEjB,CAAC","ignoreList":[]}

package/components/ToolbarActions/QuoteAction.js

@@ -1,11 +1,12 @@
 import React from "react";
 import { $isQuoteNode, formatToQuote, formatToParagraph } from "@webiny/lexical-nodes";
-import { useRichTextEditor } from "../../hooks/useRichTextEditor";
-import { useCurrentElement } from "../../hooks/useCurrentElement";
+import { useRichTextEditor } from "../../hooks/useRichTextEditor.js";
+import { useCurrentElement } from "../../hooks/useCurrentElement.js";
+const QUOTE_TAG = "quote";
 export const QuoteAction = () => {
   const {
     editor,
-    themeEmotionMap
+    theme
   } = useRichTextEditor();
   const {
     element
@@ -14,9 +15,8 @@ export const QuoteAction = () => {
   const formatText = () => {
     if (!isQuote) {
       // Try to set default quote style, when the action button is clicked for first time
-      const DEFAULT_QUOTE_ID = "quote";
-      const hasQuoteStyles = themeEmotionMap && themeEmotionMap[DEFAULT_QUOTE_ID];
-      formatToQuote(editor, hasQuoteStyles ? DEFAULT_QUOTE_ID : undefined);
+      const hasQuoteStyles = theme.getTypographyByTag(QUOTE_TAG);
+      formatToQuote(editor, hasQuoteStyles ? QUOTE_TAG : undefined);
       return;
     }
     formatToParagraph(editor);

package/components/ToolbarActions/QuoteAction.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","$isQuoteNode","formatToQuote","formatToParagraph","useRichTextEditor","useCurrentElement","QuoteAction","editor","themeEmotionMap","element","isQuote","formatText","DEFAULT_QUOTE_ID","hasQuoteStyles","undefined","createElement","onClick","className"],"sources":["QuoteAction.tsx"],"sourcesContent":["import React from \"react\";\nimport { $isQuoteNode, formatToQuote, formatToParagraph } from \"@webiny/lexical-nodes\";\nimport { useRichTextEditor } from \"~/hooks/useRichTextEditor\";\nimport { useCurrentElement } from \"~/hooks/useCurrentElement\";\n\nexport const QuoteAction = () => {\n    const { editor, themeEmotionMap } = useRichTextEditor();\n    const { element } = useCurrentElement();\n    const isQuote = $isQuoteNode(element);\n\n    const formatText = () => {\n        if (!isQuote) {\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    return (\n        <button\n            onClick={formatText}\n            className={\"popup-item \" + (isQuote ? \"active\" : \"\")}\n            aria-label=\"Format text as quote\"\n        >\n            <i className=\"icon quote\" />\n        </button>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,YAAY,EAAEC,aAAa,EAAEC,iBAAiB,QAAQ,uBAAuB;AACtF,SAASC,iBAAiB;AAC1B,SAASC,iBAAiB;AAE1B,OAAO,MAAMC,WAAW,GAAGA,CAAA,KAAM;EAC7B,MAAM;IAAEC,MAAM;IAAEC;EAAgB,CAAC,GAAGJ,iBAAiB,CAAC,CAAC;EACvD,MAAM;IAAEK;EAAQ,CAAC,GAAGJ,iBAAiB,CAAC,CAAC;EACvC,MAAMK,OAAO,GAAGT,YAAY,CAACQ,OAAO,CAAC;EAErC,MAAME,UAAU,GAAGA,CAAA,KAAM;IACrB,IAAI,CAACD,OAAO,EAAE;MACV;MACA,MAAME,gBAAgB,GAAG,OAAO;MAChC,MAAMC,cAAc,GAAGL,eAAe,IAAIA,eAAe,CAACI,gBAAgB,CAAC;MAC3EV,aAAa,CAACK,MAAM,EAAEM,cAAc,GAAGD,gBAAgB,GAAGE,SAAS,CAAC;MACpE;IACJ;IACAX,iBAAiB,CAACI,MAAM,CAAC;EAC7B,CAAC;EAED,oBACIP,KAAA,CAAAe,aAAA;IACIC,OAAO,EAAEL,UAAW;IACpBM,SAAS,EAAE,aAAa,IAAIP,OAAO,GAAG,QAAQ,GAAG,EAAE,CAAE;IACrD,cAAW;EAAsB,gBAEjCV,KAAA,CAAAe,aAAA;IAAGE,SAAS,EAAC;EAAY,CAAE,CACvB,CAAC;AAEjB,CAAC","ignoreList":[]}
+{"version":3,"names":["React","$isQuoteNode","formatToQuote","formatToParagraph","useRichTextEditor","useCurrentElement","QUOTE_TAG","QuoteAction","editor","theme","element","isQuote","formatText","hasQuoteStyles","getTypographyByTag","undefined","createElement","onClick","className"],"sources":["QuoteAction.tsx"],"sourcesContent":["import React from \"react\";\nimport { $isQuoteNode, formatToQuote, formatToParagraph } from \"@webiny/lexical-nodes\";\nimport { useRichTextEditor } from \"~/hooks/useRichTextEditor.js\";\nimport { useCurrentElement } from \"~/hooks/useCurrentElement.js\";\n\nconst QUOTE_TAG = \"quote\";\n\nexport const QuoteAction = () => {\n    const { editor, theme } = useRichTextEditor();\n    const { element } = useCurrentElement();\n    const isQuote = $isQuoteNode(element);\n\n    const formatText = () => {\n        if (!isQuote) {\n            // Try to set default quote style, when the action button is clicked for first time\n            const hasQuoteStyles = theme.getTypographyByTag(QUOTE_TAG);\n            formatToQuote(editor, hasQuoteStyles ? QUOTE_TAG : undefined);\n            return;\n        }\n        formatToParagraph(editor);\n    };\n\n    return (\n        <button\n            onClick={formatText}\n            className={\"popup-item \" + (isQuote ? \"active\" : \"\")}\n            aria-label=\"Format text as quote\"\n        >\n            <i className=\"icon quote\" />\n        </button>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,YAAY,EAAEC,aAAa,EAAEC,iBAAiB,QAAQ,uBAAuB;AACtF,SAASC,iBAAiB;AAC1B,SAASC,iBAAiB;AAE1B,MAAMC,SAAS,GAAG,OAAO;AAEzB,OAAO,MAAMC,WAAW,GAAGA,CAAA,KAAM;EAC7B,MAAM;IAAEC,MAAM;IAAEC;EAAM,CAAC,GAAGL,iBAAiB,CAAC,CAAC;EAC7C,MAAM;IAAEM;EAAQ,CAAC,GAAGL,iBAAiB,CAAC,CAAC;EACvC,MAAMM,OAAO,GAAGV,YAAY,CAACS,OAAO,CAAC;EAErC,MAAME,UAAU,GAAGA,CAAA,KAAM;IACrB,IAAI,CAACD,OAAO,EAAE;MACV;MACA,MAAME,cAAc,GAAGJ,KAAK,CAACK,kBAAkB,CAACR,SAAS,CAAC;MAC1DJ,aAAa,CAACM,MAAM,EAAEK,cAAc,GAAGP,SAAS,GAAGS,SAAS,CAAC;MAC7D;IACJ;IACAZ,iBAAiB,CAACK,MAAM,CAAC;EAC7B,CAAC;EAED,oBACIR,KAAA,CAAAgB,aAAA;IACIC,OAAO,EAAEL,UAAW;IACpBM,SAAS,EAAE,aAAa,IAAIP,OAAO,GAAG,QAAQ,GAAG,EAAE,CAAE;IACrD,cAAW;EAAsB,gBAEjCX,KAAA,CAAAgB,aAAA;IAAGE,SAAS,EAAC;EAAY,CAAE,CACvB,CAAC;AAEjB,CAAC","ignoreList":[]}

package/components/ToolbarActions/TextAlignmentAction.js

@@ -1,10 +1,10 @@
 import React, { useEffect, useMemo } from "react";
 import { FORMAT_ELEMENT_COMMAND, INDENT_CONTENT_COMMAND, OUTDENT_CONTENT_COMMAND } from "lexical";
 import { Compose, makeDecoratable } from "@webiny/react-composition";
-import { TextAlignmentActionContext } from "../../context/TextAlignmentActionContextProps";
-import { useDeriveValueFromSelection } from "../../hooks/useCurrentSelection";
-import { getSelectedNode } from "../../utils/getSelectedNode";
-import { useRichTextEditor } from "../../hooks";
+import { TextAlignmentActionContext } from "../../context/TextAlignmentActionContextProps.js";
+import { useDeriveValueFromSelection } from "../../hooks/useCurrentSelection.js";
+import { getSelectedNode } from "../../utils/getSelectedNode.js";
+import { useRichTextEditor } from "../../hooks/index.js";
 
 /*
  * Base text alignment dropdown composable component.

package/components/ToolbarActions/TextAlignmentAction.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useEffect","useMemo","FORMAT_ELEMENT_COMMAND","INDENT_CONTENT_COMMAND","OUTDENT_CONTENT_COMMAND","Compose","makeDecoratable","TextAlignmentActionContext","useDeriveValueFromSelection","getSelectedNode","useRichTextEditor","BaseTextAlignmentDropDown","console","log","TextAlignmentActionDropDown","element","createElement","component","with","TextAlignmentAction","editor","alignmentValue","rangeSelection","node","getParent","getFormatType","applyTextAlignment","value","dispatchCommand","outdentText","undefined","indentText","context","Provider","TextAlignmentDropDown"],"sources":["TextAlignmentAction.tsx"],"sourcesContent":["import React, { useEffect, useMemo } from \"react\";\nimport type { ElementFormatType } from \"lexical\";\nimport { FORMAT_ELEMENT_COMMAND, INDENT_CONTENT_COMMAND, OUTDENT_CONTENT_COMMAND } from \"lexical\";\nimport { Compose, makeDecoratable } from \"@webiny/react-composition\";\nimport { TextAlignmentActionContext } from \"~/context/TextAlignmentActionContextProps\";\nimport { useDeriveValueFromSelection } from \"~/hooks/useCurrentSelection\";\nimport { getSelectedNode } from \"~/utils/getSelectedNode\";\nimport { useRichTextEditor } from \"~/hooks\";\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 } = useRichTextEditor();\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,OAAOA,KAAK,IAAIC,SAAS,EAAEC,OAAO,QAAQ,OAAO;AAEjD,SAASC,sBAAsB,EAAEC,sBAAsB,EAAEC,uBAAuB,QAAQ,SAAS;AACjG,SAASC,OAAO,EAAEC,eAAe,QAAQ,2BAA2B;AACpE,SAASC,0BAA0B;AACnC,SAASC,2BAA2B;AACpC,SAASC,eAAe;AACxB,SAASC,iBAAiB;;AAE1B;AACA;AACA;AACA;AACA,OAAO,MAAMC,yBAAyB,GAAGL,eAAe,CACpD,2BAA2B,EAC3B,MAA0B;EACtBN,SAAS,CAAC,MAAM;IACZY,OAAO,CAACC,GAAG,CAAC,kEAAkE,CAAC;EACnF,CAAC,EAAE,EAAE,CAAC;EACN,OAAO,IAAI;AACf,CACJ,CAAC;AAMD,MAAMC,2BAA2B,GAAGA,CAAC;EACjCC;AAC8B,CAAC,KAAkB;EACjD,oBAAOhB,KAAA,CAAAiB,aAAA,CAACX,OAAO;IAACY,SAAS,EAAEN,yBAA0B;IAACO,IAAI,EAAEA,CAAA,KAAM,MAAMH;EAAQ,CAAE,CAAC;AACvF,CAAC;AAMD,OAAO,MAAMI,mBAAwC,GAAGA,CAAA,KAAM;EAC1D,MAAM;IAAEC;EAAO,CAAC,GAAGV,iBAAiB,CAAC,CAAC;EACtC,MAAMW,cAAiC,GAAGb,2BAA2B,CAAC,CAAC;IAAEc;EAAe,CAAC,KAAK;IAC1F,MAAMC,IAAI,GAAGD,cAAc,GAAGb,eAAe,CAACa,cAAc,CAAC,GAAG,IAAI;IACpE,IAAIC,IAAI,EAAE;MACN,OAAOA,IAAI,CAACC,SAAS,CAAC,CAAC,EAAEC,aAAa,CAAC,CAAC,IAAI,EAAE;IAClD;IACA,OAAO,EAAE;EACb,CAAC,CAAC;EAEF,MAAMC,kBAAkB,GAAIC,KAAwB,IAAK;IACrDP,MAAM,CAACQ,eAAe,CAAC1B,sBAAsB,EAAEyB,KAAK,CAAC;EACzD,CAAC;EAED,MAAME,WAAW,GAAGA,CAAA,KAAM;IACtBT,MAAM,CAACQ,eAAe,CAACxB,uBAAuB,EAAE0B,SAAS,CAAC;EAC9D,CAAC;EAED,MAAMC,UAAU,GAAGA,CAAA,KAAM;IACrBX,MAAM,CAACQ,eAAe,CAACzB,sBAAsB,EAAE2B,SAAS,CAAC;EAC7D,CAAC;EAED,MAAME,OAAO,GAAG/B,OAAO,CACnB,OAAO;IACH0B,KAAK,EAAEN,cAAc;IACrBK,kBAAkB;IAClBG,WAAW;IACXE;EACJ,CAAC,CAAC,EACF,CAACV,cAAc,CACnB,CAAC;EAED,oBACItB,KAAA,CAAAiB,aAAA,CAACT,0BAA0B,CAAC0B,QAAQ;IAACN,KAAK,EAAEK;EAAQ,gBAChDjC,KAAA,CAAAiB,aAAA,CAACL,yBAAyB,MAAE,CACK,CAAC;AAE9C,CAAC;AAEDQ,mBAAmB,CAACe,qBAAqB,GAAGpB,2BAA2B","ignoreList":[]}
+{"version":3,"names":["React","useEffect","useMemo","FORMAT_ELEMENT_COMMAND","INDENT_CONTENT_COMMAND","OUTDENT_CONTENT_COMMAND","Compose","makeDecoratable","TextAlignmentActionContext","useDeriveValueFromSelection","getSelectedNode","useRichTextEditor","BaseTextAlignmentDropDown","console","log","TextAlignmentActionDropDown","element","createElement","component","with","TextAlignmentAction","editor","alignmentValue","rangeSelection","node","getParent","getFormatType","applyTextAlignment","value","dispatchCommand","outdentText","undefined","indentText","context","Provider","TextAlignmentDropDown"],"sources":["TextAlignmentAction.tsx"],"sourcesContent":["import React, { useEffect, useMemo } from \"react\";\nimport type { ElementFormatType } from \"lexical\";\nimport { FORMAT_ELEMENT_COMMAND, INDENT_CONTENT_COMMAND, OUTDENT_CONTENT_COMMAND } from \"lexical\";\nimport { Compose, makeDecoratable } from \"@webiny/react-composition\";\nimport { TextAlignmentActionContext } from \"~/context/TextAlignmentActionContextProps.js\";\nimport { useDeriveValueFromSelection } from \"~/hooks/useCurrentSelection.js\";\nimport { getSelectedNode } from \"~/utils/getSelectedNode.js\";\nimport { useRichTextEditor } from \"~/hooks/index.js\";\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 } = useRichTextEditor();\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,OAAOA,KAAK,IAAIC,SAAS,EAAEC,OAAO,QAAQ,OAAO;AAEjD,SAASC,sBAAsB,EAAEC,sBAAsB,EAAEC,uBAAuB,QAAQ,SAAS;AACjG,SAASC,OAAO,EAAEC,eAAe,QAAQ,2BAA2B;AACpE,SAASC,0BAA0B;AACnC,SAASC,2BAA2B;AACpC,SAASC,eAAe;AACxB,SAASC,iBAAiB;;AAE1B;AACA;AACA;AACA;AACA,OAAO,MAAMC,yBAAyB,GAAGL,eAAe,CACpD,2BAA2B,EAC3B,MAA0B;EACtBN,SAAS,CAAC,MAAM;IACZY,OAAO,CAACC,GAAG,CAAC,kEAAkE,CAAC;EACnF,CAAC,EAAE,EAAE,CAAC;EACN,OAAO,IAAI;AACf,CACJ,CAAC;AAMD,MAAMC,2BAA2B,GAAGA,CAAC;EACjCC;AAC8B,CAAC,KAAkB;EACjD,oBAAOhB,KAAA,CAAAiB,aAAA,CAACX,OAAO;IAACY,SAAS,EAAEN,yBAA0B;IAACO,IAAI,EAAEA,CAAA,KAAM,MAAMH;EAAQ,CAAE,CAAC;AACvF,CAAC;AAMD,OAAO,MAAMI,mBAAwC,GAAGA,CAAA,KAAM;EAC1D,MAAM;IAAEC;EAAO,CAAC,GAAGV,iBAAiB,CAAC,CAAC;EACtC,MAAMW,cAAiC,GAAGb,2BAA2B,CAAC,CAAC;IAAEc;EAAe,CAAC,KAAK;IAC1F,MAAMC,IAAI,GAAGD,cAAc,GAAGb,eAAe,CAACa,cAAc,CAAC,GAAG,IAAI;IACpE,IAAIC,IAAI,EAAE;MACN,OAAOA,IAAI,CAACC,SAAS,CAAC,CAAC,EAAEC,aAAa,CAAC,CAAC,IAAI,EAAE;IAClD;IACA,OAAO,EAAE;EACb,CAAC,CAAC;EAEF,MAAMC,kBAAkB,GAAIC,KAAwB,IAAK;IACrDP,MAAM,CAACQ,eAAe,CAAC1B,sBAAsB,EAAEyB,KAAK,CAAC;EACzD,CAAC;EAED,MAAME,WAAW,GAAGA,CAAA,KAAM;IACtBT,MAAM,CAACQ,eAAe,CAACxB,uBAAuB,EAAE0B,SAAS,CAAC;EAC9D,CAAC;EAED,MAAMC,UAAU,GAAGA,CAAA,KAAM;IACrBX,MAAM,CAACQ,eAAe,CAACzB,sBAAsB,EAAE2B,SAAS,CAAC;EAC7D,CAAC;EAED,MAAME,OAAO,GAAG/B,OAAO,CACnB,OAAO;IACH0B,KAAK,EAAEN,cAAc;IACrBK,kBAAkB;IAClBG,WAAW;IACXE;EACJ,CAAC,CAAC,EACF,CAACV,cAAc,CACnB,CAAC;EAED,oBACItB,KAAA,CAAAiB,aAAA,CAACT,0BAA0B,CAAC0B,QAAQ;IAACN,KAAK,EAAEK;EAAQ,gBAChDjC,KAAA,CAAAiB,aAAA,CAACL,yBAAyB,MAAE,CACK,CAAC;AAE9C,CAAC;AAEDQ,mBAAmB,CAACe,qBAAqB,GAAGpB,2BAA2B","ignoreList":[]}

package/components/ToolbarActions/TypographyAction.js

@@ -1,10 +1,10 @@
 import React, { useCallback, useEffect, useState } from "react";
 import { Compose, makeDecoratable } from "@webiny/react-composition";
-import { TypographyActionContext } from "../../context/TypographyActionContext";
+import { TypographyActionContext } from "../../context/TypographyActionContext.js";
 import { $isHeadingNode, $isListNode, $isParagraphNode, $isQuoteNode } from "@webiny/lexical-nodes";
-import { useRichTextEditor } from "../../hooks/useRichTextEditor";
-import { INSERT_ORDERED_LIST_COMMAND, INSERT_UNORDERED_LIST_COMMAND, INSERT_QUOTE_COMMAND, ADD_TYPOGRAPHY_COMMAND } from "../../commands";
-import { useCurrentElement } from "../../hooks/useCurrentElement";
+import { useRichTextEditor } from "../../hooks/useRichTextEditor.js";
+import { INSERT_ORDERED_LIST_COMMAND, INSERT_UNORDERED_LIST_COMMAND, INSERT_QUOTE_COMMAND, ADD_TYPOGRAPHY_COMMAND } from "../../commands/index.js";
+import { useCurrentElement } from "../../hooks/useCurrentElement.js";
 
 // Unfortunately, for some time in v5 we had `quoteblock` in our theme, so let's not break it.
 const quoteTagNames = ["blockquote", "quoteblock"];
@@ -31,7 +31,7 @@ export const TypographyAction = () => {
   const [typography, setTypography] = useState();
   const {
     editor,
-    themeEmotionMap
+    theme
   } = useRichTextEditor();
   const {
     element
@@ -45,16 +45,19 @@ export const TypographyAction = () => {
       editor.dispatchCommand(ADD_TYPOGRAPHY_COMMAND, {
         value
       });
+      return;
     }
     if (value.tag === "ol") {
       editor.dispatchCommand(INSERT_ORDERED_LIST_COMMAND, {
         themeStyleId: value.id
       });
+      return;
     }
     if (value.tag === "ul") {
       editor.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND, {
         themeStyleId: value.id
       });
+      return;
     }
     if (quoteTagNames.includes(value.tag)) {
       editor.dispatchCommand(INSERT_QUOTE_COMMAND, {
@@ -63,7 +66,7 @@ export const TypographyAction = () => {
     }
   }, []);
   useEffect(() => {
-    if (!element || !themeEmotionMap) {
+    if (!element) {
       return;
     }
     if (isParagraphSelected || isHeadingSelected || isQuoteSelected) {
@@ -71,27 +74,27 @@ export const TypographyAction = () => {
       if (!styleId) {
         return;
       }
-      const style = themeEmotionMap[styleId];
+      const style = theme.getTypographyById(styleId);
       if (style) {
         setTypography({
           id: style.id,
-          name: style.name
+          label: style.label
         });
       }
       return;
     }
 
     // list and quote element
-    if (themeEmotionMap && $isListNode(element)) {
+    if ($isListNode(element)) {
       const styleId = element.getStyleId();
       if (!styleId) {
         return;
       }
-      const style = themeEmotionMap[styleId];
+      const style = theme.getTypographyById(styleId);
       if (style) {
         setTypography({
           id: style.id,
-          name: style.name
+          label: style.label
         });
       }
     }

package/components/ToolbarActions/TypographyAction.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useCallback","useEffect","useState","Compose","makeDecoratable","TypographyActionContext","$isHeadingNode","$isListNode","$isParagraphNode","$isQuoteNode","useRichTextEditor","INSERT_ORDERED_LIST_COMMAND","INSERT_UNORDERED_LIST_COMMAND","INSERT_QUOTE_COMMAND","ADD_TYPOGRAPHY_COMMAND","useCurrentElement","quoteTagNames","BaseTypographyActionDropDown","console","log","TypographyActionDropDown","element","createElement","component","with","TypographyAction","typography","setTypography","editor","themeEmotionMap","isParagraphSelected","isHeadingSelected","isQuoteSelected","onTypographySelect","value","tag","includes","dispatchCommand","themeStyleId","id","styleId","getStyleId","style","name","Provider","applyTypography","TypographyDropDown"],"sources":["TypographyAction.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useState } from \"react\";\nimport type { LexicalCommand } from \"lexical\";\nimport { Compose, makeDecoratable } from \"@webiny/react-composition\";\nimport type { TypographyValue } from \"@webiny/lexical-theme\";\nimport type { ActiveTypography } from \"~/context/TypographyActionContext\";\nimport { TypographyActionContext } from \"~/context/TypographyActionContext\";\nimport { $isHeadingNode, $isListNode, $isParagraphNode, $isQuoteNode } from \"@webiny/lexical-nodes\";\nimport { useRichTextEditor } from \"~/hooks/useRichTextEditor\";\nimport type { ListCommandPayload, QuoteCommandPayload, TypographyPayload } from \"~/commands\";\nimport {\n    INSERT_ORDERED_LIST_COMMAND,\n    INSERT_UNORDERED_LIST_COMMAND,\n    INSERT_QUOTE_COMMAND,\n    ADD_TYPOGRAPHY_COMMAND\n} from \"~/commands\";\nimport { useCurrentElement } from \"~/hooks/useCurrentElement\";\n\n// Unfortunately, for some time in v5 we had `quoteblock` in our theme, so let's not break it.\nconst quoteTagNames = [\"blockquote\", \"quoteblock\"];\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 [typography, setTypography] = useState<ActiveTypography>();\n    const { editor, themeEmotionMap } = useRichTextEditor();\n    const { element } = useCurrentElement();\n    const isParagraphSelected = $isParagraphNode(element);\n    const isHeadingSelected = $isHeadingNode(element);\n    const isQuoteSelected = $isQuoteNode(element);\n\n    const onTypographySelect = useCallback((value: TypographyValue) => {\n        setTypography(value);\n\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 (quoteTagNames.includes(value.tag)) {\n            editor.dispatchCommand<LexicalCommand<QuoteCommandPayload>>(INSERT_QUOTE_COMMAND, {\n                themeStyleId: value.id\n            });\n        }\n    }, []);\n\n    useEffect(() => {\n        if (!element || !themeEmotionMap) {\n            return;\n        }\n\n        if (isParagraphSelected || isHeadingSelected || isQuoteSelected) {\n            const styleId = element.getStyleId();\n            if (!styleId) {\n                return;\n            }\n\n            const style = themeEmotionMap[styleId];\n            if (style) {\n                setTypography({\n                    id: style.id,\n                    name: style.name\n                });\n            }\n            return;\n        }\n\n        // list and quote element\n        if (themeEmotionMap && $isListNode(element)) {\n            const styleId = element.getStyleId();\n            if (!styleId) {\n                return;\n            }\n\n            const style = themeEmotionMap[styleId];\n            if (style) {\n                setTypography({\n                    id: style.id,\n                    name: style.name\n                });\n            }\n        }\n    }, [element, 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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","ignoreList":[]}
+{"version":3,"names":["React","useCallback","useEffect","useState","Compose","makeDecoratable","TypographyActionContext","$isHeadingNode","$isListNode","$isParagraphNode","$isQuoteNode","useRichTextEditor","INSERT_ORDERED_LIST_COMMAND","INSERT_UNORDERED_LIST_COMMAND","INSERT_QUOTE_COMMAND","ADD_TYPOGRAPHY_COMMAND","useCurrentElement","quoteTagNames","BaseTypographyActionDropDown","console","log","TypographyActionDropDown","element","createElement","component","with","TypographyAction","typography","setTypography","editor","theme","isParagraphSelected","isHeadingSelected","isQuoteSelected","onTypographySelect","value","tag","includes","dispatchCommand","themeStyleId","id","styleId","getStyleId","style","getTypographyById","label","Provider","applyTypography","TypographyDropDown"],"sources":["TypographyAction.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useState } from \"react\";\nimport type { LexicalCommand } from \"lexical\";\nimport { Compose, makeDecoratable } from \"@webiny/react-composition\";\nimport type { TypographyValue } from \"@webiny/lexical-theme\";\nimport type { ActiveTypography } from \"~/context/TypographyActionContext.js\";\nimport { TypographyActionContext } from \"~/context/TypographyActionContext.js\";\nimport { $isHeadingNode, $isListNode, $isParagraphNode, $isQuoteNode } from \"@webiny/lexical-nodes\";\nimport { useRichTextEditor } from \"~/hooks/useRichTextEditor.js\";\nimport type {\n    ListCommandPayload,\n    QuoteCommandPayload,\n    TypographyPayload\n} from \"~/commands/index.js\";\nimport {\n    INSERT_ORDERED_LIST_COMMAND,\n    INSERT_UNORDERED_LIST_COMMAND,\n    INSERT_QUOTE_COMMAND,\n    ADD_TYPOGRAPHY_COMMAND\n} from \"~/commands/index.js\";\nimport { useCurrentElement } from \"~/hooks/useCurrentElement.js\";\n\n// Unfortunately, for some time in v5 we had `quoteblock` in our theme, so let's not break it.\nconst quoteTagNames = [\"blockquote\", \"quoteblock\"];\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 [typography, setTypography] = useState<ActiveTypography>();\n    const { editor, theme } = useRichTextEditor();\n    const { element } = useCurrentElement();\n    const isParagraphSelected = $isParagraphNode(element);\n    const isHeadingSelected = $isHeadingNode(element);\n    const isQuoteSelected = $isQuoteNode(element);\n\n    const onTypographySelect = useCallback((value: TypographyValue) => {\n        setTypography(value);\n\n        if (value.tag.includes(\"h\") || value.tag.includes(\"p\")) {\n            editor.dispatchCommand<LexicalCommand<TypographyPayload>>(ADD_TYPOGRAPHY_COMMAND, {\n                value\n            });\n            return;\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            return;\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            return;\n        }\n\n        if (quoteTagNames.includes(value.tag)) {\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\n        if (isParagraphSelected || isHeadingSelected || isQuoteSelected) {\n            const styleId = element.getStyleId();\n            if (!styleId) {\n                return;\n            }\n\n            const style = theme.getTypographyById(styleId);\n            if (style) {\n                setTypography({\n                    id: style.id,\n                    label: style.label\n                });\n            }\n            return;\n        }\n\n        // list and quote element\n        if ($isListNode(element)) {\n            const styleId = element.getStyleId();\n            if (!styleId) {\n                return;\n            }\n\n            const style = theme.getTypographyById(styleId);\n            if (style) {\n                setTypography({\n                    id: style.id,\n                    label: style.label\n                });\n            }\n        }\n    }, [element, 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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","ignoreList":[]}

package/components/ToolbarActions/UnderlineAction.js

@@ -1,6 +1,6 @@
 import React from "react";
 import { FORMAT_TEXT_COMMAND } from "lexical";
-import { useCurrentSelection, useRichTextEditor } from "../../hooks";
+import { useCurrentSelection, useRichTextEditor } from "../../hooks/index.js";
 export const UnderlineAction = () => {
   const {
     editor

package/components/ToolbarActions/UnderlineAction.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","FORMAT_TEXT_COMMAND","useCurrentSelection","useRichTextEditor","UnderlineAction","editor","rangeSelection","isUnderlineSelected","hasFormat","handleClick","dispatchCommand","createElement","onClick","className"],"sources":["UnderlineAction.tsx"],"sourcesContent":["import React from \"react\";\nimport { FORMAT_TEXT_COMMAND } from \"lexical\";\nimport { useCurrentSelection, useRichTextEditor } from \"~/hooks\";\n\nexport const UnderlineAction = () => {\n    const { editor } = useRichTextEditor();\n    const { rangeSelection } = useCurrentSelection();\n    const isUnderlineSelected = rangeSelection ? rangeSelection.hasFormat(\"underline\") : false;\n\n    const handleClick = () => {\n        editor.dispatchCommand(FORMAT_TEXT_COMMAND, \"underline\");\n    };\n\n    return (\n        <button\n            onClick={handleClick}\n            className={\"popup-item spaced \" + (isUnderlineSelected ? \"active\" : \"\")}\n            aria-label=\"Underline text\"\n        >\n            <i className=\"format underline\" />\n        </button>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,mBAAmB,QAAQ,SAAS;AAC7C,SAASC,mBAAmB,EAAEC,iBAAiB;AAE/C,OAAO,MAAMC,eAAe,GAAGA,CAAA,KAAM;EACjC,MAAM;IAAEC;EAAO,CAAC,GAAGF,iBAAiB,CAAC,CAAC;EACtC,MAAM;IAAEG;EAAe,CAAC,GAAGJ,mBAAmB,CAAC,CAAC;EAChD,MAAMK,mBAAmB,GAAGD,cAAc,GAAGA,cAAc,CAACE,SAAS,CAAC,WAAW,CAAC,GAAG,KAAK;EAE1F,MAAMC,WAAW,GAAGA,CAAA,KAAM;IACtBJ,MAAM,CAACK,eAAe,CAACT,mBAAmB,EAAE,WAAW,CAAC;EAC5D,CAAC;EAED,oBACID,KAAA,CAAAW,aAAA;IACIC,OAAO,EAAEH,WAAY;IACrBI,SAAS,EAAE,oBAAoB,IAAIN,mBAAmB,GAAG,QAAQ,GAAG,EAAE,CAAE;IACxE,cAAW;EAAgB,gBAE3BP,KAAA,CAAAW,aAAA;IAAGE,SAAS,EAAC;EAAkB,CAAE,CAC7B,CAAC;AAEjB,CAAC","ignoreList":[]}
+{"version":3,"names":["React","FORMAT_TEXT_COMMAND","useCurrentSelection","useRichTextEditor","UnderlineAction","editor","rangeSelection","isUnderlineSelected","hasFormat","handleClick","dispatchCommand","createElement","onClick","className"],"sources":["UnderlineAction.tsx"],"sourcesContent":["import React from \"react\";\nimport { FORMAT_TEXT_COMMAND } from \"lexical\";\nimport { useCurrentSelection, useRichTextEditor } from \"~/hooks/index.js\";\n\nexport const UnderlineAction = () => {\n    const { editor } = useRichTextEditor();\n    const { rangeSelection } = useCurrentSelection();\n    const isUnderlineSelected = rangeSelection ? rangeSelection.hasFormat(\"underline\") : false;\n\n    const handleClick = () => {\n        editor.dispatchCommand(FORMAT_TEXT_COMMAND, \"underline\");\n    };\n\n    return (\n        <button\n            onClick={handleClick}\n            className={\"popup-item spaced \" + (isUnderlineSelected ? \"active\" : \"\")}\n            aria-label=\"Underline text\"\n        >\n            <i className=\"format underline\" />\n        </button>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,mBAAmB,QAAQ,SAAS;AAC7C,SAASC,mBAAmB,EAAEC,iBAAiB;AAE/C,OAAO,MAAMC,eAAe,GAAGA,CAAA,KAAM;EACjC,MAAM;IAAEC;EAAO,CAAC,GAAGF,iBAAiB,CAAC,CAAC;EACtC,MAAM;IAAEG;EAAe,CAAC,GAAGJ,mBAAmB,CAAC,CAAC;EAChD,MAAMK,mBAAmB,GAAGD,cAAc,GAAGA,cAAc,CAACE,SAAS,CAAC,WAAW,CAAC,GAAG,KAAK;EAE1F,MAAMC,WAAW,GAAGA,CAAA,KAAM;IACtBJ,MAAM,CAACK,eAAe,CAACT,mBAAmB,EAAE,WAAW,CAAC;EAC5D,CAAC;EAED,oBACID,KAAA,CAAAW,aAAA;IACIC,OAAO,EAAEH,WAAY;IACrBI,SAAS,EAAE,oBAAoB,IAAIN,mBAAmB,GAAG,QAAQ,GAAG,EAAE,CAAE;IACxE,cAAW;EAAgB,gBAE3BP,KAAA,CAAAW,aAAA;IAAGE,SAAS,EAAC;EAAkB,CAAE,CAC7B,CAAC;AAEjB,CAAC","ignoreList":[]}

package/context/RichTextEditorContext.d.ts

@@ -1,19 +1,18 @@
 import React from "react";
 import type { LexicalEditor } from "lexical";
-import type { ThemeEmotionMap, EditorTheme } from "@webiny/lexical-theme";
-import type { ToolbarActionPlugin } from "../types";
+import { type EditorTheme, Theme } from "@webiny/lexical-theme";
+import type { ToolbarActionPlugin } from "../types.js";
 export interface RichTextEditorContext {
     editor: LexicalEditor;
-    theme?: EditorTheme;
-    themeEmotionMap?: ThemeEmotionMap;
+    getOverlaysElement: () => HTMLElement;
     toolbarActionPlugins: ToolbarActionPlugin[];
+    theme: Theme;
 }
 export declare const RichTextEditorContext: React.Context<RichTextEditorContext | undefined>;
 interface RichTextEditorProviderProps {
     theme: EditorTheme;
-    themeEmotionMap?: ThemeEmotionMap;
     toolbarActionPlugins?: ToolbarActionPlugin[];
     children?: React.ReactNode | React.ReactNode[];
 }
-export declare const RichTextEditorProvider: ({ themeEmotionMap, theme, toolbarActionPlugins, children }: RichTextEditorProviderProps) => React.JSX.Element;
+export declare const RichTextEditorProvider: ({ theme, toolbarActionPlugins, children }: RichTextEditorProviderProps) => React.JSX.Element;
 export {};

package/context/RichTextEditorContext.js

@@ -1,18 +1,31 @@
-import React, { createContext } from "react";
+import React, { createContext, useCallback, useMemo } from "react";
 import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import { Theme } from "@webiny/lexical-theme";
 export const RichTextEditorContext = /*#__PURE__*/createContext(undefined);
 export const RichTextEditorProvider = ({
-  themeEmotionMap,
   theme,
   toolbarActionPlugins = [],
   children
 }) => {
   const [editor] = useLexicalComposerContext();
+  const getOverlaysElement = useCallback(() => {
+    const rootElement = editor.getRootElement();
+    if (!rootElement) {
+      return document.body;
+    }
+    const shell = rootElement.closest(".editor-shell");
+    if (!shell) {
+      return document.body;
+    }
+    const overlays = shell.previousElementSibling;
+    return overlays ?? document.body;
+  }, [editor]);
+  const internalTheme = useMemo(() => new Theme(theme.colors, theme.typography, theme.tokens), [theme]);
   return /*#__PURE__*/React.createElement(RichTextEditorContext.Provider, {
     value: {
       editor,
-      theme,
-      themeEmotionMap,
+      getOverlaysElement,
+      theme: internalTheme,
       toolbarActionPlugins
     }
   }, children);

package/context/RichTextEditorContext.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","createContext","useLexicalComposerContext","RichTextEditorContext","undefined","RichTextEditorProvider","themeEmotionMap","theme","toolbarActionPlugins","children","editor","createElement","Provider","value"],"sources":["RichTextEditorContext.tsx"],"sourcesContent":["import React, { createContext } from \"react\";\nimport type { LexicalEditor } from \"lexical\";\nimport { useLexicalComposerContext } from \"@lexical/react/LexicalComposerContext\";\nimport type { ThemeEmotionMap, EditorTheme } from \"@webiny/lexical-theme\";\nimport type { ToolbarActionPlugin } from \"~/types\";\n\nexport interface RichTextEditorContext {\n    editor: LexicalEditor;\n    theme?: EditorTheme;\n    themeEmotionMap?: ThemeEmotionMap;\n    toolbarActionPlugins: ToolbarActionPlugin[];\n}\n\nexport const RichTextEditorContext = createContext<RichTextEditorContext | undefined>(undefined);\n\ninterface RichTextEditorProviderProps {\n    theme: EditorTheme;\n    themeEmotionMap?: ThemeEmotionMap;\n    toolbarActionPlugins?: ToolbarActionPlugin[];\n    children?: React.ReactNode | React.ReactNode[];\n}\n\nexport const RichTextEditorProvider = ({\n    themeEmotionMap,\n    theme,\n    toolbarActionPlugins = [],\n    children\n}: RichTextEditorProviderProps) => {\n    const [editor] = useLexicalComposerContext();\n\n    return (\n        <RichTextEditorContext.Provider\n            value={{\n                editor,\n                theme,\n                themeEmotionMap,\n                toolbarActionPlugins\n            }}\n        >\n            {children}\n        </RichTextEditorContext.Provider>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,aAAa,QAAQ,OAAO;AAE5C,SAASC,yBAAyB,QAAQ,uCAAuC;AAWjF,OAAO,MAAMC,qBAAqB,gBAAGF,aAAa,CAAoCG,SAAS,CAAC;AAShG,OAAO,MAAMC,sBAAsB,GAAGA,CAAC;EACnCC,eAAe;EACfC,KAAK;EACLC,oBAAoB,GAAG,EAAE;EACzBC;AACyB,CAAC,KAAK;EAC/B,MAAM,CAACC,MAAM,CAAC,GAAGR,yBAAyB,CAAC,CAAC;EAE5C,oBACIF,KAAA,CAAAW,aAAA,CAACR,qBAAqB,CAACS,QAAQ;IAC3BC,KAAK,EAAE;MACHH,MAAM;MACNH,KAAK;MACLD,eAAe;MACfE;IACJ;EAAE,GAEDC,QAC2B,CAAC;AAEzC,CAAC","ignoreList":[]}
+{"version":3,"names":["React","createContext","useCallback","useMemo","useLexicalComposerContext","Theme","RichTextEditorContext","undefined","RichTextEditorProvider","theme","toolbarActionPlugins","children","editor","getOverlaysElement","rootElement","getRootElement","document","body","shell","closest","overlays","previousElementSibling","internalTheme","colors","typography","tokens","createElement","Provider","value"],"sources":["RichTextEditorContext.tsx"],"sourcesContent":["import React, { createContext, useCallback, useMemo } from \"react\";\nimport type { LexicalEditor } from \"lexical\";\nimport { useLexicalComposerContext } from \"@lexical/react/LexicalComposerContext\";\nimport { type EditorTheme, Theme } from \"@webiny/lexical-theme\";\nimport type { ToolbarActionPlugin } from \"~/types.js\";\n\nexport interface RichTextEditorContext {\n    editor: LexicalEditor;\n    getOverlaysElement: () => HTMLElement;\n    toolbarActionPlugins: ToolbarActionPlugin[];\n    theme: Theme;\n}\n\nexport const RichTextEditorContext = createContext<RichTextEditorContext | undefined>(undefined);\n\ninterface RichTextEditorProviderProps {\n    theme: EditorTheme;\n    toolbarActionPlugins?: ToolbarActionPlugin[];\n    children?: React.ReactNode | React.ReactNode[];\n}\n\nexport const RichTextEditorProvider = ({\n    theme,\n    toolbarActionPlugins = [],\n    children\n}: RichTextEditorProviderProps) => {\n    const [editor] = useLexicalComposerContext();\n\n    const getOverlaysElement = useCallback(() => {\n        const rootElement = editor.getRootElement();\n        if (!rootElement) {\n            return document.body;\n        }\n\n        const shell = rootElement.closest(\".editor-shell\");\n        if (!shell) {\n            return document.body;\n        }\n        const overlays = shell.previousElementSibling;\n\n        return (overlays ?? document.body) as HTMLElement;\n    }, [editor]);\n\n    const internalTheme = useMemo(\n        () => new Theme(theme.colors, theme.typography, theme.tokens),\n        [theme]\n    );\n\n    return (\n        <RichTextEditorContext.Provider\n            value={{\n                editor,\n                getOverlaysElement,\n                theme: internalTheme,\n                toolbarActionPlugins\n            }}\n        >\n            {children}\n        </RichTextEditorContext.Provider>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,aAAa,EAAEC,WAAW,EAAEC,OAAO,QAAQ,OAAO;AAElE,SAASC,yBAAyB,QAAQ,uCAAuC;AACjF,SAA2BC,KAAK,QAAQ,uBAAuB;AAU/D,OAAO,MAAMC,qBAAqB,gBAAGL,aAAa,CAAoCM,SAAS,CAAC;AAQhG,OAAO,MAAMC,sBAAsB,GAAGA,CAAC;EACnCC,KAAK;EACLC,oBAAoB,GAAG,EAAE;EACzBC;AACyB,CAAC,KAAK;EAC/B,MAAM,CAACC,MAAM,CAAC,GAAGR,yBAAyB,CAAC,CAAC;EAE5C,MAAMS,kBAAkB,GAAGX,WAAW,CAAC,MAAM;IACzC,MAAMY,WAAW,GAAGF,MAAM,CAACG,cAAc,CAAC,CAAC;IAC3C,IAAI,CAACD,WAAW,EAAE;MACd,OAAOE,QAAQ,CAACC,IAAI;IACxB;IAEA,MAAMC,KAAK,GAAGJ,WAAW,CAACK,OAAO,CAAC,eAAe,CAAC;IAClD,IAAI,CAACD,KAAK,EAAE;MACR,OAAOF,QAAQ,CAACC,IAAI;IACxB;IACA,MAAMG,QAAQ,GAAGF,KAAK,CAACG,sBAAsB;IAE7C,OAAQD,QAAQ,IAAIJ,QAAQ,CAACC,IAAI;EACrC,CAAC,EAAE,CAACL,MAAM,CAAC,CAAC;EAEZ,MAAMU,aAAa,GAAGnB,OAAO,CACzB,MAAM,IAAIE,KAAK,CAACI,KAAK,CAACc,MAAM,EAAEd,KAAK,CAACe,UAAU,EAAEf,KAAK,CAACgB,MAAM,CAAC,EAC7D,CAAChB,KAAK,CACV,CAAC;EAED,oBACIT,KAAA,CAAA0B,aAAA,CAACpB,qBAAqB,CAACqB,QAAQ;IAC3BC,KAAK,EAAE;MACHhB,MAAM;MACNC,kBAAkB;MAClBJ,KAAK,EAAEa,aAAa;MACpBZ;IACJ;EAAE,GAEDC,QAC2B,CAAC;AAEzC,CAAC","ignoreList":[]}

package/context/TypographyActionContext.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 import type { TypographyValue } from "@webiny/lexical-theme";
-export type ActiveTypography = Pick<TypographyValue, "id" | "name">;
+export type ActiveTypography = Pick<TypographyValue, "id" | "label">;
 export interface TypographyActionContextProps {
     value: ActiveTypography | undefined;
     applyTypography: (value: TypographyValue) => void;

package/context/TypographyActionContext.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","TypographyActionContext","createContext","undefined"],"sources":["TypographyActionContext.tsx"],"sourcesContent":["import React from \"react\";\nimport type { TypographyValue } from \"@webiny/lexical-theme\";\n\nexport type ActiveTypography = Pick<TypographyValue, \"id\" | \"name\">;\n\nexport interface TypographyActionContextProps {\n    /*\n     * @desc Current selected typography\n     * */\n    value: ActiveTypography | undefined;\n\n    /*\n     * @desc Apply font family to selected text.\n     * @params: value\n     */\n    applyTypography: (value: TypographyValue) => void;\n}\n\nexport const TypographyActionContext = React.createContext<\n    TypographyActionContextProps | undefined\n>(undefined);\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAkBzB,OAAO,MAAMC,uBAAuB,gBAAGD,KAAK,CAACE,aAAa,CAExDC,SAAS,CAAC","ignoreList":[]}
+{"version":3,"names":["React","TypographyActionContext","createContext","undefined"],"sources":["TypographyActionContext.tsx"],"sourcesContent":["import React from \"react\";\nimport type { TypographyValue } from \"@webiny/lexical-theme\";\n\nexport type ActiveTypography = Pick<TypographyValue, \"id\" | \"label\">;\n\nexport interface TypographyActionContextProps {\n    /*\n     * @desc Current selected typography\n     * */\n    value: ActiveTypography | undefined;\n\n    /*\n     * @desc Apply font family to selected text.\n     * @params: value\n     */\n    applyTypography: (value: TypographyValue) => void;\n}\n\nexport const TypographyActionContext = React.createContext<\n    TypographyActionContextProps | undefined\n>(undefined);\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAkBzB,OAAO,MAAMC,uBAAuB,gBAAGD,KAAK,CAACE,aAAa,CAExDC,SAAS,CAAC","ignoreList":[]}

package/exports/admin/lexical.d.ts

@@ -0,0 +1,15 @@
+export { LexicalHtmlRenderer } from "../../components/LexicalHtmlRenderer.js";
+export { getNodeFromSelection } from "../../hooks/index.js";
+export { useCurrentElement } from "../../hooks/index.js";
+export { useCurrentSelection } from "../../hooks/index.js";
+export { useDeriveValueFromSelection } from "../../hooks/index.js";
+export { useRichTextEditor } from "../../hooks/index.js";
+export { useFontColorPicker } from "../../hooks/index.js";
+export { useTextAlignmentAction } from "../../hooks/index.js";
+export { useTypographyAction } from "../../hooks/index.js";
+export { useIsMounted } from "../../hooks/index.js";
+export { Divider } from "../../ui/Divider.js";
+export { DropDownItem } from "../../ui/DropDown.js";
+export { DropDown } from "../../ui/DropDown.js";
+export type { Klass, LexicalNode } from "../../types.js";
+export { LexicalEditorConfig, useLexicalEditorConfig } from "../../components/LexicalEditorConfig/LexicalEditorConfig.js";

package/exports/admin/lexical.js

@@ -0,0 +1,23 @@
+// render
+export { LexicalHtmlRenderer } from "../../components/LexicalHtmlRenderer.js";
+// hooks
+export { getNodeFromSelection } from "../../hooks/index.js";
+export { useCurrentElement } from "../../hooks/index.js";
+export { useCurrentSelection } from "../../hooks/index.js";
+export { useDeriveValueFromSelection } from "../../hooks/index.js";
+export { useRichTextEditor } from "../../hooks/index.js";
+export { useFontColorPicker } from "../../hooks/index.js";
+export { useTextAlignmentAction } from "../../hooks/index.js";
+export { useTypographyAction } from "../../hooks/index.js";
+export { useIsMounted } from "../../hooks/index.js";
+// UI elements
+export { Divider } from "../../ui/Divider.js";
+export { DropDownItem } from "../../ui/DropDown.js";
+export { DropDown } from "../../ui/DropDown.js";
+
+// types
+
+// config
+export { LexicalEditorConfig, useLexicalEditorConfig } from "../../components/LexicalEditorConfig/LexicalEditorConfig.js";
+
+//# sourceMappingURL=lexical.js.map

package/exports/admin/lexical.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["LexicalHtmlRenderer","getNodeFromSelection","useCurrentElement","useCurrentSelection","useDeriveValueFromSelection","useRichTextEditor","useFontColorPicker","useTextAlignmentAction","useTypographyAction","useIsMounted","Divider","DropDownItem","DropDown","LexicalEditorConfig","useLexicalEditorConfig"],"sources":["lexical.ts"],"sourcesContent":["// render\nexport { LexicalHtmlRenderer } from \"~/components/LexicalHtmlRenderer.js\";\n// hooks\nexport { getNodeFromSelection } from \"~/hooks/index.js\";\nexport { useCurrentElement } from \"~/hooks/index.js\";\nexport { useCurrentSelection } from \"~/hooks/index.js\";\nexport { useDeriveValueFromSelection } from \"~/hooks/index.js\";\nexport { useRichTextEditor } from \"~/hooks/index.js\";\nexport { useFontColorPicker } from \"~/hooks/index.js\";\nexport { useTextAlignmentAction } from \"~/hooks/index.js\";\nexport { useTypographyAction } from \"~/hooks/index.js\";\nexport { useIsMounted } from \"~/hooks/index.js\";\n// UI elements\nexport { Divider } from \"~/ui/Divider.js\";\nexport { DropDownItem } from \"~/ui/DropDown.js\";\nexport { DropDown } from \"~/ui/DropDown.js\";\n\n// types\nexport type { Klass, LexicalNode } from \"~/types.js\";\n// config\nexport {\n    LexicalEditorConfig,\n    useLexicalEditorConfig\n} from \"~/components/LexicalEditorConfig/LexicalEditorConfig.js\";\n"],"mappings":"AAAA;AACA,SAASA,mBAAmB;AAC5B;AACA,SAASC,oBAAoB;AAC7B,SAASC,iBAAiB;AAC1B,SAASC,mBAAmB;AAC5B,SAASC,2BAA2B;AACpC,SAASC,iBAAiB;AAC1B,SAASC,kBAAkB;AAC3B,SAASC,sBAAsB;AAC/B,SAASC,mBAAmB;AAC5B,SAASC,YAAY;AACrB;AACA,SAASC,OAAO;AAChB,SAASC,YAAY;AACrB,SAASC,QAAQ;;AAEjB;;AAEA;AACA,SACIC,mBAAmB,EACnBC,sBAAsB","ignoreList":[]}

package/hooks/index.d.ts

@@ -1,8 +1,7 @@
-export * from "./useRichTextEditor";
-export * from "./useFontColorPicker";
-export * from "./useTypographyAction";
-export * from "./useTextAlignmentAction";
-export * from "./useCurrentSelection";
-export * from "./useCurrentElement";
-export * from "./useList";
-export * from "./useIsMounted";
+export * from "./useRichTextEditor.js";
+export * from "./useFontColorPicker.js";
+export * from "./useTypographyAction.js";
+export * from "./useTextAlignmentAction.js";
+export * from "./useCurrentSelection.js";
+export * from "./useCurrentElement.js";
+export * from "./useIsMounted.js";

package/hooks/index.js

@@ -1,10 +1,9 @@
-export * from "./useRichTextEditor";
-export * from "./useFontColorPicker";
-export * from "./useTypographyAction";
-export * from "./useTextAlignmentAction";
-export * from "./useCurrentSelection";
-export * from "./useCurrentElement";
-export * from "./useList";
-export * from "./useIsMounted";
+export * from "./useRichTextEditor.js";
+export * from "./useFontColorPicker.js";
+export * from "./useTypographyAction.js";
+export * from "./useTextAlignmentAction.js";
+export * from "./useCurrentSelection.js";
+export * from "./useCurrentElement.js";
+export * from "./useIsMounted.js";
 
 //# sourceMappingURL=index.js.map

package/hooks/index.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./useRichTextEditor\";\nexport * from \"./useFontColorPicker\";\nexport * from \"./useTypographyAction\";\nexport * from \"./useTextAlignmentAction\";\nexport * from \"./useCurrentSelection\";\nexport * from \"./useCurrentElement\";\nexport * from \"./useList\";\nexport * from \"./useIsMounted\";\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","ignoreList":[]}
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./useRichTextEditor.js\";\nexport * from \"./useFontColorPicker.js\";\nexport * from \"./useTypographyAction.js\";\nexport * from \"./useTextAlignmentAction.js\";\nexport * from \"./useCurrentSelection.js\";\nexport * from \"./useCurrentElement.js\";\nexport * from \"./useIsMounted.js\";\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA","ignoreList":[]}

package/hooks/useCurrentElement.js

@@ -1,6 +1,5 @@
-import { $findMatchingParent } from "@lexical/utils";
-import { $isRootOrShadowRoot } from "lexical";
-import { useDeriveValueFromSelection } from "./useCurrentSelection";
+import { $isRootOrShadowRoot, $findMatchingParent } from "lexical";
+import { useDeriveValueFromSelection } from "./useCurrentSelection.js";
 export function useCurrentElement() {
   return useDeriveValueFromSelection(({
     rangeSelection

package/hooks/useCurrentElement.js.map

@@ -1 +1 @@
-{"version":3,"names":["$findMatchingParent","$isRootOrShadowRoot","useDeriveValueFromSelection","useCurrentElement","rangeSelection","element","getNodeFromSelection","selection","anchorNode","anchor","getNode","getKey","e","parent","getParent","getTopLevelElementOrThrow"],"sources":["useCurrentElement.ts"],"sourcesContent":["import { $findMatchingParent } from \"@lexical/utils\";\nimport type { RangeSelection } from \"lexical\";\nimport { $isRootOrShadowRoot } from \"lexical\";\nimport { useDeriveValueFromSelection } from \"~/hooks/useCurrentSelection\";\n\nexport function useCurrentElement() {\n    return useDeriveValueFromSelection(({ rangeSelection }) => {\n        if (!rangeSelection) {\n            return { element: null };\n        }\n\n        return { element: getNodeFromSelection(rangeSelection) };\n    });\n}\n\nexport function getNodeFromSelection(selection: RangeSelection) {\n    const anchorNode = selection.anchor.getNode();\n\n    const element =\n        anchorNode.getKey() === \"root\"\n            ? anchorNode\n            : $findMatchingParent(anchorNode, e => {\n                  const parent = e.getParent();\n                  return parent !== null && $isRootOrShadowRoot(parent);\n              });\n\n    return element || anchorNode.getTopLevelElementOrThrow();\n}\n"],"mappings":"AAAA,SAASA,mBAAmB,QAAQ,gBAAgB;AAEpD,SAASC,mBAAmB,QAAQ,SAAS;AAC7C,SAASC,2BAA2B;AAEpC,OAAO,SAASC,iBAAiBA,CAAA,EAAG;EAChC,OAAOD,2BAA2B,CAAC,CAAC;IAAEE;EAAe,CAAC,KAAK;IACvD,IAAI,CAACA,cAAc,EAAE;MACjB,OAAO;QAAEC,OAAO,EAAE;MAAK,CAAC;IAC5B;IAEA,OAAO;MAAEA,OAAO,EAAEC,oBAAoB,CAACF,cAAc;IAAE,CAAC;EAC5D,CAAC,CAAC;AACN;AAEA,OAAO,SAASE,oBAAoBA,CAACC,SAAyB,EAAE;EAC5D,MAAMC,UAAU,GAAGD,SAAS,CAACE,MAAM,CAACC,OAAO,CAAC,CAAC;EAE7C,MAAML,OAAO,GACTG,UAAU,CAACG,MAAM,CAAC,CAAC,KAAK,MAAM,GACxBH,UAAU,GACVR,mBAAmB,CAACQ,UAAU,EAAEI,CAAC,IAAI;IACjC,MAAMC,MAAM,GAAGD,CAAC,CAACE,SAAS,CAAC,CAAC;IAC5B,OAAOD,MAAM,KAAK,IAAI,IAAIZ,mBAAmB,CAACY,MAAM,CAAC;EACzD,CAAC,CAAC;EAEZ,OAAOR,OAAO,IAAIG,UAAU,CAACO,yBAAyB,CAAC,CAAC;AAC5D","ignoreList":[]}
+{"version":3,"names":["$isRootOrShadowRoot","$findMatchingParent","useDeriveValueFromSelection","useCurrentElement","rangeSelection","element","getNodeFromSelection","selection","anchorNode","anchor","getNode","getKey","e","parent","getParent","getTopLevelElementOrThrow"],"sources":["useCurrentElement.ts"],"sourcesContent":["import type { RangeSelection } from \"lexical\";\nimport { $isRootOrShadowRoot, $findMatchingParent } from \"lexical\";\nimport { useDeriveValueFromSelection } from \"~/hooks/useCurrentSelection.js\";\n\nexport function useCurrentElement() {\n    return useDeriveValueFromSelection(({ rangeSelection }) => {\n        if (!rangeSelection) {\n            return { element: null };\n        }\n\n        return { element: getNodeFromSelection(rangeSelection) };\n    });\n}\n\nexport function getNodeFromSelection(selection: RangeSelection) {\n    const anchorNode = selection.anchor.getNode();\n\n    const element =\n        anchorNode.getKey() === \"root\"\n            ? anchorNode\n            : $findMatchingParent(anchorNode, e => {\n                  const parent = e.getParent();\n                  return parent !== null && $isRootOrShadowRoot(parent);\n              });\n\n    return element || anchorNode.getTopLevelElementOrThrow();\n}\n"],"mappings":"AACA,SAASA,mBAAmB,EAAEC,mBAAmB,QAAQ,SAAS;AAClE,SAASC,2BAA2B;AAEpC,OAAO,SAASC,iBAAiBA,CAAA,EAAG;EAChC,OAAOD,2BAA2B,CAAC,CAAC;IAAEE;EAAe,CAAC,KAAK;IACvD,IAAI,CAACA,cAAc,EAAE;MACjB,OAAO;QAAEC,OAAO,EAAE;MAAK,CAAC;IAC5B;IAEA,OAAO;MAAEA,OAAO,EAAEC,oBAAoB,CAACF,cAAc;IAAE,CAAC;EAC5D,CAAC,CAAC;AACN;AAEA,OAAO,SAASE,oBAAoBA,CAACC,SAAyB,EAAE;EAC5D,MAAMC,UAAU,GAAGD,SAAS,CAACE,MAAM,CAACC,OAAO,CAAC,CAAC;EAE7C,MAAML,OAAO,GACTG,UAAU,CAACG,MAAM,CAAC,CAAC,KAAK,MAAM,GACxBH,UAAU,GACVP,mBAAmB,CAACO,UAAU,EAAEI,CAAC,IAAI;IACjC,MAAMC,MAAM,GAAGD,CAAC,CAACE,SAAS,CAAC,CAAC;IAC5B,OAAOD,MAAM,KAAK,IAAI,IAAIb,mBAAmB,CAACa,MAAM,CAAC;EACzD,CAAC,CAAC;EAEZ,OAAOR,OAAO,IAAIG,UAAU,CAACO,yBAAyB,CAAC,CAAC;AAC5D","ignoreList":[]}

package/hooks/useCurrentSelection.js

@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useState } from "react";
 import { $getSelection, $isRangeSelection, $isNodeSelection } from "lexical";
-import { useIsMounted } from "./useIsMounted";
-import { useRichTextEditor } from "./useRichTextEditor";
+import { useIsMounted } from "./useIsMounted.js";
+import { useRichTextEditor } from "./useRichTextEditor.js";
 function getOutput(selection) {
   return {
     selection,
@@ -16,7 +16,7 @@ export function useCurrentSelection() {
   const [selection, setSelection] = useState(getOutput(null));
   const isMounted = useIsMounted();
   const storeSelection = useCallback(() => {
-    editor.getEditorState().read(() => {
+    editor.read(() => {
       if (isMounted()) {
         setSelection(getOutput($getSelection()));
       }
@@ -38,7 +38,7 @@ export function useDeriveValueFromSelection(generator) {
   const [value, setValue] = useState(generator(getOutput(null)));
   const isMounted = useIsMounted();
   const generateValue = useCallback(() => {
-    editor.getEditorState().read(() => {
+    editor.read(() => {
       if (isMounted()) {
         setValue(generator(getOutput($getSelection())));
       }

package/hooks/useCurrentSelection.js.map

@@ -1 +1 @@
-{"version":3,"names":["useCallback","useEffect","useState","$getSelection","$isRangeSelection","$isNodeSelection","useIsMounted","useRichTextEditor","getOutput","selection","rangeSelection","nodeSelection","useCurrentSelection","editor","setSelection","isMounted","storeSelection","getEditorState","read","registerUpdateListener","useDeriveValueFromSelection","generator","value","setValue","generateValue"],"sources":["useCurrentSelection.ts"],"sourcesContent":["import { useCallback, useEffect, useState } from \"react\";\nimport type { RangeSelection, NodeSelection } from \"lexical\";\nimport { $getSelection, $isRangeSelection, $isNodeSelection } from \"lexical\";\nimport { useIsMounted } from \"./useIsMounted\";\nimport { useRichTextEditor } from \"~/hooks/useRichTextEditor\";\n\nexport interface CurrentSelection {\n    selection: ReturnType<typeof $getSelection>;\n    rangeSelection: RangeSelection | null;\n    nodeSelection: NodeSelection | null;\n}\n\ninterface Generator<T> {\n    (params: CurrentSelection): T;\n}\n\nfunction getOutput(selection: ReturnType<typeof $getSelection>) {\n    return {\n        selection,\n        rangeSelection: $isRangeSelection(selection) ? selection : null,\n        nodeSelection: $isNodeSelection(selection) ? selection : null\n    };\n}\n\nexport function useCurrentSelection() {\n    const { editor } = useRichTextEditor();\n    const [selection, setSelection] = useState<CurrentSelection>(getOutput(null));\n    const isMounted = useIsMounted();\n\n    const storeSelection = useCallback(() => {\n        editor.getEditorState().read(() => {\n            if (isMounted()) {\n                setSelection(getOutput($getSelection()));\n            }\n        });\n    }, [editor]);\n\n    useEffect(() => {\n        // On first mount, store current selection.\n        storeSelection();\n\n        // Subscribe to editor updates and keep track of the selection.\n        return editor.registerUpdateListener(storeSelection);\n    }, []);\n\n    return selection;\n}\n\nexport function useDeriveValueFromSelection<T>(generator: Generator<T>) {\n    const { editor } = useRichTextEditor();\n    const [value, setValue] = useState<T>(generator(getOutput(null)));\n    const isMounted = useIsMounted();\n\n    const generateValue = useCallback(() => {\n        editor.getEditorState().read(() => {\n            if (isMounted()) {\n                setValue(generator(getOutput($getSelection())));\n            }\n        });\n    }, [editor]);\n\n    useEffect(() => {\n        // On first mount, generate current value.\n        generateValue();\n\n        // Subscribe to editor updates and regenerate the value.\n        return editor.registerUpdateListener(generateValue);\n    }, []);\n\n    return value;\n}\n"],"mappings":"AAAA,SAASA,WAAW,EAAEC,SAAS,EAAEC,QAAQ,QAAQ,OAAO;AAExD,SAASC,aAAa,EAAEC,iBAAiB,EAAEC,gBAAgB,QAAQ,SAAS;AAC5E,SAASC,YAAY;AACrB,SAASC,iBAAiB;AAY1B,SAASC,SAASA,CAACC,SAA2C,EAAE;EAC5D,OAAO;IACHA,SAAS;IACTC,cAAc,EAAEN,iBAAiB,CAACK,SAAS,CAAC,GAAGA,SAAS,GAAG,IAAI;IAC/DE,aAAa,EAAEN,gBAAgB,CAACI,SAAS,CAAC,GAAGA,SAAS,GAAG;EAC7D,CAAC;AACL;AAEA,OAAO,SAASG,mBAAmBA,CAAA,EAAG;EAClC,MAAM;IAAEC;EAAO,CAAC,GAAGN,iBAAiB,CAAC,CAAC;EACtC,MAAM,CAACE,SAAS,EAAEK,YAAY,CAAC,GAAGZ,QAAQ,CAAmBM,SAAS,CAAC,IAAI,CAAC,CAAC;EAC7E,MAAMO,SAAS,GAAGT,YAAY,CAAC,CAAC;EAEhC,MAAMU,cAAc,GAAGhB,WAAW,CAAC,MAAM;IACrCa,MAAM,CAACI,cAAc,CAAC,CAAC,CAACC,IAAI,CAAC,MAAM;MAC/B,IAAIH,SAAS,CAAC,CAAC,EAAE;QACbD,YAAY,CAACN,SAAS,CAACL,aAAa,CAAC,CAAC,CAAC,CAAC;MAC5C;IACJ,CAAC,CAAC;EACN,CAAC,EAAE,CAACU,MAAM,CAAC,CAAC;EAEZZ,SAAS,CAAC,MAAM;IACZ;IACAe,cAAc,CAAC,CAAC;;IAEhB;IACA,OAAOH,MAAM,CAACM,sBAAsB,CAACH,cAAc,CAAC;EACxD,CAAC,EAAE,EAAE,CAAC;EAEN,OAAOP,SAAS;AACpB;AAEA,OAAO,SAASW,2BAA2BA,CAAIC,SAAuB,EAAE;EACpE,MAAM;IAAER;EAAO,CAAC,GAAGN,iBAAiB,CAAC,CAAC;EACtC,MAAM,CAACe,KAAK,EAAEC,QAAQ,CAAC,GAAGrB,QAAQ,CAAImB,SAAS,CAACb,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC;EACjE,MAAMO,SAAS,GAAGT,YAAY,CAAC,CAAC;EAEhC,MAAMkB,aAAa,GAAGxB,WAAW,CAAC,MAAM;IACpCa,MAAM,CAACI,cAAc,CAAC,CAAC,CAACC,IAAI,CAAC,MAAM;MAC/B,IAAIH,SAAS,CAAC,CAAC,EAAE;QACbQ,QAAQ,CAACF,SAAS,CAACb,SAAS,CAACL,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC;MACnD;IACJ,CAAC,CAAC;EACN,CAAC,EAAE,CAACU,MAAM,CAAC,CAAC;EAEZZ,SAAS,CAAC,MAAM;IACZ;IACAuB,aAAa,CAAC,CAAC;;IAEf;IACA,OAAOX,MAAM,CAACM,sBAAsB,CAACK,aAAa,CAAC;EACvD,CAAC,EAAE,EAAE,CAAC;EAEN,OAAOF,KAAK;AAChB","ignoreList":[]}
+{"version":3,"names":["useCallback","useEffect","useState","$getSelection","$isRangeSelection","$isNodeSelection","useIsMounted","useRichTextEditor","getOutput","selection","rangeSelection","nodeSelection","useCurrentSelection","editor","setSelection","isMounted","storeSelection","read","registerUpdateListener","useDeriveValueFromSelection","generator","value","setValue","generateValue"],"sources":["useCurrentSelection.ts"],"sourcesContent":["import { useCallback, useEffect, useState } from \"react\";\nimport type { RangeSelection, NodeSelection } from \"lexical\";\nimport { $getSelection, $isRangeSelection, $isNodeSelection } from \"lexical\";\nimport { useIsMounted } from \"./useIsMounted.js\";\nimport { useRichTextEditor } from \"~/hooks/useRichTextEditor.js\";\n\nexport interface CurrentSelection {\n    selection: ReturnType<typeof $getSelection>;\n    rangeSelection: RangeSelection | null;\n    nodeSelection: NodeSelection | null;\n}\n\ninterface Generator<T> {\n    (params: CurrentSelection): T;\n}\n\nfunction getOutput(selection: ReturnType<typeof $getSelection>) {\n    return {\n        selection,\n        rangeSelection: $isRangeSelection(selection) ? selection : null,\n        nodeSelection: $isNodeSelection(selection) ? selection : null\n    };\n}\n\nexport function useCurrentSelection() {\n    const { editor } = useRichTextEditor();\n    const [selection, setSelection] = useState<CurrentSelection>(getOutput(null));\n    const isMounted = useIsMounted();\n\n    const storeSelection = useCallback(() => {\n        editor.read(() => {\n            if (isMounted()) {\n                setSelection(getOutput($getSelection()));\n            }\n        });\n    }, [editor]);\n\n    useEffect(() => {\n        // On first mount, store current selection.\n        storeSelection();\n\n        // Subscribe to editor updates and keep track of the selection.\n        return editor.registerUpdateListener(storeSelection);\n    }, []);\n\n    return selection;\n}\n\nexport function useDeriveValueFromSelection<T>(generator: Generator<T>) {\n    const { editor } = useRichTextEditor();\n    const [value, setValue] = useState<T>(generator(getOutput(null)));\n    const isMounted = useIsMounted();\n\n    const generateValue = useCallback(() => {\n        editor.read(() => {\n            if (isMounted()) {\n                setValue(generator(getOutput($getSelection())));\n            }\n        });\n    }, [editor]);\n\n    useEffect(() => {\n        // On first mount, generate current value.\n        generateValue();\n\n        // Subscribe to editor updates and regenerate the value.\n        return editor.registerUpdateListener(generateValue);\n    }, []);\n\n    return value;\n}\n"],"mappings":"AAAA,SAASA,WAAW,EAAEC,SAAS,EAAEC,QAAQ,QAAQ,OAAO;AAExD,SAASC,aAAa,EAAEC,iBAAiB,EAAEC,gBAAgB,QAAQ,SAAS;AAC5E,SAASC,YAAY;AACrB,SAASC,iBAAiB;AAY1B,SAASC,SAASA,CAACC,SAA2C,EAAE;EAC5D,OAAO;IACHA,SAAS;IACTC,cAAc,EAAEN,iBAAiB,CAACK,SAAS,CAAC,GAAGA,SAAS,GAAG,IAAI;IAC/DE,aAAa,EAAEN,gBAAgB,CAACI,SAAS,CAAC,GAAGA,SAAS,GAAG;EAC7D,CAAC;AACL;AAEA,OAAO,SAASG,mBAAmBA,CAAA,EAAG;EAClC,MAAM;IAAEC;EAAO,CAAC,GAAGN,iBAAiB,CAAC,CAAC;EACtC,MAAM,CAACE,SAAS,EAAEK,YAAY,CAAC,GAAGZ,QAAQ,CAAmBM,SAAS,CAAC,IAAI,CAAC,CAAC;EAC7E,MAAMO,SAAS,GAAGT,YAAY,CAAC,CAAC;EAEhC,MAAMU,cAAc,GAAGhB,WAAW,CAAC,MAAM;IACrCa,MAAM,CAACI,IAAI,CAAC,MAAM;MACd,IAAIF,SAAS,CAAC,CAAC,EAAE;QACbD,YAAY,CAACN,SAAS,CAACL,aAAa,CAAC,CAAC,CAAC,CAAC;MAC5C;IACJ,CAAC,CAAC;EACN,CAAC,EAAE,CAACU,MAAM,CAAC,CAAC;EAEZZ,SAAS,CAAC,MAAM;IACZ;IACAe,cAAc,CAAC,CAAC;;IAEhB;IACA,OAAOH,MAAM,CAACK,sBAAsB,CAACF,cAAc,CAAC;EACxD,CAAC,EAAE,EAAE,CAAC;EAEN,OAAOP,SAAS;AACpB;AAEA,OAAO,SAASU,2BAA2BA,CAAIC,SAAuB,EAAE;EACpE,MAAM;IAAEP;EAAO,CAAC,GAAGN,iBAAiB,CAAC,CAAC;EACtC,MAAM,CAACc,KAAK,EAAEC,QAAQ,CAAC,GAAGpB,QAAQ,CAAIkB,SAAS,CAACZ,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC;EACjE,MAAMO,SAAS,GAAGT,YAAY,CAAC,CAAC;EAEhC,MAAMiB,aAAa,GAAGvB,WAAW,CAAC,MAAM;IACpCa,MAAM,CAACI,IAAI,CAAC,MAAM;MACd,IAAIF,SAAS,CAAC,CAAC,EAAE;QACbO,QAAQ,CAACF,SAAS,CAACZ,SAAS,CAACL,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC;MACnD;IACJ,CAAC,CAAC;EACN,CAAC,EAAE,CAACU,MAAM,CAAC,CAAC;EAEZZ,SAAS,CAAC,MAAM;IACZ;IACAsB,aAAa,CAAC,CAAC;;IAEf;IACA,OAAOV,MAAM,CAACK,sBAAsB,CAACK,aAAa,CAAC;EACvD,CAAC,EAAE,EAAE,CAAC;EAEN,OAAOF,KAAK;AAChB","ignoreList":[]}

package/hooks/useFontColorPicker.d.ts

@@ -1,2 +1,2 @@
-import { FontColorActionContext } from "../context/FontColorActionContext";
+import { FontColorActionContext } from "../context/FontColorActionContext.js";
 export declare function useFontColorPicker(): FontColorActionContext;