@webiny/lexical-editor 0.0.0-unstable.d65ec29d44

package/components/ToolbarActions/BulletListAction.js

@@ -0,0 +1,89 @@
+"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.BulletListAction = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _LexicalComposerContext = require("@lexical/react/LexicalComposerContext");
+var _list = require("@lexical/list");
+var _lexical = require("lexical");
+var _utils = require("@lexical/utils");
+/**
+ * Toolbar button action. On click will wrap the content in bullet list style.
+ */
+var BulletListAction = function BulletListAction() {
+  var _useLexicalComposerCo = (0, _LexicalComposerContext.useLexicalComposerContext)(),
+    _useLexicalComposerCo2 = (0, _slicedToArray2.default)(_useLexicalComposerCo, 1),
+    editor = _useLexicalComposerCo2[0];
+  var _useState = (0, _react.useState)(editor),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    activeEditor = _useState2[0],
+    setActiveEditor = _useState2[1];
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    isActive = _useState4[0],
+    setIsActive = _useState4[1];
+  var updateToolbar = (0, _react.useCallback)(function () {
+    var selection = (0, _lexical.$getSelection)();
+    if ((0, _lexical.$isRangeSelection)(selection)) {
+      var anchorNode = selection.anchor.getNode();
+      var element = anchorNode.getKey() === "root" ? anchorNode : (0, _utils.$findMatchingParent)(anchorNode, function (e) {
+        var parent = e.getParent();
+        return parent !== null && (0, _lexical.$isRootOrShadowRoot)(parent);
+      });
+      if (element === null) {
+        element = anchorNode.getTopLevelElementOrThrow();
+      }
+      if ((0, _list.$isListNode)(element)) {
+        var parentList = (0, _utils.$getNearestNodeOfType)(anchorNode, _list.ListNode);
+        // get the type of the list that is selected with the cursor
+        var type = parentList ? parentList.getListType() : element.getListType();
+        // set the button as active for numbered list
+        if (type === "bullet") {
+          setIsActive(true);
+        } else {
+          setIsActive(false);
+        }
+      }
+    }
+  }, [activeEditor]);
+  (0, _react.useEffect)(function () {
+    return (0, _utils.mergeRegister)(activeEditor.registerUpdateListener(function (_ref) {
+      var editorState = _ref.editorState;
+      editorState.read(function () {
+        updateToolbar();
+      });
+    }));
+  }, [activeEditor, editor, updateToolbar]);
+  (0, _react.useEffect)(function () {
+    return editor.registerCommand(_lexical.SELECTION_CHANGE_COMMAND, function (_payload, newEditor) {
+      updateToolbar();
+      setActiveEditor(newEditor);
+      return false;
+    }, _lexical.COMMAND_PRIORITY_CRITICAL);
+  }, [editor, updateToolbar]);
+  var formatBulletList = function formatBulletList() {
+    if (!isActive) {
+      // will update the active state in the useEffect
+      editor.dispatchCommand(_list.INSERT_UNORDERED_LIST_COMMAND, undefined);
+    } else {
+      editor.dispatchCommand(_list.REMOVE_LIST_COMMAND, undefined);
+      // removing will not update correctly the active state, so we need to set to false manually.
+      setIsActive(false);
+    }
+  };
+  return /*#__PURE__*/_react.default.createElement("button", {
+    onClick: function onClick() {
+      return formatBulletList();
+    },
+    className: "popup-item spaced " + (isActive ? "active" : ""),
+    "aria-label": "Format text as bullet list"
+  }, /*#__PURE__*/_react.default.createElement("i", {
+    className: "icon bullet-list"
+  }));
+};
+exports.BulletListAction = BulletListAction;

package/components/ToolbarActions/BulletListAction.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireWildcard","require","_LexicalComposerContext","_list","_lexical","_utils","BulletListAction","_useLexicalComposerCo","useLexicalComposerContext","_useLexicalComposerCo2","_slicedToArray2","default","editor","_useState","useState","_useState2","activeEditor","setActiveEditor","_useState3","_useState4","isActive","setIsActive","updateToolbar","useCallback","selection","$getSelection","$isRangeSelection","anchorNode","anchor","getNode","element","getKey","$findMatchingParent","e","parent","getParent","$isRootOrShadowRoot","getTopLevelElementOrThrow","$isListNode","parentList","$getNearestNodeOfType","ListNode","type","getListType","useEffect","mergeRegister","registerUpdateListener","_ref","editorState","read","registerCommand","SELECTION_CHANGE_COMMAND","_payload","newEditor","COMMAND_PRIORITY_CRITICAL","formatBulletList","dispatchCommand","INSERT_UNORDERED_LIST_COMMAND","undefined","REMOVE_LIST_COMMAND","createElement","onClick","className","exports"],"sources":["BulletListAction.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useState } from \"react\";\nimport { useLexicalComposerContext } from \"@lexical/react/LexicalComposerContext\";\nimport {\n    $isListNode,\n    INSERT_UNORDERED_LIST_COMMAND,\n    ListNode,\n    REMOVE_LIST_COMMAND\n} from \"@lexical/list\";\nimport {\n    $getSelection,\n    $isRangeSelection,\n    $isRootOrShadowRoot,\n    COMMAND_PRIORITY_CRITICAL,\n    SELECTION_CHANGE_COMMAND\n} from \"lexical\";\nimport { $findMatchingParent, $getNearestNodeOfType, mergeRegister } from \"@lexical/utils\";\n\n/**\n * Toolbar button action. On click will wrap the content in bullet list style.\n */\nexport const BulletListAction = () => {\n    const [editor] = useLexicalComposerContext();\n    const [activeEditor, setActiveEditor] = useState(editor);\n    const [isActive, setIsActive] = useState<boolean>(false);\n\n    const updateToolbar = useCallback(() => {\n        const selection = $getSelection();\n        if ($isRangeSelection(selection)) {\n            const anchorNode = selection.anchor.getNode();\n            let element =\n                anchorNode.getKey() === \"root\"\n                    ? anchorNode\n                    : $findMatchingParent(anchorNode, e => {\n                          const parent = e.getParent();\n                          return parent !== null && $isRootOrShadowRoot(parent);\n                      });\n\n            if (element === null) {\n                element = anchorNode.getTopLevelElementOrThrow();\n            }\n\n            if ($isListNode(element)) {\n                const parentList = $getNearestNodeOfType<ListNode>(anchorNode, ListNode);\n                // get the type of the list that is selected with the cursor\n                const type = parentList ? parentList.getListType() : element.getListType();\n                // set the button as active for numbered list\n                if (type === \"bullet\") {\n                    setIsActive(true);\n                } else {\n                    setIsActive(false);\n                }\n            }\n        }\n    }, [activeEditor]);\n\n    useEffect(() => {\n        return mergeRegister(\n            activeEditor.registerUpdateListener(({ editorState }) => {\n                editorState.read(() => {\n                    updateToolbar();\n                });\n            })\n        );\n    }, [activeEditor, editor, updateToolbar]);\n\n    useEffect(() => {\n        return editor.registerCommand(\n            SELECTION_CHANGE_COMMAND,\n            (_payload, newEditor) => {\n                updateToolbar();\n                setActiveEditor(newEditor);\n                return false;\n            },\n            COMMAND_PRIORITY_CRITICAL\n        );\n    }, [editor, updateToolbar]);\n\n    const formatBulletList = () => {\n        if (!isActive) {\n            // will update the active state in the useEffect\n            editor.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND, undefined);\n        } else {\n            editor.dispatchCommand(REMOVE_LIST_COMMAND, undefined);\n            // removing will not update correctly the active state, so we need to set to false manually.\n            setIsActive(false);\n        }\n    };\n\n    return (\n        <button\n            onClick={() => formatBulletList()}\n            className={\"popup-item spaced \" + (isActive ? \"active\" : \"\")}\n            aria-label=\"Format text as bullet list\"\n        >\n            <i className=\"icon bullet-list\" />\n        </button>\n    );\n};\n"],"mappings":"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"}

