@webiny/lexical-editor 0.0.0-unstable.d65ec29d44

package/components/Toolbar/Toolbar.css

@@ -0,0 +1,414 @@
+.floating-text-format-popup {
+  display: flex;
+  padding: 4px;
+  vertical-align: middle;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 30;
+  opacity: 0;
+  background-color: #fff;
+  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.3);
+  border-radius: 8px;
+  transition: opacity 0.5s;
+  height: 35px;
+  will-change: transform;
+}
+
+.floating-text-format-popup button.popup-item {
+  border: 0;
+  display: flex;
+  background: none;
+  border-radius: 10px;
+  padding: 8px;
+  cursor: pointer;
+  vertical-align: middle;
+}
+
+.floating-text-format-popup button.popup-item:disabled {
+  cursor: not-allowed;
+}
+
+.floating-text-format-popup button.popup-item.spaced {
+  margin-right: 2px;
+}
+
+.floating-text-format-popup button.popup-item i.format {
+  background-size: contain;
+  display: inline-block;
+  height: 18px;
+  width: 18px;
+  margin-top: 2px;
+  vertical-align: -0.25em;
+  display: flex;
+  opacity: 0.6;
+}
+
+.floating-text-format-popup button.popup-item:disabled i.format {
+  opacity: 0.2;
+}
+
+.floating-text-format-popup button.popup-item.active {
+  background-color: rgba(223, 232, 250, 0.3);
+}
+
+.floating-text-format-popup button.popup-item.active i {
+  opacity: 1;
+}
+
+.floating-text-format-popup .popup-item:hover:not([disabled]) {
+  background-color: #eee;
+}
+
+.floating-text-format-popup select.popup-item {
+  border: 0;
+  display: flex;
+  background: none;
+  border-radius: 10px;
+  padding: 8px;
+  vertical-align: middle;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  width: 70px;
+  font-size: 14px;
+  color: #777;
+  text-overflow: ellipsis;
+}
+
+.floating-text-format-popup select.code-language {
+  text-transform: capitalize;
+  width: 130px;
+}
+
+.floating-text-format-popup .popup-item .text {
+  display: flex;
+  line-height: 20px;
+  width: 200px;
+  vertical-align: middle;
+  font-size: 14px;
+  color: #777;
+  text-overflow: ellipsis;
+  width: 70px;
+  overflow: hidden;
+  height: 20px;
+  text-align: left;
+}
+
+.floating-text-format-popup .popup-item .icon {
+  display: flex;
+  width: 20px;
+  height: 20px;
+  user-select: none;
+  margin-right: 8px;
+  line-height: 16px;
+  background-size: contain;
+}
+
+.floating-text-format-popup i.chevron-down {
+  margin-top: 3px;
+  width: 16px;
+  height: 16px;
+  display: flex;
+  user-select: none;
+}
+
+.floating-text-format-popup i.chevron-down.inside {
+  width: 16px;
+  height: 16px;
+  display: flex;
+  margin-left: -25px;
+  margin-top: 11px;
+  margin-right: 10px;
+  pointer-events: none;
+}
+
+.floating-text-format-popup .divider {
+  width: 1px;
+  background-color: #eee;
+  margin: 0 4px;
+}
+
+i.bold {
+  background-image: url("../../images/icons/type-bold.svg");
+}
+
+i.italic {
+  background-image: url("../../images/icons/type-italic.svg");
+}
+
+i.code {
+  background-image: url("../../images/icons/code.svg");
+}
+
+i.underline {
+  background-image: url("../../images/icons/type-underline.svg");
+}
+
+i.strikethrough {
+  background-image: url("../../images/icons/type-strikethrough.svg");
+}
+
+i.link {
+  background-image: url("../../images/icons/link.svg");
+}
+
+i.quote {
+  background-image: url("../../images/icons/chat-square-quote.svg");
+}
+
+.icon.left-align,
+i.left-align {
+  background-image: url("../../images/icons/text-left.svg");
+}
+
+i.center-align {
+  background-image: url("../../images/icons/text-center.svg");
+}
+
+i.right-align {
+  background-image: url("../../images/icons/text-right.svg");
+}
+
+i.chevron-down {
+  background-color: transparent;
+  background-size: contain;
+  display: inline-block;
+  height: 8px;
+  width: 8px;
+  background-image: url("../../images/icons/chevron-down.svg");
+}
+
+
+.icon.bullet-list,
+.icon.bullet {
+  background-image: url("../../images/icons/list-ul.svg");
+}
+
+.icon.numbered-list,
+.icon.number {
+  background-image: url("../../images/icons/list-ol.svg");
+}
+
+.link-editor .button.active,
+.toolbar .button.active {
+  background-color: rgb(223, 232, 250);
+}
+
+
+.floating-text-format-popup button.toolbar-item {
+  border: 0;
+  display: flex;
+  background: none;
+  border-radius: 10px;
+  padding: 8px;
+  cursor: pointer;
+  vertical-align: middle;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.floating-text-format-popup button.toolbar-item:disabled {
+  cursor: not-allowed;
+}
+
+.floating-text-format-popup button.toolbar-item.spaced {
+  margin-right: 2px;
+}
+
+.floating-text-format-popup button.toolbar-item i.format {
+  background-size: contain;
+  display: inline-block;
+  height: 18px;
+  width: 18px;
+  vertical-align: -0.25em;
+  display: flex;
+  opacity: 0.6;
+}
+
+.floating-text-format-popup button.toolbar-item:disabled .icon,
+.floating-text-format-popup button.toolbar-item:disabled .text,
+.floating-text-format-popup button.toolbar-item:disabled i.format,
+.floating-text-format-popup button.toolbar-item:disabled .chevron-down {
+  opacity: 0.2;
+}
+
+.floating-text-format-popup button.toolbar-item.active {
+  background-color: rgba(223, 232, 250, 0.3);
+}
+
+.floating-text-format-popup button.toolbar-item.active i {
+  opacity: 1;
+}
+
+.floating-text-format-popup .toolbar-item:hover:not([disabled]) {
+  background-color: #eee;
+}
+
+.floating-text-format-popup .toolbar-item.font-family .text {
+  display: block;
+  max-width: 40px;
+}
+
+.floating-text-format-popup .code-language {
+  width: 150px;
+}
+
+.floating-text-format-popup .toolbar-item .text {
+  display: flex;
+  line-height: 20px;
+  vertical-align: middle;
+  font-size: 14px;
+  color: #777;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  height: 20px;
+  text-align: left;
+  padding-right: 10px;
+}
+
+.floating-text-format-popup .toolbar-item .icon {
+  display: flex;
+  width: 20px;
+  height: 20px;
+  user-select: none;
+  margin-right: 8px;
+  line-height: 16px;
+  background-size: contain;
+}
+
+.floating-text-format-popup i.chevron-down {
+  margin-top: 3px;
+  width: 16px;
+  height: 16px;
+  display: flex;
+  user-select: none;
+}
+
+.floating-text-format-popup i.chevron-down.inside {
+  width: 16px;
+  height: 16px;
+  display: flex;
+  margin-left: -25px;
+  margin-top: 11px;
+  margin-right: 10px;
+  pointer-events: none;
+}
+
+.toolbar .divider {
+  width: 1px;
+  background-color: #eee;
+  margin: 0 4px;
+}
+.lexical-dropdown-container {
+  position: absolute;
+  bottom: -5px;
+  left: 0;
+}
+
+.lexical-dropdown {
+  z-index: 10;
+  display: block;
+  position: fixed;
+  box-shadow: 0 12px 28px 0 rgba(0, 0, 0, 0.2), 0 2px 4px 0 rgba(0, 0, 0, 0.1),
+  inset 0 0 0 1px rgba(255, 255, 255, 0.5);
+  border-radius: 8px;
+  min-height: 40px;
+  background-color: #fff;
+  max-height: 250px;
+  overflow: hidden;
+  overflow-y: auto;
+}
+
+.lexical-dropdown .item {
+  margin: 0 8px 0 8px;
+  padding: 8px;
+  color: #050505;
+  cursor: pointer;
+  line-height: 16px;
+  font-size: 15px;
+  display: flex;
+  align-content: center;
+  flex-direction: row;
+  flex-shrink: 0;
+  justify-content: space-between;
+  background-color: #fff;
+  border-radius: 8px;
+  border: 0;
+  max-width: 250px;
+  min-width: 100px;
+}
+
+.lexical-dropdown .item.fontsize-item,
+.lexical-dropdown .item.fontsize-item .text {
+  min-width: unset;
+}
+
+.lexical-dropdown .item .active {
+  display: flex;
+  width: 20px;
+  height: 20px;
+  background-size: contain;
+}
+
+.lexical-dropdown .item:first-child {
+  margin-top: 8px;
+}
+
+.lexical-dropdown .item:last-child {
+  margin-bottom: 8px;
+}
+
+.lexical-dropdown .item:hover {
+  background-color: #eee;
+}
+
+.lexical-dropdown .item .text {
+  display: flex;
+  line-height: 20px;
+  flex-grow: 1;
+  min-width: 150px;
+}
+
+.lexical-dropdown .item .icon {
+  display: flex;
+  width: 20px;
+  height: 20px;
+  user-select: none;
+  margin-right: 12px;
+  line-height: 16px;
+  background-size: contain;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+
+.lexical-dropdown .divider {
+  width: auto;
+  background-color: #eee;
+  margin: 4px 8px;
+  height: 1px;
+}
+
+@media screen and (max-width: 1100px) {
+  .dropdown-button-text {
+    display: none !important;
+  }
+  .font-size .dropdown-button-text {
+    display: flex !important;
+  }
+  .code-language .dropdown-button-text {
+    display: flex !important;
+  }
+}
+
+ button.item i {
+  opacity: 0.6;
+}
+
+button.item.dropdown-item-active {
+  background-color: rgba(223, 232, 250, 0.3);
+}
+
+button.item.dropdown-item-active i {
+  opacity: 1;
+}

package/components/Toolbar/Toolbar.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="web" />
+import React from "react";
+import "./Toolbar.css";
+import { ToolbarType } from "../../types";
+export interface ToolbarProps {
+    type: ToolbarType;
+    anchorElem: HTMLElement;
+    children?: React.ReactNode;
+}
+/**
+ * @description Main toolbar container
+ */
+export declare const Toolbar: import("@webiny/react-composition").ComposableFC<ToolbarProps>;

package/components/Toolbar/Toolbar.js

@@ -0,0 +1,161 @@
+"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.Toolbar = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _lexical = require("lexical");
+var _reactComposition = require("@webiny/react-composition");
+var _link = require("@lexical/link");
+var _reactDom = require("react-dom");
+var _utils = require("@lexical/utils");
+var _code = require("@lexical/code");
+var _LexicalComposerContext = require("@lexical/react/LexicalComposerContext");
+require("./Toolbar.css");
+var _getDOMRangeRect = require("../../utils/getDOMRangeRect");
+var _setFloatingElemPosition = require("../../utils/setFloatingElemPosition");
+var _getSelectedNode = require("../../utils/getSelectedNode");
+var _useRichTextEditor2 = require("../../hooks/useRichTextEditor");
+var FloatingToolbar = function FloatingToolbar(_ref) {
+  var children = _ref.children,
+    anchorElem = _ref.anchorElem,
+    editor = _ref.editor;
+  var popupCharStylesEditorRef = (0, _react.useRef)(null);
+  var updateTextFormatFloatingToolbar = (0, _react.useCallback)(function () {
+    var selection = (0, _lexical.$getSelection)();
+    var popupCharStylesEditorElem = popupCharStylesEditorRef.current;
+    var nativeSelection = window.getSelection();
+    if (popupCharStylesEditorElem === null) {
+      return;
+    }
+    var isLink = false;
+    if ((0, _lexical.$isRangeSelection)(selection)) {
+      var node = (0, _getSelectedNode.getSelectedNode)(selection);
+      // Update links
+      var parent = node.getParent();
+      if ((0, _link.$isLinkNode)(parent) || (0, _link.$isLinkNode)(node)) {
+        isLink = true;
+      }
+    }
+    var rootElement = editor.getRootElement();
+    if (selection !== null && nativeSelection !== null && !nativeSelection.isCollapsed && rootElement !== null && rootElement.contains(nativeSelection.anchorNode) && !isLink) {
+      var rangeRect = (0, _getDOMRangeRect.getDOMRangeRect)(nativeSelection, rootElement);
+      (0, _setFloatingElemPosition.setFloatingElemPosition)(rangeRect, popupCharStylesEditorElem, anchorElem);
+    }
+  }, [editor, anchorElem]);
+  (0, _react.useEffect)(function () {
+    var scrollerElem = anchorElem.parentElement;
+    var update = function update() {
+      editor.getEditorState().read(function () {
+        updateTextFormatFloatingToolbar();
+      });
+    };
+    window.addEventListener("resize", update);
+    if (scrollerElem) {
+      scrollerElem.addEventListener("scroll", update);
+    }
+    return function () {
+      window.removeEventListener("resize", update);
+      if (scrollerElem) {
+        scrollerElem.removeEventListener("scroll", update);
+      }
+    };
+  }, [editor, updateTextFormatFloatingToolbar, anchorElem]);
+  (0, _react.useEffect)(function () {
+    editor.getEditorState().read(function () {
+      updateTextFormatFloatingToolbar();
+    });
+    return (0, _utils.mergeRegister)(editor.registerUpdateListener(function (_ref2) {
+      var editorState = _ref2.editorState;
+      editorState.read(function () {
+        updateTextFormatFloatingToolbar();
+      });
+    }), editor.registerCommand(_lexical.SELECTION_CHANGE_COMMAND, function () {
+      updateTextFormatFloatingToolbar();
+      return false;
+    }, _lexical.COMMAND_PRIORITY_LOW));
+  }, [editor, updateTextFormatFloatingToolbar]);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    ref: popupCharStylesEditorRef,
+    className: "floating-text-format-popup"
+  }, editor.isEditable() && children);
+};
+var useToolbar = function useToolbar(_ref3) {
+  var editor = _ref3.editor,
+    _ref3$anchorElem = _ref3.anchorElem,
+    anchorElem = _ref3$anchorElem === void 0 ? document.body : _ref3$anchorElem,
+    type = _ref3.type,
+    children = _ref3.children;
+  var _useRichTextEditor = (0, _useRichTextEditor2.useRichTextEditor)(),
+    nodeIsText = _useRichTextEditor.nodeIsText,
+    setNodeIsText = _useRichTextEditor.setNodeIsText;
+  var updatePopup = (0, _react.useCallback)(function () {
+    editor.getEditorState().read(function () {
+      // Should not to pop up the floating toolbar when using IME input
+      if (editor.isComposing()) {
+        return;
+      }
+      var selection = (0, _lexical.$getSelection)();
+      var nativeSelection = window.getSelection();
+      var rootElement = editor.getRootElement();
+      if (nativeSelection !== null && (!(0, _lexical.$isRangeSelection)(selection) || rootElement === null || !rootElement.contains(nativeSelection.anchorNode))) {
+        setNodeIsText(false);
+        return;
+      }
+      if (!(0, _lexical.$isRangeSelection)(selection)) {
+        return;
+      }
+      var node = (0, _getSelectedNode.getSelectedNode)(selection);
+      if (!(0, _code.$isCodeHighlightNode)(selection.anchor.getNode()) && selection.getTextContent() !== "") {
+        setNodeIsText((0, _lexical.$isTextNode)(node));
+      } else {
+        setNodeIsText(false);
+      }
+    });
+  }, [editor]);
+  (0, _react.useEffect)(function () {
+    document.addEventListener("selectionchange", updatePopup);
+    return function () {
+      document.removeEventListener("selectionchange", updatePopup);
+    };
+  }, [updatePopup]);
+  (0, _react.useEffect)(function () {
+    return (0, _utils.mergeRegister)(editor.registerUpdateListener(function () {
+      updatePopup();
+    }), editor.registerRootListener(function () {
+      if (editor.getRootElement() === null) {
+        setNodeIsText(false);
+      }
+    }));
+  }, [editor, updatePopup]);
+  if (!nodeIsText) {
+    return null;
+  }
+  return /*#__PURE__*/(0, _reactDom.createPortal)( /*#__PURE__*/_react.default.createElement(FloatingToolbar, {
+    type: type,
+    anchorElem: anchorElem,
+    editor: editor
+  }, children), anchorElem);
+};
+/**
+ * @description Main toolbar container
+ */
+var Toolbar = (0, _reactComposition.makeComposable)("Toolbar", function (_ref4) {
+  var anchorElem = _ref4.anchorElem,
+    type = _ref4.type,
+    children = _ref4.children;
+  var _useLexicalComposerCo = (0, _LexicalComposerContext.useLexicalComposerContext)(),
+    _useLexicalComposerCo2 = (0, _slicedToArray2.default)(_useLexicalComposerCo, 1),
+    editor = _useLexicalComposerCo2[0];
+  return useToolbar({
+    editor: editor,
+    anchorElem: anchorElem,
+    type: type,
+    children: children
+  });
+});
+exports.Toolbar = Toolbar;

