musae 0.2.26 → 0.3.1

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,

package/dist/components/rich-text-editor/rich-text-editor.cjs

@@ -0,0 +1,220 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+var React = require('react');
+var LexicalComposer = require('@lexical/react/LexicalComposer');
+var LexicalContentEditable = require('@lexical/react/LexicalContentEditable');
+var LexicalErrorBoundary = require('@lexical/react/LexicalErrorBoundary');
+var LexicalHistoryPlugin = require('@lexical/react/LexicalHistoryPlugin');
+var LexicalRichTextPlugin = require('@lexical/react/LexicalRichTextPlugin');
+var LexicalLinkPlugin = require('@lexical/react/LexicalLinkPlugin');
+var LexicalClickableLinkPlugin = require('@lexical/react/LexicalClickableLinkPlugin');
+var LexicalListPlugin = require('@lexical/react/LexicalListPlugin');
+var index$2 = require('./plugins/check-list/index.cjs');
+var index$3 = require('./plugins/controlled-state/index.cjs');
+var relax = require('@aiszlab/relax');
+var hooks = require('../message/hooks.cjs');
+var stylex = require('../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.cjs');
+var hooks$1 = require('../theme/hooks.cjs');
+var colors = require('../../utils/colors.cjs');
+var richText = require('@lexical/rich-text');
+var link = require('@lexical/link');
+var list = require('@lexical/list');
+var LexicalHorizontalRuleNode = require('@lexical/react/LexicalHorizontalRuleNode');
+var code = require('@lexical/code');
+var checkableListItem = require('./nodes/checkable-list-item.cjs');
+var index$1 = require('./plugins/toolbar/index.cjs');
+var index = require('./plugins/markdown-shortcut/index.cjs');
+var theme = require('../theme/theme.cjs');
+require('../checkbox/index.cjs');
+var markdown = require('@lexical/markdown');
+var styles$1 = require('../checkbox/styles.cjs');
+
+var _excluded = ["placeholder", "disabled", "defaultValue", "onChange", "value"];
+var styles = {
+  shell: function shell(props) {
+    return [{
+      backgroundColor: "musaex-q1mx2j",
+      borderRadius: "musaex-qwu505",
+      borderStartStartRadius: null,
+      borderStartEndRadius: null,
+      borderEndStartRadius: null,
+      borderEndEndRadius: null,
+      borderTopLeftRadius: null,
+      borderTopRightRadius: null,
+      borderBottomLeftRadius: null,
+      borderBottomRightRadius: null,
+      $$css: true
+    }, {
+      "--backgroundColor": props.backgroundColor != null ? props.backgroundColor : "initial"
+    }];
+  },
+  variables: function variables(props) {
+    return [{
+      "--primary-color": "musaex-1w3qx2l",
+      "--on-primary-color": "musaex-1i66ttz",
+      "--outline-color": "musaex-1x71zss",
+      "--code-background-color": "musaex-1gm2eyx",
+      $$css: true
+    }, {
+      "----primary-color": props.primaryColor != null ? props.primaryColor : "initial",
+      "----on-primary-color": props.onPrimaryColor != null ? props.onPrimaryColor : "initial",
+      "----outline-color": props.outlineColor != null ? props.outlineColor : "initial",
+      "----code-background-color": props.codeBackgroundColor != null ? props.codeBackgroundColor : "initial"
+    }];
+  },
+  checkbox: {
+    position: "musaex-10l6tqk",
+    insetInlineStart: "musaex-1fx3lr6",
+    left: null,
+    right: null,
+    top: "musaex-13op6mf",
+    $$css: true
+  }
+};
+var RichTextEditor = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var _props$ariaPlacehold;
+  var placeholder = _ref.placeholder,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    defaultValue = _ref.defaultValue,
+    onChange = _ref.onChange;
+    _ref.value;
+    var props = _objectWithoutProperties(_ref, _excluded);
+  var _useIdentity = relax.useIdentity(),
+    _useIdentity2 = _slicedToArray(_useIdentity, 1),
+    id = _useIdentity2[0];
+  var _useMessage = hooks.useMessage(),
+    _useMessage2 = _slicedToArray(_useMessage, 2),
+    messager = _useMessage2[0],
+    holder = _useMessage2[1];
+  var theme$1 = hooks$1.useTheme();
+  var _use = relax.useDefault(function () {
+    var _props$use;
+    return (_props$use = props.use) !== null && _props$use !== void 0 ? _props$use : "serialized";
+  });
+  var controlledStatePluginRef = React.useRef(null);
+  var styled = {
+    shell: stylex.default.props(styles.shell({
+      backgroundColor: theme$1.colors[colors.ColorToken.SurfaceContainer]
+    }), styles.variables({
+      primaryColor: theme$1.colors[colors.ColorToken.Primary],
+      onPrimaryColor: theme$1.colors[colors.ColorToken.OnPrimary],
+      outlineColor: theme$1.colors[colors.ColorToken.Outline],
+      codeBackgroundColor: theme$1.colors[colors.ColorToken.SurfaceContainerHighest]
+    })),
+    editor: {
+      className: "musaex-1a2a7pz musaex-y0sash musaex-1vgzror musaex-igxgg9 musaex-1y06zzy"
+    },
+    h1: stylex.default.props(theme.typography.display.large),
+    h2: stylex.default.props(theme.typography.display.medium),
+    h3: stylex.default.props(theme.typography.display.small),
+    h4: stylex.default.props(theme.typography.headline.large),
+    h5: stylex.default.props(theme.typography.headline.medium),
+    h6: stylex.default.props(theme.typography.headline.small),
+    code: {
+      className: "musaex-1x8l0va musaex-1pgy25r musaex-1fioaya musaex-1lliihq musaex-ysyzu8"
+    },
+    inlineCode: {
+      className: "musaex-1pgy25r musaex-1x8l0va musaex-1fioaya"
+    },
+    link: {
+      className: "musaex-1qlt0p8 musaex-1ed109x musaex-1hl2dhg musaex-t0b8zv"
+    },
+    listItem: {
+      "default": {
+        className: "musaex-1a2a7pz musaex-1n2onr6 musaex-ei3nwd"
+      },
+      checked: {
+        className: "musaex-mqliwb"
+      }
+    },
+    checkbox: {
+      unchecked: stylex.default.props(styles$1.default.trigger["default"], styles.checkbox),
+      checked: stylex.default.props(styles$1.default.trigger["default"], styles$1.default.trigger.checked, styles.checkbox)
+    }
+  };
+  var initialConfig = relax.useDefault(function () {
+    var theme = {
+      heading: {
+        h1: styled.h1.className,
+        h2: styled.h2.className,
+        h3: styled.h3.className,
+        h4: styled.h4.className,
+        h5: styled.h5.className,
+        h6: styled.h6.className
+      },
+      code: styled.code.className,
+      text: {
+        code: styled.inlineCode.className
+      },
+      link: styled.link.className,
+      list: {
+        listitem: styled.listItem["default"].className,
+        listitemChecked: styled.listItem.checked.className
+      },
+      checkList: {
+        checkbox: {
+          checked: styled.checkbox.checked.className,
+          unchecked: styled.checkbox.unchecked.className
+        }
+      }
+    };
+    return {
+      namespace: id,
+      onError: function onError(error) {
+        messager.error({
+          description: error.message
+        });
+      },
+      nodes: [richText.HeadingNode, richText.QuoteNode, code.CodeNode, link.LinkNode, list.ListNode, checkableListItem.CheckableListItemNode, checkableListItem.replacement, LexicalHorizontalRuleNode.HorizontalRuleNode],
+      theme: theme,
+      editable: !disabled,
+      editorState: defaultValue && function (editor) {
+        // different value usage, use different serialization
+        switch (_use) {
+          case "markdown":
+            markdown.$convertFromMarkdownString(defaultValue, index.TRANSFORMERS);
+            break;
+          default:
+            editor.setEditorState(editor.parseEditorState(defaultValue));
+            break;
+        }
+      }
+    };
+  });
+  React.useImperativeHandle(ref, function () {
+    return {
+      setValue: function setValue(_value) {
+        var _controlledStatePlugi;
+        (_controlledStatePlugi = controlledStatePluginRef.current) === null || _controlledStatePlugi === void 0 || _controlledStatePlugi.setValue(_value);
+      }
+    };
+  });
+  return /*#__PURE__*/React.createElement(LexicalComposer.LexicalComposer, {
+    initialConfig: initialConfig
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styled.shell.className,
+    style: styled.shell.style
+  }, !disabled && /*#__PURE__*/React.createElement(index$1.default, null), /*#__PURE__*/React.createElement(LexicalRichTextPlugin.RichTextPlugin, {
+    contentEditable: /*#__PURE__*/React.createElement(LexicalContentEditable.ContentEditable, {
+      className: styled.editor.className,
+      style: styled.editor.style,
+      placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : function () {
+        return null;
+      },
+      "aria-placeholder": (_props$ariaPlacehold = props["aria-placeholder"]) !== null && _props$ariaPlacehold !== void 0 ? _props$ariaPlacehold : ""
+    }),
+    ErrorBoundary: LexicalErrorBoundary.LexicalErrorBoundary
+  }), /*#__PURE__*/React.createElement(LexicalHistoryPlugin.HistoryPlugin, null), /*#__PURE__*/React.createElement(index.default, null), /*#__PURE__*/React.createElement(LexicalLinkPlugin.LinkPlugin, null), /*#__PURE__*/React.createElement(LexicalClickableLinkPlugin.ClickableLinkPlugin, {
+    disabled: !disabled,
+    newTab: true
+  }), /*#__PURE__*/React.createElement(LexicalListPlugin.ListPlugin, null), /*#__PURE__*/React.createElement(index$2.default, null), /*#__PURE__*/React.createElement(index$3.default, {
+    ref: controlledStatePluginRef,
+    use: _use,
+    onChange: onChange
+  }), holder));
+});
+
+exports.default = RichTextEditor;