package/components/ToolbarActions/CodeHighlightAction.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+/**
+ * Toolbar action. User can highlight the selected text.
+ * - Gray background will be visible on selected text after clicking on the button.
+ */
+export declare const CodeHighlightAction: () => JSX.Element;

package/components/ToolbarActions/CodeHighlightAction.js

@@ -0,0 +1,39 @@
+"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.CodeHighlightAction = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _LexicalComposerContext = require("@lexical/react/LexicalComposerContext");
+var _lexical = require("lexical");
+/**
+ * Toolbar action. User can highlight the selected text.
+ * - Gray background will be visible on selected text after clicking on the button.
+ */
+var CodeHighlightAction = function CodeHighlightAction() {
+  var _useLexicalComposerCo = (0, _LexicalComposerContext.useLexicalComposerContext)(),
+    _useLexicalComposerCo2 = (0, _slicedToArray2.default)(_useLexicalComposerCo, 1),
+    editor = _useLexicalComposerCo2[0];
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    isCode = _useState2[0],
+    setIsCode = _useState2[1];
+  var handleClick = function handleClick() {
+    editor.dispatchCommand(_lexical.FORMAT_TEXT_COMMAND, "code");
+    setIsCode(!isCode);
+  };
+  return /*#__PURE__*/_react.default.createElement("button", {
+    onClick: function onClick() {
+      return handleClick();
+    },
+    className: "popup-item spaced " + (isCode ? "active" : ""),
+    "aria-label": "Text code highlight"
+  }, /*#__PURE__*/_react.default.createElement("i", {
+    className: "format code"
+  }));
+};
+exports.CodeHighlightAction = CodeHighlightAction;

package/components/ToolbarActions/CodeHighlightAction.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireWildcard","require","_LexicalComposerContext","_lexical","CodeHighlightAction","_useLexicalComposerCo","useLexicalComposerContext","_useLexicalComposerCo2","_slicedToArray2","default","editor","_useState","useState","_useState2","isCode","setIsCode","handleClick","dispatchCommand","FORMAT_TEXT_COMMAND","createElement","onClick","className","exports"],"sources":["CodeHighlightAction.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport { useLexicalComposerContext } from \"@lexical/react/LexicalComposerContext\";\nimport { FORMAT_TEXT_COMMAND } from \"lexical\";\n\n/**\n * Toolbar action. User can highlight the selected text.\n * - Gray background will be visible on selected text after clicking on the button.\n */\nexport const CodeHighlightAction = () => {\n    const [editor] = useLexicalComposerContext();\n    const [isCode, setIsCode] = useState(false);\n    const handleClick = () => {\n        editor.dispatchCommand(FORMAT_TEXT_COMMAND, \"code\");\n        setIsCode(!isCode);\n    };\n\n    return (\n        <button\n            onClick={() => handleClick()}\n            className={\"popup-item spaced \" + (isCode ? \"active\" : \"\")}\n            aria-label=\"Text code highlight\"\n        >\n            <i className=\"format code\" />\n        </button>\n    );\n};\n"],"mappings":";;;;;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,uBAAA,GAAAD,OAAA;AACA,IAAAE,QAAA,GAAAF,OAAA;AAEA;AACA;AACA;AACA;AACO,IAAMG,mBAAmB,GAAG,SAAtBA,mBAAmBA,CAAA,EAAS;EACrC,IAAAC,qBAAA,GAAiB,IAAAC,iDAAyB,GAAE;IAAAC,sBAAA,OAAAC,eAAA,CAAAC,OAAA,EAAAJ,qBAAA;IAArCK,MAAM,GAAAH,sBAAA;EACb,IAAAI,SAAA,GAA4B,IAAAC,eAAQ,EAAC,KAAK,CAAC;IAAAC,UAAA,OAAAL,eAAA,CAAAC,OAAA,EAAAE,SAAA;IAApCG,MAAM,GAAAD,UAAA;IAAEE,SAAS,GAAAF,UAAA;EACxB,IAAMG,WAAW,GAAG,SAAdA,WAAWA,CAAA,EAAS;IACtBN,MAAM,CAACO,eAAe,CAACC,4BAAmB,EAAE,MAAM,CAAC;IACnDH,SAAS,CAAC,CAACD,MAAM,CAAC;EACtB,CAAC;EAED,oBACIf,MAAA,CAAAU,OAAA,CAAAU,aAAA;IACIC,OAAO,EAAE,SAAAA,QAAA;MAAA,OAAMJ,WAAW,EAAE;IAAA,CAAC;IAC7BK,SAAS,EAAE,oBAAoB,IAAIP,MAAM,GAAG,QAAQ,GAAG,EAAE,CAAE;IAC3D,cAAW;EAAqB,gBAEhCf,MAAA,CAAAU,OAAA,CAAAU,aAAA;IAAGE,SAAS,EAAC;EAAa,EAAG,CACxB;AAEjB,CAAC;AAACC,OAAA,CAAAlB,mBAAA,GAAAA,mBAAA"}

package/components/ToolbarActions/FontSizeAction.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const FontSizeAction: () => JSX.Element;

package/components/ToolbarActions/FontSizeAction.js

