@webiny/lexical-editor 0.0.0-unstable.06b2ede40f

package/components/ToolbarActions/LinkAction.js

@@ -0,0 +1,37 @@
+import React, { useCallback } from "react";
+import { $isLinkNode, TOGGLE_LINK_COMMAND } from "@webiny/lexical-nodes";
+import { getNodeFromSelection } from "../../hooks/useCurrentElement";
+import { useDeriveValueFromSelection } from "../../hooks/useCurrentSelection";
+import { useRichTextEditor } from "../../hooks";
+export const LinkAction = () => {
+  const {
+    editor
+  } = useRichTextEditor();
+  const isLink = useDeriveValueFromSelection(({
+    rangeSelection
+  }) => {
+    if (!rangeSelection) {
+      return false;
+    }
+    const node = getNodeFromSelection(rangeSelection);
+    return node ? $isLinkNode(node) || $isLinkNode(node.getParent()) : false;
+  });
+  const insertLink = useCallback(() => {
+    if (!isLink) {
+      editor.dispatchCommand(TOGGLE_LINK_COMMAND, {
+        url: "https://"
+      });
+    } else {
+      editor.dispatchCommand(TOGGLE_LINK_COMMAND, null);
+    }
+  }, [editor, isLink]);
+  return /*#__PURE__*/React.createElement("button", {
+    onClick: insertLink,
+    className: "popup-item spaced " + (isLink ? "active" : ""),
+    "aria-label": "Insert link"
+  }, /*#__PURE__*/React.createElement("i", {
+    className: "format link"
+  }));
+};
+
+//# sourceMappingURL=LinkAction.js.map

package/components/ToolbarActions/LinkAction.js.map

@@ -0,0 +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":[]}

package/components/ToolbarActions/NumberedListAction.d.ts

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

package/components/ToolbarActions/NumberedListAction.js

@@ -0,0 +1,48 @@
+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";
+export const NumberedListAction = () => {
+  const {
+    element
+  } = useCurrentElement();
+  const {
+    editor,
+    themeEmotionMap
+  } = 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;
+    if (id) {
+      return id;
+    }
+    // fallback to ul list styles
+    return findTypographyStyleByHtmlTag("ul", themeEmotionMap)?.id;
+  };
+  const formatNumberedList = () => {
+    if (!isNumbered) {
+      const styleId = themeEmotionMap ? getStyleId() : undefined;
+      editor.dispatchCommand(INSERT_ORDERED_LIST_COMMAND, {
+        themeStyleId: styleId
+      });
+    } else {
+      editor.dispatchCommand(REMOVE_LIST_COMMAND, undefined);
+    }
+  };
+  return /*#__PURE__*/React.createElement("button", {
+    onClick: () => formatNumberedList(),
+    className: "popup-item spaced " + (isNumbered ? "active" : ""),
+    "aria-label": "Format text as numbered list"
+  }, /*#__PURE__*/React.createElement("i", {
+    className: "icon numbered-list"
+  }));
+};
+
+//# sourceMappingURL=NumberedListAction.js.map

package/components/ToolbarActions/NumberedListAction.js.map

@@ -0,0 +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":[]}

package/components/ToolbarActions/QuoteAction.d.ts

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

package/components/ToolbarActions/QuoteAction.js

@@ -0,0 +1,33 @@
+import React from "react";
+import { $isQuoteNode, formatToQuote, formatToParagraph } from "@webiny/lexical-nodes";
+import { useRichTextEditor } from "../../hooks/useRichTextEditor";
+import { useCurrentElement } from "../../hooks/useCurrentElement";
+export const QuoteAction = () => {
+  const {
+    editor,
+    themeEmotionMap
+  } = useRichTextEditor();
+  const {
+    element
+  } = useCurrentElement();
+  const isQuote = $isQuoteNode(element);
+  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);
+      return;
+    }
+    formatToParagraph(editor);
+  };
+  return /*#__PURE__*/React.createElement("button", {
+    onClick: formatText,
+    className: "popup-item " + (isQuote ? "active" : ""),
+    "aria-label": "Format text as quote"
+  }, /*#__PURE__*/React.createElement("i", {
+    className: "icon quote"
+  }));
+};
+
+//# sourceMappingURL=QuoteAction.js.map

package/components/ToolbarActions/QuoteAction.js.map

@@ -0,0 +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":[]}