package/components/Toolbar/Toolbar.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireWildcard","require","_lexical","_reactComposition","_link","_reactDom","_utils","_code","_LexicalComposerContext","_getDOMRangeRect","_setFloatingElemPosition","_getSelectedNode","_useRichTextEditor2","FloatingToolbar","_ref","children","anchorElem","editor","popupCharStylesEditorRef","useRef","updateTextFormatFloatingToolbar","useCallback","selection","$getSelection","popupCharStylesEditorElem","current","nativeSelection","window","getSelection","isLink","$isRangeSelection","node","getSelectedNode","parent","getParent","$isLinkNode","rootElement","getRootElement","isCollapsed","contains","anchorNode","rangeRect","getDOMRangeRect","setFloatingElemPosition","useEffect","scrollerElem","parentElement","update","getEditorState","read","addEventListener","removeEventListener","mergeRegister","registerUpdateListener","_ref2","editorState","registerCommand","SELECTION_CHANGE_COMMAND","COMMAND_PRIORITY_LOW","default","createElement","ref","className","isEditable","useToolbar","_ref3","_ref3$anchorElem","document","body","type","_useRichTextEditor","useRichTextEditor","nodeIsText","setNodeIsText","updatePopup","isComposing","$isCodeHighlightNode","anchor","getNode","getTextContent","$isTextNode","registerRootListener","createPortal","Toolbar","makeComposable","_ref4","_useLexicalComposerCo","useLexicalComposerContext","_useLexicalComposerCo2","_slicedToArray2","exports"],"sources":["Toolbar.tsx"],"sourcesContent":["import React, { FC, useCallback, useEffect, useRef } from \"react\";\nimport {\n    $getSelection,\n    $isRangeSelection,\n    $isTextNode,\n    COMMAND_PRIORITY_LOW,\n    LexicalEditor,\n    SELECTION_CHANGE_COMMAND\n} from \"lexical\";\nimport { makeComposable } from \"@webiny/react-composition\";\nimport { $isLinkNode } from \"@lexical/link\";\nimport { createPortal } from \"react-dom\";\nimport { mergeRegister } from \"@lexical/utils\";\nimport { $isCodeHighlightNode } from \"@lexical/code\";\nimport { useLexicalComposerContext } from \"@lexical/react/LexicalComposerContext\";\nimport \"./Toolbar.css\";\nimport { ToolbarType } from \"~/types\";\nimport { getDOMRangeRect } from \"~/utils/getDOMRangeRect\";\nimport { setFloatingElemPosition } from \"~/utils/setFloatingElemPosition\";\nimport { getSelectedNode } from \"~/utils/getSelectedNode\";\nimport { useRichTextEditor } from \"~/hooks/useRichTextEditor\";\n\ninterface FloatingToolbarProps {\n    type: ToolbarType;\n    anchorElem: HTMLElement;\n    children?: React.ReactNode;\n    editor: LexicalEditor;\n}\n\nconst FloatingToolbar: FC<FloatingToolbarProps> = ({ children, anchorElem, editor }) => {\n    const popupCharStylesEditorRef = useRef<HTMLDivElement | null>(null);\n\n    const updateTextFormatFloatingToolbar = useCallback(() => {\n        const selection = $getSelection();\n\n        const popupCharStylesEditorElem = popupCharStylesEditorRef.current;\n        const nativeSelection = window.getSelection();\n\n        if (popupCharStylesEditorElem === null) {\n            return;\n        }\n\n        let isLink = false;\n        if ($isRangeSelection(selection)) {\n            const node = getSelectedNode(selection);\n            // Update links\n            const parent = node.getParent();\n\n            if ($isLinkNode(parent) || $isLinkNode(node)) {\n                isLink = true;\n            }\n        }\n\n        const rootElement = editor.getRootElement();\n        if (\n            selection !== null &&\n            nativeSelection !== null &&\n            !nativeSelection.isCollapsed &&\n            rootElement !== null &&\n            rootElement.contains(nativeSelection.anchorNode) &&\n            !isLink\n        ) {\n            const rangeRect = getDOMRangeRect(nativeSelection, rootElement);\n            setFloatingElemPosition(rangeRect, popupCharStylesEditorElem, anchorElem);\n        }\n    }, [editor, anchorElem]);\n\n    useEffect(() => {\n        const scrollerElem = anchorElem.parentElement;\n\n        const update = () => {\n            editor.getEditorState().read(() => {\n                updateTextFormatFloatingToolbar();\n            });\n        };\n\n        window.addEventListener(\"resize\", update);\n        if (scrollerElem) {\n            scrollerElem.addEventListener(\"scroll\", update);\n        }\n\n        return () => {\n            window.removeEventListener(\"resize\", update);\n            if (scrollerElem) {\n                scrollerElem.removeEventListener(\"scroll\", update);\n            }\n        };\n    }, [editor, updateTextFormatFloatingToolbar, anchorElem]);\n\n    useEffect(() => {\n        editor.getEditorState().read(() => {\n            updateTextFormatFloatingToolbar();\n        });\n        return mergeRegister(\n            editor.registerUpdateListener(({ editorState }) => {\n                editorState.read(() => {\n                    updateTextFormatFloatingToolbar();\n                });\n            }),\n\n            editor.registerCommand(\n                SELECTION_CHANGE_COMMAND,\n                () => {\n                    updateTextFormatFloatingToolbar();\n                    return false;\n                },\n                COMMAND_PRIORITY_LOW\n            )\n        );\n    }, [editor, updateTextFormatFloatingToolbar]);\n\n    return (\n        <div ref={popupCharStylesEditorRef} className=\"floating-text-format-popup\">\n            {editor.isEditable() && children}\n        </div>\n    );\n};\n\ninterface useToolbarProps {\n    editor: LexicalEditor;\n    type: ToolbarType;\n    anchorElem: HTMLElement;\n    children?: React.ReactNode;\n}\n\nconst useToolbar: FC<useToolbarProps> = ({\n    editor,\n    anchorElem = document.body,\n    type,\n    children\n}): JSX.Element | null => {\n    const { nodeIsText, setNodeIsText } = useRichTextEditor();\n\n    const updatePopup = useCallback(() => {\n        editor.getEditorState().read(() => {\n            // Should not to pop up the floating toolbar when using IME input\n            if (editor.isComposing()) {\n                return;\n            }\n            const selection = $getSelection();\n            const nativeSelection = window.getSelection();\n            const rootElement = editor.getRootElement();\n\n            if (\n                nativeSelection !== null &&\n                (!$isRangeSelection(selection) ||\n                    rootElement === null ||\n                    !rootElement.contains(nativeSelection.anchorNode))\n            ) {\n                setNodeIsText(false);\n                return;\n            }\n\n            if (!$isRangeSelection(selection)) {\n                return;\n            }\n\n            const node = getSelectedNode(selection);\n\n            if (\n                !$isCodeHighlightNode(selection.anchor.getNode()) &&\n                selection.getTextContent() !== \"\"\n            ) {\n                setNodeIsText($isTextNode(node));\n            } else {\n                setNodeIsText(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    useEffect(() => {\n        return mergeRegister(\n            editor.registerUpdateListener(() => {\n                updatePopup();\n            }),\n            editor.registerRootListener(() => {\n                if (editor.getRootElement() === null) {\n                    setNodeIsText(false);\n                }\n            })\n        );\n    }, [editor, updatePopup]);\n\n    if (!nodeIsText) {\n        return null;\n    }\n\n    return createPortal(\n        <FloatingToolbar type={type} anchorElem={anchorElem} editor={editor}>\n            {children}\n        </FloatingToolbar>,\n        anchorElem\n    );\n};\n\nexport interface ToolbarProps {\n    type: ToolbarType;\n    anchorElem: HTMLElement;\n    children?: React.ReactNode;\n}\n\n/**\n * @description Main toolbar container\n */\nexport const Toolbar = makeComposable<ToolbarProps>(\n    \"Toolbar\",\n    ({ anchorElem, type, children }): JSX.Element | null => {\n        const [editor] = useLexicalComposerContext();\n        return useToolbar({ editor, anchorElem, type, children });\n    }\n);\n"],"mappings":"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"}

