@webiny/lexical-editor 6.0.0-beta.0 → 6.0.0-rc.0

package/components/ToolbarActions/NumberedListAction.js

@@ -1,53 +1,42 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.NumberedListAction = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _lexicalNodes = require("@webiny/lexical-nodes");
-var _lexicalTheme = require("@webiny/lexical-theme");
-var _commands = require("../../commands");
-var _useRichTextEditor2 = require("../../hooks/useRichTextEditor");
-var _useCurrentElement2 = require("../../hooks/useCurrentElement");
-var NumberedListAction = exports.NumberedListAction = function NumberedListAction() {
-  var _useCurrentElement = (0, _useCurrentElement2.useCurrentElement)(),
-    element = _useCurrentElement.element;
-  var _useRichTextEditor = (0, _useRichTextEditor2.useRichTextEditor)(),
-    editor = _useRichTextEditor.editor,
-    themeEmotionMap = _useRichTextEditor.themeEmotionMap;
-  var isList = (0, _lexicalNodes.$isListNode)(element);
-  var isNumbered = isList && element.getListType() === "number";
-  var getStyleId = function getStyleId() {
-    if (!themeEmotionMap) {
-      return undefined;
-    }
+import React from "react";
+import { $isListNode } from "@webiny/lexical-nodes";
+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,
+    theme
+  } = useRichTextEditor();
+  const isList = $isListNode(element);
+  const isNumbered = isList && element.getListType() === "number";
+  const getStyleId = () => {
     // check default style for numbered list
-    var id = (0, _lexicalTheme.findTypographyStyleByHtmlTag)("ol", themeEmotionMap)?.id;
+    const id = theme.getTypographyByTag("ol")?.id;
     if (id) {
       return id;
     }
     // fallback to ul list styles
-    return (0, _lexicalTheme.findTypographyStyleByHtmlTag)("ul", themeEmotionMap)?.id;
+    return theme.getTypographyByTag("ul")?.id;
   };
-  var formatNumberedList = function formatNumberedList() {
+  const formatNumberedList = () => {
     if (!isNumbered) {
-      var styleId = themeEmotionMap ? getStyleId() : undefined;
-      editor.dispatchCommand(_commands.INSERT_ORDERED_LIST_COMMAND, {
+      const styleId = getStyleId();
+      editor.dispatchCommand(INSERT_ORDERED_LIST_COMMAND, {
         themeStyleId: styleId
       });
     } else {
-      editor.dispatchCommand(_commands.REMOVE_LIST_COMMAND, undefined);
+      editor.dispatchCommand(REMOVE_LIST_COMMAND, undefined);
     }
   };
-  return /*#__PURE__*/_react.default.createElement("button", {
-    onClick: function onClick() {
-      return formatNumberedList();
-    },
+  return /*#__PURE__*/React.createElement("button", {
+    onClick: () => formatNumberedList(),
     className: "popup-item spaced " + (isNumbered ? "active" : ""),
     "aria-label": "Format text as numbered list"
-  }, /*#__PURE__*/_react.default.createElement("i", {
+  }, /*#__PURE__*/React.createElement("i", {
     className: "icon numbered-list"
   }));
 };

package/components/ToolbarActions/NumberedListAction.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_lexicalNodes","_lexicalTheme","_commands","_useRichTextEditor2","_useCurrentElement2","NumberedListAction","exports","_useCurrentElement","useCurrentElement","element","_useRichTextEditor","useRichTextEditor","editor","themeEmotionMap","isList","$isListNode","isNumbered","getListType","getStyleId","undefined","id","findTypographyStyleByHtmlTag","formatNumberedList","styleId","dispatchCommand","INSERT_ORDERED_LIST_COMMAND","themeStyleId","REMOVE_LIST_COMMAND","default","createElement","onClick","className"],"sources":["NumberedListAction.tsx"],"sourcesContent":["import React from \"react\";\nimport { $isListNode, ListNode } 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,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,aAAA,GAAAD,OAAA;AACA,IAAAE,aAAA,GAAAF,OAAA;AACA,IAAAG,SAAA,GAAAH,OAAA;AACA,IAAAI,mBAAA,GAAAJ,OAAA;AACA,IAAAK,mBAAA,GAAAL,OAAA;AAEO,IAAMM,kBAAkB,GAAAC,OAAA,CAAAD,kBAAA,GAAG,SAArBA,kBAAkBA,CAAA,EAAS;EACpC,IAAAE,kBAAA,GAAoB,IAAAC,qCAAiB,EAAC,CAAC;IAA/BC,OAAO,GAAAF,kBAAA,CAAPE,OAAO;EACf,IAAAC,kBAAA,GAAoC,IAAAC,qCAAiB,EAAC,CAAC;IAA/CC,MAAM,GAAAF,kBAAA,CAANE,MAAM;IAAEC,eAAe,GAAAH,kBAAA,CAAfG,eAAe;EAC/B,IAAMC,MAAM,GAAG,IAAAC,yBAAW,EAACN,OAAO,CAAC;EACnC,IAAMO,UAAU,GAAGF,MAAM,IAAKL,OAAO,CAAcQ,WAAW,CAAC,CAAC,KAAK,QAAQ;EAE7E,IAAMC,UAAU,GAAG,SAAbA,UAAUA,CAAA,EAA6B;IACzC,IAAI,CAACL,eAAe,EAAE;MAClB,OAAOM,SAAS;IACpB;IACA;IACA,IAAMC,EAAE,GAAG,IAAAC,0CAA4B,EAAC,IAAI,EAAER,eAAe,CAAC,EAAEO,EAAE;IAClE,IAAIA,EAAE,EAAE;MACJ,OAAOA,EAAE;IACb;IACA;IACA,OAAO,IAAAC,0CAA4B,EAAC,IAAI,EAAER,eAAe,CAAC,EAAEO,EAAE;EAClE,CAAC;EAED,IAAME,kBAAkB,GAAG,SAArBA,kBAAkBA,CAAA,EAAS;IAC7B,IAAI,CAACN,UAAU,EAAE;MACb,IAAMO,OAAO,GAAGV,eAAe,GAAGK,UAAU,CAAC,CAAC,GAAGC,SAAS;MAC1DP,MAAM,CAACY,eAAe,CAACC,qCAA2B,EAAE;QAAEC,YAAY,EAAEH;MAAQ,CAAC,CAAC;IAClF,CAAC,MAAM;MACHX,MAAM,CAACY,eAAe,CAACG,6BAAmB,EAAER,SAAS,CAAC;IAC1D;EACJ,CAAC;EAED,oBACItB,MAAA,CAAA+B,OAAA,CAAAC,aAAA;IACIC,OAAO,EAAE,SAAAA,QAAA;MAAA,OAAMR,kBAAkB,CAAC,CAAC;IAAA,CAAC;IACpCS,SAAS,EAAE,oBAAoB,IAAIf,UAAU,GAAG,QAAQ,GAAG,EAAE,CAAE;IAC/D,cAAW;EAA8B,gBAEzCnB,MAAA,CAAA+B,OAAA,CAAAC,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,36 +1,31 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.QuoteAction = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _lexicalNodes = require("@webiny/lexical-nodes");
-var _useRichTextEditor2 = require("../../hooks/useRichTextEditor");
-var _useCurrentElement2 = require("../../hooks/useCurrentElement");
-var QuoteAction = exports.QuoteAction = function QuoteAction() {
-  var _useRichTextEditor = (0, _useRichTextEditor2.useRichTextEditor)(),
-    editor = _useRichTextEditor.editor,
-    themeEmotionMap = _useRichTextEditor.themeEmotionMap;
-  var _useCurrentElement = (0, _useCurrentElement2.useCurrentElement)(),
-    element = _useCurrentElement.element;
-  var isQuote = (0, _lexicalNodes.$isQuoteNode)(element);
-  var formatText = function formatText() {
+import React from "react";
+import { $isQuoteNode, formatToQuote, formatToParagraph } from "@webiny/lexical-nodes";
+import { useRichTextEditor } from "../../hooks/useRichTextEditor.js";
+import { useCurrentElement } from "../../hooks/useCurrentElement.js";
+const QUOTE_TAG = "quote";
+export const QuoteAction = () => {
+  const {
+    editor,
+    theme
+  } = 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
-      var DEFAULT_QUOTE_ID = "quote";
-      var hasQuoteStyles = themeEmotionMap && themeEmotionMap[DEFAULT_QUOTE_ID];
-      (0, _lexicalNodes.formatToQuote)(editor, hasQuoteStyles ? DEFAULT_QUOTE_ID : undefined);
+      const hasQuoteStyles = theme.getTypographyByTag(QUOTE_TAG);
+      formatToQuote(editor, hasQuoteStyles ? QUOTE_TAG : undefined);
       return;
     }
-    (0, _lexicalNodes.formatToParagraph)(editor);
+    formatToParagraph(editor);
   };
-  return /*#__PURE__*/_react.default.createElement("button", {
+  return /*#__PURE__*/React.createElement("button", {
     onClick: formatText,
     className: "popup-item " + (isQuote ? "active" : ""),
     "aria-label": "Format text as quote"
-  }, /*#__PURE__*/_react.default.createElement("i", {
+  }, /*#__PURE__*/React.createElement("i", {
     className: "icon quote"
   }));
 };

package/components/ToolbarActions/QuoteAction.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_lexicalNodes","_useRichTextEditor2","_useCurrentElement2","QuoteAction","exports","_useRichTextEditor","useRichTextEditor","editor","themeEmotionMap","_useCurrentElement","useCurrentElement","element","isQuote","$isQuoteNode","formatText","DEFAULT_QUOTE_ID","hasQuoteStyles","formatToQuote","undefined","formatToParagraph","default","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,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,aAAA,GAAAD,OAAA;AACA,IAAAE,mBAAA,GAAAF,OAAA;AACA,IAAAG,mBAAA,GAAAH,OAAA;AAEO,IAAMI,WAAW,GAAAC,OAAA,CAAAD,WAAA,GAAG,SAAdA,WAAWA,CAAA,EAAS;EAC7B,IAAAE,kBAAA,GAAoC,IAAAC,qCAAiB,EAAC,CAAC;IAA/CC,MAAM,GAAAF,kBAAA,CAANE,MAAM;IAAEC,eAAe,GAAAH,kBAAA,CAAfG,eAAe;EAC/B,IAAAC,kBAAA,GAAoB,IAAAC,qCAAiB,EAAC,CAAC;IAA/BC,OAAO,GAAAF,kBAAA,CAAPE,OAAO;EACf,IAAMC,OAAO,GAAG,IAAAC,0BAAY,EAACF,OAAO,CAAC;EAErC,IAAMG,UAAU,GAAG,SAAbA,UAAUA,CAAA,EAAS;IACrB,IAAI,CAACF,OAAO,EAAE;MACV;MACA,IAAMG,gBAAgB,GAAG,OAAO;MAChC,IAAMC,cAAc,GAAGR,eAAe,IAAIA,eAAe,CAACO,gBAAgB,CAAC;MAC3E,IAAAE,2BAAa,EAACV,MAAM,EAAES,cAAc,GAAGD,gBAAgB,GAAGG,SAAS,CAAC;MACpE;IACJ;IACA,IAAAC,+BAAiB,EAACZ,MAAM,CAAC;EAC7B,CAAC;EAED,oBACIV,MAAA,CAAAuB,OAAA,CAAAC,aAAA;IACIC,OAAO,EAAER,UAAW;IACpBS,SAAS,EAAE,aAAa,IAAIX,OAAO,GAAG,QAAQ,GAAG,EAAE,CAAE;IACrD,cAAW;EAAsB,gBAEjCf,MAAA,CAAAuB,OAAA,CAAAC,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.d.ts

@@ -1,16 +1,28 @@
 import React from "react";
-export declare const BaseTextAlignmentDropDown: import("@webiny/react-composition").GenericComponent<any> & {
-    original: import("@webiny/react-composition").GenericComponent<any>;
+export declare const BaseTextAlignmentDropDown: (() => JSX.Element | null) & {
+    original: () => JSX.Element | null;
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition").Decorator<(props: any) => JSX.Element | null>) => (props: unknown) => React.JSX.Element;
+    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 declare type TextAlignmentAction = React.ComponentType<unknown> & {
+export type TextAlignmentAction = React.ComponentType<unknown> & {
     TextAlignmentDropDown: typeof TextAlignmentActionDropDown;
 };
 export declare const TextAlignmentAction: TextAlignmentAction;

package/components/ToolbarActions/TextAlignmentAction.js

@@ -1,69 +1,60 @@
-"use strict";
+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.js";
+import { useDeriveValueFromSelection } from "../../hooks/useCurrentSelection.js";
+import { getSelectedNode } from "../../utils/getSelectedNode.js";
+import { useRichTextEditor } from "../../hooks/index.js";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.TextAlignmentAction = exports.BaseTextAlignmentDropDown = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _lexical = require("lexical");
-var _reactComposition = require("@webiny/react-composition");
-var _TextAlignmentActionContextProps = require("../../context/TextAlignmentActionContextProps");
-var _useCurrentSelection = require("../../hooks/useCurrentSelection");
-var _getSelectedNode = require("../../utils/getSelectedNode");
-var _hooks = require("../../hooks");
 /*
  * Base text alignment dropdown composable component.
  * Note: To add a custom dropdown component use @see LexicalEditorConfig API.
  */
-var BaseTextAlignmentDropDown = exports.BaseTextAlignmentDropDown = (0, _reactComposition.makeDecoratable)("BaseTextAlignmentDropDown", function () {
-  (0, _react.useEffect)(function () {
+export const BaseTextAlignmentDropDown = makeDecoratable("BaseTextAlignmentDropDown", () => {
+  useEffect(() => {
     console.log("Default BaseTextAlignmentDropDown, please add your own component");
   }, []);
   return null;
 });
-var TextAlignmentActionDropDown = function TextAlignmentActionDropDown(_ref) {
-  var element = _ref.element;
-  return /*#__PURE__*/_react.default.createElement(_reactComposition.Compose, {
+const TextAlignmentActionDropDown = ({
+  element
+}) => {
+  return /*#__PURE__*/React.createElement(Compose, {
     component: BaseTextAlignmentDropDown,
-    with: function _with() {
-      return function () {
-        return element;
-      };
-    }
+    with: () => () => element
   });
 };
-var TextAlignmentAction = exports.TextAlignmentAction = function TextAlignmentAction() {
-  var _useRichTextEditor = (0, _hooks.useRichTextEditor)(),
-    editor = _useRichTextEditor.editor;
-  var alignmentValue = (0, _useCurrentSelection.useDeriveValueFromSelection)(function (_ref2) {
-    var rangeSelection = _ref2.rangeSelection;
-    var node = rangeSelection ? (0, _getSelectedNode.getSelectedNode)(rangeSelection) : null;
+export const TextAlignmentAction = () => {
+  const {
+    editor
+  } = useRichTextEditor();
+  const alignmentValue = useDeriveValueFromSelection(({
+    rangeSelection
+  }) => {
+    const node = rangeSelection ? getSelectedNode(rangeSelection) : null;
     if (node) {
       return node.getParent()?.getFormatType() || "";
     }
     return "";
   });
-  var applyTextAlignment = function applyTextAlignment(value) {
-    editor.dispatchCommand(_lexical.FORMAT_ELEMENT_COMMAND, value);
+  const applyTextAlignment = value => {
+    editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, value);
   };
-  var outdentText = function outdentText() {
-    editor.dispatchCommand(_lexical.OUTDENT_CONTENT_COMMAND, undefined);
+  const outdentText = () => {
+    editor.dispatchCommand(OUTDENT_CONTENT_COMMAND, undefined);
   };
-  var indentText = function indentText() {
-    editor.dispatchCommand(_lexical.INDENT_CONTENT_COMMAND, undefined);
+  const indentText = () => {
+    editor.dispatchCommand(INDENT_CONTENT_COMMAND, undefined);
   };
-  var context = (0, _react.useMemo)(function () {
-    return {
-      value: alignmentValue,
-      applyTextAlignment: applyTextAlignment,
-      outdentText: outdentText,
-      indentText: indentText
-    };
-  }, [alignmentValue]);
-  return /*#__PURE__*/_react.default.createElement(_TextAlignmentActionContextProps.TextAlignmentActionContext.Provider, {
+  const context = useMemo(() => ({
+    value: alignmentValue,
+    applyTextAlignment,
+    outdentText,
+    indentText
+  }), [alignmentValue]);
+  return /*#__PURE__*/React.createElement(TextAlignmentActionContext.Provider, {
     value: context
-  }, /*#__PURE__*/_react.default.createElement(BaseTextAlignmentDropDown, null));
+  }, /*#__PURE__*/React.createElement(BaseTextAlignmentDropDown, null));
 };
 TextAlignmentAction.TextAlignmentDropDown = TextAlignmentActionDropDown;
 

package/components/ToolbarActions/TextAlignmentAction.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_lexical","_reactComposition","_TextAlignmentActionContextProps","_useCurrentSelection","_getSelectedNode","_hooks","BaseTextAlignmentDropDown","exports","makeDecoratable","useEffect","console","log","TextAlignmentActionDropDown","_ref","element","default","createElement","Compose","component","with","_with","TextAlignmentAction","_useRichTextEditor","useRichTextEditor","editor","alignmentValue","useDeriveValueFromSelection","_ref2","rangeSelection","node","getSelectedNode","getParent","getFormatType","applyTextAlignment","value","dispatchCommand","FORMAT_ELEMENT_COMMAND","outdentText","OUTDENT_CONTENT_COMMAND","undefined","indentText","INDENT_CONTENT_COMMAND","context","useMemo","TextAlignmentActionContext","Provider","TextAlignmentDropDown"],"sources":["TextAlignmentAction.tsx"],"sourcesContent":["import React, { useEffect, useMemo } from \"react\";\nimport {\n    ElementFormatType,\n    FORMAT_ELEMENT_COMMAND,\n    INDENT_CONTENT_COMMAND,\n    OUTDENT_CONTENT_COMMAND\n} from \"lexical\";\nimport { 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,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,QAAA,GAAAD,OAAA;AAMA,IAAAE,iBAAA,GAAAF,OAAA;AACA,IAAAG,gCAAA,GAAAH,OAAA;AACA,IAAAI,oBAAA,GAAAJ,OAAA;AACA,IAAAK,gBAAA,GAAAL,OAAA;AACA,IAAAM,MAAA,GAAAN,OAAA;AAEA;AACA;AACA;AACA;AACO,IAAMO,yBAAyB,GAAAC,OAAA,CAAAD,yBAAA,GAAG,IAAAE,iCAAe,EACpD,2BAA2B,EAC3B,YAA0B;EACtB,IAAAC,gBAAS,EAAC,YAAM;IACZC,OAAO,CAACC,GAAG,CAAC,kEAAkE,CAAC;EACnF,CAAC,EAAE,EAAE,CAAC;EACN,OAAO,IAAI;AACf,CACJ,CAAC;AAMD,IAAMC,2BAA2B,GAAG,SAA9BA,2BAA2BA,CAAAC,IAAA,EAEoB;EAAA,IADjDC,OAAO,GAAAD,IAAA,CAAPC,OAAO;EAEP,oBAAOjB,MAAA,CAAAkB,OAAA,CAAAC,aAAA,CAACf,iBAAA,CAAAgB,OAAO;IAACC,SAAS,EAAEZ,yBAA0B;IAACa,IAAI,EAAE,SAAAC,MAAA;MAAA,OAAM;QAAA,OAAMN,OAAO;MAAA;IAAA;EAAC,CAAE,CAAC;AACvF,CAAC;AAMM,IAAMO,mBAAwC,GAAAd,OAAA,CAAAc,mBAAA,GAAG,SAA3CA,mBAAwCA,CAAA,EAAS;EAC1D,IAAAC,kBAAA,GAAmB,IAAAC,wBAAiB,EAAC,CAAC;IAA9BC,MAAM,GAAAF,kBAAA,CAANE,MAAM;EACd,IAAMC,cAAiC,GAAG,IAAAC,gDAA2B,EAAC,UAAAC,KAAA,EAAwB;IAAA,IAArBC,cAAc,GAAAD,KAAA,CAAdC,cAAc;IACnF,IAAMC,IAAI,GAAGD,cAAc,GAAG,IAAAE,gCAAe,EAACF,cAAc,CAAC,GAAG,IAAI;IACpE,IAAIC,IAAI,EAAE;MACN,OAAOA,IAAI,CAACE,SAAS,CAAC,CAAC,EAAEC,aAAa,CAAC,CAAC,IAAI,EAAE;IAClD;IACA,OAAO,EAAE;EACb,CAAC,CAAC;EAEF,IAAMC,kBAAkB,GAAG,SAArBA,kBAAkBA,CAAIC,KAAwB,EAAK;IACrDV,MAAM,CAACW,eAAe,CAACC,+BAAsB,EAAEF,KAAK,CAAC;EACzD,CAAC;EAED,IAAMG,WAAW,GAAG,SAAdA,WAAWA,CAAA,EAAS;IACtBb,MAAM,CAACW,eAAe,CAACG,gCAAuB,EAAEC,SAAS,CAAC;EAC9D,CAAC;EAED,IAAMC,UAAU,GAAG,SAAbA,UAAUA,CAAA,EAAS;IACrBhB,MAAM,CAACW,eAAe,CAACM,+BAAsB,EAAEF,SAAS,CAAC;EAC7D,CAAC;EAED,IAAMG,OAAO,GAAG,IAAAC,cAAO,EACnB;IAAA,OAAO;MACHT,KAAK,EAAET,cAAc;MACrBQ,kBAAkB,EAAlBA,kBAAkB;MAClBI,WAAW,EAAXA,WAAW;MACXG,UAAU,EAAVA;IACJ,CAAC;EAAA,CAAC,EACF,CAACf,cAAc,CACnB,CAAC;EAED,oBACI5B,MAAA,CAAAkB,OAAA,CAAAC,aAAA,CAACd,gCAAA,CAAA0C,0BAA0B,CAACC,QAAQ;IAACX,KAAK,EAAEQ;EAAQ,gBAChD7C,MAAA,CAAAkB,OAAA,CAAAC,aAAA,CAACV,yBAAyB,MAAE,CACK,CAAC;AAE9C,CAAC;AAEDe,mBAAmB,CAACyB,qBAAqB,GAAGlC,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.d.ts

@@ -1,16 +1,28 @@
 import React from "react";
-export declare const BaseTypographyActionDropDown: import("@webiny/react-composition").GenericComponent<any> & {
-    original: import("@webiny/react-composition").GenericComponent<any>;
+export declare const BaseTypographyActionDropDown: (() => JSX.Element | null) & {
+    original: () => JSX.Element | null;
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition").Decorator<(props: any) => JSX.Element | null>) => (props: unknown) => React.JSX.Element;
+    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 declare type TypographyAction = React.ComponentType<unknown> & {
+export type TypographyAction = React.ComponentType<unknown> & {
     TypographyDropDown: typeof TypographyActionDropDown;
 };
 export declare const TypographyAction: TypographyAction;

package/components/ToolbarActions/TypographyAction.js

@@ -1,132 +1,110 @@
-"use strict";
+import React, { useCallback, useEffect, useState } from "react";
+import { Compose, makeDecoratable } from "@webiny/react-composition";
+import { TypographyActionContext } from "../../context/TypographyActionContext.js";
+import { $isHeadingNode, $isListNode, $isParagraphNode, $isQuoteNode } from "@webiny/lexical-nodes";
+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"];
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.TypographyAction = exports.BaseTypographyActionDropDown = void 0;
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _react = _interopRequireWildcard(require("react"));
-var _reactComposition = require("@webiny/react-composition");
-var _TypographyActionContext = require("../../context/TypographyActionContext");
-var _lexicalNodes = require("@webiny/lexical-nodes");
-var _useRichTextEditor2 = require("../../hooks/useRichTextEditor");
-var _commands = require("../../commands");
-var _useCurrentElement2 = require("../../hooks/useCurrentElement");
 /*
  * Base composable action component that is mounted on toolbar action as a placeholder for the custom toolbar action.
  * Note: Toa add custom component access trough @see LexicalEditorConfig API
  * */
-var BaseTypographyActionDropDown = exports.BaseTypographyActionDropDown = (0, _reactComposition.makeDecoratable)("BaseTypographyActionDropDown", function () {
-  (0, _react.useEffect)(function () {
+export const BaseTypographyActionDropDown = makeDecoratable("BaseTypographyActionDropDown", () => {
+  useEffect(() => {
     console.log("Default BaseTypographyActionDropDown, please add your own component");
   }, []);
   return null;
 });
-var TypographyActionDropDown = function TypographyActionDropDown(_ref) {
-  var element = _ref.element;
-  return /*#__PURE__*/_react.default.createElement(_reactComposition.Compose, {
+const TypographyActionDropDown = ({
+  element
+}) => {
+  return /*#__PURE__*/React.createElement(Compose, {
     component: BaseTypographyActionDropDown,
-    with: function _with() {
-      return function () {
-        return element;
-      };
-    }
+    with: () => () => element
   });
 };
-var TypographyAction = exports.TypographyAction = function TypographyAction() {
-  var _useState = (0, _react.useState)(),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    typography = _useState2[0],
-    setTypography = _useState2[1];
-  var _useRichTextEditor = (0, _useRichTextEditor2.useRichTextEditor)(),
-    editor = _useRichTextEditor.editor,
-    themeEmotionMap = _useRichTextEditor.themeEmotionMap;
-  var _useCurrentElement = (0, _useCurrentElement2.useCurrentElement)(),
-    element = _useCurrentElement.element;
-  var isTypographySelected = (0, _lexicalNodes.$isTypographyNode)(element);
-  var isParagraphSelected = (0, _lexicalNodes.$isParagraphNode)(element);
-  var isHeadingSelected = (0, _lexicalNodes.$isHeadingNode)(element);
-  var isQuoteSelected = (0, _lexicalNodes.$isQuoteNode)(element);
-  var setTypographySelect = (0, _react.useCallback)(function (value) {
+export const TypographyAction = () => {
+  const [typography, setTypography] = useState();
+  const {
+    editor,
+    theme
+  } = useRichTextEditor();
+  const {
+    element
+  } = useCurrentElement();
+  const isParagraphSelected = $isParagraphNode(element);
+  const isHeadingSelected = $isHeadingNode(element);
+  const isQuoteSelected = $isQuoteNode(element);
+  const onTypographySelect = useCallback(value => {
     setTypography(value);
-  }, [typography]);
-  var onTypographySelect = (0, _react.useCallback)(function (value) {
-    setTypographySelect(value);
     if (value.tag.includes("h") || value.tag.includes("p")) {
-      editor.dispatchCommand(_lexicalNodes.ADD_TYPOGRAPHY_COMMAND, {
-        value: value
+      editor.dispatchCommand(ADD_TYPOGRAPHY_COMMAND, {
+        value
       });
+      return;
     }
     if (value.tag === "ol") {
-      editor.dispatchCommand(_commands.INSERT_ORDERED_LIST_COMMAND, {
+      editor.dispatchCommand(INSERT_ORDERED_LIST_COMMAND, {
         themeStyleId: value.id
       });
+      return;
     }
     if (value.tag === "ul") {
-      editor.dispatchCommand(_commands.INSERT_UNORDERED_LIST_COMMAND, {
+      editor.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND, {
         themeStyleId: value.id
       });
+      return;
     }
-    if (value.tag === "quoteblock") {
-      editor.dispatchCommand(_commands.INSERT_QUOTE_COMMAND, {
+    if (quoteTagNames.includes(value.tag)) {
+      editor.dispatchCommand(INSERT_QUOTE_COMMAND, {
         themeStyleId: value.id
       });
     }
   }, []);
-  (0, _react.useEffect)(function () {
+  useEffect(() => {
     if (!element) {
       return;
     }
-    // header and paragraph elements inserted with typography node
-    if (isTypographySelected) {
-      var el = element;
-      setTypography(el.getTypographyValue());
-      return;
-    }
     if (isParagraphSelected || isHeadingSelected || isQuoteSelected) {
-      var styleId = element.getTypographyStyleId();
+      const styleId = element.getStyleId();
       if (!styleId) {
         return;
       }
-      if (!themeEmotionMap) {
-        return;
-      }
-      var style = themeEmotionMap[styleId];
+      const style = theme.getTypographyById(styleId);
       if (style) {
         setTypography({
-          name: style?.name,
           id: style.id,
-          css: style.styles,
-          tag: style.tag
+          label: style.label
         });
       }
       return;
     }
 
     // list and quote element
-    if (themeEmotionMap && element?.getStyleId) {
-      var themeStyleId = element?.getStyleId() || undefined;
-      if (themeStyleId) {
-        var elementStyle = themeEmotionMap[themeStyleId];
-        if (elementStyle) {
-          setTypography({
-            id: elementStyle.id,
-            css: elementStyle.styles,
-            name: elementStyle.name,
-            tag: elementStyle.tag
-          });
-        }
+    if ($isListNode(element)) {
+      const styleId = element.getStyleId();
+      if (!styleId) {
+        return;
+      }
+      const style = theme.getTypographyById(styleId);
+      if (style) {
+        setTypography({
+          id: style.id,
+          label: style.label
+        });
       }
     }
-  }, [element, isTypographySelected, isQuoteSelected, isParagraphSelected, isHeadingSelected]);
-  return /*#__PURE__*/_react.default.createElement(_TypographyActionContext.TypographyActionContext.Provider, {
+  }, [element, isQuoteSelected, isParagraphSelected, isHeadingSelected]);
+  return /*#__PURE__*/React.createElement(TypographyActionContext.Provider, {
     value: {
       value: typography,
       applyTypography: onTypographySelect
     }
-  }, /*#__PURE__*/_react.default.createElement(BaseTypographyActionDropDown, null));
+  }, /*#__PURE__*/React.createElement(BaseTypographyActionDropDown, null));
 };
 TypographyAction.TypographyDropDown = TypographyActionDropDown;