@@ -0,0 +1,104 @@
+"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 = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireWildcard(require("react"));
+var _LexicalComposerContext = require("@lexical/react/LexicalComposerContext");
+var _selection = require("@lexical/selection");
+var _utils = require("@lexical/utils");
+var _lexical = require("lexical");
+var _DropDown = require("../../ui/DropDown");
+/**
+ * Toolbar action. Allow user to change font size for selected text.
+ */
+var FONT_SIZE_OPTIONS = ["8px", "9px", "10px", "11px", "12px", "14px", "15px", "16px", "18px", "21px", "24px", "30px", "36px", "48px", "60px", "72px", "96px"];
+function dropDownActiveClass(active) {
+  if (active) {
+    return "active dropdown-item-active";
+  }
+  return "";
+}
+function FontSizeDropDown(props) {
+  var editor = props.editor,
+    value = props.value,
+    _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));
+      }
+    });
+  }, [editor]);
+  return /*#__PURE__*/_react.default.createElement(_DropDown.DropDown, {
+    disabled: disabled,
+    buttonClassName: "toolbar-item font-size",
+    buttonLabel: value,
+    buttonAriaLabel: "Formatting options for font size"
+  }, FONT_SIZE_OPTIONS.map(function (option) {
+    return /*#__PURE__*/_react.default.createElement(_DropDown.DropDownItem, {
+      className: "item fontsize-item ".concat(dropDownActiveClass(value === option)),
+      onClick: function onClick() {
+        return handleClick(option);
+      },
+      key: option
+    }, /*#__PURE__*/_react.default.createElement("span", {
+      className: "text"
+    }, option));
+  }));
+}
+var FontSizeAction = function FontSizeAction() {
+  var _useLexicalComposerCo = (0, _LexicalComposerContext.useLexicalComposerContext)(),
+    _useLexicalComposerCo2 = (0, _slicedToArray2.default)(_useLexicalComposerCo, 1),
+    editor = _useLexicalComposerCo2[0];
+  var _useState = (0, _react.useState)(function () {
+      return editor.isEditable();
+    }),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    isEditable = _useState2[0],
+    setIsEditable = _useState2[1];
+  var _useState3 = (0, _react.useState)(editor),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    activeEditor = _useState4[0],
+    setActiveEditor = _useState4[1];
+  var _useState5 = (0, _react.useState)("15px"),
+    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+    fontSize = _useState6[0],
+    setFontSize = _useState6[1];
+  var updateToolbar = (0, _react.useCallback)(function () {
+    var selection = (0, _lexical.$getSelection)();
+    if ((0, _lexical.$isRangeSelection)(selection)) {
+      setFontSize((0, _selection.$getSelectionStyleValueForProperty)(selection, "font-size", "15px"));
+    }
+  }, [activeEditor]);
+  (0, _react.useEffect)(function () {
+    return (0, _utils.mergeRegister)(editor.registerEditableListener(function (editable) {
+      setIsEditable(editable);
+    }), activeEditor.registerUpdateListener(function (_ref) {
+      var editorState = _ref.editorState;
+      editorState.read(function () {
+        updateToolbar();
+      });
+    }));
+  }, [activeEditor, editor, updateToolbar]);
+  (0, _react.useEffect)(function () {
+    return editor.registerCommand(_lexical.SELECTION_CHANGE_COMMAND, function (_payload, newEditor) {
+      updateToolbar();
+      setActiveEditor(newEditor);
+      return false;
+    }, _lexical.COMMAND_PRIORITY_CRITICAL);
+  }, [editor, updateToolbar]);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(FontSizeDropDown, {
+    disabled: !isEditable,
+    value: fontSize,
+    editor: editor
+  }));
+};
+exports.FontSizeAction = FontSizeAction;

package/components/ToolbarActions/FontSizeAction.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireWildcard","require","_LexicalComposerContext","_selection","_utils","_lexical","_DropDown","FONT_SIZE_OPTIONS","dropDownActiveClass","active","FontSizeDropDown","props","editor","value","_props$disabled","disabled","handleClick","useCallback","option","update","selection","$getSelection","$isRangeSelection","$patchStyleText","_defineProperty2","default","createElement","DropDown","buttonClassName","buttonLabel","buttonAriaLabel","map","DropDownItem","className","concat","onClick","key","FontSizeAction","_useLexicalComposerCo","useLexicalComposerContext","_useLexicalComposerCo2","_slicedToArray2","_useState","useState","isEditable","_useState2","setIsEditable","_useState3","_useState4","activeEditor","setActiveEditor","_useState5","_useState6","fontSize","setFontSize","updateToolbar","$getSelectionStyleValueForProperty","useEffect","mergeRegister","registerEditableListener","editable","registerUpdateListener","_ref","editorState","read","registerCommand","SELECTION_CHANGE_COMMAND","_payload","newEditor","COMMAND_PRIORITY_CRITICAL","Fragment","exports"],"sources":["FontSizeAction.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useState } from \"react\";\nimport { useLexicalComposerContext } from \"@lexical/react/LexicalComposerContext\";\nimport { $getSelectionStyleValueForProperty, $patchStyleText } from \"@lexical/selection\";\nimport { mergeRegister } from \"@lexical/utils\";\nimport {\n    $getSelection,\n    $isRangeSelection,\n    COMMAND_PRIORITY_CRITICAL,\n    LexicalEditor,\n    SELECTION_CHANGE_COMMAND\n} from \"lexical\";\nimport { DropDown, DropDownItem } from \"../../ui/DropDown\";\n\n/**\n * Toolbar action. Allow user to change font size for selected text.\n */\nconst FONT_SIZE_OPTIONS: string[] = [\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];\n\nfunction dropDownActiveClass(active: boolean) {\n    if (active) {\n        return \"active dropdown-item-active\";\n    }\n    return \"\";\n}\n\ninterface FontSizeDropDownProps {\n    editor: LexicalEditor;\n    value: string;\n    disabled?: boolean;\n}\n\nfunction FontSizeDropDown(props: FontSizeDropDownProps): JSX.Element {\n    const { editor, value, disabled = false } = props;\n\n    const handleClick = useCallback(\n        (option: string) => {\n            editor.update(() => {\n                const selection = $getSelection();\n                if ($isRangeSelection(selection)) {\n                    $patchStyleText(selection, {\n                        [\"font-size\"]: option\n                    });\n                }\n            });\n        },\n        [editor]\n    );\n\n    return (\n        <DropDown\n            disabled={disabled}\n            buttonClassName=\"toolbar-item font-size\"\n            buttonLabel={value}\n            buttonAriaLabel={\"Formatting options for font size\"}\n        >\n            {FONT_SIZE_OPTIONS.map(option => (\n                <DropDownItem\n                    className={`item fontsize-item ${dropDownActiveClass(value === option)}`}\n                    onClick={() => handleClick(option)}\n                    key={option}\n                >\n                    <span className=\"text\">{option}</span>\n                </DropDownItem>\n            ))}\n        </DropDown>\n    );\n}\n\nexport const FontSizeAction = () => {\n    const [editor] = useLexicalComposerContext();\n    const [isEditable, setIsEditable] = useState(() => editor.isEditable());\n    const [activeEditor, setActiveEditor] = useState(editor);\n    const [fontSize, setFontSize] = useState<string>(\"15px\");\n\n    const updateToolbar = useCallback(() => {\n        const selection = $getSelection();\n        if ($isRangeSelection(selection)) {\n            setFontSize($getSelectionStyleValueForProperty(selection, \"font-size\", \"15px\"));\n        }\n    }, [activeEditor]);\n\n    useEffect(() => {\n        return mergeRegister(\n            editor.registerEditableListener(editable => {\n                setIsEditable(editable);\n            }),\n            activeEditor.registerUpdateListener(({ editorState }) => {\n                editorState.read(() => {\n                    updateToolbar();\n                });\n            })\n        );\n    }, [activeEditor, editor, updateToolbar]);\n\n    useEffect(() => {\n        return editor.registerCommand(\n            SELECTION_CHANGE_COMMAND,\n            (_payload, newEditor) => {\n                updateToolbar();\n                setActiveEditor(newEditor);\n                return false;\n            },\n            COMMAND_PRIORITY_CRITICAL\n        );\n    }, [editor, updateToolbar]);\n    return (\n        <>\n            <FontSizeDropDown disabled={!isEditable} value={fontSize} editor={editor} />\n        </>\n    );\n};\n"],"mappings":"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"}

