@webiny/lexical-editor 5.43.2-beta.0 → 6.0.0-alpha.0

package/components/ToolbarActions/NumberedListAction.js

@@ -1,53 +1,46 @@
-"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() {
+import React from "react";
+import { $isListNode } from "@webiny/lexical-nodes";
+import { findTypographyStyleByHtmlTag } from "@webiny/lexical-theme";
+import { INSERT_ORDERED_LIST_COMMAND, REMOVE_LIST_COMMAND } from "../../commands";
+import { useRichTextEditor } from "../../hooks/useRichTextEditor";
+import { useCurrentElement } from "../../hooks/useCurrentElement";
+export const NumberedListAction = () => {
+  const {
+    element
+  } = useCurrentElement();
+  const {
+    editor,
+    themeEmotionMap
+  } = useRichTextEditor();
+  const isList = $isListNode(element);
+  const isNumbered = isList && element.getListType() === "number";
+  const getStyleId = () => {
     if (!themeEmotionMap) {
       return undefined;
     }
     // check default style for numbered list
-    var id = (0, _lexicalTheme.findTypographyStyleByHtmlTag)("ol", themeEmotionMap)?.id;
+    const id = findTypographyStyleByHtmlTag("ol", themeEmotionMap)?.id;
     if (id) {
       return id;
     }
     // fallback to ul list styles
-    return (0, _lexicalTheme.findTypographyStyleByHtmlTag)("ul", themeEmotionMap)?.id;
+    return findTypographyStyleByHtmlTag("ul", themeEmotionMap)?.id;
   };
-  var formatNumberedList = function formatNumberedList() {
+  const formatNumberedList = () => {
     if (!isNumbered) {
-      var styleId = themeEmotionMap ? getStyleId() : undefined;
-      editor.dispatchCommand(_commands.INSERT_ORDERED_LIST_COMMAND, {
+      const styleId = themeEmotionMap ? getStyleId() : undefined;
+      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","findTypographyStyleByHtmlTag","INSERT_ORDERED_LIST_COMMAND","REMOVE_LIST_COMMAND","useRichTextEditor","useCurrentElement","NumberedListAction","element","editor","themeEmotionMap","isList","isNumbered","getListType","getStyleId","undefined","id","formatNumberedList","styleId","dispatchCommand","themeStyleId","createElement","onClick","className"],"sources":["NumberedListAction.tsx"],"sourcesContent":["import React from \"react\";\nimport { $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,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,WAAW,QAAkB,uBAAuB;AAC7D,SAASC,4BAA4B,QAAQ,uBAAuB;AACpE,SAASC,2BAA2B,EAAEC,mBAAmB;AACzD,SAASC,iBAAiB;AAC1B,SAASC,iBAAiB;AAE1B,OAAO,MAAMC,kBAAkB,GAAGA,CAAA,KAAM;EACpC,MAAM;IAAEC;EAAQ,CAAC,GAAGF,iBAAiB,CAAC,CAAC;EACvC,MAAM;IAAEG,MAAM;IAAEC;EAAgB,CAAC,GAAGL,iBAAiB,CAAC,CAAC;EACvD,MAAMM,MAAM,GAAGV,WAAW,CAACO,OAAO,CAAC;EACnC,MAAMI,UAAU,GAAGD,MAAM,IAAKH,OAAO,CAAcK,WAAW,CAAC,CAAC,KAAK,QAAQ;EAE7E,MAAMC,UAAU,GAAGA,CAAA,KAA0B;IACzC,IAAI,CAACJ,eAAe,EAAE;MAClB,OAAOK,SAAS;IACpB;IACA;IACA,MAAMC,EAAE,GAAGd,4BAA4B,CAAC,IAAI,EAAEQ,eAAe,CAAC,EAAEM,EAAE;IAClE,IAAIA,EAAE,EAAE;MACJ,OAAOA,EAAE;IACb;IACA;IACA,OAAOd,4BAA4B,CAAC,IAAI,EAAEQ,eAAe,CAAC,EAAEM,EAAE;EAClE,CAAC;EAED,MAAMC,kBAAkB,GAAGA,CAAA,KAAM;IAC7B,IAAI,CAACL,UAAU,EAAE;MACb,MAAMM,OAAO,GAAGR,eAAe,GAAGI,UAAU,CAAC,CAAC,GAAGC,SAAS;MAC1DN,MAAM,CAACU,eAAe,CAAChB,2BAA2B,EAAE;QAAEiB,YAAY,EAAEF;MAAQ,CAAC,CAAC;IAClF,CAAC,MAAM;MACHT,MAAM,CAACU,eAAe,CAACf,mBAAmB,EAAEW,SAAS,CAAC;IAC1D;EACJ,CAAC;EAED,oBACIf,KAAA,CAAAqB,aAAA;IACIC,OAAO,EAAEA,CAAA,KAAML,kBAAkB,CAAC,CAAE;IACpCM,SAAS,EAAE,oBAAoB,IAAIX,UAAU,GAAG,QAAQ,GAAG,EAAE,CAAE;IAC/D,cAAW;EAA8B,gBAEzCZ,KAAA,CAAAqB,aAAA;IAAGE,SAAS,EAAC;EAAoB,CAAE,CAC/B,CAAC;AAEjB,CAAC","ignoreList":[]}

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

package/components/ToolbarActions/TextAlignmentAction.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";
+import { useDeriveValueFromSelection } from "../../hooks/useCurrentSelection";
+import { getSelectedNode } from "../../utils/getSelectedNode";
+import { useRichTextEditor } from "../../hooks";
 
-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 {\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,OAAOA,KAAK,IAAIC,SAAS,EAAEC,OAAO,QAAQ,OAAO;AACjD,SAEIC,sBAAsB,EACtBC,sBAAsB,EACtBC,uBAAuB,QACpB,SAAS;AAChB,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,99 +1,87 @@
-"use strict";
+import React, { useCallback, useEffect, useState } from "react";
+import { Compose, makeDecoratable } from "@webiny/react-composition";
+import { TypographyActionContext } from "../../context/TypographyActionContext";
+import { $isHeadingNode, $isListNode, $isParagraphNode, $isQuoteNode, $isTypographyNode, ADD_TYPOGRAPHY_COMMAND } from "@webiny/lexical-nodes";
+import { useRichTextEditor } from "../../hooks/useRichTextEditor";
+import { INSERT_ORDERED_LIST_COMMAND, INSERT_UNORDERED_LIST_COMMAND, INSERT_QUOTE_COMMAND } from "../../commands";
+import { useCurrentElement } from "../../hooks/useCurrentElement";
 
-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,
+    themeEmotionMap
+  } = useRichTextEditor();
+  const {
+    element
+  } = useCurrentElement();
+  const isTypographySelected = $isTypographyNode(element);
+  const isParagraphSelected = $isParagraphNode(element);
+  const isHeadingSelected = $isHeadingNode(element);
+  const isQuoteSelected = $isQuoteNode(element);
+  const setTypographySelect = useCallback(value => {
     setTypography(value);
   }, [typography]);
-  var onTypographySelect = (0, _react.useCallback)(function (value) {
+  const onTypographySelect = useCallback(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
       });
     }
     if (value.tag === "ol") {
-      editor.dispatchCommand(_commands.INSERT_ORDERED_LIST_COMMAND, {
+      editor.dispatchCommand(INSERT_ORDERED_LIST_COMMAND, {
         themeStyleId: value.id
       });
     }
     if (value.tag === "ul") {
-      editor.dispatchCommand(_commands.INSERT_UNORDERED_LIST_COMMAND, {
+      editor.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND, {
         themeStyleId: value.id
       });
     }
     if (value.tag === "quoteblock") {
-      editor.dispatchCommand(_commands.INSERT_QUOTE_COMMAND, {
+      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;
+      const el = element;
       setTypography(el.getTypographyValue());
       return;
     }
     if (isParagraphSelected || isHeadingSelected || isQuoteSelected) {
-      var styleId = element.getTypographyStyleId();
+      const styleId = element.getTypographyStyleId();
       if (!styleId) {
         return;
       }
       if (!themeEmotionMap) {
         return;
       }
-      var style = themeEmotionMap[styleId];
+      const style = themeEmotionMap[styleId];
       if (style) {
         setTypography({
           name: style?.name,
@@ -106,10 +94,10 @@ var TypographyAction = exports.TypographyAction = function TypographyAction() {
     }
 
     // list and quote element
-    if (themeEmotionMap && ((0, _lexicalNodes.$isListNode)(element) || (0, _lexicalNodes.$isQuoteNode)(element))) {
-      var themeStyleId = element?.getStyleId() || undefined;
+    if (themeEmotionMap && ($isListNode(element) || $isQuoteNode(element))) {
+      const themeStyleId = element?.getStyleId() || undefined;
       if (themeStyleId) {
-        var elementStyle = themeEmotionMap[themeStyleId];
+        const elementStyle = themeEmotionMap[themeStyleId];
         if (elementStyle) {
           setTypography({
             id: elementStyle.id,
@@ -121,12 +109,12 @@ var TypographyAction = exports.TypographyAction = function TypographyAction() {
       }
     }
   }, [element, isTypographySelected, isQuoteSelected, isParagraphSelected, isHeadingSelected]);
-  return /*#__PURE__*/_react.default.createElement(_TypographyActionContext.TypographyActionContext.Provider, {
+  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":"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","ignoreList":[]}
+{"version":3,"names":["React","useCallback","useEffect","useState","Compose","makeDecoratable","TypographyActionContext","$isHeadingNode","$isListNode","$isParagraphNode","$isQuoteNode","$isTypographyNode","ADD_TYPOGRAPHY_COMMAND","useRichTextEditor","INSERT_ORDERED_LIST_COMMAND","INSERT_UNORDERED_LIST_COMMAND","INSERT_QUOTE_COMMAND","useCurrentElement","BaseTypographyActionDropDown","console","log","TypographyActionDropDown","element","createElement","component","with","TypographyAction","typography","setTypography","editor","themeEmotionMap","isTypographySelected","isParagraphSelected","isHeadingSelected","isQuoteSelected","setTypographySelect","value","onTypographySelect","tag","includes","dispatchCommand","themeStyleId","id","el","getTypographyValue","styleId","getTypographyStyleId","style","name","css","styles","getStyleId","undefined","elementStyle","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":"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","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";
+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"
   }));
 };

package/components/ToolbarActions/UnderlineAction.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_lexical","_hooks","UnderlineAction","exports","_useRichTextEditor","useRichTextEditor","editor","_useCurrentSelection","useCurrentSelection","rangeSelection","isUnderlineSelected","hasFormat","handleClick","dispatchCommand","FORMAT_TEXT_COMMAND","default","createElement","onClick","className"],"sources":["UnderlineAction.tsx"],"sourcesContent":["import React from \"react\";\nimport { FORMAT_TEXT_COMMAND } from \"lexical\";\nimport { useCurrentSelection, useRichTextEditor } from \"~/hooks\";\n\nexport const UnderlineAction = () => {\n    const { editor } = useRichTextEditor();\n    const { rangeSelection } = useCurrentSelection();\n    const isUnderlineSelected = rangeSelection ? rangeSelection.hasFormat(\"underline\") : false;\n\n    const handleClick = () => {\n        editor.dispatchCommand(FORMAT_TEXT_COMMAND, \"underline\");\n    };\n\n    return (\n        <button\n            onClick={handleClick}\n            className={\"popup-item spaced \" + (isUnderlineSelected ? \"active\" : \"\")}\n            aria-label=\"Format text as italic\"\n        >\n            <i className=\"format underline\" />\n        </button>\n    );\n};\n"],"mappings":";;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,QAAA,GAAAD,OAAA;AACA,IAAAE,MAAA,GAAAF,OAAA;AAEO,IAAMG,eAAe,GAAAC,OAAA,CAAAD,eAAA,GAAG,SAAlBA,eAAeA,CAAA,EAAS;EACjC,IAAAE,kBAAA,GAAmB,IAAAC,wBAAiB,EAAC,CAAC;IAA9BC,MAAM,GAAAF,kBAAA,CAANE,MAAM;EACd,IAAAC,oBAAA,GAA2B,IAAAC,0BAAmB,EAAC,CAAC;IAAxCC,cAAc,GAAAF,oBAAA,CAAdE,cAAc;EACtB,IAAMC,mBAAmB,GAAGD,cAAc,GAAGA,cAAc,CAACE,SAAS,CAAC,WAAW,CAAC,GAAG,KAAK;EAE1F,IAAMC,WAAW,GAAG,SAAdA,WAAWA,CAAA,EAAS;IACtBN,MAAM,CAACO,eAAe,CAACC,4BAAmB,EAAE,WAAW,CAAC;EAC5D,CAAC;EAED,oBACIjB,MAAA,CAAAkB,OAAA,CAAAC,aAAA;IACIC,OAAO,EAAEL,WAAY;IACrBM,SAAS,EAAE,oBAAoB,IAAIR,mBAAmB,GAAG,QAAQ,GAAG,EAAE,CAAE;IACxE,cAAW;EAAuB,gBAElCb,MAAA,CAAAkB,OAAA,CAAAC,aAAA;IAAGE,SAAS,EAAC;EAAkB,CAAE,CAC7B,CAAC;AAEjB,CAAC","ignoreList":[]}
+{"version":3,"names":["React","FORMAT_TEXT_COMMAND","useCurrentSelection","useRichTextEditor","UnderlineAction","editor","rangeSelection","isUnderlineSelected","hasFormat","handleClick","dispatchCommand","createElement","onClick","className"],"sources":["UnderlineAction.tsx"],"sourcesContent":["import React from \"react\";\nimport { FORMAT_TEXT_COMMAND } from \"lexical\";\nimport { useCurrentSelection, useRichTextEditor } from \"~/hooks\";\n\nexport const UnderlineAction = () => {\n    const { editor } = useRichTextEditor();\n    const { rangeSelection } = useCurrentSelection();\n    const isUnderlineSelected = rangeSelection ? rangeSelection.hasFormat(\"underline\") : false;\n\n    const handleClick = () => {\n        editor.dispatchCommand(FORMAT_TEXT_COMMAND, \"underline\");\n    };\n\n    return (\n        <button\n            onClick={handleClick}\n            className={\"popup-item spaced \" + (isUnderlineSelected ? \"active\" : \"\")}\n            aria-label=\"Underline text\"\n        >\n            <i className=\"format underline\" />\n        </button>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,mBAAmB,QAAQ,SAAS;AAC7C,SAASC,mBAAmB,EAAEC,iBAAiB;AAE/C,OAAO,MAAMC,eAAe,GAAGA,CAAA,KAAM;EACjC,MAAM;IAAEC;EAAO,CAAC,GAAGF,iBAAiB,CAAC,CAAC;EACtC,MAAM;IAAEG;EAAe,CAAC,GAAGJ,mBAAmB,CAAC,CAAC;EAChD,MAAMK,mBAAmB,GAAGD,cAAc,GAAGA,cAAc,CAACE,SAAS,CAAC,WAAW,CAAC,GAAG,KAAK;EAE1F,MAAMC,WAAW,GAAGA,CAAA,KAAM;IACtBJ,MAAM,CAACK,eAAe,CAACT,mBAAmB,EAAE,WAAW,CAAC;EAC5D,CAAC;EAED,oBACID,KAAA,CAAAW,aAAA;IACIC,OAAO,EAAEH,WAAY;IACrBI,SAAS,EAAE,oBAAoB,IAAIN,mBAAmB,GAAG,QAAQ,GAAG,EAAE,CAAE;IACxE,cAAW;EAAgB,gBAE3BP,KAAA,CAAAW,aAAA;IAAGE,SAAS,EAAC;EAAkB,CAAE,CAC7B,CAAC;AAEjB,CAAC","ignoreList":[]}