package/components/ToolbarActions/BoldAction.d.ts

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

package/components/ToolbarActions/BoldAction.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.BoldAction = 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 as button that is bold.
+ */
+var BoldAction = function BoldAction() {
+  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),
+    isBold = _useState2[0],
+    setIsBold = _useState2[1];
+  var handleClick = function handleClick() {
+    editor.dispatchCommand(_lexical.FORMAT_TEXT_COMMAND, "bold");
+    setIsBold(!isBold);
+  };
+  return /*#__PURE__*/_react.default.createElement("button", {
+    onClick: function onClick() {
+      return handleClick();
+    },
+    className: "popup-item spaced " + (isBold ? "active" : ""),
+    "aria-label": "Format text as bold"
+  }, /*#__PURE__*/_react.default.createElement("i", {
+    className: "format bold"
+  }));
+};
+exports.BoldAction = BoldAction;

package/components/ToolbarActions/BoldAction.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireWildcard","require","_LexicalComposerContext","_lexical","BoldAction","_useLexicalComposerCo","useLexicalComposerContext","_useLexicalComposerCo2","_slicedToArray2","default","editor","_useState","useState","_useState2","isBold","setIsBold","handleClick","dispatchCommand","FORMAT_TEXT_COMMAND","createElement","onClick","className","exports"],"sources":["BoldAction.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 as button that is bold.\n */\nexport const BoldAction = () => {\n    const [editor] = useLexicalComposerContext();\n    const [isBold, setIsBold] = useState(false);\n    const handleClick = () => {\n        editor.dispatchCommand(FORMAT_TEXT_COMMAND, \"bold\");\n        setIsBold(!isBold);\n    };\n\n    return (\n        <button\n            onClick={() => handleClick()}\n            className={\"popup-item spaced \" + (isBold ? \"active\" : \"\")}\n            aria-label=\"Format text as bold\"\n        >\n            <i className=\"format bold\" />\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,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,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,UAAA,GAAAA,UAAA"}

package/components/ToolbarActions/BulletListAction.d.ts

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