package/components/ToolbarActions/ItalicAction.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+/**
+ * Toolbar action. On toolbar, you can see the button that is italic.
+ */
+export declare const ItalicAction: () => JSX.Element;

package/components/ToolbarActions/ItalicAction.js

@@ -0,0 +1,38 @@
+"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.ItalicAction = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _LexicalComposerContext = require("@lexical/react/LexicalComposerContext");
+var _lexical = require("lexical");
+/**
+ * Toolbar action. On toolbar, you can see the button that is italic.
+ */
+var ItalicAction = function ItalicAction() {
+  var _useLexicalComposerCo = (0, _LexicalComposerContext.useLexicalComposerContext)(),
+    _useLexicalComposerCo2 = (0, _slicedToArray2.default)(_useLexicalComposerCo, 1),
+    editor = _useLexicalComposerCo2[0];
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    isItalic = _useState2[0],
+    setIsItalic = _useState2[1];
+  var handleClick = function handleClick() {
+    editor.dispatchCommand(_lexical.FORMAT_TEXT_COMMAND, "italic");
+    setIsItalic(!isItalic);
+  };
+  return /*#__PURE__*/_react.default.createElement("button", {
+    onClick: function onClick() {
+      return handleClick();
+    },
+    className: "popup-item spaced " + (isItalic ? "active" : ""),
+    "aria-label": "Format text as italic"
+  }, /*#__PURE__*/_react.default.createElement("i", {
+    className: "format italic"
+  }));
+};
+exports.ItalicAction = ItalicAction;

package/components/ToolbarActions/ItalicAction.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireWildcard","require","_LexicalComposerContext","_lexical","ItalicAction","_useLexicalComposerCo","useLexicalComposerContext","_useLexicalComposerCo2","_slicedToArray2","default","editor","_useState","useState","_useState2","isItalic","setIsItalic","handleClick","dispatchCommand","FORMAT_TEXT_COMMAND","createElement","onClick","className","exports"],"sources":["ItalicAction.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport { useLexicalComposerContext } from \"@lexical/react/LexicalComposerContext\";\nimport { FORMAT_TEXT_COMMAND } from \"lexical\";\n\n/**\n * Toolbar action. On toolbar, you can see the button that is italic.\n */\nexport const ItalicAction = () => {\n    const [editor] = useLexicalComposerContext();\n    const [isItalic, setIsItalic] = useState(false);\n    const handleClick = () => {\n        editor.dispatchCommand(FORMAT_TEXT_COMMAND, \"italic\");\n        setIsItalic(!isItalic);\n    };\n\n    return (\n        <button\n            onClick={() => handleClick()}\n            className={\"popup-item spaced \" + (isItalic ? \"active\" : \"\")}\n            aria-label=\"Format text as italic\"\n        >\n            <i className=\"format italic\" />\n        </button>\n    );\n};\n"],"mappings":";;;;;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,uBAAA,GAAAD,OAAA;AACA,IAAAE,QAAA,GAAAF,OAAA;AAEA;AACA;AACA;AACO,IAAMG,YAAY,GAAG,SAAfA,YAAYA,CAAA,EAAS;EAC9B,IAAAC,qBAAA,GAAiB,IAAAC,iDAAyB,GAAE;IAAAC,sBAAA,OAAAC,eAAA,CAAAC,OAAA,EAAAJ,qBAAA;IAArCK,MAAM,GAAAH,sBAAA;EACb,IAAAI,SAAA,GAAgC,IAAAC,eAAQ,EAAC,KAAK,CAAC;IAAAC,UAAA,OAAAL,eAAA,CAAAC,OAAA,EAAAE,SAAA;IAAxCG,QAAQ,GAAAD,UAAA;IAAEE,WAAW,GAAAF,UAAA;EAC5B,IAAMG,WAAW,GAAG,SAAdA,WAAWA,CAAA,EAAS;IACtBN,MAAM,CAACO,eAAe,CAACC,4BAAmB,EAAE,QAAQ,CAAC;IACrDH,WAAW,CAAC,CAACD,QAAQ,CAAC;EAC1B,CAAC;EAED,oBACIf,MAAA,CAAAU,OAAA,CAAAU,aAAA;IACIC,OAAO,EAAE,SAAAA,QAAA;MAAA,OAAMJ,WAAW,EAAE;IAAA,CAAC;IAC7BK,SAAS,EAAE,oBAAoB,IAAIP,QAAQ,GAAG,QAAQ,GAAG,EAAE,CAAE;IAC7D,cAAW;EAAuB,gBAElCf,MAAA,CAAAU,OAAA,CAAAU,aAAA;IAAGE,SAAS,EAAC;EAAe,EAAG,CAC1B;AAEjB,CAAC;AAACC,OAAA,CAAAlB,YAAA,GAAAA,YAAA"}

package/components/ToolbarActions/LinkAction.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+/**
+ * Toolbar action. User can convert selected text in clickble link.
+ * - Small size popup will be opened with input so user can enter the link.
+ * - To remove the link, user need to select the already added link and click again in the action button.
+ */
+export declare const LinkAction: () => JSX.Element;