package/dist/components/rich-text-editor/rich-text-editor.d.ts

@@ -1,4 +1,11 @@
 import React from "react";
-import type { RichTextEditorProps } from "./types";
-declare const RichTextEditor: ({ placeholder, disabled, defaultValue, value, onChange, ...props }: RichTextEditorProps) => React.JSX.Element;
+import type { RichTextEditorRef } from "musae/types/rich-text-editor";
+declare const RichTextEditor: React.ForwardRefExoticComponent<Pick<React.HTMLAttributes<HTMLDivElement>, "aria-placeholder"> & {
+    placeholder?: import("@lexical/react/LexicalContentEditable").Props["placeholder"];
+    disabled?: boolean;
+    defaultValue?: string;
+    use?: import("musae/types/rich-text-editor").Use;
+    onChange?: (value: string) => void;
+    value?: string;
+} & React.RefAttributes<RichTextEditorRef>>;
 export default RichTextEditor;

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

@@ -1,6 +1,6 @@
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import React from 'react';
+import React, { forwardRef, useRef, useImperativeHandle } from 'react';
 import { LexicalComposer } from '@lexical/react/LexicalComposer';
 import { ContentEditable } from '@lexical/react/LexicalContentEditable';
 import { LexicalErrorBoundary } from '@lexical/react/LexicalErrorBoundary';
