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

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\";\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,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";
+import { $isFontColorNode, ADD_FONT_COLOR_COMMAND, ThemeColorValue } from "@webiny/lexical-nodes";
+import { getSelectedNode } from "../../utils/getSelectedNode";
+import { useDeriveValueFromSelection } from "../../hooks/useCurrentSelection";
+import { useRichTextEditor } from "../../hooks";
+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 { 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,OAAOA,KAAK,IAAIC,WAAW,EAAEC,SAAS,EAAEC,OAAO,QAAQ,OAAO;AAE9D,SAASC,OAAO,EAAEC,eAAe,QAAQ,2BAA2B;AACpE,SAASC,sBAAsB;AAC/B,SACIC,gBAAgB,EAChBC,sBAAsB,EAEtBC,eAAe,QACZ,uBAAuB;AAC9B,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/FontSizeAction.js

@@ -1,29 +1,17 @@
-"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.FontSizeAction = exports.FONT_SIZES_FALLBACK = void 0;
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _react = _interopRequireWildcard(require("react"));
-var _selection = require("@lexical/selection");
-var _utils = require("@lexical/utils");
-var _lexical = require("lexical");
-var _DropDown = require("../../ui/DropDown");
-var _useCurrentSelection = require("../../hooks/useCurrentSelection");
-var _hooks = require("../../hooks");
-var FONT_SIZES_FALLBACK = exports.FONT_SIZES_FALLBACK = ["8px", "9px", "10px", "11px", "12px", "14px", "15px", "16px", "18px", "21px", "24px", "30px", "36px", "48px", "60px", "72px", "96px"].map(function (size) {
-  return {
-    id: size,
-    name: size,
-    value: size,
-    default: size === "15px"
-  };
-});
-var emptyOption = {
+import React, { useCallback, useEffect, useState } from "react";
+import { $getSelectionStyleValueForProperty, $patchStyleText } from "@lexical/selection";
+import { mergeRegister } from "@lexical/utils";
+import { $getSelection, $isRangeSelection } from "lexical";
+import { DropDown, DropDownItem } from "../../ui/DropDown";
+import { useDeriveValueFromSelection } from "../../hooks/useCurrentSelection";
+import { useRichTextEditor } from "../../hooks";
+export const FONT_SIZES_FALLBACK = ["8px", "9px", "10px", "11px", "12px", "14px", "15px", "16px", "18px", "21px", "24px", "30px", "36px", "48px", "60px", "72px", "96px"].map(size => ({
+  id: size,
+  name: size,
+  value: size,
+  default: size === "15px"
+}));
+const emptyOption = {
   value: "",
   name: "Font Size",
   id: "empty"
@@ -35,75 +23,69 @@ function dropDownActiveClass(active) {
   return "";
 }
 function FontSizeDropDown(props) {
-  var editor = props.editor,
-    value = props.value,
-    fontSizes = props.fontSizes,
-    _props$disabled = props.disabled,
-    disabled = _props$disabled === void 0 ? false : _props$disabled;
-  var handleClick = (0, _react.useCallback)(function (option) {
-    editor.update(function () {
-      var selection = (0, _lexical.$getSelection)();
-      if ((0, _lexical.$isRangeSelection)(selection)) {
-        (0, _selection.$patchStyleText)(selection, (0, _defineProperty2.default)({}, "font-size", option.value));
+  const {
+    editor,
+    value,
+    fontSizes,
+    disabled = false
+  } = props;
+  const handleClick = useCallback(option => {
+    editor.update(() => {
+      const selection = $getSelection();
+      if ($isRangeSelection(selection)) {
+        $patchStyleText(selection, {
+          ["font-size"]: option.value
+        });
       }
     });
   }, [editor]);
-  var selectedOption = fontSizes.find(function (opt) {
-    return opt.value === value;
-  }) ?? emptyOption;
-  return /*#__PURE__*/_react.default.createElement(_DropDown.DropDown, {
+  const selectedOption = fontSizes.find(opt => opt.value === value) ?? emptyOption;
+  return /*#__PURE__*/React.createElement(DropDown, {
     disabled: disabled,
     buttonClassName: "toolbar-item font-size",
     buttonLabel: selectedOption.name,
     buttonAriaLabel: "Formatting options for font size"
-  }, fontSizes.map(function (option) {
-    return /*#__PURE__*/_react.default.createElement(_DropDown.DropDownItem, {
-      className: "item fontsize-item ".concat(dropDownActiveClass(value === option.id)),
-      onClick: function onClick() {
-        return handleClick(option);
-      },
-      key: option.id
-    }, /*#__PURE__*/_react.default.createElement("span", {
-      className: "text"
-    }, option.name));
-  }));
+  }, fontSizes.map(option => /*#__PURE__*/React.createElement(DropDownItem, {
+    className: `item fontsize-item ${dropDownActiveClass(value === option.id)}`,
+    onClick: () => handleClick(option),
+    key: option.id
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "text"
+  }, option.name))));
 }
-var FontSize = function FontSize(_ref) {
-  var _ref$fontSizes = _ref.fontSizes,
-    fontSizes = _ref$fontSizes === void 0 ? FONT_SIZES_FALLBACK : _ref$fontSizes;
-  var _useRichTextEditor = (0, _hooks.useRichTextEditor)(),
-    editor = _useRichTextEditor.editor;
-  var _useState = (0, _react.useState)(function () {
-      return editor.isEditable();
-    }),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    isEditable = _useState2[0],
-    setIsEditable = _useState2[1];
-  var fontSize = (0, _useCurrentSelection.useDeriveValueFromSelection)(function (_ref2) {
-    var rangeSelection = _ref2.rangeSelection;
+const FontSize = ({
+  fontSizes = FONT_SIZES_FALLBACK
+}) => {
+  const {
+    editor
+  } = useRichTextEditor();
+  const [isEditable, setIsEditable] = useState(() => editor.isEditable());
+  const fontSize = useDeriveValueFromSelection(({
+    rangeSelection
+  }) => {
     if (!rangeSelection) {
       return undefined;
     }
     try {
-      return (0, _selection.$getSelectionStyleValueForProperty)(rangeSelection, "font-size");
-    } catch (_unused) {
+      return $getSelectionStyleValueForProperty(rangeSelection, "font-size");
+    } catch {
       return undefined;
     }
   });
-  (0, _react.useEffect)(function () {
-    return (0, _utils.mergeRegister)(editor.registerEditableListener(function (editable) {
+  useEffect(() => {
+    return mergeRegister(editor.registerEditableListener(editable => {
       setIsEditable(editable);
     }));
   }, [editor]);
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(FontSizeDropDown, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FontSizeDropDown, {
     disabled: !isEditable,
     value: fontSize,
     editor: editor,
     fontSizes: fontSizes
   }));
 };
-var FontSizeAction = exports.FontSizeAction = Object.assign(FontSize, {
-  FONT_SIZES_FALLBACK: FONT_SIZES_FALLBACK
+export const FontSizeAction = Object.assign(FontSize, {
+  FONT_SIZES_FALLBACK
 });
 
 //# sourceMappingURL=FontSizeAction.js.map

package/components/ToolbarActions/FontSizeAction.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_selection","_utils","_lexical","_DropDown","_useCurrentSelection","_hooks","FONT_SIZES_FALLBACK","exports","map","size","id","name","value","default","emptyOption","dropDownActiveClass","active","FontSizeDropDown","props","editor","fontSizes","_props$disabled","disabled","handleClick","useCallback","option","update","selection","$getSelection","$isRangeSelection","$patchStyleText","_defineProperty2","selectedOption","find","opt","createElement","DropDown","buttonClassName","buttonLabel","buttonAriaLabel","DropDownItem","className","concat","onClick","key","FontSize","_ref","_ref$fontSizes","_useRichTextEditor","useRichTextEditor","_useState","useState","isEditable","_useState2","_slicedToArray2","setIsEditable","fontSize","useDeriveValueFromSelection","_ref2","rangeSelection","undefined","$getSelectionStyleValueForProperty","_unused","useEffect","mergeRegister","registerEditableListener","editable","Fragment","FontSizeAction","Object","assign"],"sources":["FontSizeAction.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useState } from \"react\";\nimport { $getSelectionStyleValueForProperty, $patchStyleText } from \"@lexical/selection\";\nimport { mergeRegister } from \"@lexical/utils\";\nimport { $getSelection, $isRangeSelection, LexicalEditor } from \"lexical\";\nimport { DropDown, DropDownItem } from \"~/ui/DropDown\";\nimport { useDeriveValueFromSelection } from \"~/hooks/useCurrentSelection\";\nimport { useRichTextEditor } from \"~/hooks\";\n\nexport interface FontSize {\n    id: string;\n    name: string;\n    value: string;\n}\n\nexport const FONT_SIZES_FALLBACK: FontSize[] = [\n    \"8px\",\n    \"9px\",\n    \"10px\",\n    \"11px\",\n    \"12px\",\n    \"14px\",\n    \"15px\",\n    \"16px\",\n    \"18px\",\n    \"21px\",\n    \"24px\",\n    \"30px\",\n    \"36px\",\n    \"48px\",\n    \"60px\",\n    \"72px\",\n    \"96px\"\n].map(size => ({\n    id: size,\n    name: size,\n    value: size,\n    default: size === \"15px\"\n}));\n\nconst emptyOption: FontSize = {\n    value: \"\",\n    name: \"Font Size\",\n    id: \"empty\"\n};\n\nfunction dropDownActiveClass(active: boolean) {\n    if (active) {\n        return \"active dropdown-item-active\";\n    }\n    return \"\";\n}\n\ninterface FontSizeDropDownProps {\n    fontSizes: FontSize[];\n    editor: LexicalEditor;\n    value: string | undefined;\n    disabled?: boolean;\n}\n\nfunction FontSizeDropDown(props: FontSizeDropDownProps): JSX.Element {\n    const { editor, value, fontSizes, disabled = false } = props;\n\n    const handleClick = useCallback(\n        (option: FontSize) => {\n            editor.update(() => {\n                const selection = $getSelection();\n                if ($isRangeSelection(selection)) {\n                    $patchStyleText(selection, {\n                        [\"font-size\"]: option.value\n                    });\n                }\n            });\n        },\n        [editor]\n    );\n\n    const selectedOption = fontSizes.find(opt => opt.value === value) ?? emptyOption;\n\n    return (\n        <DropDown\n            disabled={disabled}\n            buttonClassName=\"toolbar-item font-size\"\n            buttonLabel={selectedOption.name}\n            buttonAriaLabel={\"Formatting options for font size\"}\n        >\n            {fontSizes.map(option => (\n                <DropDownItem\n                    className={`item fontsize-item ${dropDownActiveClass(value === option.id)}`}\n                    onClick={() => handleClick(option)}\n                    key={option.id}\n                >\n                    <span className=\"text\">{option.name}</span>\n                </DropDownItem>\n            ))}\n        </DropDown>\n    );\n}\n\ninterface FontSizeActionProps {\n    fontSizes?: FontSize[];\n}\n\nconst FontSize = ({ fontSizes = FONT_SIZES_FALLBACK }: FontSizeActionProps) => {\n    const { editor } = useRichTextEditor();\n    const [isEditable, setIsEditable] = useState(() => editor.isEditable());\n    const fontSize = useDeriveValueFromSelection(({ rangeSelection }) => {\n        if (!rangeSelection) {\n            return undefined;\n        }\n        try {\n            return $getSelectionStyleValueForProperty(rangeSelection, \"font-size\");\n        } catch {\n            return undefined;\n        }\n    });\n\n    useEffect(() => {\n        return mergeRegister(\n            editor.registerEditableListener(editable => {\n                setIsEditable(editable);\n            })\n        );\n    }, [editor]);\n\n    return (\n        <>\n            <FontSizeDropDown\n                disabled={!isEditable}\n                value={fontSize}\n                editor={editor}\n                fontSizes={fontSizes}\n            />\n        </>\n    );\n};\n\nexport const FontSizeAction = Object.assign(FontSize, { FONT_SIZES_FALLBACK });\n"],"mappings":";;;;;;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,UAAA,GAAAD,OAAA;AACA,IAAAE,MAAA,GAAAF,OAAA;AACA,IAAAG,QAAA,GAAAH,OAAA;AACA,IAAAI,SAAA,GAAAJ,OAAA;AACA,IAAAK,oBAAA,GAAAL,OAAA;AACA,IAAAM,MAAA,GAAAN,OAAA;AAQO,IAAMO,mBAA+B,GAAAC,OAAA,CAAAD,mBAAA,GAAG,CAC3C,KAAK,EACL,KAAK,EACL,MAAM,EACN,MAAM,EACN,MAAM,EACN,MAAM,EACN,MAAM,EACN,MAAM,EACN,MAAM,EACN,MAAM,EACN,MAAM,EACN,MAAM,EACN,MAAM,EACN,MAAM,EACN,MAAM,EACN,MAAM,EACN,MAAM,CACT,CAACE,GAAG,CAAC,UAAAC,IAAI;EAAA,OAAK;IACXC,EAAE,EAAED,IAAI;IACRE,IAAI,EAAEF,IAAI;IACVG,KAAK,EAAEH,IAAI;IACXI,OAAO,EAAEJ,IAAI,KAAK;EACtB,CAAC;AAAA,CAAC,CAAC;AAEH,IAAMK,WAAqB,GAAG;EAC1BF,KAAK,EAAE,EAAE;EACTD,IAAI,EAAE,WAAW;EACjBD,EAAE,EAAE;AACR,CAAC;AAED,SAASK,mBAAmBA,CAACC,MAAe,EAAE;EAC1C,IAAIA,MAAM,EAAE;IACR,OAAO,6BAA6B;EACxC;EACA,OAAO,EAAE;AACb;AASA,SAASC,gBAAgBA,CAACC,KAA4B,EAAe;EACjE,IAAQC,MAAM,GAAyCD,KAAK,CAApDC,MAAM;IAAEP,KAAK,GAAkCM,KAAK,CAA5CN,KAAK;IAAEQ,SAAS,GAAuBF,KAAK,CAArCE,SAAS;IAAAC,eAAA,GAAuBH,KAAK,CAA1BI,QAAQ;IAARA,QAAQ,GAAAD,eAAA,cAAG,KAAK,GAAAA,eAAA;EAElD,IAAME,WAAW,GAAG,IAAAC,kBAAW,EAC3B,UAACC,MAAgB,EAAK;IAClBN,MAAM,CAACO,MAAM,CAAC,YAAM;MAChB,IAAMC,SAAS,GAAG,IAAAC,sBAAa,EAAC,CAAC;MACjC,IAAI,IAAAC,0BAAiB,EAACF,SAAS,CAAC,EAAE;QAC9B,IAAAG,0BAAe,EAACH,SAAS,MAAAI,gBAAA,CAAAlB,OAAA,MACpB,WAAW,EAAGY,MAAM,CAACb,KAAK,CAC9B,CAAC;MACN;IACJ,CAAC,CAAC;EACN,CAAC,EACD,CAACO,MAAM,CACX,CAAC;EAED,IAAMa,cAAc,GAAGZ,SAAS,CAACa,IAAI,CAAC,UAAAC,GAAG;IAAA,OAAIA,GAAG,CAACtB,KAAK,KAAKA,KAAK;EAAA,EAAC,IAAIE,WAAW;EAEhF,oBACIjB,MAAA,CAAAgB,OAAA,CAAAsB,aAAA,CAAChC,SAAA,CAAAiC,QAAQ;IACLd,QAAQ,EAAEA,QAAS;IACnBe,eAAe,EAAC,wBAAwB;IACxCC,WAAW,EAAEN,cAAc,CAACrB,IAAK;IACjC4B,eAAe,EAAE;EAAmC,GAEnDnB,SAAS,CAACZ,GAAG,CAAC,UAAAiB,MAAM;IAAA,oBACjB5B,MAAA,CAAAgB,OAAA,CAAAsB,aAAA,CAAChC,SAAA,CAAAqC,YAAY;MACTC,SAAS,wBAAAC,MAAA,CAAwB3B,mBAAmB,CAACH,KAAK,KAAKa,MAAM,CAACf,EAAE,CAAC,CAAG;MAC5EiC,OAAO,EAAE,SAATA,OAAOA,CAAA;QAAA,OAAQpB,WAAW,CAACE,MAAM,CAAC;MAAA,CAAC;MACnCmB,GAAG,EAAEnB,MAAM,CAACf;IAAG,gBAEfb,MAAA,CAAAgB,OAAA,CAAAsB,aAAA;MAAMM,SAAS,EAAC;IAAM,GAAEhB,MAAM,CAACd,IAAW,CAChC,CAAC;EAAA,CAClB,CACK,CAAC;AAEnB;AAMA,IAAMkC,QAAQ,GAAG,SAAXA,QAAQA,CAAAC,IAAA,EAAiE;EAAA,IAAAC,cAAA,GAAAD,IAAA,CAA3D1B,SAAS;IAATA,SAAS,GAAA2B,cAAA,cAAGzC,mBAAmB,GAAAyC,cAAA;EAC/C,IAAAC,kBAAA,GAAmB,IAAAC,wBAAiB,EAAC,CAAC;IAA9B9B,MAAM,GAAA6B,kBAAA,CAAN7B,MAAM;EACd,IAAA+B,SAAA,GAAoC,IAAAC,eAAQ,EAAC;MAAA,OAAMhC,MAAM,CAACiC,UAAU,CAAC,CAAC;IAAA,EAAC;IAAAC,UAAA,OAAAC,eAAA,CAAAzC,OAAA,EAAAqC,SAAA;IAAhEE,UAAU,GAAAC,UAAA;IAAEE,aAAa,GAAAF,UAAA;EAChC,IAAMG,QAAQ,GAAG,IAAAC,gDAA2B,EAAC,UAAAC,KAAA,EAAwB;IAAA,IAArBC,cAAc,GAAAD,KAAA,CAAdC,cAAc;IAC1D,IAAI,CAACA,cAAc,EAAE;MACjB,OAAOC,SAAS;IACpB;IACA,IAAI;MACA,OAAO,IAAAC,6CAAkC,EAACF,cAAc,EAAE,WAAW,CAAC;IAC1E,CAAC,CAAC,OAAAG,OAAA,EAAM;MACJ,OAAOF,SAAS;IACpB;EACJ,CAAC,CAAC;EAEF,IAAAG,gBAAS,EAAC,YAAM;IACZ,OAAO,IAAAC,oBAAa,EAChB7C,MAAM,CAAC8C,wBAAwB,CAAC,UAAAC,QAAQ,EAAI;MACxCX,aAAa,CAACW,QAAQ,CAAC;IAC3B,CAAC,CACL,CAAC;EACL,CAAC,EAAE,CAAC/C,MAAM,CAAC,CAAC;EAEZ,oBACItB,MAAA,CAAAgB,OAAA,CAAAsB,aAAA,CAAAtC,MAAA,CAAAgB,OAAA,CAAAsD,QAAA,qBACItE,MAAA,CAAAgB,OAAA,CAAAsB,aAAA,CAAClB,gBAAgB;IACbK,QAAQ,EAAE,CAAC8B,UAAW;IACtBxC,KAAK,EAAE4C,QAAS;IAChBrC,MAAM,EAAEA,MAAO;IACfC,SAAS,EAAEA;EAAU,CACxB,CACH,CAAC;AAEX,CAAC;AAEM,IAAMgD,cAAc,GAAA7D,OAAA,CAAA6D,cAAA,GAAGC,MAAM,CAACC,MAAM,CAACzB,QAAQ,EAAE;EAAEvC,mBAAmB,EAAnBA;AAAoB,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["React","useCallback","useEffect","useState","$getSelectionStyleValueForProperty","$patchStyleText","mergeRegister","$getSelection","$isRangeSelection","DropDown","DropDownItem","useDeriveValueFromSelection","useRichTextEditor","FONT_SIZES_FALLBACK","map","size","id","name","value","default","emptyOption","dropDownActiveClass","active","FontSizeDropDown","props","editor","fontSizes","disabled","handleClick","option","update","selection","selectedOption","find","opt","createElement","buttonClassName","buttonLabel","buttonAriaLabel","className","onClick","key","FontSize","isEditable","setIsEditable","fontSize","rangeSelection","undefined","registerEditableListener","editable","Fragment","FontSizeAction","Object","assign"],"sources":["FontSizeAction.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useState } from \"react\";\nimport { $getSelectionStyleValueForProperty, $patchStyleText } from \"@lexical/selection\";\nimport { mergeRegister } from \"@lexical/utils\";\nimport { $getSelection, $isRangeSelection, LexicalEditor } from \"lexical\";\nimport { DropDown, DropDownItem } from \"~/ui/DropDown\";\nimport { useDeriveValueFromSelection } from \"~/hooks/useCurrentSelection\";\nimport { useRichTextEditor } from \"~/hooks\";\n\nexport interface FontSize {\n    id: string;\n    name: string;\n    value: string;\n}\n\nexport const FONT_SIZES_FALLBACK: FontSize[] = [\n    \"8px\",\n    \"9px\",\n    \"10px\",\n    \"11px\",\n    \"12px\",\n    \"14px\",\n    \"15px\",\n    \"16px\",\n    \"18px\",\n    \"21px\",\n    \"24px\",\n    \"30px\",\n    \"36px\",\n    \"48px\",\n    \"60px\",\n    \"72px\",\n    \"96px\"\n].map(size => ({\n    id: size,\n    name: size,\n    value: size,\n    default: size === \"15px\"\n}));\n\nconst emptyOption: FontSize = {\n    value: \"\",\n    name: \"Font Size\",\n    id: \"empty\"\n};\n\nfunction dropDownActiveClass(active: boolean) {\n    if (active) {\n        return \"active dropdown-item-active\";\n    }\n    return \"\";\n}\n\ninterface FontSizeDropDownProps {\n    fontSizes: FontSize[];\n    editor: LexicalEditor;\n    value: string | undefined;\n    disabled?: boolean;\n}\n\nfunction FontSizeDropDown(props: FontSizeDropDownProps): JSX.Element {\n    const { editor, value, fontSizes, disabled = false } = props;\n\n    const handleClick = useCallback(\n        (option: FontSize) => {\n            editor.update(() => {\n                const selection = $getSelection();\n                if ($isRangeSelection(selection)) {\n                    $patchStyleText(selection, {\n                        [\"font-size\"]: option.value\n                    });\n                }\n            });\n        },\n        [editor]\n    );\n\n    const selectedOption = fontSizes.find(opt => opt.value === value) ?? emptyOption;\n\n    return (\n        <DropDown\n            disabled={disabled}\n            buttonClassName=\"toolbar-item font-size\"\n            buttonLabel={selectedOption.name}\n            buttonAriaLabel={\"Formatting options for font size\"}\n        >\n            {fontSizes.map(option => (\n                <DropDownItem\n                    className={`item fontsize-item ${dropDownActiveClass(value === option.id)}`}\n                    onClick={() => handleClick(option)}\n                    key={option.id}\n                >\n                    <span className=\"text\">{option.name}</span>\n                </DropDownItem>\n            ))}\n        </DropDown>\n    );\n}\n\ninterface FontSizeActionProps {\n    fontSizes?: FontSize[];\n}\n\nconst FontSize = ({ fontSizes = FONT_SIZES_FALLBACK }: FontSizeActionProps) => {\n    const { editor } = useRichTextEditor();\n    const [isEditable, setIsEditable] = useState(() => editor.isEditable());\n    const fontSize = useDeriveValueFromSelection(({ rangeSelection }) => {\n        if (!rangeSelection) {\n            return undefined;\n        }\n        try {\n            return $getSelectionStyleValueForProperty(rangeSelection, \"font-size\");\n        } catch {\n            return undefined;\n        }\n    });\n\n    useEffect(() => {\n        return mergeRegister(\n            editor.registerEditableListener(editable => {\n                setIsEditable(editable);\n            })\n        );\n    }, [editor]);\n\n    return (\n        <>\n            <FontSizeDropDown\n                disabled={!isEditable}\n                value={fontSize}\n                editor={editor}\n                fontSizes={fontSizes}\n            />\n        </>\n    );\n};\n\nexport const FontSizeAction = Object.assign(FontSize, { FONT_SIZES_FALLBACK });\n"],"mappings":"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","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";
+import { fileToImagePayload } from "../../utils/files";
+import { INSERT_IMAGE_COMMAND } from "../../commands";
+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 { 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,OAAOA,KAAK,IAAIC,SAAS,EAAEC,QAAQ,QAAQ,OAAO;AAElD,SAASC,iBAAiB;AAC1B,SAA8BC,kBAAkB;AAChD,SAAuBC,oBAAoB;AAG3C,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";
+import { useRichTextEditor } from "../../hooks";
+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\";\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,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";
+import { useDeriveValueFromSelection } from "../../hooks/useCurrentSelection";
+import { useRichTextEditor } from "../../hooks";
+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\";\nimport { useDeriveValueFromSelection } from \"~/hooks/useCurrentSelection\";\nimport { useRichTextEditor } from \"~/hooks\";\n\nexport const LinkAction = () => {\n    const { editor } = useRichTextEditor();\n    const isLink = useDeriveValueFromSelection(({ rangeSelection }) => {\n        if (!rangeSelection) {\n            return false;\n        }\n        const node = getNodeFromSelection(rangeSelection);\n        return node ? $isLinkNode(node) || $isLinkNode(node.getParent()) : false;\n    });\n\n    const insertLink = useCallback(() => {\n        if (!isLink) {\n            editor.dispatchCommand(TOGGLE_LINK_COMMAND, { url: \"https://\" });\n        } else {\n            editor.dispatchCommand(TOGGLE_LINK_COMMAND, null);\n        }\n    }, [editor, isLink]);\n\n    return (\n        <button\n            onClick={insertLink}\n            className={\"popup-item spaced \" + (isLink ? \"active\" : \"\")}\n            aria-label=\"Insert link\"\n        >\n            <i className=\"format link\" />\n        </button>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,WAAW,QAAQ,OAAO;AAC1C,SAASC,WAAW,EAAEC,mBAAmB,QAAQ,uBAAuB;AACxE,SAASC,oBAAoB;AAC7B,SAASC,2BAA2B;AACpC,SAASC,iBAAiB;AAE1B,OAAO,MAAMC,UAAU,GAAGA,CAAA,KAAM;EAC5B,MAAM;IAAEC;EAAO,CAAC,GAAGF,iBAAiB,CAAC,CAAC;EACtC,MAAMG,MAAM,GAAGJ,2BAA2B,CAAC,CAAC;IAAEK;EAAe,CAAC,KAAK;IAC/D,IAAI,CAACA,cAAc,EAAE;MACjB,OAAO,KAAK;IAChB;IACA,MAAMC,IAAI,GAAGP,oBAAoB,CAACM,cAAc,CAAC;IACjD,OAAOC,IAAI,GAAGT,WAAW,CAACS,IAAI,CAAC,IAAIT,WAAW,CAACS,IAAI,CAACC,SAAS,CAAC,CAAC,CAAC,GAAG,KAAK;EAC5E,CAAC,CAAC;EAEF,MAAMC,UAAU,GAAGZ,WAAW,CAAC,MAAM;IACjC,IAAI,CAACQ,MAAM,EAAE;MACTD,MAAM,CAACM,eAAe,CAACX,mBAAmB,EAAE;QAAEY,GAAG,EAAE;MAAW,CAAC,CAAC;IACpE,CAAC,MAAM;MACHP,MAAM,CAACM,eAAe,CAACX,mBAAmB,EAAE,IAAI,CAAC;IACrD;EACJ,CAAC,EAAE,CAACK,MAAM,EAAEC,MAAM,CAAC,CAAC;EAEpB,oBACIT,KAAA,CAAAgB,aAAA;IACIC,OAAO,EAAEJ,UAAW;IACpBK,SAAS,EAAE,oBAAoB,IAAIT,MAAM,GAAG,QAAQ,GAAG,EAAE,CAAE;IAC3D,cAAW;EAAa,gBAExBT,KAAA,CAAAgB,aAAA;IAAGE,SAAS,EAAC;EAAa,CAAE,CACxB,CAAC;AAEjB,CAAC","ignoreList":[]}