package/components/ToolbarActions/LinkAction.js

@@ -0,0 +1,69 @@
+"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.LinkAction = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _LexicalComposerContext = require("@lexical/react/LexicalComposerContext");
+var _link = require("@lexical/link");
+var _lexical = require("lexical");
+var _getSelectedNode = require("../../utils/getSelectedNode");
+var _useRichTextEditor2 = require("../../hooks/useRichTextEditor");
+/**
+ * Toolbar action. User can convert selected text in clickble link.
+ * - Small size popup will be opened with input so user can enter the link.
+ * - To remove the link, user need to select the already added link and click again in the action button.
+ */
+var LinkAction = function LinkAction() {
+  var _useLexicalComposerCo = (0, _LexicalComposerContext.useLexicalComposerContext)(),
+    _useLexicalComposerCo2 = (0, _slicedToArray2.default)(_useLexicalComposerCo, 1),
+    editor = _useLexicalComposerCo2[0];
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    isLink = _useState2[0],
+    setIsLink = _useState2[1];
+  var _useRichTextEditor = (0, _useRichTextEditor2.useRichTextEditor)(),
+    setNodeIsText = _useRichTextEditor.setNodeIsText;
+  var insertLink = (0, _react.useCallback)(function () {
+    if (!isLink) {
+      editor.dispatchCommand(_link.TOGGLE_LINK_COMMAND, "https://");
+      setNodeIsText(false);
+    } else {
+      editor.dispatchCommand(_link.TOGGLE_LINK_COMMAND, null);
+    }
+  }, [editor, isLink]);
+  var updatePopup = (0, _react.useCallback)(function () {
+    editor.getEditorState().read(function () {
+      var selection = (0, _lexical.$getSelection)();
+      if (!(0, _lexical.$isRangeSelection)(selection)) {
+        return;
+      }
+      var node = (0, _getSelectedNode.getSelectedNode)(selection);
+      // Update links
+      var parent = node.getParent();
+      if ((0, _link.$isLinkNode)(parent) || (0, _link.$isLinkNode)(node)) {
+        setIsLink(true);
+      } else {
+        setIsLink(false);
+      }
+    });
+  }, [editor]);
+  (0, _react.useEffect)(function () {
+    document.addEventListener("selectionchange", updatePopup);
+    return function () {
+      document.removeEventListener("selectionchange", updatePopup);
+    };
+  }, [updatePopup]);
+  return /*#__PURE__*/_react.default.createElement("button", {
+    onClick: insertLink,
+    className: "popup-item spaced " + (isLink ? "active" : ""),
+    "aria-label": "Insert link"
+  }, /*#__PURE__*/_react.default.createElement("i", {
+    className: "format link"
+  }));
+};
+exports.LinkAction = LinkAction;

package/components/ToolbarActions/LinkAction.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireWildcard","require","_LexicalComposerContext","_link","_lexical","_getSelectedNode","_useRichTextEditor2","LinkAction","_useLexicalComposerCo","useLexicalComposerContext","_useLexicalComposerCo2","_slicedToArray2","default","editor","_useState","useState","_useState2","isLink","setIsLink","_useRichTextEditor","useRichTextEditor","setNodeIsText","insertLink","useCallback","dispatchCommand","TOGGLE_LINK_COMMAND","updatePopup","getEditorState","read","selection","$getSelection","$isRangeSelection","node","getSelectedNode","parent","getParent","$isLinkNode","useEffect","document","addEventListener","removeEventListener","createElement","onClick","className","exports"],"sources":["LinkAction.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useState } from \"react\";\nimport { useLexicalComposerContext } from \"@lexical/react/LexicalComposerContext\";\nimport { $isLinkNode, TOGGLE_LINK_COMMAND } from \"@lexical/link\";\nimport { $getSelection, $isRangeSelection } from \"lexical\";\nimport { getSelectedNode } from \"~/utils/getSelectedNode\";\nimport { useRichTextEditor } from \"~/hooks/useRichTextEditor\";\n\n/**\n * Toolbar action. User can convert selected text in clickble link.\n * - Small size popup will be opened with input so user can enter the link.\n * - To remove the link, user need to select the already added link and click again in the action button.\n */\nexport const LinkAction = () => {\n    const [editor] = useLexicalComposerContext();\n    const [isLink, setIsLink] = useState(false);\n    const { setNodeIsText } = useRichTextEditor();\n\n    const insertLink = useCallback(() => {\n        if (!isLink) {\n            editor.dispatchCommand(TOGGLE_LINK_COMMAND, \"https://\");\n            setNodeIsText(false);\n        } else {\n            editor.dispatchCommand(TOGGLE_LINK_COMMAND, null);\n        }\n    }, [editor, isLink]);\n\n    const updatePopup = useCallback(() => {\n        editor.getEditorState().read(() => {\n            const selection = $getSelection();\n            if (!$isRangeSelection(selection)) {\n                return;\n            }\n            const node = getSelectedNode(selection);\n            // Update links\n            const parent = node.getParent();\n            if ($isLinkNode(parent) || $isLinkNode(node)) {\n                setIsLink(true);\n            } else {\n                setIsLink(false);\n            }\n        });\n    }, [editor]);\n\n    useEffect(() => {\n        document.addEventListener(\"selectionchange\", updatePopup);\n        return () => {\n            document.removeEventListener(\"selectionchange\", updatePopup);\n        };\n    }, [updatePopup]);\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,uBAAA,GAAAD,OAAA;AACA,IAAAE,KAAA,GAAAF,OAAA;AACA,IAAAG,QAAA,GAAAH,OAAA;AACA,IAAAI,gBAAA,GAAAJ,OAAA;AACA,IAAAK,mBAAA,GAAAL,OAAA;AAEA;AACA;AACA;AACA;AACA;AACO,IAAMM,UAAU,GAAG,SAAbA,UAAUA,CAAA,EAAS;EAC5B,IAAAC,qBAAA,GAAiB,IAAAC,iDAAyB,GAAE;IAAAC,sBAAA,OAAAC,eAAA,CAAAC,OAAA,EAAAJ,qBAAA;IAArCK,MAAM,GAAAH,sBAAA;EACb,IAAAI,SAAA,GAA4B,IAAAC,eAAQ,EAAC,KAAK,CAAC;IAAAC,UAAA,OAAAL,eAAA,CAAAC,OAAA,EAAAE,SAAA;IAApCG,MAAM,GAAAD,UAAA;IAAEE,SAAS,GAAAF,UAAA;EACxB,IAAAG,kBAAA,GAA0B,IAAAC,qCAAiB,GAAE;IAArCC,aAAa,GAAAF,kBAAA,CAAbE,aAAa;EAErB,IAAMC,UAAU,GAAG,IAAAC,kBAAW,EAAC,YAAM;IACjC,IAAI,CAACN,MAAM,EAAE;MACTJ,MAAM,CAACW,eAAe,CAACC,yBAAmB,EAAE,UAAU,CAAC;MACvDJ,aAAa,CAAC,KAAK,CAAC;IACxB,CAAC,MAAM;MACHR,MAAM,CAACW,eAAe,CAACC,yBAAmB,EAAE,IAAI,CAAC;IACrD;EACJ,CAAC,EAAE,CAACZ,MAAM,EAAEI,MAAM,CAAC,CAAC;EAEpB,IAAMS,WAAW,GAAG,IAAAH,kBAAW,EAAC,YAAM;IAClCV,MAAM,CAACc,cAAc,EAAE,CAACC,IAAI,CAAC,YAAM;MAC/B,IAAMC,SAAS,GAAG,IAAAC,sBAAa,GAAE;MACjC,IAAI,CAAC,IAAAC,0BAAiB,EAACF,SAAS,CAAC,EAAE;QAC/B;MACJ;MACA,IAAMG,IAAI,GAAG,IAAAC,gCAAe,EAACJ,SAAS,CAAC;MACvC;MACA,IAAMK,MAAM,GAAGF,IAAI,CAACG,SAAS,EAAE;MAC/B,IAAI,IAAAC,iBAAW,EAACF,MAAM,CAAC,IAAI,IAAAE,iBAAW,EAACJ,IAAI,CAAC,EAAE;QAC1Cd,SAAS,CAAC,IAAI,CAAC;MACnB,CAAC,MAAM;QACHA,SAAS,CAAC,KAAK,CAAC;MACpB;IACJ,CAAC,CAAC;EACN,CAAC,EAAE,CAACL,MAAM,CAAC,CAAC;EAEZ,IAAAwB,gBAAS,EAAC,YAAM;IACZC,QAAQ,CAACC,gBAAgB,CAAC,iBAAiB,EAAEb,WAAW,CAAC;IACzD,OAAO,YAAM;MACTY,QAAQ,CAACE,mBAAmB,CAAC,iBAAiB,EAAEd,WAAW,CAAC;IAChE,CAAC;EACL,CAAC,EAAE,CAACA,WAAW,CAAC,CAAC;EAEjB,oBACI3B,MAAA,CAAAa,OAAA,CAAA6B,aAAA;IACIC,OAAO,EAAEpB,UAAW;IACpBqB,SAAS,EAAE,oBAAoB,IAAI1B,MAAM,GAAG,QAAQ,GAAG,EAAE,CAAE;IAC3D,cAAW;EAAa,gBAExBlB,MAAA,CAAAa,OAAA,CAAA6B,aAAA;IAAGE,SAAS,EAAC;EAAa,EAAG,CACxB;AAEjB,CAAC;AAACC,OAAA,CAAArC,UAAA,GAAAA,UAAA"}