@@ -9,27 +9,27 @@ import { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin';
 import { LinkPlugin } from '@lexical/react/LexicalLinkPlugin';
 import { ClickableLinkPlugin } from '@lexical/react/LexicalClickableLinkPlugin';
 import { ListPlugin } from '@lexical/react/LexicalListPlugin';
-import CheckListPlugin from './plugins/check-list/index.js';
-import ControlledStatePlugin from './plugins/controlled-state/index.js';
+import CheckListPlugin from './plugins/check-list/index.mjs';
+import ControlledStatePlugin from './plugins/controlled-state/index.mjs';
 import { useIdentity, useDefault } from '@aiszlab/relax';
-import { useMessage } from '../message/hooks.js';
-import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.js';
-import { useTheme } from '../theme/hooks.js';
-import { ColorToken } from '../../utils/colors.js';
+import { useMessage } from '../message/hooks.mjs';
+import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
+import { useTheme } from '../theme/hooks.mjs';
+import { ColorToken } from '../../utils/colors.mjs';
 import { HeadingNode, QuoteNode } from '@lexical/rich-text';
 import { LinkNode } from '@lexical/link';
 import { ListNode } from '@lexical/list';
 import { HorizontalRuleNode } from '@lexical/react/LexicalHorizontalRuleNode';
 import { CodeNode } from '@lexical/code';
-import { CheckableListItemNode, replacement } from './nodes/checkable-list-item.js';
-import ToolbarPlugin from './plugins/toolbar/index.js';
-import MarkdownShortcutPlugin, { TRANSFORMERS } from './plugins/markdown-shortcut/index.js';
-import { typography } from '../theme/theme.js';
-import '../checkbox/index.js';
+import { CheckableListItemNode, replacement } from './nodes/checkable-list-item.mjs';
+import ToolbarPlugin from './plugins/toolbar/index.mjs';
+import MarkdownShortcutPlugin, { TRANSFORMERS } from './plugins/markdown-shortcut/index.mjs';
+import { typography } from '../theme/theme.mjs';
+import '../checkbox/index.mjs';
 import { $convertFromMarkdownString } from '@lexical/markdown';
-import styles$1 from '../checkbox/styles.js';
+import styles$1 from '../checkbox/styles.mjs';
 
-var _excluded = ["placeholder", "disabled", "defaultValue", "value", "onChange"];
+var _excluded = ["placeholder", "disabled", "defaultValue", "onChange", "value"];
 var styles = {
   shell: function shell(props) {
     return [{
@@ -71,15 +71,15 @@ var styles = {
     $$css: true
   }
 };
-var RichTextEditor = function RichTextEditor(_ref) {
+var RichTextEditor = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var _props$ariaPlacehold;
   var placeholder = _ref.placeholder,
     _ref$disabled = _ref.disabled,
     disabled = _ref$disabled === void 0 ? false : _ref$disabled,
     defaultValue = _ref.defaultValue,
-    value = _ref.value,
-    onChange = _ref.onChange,
-    props = _objectWithoutProperties(_ref, _excluded);
+    onChange = _ref.onChange;
+    _ref.value;
+    var props = _objectWithoutProperties(_ref, _excluded);
   var _useIdentity = useIdentity(),
     _useIdentity2 = _slicedToArray(_useIdentity, 1),
     id = _useIdentity2[0];
@@ -92,6 +92,7 @@ var RichTextEditor = function RichTextEditor(_ref) {
     var _props$use;
     return (_props$use = props.use) !== null && _props$use !== void 0 ? _props$use : "serialized";
   });
+  var controlledStatePluginRef = useRef(null);
   var styled = {
     shell: _stylex.props(styles.shell({
       backgroundColor: theme.colors[ColorToken.SurfaceContainer]
@@ -168,21 +169,27 @@ var RichTextEditor = function RichTextEditor(_ref) {
       nodes: [HeadingNode, QuoteNode, CodeNode, LinkNode, ListNode, CheckableListItemNode, replacement, HorizontalRuleNode],
       theme: theme,
       editable: !disabled,
-      editorState: function editorState(editor) {
-        var _value = value !== null && value !== void 0 ? value : defaultValue;
-        if (!_value) return;
+      editorState: defaultValue && function (editor) {
         // different value usage, use different serialization
         switch (_use) {
           case "markdown":
-            $convertFromMarkdownString(_value, TRANSFORMERS);
+            $convertFromMarkdownString(defaultValue, TRANSFORMERS);
             break;
           default:
-            editor.setEditorState(editor.parseEditorState(_value));
+            editor.setEditorState(editor.parseEditorState(defaultValue));
             break;
         }
       }
     };
   });
+  useImperativeHandle(ref, function () {
+    return {
+      setValue: function setValue(_value) {
+        var _controlledStatePlugi;
+        (_controlledStatePlugi = controlledStatePluginRef.current) === null || _controlledStatePlugi === void 0 || _controlledStatePlugi.setValue(_value);
+      }
+    };
+  });
   return /*#__PURE__*/React.createElement(LexicalComposer, {
     initialConfig: initialConfig
   }, /*#__PURE__*/React.createElement("div", {
@@ -202,10 +209,10 @@ var RichTextEditor = function RichTextEditor(_ref) {
     disabled: !disabled,
     newTab: true
   }), /*#__PURE__*/React.createElement(ListPlugin, null), /*#__PURE__*/React.createElement(CheckListPlugin, null), /*#__PURE__*/React.createElement(ControlledStatePlugin, {
-    value: value,
+    ref: controlledStatePluginRef,
     use: _use,
     onChange: onChange
   }), holder));
-};
+});
 
 export { RichTextEditor as default };

package/dist/components/rich-text-editor/utils/get-element-by-node.cjs

@@ -0,0 +1,8 @@
+function getElementByNode(editor, node) {
+  var _editor$_keyToDOMMap$;
+  if (!node) return null;
+  var key = node.getKey();
+  return (_editor$_keyToDOMMap$ = editor._keyToDOMMap.get(key)) !== null && _editor$_keyToDOMMap$ !== void 0 ? _editor$_keyToDOMMap$ : null;
+}
+
+exports.getElementByNode = getElementByNode;