package/components/ToolbarActions/TextAlignmentAction.d.ts

@@ -0,0 +1,29 @@
+import React from "react";
+export declare const BaseTextAlignmentDropDown: (() => JSX.Element | null) & {
+    original: () => JSX.Element | null;
+    originalName: string;
+    displayName: string;
+} & {
+    original: (() => JSX.Element | null) & {
+        original: () => JSX.Element | null;
+        originalName: string;
+        displayName: string;
+    };
+    originalName: string;
+    displayName: string;
+} & {
+    createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<(() => JSX.Element | null) & {
+        original: () => JSX.Element | null;
+        originalName: string;
+        displayName: string;
+    }>) => (props: unknown) => React.JSX.Element;
+};
+interface TextAlignmentActionDropdownProps {
+    element: JSX.Element;
+}
+declare const TextAlignmentActionDropDown: ({ element }: TextAlignmentActionDropdownProps) => JSX.Element;
+export type TextAlignmentAction = React.ComponentType<unknown> & {
+    TextAlignmentDropDown: typeof TextAlignmentActionDropDown;
+};
+export declare const TextAlignmentAction: TextAlignmentAction;
+export {};

package/components/ToolbarActions/TextAlignmentAction.js

@@ -0,0 +1,61 @@
+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";
+
+/*
+ * Base text alignment dropdown composable component.
+ * Note: To add a custom dropdown component use @see LexicalEditorConfig API.
+ */
+export const BaseTextAlignmentDropDown = makeDecoratable("BaseTextAlignmentDropDown", () => {
+  useEffect(() => {
+    console.log("Default BaseTextAlignmentDropDown, please add your own component");
+  }, []);
+  return null;
+});
+const TextAlignmentActionDropDown = ({
+  element
+}) => {
+  return /*#__PURE__*/React.createElement(Compose, {
+    component: BaseTextAlignmentDropDown,
+    with: () => () => element
+  });
+};
+export const TextAlignmentAction = () => {
+  const {
+    editor
+  } = useRichTextEditor();
+  const alignmentValue = useDeriveValueFromSelection(({
+    rangeSelection
+  }) => {
+    const node = rangeSelection ? getSelectedNode(rangeSelection) : null;
+    if (node) {
+      return node.getParent()?.getFormatType() || "";
+    }
+    return "";
+  });
+  const applyTextAlignment = value => {
+    editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, value);
+  };
+  const outdentText = () => {
+    editor.dispatchCommand(OUTDENT_CONTENT_COMMAND, undefined);
+  };
+  const indentText = () => {
+    editor.dispatchCommand(INDENT_CONTENT_COMMAND, undefined);
+  };
+  const context = useMemo(() => ({
+    value: alignmentValue,
+    applyTextAlignment,
+    outdentText,
+    indentText
+  }), [alignmentValue]);
+  return /*#__PURE__*/React.createElement(TextAlignmentActionContext.Provider, {
+    value: context
+  }, /*#__PURE__*/React.createElement(BaseTextAlignmentDropDown, null));
+};
+TextAlignmentAction.TextAlignmentDropDown = TextAlignmentActionDropDown;
+
+//# sourceMappingURL=TextAlignmentAction.js.map

package/components/ToolbarActions/TextAlignmentAction.js.map

@@ -0,0 +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":[]}

package/components/ToolbarActions/TypographyAction.d.ts

@@ -0,0 +1,29 @@
+import React from "react";
+export declare const BaseTypographyActionDropDown: (() => JSX.Element | null) & {
+    original: () => JSX.Element | null;
+    originalName: string;
+    displayName: string;
+} & {
+    original: (() => JSX.Element | null) & {
+        original: () => JSX.Element | null;
+        originalName: string;
+        displayName: string;
+    };
+    originalName: string;
+    displayName: string;
+} & {
+    createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<(() => JSX.Element | null) & {
+        original: () => JSX.Element | null;
+        originalName: string;
+        displayName: string;
+    }>) => (props: unknown) => React.JSX.Element;
+};
+interface TypographyActionDropdownProps {
+    element: JSX.Element;
+}
+declare const TypographyActionDropDown: ({ element }: TypographyActionDropdownProps) => JSX.Element;
+export type TypographyAction = React.ComponentType<unknown> & {
+    TypographyDropDown: typeof TypographyActionDropDown;
+};
+export declare const TypographyAction: TypographyAction;
+export {};