package/components/ToolbarActions/NumberedListAction.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+/**
+ * Toolbar button action. On click will wrap the content in numbered list style.
+ */
+export declare const NumberedListAction: () => JSX.Element;

package/components/ToolbarActions/NumberedListAction.js

@@ -0,0 +1,89 @@
+"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.NumberedListAction = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _LexicalComposerContext = require("@lexical/react/LexicalComposerContext");
+var _list = require("@lexical/list");
+var _lexical = require("lexical");
+var _utils = require("@lexical/utils");
+/**
+ * Toolbar button action. On click will wrap the content in numbered list style.
+ */
+var NumberedListAction = function NumberedListAction() {
+  var _useLexicalComposerCo = (0, _LexicalComposerContext.useLexicalComposerContext)(),
+    _useLexicalComposerCo2 = (0, _slicedToArray2.default)(_useLexicalComposerCo, 1),
+    editor = _useLexicalComposerCo2[0];
+  var _useState = (0, _react.useState)(editor),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    activeEditor = _useState2[0],
+    setActiveEditor = _useState2[1];
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    isActive = _useState4[0],
+    setIsActive = _useState4[1];
+  var updateToolbar = (0, _react.useCallback)(function () {
+    var selection = (0, _lexical.$getSelection)();
+    if ((0, _lexical.$isRangeSelection)(selection)) {
+      var anchorNode = selection.anchor.getNode();
+      var element = anchorNode.getKey() === "root" ? anchorNode : (0, _utils.$findMatchingParent)(anchorNode, function (e) {
+        var parent = e.getParent();
+        return parent !== null && (0, _lexical.$isRootOrShadowRoot)(parent);
+      });
+      if (element === null) {
+        element = anchorNode.getTopLevelElementOrThrow();
+      }
+      if ((0, _list.$isListNode)(element)) {
+        var parentList = (0, _utils.$getNearestNodeOfType)(anchorNode, _list.ListNode);
+        // get the type of the list that is selected with the cursor
+        var type = parentList ? parentList.getListType() : element.getListType();
+        // set the button as active for numbered list
+        if (type === "number") {
+          setIsActive(true);
+        } else {
+          setIsActive(false);
+        }
+      }
+    }
+  }, [activeEditor]);
+  (0, _react.useEffect)(function () {
+    return (0, _utils.mergeRegister)(activeEditor.registerUpdateListener(function (_ref) {
+      var editorState = _ref.editorState;
+      editorState.read(function () {
+        updateToolbar();
+      });
+    }));
+  }, [activeEditor, editor, updateToolbar]);
+  (0, _react.useEffect)(function () {
+    return editor.registerCommand(_lexical.SELECTION_CHANGE_COMMAND, function (_payload, newEditor) {
+      updateToolbar();
+      setActiveEditor(newEditor);
+      return false;
+    }, _lexical.COMMAND_PRIORITY_CRITICAL);
+  }, [editor, updateToolbar]);
+  var formatNumberedList = function formatNumberedList() {
+    if (!isActive) {
+      // will update the active state in the useEffect
+      editor.dispatchCommand(_list.INSERT_ORDERED_LIST_COMMAND, undefined);
+    } else {
+      editor.dispatchCommand(_list.REMOVE_LIST_COMMAND, undefined);
+      // removing will not update correctly the active state, so we need to set to false manually.
+      setIsActive(false);
+    }
+  };
+  return /*#__PURE__*/_react.default.createElement("button", {
+    onClick: function onClick() {
+      return formatNumberedList();
+    },
+    className: "popup-item spaced " + (isActive ? "active" : ""),
+    "aria-label": "Format text as numbered list"
+  }, /*#__PURE__*/_react.default.createElement("i", {
+    className: "icon numbered-list"
+  }));
+};
+exports.NumberedListAction = NumberedListAction;

