@webiny/lexical-editor 5.44.1-beta.0 → 5.45.0-beta.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,SAATA,OAAOA,CAAA;MAAA,OAAQR,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.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,SAANC,KAAIA,CAAA;MAAA,OAAQ;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.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 && ((0, _lexicalNodes.$isListNode)(element) || (0, _lexicalNodes.$isQuoteNode)(element))) {
-      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;
 

package/components/ToolbarActions/TypographyAction.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_reactComposition","_TypographyActionContext","_lexicalNodes","_useRichTextEditor2","_commands","_useCurrentElement2","BaseTypographyActionDropDown","exports","makeDecoratable","useEffect","console","log","TypographyActionDropDown","_ref","element","default","createElement","Compose","component","with","_with","TypographyAction","_useState","useState","_useState2","_slicedToArray2","typography","setTypography","_useRichTextEditor","useRichTextEditor","editor","themeEmotionMap","_useCurrentElement","useCurrentElement","isTypographySelected","$isTypographyNode","isParagraphSelected","$isParagraphNode","isHeadingSelected","$isHeadingNode","isQuoteSelected","$isQuoteNode","setTypographySelect","useCallback","value","onTypographySelect","tag","includes","dispatchCommand","ADD_TYPOGRAPHY_COMMAND","INSERT_ORDERED_LIST_COMMAND","themeStyleId","id","INSERT_UNORDERED_LIST_COMMAND","INSERT_QUOTE_COMMAND","el","getTypographyValue","styleId","getTypographyStyleId","style","name","css","styles","$isListNode","getStyleId","undefined","elementStyle","TypographyActionContext","Provider","applyTypography","TypographyDropDown"],"sources":["TypographyAction.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useState } from \"react\";\nimport { LexicalCommand } from \"lexical\";\nimport { Compose, makeDecoratable } from \"@webiny/react-composition\";\nimport { TypographyValue } from \"@webiny/lexical-theme\";\nimport { TypographyActionContext } from \"~/context/TypographyActionContext\";\nimport {\n    $isHeadingNode,\n    $isListNode,\n    $isParagraphNode,\n    $isQuoteNode,\n    $isTypographyNode,\n    ADD_TYPOGRAPHY_COMMAND,\n    TypographyNode,\n    TypographyPayload\n} from \"@webiny/lexical-nodes\";\nimport { useRichTextEditor } from \"~/hooks/useRichTextEditor\";\nimport {\n    INSERT_ORDERED_LIST_COMMAND,\n    INSERT_UNORDERED_LIST_COMMAND,\n    INSERT_QUOTE_COMMAND,\n    ListCommandPayload,\n    QuoteCommandPayload\n} from \"~/commands\";\nimport { useCurrentElement } from \"~/hooks/useCurrentElement\";\n\n/*\n * Base composable action component that is mounted on toolbar action as a placeholder for the custom toolbar action.\n * Note: Toa add custom component access trough @see LexicalEditorConfig API\n * */\nexport const BaseTypographyActionDropDown = makeDecoratable(\n    \"BaseTypographyActionDropDown\",\n    (): JSX.Element | null => {\n        useEffect(() => {\n            console.log(\"Default BaseTypographyActionDropDown, please add your own component\");\n        }, []);\n        return null;\n    }\n);\n\ninterface TypographyActionDropdownProps {\n    element: JSX.Element;\n}\n\nconst TypographyActionDropDown = ({ element }: TypographyActionDropdownProps): JSX.Element => {\n    return <Compose component={BaseTypographyActionDropDown} with={() => () => element} />;\n};\n\nexport type TypographyAction = React.ComponentType<unknown> & {\n    TypographyDropDown: typeof TypographyActionDropDown;\n};\n\nexport const TypographyAction: TypographyAction = () => {\n    const [typography, setTypography] = useState<TypographyValue>();\n    const { editor, themeEmotionMap } = useRichTextEditor();\n    const { element } = useCurrentElement();\n    const isTypographySelected = $isTypographyNode(element);\n    const isParagraphSelected = $isParagraphNode(element);\n    const isHeadingSelected = $isHeadingNode(element);\n    const isQuoteSelected = $isQuoteNode(element);\n\n    const setTypographySelect = useCallback(\n        (value: TypographyValue) => {\n            setTypography(value);\n        },\n        [typography]\n    );\n\n    const onTypographySelect = useCallback((value: TypographyValue) => {\n        setTypographySelect(value);\n        if (value.tag.includes(\"h\") || value.tag.includes(\"p\")) {\n            editor.dispatchCommand<LexicalCommand<TypographyPayload>>(ADD_TYPOGRAPHY_COMMAND, {\n                value\n            });\n        }\n\n        if (value.tag === \"ol\") {\n            editor.dispatchCommand<LexicalCommand<ListCommandPayload>>(\n                INSERT_ORDERED_LIST_COMMAND,\n                {\n                    themeStyleId: value.id\n                }\n            );\n        }\n\n        if (value.tag === \"ul\") {\n            editor.dispatchCommand<LexicalCommand<ListCommandPayload>>(\n                INSERT_UNORDERED_LIST_COMMAND,\n                {\n                    themeStyleId: value.id\n                }\n            );\n        }\n\n        if (value.tag === \"quoteblock\") {\n            editor.dispatchCommand<LexicalCommand<QuoteCommandPayload>>(INSERT_QUOTE_COMMAND, {\n                themeStyleId: value.id\n            });\n        }\n    }, []);\n\n    useEffect(() => {\n        if (!element) {\n            return;\n        }\n        // header and paragraph elements inserted with typography node\n        if (isTypographySelected) {\n            const el = element as TypographyNode;\n            setTypography(el.getTypographyValue());\n            return;\n        }\n\n        if (isParagraphSelected || isHeadingSelected || isQuoteSelected) {\n            const styleId = element.getTypographyStyleId();\n            if (!styleId) {\n                return;\n            }\n\n            if (!themeEmotionMap) {\n                return;\n            }\n\n            const style = themeEmotionMap[styleId];\n            if (style) {\n                setTypography({\n                    name: style?.name,\n                    id: style.id,\n                    css: style.styles,\n                    tag: style.tag\n                });\n            }\n            return;\n        }\n\n        // list and quote element\n        if (themeEmotionMap && ($isListNode(element) || $isQuoteNode(element))) {\n            const themeStyleId = element?.getStyleId() || undefined;\n            if (themeStyleId) {\n                const elementStyle = themeEmotionMap[themeStyleId];\n                if (elementStyle) {\n                    setTypography({\n                        id: elementStyle.id,\n                        css: elementStyle.styles,\n                        name: elementStyle.name,\n                        tag: elementStyle.tag\n                    });\n                }\n            }\n        }\n    }, [element, isTypographySelected, isQuoteSelected, isParagraphSelected, isHeadingSelected]);\n\n    return (\n        <TypographyActionContext.Provider\n            value={{\n                value: typography,\n                applyTypography: onTypographySelect\n            }}\n        >\n            <BaseTypographyActionDropDown />\n        </TypographyActionContext.Provider>\n    );\n};\n\nTypographyAction.TypographyDropDown = TypographyActionDropDown;\n"],"mappings":";;;;;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AAEA,IAAAC,iBAAA,GAAAD,OAAA;AAEA,IAAAE,wBAAA,GAAAF,OAAA;AACA,IAAAG,aAAA,GAAAH,OAAA;AAUA,IAAAI,mBAAA,GAAAJ,OAAA;AACA,IAAAK,SAAA,GAAAL,OAAA;AAOA,IAAAM,mBAAA,GAAAN,OAAA;AAEA;AACA;AACA;AACA;AACO,IAAMO,4BAA4B,GAAAC,OAAA,CAAAD,4BAAA,GAAG,IAAAE,iCAAe,EACvD,8BAA8B,EAC9B,YAA0B;EACtB,IAAAC,gBAAS,EAAC,YAAM;IACZC,OAAO,CAACC,GAAG,CAAC,qEAAqE,CAAC;EACtF,CAAC,EAAE,EAAE,CAAC;EACN,OAAO,IAAI;AACf,CACJ,CAAC;AAMD,IAAMC,wBAAwB,GAAG,SAA3BA,wBAAwBA,CAAAC,IAAA,EAAgE;EAAA,IAA1DC,OAAO,GAAAD,IAAA,CAAPC,OAAO;EACvC,oBAAOjB,MAAA,CAAAkB,OAAA,CAAAC,aAAA,CAAChB,iBAAA,CAAAiB,OAAO;IAACC,SAAS,EAAEZ,4BAA6B;IAACa,IAAI,EAAE,SAANC,KAAIA,CAAA;MAAA,OAAQ;QAAA,OAAMN,OAAO;MAAA;IAAA;EAAC,CAAE,CAAC;AAC1F,CAAC;AAMM,IAAMO,gBAAkC,GAAAd,OAAA,CAAAc,gBAAA,GAAG,SAArCA,gBAAkCA,CAAA,EAAS;EACpD,IAAAC,SAAA,GAAoC,IAAAC,eAAQ,EAAkB,CAAC;IAAAC,UAAA,OAAAC,eAAA,CAAAV,OAAA,EAAAO,SAAA;IAAxDI,UAAU,GAAAF,UAAA;IAAEG,aAAa,GAAAH,UAAA;EAChC,IAAAI,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/BnB,OAAO,GAAAkB,kBAAA,CAAPlB,OAAO;EACf,IAAMoB,oBAAoB,GAAG,IAAAC,+BAAiB,EAACrB,OAAO,CAAC;EACvD,IAAMsB,mBAAmB,GAAG,IAAAC,8BAAgB,EAACvB,OAAO,CAAC;EACrD,IAAMwB,iBAAiB,GAAG,IAAAC,4BAAc,EAACzB,OAAO,CAAC;EACjD,IAAM0B,eAAe,GAAG,IAAAC,0BAAY,EAAC3B,OAAO,CAAC;EAE7C,IAAM4B,mBAAmB,GAAG,IAAAC,kBAAW,EACnC,UAACC,KAAsB,EAAK;IACxBjB,aAAa,CAACiB,KAAK,CAAC;EACxB,CAAC,EACD,CAAClB,UAAU,CACf,CAAC;EAED,IAAMmB,kBAAkB,GAAG,IAAAF,kBAAW,EAAC,UAACC,KAAsB,EAAK;IAC/DF,mBAAmB,CAACE,KAAK,CAAC;IAC1B,IAAIA,KAAK,CAACE,GAAG,CAACC,QAAQ,CAAC,GAAG,CAAC,IAAIH,KAAK,CAACE,GAAG,CAACC,QAAQ,CAAC,GAAG,CAAC,EAAE;MACpDjB,MAAM,CAACkB,eAAe,CAAoCC,oCAAsB,EAAE;QAC9EL,KAAK,EAALA;MACJ,CAAC,CAAC;IACN;IAEA,IAAIA,KAAK,CAACE,GAAG,KAAK,IAAI,EAAE;MACpBhB,MAAM,CAACkB,eAAe,CAClBE,qCAA2B,EAC3B;QACIC,YAAY,EAAEP,KAAK,CAACQ;MACxB,CACJ,CAAC;IACL;IAEA,IAAIR,KAAK,CAACE,GAAG,KAAK,IAAI,EAAE;MACpBhB,MAAM,CAACkB,eAAe,CAClBK,uCAA6B,EAC7B;QACIF,YAAY,EAAEP,KAAK,CAACQ;MACxB,CACJ,CAAC;IACL;IAEA,IAAIR,KAAK,CAACE,GAAG,KAAK,YAAY,EAAE;MAC5BhB,MAAM,CAACkB,eAAe,CAAsCM,8BAAoB,EAAE;QAC9EH,YAAY,EAAEP,KAAK,CAACQ;MACxB,CAAC,CAAC;IACN;EACJ,CAAC,EAAE,EAAE,CAAC;EAEN,IAAA3C,gBAAS,EAAC,YAAM;IACZ,IAAI,CAACK,OAAO,EAAE;MACV;IACJ;IACA;IACA,IAAIoB,oBAAoB,EAAE;MACtB,IAAMqB,EAAE,GAAGzC,OAAyB;MACpCa,aAAa,CAAC4B,EAAE,CAACC,kBAAkB,CAAC,CAAC,CAAC;MACtC;IACJ;IAEA,IAAIpB,mBAAmB,IAAIE,iBAAiB,IAAIE,eAAe,EAAE;MAC7D,IAAMiB,OAAO,GAAG3C,OAAO,CAAC4C,oBAAoB,CAAC,CAAC;MAC9C,IAAI,CAACD,OAAO,EAAE;QACV;MACJ;MAEA,IAAI,CAAC1B,eAAe,EAAE;QAClB;MACJ;MAEA,IAAM4B,KAAK,GAAG5B,eAAe,CAAC0B,OAAO,CAAC;MACtC,IAAIE,KAAK,EAAE;QACPhC,aAAa,CAAC;UACViC,IAAI,EAAED,KAAK,EAAEC,IAAI;UACjBR,EAAE,EAAEO,KAAK,CAACP,EAAE;UACZS,GAAG,EAAEF,KAAK,CAACG,MAAM;UACjBhB,GAAG,EAAEa,KAAK,CAACb;QACf,CAAC,CAAC;MACN;MACA;IACJ;;IAEA;IACA,IAAIf,eAAe,KAAK,IAAAgC,yBAAW,EAACjD,OAAO,CAAC,IAAI,IAAA2B,0BAAY,EAAC3B,OAAO,CAAC,CAAC,EAAE;MACpE,IAAMqC,YAAY,GAAGrC,OAAO,EAAEkD,UAAU,CAAC,CAAC,IAAIC,SAAS;MACvD,IAAId,YAAY,EAAE;QACd,IAAMe,YAAY,GAAGnC,eAAe,CAACoB,YAAY,CAAC;QAClD,IAAIe,YAAY,EAAE;UACdvC,aAAa,CAAC;YACVyB,EAAE,EAAEc,YAAY,CAACd,EAAE;YACnBS,GAAG,EAAEK,YAAY,CAACJ,MAAM;YACxBF,IAAI,EAAEM,YAAY,CAACN,IAAI;YACvBd,GAAG,EAAEoB,YAAY,CAACpB;UACtB,CAAC,CAAC;QACN;MACJ;IACJ;EACJ,CAAC,EAAE,CAAChC,OAAO,EAAEoB,oBAAoB,EAAEM,eAAe,EAAEJ,mBAAmB,EAAEE,iBAAiB,CAAC,CAAC;EAE5F,oBACIzC,MAAA,CAAAkB,OAAA,CAAAC,aAAA,CAACf,wBAAA,CAAAkE,uBAAuB,CAACC,QAAQ;IAC7BxB,KAAK,EAAE;MACHA,KAAK,EAAElB,UAAU;MACjB2C,eAAe,EAAExB;IACrB;EAAE,gBAEFhD,MAAA,CAAAkB,OAAA,CAAAC,aAAA,CAACV,4BAA4B,MAAE,CACD,CAAC;AAE3C,CAAC;AAEDe,gBAAgB,CAACiD,kBAAkB,GAAG1D,wBAAwB","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":"AAAA,OAAOA,KAAK,IAAIC,WAAW,EAAEC,SAAS,EAAEC,QAAQ,QAAQ,OAAO;AAE/D,SAASC,OAAO,EAAEC,eAAe,QAAQ,2BAA2B;AAGpE,SAASC,uBAAuB;AAChC,SAASC,cAAc,EAAEC,WAAW,EAAEC,gBAAgB,EAAEC,YAAY,QAAQ,uBAAuB;AACnG,SAASC,iBAAiB;AAM1B,SACIC,2BAA2B,EAC3BC,6BAA6B,EAC7BC,oBAAoB,EACpBC,sBAAsB;AAE1B,SAASC,iBAAiB;;AAE1B;AACA,MAAMC,aAAa,GAAG,CAAC,YAAY,EAAE,YAAY,CAAC;;AAElD;AACA;AACA;AACA;AACA,OAAO,MAAMC,4BAA4B,GAAGb,eAAe,CACvD,8BAA8B,EAC9B,MAA0B;EACtBH,SAAS,CAAC,MAAM;IACZiB,OAAO,CAACC,GAAG,CAAC,qEAAqE,CAAC;EACtF,CAAC,EAAE,EAAE,CAAC;EACN,OAAO,IAAI;AACf,CACJ,CAAC;AAMD,MAAMC,wBAAwB,GAAGA,CAAC;EAAEC;AAAuC,CAAC,KAAkB;EAC1F,oBAAOtB,KAAA,CAAAuB,aAAA,CAACnB,OAAO;IAACoB,SAAS,EAAEN,4BAA6B;IAACO,IAAI,EAAEA,CAAA,KAAM,MAAMH;EAAQ,CAAE,CAAC;AAC1F,CAAC;AAMD,OAAO,MAAMI,gBAAkC,GAAGA,CAAA,KAAM;EACpD,MAAM,CAACC,UAAU,EAAEC,aAAa,CAAC,GAAGzB,QAAQ,CAAmB,CAAC;EAChE,MAAM;IAAE0B,MAAM;IAAEC;EAAM,CAAC,GAAGnB,iBAAiB,CAAC,CAAC;EAC7C,MAAM;IAAEW;EAAQ,CAAC,GAAGN,iBAAiB,CAAC,CAAC;EACvC,MAAMe,mBAAmB,GAAGtB,gBAAgB,CAACa,OAAO,CAAC;EACrD,MAAMU,iBAAiB,GAAGzB,cAAc,CAACe,OAAO,CAAC;EACjD,MAAMW,eAAe,GAAGvB,YAAY,CAACY,OAAO,CAAC;EAE7C,MAAMY,kBAAkB,GAAGjC,WAAW,CAAEkC,KAAsB,IAAK;IAC/DP,aAAa,CAACO,KAAK,CAAC;IAEpB,IAAIA,KAAK,CAACC,GAAG,CAACC,QAAQ,CAAC,GAAG,CAAC,IAAIF,KAAK,CAACC,GAAG,CAACC,QAAQ,CAAC,GAAG,CAAC,EAAE;MACpDR,MAAM,CAACS,eAAe,CAAoCvB,sBAAsB,EAAE;QAC9EoB;MACJ,CAAC,CAAC;MACF;IACJ;IAEA,IAAIA,KAAK,CAACC,GAAG,KAAK,IAAI,EAAE;MACpBP,MAAM,CAACS,eAAe,CAClB1B,2BAA2B,EAC3B;QACI2B,YAAY,EAAEJ,KAAK,CAACK;MACxB,CACJ,CAAC;MACD;IACJ;IAEA,IAAIL,KAAK,CAACC,GAAG,KAAK,IAAI,EAAE;MACpBP,MAAM,CAACS,eAAe,CAClBzB,6BAA6B,EAC7B;QACI0B,YAAY,EAAEJ,KAAK,CAACK;MACxB,CACJ,CAAC;MACD;IACJ;IAEA,IAAIvB,aAAa,CAACoB,QAAQ,CAACF,KAAK,CAACC,GAAG,CAAC,EAAE;MACnCP,MAAM,CAACS,eAAe,CAAsCxB,oBAAoB,EAAE;QAC9EyB,YAAY,EAAEJ,KAAK,CAACK;MACxB,CAAC,CAAC;IACN;EACJ,CAAC,EAAE,EAAE,CAAC;EAENtC,SAAS,CAAC,MAAM;IACZ,IAAI,CAACoB,OAAO,EAAE;MACV;IACJ;IAEA,IAAIS,mBAAmB,IAAIC,iBAAiB,IAAIC,eAAe,EAAE;MAC7D,MAAMQ,OAAO,GAAGnB,OAAO,CAACoB,UAAU,CAAC,CAAC;MACpC,IAAI,CAACD,OAAO,EAAE;QACV;MACJ;MAEA,MAAME,KAAK,GAAGb,KAAK,CAACc,iBAAiB,CAACH,OAAO,CAAC;MAC9C,IAAIE,KAAK,EAAE;QACPf,aAAa,CAAC;UACVY,EAAE,EAAEG,KAAK,CAACH,EAAE;UACZK,KAAK,EAAEF,KAAK,CAACE;QACjB,CAAC,CAAC;MACN;MACA;IACJ;;IAEA;IACA,IAAIrC,WAAW,CAACc,OAAO,CAAC,EAAE;MACtB,MAAMmB,OAAO,GAAGnB,OAAO,CAACoB,UAAU,CAAC,CAAC;MACpC,IAAI,CAACD,OAAO,EAAE;QACV;MACJ;MAEA,MAAME,KAAK,GAAGb,KAAK,CAACc,iBAAiB,CAACH,OAAO,CAAC;MAC9C,IAAIE,KAAK,EAAE;QACPf,aAAa,CAAC;UACVY,EAAE,EAAEG,KAAK,CAACH,EAAE;UACZK,KAAK,EAAEF,KAAK,CAACE;QACjB,CAAC,CAAC;MACN;IACJ;EACJ,CAAC,EAAE,CAACvB,OAAO,EAAEW,eAAe,EAAEF,mBAAmB,EAAEC,iBAAiB,CAAC,CAAC;EAEtE,oBACIhC,KAAA,CAAAuB,aAAA,CAACjB,uBAAuB,CAACwC,QAAQ;IAC7BX,KAAK,EAAE;MACHA,KAAK,EAAER,UAAU;MACjBoB,eAAe,EAAEb;IACrB;EAAE,gBAEFlC,KAAA,CAAAuB,aAAA,CAACL,4BAA4B,MAAE,CACD,CAAC;AAE3C,CAAC;AAEDQ,gBAAgB,CAACsB,kBAAkB,GAAG3B,wBAAwB","ignoreList":[]}