package/components/ToolbarActions/TypographyAction.js

@@ -0,0 +1,108 @@
+import React, { useCallback, useEffect, useState } from "react";
+import { Compose, makeDecoratable } from "@webiny/react-composition";
+import { TypographyActionContext } from "../../context/TypographyActionContext";
+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";
+
+// Unfortunately, for some time in v5 we had `quoteblock` in our theme, so let's not break it.
+const quoteTagNames = ["blockquote", "quoteblock"];
+
+/*
+ * 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
+ * */
+export const BaseTypographyActionDropDown = makeDecoratable("BaseTypographyActionDropDown", () => {
+  useEffect(() => {
+    console.log("Default BaseTypographyActionDropDown, please add your own component");
+  }, []);
+  return null;
+});
+const TypographyActionDropDown = ({
+  element
+}) => {
+  return /*#__PURE__*/React.createElement(Compose, {
+    component: BaseTypographyActionDropDown,
+    with: () => () => element
+  });
+};
+export const TypographyAction = () => {
+  const [typography, setTypography] = useState();
+  const {
+    editor,
+    themeEmotionMap
+  } = useRichTextEditor();
+  const {
+    element
+  } = useCurrentElement();
+  const isParagraphSelected = $isParagraphNode(element);
+  const isHeadingSelected = $isHeadingNode(element);
+  const isQuoteSelected = $isQuoteNode(element);
+  const onTypographySelect = useCallback(value => {
+    setTypography(value);
+    if (value.tag.includes("h") || value.tag.includes("p")) {
+      editor.dispatchCommand(ADD_TYPOGRAPHY_COMMAND, {
+        value
+      });
+    }
+    if (value.tag === "ol") {
+      editor.dispatchCommand(INSERT_ORDERED_LIST_COMMAND, {
+        themeStyleId: value.id
+      });
+    }
+    if (value.tag === "ul") {
+      editor.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND, {
+        themeStyleId: value.id
+      });
+    }
+    if (quoteTagNames.includes(value.tag)) {
+      editor.dispatchCommand(INSERT_QUOTE_COMMAND, {
+        themeStyleId: value.id
+      });
+    }
+  }, []);
+  useEffect(() => {
+    if (!element || !themeEmotionMap) {
+      return;
+    }
+    if (isParagraphSelected || isHeadingSelected || isQuoteSelected) {
+      const styleId = element.getStyleId();
+      if (!styleId) {
+        return;
+      }
+      const style = themeEmotionMap[styleId];
+      if (style) {
+        setTypography({
+          id: style.id,
+          name: style.name
+        });
+      }
+      return;
+    }
+
+    // list and quote element
+    if (themeEmotionMap && $isListNode(element)) {
+      const styleId = element.getStyleId();
+      if (!styleId) {
+        return;
+      }
+      const style = themeEmotionMap[styleId];
+      if (style) {
+        setTypography({
+          id: style.id,
+          name: style.name
+        });
+      }
+    }
+  }, [element, isQuoteSelected, isParagraphSelected, isHeadingSelected]);
+  return /*#__PURE__*/React.createElement(TypographyActionContext.Provider, {
+    value: {
+      value: typography,
+      applyTypography: onTypographySelect
+    }
+  }, /*#__PURE__*/React.createElement(BaseTypographyActionDropDown, null));
+};
+TypographyAction.TypographyDropDown = TypographyActionDropDown;
+
+//# sourceMappingURL=TypographyAction.js.map

package/components/ToolbarActions/TypographyAction.js.map

@@ -0,0 +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":[]}

package/components/ToolbarActions/UnderlineAction.d.ts

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

package/components/ToolbarActions/UnderlineAction.js

@@ -0,0 +1,24 @@
+import React from "react";
+import { FORMAT_TEXT_COMMAND } from "lexical";
+import { useCurrentSelection, useRichTextEditor } from "../../hooks";
+export const UnderlineAction = () => {
+  const {
+    editor
+  } = useRichTextEditor();
+  const {
+    rangeSelection
+  } = useCurrentSelection();
+  const isUnderlineSelected = rangeSelection ? rangeSelection.hasFormat("underline") : false;
+  const handleClick = () => {
+    editor.dispatchCommand(FORMAT_TEXT_COMMAND, "underline");
+  };
+  return /*#__PURE__*/React.createElement("button", {
+    onClick: handleClick,
+    className: "popup-item spaced " + (isUnderlineSelected ? "active" : ""),
+    "aria-label": "Underline text"
+  }, /*#__PURE__*/React.createElement("i", {
+    className: "format underline"
+  }));
+};
+
+//# sourceMappingURL=UnderlineAction.js.map