package/components/ToolbarActions/NumberedListAction.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireWildcard","require","_LexicalComposerContext","_list","_lexical","_utils","NumberedListAction","_useLexicalComposerCo","useLexicalComposerContext","_useLexicalComposerCo2","_slicedToArray2","default","editor","_useState","useState","_useState2","activeEditor","setActiveEditor","_useState3","_useState4","isActive","setIsActive","updateToolbar","useCallback","selection","$getSelection","$isRangeSelection","anchorNode","anchor","getNode","element","getKey","$findMatchingParent","e","parent","getParent","$isRootOrShadowRoot","getTopLevelElementOrThrow","$isListNode","parentList","$getNearestNodeOfType","ListNode","type","getListType","useEffect","mergeRegister","registerUpdateListener","_ref","editorState","read","registerCommand","SELECTION_CHANGE_COMMAND","_payload","newEditor","COMMAND_PRIORITY_CRITICAL","formatNumberedList","dispatchCommand","INSERT_ORDERED_LIST_COMMAND","undefined","REMOVE_LIST_COMMAND","createElement","onClick","className","exports"],"sources":["NumberedListAction.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useState } from \"react\";\nimport { useLexicalComposerContext } from \"@lexical/react/LexicalComposerContext\";\nimport {\n    $isListNode,\n    INSERT_ORDERED_LIST_COMMAND,\n    ListNode,\n    REMOVE_LIST_COMMAND\n} from \"@lexical/list\";\nimport {\n    $getSelection,\n    $isRangeSelection,\n    $isRootOrShadowRoot,\n    COMMAND_PRIORITY_CRITICAL,\n    SELECTION_CHANGE_COMMAND\n} from \"lexical\";\nimport { $findMatchingParent, $getNearestNodeOfType, mergeRegister } from \"@lexical/utils\";\n\n/**\n * Toolbar button action. On click will wrap the content in numbered list style.\n */\nexport const NumberedListAction = () => {\n    const [editor] = useLexicalComposerContext();\n    const [activeEditor, setActiveEditor] = useState(editor);\n    const [isActive, setIsActive] = useState<boolean>(false);\n\n    const updateToolbar = useCallback(() => {\n        const selection = $getSelection();\n        if ($isRangeSelection(selection)) {\n            const anchorNode = selection.anchor.getNode();\n            let element =\n                anchorNode.getKey() === \"root\"\n                    ? anchorNode\n                    : $findMatchingParent(anchorNode, e => {\n                          const parent = e.getParent();\n                          return parent !== null && $isRootOrShadowRoot(parent);\n                      });\n\n            if (element === null) {\n                element = anchorNode.getTopLevelElementOrThrow();\n            }\n\n            if ($isListNode(element)) {\n                const parentList = $getNearestNodeOfType<ListNode>(anchorNode, ListNode);\n                // get the type of the list that is selected with the cursor\n                const type = parentList ? parentList.getListType() : element.getListType();\n                // set the button as active for numbered list\n                if (type === \"number\") {\n                    setIsActive(true);\n                } else {\n                    setIsActive(false);\n                }\n            }\n        }\n    }, [activeEditor]);\n\n    useEffect(() => {\n        return mergeRegister(\n            activeEditor.registerUpdateListener(({ editorState }) => {\n                editorState.read(() => {\n                    updateToolbar();\n                });\n            })\n        );\n    }, [activeEditor, editor, updateToolbar]);\n\n    useEffect(() => {\n        return editor.registerCommand(\n            SELECTION_CHANGE_COMMAND,\n            (_payload, newEditor) => {\n                updateToolbar();\n                setActiveEditor(newEditor);\n                return false;\n            },\n            COMMAND_PRIORITY_CRITICAL\n        );\n    }, [editor, updateToolbar]);\n\n    const formatNumberedList = () => {\n        if (!isActive) {\n            // will update the active state in the useEffect\n            editor.dispatchCommand(INSERT_ORDERED_LIST_COMMAND, undefined);\n        } else {\n            editor.dispatchCommand(REMOVE_LIST_COMMAND, undefined);\n            // removing will not update correctly the active state, so we need to set to false manually.\n            setIsActive(false);\n        }\n    };\n\n    return (\n        <button\n            onClick={() => formatNumberedList()}\n            className={\"popup-item spaced \" + (isActive ? \"active\" : \"\")}\n            aria-label=\"Format text as numbered list\"\n        >\n            <i className=\"icon numbered-list\" />\n        </button>\n    );\n};\n"],"mappings":"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"}

package/components/ToolbarActions/QuoteAction.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { QuoteNode } from "@lexical/rich-text";
+export declare function $createQuoteNode(): QuoteNode;
+export declare const QuoteAction: () => JSX.Element;

package/components/ToolbarActions/QuoteAction.js

@@ -0,0 +1,66 @@
+"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.$createQuoteNode = $createQuoteNode;
+exports.QuoteAction = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _selection = require("@lexical/selection");
+var _lexical = require("lexical");
+var _LexicalComposerContext = require("@lexical/react/LexicalComposerContext");
+var _richText = require("@lexical/rich-text");
+function $createQuoteNode() {
+  return new _richText.QuoteNode();
+}
+var QuoteAction = function QuoteAction() {
+  var _useLexicalComposerCo = (0, _LexicalComposerContext.useLexicalComposerContext)(),
+    _useLexicalComposerCo2 = (0, _slicedToArray2.default)(_useLexicalComposerCo, 1),
+    editor = _useLexicalComposerCo2[0];
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    isActive = _useState2[0],
+    setIsActive = _useState2[1];
+  var formatToParagraph = function formatToParagraph() {
+    editor.update(function () {
+      var selection = (0, _lexical.$getSelection)();
+      if ((0, _lexical.$isRangeSelection)(selection) || (0, _lexical.DEPRECATED_$isGridSelection)(selection)) {
+        (0, _selection.$wrapNodes)(selection, function () {
+          return (0, _lexical.$createParagraphNode)();
+        });
+      }
+    });
+  };
+  var formatToQuote = function formatToQuote() {
+    editor.update(function () {
+      var selection = (0, _lexical.$getSelection)();
+      if ((0, _lexical.$isRangeSelection)(selection) || (0, _lexical.DEPRECATED_$isGridSelection)(selection)) {
+        (0, _selection.$wrapNodes)(selection, function () {
+          return $createQuoteNode();
+        });
+      }
+    });
+  };
+  var formatText = function formatText() {
+    if (!isActive) {
+      formatToQuote();
+      setIsActive(true);
+      return;
+    }
+    formatToParagraph();
+    setIsActive(false);
+  };
+  return /*#__PURE__*/_react.default.createElement("button", {
+    onClick: function onClick() {
+      return formatText();
+    },
+    className: "popup-item " + (isActive ? "active" : ""),
+    "aria-label": "Format text as quote"
+  }, /*#__PURE__*/_react.default.createElement("i", {
+    className: "icon quote"
+  }));
+};
+exports.QuoteAction = QuoteAction;

