musae 0.2.26 → 0.3.0

package/dist/components/rich-text-editor/plugins/markdown-shortcut/index.cjs

@@ -0,0 +1,16 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
+var LexicalMarkdownShortcutPlugin = require('@lexical/react/LexicalMarkdownShortcutPlugin');
+var React = require('react');
+var markdown = require('@lexical/markdown');
+
+var TRANSFORMERS = [].concat(_toConsumableArray(markdown.ELEMENT_TRANSFORMERS), _toConsumableArray(markdown.TEXT_FORMAT_TRANSFORMERS), _toConsumableArray(markdown.TEXT_MATCH_TRANSFORMERS));
+var MarkdownShortcutPlugin = function MarkdownShortcutPlugin() {
+  return /*#__PURE__*/React.createElement(LexicalMarkdownShortcutPlugin.MarkdownShortcutPlugin, {
+    transformers: TRANSFORMERS
+  });
+};
+
+exports.TRANSFORMERS = TRANSFORMERS;
+exports.default = MarkdownShortcutPlugin;

package/dist/components/rich-text-editor/plugins/markdown-shortcut/{index.js → index.mjs}

@@ -1,14 +1,13 @@
 import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
-import { MarkdownShortcutPlugin as MarkdownShortcutPlugin$2 } from '@lexical/react/LexicalMarkdownShortcutPlugin';
+import { MarkdownShortcutPlugin as MarkdownShortcutPlugin$1 } from '@lexical/react/LexicalMarkdownShortcutPlugin';
 import { createElement } from 'react';
 import { ELEMENT_TRANSFORMERS, TEXT_FORMAT_TRANSFORMERS, TEXT_MATCH_TRANSFORMERS } from '@lexical/markdown';
 
 var TRANSFORMERS = [].concat(_toConsumableArray(ELEMENT_TRANSFORMERS), _toConsumableArray(TEXT_FORMAT_TRANSFORMERS), _toConsumableArray(TEXT_MATCH_TRANSFORMERS));
 var MarkdownShortcutPlugin = function MarkdownShortcutPlugin() {
-  return /*#__PURE__*/createElement(MarkdownShortcutPlugin$2, {
+  return /*#__PURE__*/createElement(MarkdownShortcutPlugin$1, {
     transformers: TRANSFORMERS
   });
 };
-var MarkdownShortcutPlugin$1 = MarkdownShortcutPlugin;
 
-export { TRANSFORMERS, MarkdownShortcutPlugin$1 as default };
+export { TRANSFORMERS, MarkdownShortcutPlugin as default };

package/dist/components/rich-text-editor/plugins/toolbar/hooks.cjs

@@ -0,0 +1,265 @@
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var link = require('@lexical/link');
+var LexicalComposerContext = require('@lexical/react/LexicalComposerContext');
+var lexical = require('lexical');
+var React = require('react');
+var selection = require('@lexical/selection');
+var richText = require('@lexical/rich-text');
+var list = require('@lexical/list');
+var code = require('@lexical/code');
+var notes = require('../../../icon/icons/editor/notes.cjs');
+var formatStrikethrough = require('../../../icon/icons/editor/format-strikethrough.cjs');
+var subscript = require('../../../icon/icons/editor/subscript.cjs');
+var superscript = require('../../../icon/icons/editor/superscript.cjs');
+var checklist = require('../../../icon/icons/editor/checklist.cjs');
+var looksOne = require('../../../icon/icons/image/looks-one.cjs');
+var looksTwo = require('../../../icon/icons/image/looks-two.cjs');
+var looksThree = require('../../../icon/icons/image/looks-three.cjs');
+var looksFour = require('../../../icon/icons/image/looks-four.cjs');
+var looksFive = require('../../../icon/icons/image/looks-five.cjs');
+var looksSix = require('../../../icon/icons/image/looks-six.cjs');
+
+var DEFAULT_FONT_SIZE = "15px";
+/**
+ * @description
+ * toolbar event handlers
+ */
+var useHandlers = function useHandlers(_ref) {
+  var isLink = _ref.isLink;
+  var _useLexicalComposerCo = LexicalComposerContext.useLexicalComposerContext(),
+    _useLexicalComposerCo2 = _slicedToArray(_useLexicalComposerCo, 1),
+    editor = _useLexicalComposerCo2[0];
+  var bold = function bold() {
+    editor.dispatchCommand(lexical.FORMAT_TEXT_COMMAND, "bold");
+  };
+  var redo = function redo() {
+    editor.dispatchCommand(lexical.REDO_COMMAND, void 0);
+  };
+  var undo = function undo() {
+    editor.dispatchCommand(lexical.UNDO_COMMAND, void 0);
+  };
+  var code = function code() {
+    editor.dispatchCommand(lexical.FORMAT_TEXT_COMMAND, "code");
+  };
+  var italic = function italic() {
+    editor.dispatchCommand(lexical.FORMAT_TEXT_COMMAND, "italic");
+  };
+  var underline = function underline() {
+    editor.dispatchCommand(lexical.FORMAT_TEXT_COMMAND, "underline");
+  };
+  var insertLink = function insertLink() {
+    if (!isLink) {
+      editor.dispatchCommand(link.TOGGLE_LINK_COMMAND, "https://");
+    } else {
+      editor.dispatchCommand(link.TOGGLE_LINK_COMMAND, null);
+    }
+  };
+  return {
+    bold: bold,
+    redo: redo,
+    undo: undo,
+    code: code,
+    italic: italic,
+    underline: underline,
+    insertLink: insertLink
+  };
+};
+/**
+ * @description
+ * formats
+ */
+var useBlockFormats = function useBlockFormats() {
+  var _useLexicalComposerCo3 = LexicalComposerContext.useLexicalComposerContext(),
+    _useLexicalComposerCo4 = _slicedToArray(_useLexicalComposerCo3, 1),
+    editor = _useLexicalComposerCo4[0];
+  var blockFormats = React.useMemo(function () {
+    return new Map([["paragraph", {
+      label: "Normal",
+      prefix: /*#__PURE__*/React.createElement(notes.default, null)
+    }], ["h1", {
+      label: "Heading 1",
+      prefix: /*#__PURE__*/React.createElement(looksOne.default, null)
+    }], ["h2", {
+      label: "Heading 2",
+      prefix: /*#__PURE__*/React.createElement(looksTwo.default, null)
+    }], ["h3", {
+      label: "Heading 3",
+      prefix: /*#__PURE__*/React.createElement(looksThree.default, null)
+    }], ["h4", {
+      label: "Heading 4",
+      prefix: /*#__PURE__*/React.createElement(looksFour.default, null)
+    }], ["h5", {
+      label: "Heading 5",
+      prefix: /*#__PURE__*/React.createElement(looksFive.default, null)
+    }], ["h6", {
+      label: "Heading 6",
+      prefix: /*#__PURE__*/React.createElement(looksSix.default, null)
+    }], ["check", {
+      label: "Check List",
+      prefix: /*#__PURE__*/React.createElement(checklist.default, null)
+    }], ["code-block", {
+      label: "Check List",
+      prefix: /*#__PURE__*/React.createElement(checklist.default, null)
+    }]]);
+  }, []);
+  var _useState = React.useState("paragraph"),
+    _useState2 = _slicedToArray(_useState, 2),
+    blockFormat = _useState2[0],
+    setBlockFormat = _useState2[1];
+  var formatParagraph = React.useCallback(function () {
+    editor.update(function () {
+      var selection$1 = lexical.$getSelection();
+      selection.$setBlocksType(selection$1, function () {
+        return lexical.$createParagraphNode();
+      });
+    });
+  }, [editor]);
+  var formatBlock = function formatBlock(_blockFormat) {
+    if (_blockFormat === blockFormat) return;
+    if (_blockFormat === "paragraph") {
+      formatParagraph();
+      return;
+    }
+    if (_blockFormat === "check") {
+      if (blockFormat !== "check") {
+        editor.dispatchCommand(list.INSERT_CHECK_LIST_COMMAND, void 0);
+        return;
+      }
+      formatParagraph();
+      return;
+    }
+    if (_blockFormat === "code-block") {
+      editor.update(function () {
+        var selection$1 = lexical.$getSelection();
+        if (!selection$1) return;
+        if (selection$1.isCollapsed()) {
+          selection.$setBlocksType(selection$1, function () {
+            return code.$createCodeNode();
+          });
+          return;
+        }
+        var textContent = selection$1.getTextContent();
+        var codeNode = code.$createCodeNode();
+        selection$1.insertNodes([codeNode]);
+        var _selection = lexical.$getSelection();
+        if (lexical.$isRangeSelection(_selection)) {
+          _selection.insertRawText(textContent);
+        }
+      });
+      return;
+    }
+    editor.update(function () {
+      var selection$1 = lexical.$getSelection();
+      selection.$setBlocksType(selection$1, function () {
+        return richText.$createHeadingNode(_blockFormat);
+      });
+    });
+  };
+  var _setBlockFormat = React.useCallback(function (value) {
+    setBlockFormat(value);
+  }, []);
+  return {
+    blockFormat: blockFormat,
+    blockFormats: blockFormats,
+    setBlockFormat: _setBlockFormat,
+    formatBlock: formatBlock
+  };
+};
+/**
+ * @description
+ * font sizes
+ */
+var useFontSizes = function useFontSizes() {
+  var _useLexicalComposerCo5 = LexicalComposerContext.useLexicalComposerContext(),
+    _useLexicalComposerCo6 = _slicedToArray(_useLexicalComposerCo5, 1),
+    editor = _useLexicalComposerCo6[0];
+  var _useState3 = React.useState(DEFAULT_FONT_SIZE),
+    _useState4 = _slicedToArray(_useState3, 2),
+    fontSize = _useState4[0],
+    setFontSize = _useState4[1];
+  var fontSizes = React.useMemo(function () {
+    return new Map([["12px", {
+      label: "12px"
+    }], ["13px", {
+      label: "13px"
+    }], ["14px", {
+      label: "14px"
+    }], ["15px", {
+      label: "15px"
+    }], ["16px", {
+      label: "16px"
+    }], ["19px", {
+      label: "19px"
+    }], ["22px", {
+      label: "22px"
+    }], ["24px", {
+      label: "24px"
+    }], ["29px", {
+      label: "29px"
+    }], ["32px", {
+      label: "32px"
+    }], ["40px", {
+      label: "40px"
+    }], ["48px", {
+      label: "48px"
+    }]]);
+  }, []);
+  var updateFontSize = React.useCallback(function (value) {
+    editor.update(function () {
+      if (!editor.isEditable()) return;
+      var selection$1 = lexical.$getSelection();
+      if (!selection$1) return;
+      selection.$patchStyleText(selection$1, {
+        "font-size": value
+      });
+    });
+  }, [editor]);
+  var _setFontSize = React.useCallback(function (value) {
+    setFontSize(value || DEFAULT_FONT_SIZE);
+  }, []);
+  return {
+    fontSize: fontSize,
+    fontSizes: fontSizes,
+    setFontSize: _setFontSize,
+    updateFontSize: updateFontSize
+  };
+};
+/**
+ * @description
+ * more font formats
+ */
+var useFontFormats = function useFontFormats() {
+  var _useState5 = React.useState(new Set()),
+    _useState6 = _slicedToArray(_useState5, 2),
+    fontFormat = _useState6[0],
+    setFontFormat = _useState6[1];
+  var _useLexicalComposerCo7 = LexicalComposerContext.useLexicalComposerContext(),
+    _useLexicalComposerCo8 = _slicedToArray(_useLexicalComposerCo7, 1),
+    editor = _useLexicalComposerCo8[0];
+  var formatFont = React.useCallback(function (_fontFormat) {
+    editor.dispatchCommand(lexical.FORMAT_TEXT_COMMAND, _fontFormat);
+  }, [editor]);
+  var fontFormats = React.useMemo(function () {
+    return new Map([["strikethrough", {
+      label: "strikethrough",
+      prefix: /*#__PURE__*/React.createElement(formatStrikethrough.default, null)
+    }], ["subscript", {
+      label: "subscript",
+      prefix: /*#__PURE__*/React.createElement(subscript.default, null)
+    }], ["superscript", {
+      label: "superscript",
+      prefix: /*#__PURE__*/React.createElement(superscript.default, null)
+    }]]);
+  }, []);
+  return {
+    fontFormat: fontFormat,
+    fontFormats: fontFormats,
+    setFontFormat: setFontFormat,
+    formatFont: formatFont
+  };
+};
+
+exports.useBlockFormats = useBlockFormats;
+exports.useFontFormats = useFontFormats;
+exports.useFontSizes = useFontSizes;
+exports.useHandlers = useHandlers;

package/dist/components/rich-text-editor/plugins/toolbar/hooks.d.ts

@@ -23,7 +23,7 @@ export declare const useHandlers: ({ isLink }: {
  */
 export declare const useBlockFormats: () => {
     blockFormat: BlockFormat;
-    blockFormats: Map<BlockFormat, Omit<import("../../../menu").MenuItem, "key">> | undefined;
+    blockFormats: Map<BlockFormat, Omit<import("../../../../types/menu").MenuItem, "key">> | undefined;
     setBlockFormat: (value: string) => void;
     formatBlock: (_blockFormat: BlockFormat) => void;
 };
@@ -33,7 +33,7 @@ export declare const useBlockFormats: () => {
  */
 export declare const useFontSizes: () => {
     fontSize: string;
-    fontSizes: Map<string, Omit<import("../../../menu").MenuItem, "key">> | undefined;
+    fontSizes: Map<string, Omit<import("../../../../types/menu").MenuItem, "key">> | undefined;
     setFontSize: (value: string) => void;
     updateFontSize: (value: string) => void;
 };
@@ -43,7 +43,7 @@ export declare const useFontSizes: () => {
  */
 export declare const useFontFormats: () => {
     fontFormat: Set<FontFormat>;
-    fontFormats: Map<FontFormat, Omit<import("../../../menu").MenuItem, "key">> | undefined;
+    fontFormats: Map<FontFormat, Omit<import("../../../../types/menu").MenuItem, "key">> | undefined;
     setFontFormat: React.Dispatch<React.SetStateAction<Set<FontFormat>>>;
     formatFont: (_fontFormat: FontFormat) => void;
 };

package/dist/components/rich-text-editor/plugins/toolbar/{hooks.js → hooks.mjs}

@@ -7,17 +7,17 @@ import { $setBlocksType, $patchStyleText } from '@lexical/selection';
 import { $createHeadingNode } from '@lexical/rich-text';
 import { INSERT_CHECK_LIST_COMMAND } from '@lexical/list';
 import { $createCodeNode } from '@lexical/code';
-import Notes from '../../../icon/icons/editor/notes.js';
-import FormatStrikethrough from '../../../icon/icons/editor/format-strikethrough.js';
-import Subscript from '../../../icon/icons/editor/subscript.js';
-import Superscript from '../../../icon/icons/editor/superscript.js';
-import Checklist from '../../../icon/icons/editor/checklist.js';
-import LooksOne from '../../../icon/icons/image/looks-one.js';
-import LooksTwo from '../../../icon/icons/image/looks-two.js';
-import LooksThree from '../../../icon/icons/image/looks-three.js';
-import LooksFour from '../../../icon/icons/image/looks-four.js';
-import LooksFive from '../../../icon/icons/image/looks-five.js';
-import LooksSix from '../../../icon/icons/image/looks-six.js';
+import Notes from '../../../icon/icons/editor/notes.mjs';
+import FormatStrikethrough from '../../../icon/icons/editor/format-strikethrough.mjs';
+import Subscript from '../../../icon/icons/editor/subscript.mjs';
+import Superscript from '../../../icon/icons/editor/superscript.mjs';
+import Checklist from '../../../icon/icons/editor/checklist.mjs';
+import LooksOne from '../../../icon/icons/image/looks-one.mjs';
+import LooksTwo from '../../../icon/icons/image/looks-two.mjs';
+import LooksThree from '../../../icon/icons/image/looks-three.mjs';
+import LooksFour from '../../../icon/icons/image/looks-four.mjs';
+import LooksFive from '../../../icon/icons/image/looks-five.mjs';
+import LooksSix from '../../../icon/icons/image/looks-six.mjs';
 
 var DEFAULT_FONT_SIZE = "15px";
 /**

package/dist/components/rich-text-editor/plugins/toolbar/index.cjs

@@ -0,0 +1,218 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var React = require('react');
+var stylex = require('../../../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.cjs');
+var divider = require('../../../divider/divider.cjs');
+var LexicalComposerContext = require('@lexical/react/LexicalComposerContext');
+var lexical = require('lexical');
+var relax = require('@aiszlab/relax');
+var button = require('../../../button/button.cjs');
+var hooks = require('../../../theme/hooks.cjs');
+var colors = require('../../../../utils/colors.cjs');
+var hooks$1 = require('./hooks.cjs');
+var link = require('@lexical/link');
+var dropdown = require('../../dropdown.cjs');
+var richText = require('@lexical/rich-text');
+var list = require('@lexical/list');
+var utils = require('@lexical/utils');
+var index = require('../floating-link-editor/index.cjs');
+var selection = require('@lexical/selection');
+var undo = require('../../../icon/icons/content/undo.cjs');
+var redo = require('../../../icon/icons/content/redo.cjs');
+var fontDownload = require('../../../icon/icons/content/font-download.cjs');
+var formatBold = require('../../../icon/icons/editor/format-bold.cjs');
+var formatItalic = require('../../../icon/icons/editor/format-italic.cjs');
+var formatUnderlined = require('../../../icon/icons/editor/format-underlined.cjs');
+var insertLink = require('../../../icon/icons/editor/insert-link.cjs');
+var code = require('../../../icon/icons/action/code.cjs');
+
+var styles = {
+  "default": function _default(props) {
+    return [{
+      minHeight: "musaex-tynr54",
+      display: "musaex-78zum5",
+      flexDirection: "musaex-1q0g3np",
+      alignItems: "musaex-6s0dn4",
+      gap: "musaex-90xh4w",
+      rowGap: null,
+      columnGap: null,
+      borderBottomWidth: "musaex-cql0v9",
+      borderBottomColor: "musaex-43481e",
+      borderBottomStyle: "musaex-1q0q8m5",
+      overflow: "musaex-ysyzu8",
+      overflowX: null,
+      overflowY: null,
+      $$css: true
+    }, {
+      "--borderBottomColor": props.outlineColor != null ? props.outlineColor : "initial"
+    }];
+  }
+};
+var ToolbarPlugin = function ToolbarPlugin() {
+  var theme = hooks.useTheme();
+  var _useLexicalComposerCo = LexicalComposerContext.useLexicalComposerContext(),
+    _useLexicalComposerCo2 = _slicedToArray(_useLexicalComposerCo, 1),
+    editor = _useLexicalComposerCo2[0];
+  var _useState = React.useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isBold = _useState2[0],
+    setIsBold = _useState2[1];
+  var _useState3 = React.useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isItalic = _useState4[0],
+    setIsItalic = _useState4[1];
+  var _useState5 = React.useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    isUnderline = _useState6[0],
+    setIsUnderline = _useState6[1];
+  var _useState7 = React.useState(false),
+    _useState8 = _slicedToArray(_useState7, 2),
+    isCode = _useState8[0],
+    setIsCode = _useState8[1];
+  var _useState9 = React.useState(null),
+    _useState10 = _slicedToArray(_useState9, 2),
+    linkNode = _useState10[0],
+    setLinkNode = _useState10[1];
+  var isLink = !!linkNode;
+  var _useState11 = React.useState(false),
+    _useState12 = _slicedToArray(_useState11, 2),
+    isUndoable = _useState12[0],
+    setIsUndoable = _useState12[1];
+  var _useState13 = React.useState(false),
+    _useState14 = _slicedToArray(_useState13, 2),
+    isRedoable = _useState14[0],
+    setIsRedoable = _useState14[1];
+  var _useBlockFormats = hooks$1.useBlockFormats(),
+    blockFormat = _useBlockFormats.blockFormat,
+    blockFormats = _useBlockFormats.blockFormats,
+    setBlockFormat = _useBlockFormats.setBlockFormat,
+    formatBlock = _useBlockFormats.formatBlock;
+  var _useFontSizes = hooks$1.useFontSizes(),
+    fontSize = _useFontSizes.fontSize,
+    fontSizes = _useFontSizes.fontSizes,
+    setFontSize = _useFontSizes.setFontSize,
+    updateFontSize = _useFontSizes.updateFontSize;
+  var _useFontFormats = hooks$1.useFontFormats(),
+    fontFormat = _useFontFormats.fontFormat,
+    fontFormats = _useFontFormats.fontFormats,
+    setFontFormat = _useFontFormats.setFontFormat,
+    formatFont = _useFontFormats.formatFont;
+  var updateToolbar = relax.useEvent(function () {
+    var selection$1 = lexical.$getSelection();
+    if (!lexical.$isRangeSelection(selection$1)) return;
+    var _focusedNode = selection$1.focus.getNode();
+    var _anchorNode = selection$1.anchor.getNode();
+    var _rootNode = _anchorNode.getTopLevelElementOrThrow();
+    var _focusedNodeParent = _focusedNode.getParent();
+    setIsBold(selection$1.hasFormat("bold"));
+    setIsCode(selection$1.hasFormat("code"));
+    setIsItalic(selection$1.hasFormat("italic"));
+    setIsUnderline(selection$1.hasFormat("underline"));
+    setFontFormat(function () {
+      return new Set([].concat(_toConsumableArray(selection$1.hasFormat("strikethrough") ? ["strikethrough"] : []), _toConsumableArray(selection$1.hasFormat("subscript") ? ["subscript"] : []), _toConsumableArray(selection$1.hasFormat("superscript") ? ["superscript"] : [])));
+    });
+    // font size
+    setFontSize(selection.$getSelectionStyleValueForProperty(selection$1, "font-size"));
+    // link node
+    setLinkNode(link.$isLinkNode(_focusedNode) ? _focusedNode : link.$isLinkNode(_focusedNodeParent) ? _focusedNodeParent : null);
+    if (list.$isListNode(_rootNode)) {
+      var parentList = utils.$getNearestNodeOfType(_anchorNode, list.ListNode);
+      var type = parentList ? parentList.getListType() : _rootNode.getListType();
+      setBlockFormat(type);
+    } else {
+      var _type = richText.$isHeadingNode(_rootNode) ? _rootNode.getTag() : _rootNode.getType();
+      setBlockFormat(_type);
+    }
+  });
+  var handlers = hooks$1.useHandlers({
+    isLink: isLink
+  });
+  relax.useMounted(function () {
+    var unregister = relax.chain(editor.registerCommand(lexical.SELECTION_CHANGE_COMMAND, function () {
+      updateToolbar();
+      return false;
+    }, lexical.COMMAND_PRIORITY_CRITICAL), editor.registerCommand(lexical.CAN_UNDO_COMMAND, function (canUndo) {
+      setIsUndoable(canUndo);
+      return false;
+    }, lexical.COMMAND_PRIORITY_CRITICAL), editor.registerCommand(lexical.CAN_REDO_COMMAND, function (canRedo) {
+      setIsRedoable(canRedo);
+      return false;
+    }, lexical.COMMAND_PRIORITY_CRITICAL), editor.registerUpdateListener(function (_ref) {
+      var editorState = _ref.editorState;
+      editorState.read(function () {
+        updateToolbar();
+      });
+    }));
+    return function () {
+      unregister();
+    };
+  });
+  var styled = stylex.default.props(styles["default"]({
+    outlineColor: theme.colors[colors.ColorToken.OutlineVariant]
+  }));
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: styled.className,
+    style: styled.style
+  }, /*#__PURE__*/React.createElement(button.Button, {
+    variant: "text",
+    shape: "rounded",
+    size: "small",
+    onClick: handlers.undo,
+    disabled: !isUndoable
+  }, /*#__PURE__*/React.createElement(undo.default, null)), /*#__PURE__*/React.createElement(button.Button, {
+    variant: "text",
+    shape: "rounded",
+    size: "small",
+    onClick: handlers.redo,
+    disabled: !isRedoable
+  }, /*#__PURE__*/React.createElement(redo.default, null)), /*#__PURE__*/React.createElement(divider.default, {
+    orientation: "vertical"
+  }), /*#__PURE__*/React.createElement(dropdown.default, {
+    items: blockFormats,
+    value: blockFormat,
+    onChange: formatBlock
+  }), /*#__PURE__*/React.createElement(divider.default, {
+    orientation: "vertical"
+  }), /*#__PURE__*/React.createElement(dropdown.default, {
+    items: fontSizes,
+    value: fontSize,
+    onChange: updateFontSize
+  }), /*#__PURE__*/React.createElement(divider.default, {
+    orientation: "vertical"
+  }), /*#__PURE__*/React.createElement(button.Button, {
+    variant: isBold ? "filled" : "text",
+    shape: "rounded",
+    size: "small",
+    onClick: handlers.bold
+  }, /*#__PURE__*/React.createElement(formatBold.default, null)), /*#__PURE__*/React.createElement(button.Button, {
+    variant: isItalic ? "filled" : "text",
+    shape: "rounded",
+    size: "small",
+    onClick: handlers.italic
+  }, /*#__PURE__*/React.createElement(formatItalic.default, null)), /*#__PURE__*/React.createElement(button.Button, {
+    variant: isUnderline ? "filled" : "text",
+    shape: "rounded",
+    size: "small",
+    onClick: handlers.italic
+  }, /*#__PURE__*/React.createElement(formatUnderlined.default, null)), /*#__PURE__*/React.createElement(button.Button, {
+    variant: isLink ? "filled" : "text",
+    shape: "rounded",
+    size: "small",
+    onClick: handlers.insertLink
+  }, /*#__PURE__*/React.createElement(insertLink.default, null)), /*#__PURE__*/React.createElement(button.Button, {
+    variant: isCode ? "filled" : "text",
+    shape: "rounded",
+    size: "small",
+    onClick: handlers.code
+  }, /*#__PURE__*/React.createElement(code.default, null)), /*#__PURE__*/React.createElement(dropdown.default, {
+    items: fontFormats,
+    value: Array.from(fontFormat),
+    onChange: formatFont
+  }, /*#__PURE__*/React.createElement(fontDownload.default, null))), /*#__PURE__*/React.createElement(index.default, {
+    link: linkNode
+  }));
+};
+
+exports.default = ToolbarPlugin;

package/dist/components/rich-text-editor/plugins/toolbar/{index.js → index.mjs}

@@ -1,30 +1,30 @@
 import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import React, { useState } from 'react';
-import _stylex from '../../../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.js';
-import Divider from '../../../divider/divider.js';
+import _stylex from '../../../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
+import Divider from '../../../divider/divider.mjs';
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
 import { $getSelection, $isRangeSelection, SELECTION_CHANGE_COMMAND, COMMAND_PRIORITY_CRITICAL, CAN_UNDO_COMMAND, CAN_REDO_COMMAND } from 'lexical';
 import { useEvent, useMounted, chain } from '@aiszlab/relax';
-import Button from '../../../button/button.js';
-import { useTheme } from '../../../theme/hooks.js';
-import { ColorToken } from '../../../../utils/colors.js';
-import { useBlockFormats, useFontSizes, useFontFormats, useHandlers } from './hooks.js';
+import { Button } from '../../../button/button.mjs';
+import { useTheme } from '../../../theme/hooks.mjs';
+import { ColorToken } from '../../../../utils/colors.mjs';
+import { useBlockFormats, useFontSizes, useFontFormats, useHandlers } from './hooks.mjs';
 import { $isLinkNode } from '@lexical/link';
-import Dropdown from '../../dropdown.js';
+import Dropdown from '../../dropdown.mjs';
 import { $isHeadingNode } from '@lexical/rich-text';
 import { $isListNode, ListNode } from '@lexical/list';
 import { $getNearestNodeOfType } from '@lexical/utils';
-import FloatingLinkEditorPlugin from '../floating-link-editor/index.js';
+import FloatingLinkEditorPlugin from '../floating-link-editor/index.mjs';
 import { $getSelectionStyleValueForProperty } from '@lexical/selection';
-import Undo from '../../../icon/icons/content/undo.js';
-import Redo from '../../../icon/icons/content/redo.js';
-import FontDownload from '../../../icon/icons/content/font-download.js';
-import FormatBold from '../../../icon/icons/editor/format-bold.js';
-import FormatItalic from '../../../icon/icons/editor/format-italic.js';
-import FormatUnderlined from '../../../icon/icons/editor/format-underlined.js';
-import InsertLink from '../../../icon/icons/editor/insert-link.js';
-import Code from '../../../icon/icons/action/code.js';
+import Undo from '../../../icon/icons/content/undo.mjs';
+import Clear from '../../../icon/icons/content/redo.mjs';
+import FontDownload from '../../../icon/icons/content/font-download.mjs';
+import FormatBold from '../../../icon/icons/editor/format-bold.mjs';
+import FormatItalic from '../../../icon/icons/editor/format-italic.mjs';
+import FormatUnderlined from '../../../icon/icons/editor/format-underlined.mjs';
+import InsertLink from '../../../icon/icons/editor/insert-link.mjs';
+import Code from '../../../icon/icons/action/code.mjs';
 
 var styles = {
   "default": function _default(props) {
@@ -165,7 +165,7 @@ var ToolbarPlugin = function ToolbarPlugin() {
     size: "small",
     onClick: handlers.redo,
     disabled: !isRedoable
-  }, /*#__PURE__*/React.createElement(Redo, null)), /*#__PURE__*/React.createElement(Divider, {
+  }, /*#__PURE__*/React.createElement(Clear, null)), /*#__PURE__*/React.createElement(Divider, {
     orientation: "vertical"
   }), /*#__PURE__*/React.createElement(Dropdown, {
     items: blockFormats,