package/components/ToolbarActions/UnderlineAction.js

@@ -1,27 +1,22 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.UnderlineAction = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _lexical = require("lexical");
-var _hooks = require("../../hooks");
-var UnderlineAction = exports.UnderlineAction = function UnderlineAction() {
-  var _useRichTextEditor = (0, _hooks.useRichTextEditor)(),
-    editor = _useRichTextEditor.editor;
-  var _useCurrentSelection = (0, _hooks.useCurrentSelection)(),
-    rangeSelection = _useCurrentSelection.rangeSelection;
-  var isUnderlineSelected = rangeSelection ? rangeSelection.hasFormat("underline") : false;
-  var handleClick = function handleClick() {
-    editor.dispatchCommand(_lexical.FORMAT_TEXT_COMMAND, "underline");
+import React from "react";
+import { FORMAT_TEXT_COMMAND } from "lexical";
+import { useCurrentSelection, useRichTextEditor } from "../../hooks/index.js";
+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.default.createElement("button", {
+  return /*#__PURE__*/React.createElement("button", {
     onClick: handleClick,
     className: "popup-item spaced " + (isUnderlineSelected ? "active" : ""),
-    "aria-label": "Format text as italic"
-  }, /*#__PURE__*/_react.default.createElement("i", {
+    "aria-label": "Underline text"
+  }, /*#__PURE__*/React.createElement("i", {
     className: "format underline"
   }));
 };