package/components/ToolbarActions/UnderlineAction.js.map

@@ -0,0 +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":[]}

package/context/FontColorActionContext.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+export interface FontColorActionContext {
+    value: string;
+    applyColor: (value: string, themeColorName: string | undefined) => void;
+}
+export declare const FontColorActionContext: React.Context<FontColorActionContext | undefined>;

package/context/FontColorActionContext.js

@@ -0,0 +1,4 @@
+import React from "react";
+export const FontColorActionContext = /*#__PURE__*/React.createContext(undefined);
+
+//# sourceMappingURL=FontColorActionContext.js.map

package/context/FontColorActionContext.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","FontColorActionContext","createContext","undefined"],"sources":["FontColorActionContext.tsx"],"sourcesContent":["import React from \"react\";\n\nexport interface FontColorActionContext {\n    /*\n     * @desc Current selected color value\n     * */\n    value: string;\n\n    /*\n     * @desc Apply color to selected text.\n     * @params: value\n     */\n    applyColor: (value: string, themeColorName: string | undefined) => void;\n}\n\nexport const FontColorActionContext = React.createContext<FontColorActionContext | undefined>(\n    undefined\n);\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAezB,OAAO,MAAMC,sBAAsB,gBAAGD,KAAK,CAACE,aAAa,CACrDC,SACJ,CAAC","ignoreList":[]}

package/context/RichTextEditorContext.d.ts

@@ -0,0 +1,19 @@
+import React from "react";
+import type { LexicalEditor } from "lexical";
+import type { ThemeEmotionMap, EditorTheme } from "@webiny/lexical-theme";
+import type { ToolbarActionPlugin } from "../types";
+export interface RichTextEditorContext {
+    editor: LexicalEditor;
+    theme?: EditorTheme;
+    themeEmotionMap?: ThemeEmotionMap;
+    toolbarActionPlugins: ToolbarActionPlugin[];
+}
+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 {};

package/context/RichTextEditorContext.js

@@ -0,0 +1,21 @@
+import React, { createContext } from "react";
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+export const RichTextEditorContext = /*#__PURE__*/createContext(undefined);
+export const RichTextEditorProvider = ({
+  themeEmotionMap,
+  theme,
+  toolbarActionPlugins = [],
+  children
+}) => {
+  const [editor] = useLexicalComposerContext();
+  return /*#__PURE__*/React.createElement(RichTextEditorContext.Provider, {
+    value: {
+      editor,
+      theme,
+      themeEmotionMap,
+      toolbarActionPlugins
+    }
+  }, children);
+};
+
+//# sourceMappingURL=RichTextEditorContext.js.map

package/context/RichTextEditorContext.js.map

@@ -0,0 +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":[]}

package/context/SharedHistoryContext.d.ts

@@ -0,0 +1,10 @@
+import type { ReactNode } from "react";
+import type { HistoryState } from "@lexical/history";
+type ContextShape = {
+    historyState?: HistoryState;
+};
+export declare const SharedHistoryContext: ({ children }: {
+    children: ReactNode;
+}) => JSX.Element;
+export declare const useSharedHistoryContext: () => ContextShape;
+export {};

package/context/SharedHistoryContext.js

@@ -0,0 +1,19 @@
+import * as React from "react";
+import { createContext, useContext, useMemo } from "react";
+import { createEmptyHistoryState } from "@lexical/history";
+const Context = /*#__PURE__*/createContext({});
+export const SharedHistoryContext = ({
+  children
+}) => {
+  const historyContext = useMemo(() => ({
+    historyState: createEmptyHistoryState()
+  }), []);
+  return /*#__PURE__*/React.createElement(Context.Provider, {
+    value: historyContext
+  }, children);
+};
+export const useSharedHistoryContext = () => {
+  return useContext(Context);
+};
+
+//# sourceMappingURL=SharedHistoryContext.js.map