package/components/ToolbarActions/QuoteAction.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireWildcard","require","_selection","_lexical","_LexicalComposerContext","_richText","$createQuoteNode","QuoteNode","QuoteAction","_useLexicalComposerCo","useLexicalComposerContext","_useLexicalComposerCo2","_slicedToArray2","default","editor","_useState","useState","_useState2","isActive","setIsActive","formatToParagraph","update","selection","$getSelection","$isRangeSelection","DEPRECATED_$isGridSelection","$wrapNodes","$createParagraphNode","formatToQuote","formatText","createElement","onClick","className","exports"],"sources":["QuoteAction.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport { $wrapNodes } from \"@lexical/selection\";\nimport {\n    $createParagraphNode,\n    $getSelection,\n    $isRangeSelection,\n    DEPRECATED_$isGridSelection\n} from \"lexical\";\nimport { useLexicalComposerContext } from \"@lexical/react/LexicalComposerContext\";\nimport { QuoteNode } from \"@lexical/rich-text\";\n\nexport function $createQuoteNode(): QuoteNode {\n    return new QuoteNode();\n}\n\nexport const QuoteAction = () => {\n    const [editor] = useLexicalComposerContext();\n    const [isActive, setIsActive] = useState<boolean>(false);\n\n    const formatToParagraph = () => {\n        editor.update(() => {\n            const selection = $getSelection();\n\n            if ($isRangeSelection(selection) || DEPRECATED_$isGridSelection(selection)) {\n                $wrapNodes(selection, () => $createParagraphNode());\n            }\n        });\n    };\n\n    const formatToQuote = () => {\n        editor.update(() => {\n            const selection = $getSelection();\n            if ($isRangeSelection(selection) || DEPRECATED_$isGridSelection(selection)) {\n                $wrapNodes(selection, () => $createQuoteNode());\n            }\n        });\n    };\n\n    const formatText = () => {\n        if (!isActive) {\n            formatToQuote();\n            setIsActive(true);\n            return;\n        }\n        formatToParagraph();\n        setIsActive(false);\n    };\n\n    return (\n        <button\n            onClick={() => formatText()}\n            className={\"popup-item \" + (isActive ? \"active\" : \"\")}\n            aria-label=\"Format text as quote\"\n        >\n            <i className=\"icon quote\" />\n        </button>\n    );\n};\n"],"mappings":";;;;;;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,UAAA,GAAAD,OAAA;AACA,IAAAE,QAAA,GAAAF,OAAA;AAMA,IAAAG,uBAAA,GAAAH,OAAA;AACA,IAAAI,SAAA,GAAAJ,OAAA;AAEO,SAASK,gBAAgBA,CAAA,EAAc;EAC1C,OAAO,IAAIC,mBAAS,EAAE;AAC1B;AAEO,IAAMC,WAAW,GAAG,SAAdA,WAAWA,CAAA,EAAS;EAC7B,IAAAC,qBAAA,GAAiB,IAAAC,iDAAyB,GAAE;IAAAC,sBAAA,OAAAC,eAAA,CAAAC,OAAA,EAAAJ,qBAAA;IAArCK,MAAM,GAAAH,sBAAA;EACb,IAAAI,SAAA,GAAgC,IAAAC,eAAQ,EAAU,KAAK,CAAC;IAAAC,UAAA,OAAAL,eAAA,CAAAC,OAAA,EAAAE,SAAA;IAAjDG,QAAQ,GAAAD,UAAA;IAAEE,WAAW,GAAAF,UAAA;EAE5B,IAAMG,iBAAiB,GAAG,SAApBA,iBAAiBA,CAAA,EAAS;IAC5BN,MAAM,CAACO,MAAM,CAAC,YAAM;MAChB,IAAMC,SAAS,GAAG,IAAAC,sBAAa,GAAE;MAEjC,IAAI,IAAAC,0BAAiB,EAACF,SAAS,CAAC,IAAI,IAAAG,oCAA2B,EAACH,SAAS,CAAC,EAAE;QACxE,IAAAI,qBAAU,EAACJ,SAAS,EAAE;UAAA,OAAM,IAAAK,6BAAoB,GAAE;QAAA,EAAC;MACvD;IACJ,CAAC,CAAC;EACN,CAAC;EAED,IAAMC,aAAa,GAAG,SAAhBA,aAAaA,CAAA,EAAS;IACxBd,MAAM,CAACO,MAAM,CAAC,YAAM;MAChB,IAAMC,SAAS,GAAG,IAAAC,sBAAa,GAAE;MACjC,IAAI,IAAAC,0BAAiB,EAACF,SAAS,CAAC,IAAI,IAAAG,oCAA2B,EAACH,SAAS,CAAC,EAAE;QACxE,IAAAI,qBAAU,EAACJ,SAAS,EAAE;UAAA,OAAMhB,gBAAgB,EAAE;QAAA,EAAC;MACnD;IACJ,CAAC,CAAC;EACN,CAAC;EAED,IAAMuB,UAAU,GAAG,SAAbA,UAAUA,CAAA,EAAS;IACrB,IAAI,CAACX,QAAQ,EAAE;MACXU,aAAa,EAAE;MACfT,WAAW,CAAC,IAAI,CAAC;MACjB;IACJ;IACAC,iBAAiB,EAAE;IACnBD,WAAW,CAAC,KAAK,CAAC;EACtB,CAAC;EAED,oBACIpB,MAAA,CAAAc,OAAA,CAAAiB,aAAA;IACIC,OAAO,EAAE,SAAAA,QAAA;MAAA,OAAMF,UAAU,EAAE;IAAA,CAAC;IAC5BG,SAAS,EAAE,aAAa,IAAId,QAAQ,GAAG,QAAQ,GAAG,EAAE,CAAE;IACtD,cAAW;EAAsB,gBAEjCnB,MAAA,CAAAc,OAAA,CAAAiB,aAAA;IAAGE,SAAS,EAAC;EAAY,EAAG,CACvB;AAEjB,CAAC;AAACC,OAAA,CAAAzB,WAAA,GAAAA,WAAA"}