@webiny/lexical-editor 5.44.1-beta.0 → 5.45.0-beta.0

package/components/ToolbarActions/BoldAction.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_lexical","_useCurrentSelection2","_hooks","BoldAction","exports","_useRichTextEditor","useRichTextEditor","editor","_useCurrentSelection","useCurrentSelection","rangeSelection","isBoldSelected","hasFormat","handleClick","dispatchCommand","FORMAT_TEXT_COMMAND","default","createElement","onClick","className"],"sources":["BoldAction.tsx"],"sourcesContent":["import React from \"react\";\nimport { FORMAT_TEXT_COMMAND } from \"lexical\";\nimport { useCurrentSelection } from \"~/hooks/useCurrentSelection\";\nimport { useRichTextEditor } from \"~/hooks\";\n\nexport const BoldAction = () => {\n    const { editor } = useRichTextEditor();\n    const { rangeSelection } = useCurrentSelection();\n    const isBoldSelected = rangeSelection ? rangeSelection.hasFormat(\"bold\") : false;\n\n    const handleClick = () => {\n        editor.dispatchCommand(FORMAT_TEXT_COMMAND, \"bold\");\n    };\n\n    return (\n        <button\n            onClick={handleClick}\n            className={\"popup-item spaced \" + (isBoldSelected ? \"active\" : \"\")}\n            aria-label=\"Format text as bold\"\n        >\n            <i className=\"format bold\" />\n        </button>\n    );\n};\n"],"mappings":";;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,QAAA,GAAAD,OAAA;AACA,IAAAE,qBAAA,GAAAF,OAAA;AACA,IAAAG,MAAA,GAAAH,OAAA;AAEO,IAAMI,UAAU,GAAAC,OAAA,CAAAD,UAAA,GAAG,SAAbA,UAAUA,CAAA,EAAS;EAC5B,IAAAE,kBAAA,GAAmB,IAAAC,wBAAiB,EAAC,CAAC;IAA9BC,MAAM,GAAAF,kBAAA,CAANE,MAAM;EACd,IAAAC,oBAAA,GAA2B,IAAAC,yCAAmB,EAAC,CAAC;IAAxCC,cAAc,GAAAF,oBAAA,CAAdE,cAAc;EACtB,IAAMC,cAAc,GAAGD,cAAc,GAAGA,cAAc,CAACE,SAAS,CAAC,MAAM,CAAC,GAAG,KAAK;EAEhF,IAAMC,WAAW,GAAG,SAAdA,WAAWA,CAAA,EAAS;IACtBN,MAAM,CAACO,eAAe,CAACC,4BAAmB,EAAE,MAAM,CAAC;EACvD,CAAC;EAED,oBACIlB,MAAA,CAAAmB,OAAA,CAAAC,aAAA;IACIC,OAAO,EAAEL,WAAY;IACrBM,SAAS,EAAE,oBAAoB,IAAIR,cAAc,GAAG,QAAQ,GAAG,EAAE,CAAE;IACnE,cAAW;EAAqB,gBAEhCd,MAAA,CAAAmB,OAAA,CAAAC,aAAA;IAAGE,SAAS,EAAC;EAAa,CAAE,CACxB,CAAC;AAEjB,CAAC","ignoreList":[]}
+{"version":3,"names":["React","FORMAT_TEXT_COMMAND","useCurrentSelection","useRichTextEditor","BoldAction","editor","rangeSelection","isBoldSelected","hasFormat","handleClick","dispatchCommand","createElement","onClick","className"],"sources":["BoldAction.tsx"],"sourcesContent":["import React from \"react\";\nimport { FORMAT_TEXT_COMMAND } from \"lexical\";\nimport { useCurrentSelection } from \"~/hooks/useCurrentSelection.js\";\nimport { useRichTextEditor } from \"~/hooks/index.js\";\n\nexport const BoldAction = () => {\n    const { editor } = useRichTextEditor();\n    const { rangeSelection } = useCurrentSelection();\n    const isBoldSelected = rangeSelection ? rangeSelection.hasFormat(\"bold\") : false;\n\n    const handleClick = () => {\n        editor.dispatchCommand(FORMAT_TEXT_COMMAND, \"bold\");\n    };\n\n    return (\n        <button\n            onClick={handleClick}\n            className={\"popup-item spaced \" + (isBoldSelected ? \"active\" : \"\")}\n            aria-label=\"Format text as bold\"\n        >\n            <i className=\"format bold\" />\n        </button>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,mBAAmB,QAAQ,SAAS;AAC7C,SAASC,mBAAmB;AAC5B,SAASC,iBAAiB;AAE1B,OAAO,MAAMC,UAAU,GAAGA,CAAA,KAAM;EAC5B,MAAM;IAAEC;EAAO,CAAC,GAAGF,iBAAiB,CAAC,CAAC;EACtC,MAAM;IAAEG;EAAe,CAAC,GAAGJ,mBAAmB,CAAC,CAAC;EAChD,MAAMK,cAAc,GAAGD,cAAc,GAAGA,cAAc,CAACE,SAAS,CAAC,MAAM,CAAC,GAAG,KAAK;EAEhF,MAAMC,WAAW,GAAGA,CAAA,KAAM;IACtBJ,MAAM,CAACK,eAAe,CAACT,mBAAmB,EAAE,MAAM,CAAC;EACvD,CAAC;EAED,oBACID,KAAA,CAAAW,aAAA;IACIC,OAAO,EAAEH,WAAY;IACrBI,SAAS,EAAE,oBAAoB,IAAIN,cAAc,GAAG,QAAQ,GAAG,EAAE,CAAE;IACnE,cAAW;EAAqB,gBAEhCP,KAAA,CAAAW,aAAA;IAAGE,SAAS,EAAC;EAAa,CAAE,CACxB,CAAC;AAEjB,CAAC","ignoreList":[]}

package/components/ToolbarActions/BulletListAction.js

@@ -1,43 +1,37 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.BulletListAction = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _commands = require("../../commands");
-var _useRichTextEditor3 = require("../../hooks/useRichTextEditor");
-var _lexicalTheme = require("@webiny/lexical-theme");
-var _lexicalNodes = require("@webiny/lexical-nodes");
-var _useCurrentElement2 = require("../../hooks/useCurrentElement");
-var BulletListAction = exports.BulletListAction = function BulletListAction() {
-  var _useRichTextEditor = (0, _useRichTextEditor3.useRichTextEditor)(),
-    editor = _useRichTextEditor.editor;
-  var _useCurrentElement = (0, _useCurrentElement2.useCurrentElement)(),
-    element = _useCurrentElement.element;
-  var _useRichTextEditor2 = (0, _useRichTextEditor3.useRichTextEditor)(),
-    themeEmotionMap = _useRichTextEditor2.themeEmotionMap;
-  var isList = (0, _lexicalNodes.$isListNode)(element);
-  var isBullet = isList && element.getListType() === "bullet";
-  var formatBulletList = function formatBulletList() {
+import React from "react";
+import { INSERT_UNORDERED_LIST_COMMAND, REMOVE_LIST_COMMAND } from "../../commands/index.js";
+import { useRichTextEditor } from "../../hooks/useRichTextEditor.js";
+import { $isListNode } from "@webiny/lexical-nodes";
+import { useCurrentElement } from "../../hooks/useCurrentElement.js";
+export const BulletListAction = () => {
+  const {
+    editor
+  } = useRichTextEditor();
+  const {
+    element
+  } = useCurrentElement();
+  const {
+    theme
+  } = useRichTextEditor();
+  const isList = $isListNode(element);
+  const isBullet = isList && element.getListType() === "bullet";
+  const formatBulletList = () => {
     if (!isBullet) {
-      var styleId = themeEmotionMap ? (0, _lexicalTheme.findTypographyStyleByHtmlTag)("ul", themeEmotionMap)?.id : undefined;
+      const styleId = theme.getTypographyByTag("ul")?.id;
+
       // will update the active state in the useEffect
-      editor.dispatchCommand(_commands.INSERT_UNORDERED_LIST_COMMAND, {
+      editor.dispatchCommand(INSERT_UNORDERED_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 formatBulletList();
-    },
+  return /*#__PURE__*/React.createElement("button", {
+    onClick: () => formatBulletList(),
     className: "popup-item spaced " + (isBullet ? "active" : ""),
     "aria-label": "Format text as bullet list"
-  }, /*#__PURE__*/_react.default.createElement("i", {
+  }, /*#__PURE__*/React.createElement("i", {
     className: "icon bullet-list"
   }));
 };

package/components/ToolbarActions/BulletListAction.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_commands","_useRichTextEditor3","_lexicalTheme","_lexicalNodes","_useCurrentElement2","BulletListAction","exports","_useRichTextEditor","useRichTextEditor","editor","_useCurrentElement","useCurrentElement","element","_useRichTextEditor2","themeEmotionMap","isList","$isListNode","isBullet","getListType","formatBulletList","styleId","findTypographyStyleByHtmlTag","id","undefined","dispatchCommand","INSERT_UNORDERED_LIST_COMMAND","themeStyleId","REMOVE_LIST_COMMAND","default","createElement","onClick","className"],"sources":["BulletListAction.tsx"],"sourcesContent":["import React from \"react\";\nimport { INSERT_UNORDERED_LIST_COMMAND, REMOVE_LIST_COMMAND } from \"~/commands\";\nimport { useRichTextEditor } from \"~/hooks/useRichTextEditor\";\nimport { findTypographyStyleByHtmlTag } from \"@webiny/lexical-theme\";\nimport { $isListNode, ListNode } from \"@webiny/lexical-nodes\";\nimport { useCurrentElement } from \"~/hooks/useCurrentElement\";\n\nexport const BulletListAction = () => {\n    const { editor } = useRichTextEditor();\n    const { element } = useCurrentElement();\n    const { themeEmotionMap } = useRichTextEditor();\n    const isList = $isListNode(element);\n\n    const isBullet = isList && (element as ListNode).getListType() === \"bullet\";\n\n    const formatBulletList = () => {\n        if (!isBullet) {\n            const styleId = themeEmotionMap\n                ? findTypographyStyleByHtmlTag(\"ul\", themeEmotionMap)?.id\n                : undefined;\n            // will update the active state in the useEffect\n            editor.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND, { themeStyleId: styleId });\n        } else {\n            editor.dispatchCommand(REMOVE_LIST_COMMAND, undefined);\n        }\n    };\n\n    return (\n        <button\n            onClick={() => formatBulletList()}\n            className={\"popup-item spaced \" + (isBullet ? \"active\" : \"\")}\n            aria-label=\"Format text as bullet list\"\n        >\n            <i className=\"icon bullet-list\" />\n        </button>\n    );\n};\n"],"mappings":";;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,SAAA,GAAAD,OAAA;AACA,IAAAE,mBAAA,GAAAF,OAAA;AACA,IAAAG,aAAA,GAAAH,OAAA;AACA,IAAAI,aAAA,GAAAJ,OAAA;AACA,IAAAK,mBAAA,GAAAL,OAAA;AAEO,IAAMM,gBAAgB,GAAAC,OAAA,CAAAD,gBAAA,GAAG,SAAnBA,gBAAgBA,CAAA,EAAS;EAClC,IAAAE,kBAAA,GAAmB,IAAAC,qCAAiB,EAAC,CAAC;IAA9BC,MAAM,GAAAF,kBAAA,CAANE,MAAM;EACd,IAAAC,kBAAA,GAAoB,IAAAC,qCAAiB,EAAC,CAAC;IAA/BC,OAAO,GAAAF,kBAAA,CAAPE,OAAO;EACf,IAAAC,mBAAA,GAA4B,IAAAL,qCAAiB,EAAC,CAAC;IAAvCM,eAAe,GAAAD,mBAAA,CAAfC,eAAe;EACvB,IAAMC,MAAM,GAAG,IAAAC,yBAAW,EAACJ,OAAO,CAAC;EAEnC,IAAMK,QAAQ,GAAGF,MAAM,IAAKH,OAAO,CAAcM,WAAW,CAAC,CAAC,KAAK,QAAQ;EAE3E,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAgBA,CAAA,EAAS;IAC3B,IAAI,CAACF,QAAQ,EAAE;MACX,IAAMG,OAAO,GAAGN,eAAe,GACzB,IAAAO,0CAA4B,EAAC,IAAI,EAAEP,eAAe,CAAC,EAAEQ,EAAE,GACvDC,SAAS;MACf;MACAd,MAAM,CAACe,eAAe,CAACC,uCAA6B,EAAE;QAAEC,YAAY,EAAEN;MAAQ,CAAC,CAAC;IACpF,CAAC,MAAM;MACHX,MAAM,CAACe,eAAe,CAACG,6BAAmB,EAAEJ,SAAS,CAAC;IAC1D;EACJ,CAAC;EAED,oBACI1B,MAAA,CAAA+B,OAAA,CAAAC,aAAA;IACIC,OAAO,EAAE,SAATA,OAAOA,CAAA;MAAA,OAAQX,gBAAgB,CAAC,CAAC;IAAA,CAAC;IAClCY,SAAS,EAAE,oBAAoB,IAAId,QAAQ,GAAG,QAAQ,GAAG,EAAE,CAAE;IAC7D,cAAW;EAA4B,gBAEvCpB,MAAA,CAAA+B,OAAA,CAAAC,aAAA;IAAGE,SAAS,EAAC;EAAkB,CAAE,CAC7B,CAAC;AAEjB,CAAC","ignoreList":[]}
+{"version":3,"names":["React","INSERT_UNORDERED_LIST_COMMAND","REMOVE_LIST_COMMAND","useRichTextEditor","$isListNode","useCurrentElement","BulletListAction","editor","element","theme","isList","isBullet","getListType","formatBulletList","styleId","getTypographyByTag","id","dispatchCommand","themeStyleId","undefined","createElement","onClick","className"],"sources":["BulletListAction.tsx"],"sourcesContent":["import React from \"react\";\nimport { INSERT_UNORDERED_LIST_COMMAND, REMOVE_LIST_COMMAND } from \"~/commands/index.js\";\nimport { useRichTextEditor } from \"~/hooks/useRichTextEditor.js\";\nimport type { ListNode } from \"@webiny/lexical-nodes\";\nimport { $isListNode } from \"@webiny/lexical-nodes\";\nimport { useCurrentElement } from \"~/hooks/useCurrentElement.js\";\n\nexport const BulletListAction = () => {\n    const { editor } = useRichTextEditor();\n    const { element } = useCurrentElement();\n    const { theme } = useRichTextEditor();\n    const isList = $isListNode(element);\n\n    const isBullet = isList && (element as ListNode).getListType() === \"bullet\";\n\n    const formatBulletList = () => {\n        if (!isBullet) {\n            const styleId = theme.getTypographyByTag(\"ul\")?.id;\n\n            // will update the active state in the useEffect\n            editor.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND, { themeStyleId: styleId });\n        } else {\n            editor.dispatchCommand(REMOVE_LIST_COMMAND, undefined);\n        }\n    };\n\n    return (\n        <button\n            onClick={() => formatBulletList()}\n            className={\"popup-item spaced \" + (isBullet ? \"active\" : \"\")}\n            aria-label=\"Format text as bullet list\"\n        >\n            <i className=\"icon bullet-list\" />\n        </button>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,6BAA6B,EAAEC,mBAAmB;AAC3D,SAASC,iBAAiB;AAE1B,SAASC,WAAW,QAAQ,uBAAuB;AACnD,SAASC,iBAAiB;AAE1B,OAAO,MAAMC,gBAAgB,GAAGA,CAAA,KAAM;EAClC,MAAM;IAAEC;EAAO,CAAC,GAAGJ,iBAAiB,CAAC,CAAC;EACtC,MAAM;IAAEK;EAAQ,CAAC,GAAGH,iBAAiB,CAAC,CAAC;EACvC,MAAM;IAAEI;EAAM,CAAC,GAAGN,iBAAiB,CAAC,CAAC;EACrC,MAAMO,MAAM,GAAGN,WAAW,CAACI,OAAO,CAAC;EAEnC,MAAMG,QAAQ,GAAGD,MAAM,IAAKF,OAAO,CAAcI,WAAW,CAAC,CAAC,KAAK,QAAQ;EAE3E,MAAMC,gBAAgB,GAAGA,CAAA,KAAM;IAC3B,IAAI,CAACF,QAAQ,EAAE;MACX,MAAMG,OAAO,GAAGL,KAAK,CAACM,kBAAkB,CAAC,IAAI,CAAC,EAAEC,EAAE;;MAElD;MACAT,MAAM,CAACU,eAAe,CAAChB,6BAA6B,EAAE;QAAEiB,YAAY,EAAEJ;MAAQ,CAAC,CAAC;IACpF,CAAC,MAAM;MACHP,MAAM,CAACU,eAAe,CAACf,mBAAmB,EAAEiB,SAAS,CAAC;IAC1D;EACJ,CAAC;EAED,oBACInB,KAAA,CAAAoB,aAAA;IACIC,OAAO,EAAEA,CAAA,KAAMR,gBAAgB,CAAC,CAAE;IAClCS,SAAS,EAAE,oBAAoB,IAAIX,QAAQ,GAAG,QAAQ,GAAG,EAAE,CAAE;IAC7D,cAAW;EAA4B,gBAEvCX,KAAA,CAAAoB,aAAA;IAAGE,SAAS,EAAC;EAAkB,CAAE,CAC7B,CAAC;AAEjB,CAAC","ignoreList":[]}

package/components/ToolbarActions/CodeHighlightAction.js

@@ -1,28 +1,23 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.CodeHighlightAction = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _lexical = require("lexical");
-var _useCurrentSelection2 = require("../../hooks/useCurrentSelection");
-var _hooks = require("../../hooks");
-var CodeHighlightAction = exports.CodeHighlightAction = function CodeHighlightAction() {
-  var _useRichTextEditor = (0, _hooks.useRichTextEditor)(),
-    editor = _useRichTextEditor.editor;
-  var _useCurrentSelection = (0, _useCurrentSelection2.useCurrentSelection)(),
-    rangeSelection = _useCurrentSelection.rangeSelection;
-  var isCodeSelected = rangeSelection ? rangeSelection.hasFormat("code") : false;
-  var handleClick = function handleClick() {
-    editor.dispatchCommand(_lexical.FORMAT_TEXT_COMMAND, "code");
+import React from "react";
+import { FORMAT_TEXT_COMMAND } from "lexical";
+import { useCurrentSelection } from "../../hooks/useCurrentSelection.js";
+import { useRichTextEditor } from "../../hooks/index.js";
+export const CodeHighlightAction = () => {
+  const {
+    editor
+  } = useRichTextEditor();
+  const {
+    rangeSelection
+  } = useCurrentSelection();
+  const isCodeSelected = rangeSelection ? rangeSelection.hasFormat("code") : false;
+  const handleClick = () => {
+    editor.dispatchCommand(FORMAT_TEXT_COMMAND, "code");
   };
-  return /*#__PURE__*/_react.default.createElement("button", {
+  return /*#__PURE__*/React.createElement("button", {
     onClick: handleClick,
     className: "popup-item spaced " + (isCodeSelected ? "active" : ""),
     "aria-label": "Text code highlight"
-  }, /*#__PURE__*/_react.default.createElement("i", {
+  }, /*#__PURE__*/React.createElement("i", {
     className: "format code"
   }));
 };

package/components/ToolbarActions/CodeHighlightAction.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_lexical","_useCurrentSelection2","_hooks","CodeHighlightAction","exports","_useRichTextEditor","useRichTextEditor","editor","_useCurrentSelection","useCurrentSelection","rangeSelection","isCodeSelected","hasFormat","handleClick","dispatchCommand","FORMAT_TEXT_COMMAND","default","createElement","onClick","className"],"sources":["CodeHighlightAction.tsx"],"sourcesContent":["import React from \"react\";\nimport { FORMAT_TEXT_COMMAND } from \"lexical\";\nimport { useCurrentSelection } from \"~/hooks/useCurrentSelection\";\nimport { useRichTextEditor } from \"~/hooks\";\n\nexport const CodeHighlightAction = () => {\n    const { editor } = useRichTextEditor();\n    const { rangeSelection } = useCurrentSelection();\n    const isCodeSelected = rangeSelection ? rangeSelection.hasFormat(\"code\") : false;\n\n    const handleClick = () => {\n        editor.dispatchCommand(FORMAT_TEXT_COMMAND, \"code\");\n    };\n\n    return (\n        <button\n            onClick={handleClick}\n            className={\"popup-item spaced \" + (isCodeSelected ? \"active\" : \"\")}\n            aria-label=\"Text code highlight\"\n        >\n            <i className=\"format code\" />\n        </button>\n    );\n};\n"],"mappings":";;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,QAAA,GAAAD,OAAA;AACA,IAAAE,qBAAA,GAAAF,OAAA;AACA,IAAAG,MAAA,GAAAH,OAAA;AAEO,IAAMI,mBAAmB,GAAAC,OAAA,CAAAD,mBAAA,GAAG,SAAtBA,mBAAmBA,CAAA,EAAS;EACrC,IAAAE,kBAAA,GAAmB,IAAAC,wBAAiB,EAAC,CAAC;IAA9BC,MAAM,GAAAF,kBAAA,CAANE,MAAM;EACd,IAAAC,oBAAA,GAA2B,IAAAC,yCAAmB,EAAC,CAAC;IAAxCC,cAAc,GAAAF,oBAAA,CAAdE,cAAc;EACtB,IAAMC,cAAc,GAAGD,cAAc,GAAGA,cAAc,CAACE,SAAS,CAAC,MAAM,CAAC,GAAG,KAAK;EAEhF,IAAMC,WAAW,GAAG,SAAdA,WAAWA,CAAA,EAAS;IACtBN,MAAM,CAACO,eAAe,CAACC,4BAAmB,EAAE,MAAM,CAAC;EACvD,CAAC;EAED,oBACIlB,MAAA,CAAAmB,OAAA,CAAAC,aAAA;IACIC,OAAO,EAAEL,WAAY;IACrBM,SAAS,EAAE,oBAAoB,IAAIR,cAAc,GAAG,QAAQ,GAAG,EAAE,CAAE;IACnE,cAAW;EAAqB,gBAEhCd,MAAA,CAAAmB,OAAA,CAAAC,aAAA;IAAGE,SAAS,EAAC;EAAa,CAAE,CACxB,CAAC;AAEjB,CAAC","ignoreList":[]}
+{"version":3,"names":["React","FORMAT_TEXT_COMMAND","useCurrentSelection","useRichTextEditor","CodeHighlightAction","editor","rangeSelection","isCodeSelected","hasFormat","handleClick","dispatchCommand","createElement","onClick","className"],"sources":["CodeHighlightAction.tsx"],"sourcesContent":["import React from \"react\";\nimport { FORMAT_TEXT_COMMAND } from \"lexical\";\nimport { useCurrentSelection } from \"~/hooks/useCurrentSelection.js\";\nimport { useRichTextEditor } from \"~/hooks/index.js\";\n\nexport const CodeHighlightAction = () => {\n    const { editor } = useRichTextEditor();\n    const { rangeSelection } = useCurrentSelection();\n    const isCodeSelected = rangeSelection ? rangeSelection.hasFormat(\"code\") : false;\n\n    const handleClick = () => {\n        editor.dispatchCommand(FORMAT_TEXT_COMMAND, \"code\");\n    };\n\n    return (\n        <button\n            onClick={handleClick}\n            className={\"popup-item spaced \" + (isCodeSelected ? \"active\" : \"\")}\n            aria-label=\"Text code highlight\"\n        >\n            <i className=\"format code\" />\n        </button>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,mBAAmB,QAAQ,SAAS;AAC7C,SAASC,mBAAmB;AAC5B,SAASC,iBAAiB;AAE1B,OAAO,MAAMC,mBAAmB,GAAGA,CAAA,KAAM;EACrC,MAAM;IAAEC;EAAO,CAAC,GAAGF,iBAAiB,CAAC,CAAC;EACtC,MAAM;IAAEG;EAAe,CAAC,GAAGJ,mBAAmB,CAAC,CAAC;EAChD,MAAMK,cAAc,GAAGD,cAAc,GAAGA,cAAc,CAACE,SAAS,CAAC,MAAM,CAAC,GAAG,KAAK;EAEhF,MAAMC,WAAW,GAAGA,CAAA,KAAM;IACtBJ,MAAM,CAACK,eAAe,CAACT,mBAAmB,EAAE,MAAM,CAAC;EACvD,CAAC;EAED,oBACID,KAAA,CAAAW,aAAA;IACIC,OAAO,EAAEH,WAAY;IACrBI,SAAS,EAAE,oBAAoB,IAAIN,cAAc,GAAG,QAAQ,GAAG,EAAE,CAAE;IACnE,cAAW;EAAqB,gBAEhCP,KAAA,CAAAW,aAAA;IAAGE,SAAS,EAAC;EAAa,CAAE,CACxB,CAAC;AAEjB,CAAC","ignoreList":[]}

package/components/ToolbarActions/FontColorAction.js

@@ -1,59 +1,49 @@
-"use strict";
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.FontColorPicker = exports.FontColorAction = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _reactComposition = require("@webiny/react-composition");
-var _FontColorActionContext = require("../../context/FontColorActionContext");
-var _lexicalNodes = require("@webiny/lexical-nodes");
-var _getSelectedNode = require("../../utils/getSelectedNode");
-var _useCurrentSelection = require("../../hooks/useCurrentSelection");
-var _hooks = require("../../hooks");
-var FontColorPicker = exports.FontColorPicker = (0, _reactComposition.makeDecoratable)("FontColorPicker", function () {
-  (0, _react.useEffect)(function () {
+import React, { useCallback, useEffect, useMemo } from "react";
+import { Compose, makeDecoratable } from "@webiny/react-composition";
+import { FontColorActionContext } from "../../context/FontColorActionContext.js";
+import { $isFontColorNode, ADD_FONT_COLOR_COMMAND, ThemeColorValue } from "@webiny/lexical-nodes";
+import { getSelectedNode } from "../../utils/getSelectedNode.js";
+import { useDeriveValueFromSelection } from "../../hooks/useCurrentSelection.js";
+import { useRichTextEditor } from "../../hooks/index.js";
+export const FontColorPicker = makeDecoratable("FontColorPicker", () => {
+  useEffect(() => {
     console.log("Default FontColorPicker, please add your own component");
   }, []);
   return null;
 });
-var FontActionColorPicker = function FontActionColorPicker(_ref) {
-  var element = _ref.element;
-  return /*#__PURE__*/_react.default.createElement(_reactComposition.Compose, {
+const FontActionColorPicker = ({
+  element
+}) => {
+  return /*#__PURE__*/React.createElement(Compose, {
     component: FontColorPicker,
-    with: function _with() {
-      return function () {
-        return element;
-      };
-    }
+    with: () => () => element
   });
 };
-var FontColorAction = exports.FontColorAction = function FontColorAction() {
-  var _useRichTextEditor = (0, _hooks.useRichTextEditor)(),
-    editor = _useRichTextEditor.editor;
-  var fontColor = (0, _useCurrentSelection.useDeriveValueFromSelection)(function (_ref2) {
-    var rangeSelection = _ref2.rangeSelection;
+export const FontColorAction = () => {
+  const {
+    editor
+  } = useRichTextEditor();
+  const fontColor = useDeriveValueFromSelection(({
+    rangeSelection
+  }) => {
     if (!rangeSelection) {
       return "#000";
     }
-    var node = (0, _getSelectedNode.getSelectedNode)(rangeSelection);
-    return (0, _lexicalNodes.$isFontColorNode)(node) ? node.getColorStyle().color : "#000";
+    const node = getSelectedNode(rangeSelection);
+    return $isFontColorNode(node) ? node.getColorStyle().color : "#000";
   });
-  var onFontColorSelect = (0, _react.useCallback)(function (colorValue, themeColorName) {
-    editor.dispatchCommand(_lexicalNodes.ADD_FONT_COLOR_COMMAND, {
-      color: new _lexicalNodes.ThemeColorValue(colorValue, themeColorName)
+  const onFontColorSelect = useCallback((colorValue, themeColorName) => {
+    editor.dispatchCommand(ADD_FONT_COLOR_COMMAND, {
+      color: new ThemeColorValue(colorValue, themeColorName)
     });
   }, []);
-  var context = (0, _react.useMemo)(function () {
-    return {
-      value: fontColor,
-      applyColor: onFontColorSelect
-    };
-  }, [onFontColorSelect, fontColor]);
-  return /*#__PURE__*/_react.default.createElement(_FontColorActionContext.FontColorActionContext.Provider, {
+  const context = useMemo(() => ({
+    value: fontColor,
+    applyColor: onFontColorSelect
+  }), [onFontColorSelect, fontColor]);
+  return /*#__PURE__*/React.createElement(FontColorActionContext.Provider, {
     value: context
-  }, /*#__PURE__*/_react.default.createElement(FontColorPicker, null));
+  }, /*#__PURE__*/React.createElement(FontColorPicker, null));
 };
 FontColorAction.ColorPicker = FontActionColorPicker;
 

package/components/ToolbarActions/FontColorAction.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_reactComposition","_FontColorActionContext","_lexicalNodes","_getSelectedNode","_useCurrentSelection","_hooks","FontColorPicker","exports","makeDecoratable","useEffect","console","log","FontActionColorPicker","_ref","element","default","createElement","Compose","component","with","_with","FontColorAction","_useRichTextEditor","useRichTextEditor","editor","fontColor","useDeriveValueFromSelection","_ref2","rangeSelection","node","getSelectedNode","$isFontColorNode","getColorStyle","color","onFontColorSelect","useCallback","colorValue","themeColorName","dispatchCommand","ADD_FONT_COLOR_COMMAND","ThemeColorValue","context","useMemo","value","applyColor","FontColorActionContext","Provider","ColorPicker"],"sources":["FontColorAction.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useMemo } from \"react\";\nimport { LexicalCommand } from \"lexical\";\nimport { Compose, makeDecoratable } from \"@webiny/react-composition\";\nimport { FontColorActionContext } from \"~/context/FontColorActionContext\";\nimport {\n    $isFontColorNode,\n    ADD_FONT_COLOR_COMMAND,\n    FontColorPayload,\n    ThemeColorValue\n} from \"@webiny/lexical-nodes\";\nimport { getSelectedNode } from \"~/utils/getSelectedNode\";\nimport { useDeriveValueFromSelection } from \"~/hooks/useCurrentSelection\";\nimport { useRichTextEditor } from \"~/hooks\";\n\nexport const FontColorPicker = makeDecoratable(\"FontColorPicker\", (): JSX.Element | null => {\n    useEffect(() => {\n        console.log(\"Default FontColorPicker, please add your own component\");\n    }, []);\n    return null;\n});\n\ninterface FontActionColorPicker {\n    element: JSX.Element;\n}\n\nconst FontActionColorPicker = ({ element }: FontActionColorPicker): JSX.Element => {\n    return <Compose component={FontColorPicker} with={() => () => element} />;\n};\n\nexport type FontColorAction = React.ComponentType<unknown> & {\n    ColorPicker: typeof FontActionColorPicker;\n};\n\nexport const FontColorAction: FontColorAction = () => {\n    const { editor } = useRichTextEditor();\n    const fontColor = useDeriveValueFromSelection(({ rangeSelection }) => {\n        if (!rangeSelection) {\n            return \"#000\";\n        }\n\n        const node = getSelectedNode(rangeSelection);\n        return $isFontColorNode(node) ? node.getColorStyle().color : \"#000\";\n    });\n\n    const onFontColorSelect = useCallback(\n        (colorValue: string, themeColorName: string | undefined) => {\n            editor.dispatchCommand<LexicalCommand<FontColorPayload>>(ADD_FONT_COLOR_COMMAND, {\n                color: new ThemeColorValue(colorValue, themeColorName)\n            });\n        },\n        []\n    );\n\n    const context = useMemo(\n        () => ({\n            value: fontColor,\n            applyColor: onFontColorSelect\n        }),\n        [onFontColorSelect, fontColor]\n    );\n\n    return (\n        <FontColorActionContext.Provider value={context}>\n            <FontColorPicker />\n        </FontColorActionContext.Provider>\n    );\n};\n\nFontColorAction.ColorPicker = FontActionColorPicker;\n"],"mappings":";;;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AAEA,IAAAC,iBAAA,GAAAD,OAAA;AACA,IAAAE,uBAAA,GAAAF,OAAA;AACA,IAAAG,aAAA,GAAAH,OAAA;AAMA,IAAAI,gBAAA,GAAAJ,OAAA;AACA,IAAAK,oBAAA,GAAAL,OAAA;AACA,IAAAM,MAAA,GAAAN,OAAA;AAEO,IAAMO,eAAe,GAAAC,OAAA,CAAAD,eAAA,GAAG,IAAAE,iCAAe,EAAC,iBAAiB,EAAE,YAA0B;EACxF,IAAAC,gBAAS,EAAC,YAAM;IACZC,OAAO,CAACC,GAAG,CAAC,wDAAwD,CAAC;EACzE,CAAC,EAAE,EAAE,CAAC;EACN,OAAO,IAAI;AACf,CAAC,CAAC;AAMF,IAAMC,qBAAqB,GAAG,SAAxBA,qBAAqBA,CAAAC,IAAA,EAAwD;EAAA,IAAlDC,OAAO,GAAAD,IAAA,CAAPC,OAAO;EACpC,oBAAOjB,MAAA,CAAAkB,OAAA,CAAAC,aAAA,CAAChB,iBAAA,CAAAiB,OAAO;IAACC,SAAS,EAAEZ,eAAgB;IAACa,IAAI,EAAE,SAANC,KAAIA,CAAA;MAAA,OAAQ;QAAA,OAAMN,OAAO;MAAA;IAAA;EAAC,CAAE,CAAC;AAC7E,CAAC;AAMM,IAAMO,eAAgC,GAAAd,OAAA,CAAAc,eAAA,GAAG,SAAnCA,eAAgCA,CAAA,EAAS;EAClD,IAAAC,kBAAA,GAAmB,IAAAC,wBAAiB,EAAC,CAAC;IAA9BC,MAAM,GAAAF,kBAAA,CAANE,MAAM;EACd,IAAMC,SAAS,GAAG,IAAAC,gDAA2B,EAAC,UAAAC,KAAA,EAAwB;IAAA,IAArBC,cAAc,GAAAD,KAAA,CAAdC,cAAc;IAC3D,IAAI,CAACA,cAAc,EAAE;MACjB,OAAO,MAAM;IACjB;IAEA,IAAMC,IAAI,GAAG,IAAAC,gCAAe,EAACF,cAAc,CAAC;IAC5C,OAAO,IAAAG,8BAAgB,EAACF,IAAI,CAAC,GAAGA,IAAI,CAACG,aAAa,CAAC,CAAC,CAACC,KAAK,GAAG,MAAM;EACvE,CAAC,CAAC;EAEF,IAAMC,iBAAiB,GAAG,IAAAC,kBAAW,EACjC,UAACC,UAAkB,EAAEC,cAAkC,EAAK;IACxDb,MAAM,CAACc,eAAe,CAAmCC,oCAAsB,EAAE;MAC7EN,KAAK,EAAE,IAAIO,6BAAe,CAACJ,UAAU,EAAEC,cAAc;IACzD,CAAC,CAAC;EACN,CAAC,EACD,EACJ,CAAC;EAED,IAAMI,OAAO,GAAG,IAAAC,cAAO,EACnB;IAAA,OAAO;MACHC,KAAK,EAAElB,SAAS;MAChBmB,UAAU,EAAEV;IAChB,CAAC;EAAA,CAAC,EACF,CAACA,iBAAiB,EAAET,SAAS,CACjC,CAAC;EAED,oBACI5B,MAAA,CAAAkB,OAAA,CAAAC,aAAA,CAACf,uBAAA,CAAA4C,sBAAsB,CAACC,QAAQ;IAACH,KAAK,EAAEF;EAAQ,gBAC5C5C,MAAA,CAAAkB,OAAA,CAAAC,aAAA,CAACV,eAAe,MAAE,CACW,CAAC;AAE1C,CAAC;AAEDe,eAAe,CAAC0B,WAAW,GAAGnC,qBAAqB","ignoreList":[]}
+{"version":3,"names":["React","useCallback","useEffect","useMemo","Compose","makeDecoratable","FontColorActionContext","$isFontColorNode","ADD_FONT_COLOR_COMMAND","ThemeColorValue","getSelectedNode","useDeriveValueFromSelection","useRichTextEditor","FontColorPicker","console","log","FontActionColorPicker","element","createElement","component","with","FontColorAction","editor","fontColor","rangeSelection","node","getColorStyle","color","onFontColorSelect","colorValue","themeColorName","dispatchCommand","context","value","applyColor","Provider","ColorPicker"],"sources":["FontColorAction.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useMemo } from \"react\";\nimport type { LexicalCommand } from \"lexical\";\nimport { Compose, makeDecoratable } from \"@webiny/react-composition\";\nimport { FontColorActionContext } from \"~/context/FontColorActionContext.js\";\nimport type { FontColorPayload } from \"@webiny/lexical-nodes\";\nimport { $isFontColorNode, ADD_FONT_COLOR_COMMAND, ThemeColorValue } from \"@webiny/lexical-nodes\";\nimport { getSelectedNode } from \"~/utils/getSelectedNode.js\";\nimport { useDeriveValueFromSelection } from \"~/hooks/useCurrentSelection.js\";\nimport { useRichTextEditor } from \"~/hooks/index.js\";\n\nexport const FontColorPicker = makeDecoratable(\"FontColorPicker\", (): JSX.Element | null => {\n    useEffect(() => {\n        console.log(\"Default FontColorPicker, please add your own component\");\n    }, []);\n    return null;\n});\n\ninterface FontActionColorPicker {\n    element: JSX.Element;\n}\n\nconst FontActionColorPicker = ({ element }: FontActionColorPicker): JSX.Element => {\n    return <Compose component={FontColorPicker} with={() => () => element} />;\n};\n\nexport type FontColorAction = React.ComponentType<unknown> & {\n    ColorPicker: typeof FontActionColorPicker;\n};\n\nexport const FontColorAction: FontColorAction = () => {\n    const { editor } = useRichTextEditor();\n    const fontColor = useDeriveValueFromSelection(({ rangeSelection }) => {\n        if (!rangeSelection) {\n            return \"#000\";\n        }\n\n        const node = getSelectedNode(rangeSelection);\n        return $isFontColorNode(node) ? node.getColorStyle().color : \"#000\";\n    });\n\n    const onFontColorSelect = useCallback(\n        (colorValue: string, themeColorName: string | undefined) => {\n            editor.dispatchCommand<LexicalCommand<FontColorPayload>>(ADD_FONT_COLOR_COMMAND, {\n                color: new ThemeColorValue(colorValue, themeColorName)\n            });\n        },\n        []\n    );\n\n    const context = useMemo(\n        () => ({\n            value: fontColor,\n            applyColor: onFontColorSelect\n        }),\n        [onFontColorSelect, fontColor]\n    );\n\n    return (\n        <FontColorActionContext.Provider value={context}>\n            <FontColorPicker />\n        </FontColorActionContext.Provider>\n    );\n};\n\nFontColorAction.ColorPicker = FontActionColorPicker;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,WAAW,EAAEC,SAAS,EAAEC,OAAO,QAAQ,OAAO;AAE9D,SAASC,OAAO,EAAEC,eAAe,QAAQ,2BAA2B;AACpE,SAASC,sBAAsB;AAE/B,SAASC,gBAAgB,EAAEC,sBAAsB,EAAEC,eAAe,QAAQ,uBAAuB;AACjG,SAASC,eAAe;AACxB,SAASC,2BAA2B;AACpC,SAASC,iBAAiB;AAE1B,OAAO,MAAMC,eAAe,GAAGR,eAAe,CAAC,iBAAiB,EAAE,MAA0B;EACxFH,SAAS,CAAC,MAAM;IACZY,OAAO,CAACC,GAAG,CAAC,wDAAwD,CAAC;EACzE,CAAC,EAAE,EAAE,CAAC;EACN,OAAO,IAAI;AACf,CAAC,CAAC;AAMF,MAAMC,qBAAqB,GAAGA,CAAC;EAAEC;AAA+B,CAAC,KAAkB;EAC/E,oBAAOjB,KAAA,CAAAkB,aAAA,CAACd,OAAO;IAACe,SAAS,EAAEN,eAAgB;IAACO,IAAI,EAAEA,CAAA,KAAM,MAAMH;EAAQ,CAAE,CAAC;AAC7E,CAAC;AAMD,OAAO,MAAMI,eAAgC,GAAGA,CAAA,KAAM;EAClD,MAAM;IAAEC;EAAO,CAAC,GAAGV,iBAAiB,CAAC,CAAC;EACtC,MAAMW,SAAS,GAAGZ,2BAA2B,CAAC,CAAC;IAAEa;EAAe,CAAC,KAAK;IAClE,IAAI,CAACA,cAAc,EAAE;MACjB,OAAO,MAAM;IACjB;IAEA,MAAMC,IAAI,GAAGf,eAAe,CAACc,cAAc,CAAC;IAC5C,OAAOjB,gBAAgB,CAACkB,IAAI,CAAC,GAAGA,IAAI,CAACC,aAAa,CAAC,CAAC,CAACC,KAAK,GAAG,MAAM;EACvE,CAAC,CAAC;EAEF,MAAMC,iBAAiB,GAAG3B,WAAW,CACjC,CAAC4B,UAAkB,EAAEC,cAAkC,KAAK;IACxDR,MAAM,CAACS,eAAe,CAAmCvB,sBAAsB,EAAE;MAC7EmB,KAAK,EAAE,IAAIlB,eAAe,CAACoB,UAAU,EAAEC,cAAc;IACzD,CAAC,CAAC;EACN,CAAC,EACD,EACJ,CAAC;EAED,MAAME,OAAO,GAAG7B,OAAO,CACnB,OAAO;IACH8B,KAAK,EAAEV,SAAS;IAChBW,UAAU,EAAEN;EAChB,CAAC,CAAC,EACF,CAACA,iBAAiB,EAAEL,SAAS,CACjC,CAAC;EAED,oBACIvB,KAAA,CAAAkB,aAAA,CAACZ,sBAAsB,CAAC6B,QAAQ;IAACF,KAAK,EAAED;EAAQ,gBAC5ChC,KAAA,CAAAkB,aAAA,CAACL,eAAe,MAAE,CACW,CAAC;AAE1C,CAAC;AAEDQ,eAAe,CAACe,WAAW,GAAGpB,qBAAqB","ignoreList":[]}

package/components/ToolbarActions/ImageAction.js

@@ -1,50 +1,35 @@
-"use strict";
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ImageAction = void 0;
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _react = _interopRequireWildcard(require("react"));
-var _useRichTextEditor2 = require("../../hooks/useRichTextEditor");
-var _files = require("../../utils/files");
-var _commands = require("../../commands");
-var ImageAction = exports.ImageAction = function ImageAction() {
-  var _useRichTextEditor = (0, _useRichTextEditor2.useRichTextEditor)(),
-    editor = _useRichTextEditor.editor,
-    toolbarActionPlugins = _useRichTextEditor.toolbarActionPlugins;
-  var _useState = (0, _react.useState)(),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    imageActionPlugin = _useState2[0],
-    setImageActionPlugin = _useState2[1];
-  (0, _react.useEffect)(function () {
+import React, { useEffect, useState } from "react";
+import { useRichTextEditor } from "../../hooks/useRichTextEditor.js";
+import { fileToImagePayload } from "../../utils/files.js";
+import { INSERT_IMAGE_COMMAND } from "../../commands/index.js";
+export const ImageAction = () => {
+  const {
+    editor,
+    toolbarActionPlugins
+  } = useRichTextEditor();
+  const [imageActionPlugin, setImageActionPlugin] = useState();
+  useEffect(() => {
     if (!!toolbarActionPlugins?.length) {
-      var actionPlugin = toolbarActionPlugins.find(function (action) {
-        return action.targetAction === "image-action";
-      });
+      const actionPlugin = toolbarActionPlugins.find(action => action.targetAction === "image-action");
       setImageActionPlugin(actionPlugin);
     }
   }, [toolbarActionPlugins]);
-  var handleClick = function handleClick() {
+  const handleClick = () => {
     if (typeof imageActionPlugin?.plugin === "function") {
-      var cb = function cb(data) {
-        var imagePayload = (0, _files.fileToImagePayload)(data);
+      const cb = data => {
+        const imagePayload = fileToImagePayload(data);
         if (imagePayload) {
-          editor.dispatchCommand(_commands.INSERT_IMAGE_COMMAND, imagePayload);
+          editor.dispatchCommand(INSERT_IMAGE_COMMAND, imagePayload);
         }
       };
       imageActionPlugin.plugin(cb);
     }
   };
-  return /*#__PURE__*/_react.default.createElement("button", {
-    onClick: function onClick() {
-      return handleClick();
-    },
+  return /*#__PURE__*/React.createElement("button", {
+    onClick: () => handleClick(),
     className: "popup-item",
     "aria-label": "Insert image"
-  }, /*#__PURE__*/_react.default.createElement("i", {
+  }, /*#__PURE__*/React.createElement("i", {
     className: "icon insert-image"
   }));
 };

package/components/ToolbarActions/ImageAction.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_useRichTextEditor2","_files","_commands","ImageAction","exports","_useRichTextEditor","useRichTextEditor","editor","toolbarActionPlugins","_useState","useState","_useState2","_slicedToArray2","default","imageActionPlugin","setImageActionPlugin","useEffect","length","actionPlugin","find","action","targetAction","handleClick","plugin","cb","data","imagePayload","fileToImagePayload","dispatchCommand","INSERT_IMAGE_COMMAND","createElement","onClick","className"],"sources":["ImageAction.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\nimport { LexicalCommand } from \"lexical\";\nimport { useRichTextEditor } from \"~/hooks/useRichTextEditor\";\nimport { FileManagerFileItem, fileToImagePayload } from \"~/utils/files\";\nimport { ImagePayload, INSERT_IMAGE_COMMAND } from \"~/commands\";\nimport { ToolbarActionPlugin } from \"~/types\";\n\nexport const ImageAction = () => {\n    const { editor, toolbarActionPlugins } = useRichTextEditor();\n    const [imageActionPlugin, setImageActionPlugin] = useState<ToolbarActionPlugin | undefined>();\n\n    useEffect(() => {\n        if (!!toolbarActionPlugins?.length) {\n            const actionPlugin = toolbarActionPlugins.find(\n                action => action.targetAction === \"image-action\"\n            );\n            setImageActionPlugin(actionPlugin);\n        }\n    }, [toolbarActionPlugins]);\n\n    const handleClick = () => {\n        if (typeof imageActionPlugin?.plugin === \"function\") {\n            const cb = (data: FileManagerFileItem) => {\n                const imagePayload = fileToImagePayload(data);\n                if (imagePayload) {\n                    editor.dispatchCommand<LexicalCommand<ImagePayload>>(\n                        INSERT_IMAGE_COMMAND,\n                        imagePayload\n                    );\n                }\n            };\n            imageActionPlugin.plugin(cb);\n        }\n    };\n\n    return (\n        <button onClick={() => handleClick()} className={\"popup-item\"} aria-label=\"Insert image\">\n            <i className=\"icon insert-image\" />\n        </button>\n    );\n};\n"],"mappings":";;;;;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AAEA,IAAAC,mBAAA,GAAAD,OAAA;AACA,IAAAE,MAAA,GAAAF,OAAA;AACA,IAAAG,SAAA,GAAAH,OAAA;AAGO,IAAMI,WAAW,GAAAC,OAAA,CAAAD,WAAA,GAAG,SAAdA,WAAWA,CAAA,EAAS;EAC7B,IAAAE,kBAAA,GAAyC,IAAAC,qCAAiB,EAAC,CAAC;IAApDC,MAAM,GAAAF,kBAAA,CAANE,MAAM;IAAEC,oBAAoB,GAAAH,kBAAA,CAApBG,oBAAoB;EACpC,IAAAC,SAAA,GAAkD,IAAAC,eAAQ,EAAkC,CAAC;IAAAC,UAAA,OAAAC,eAAA,CAAAC,OAAA,EAAAJ,SAAA;IAAtFK,iBAAiB,GAAAH,UAAA;IAAEI,oBAAoB,GAAAJ,UAAA;EAE9C,IAAAK,gBAAS,EAAC,YAAM;IACZ,IAAI,CAAC,CAACR,oBAAoB,EAAES,MAAM,EAAE;MAChC,IAAMC,YAAY,GAAGV,oBAAoB,CAACW,IAAI,CAC1C,UAAAC,MAAM;QAAA,OAAIA,MAAM,CAACC,YAAY,KAAK,cAAc;MAAA,CACpD,CAAC;MACDN,oBAAoB,CAACG,YAAY,CAAC;IACtC;EACJ,CAAC,EAAE,CAACV,oBAAoB,CAAC,CAAC;EAE1B,IAAMc,WAAW,GAAG,SAAdA,WAAWA,CAAA,EAAS;IACtB,IAAI,OAAOR,iBAAiB,EAAES,MAAM,KAAK,UAAU,EAAE;MACjD,IAAMC,EAAE,GAAG,SAALA,EAAEA,CAAIC,IAAyB,EAAK;QACtC,IAAMC,YAAY,GAAG,IAAAC,yBAAkB,EAACF,IAAI,CAAC;QAC7C,IAAIC,YAAY,EAAE;UACdnB,MAAM,CAACqB,eAAe,CAClBC,8BAAoB,EACpBH,YACJ,CAAC;QACL;MACJ,CAAC;MACDZ,iBAAiB,CAACS,MAAM,CAACC,EAAE,CAAC;IAChC;EACJ,CAAC;EAED,oBACI3B,MAAA,CAAAgB,OAAA,CAAAiB,aAAA;IAAQC,OAAO,EAAE,SAATA,OAAOA,CAAA;MAAA,OAAQT,WAAW,CAAC,CAAC;IAAA,CAAC;IAACU,SAAS,EAAE,YAAa;IAAC,cAAW;EAAc,gBACpFnC,MAAA,CAAAgB,OAAA,CAAAiB,aAAA;IAAGE,SAAS,EAAC;EAAmB,CAAE,CAC9B,CAAC;AAEjB,CAAC","ignoreList":[]}
+{"version":3,"names":["React","useEffect","useState","useRichTextEditor","fileToImagePayload","INSERT_IMAGE_COMMAND","ImageAction","editor","toolbarActionPlugins","imageActionPlugin","setImageActionPlugin","length","actionPlugin","find","action","targetAction","handleClick","plugin","cb","data","imagePayload","dispatchCommand","createElement","onClick","className"],"sources":["ImageAction.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\nimport type { LexicalCommand } from \"lexical\";\nimport { useRichTextEditor } from \"~/hooks/useRichTextEditor.js\";\nimport type { FileManagerFileItem } from \"~/utils/files.js\";\nimport { fileToImagePayload } from \"~/utils/files.js\";\nimport type { ImagePayload } from \"~/commands/index.js\";\nimport { INSERT_IMAGE_COMMAND } from \"~/commands/index.js\";\nimport type { ToolbarActionPlugin } from \"~/types.js\";\n\nexport const ImageAction = () => {\n    const { editor, toolbarActionPlugins } = useRichTextEditor();\n    const [imageActionPlugin, setImageActionPlugin] = useState<ToolbarActionPlugin | undefined>();\n\n    useEffect(() => {\n        if (!!toolbarActionPlugins?.length) {\n            const actionPlugin = toolbarActionPlugins.find(\n                action => action.targetAction === \"image-action\"\n            );\n            setImageActionPlugin(actionPlugin);\n        }\n    }, [toolbarActionPlugins]);\n\n    const handleClick = () => {\n        if (typeof imageActionPlugin?.plugin === \"function\") {\n            const cb = (data: FileManagerFileItem) => {\n                const imagePayload = fileToImagePayload(data);\n                if (imagePayload) {\n                    editor.dispatchCommand<LexicalCommand<ImagePayload>>(\n                        INSERT_IMAGE_COMMAND,\n                        imagePayload\n                    );\n                }\n            };\n            imageActionPlugin.plugin(cb);\n        }\n    };\n\n    return (\n        <button onClick={() => handleClick()} className={\"popup-item\"} aria-label=\"Insert image\">\n            <i className=\"icon insert-image\" />\n        </button>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,SAAS,EAAEC,QAAQ,QAAQ,OAAO;AAElD,SAASC,iBAAiB;AAE1B,SAASC,kBAAkB;AAE3B,SAASC,oBAAoB;AAG7B,OAAO,MAAMC,WAAW,GAAGA,CAAA,KAAM;EAC7B,MAAM;IAAEC,MAAM;IAAEC;EAAqB,CAAC,GAAGL,iBAAiB,CAAC,CAAC;EAC5D,MAAM,CAACM,iBAAiB,EAAEC,oBAAoB,CAAC,GAAGR,QAAQ,CAAkC,CAAC;EAE7FD,SAAS,CAAC,MAAM;IACZ,IAAI,CAAC,CAACO,oBAAoB,EAAEG,MAAM,EAAE;MAChC,MAAMC,YAAY,GAAGJ,oBAAoB,CAACK,IAAI,CAC1CC,MAAM,IAAIA,MAAM,CAACC,YAAY,KAAK,cACtC,CAAC;MACDL,oBAAoB,CAACE,YAAY,CAAC;IACtC;EACJ,CAAC,EAAE,CAACJ,oBAAoB,CAAC,CAAC;EAE1B,MAAMQ,WAAW,GAAGA,CAAA,KAAM;IACtB,IAAI,OAAOP,iBAAiB,EAAEQ,MAAM,KAAK,UAAU,EAAE;MACjD,MAAMC,EAAE,GAAIC,IAAyB,IAAK;QACtC,MAAMC,YAAY,GAAGhB,kBAAkB,CAACe,IAAI,CAAC;QAC7C,IAAIC,YAAY,EAAE;UACdb,MAAM,CAACc,eAAe,CAClBhB,oBAAoB,EACpBe,YACJ,CAAC;QACL;MACJ,CAAC;MACDX,iBAAiB,CAACQ,MAAM,CAACC,EAAE,CAAC;IAChC;EACJ,CAAC;EAED,oBACIlB,KAAA,CAAAsB,aAAA;IAAQC,OAAO,EAAEA,CAAA,KAAMP,WAAW,CAAC,CAAE;IAACQ,SAAS,EAAE,YAAa;IAAC,cAAW;EAAc,gBACpFxB,KAAA,CAAAsB,aAAA;IAAGE,SAAS,EAAC;EAAmB,CAAE,CAC9B,CAAC;AAEjB,CAAC","ignoreList":[]}

package/components/ToolbarActions/ItalicAction.js

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

package/components/ToolbarActions/ItalicAction.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_lexical","_useCurrentSelection2","_hooks","ItalicAction","exports","_useRichTextEditor","useRichTextEditor","editor","_useCurrentSelection","useCurrentSelection","rangeSelection","isItalicSelected","hasFormat","handleClick","dispatchCommand","FORMAT_TEXT_COMMAND","default","createElement","onClick","className"],"sources":["ItalicAction.tsx"],"sourcesContent":["import React from \"react\";\nimport { FORMAT_TEXT_COMMAND } from \"lexical\";\nimport { useCurrentSelection } from \"~/hooks/useCurrentSelection\";\nimport { useRichTextEditor } from \"~/hooks\";\n\nexport const ItalicAction = () => {\n    const { editor } = useRichTextEditor();\n    const { rangeSelection } = useCurrentSelection();\n    const isItalicSelected = rangeSelection ? rangeSelection.hasFormat(\"italic\") : false;\n\n    const handleClick = () => {\n        editor.dispatchCommand(FORMAT_TEXT_COMMAND, \"italic\");\n    };\n\n    return (\n        <button\n            onClick={handleClick}\n            className={\"popup-item spaced \" + (isItalicSelected ? \"active\" : \"\")}\n            aria-label=\"Format text as italic\"\n        >\n            <i className=\"format italic\" />\n        </button>\n    );\n};\n"],"mappings":";;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,QAAA,GAAAD,OAAA;AACA,IAAAE,qBAAA,GAAAF,OAAA;AACA,IAAAG,MAAA,GAAAH,OAAA;AAEO,IAAMI,YAAY,GAAAC,OAAA,CAAAD,YAAA,GAAG,SAAfA,YAAYA,CAAA,EAAS;EAC9B,IAAAE,kBAAA,GAAmB,IAAAC,wBAAiB,EAAC,CAAC;IAA9BC,MAAM,GAAAF,kBAAA,CAANE,MAAM;EACd,IAAAC,oBAAA,GAA2B,IAAAC,yCAAmB,EAAC,CAAC;IAAxCC,cAAc,GAAAF,oBAAA,CAAdE,cAAc;EACtB,IAAMC,gBAAgB,GAAGD,cAAc,GAAGA,cAAc,CAACE,SAAS,CAAC,QAAQ,CAAC,GAAG,KAAK;EAEpF,IAAMC,WAAW,GAAG,SAAdA,WAAWA,CAAA,EAAS;IACtBN,MAAM,CAACO,eAAe,CAACC,4BAAmB,EAAE,QAAQ,CAAC;EACzD,CAAC;EAED,oBACIlB,MAAA,CAAAmB,OAAA,CAAAC,aAAA;IACIC,OAAO,EAAEL,WAAY;IACrBM,SAAS,EAAE,oBAAoB,IAAIR,gBAAgB,GAAG,QAAQ,GAAG,EAAE,CAAE;IACrE,cAAW;EAAuB,gBAElCd,MAAA,CAAAmB,OAAA,CAAAC,aAAA;IAAGE,SAAS,EAAC;EAAe,CAAE,CAC1B,CAAC;AAEjB,CAAC","ignoreList":[]}
+{"version":3,"names":["React","FORMAT_TEXT_COMMAND","useCurrentSelection","useRichTextEditor","ItalicAction","editor","rangeSelection","isItalicSelected","hasFormat","handleClick","dispatchCommand","createElement","onClick","className"],"sources":["ItalicAction.tsx"],"sourcesContent":["import React from \"react\";\nimport { FORMAT_TEXT_COMMAND } from \"lexical\";\nimport { useCurrentSelection } from \"~/hooks/useCurrentSelection.js\";\nimport { useRichTextEditor } from \"~/hooks/index.js\";\n\nexport const ItalicAction = () => {\n    const { editor } = useRichTextEditor();\n    const { rangeSelection } = useCurrentSelection();\n    const isItalicSelected = rangeSelection ? rangeSelection.hasFormat(\"italic\") : false;\n\n    const handleClick = () => {\n        editor.dispatchCommand(FORMAT_TEXT_COMMAND, \"italic\");\n    };\n\n    return (\n        <button\n            onClick={handleClick}\n            className={\"popup-item spaced \" + (isItalicSelected ? \"active\" : \"\")}\n            aria-label=\"Format text as italic\"\n        >\n            <i className=\"format italic\" />\n        </button>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,mBAAmB,QAAQ,SAAS;AAC7C,SAASC,mBAAmB;AAC5B,SAASC,iBAAiB;AAE1B,OAAO,MAAMC,YAAY,GAAGA,CAAA,KAAM;EAC9B,MAAM;IAAEC;EAAO,CAAC,GAAGF,iBAAiB,CAAC,CAAC;EACtC,MAAM;IAAEG;EAAe,CAAC,GAAGJ,mBAAmB,CAAC,CAAC;EAChD,MAAMK,gBAAgB,GAAGD,cAAc,GAAGA,cAAc,CAACE,SAAS,CAAC,QAAQ,CAAC,GAAG,KAAK;EAEpF,MAAMC,WAAW,GAAGA,CAAA,KAAM;IACtBJ,MAAM,CAACK,eAAe,CAACT,mBAAmB,EAAE,QAAQ,CAAC;EACzD,CAAC;EAED,oBACID,KAAA,CAAAW,aAAA;IACIC,OAAO,EAAEH,WAAY;IACrBI,SAAS,EAAE,oBAAoB,IAAIN,gBAAgB,GAAG,QAAQ,GAAG,EAAE,CAAE;IACrE,cAAW;EAAuB,gBAElCP,KAAA,CAAAW,aAAA;IAAGE,SAAS,EAAC;EAAe,CAAE,CAC1B,CAAC;AAEjB,CAAC","ignoreList":[]}

package/components/ToolbarActions/LinkAction.js

@@ -1,40 +1,35 @@
-"use strict";
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.LinkAction = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _lexicalNodes = require("@webiny/lexical-nodes");
-var _useCurrentElement = require("../../hooks/useCurrentElement");
-var _useCurrentSelection = require("../../hooks/useCurrentSelection");
-var _hooks = require("../../hooks");
-var LinkAction = exports.LinkAction = function LinkAction() {
-  var _useRichTextEditor = (0, _hooks.useRichTextEditor)(),
-    editor = _useRichTextEditor.editor;
-  var isLink = (0, _useCurrentSelection.useDeriveValueFromSelection)(function (_ref) {
-    var rangeSelection = _ref.rangeSelection;
+import React, { useCallback } from "react";
+import { $isLinkNode, TOGGLE_LINK_COMMAND } from "@webiny/lexical-nodes";
+import { getNodeFromSelection } from "../../hooks/useCurrentElement.js";
+import { useDeriveValueFromSelection } from "../../hooks/useCurrentSelection.js";
+import { useRichTextEditor } from "../../hooks/index.js";
+export const LinkAction = () => {
+  const {
+    editor
+  } = useRichTextEditor();
+  const isLink = useDeriveValueFromSelection(({
+    rangeSelection
+  }) => {
     if (!rangeSelection) {
       return false;
     }
-    var node = (0, _useCurrentElement.getNodeFromSelection)(rangeSelection);
-    return node ? (0, _lexicalNodes.$isLinkNode)(node) || (0, _lexicalNodes.$isLinkNode)(node.getParent()) : false;
+    const node = getNodeFromSelection(rangeSelection);
+    return node ? $isLinkNode(node) || $isLinkNode(node.getParent()) : false;
   });
-  var insertLink = (0, _react.useCallback)(function () {
+  const insertLink = useCallback(() => {
     if (!isLink) {
-      editor.dispatchCommand(_lexicalNodes.TOGGLE_LINK_COMMAND, {
+      editor.dispatchCommand(TOGGLE_LINK_COMMAND, {
         url: "https://"
       });
     } else {
-      editor.dispatchCommand(_lexicalNodes.TOGGLE_LINK_COMMAND, null);
+      editor.dispatchCommand(TOGGLE_LINK_COMMAND, null);
     }
   }, [editor, isLink]);
-  return /*#__PURE__*/_react.default.createElement("button", {
+  return /*#__PURE__*/React.createElement("button", {
     onClick: insertLink,
     className: "popup-item spaced " + (isLink ? "active" : ""),
     "aria-label": "Insert link"
-  }, /*#__PURE__*/_react.default.createElement("i", {
+  }, /*#__PURE__*/React.createElement("i", {
     className: "format link"
   }));
 };

package/components/ToolbarActions/LinkAction.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_lexicalNodes","_useCurrentElement","_useCurrentSelection","_hooks","LinkAction","exports","_useRichTextEditor","useRichTextEditor","editor","isLink","useDeriveValueFromSelection","_ref","rangeSelection","node","getNodeFromSelection","$isLinkNode","getParent","insertLink","useCallback","dispatchCommand","TOGGLE_LINK_COMMAND","url","default","createElement","onClick","className"],"sources":["LinkAction.tsx"],"sourcesContent":["import React, { useCallback } from \"react\";\nimport { $isLinkNode, TOGGLE_LINK_COMMAND } from \"@webiny/lexical-nodes\";\nimport { getNodeFromSelection } from \"~/hooks/useCurrentElement\";\nimport { useDeriveValueFromSelection } from \"~/hooks/useCurrentSelection\";\nimport { useRichTextEditor } from \"~/hooks\";\n\nexport const LinkAction = () => {\n    const { editor } = useRichTextEditor();\n    const isLink = useDeriveValueFromSelection(({ rangeSelection }) => {\n        if (!rangeSelection) {\n            return false;\n        }\n        const node = getNodeFromSelection(rangeSelection);\n        return node ? $isLinkNode(node) || $isLinkNode(node.getParent()) : false;\n    });\n\n    const insertLink = useCallback(() => {\n        if (!isLink) {\n            editor.dispatchCommand(TOGGLE_LINK_COMMAND, { url: \"https://\" });\n        } else {\n            editor.dispatchCommand(TOGGLE_LINK_COMMAND, null);\n        }\n    }, [editor, isLink]);\n\n    return (\n        <button\n            onClick={insertLink}\n            className={\"popup-item spaced \" + (isLink ? \"active\" : \"\")}\n            aria-label=\"Insert link\"\n        >\n            <i className=\"format link\" />\n        </button>\n    );\n};\n"],"mappings":";;;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,aAAA,GAAAD,OAAA;AACA,IAAAE,kBAAA,GAAAF,OAAA;AACA,IAAAG,oBAAA,GAAAH,OAAA;AACA,IAAAI,MAAA,GAAAJ,OAAA;AAEO,IAAMK,UAAU,GAAAC,OAAA,CAAAD,UAAA,GAAG,SAAbA,UAAUA,CAAA,EAAS;EAC5B,IAAAE,kBAAA,GAAmB,IAAAC,wBAAiB,EAAC,CAAC;IAA9BC,MAAM,GAAAF,kBAAA,CAANE,MAAM;EACd,IAAMC,MAAM,GAAG,IAAAC,gDAA2B,EAAC,UAAAC,IAAA,EAAwB;IAAA,IAArBC,cAAc,GAAAD,IAAA,CAAdC,cAAc;IACxD,IAAI,CAACA,cAAc,EAAE;MACjB,OAAO,KAAK;IAChB;IACA,IAAMC,IAAI,GAAG,IAAAC,uCAAoB,EAACF,cAAc,CAAC;IACjD,OAAOC,IAAI,GAAG,IAAAE,yBAAW,EAACF,IAAI,CAAC,IAAI,IAAAE,yBAAW,EAACF,IAAI,CAACG,SAAS,CAAC,CAAC,CAAC,GAAG,KAAK;EAC5E,CAAC,CAAC;EAEF,IAAMC,UAAU,GAAG,IAAAC,kBAAW,EAAC,YAAM;IACjC,IAAI,CAACT,MAAM,EAAE;MACTD,MAAM,CAACW,eAAe,CAACC,iCAAmB,EAAE;QAAEC,GAAG,EAAE;MAAW,CAAC,CAAC;IACpE,CAAC,MAAM;MACHb,MAAM,CAACW,eAAe,CAACC,iCAAmB,EAAE,IAAI,CAAC;IACrD;EACJ,CAAC,EAAE,CAACZ,MAAM,EAAEC,MAAM,CAAC,CAAC;EAEpB,oBACIZ,MAAA,CAAAyB,OAAA,CAAAC,aAAA;IACIC,OAAO,EAAEP,UAAW;IACpBQ,SAAS,EAAE,oBAAoB,IAAIhB,MAAM,GAAG,QAAQ,GAAG,EAAE,CAAE;IAC3D,cAAW;EAAa,gBAExBZ,MAAA,CAAAyB,OAAA,CAAAC,aAAA;IAAGE,SAAS,EAAC;EAAa,CAAE,CACxB,CAAC;AAEjB,CAAC","ignoreList":[]}
+{"version":3,"names":["React","useCallback","$isLinkNode","TOGGLE_LINK_COMMAND","getNodeFromSelection","useDeriveValueFromSelection","useRichTextEditor","LinkAction","editor","isLink","rangeSelection","node","getParent","insertLink","dispatchCommand","url","createElement","onClick","className"],"sources":["LinkAction.tsx"],"sourcesContent":["import React, { useCallback } from \"react\";\nimport { $isLinkNode, TOGGLE_LINK_COMMAND } from \"@webiny/lexical-nodes\";\nimport { getNodeFromSelection } from \"~/hooks/useCurrentElement.js\";\nimport { useDeriveValueFromSelection } from \"~/hooks/useCurrentSelection.js\";\nimport { useRichTextEditor } from \"~/hooks/index.js\";\n\nexport const LinkAction = () => {\n    const { editor } = useRichTextEditor();\n    const isLink = useDeriveValueFromSelection(({ rangeSelection }) => {\n        if (!rangeSelection) {\n            return false;\n        }\n        const node = getNodeFromSelection(rangeSelection);\n        return node ? $isLinkNode(node) || $isLinkNode(node.getParent()) : false;\n    });\n\n    const insertLink = useCallback(() => {\n        if (!isLink) {\n            editor.dispatchCommand(TOGGLE_LINK_COMMAND, { url: \"https://\" });\n        } else {\n            editor.dispatchCommand(TOGGLE_LINK_COMMAND, null);\n        }\n    }, [editor, isLink]);\n\n    return (\n        <button\n            onClick={insertLink}\n            className={\"popup-item spaced \" + (isLink ? \"active\" : \"\")}\n            aria-label=\"Insert link\"\n        >\n            <i className=\"format link\" />\n        </button>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,WAAW,QAAQ,OAAO;AAC1C,SAASC,WAAW,EAAEC,mBAAmB,QAAQ,uBAAuB;AACxE,SAASC,oBAAoB;AAC7B,SAASC,2BAA2B;AACpC,SAASC,iBAAiB;AAE1B,OAAO,MAAMC,UAAU,GAAGA,CAAA,KAAM;EAC5B,MAAM;IAAEC;EAAO,CAAC,GAAGF,iBAAiB,CAAC,CAAC;EACtC,MAAMG,MAAM,GAAGJ,2BAA2B,CAAC,CAAC;IAAEK;EAAe,CAAC,KAAK;IAC/D,IAAI,CAACA,cAAc,EAAE;MACjB,OAAO,KAAK;IAChB;IACA,MAAMC,IAAI,GAAGP,oBAAoB,CAACM,cAAc,CAAC;IACjD,OAAOC,IAAI,GAAGT,WAAW,CAACS,IAAI,CAAC,IAAIT,WAAW,CAACS,IAAI,CAACC,SAAS,CAAC,CAAC,CAAC,GAAG,KAAK;EAC5E,CAAC,CAAC;EAEF,MAAMC,UAAU,GAAGZ,WAAW,CAAC,MAAM;IACjC,IAAI,CAACQ,MAAM,EAAE;MACTD,MAAM,CAACM,eAAe,CAACX,mBAAmB,EAAE;QAAEY,GAAG,EAAE;MAAW,CAAC,CAAC;IACpE,CAAC,MAAM;MACHP,MAAM,CAACM,eAAe,CAACX,mBAAmB,EAAE,IAAI,CAAC;IACrD;EACJ,CAAC,EAAE,CAACK,MAAM,EAAEC,MAAM,CAAC,CAAC;EAEpB,oBACIT,KAAA,CAAAgB,aAAA;IACIC,OAAO,EAAEJ,UAAW;IACpBK,SAAS,EAAE,oBAAoB,IAAIT,MAAM,GAAG,QAAQ,GAAG,EAAE,CAAE;IAC3D,cAAW;EAAa,gBAExBT,KAAA,CAAAgB,aAAA;IAAGE,SAAS,EAAC;EAAa,CAAE,CACxB,CAAC;AAEjB,CAAC","ignoreList":[]}