package/context/SharedHistoryContext.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","createContext","useContext","useMemo","createEmptyHistoryState","Context","SharedHistoryContext","children","historyContext","historyState","createElement","Provider","value","useSharedHistoryContext"],"sources":["SharedHistoryContext.tsx"],"sourcesContent":["import * as React from \"react\";\nimport type { ReactNode } from \"react\";\nimport { createContext, useContext, useMemo } from \"react\";\nimport type { HistoryState } from \"@lexical/history\";\nimport { createEmptyHistoryState } from \"@lexical/history\";\n\ntype ContextShape = {\n    historyState?: HistoryState;\n};\n\nconst Context: React.Context<ContextShape> = createContext({});\n\nexport const SharedHistoryContext = ({ children }: { children: ReactNode }): JSX.Element => {\n    const historyContext = useMemo(() => ({ historyState: createEmptyHistoryState() }), []);\n    return <Context.Provider value={historyContext}>{children}</Context.Provider>;\n};\n\nexport const useSharedHistoryContext = (): ContextShape => {\n    return useContext(Context);\n};\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAE9B,SAASC,aAAa,EAAEC,UAAU,EAAEC,OAAO,QAAQ,OAAO;AAE1D,SAASC,uBAAuB,QAAQ,kBAAkB;AAM1D,MAAMC,OAAoC,gBAAGJ,aAAa,CAAC,CAAC,CAAC,CAAC;AAE9D,OAAO,MAAMK,oBAAoB,GAAGA,CAAC;EAAEC;AAAkC,CAAC,KAAkB;EACxF,MAAMC,cAAc,GAAGL,OAAO,CAAC,OAAO;IAAEM,YAAY,EAAEL,uBAAuB,CAAC;EAAE,CAAC,CAAC,EAAE,EAAE,CAAC;EACvF,oBAAOJ,KAAA,CAAAU,aAAA,CAACL,OAAO,CAACM,QAAQ;IAACC,KAAK,EAAEJ;EAAe,GAAED,QAA2B,CAAC;AACjF,CAAC;AAED,OAAO,MAAMM,uBAAuB,GAAGA,CAAA,KAAoB;EACvD,OAAOX,UAAU,CAACG,OAAO,CAAC;AAC9B,CAAC","ignoreList":[]}

package/context/TextAlignmentActionContextProps.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import type { ElementFormatType } from "lexical";
+export interface TextAlignmentActionContextProps {
+    value: ElementFormatType;
+    applyTextAlignment: (value: ElementFormatType) => void;
+    outdentText: () => void;
+    indentText: () => void;
+}
+export declare const TextAlignmentActionContext: React.Context<TextAlignmentActionContextProps | undefined>;

package/context/TextAlignmentActionContextProps.js

@@ -0,0 +1,4 @@
+import React from "react";
+export const TextAlignmentActionContext = /*#__PURE__*/React.createContext(undefined);
+
+//# sourceMappingURL=TextAlignmentActionContextProps.js.map

package/context/TextAlignmentActionContextProps.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","TextAlignmentActionContext","createContext","undefined"],"sources":["TextAlignmentActionContextProps.tsx"],"sourcesContent":["import React from \"react\";\nimport type { ElementFormatType } from \"lexical\";\n\nexport interface TextAlignmentActionContextProps {\n    /*\n     * Selected text alignment value\n     * */\n    value: ElementFormatType;\n\n    /*\n     * Apply text alignment to selected text\n     */\n    applyTextAlignment: (value: ElementFormatType) => void;\n\n    outdentText: () => void;\n\n    indentText: () => void;\n}\n\nexport const TextAlignmentActionContext = React.createContext<\n    TextAlignmentActionContextProps | undefined\n>(undefined);\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAmBzB,OAAO,MAAMC,0BAA0B,gBAAGD,KAAK,CAACE,aAAa,CAE3DC,SAAS,CAAC","ignoreList":[]}

package/context/TypographyActionContext.d.ts

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

package/context/TypographyActionContext.js

@@ -0,0 +1,4 @@
+import React from "react";
+export const TypographyActionContext = /*#__PURE__*/React.createContext(undefined);
+
+//# sourceMappingURL=TypographyActionContext.js.map

package/context/TypographyActionContext.js.map

@@ -0,0 +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":[]}

package/hooks/index.d.ts

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

package/hooks/index.js

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

package/hooks/index.js.map

@@ -0,0 +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":[]}