musae 0.3.2 → 0.3.5

package/dist/components/popper/hooks.mjs

@@ -1,11 +1,11 @@
 import _regeneratorRuntime from '@babel/runtime/helpers/regeneratorRuntime';
 import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import { useCallback, useLayoutEffect, useRef, useMemo } from 'react';
+import { useRef, useEffect, useMemo } from 'react';
 import { useAnimate } from 'framer-motion';
 import { useEvent } from '@aiszlab/relax';
 import { useContainer } from '../../hooks/use-container.mjs';
-import { autoUpdate, computePosition, flip, offset, arrow, size } from '@floating-ui/dom';
+import { autoUpdate, computePosition, flip, shift, offset, arrow } from '@floating-ui/dom';
 
 /**
  * @description
@@ -28,132 +28,125 @@ var useOffsets = function useOffsets(_ref) {
 };
 /**
  * @description
- * use animation
+ * floating position
  */
-var useAnimation = function useAnimation(_ref2) {
+var useFloating = function useFloating(_ref2) {
   var open = _ref2.open,
-    disappearable = _ref2.disappearable,
+    _trigger = _ref2.trigger,
+    placement = _ref2.placement,
+    arrowable = _ref2.arrowable,
+    _offset = _ref2.offset,
     onEntered = _ref2.onEntered,
     onExit = _ref2.onExit,
-    onExited = _ref2.onExited;
+    onExited = _ref2.onExited,
+    disappearable = _ref2.disappearable;
   var _useAnimate = useAnimate(),
     _useAnimate2 = _slicedToArray(_useAnimate, 2),
-    animatableRef = _useAnimate2[0],
+    floatableRef = _useAnimate2[0],
     animate = _useAnimate2[1];
+  var arrowRef = useRef(null);
+  var _useContainer = useContainer({
+      container: _trigger,
+      useBody: false
+    }, [open]),
+    trigger = _useContainer.container;
+  var _isOpen = useRef(false);
+  // appear animation
+  // prevent open again when opened
+  // first remove `display: none` style
+  // then animate
   var appear = useEvent(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
     return _regeneratorRuntime().wrap(function _callee$(_context) {
       while (1) switch (_context.prev = _context.next) {
         case 0:
-          animatableRef.current.style.display = "";
-          _context.next = 3;
-          return animate(animatableRef.current, {
-            opacity: 1,
-            transform: "scale(1, 1)"
+          if (!_isOpen.current) {
+            _context.next = 2;
+            break;
+          }
+          return _context.abrupt("return");
+        case 2:
+          _isOpen.current = true;
+          floatableRef.current.style.display = "unset";
+          _context.next = 6;
+          return animate(floatableRef.current, {
+            opacity: 1
           }, {
             duration: 0.2
           });
-        case 3:
-          _context.next = 5;
+        case 6:
+          _context.next = 8;
           return onEntered === null || onEntered === void 0 ? void 0 : onEntered();
-        case 5:
+        case 8:
         case "end":
           return _context.stop();
       }
     }, _callee);
   })));
+  // disappear animation
+  // prevent disappear again when disappeared
+  // when using force disappear, it will be forced to disappear
   var disappear = useEvent(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
+    var force,
+      _args2 = arguments;
     return _regeneratorRuntime().wrap(function _callee2$(_context2) {
       while (1) switch (_context2.prev = _context2.next) {
         case 0:
-          _context2.next = 2;
-          return Promise.all([onExit === null || onExit === void 0 ? void 0 : onExit(), animate(animatableRef.current, {
-            opacity: 0,
-            transform: "scale(0, 0)"
+          force = _args2.length > 0 && _args2[0] !== undefined ? _args2[0] : false;
+          if (_isOpen.current) {
+            _context2.next = 3;
+            break;
+          }
+          return _context2.abrupt("return");
+        case 3:
+          if (!(!force && !disappearable)) {
+            _context2.next = 5;
+            break;
+          }
+          return _context2.abrupt("return");
+        case 5:
+          _isOpen.current = false;
+          _context2.next = 8;
+          return Promise.all([onExit === null || onExit === void 0 ? void 0 : onExit(), animate(floatableRef.current, {
+            opacity: 0
           }, {
             duration: 0.2
           }).then(function () {
-            if (!animatableRef.current) return;
-            animatableRef.current.style.display = "none";
+            floatableRef.current.style.display = "none";
           })]);
-        case 2:
-          _context2.next = 4;
+        case 8:
+          _context2.next = 10;
           return onExited === null || onExited === void 0 ? void 0 : onExited();
-        case 4:
+        case 10:
         case "end":
           return _context2.stop();
       }
     }, _callee2);
   })));
-  var _disappear = useCallback(function () {
-    if (!disappearable) return;
-    disappear();
-  }, [disappear, disappearable]);
-  useLayoutEffect(function () {
-    if (open) {
-      appear();
-      return;
-    }
-    _disappear();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [open]);
-  return {
-    animatableRef: animatableRef,
-    disappear: disappear
-  };
-};
-/**
- * @description
- * floating position
- */
-var useFloating = function useFloating(_ref5) {
-  var open = _ref5.open,
-    _trigger = _ref5.trigger,
-    placement = _ref5.placement,
-    arrowable = _ref5.arrowable,
-    _offset = _ref5.offset;
-  var floatableRef = useRef(null);
-  var _useContainer = useContainer({
-      container: _trigger,
-      useBody: false
-    }, [open]),
-    trigger = _useContainer.container;
-  var arrowRef = useRef(null);
   // memorized offsets
   var offsets = useOffsets({
     offset: _offset,
     arrowable: arrowable
   });
-  // auto update: calc trigger dom to get position
-  // if trigger changed, re-relate
-  useLayoutEffect(function () {
-    var floatable = floatableRef.current;
+  // position listener
+  var position = useEvent(function () {
     if (!trigger) return;
-    if (!floatable) return;
-    var cleanup = autoUpdate(trigger, floatable, function () {
-      computePosition(trigger, floatable, {
+    var cleanup = autoUpdate(trigger, floatableRef.current, function () {
+      computePosition(trigger, floatableRef.current, {
         placement: placement,
-        middleware: [flip(), offset(offsets), arrowable && !!arrowRef.current && arrow({
+        middleware: [flip(), shift(), offset(offsets), arrowable && !!arrowRef.current && arrow({
           element: arrowRef.current,
           padding: 16
-        }), size({
-          apply: function apply(_ref6) {
-            var availableWidth = _ref6.availableWidth,
-              availableHeight = _ref6.availableHeight,
-              floating = _ref6.elements.floating;
-            floating.style.maxWidth = "".concat(availableWidth, "px");
-            floating.style.maxHeight = "".concat(availableHeight, "px");
-          }
         })]
-      }).then(function (_ref7) {
-        var x = _ref7.x,
-          y = _ref7.y,
-          middlewareData = _ref7.middlewareData,
-          _placement = _ref7.placement;
+      }).then(function (_ref5) {
+        var x = _ref5.x,
+          y = _ref5.y,
+          middlewareData = _ref5.middlewareData,
+          _placement = _ref5.placement;
         var _placement$split = _placement.split("-"),
           _placement$split2 = _slicedToArray(_placement$split, 1),
           side = _placement$split2[0];
         // set float element styles
-        floatable.style.translate = "".concat(x, "px ").concat(y, "px");
+        floatableRef.current.style.translate = "".concat(x, "px ").concat(y, "px");
         // set arrow styles
         if (middlewareData.arrow && !!arrowRef.current) {
           var _middlewareData$arrow, _middlewareData$arrow2;
@@ -163,23 +156,30 @@ var useFloating = function useFloating(_ref5) {
           side === "top" && (arrowRef.current.style.insetBlockEnd = offsetY);
           side === "bottom" && (arrowRef.current.style.insetBlockStart = offsetY);
         }
+        // use appear animation
+        appear();
       })["catch"](function () {
         return null;
-      }).then(function () {
-        requestAnimationFrame(function () {
-          floatable.style.transitionProperty = "translate";
-          floatable.style.transitionDuration = "0.1s";
-        });
       });
     });
-    return function () {
-      cleanup();
-    };
-  }, [placement, trigger, offsets, arrowable]);
+    return cleanup;
+  });
+  // auto update: calc trigger dom to get position
+  // if trigger changed, re-relate
+  useEffect(function () {
+    if (open) {
+      var cleanup = position();
+      return function () {
+        cleanup === null || cleanup === void 0 || cleanup();
+      };
+    }
+    disappear();
+  }, [disappear, open, position]);
   return {
     floatableRef: floatableRef,
-    arrowRef: arrowRef
+    arrowRef: arrowRef,
+    disappear: disappear
   };
 };
 
-export { useAnimation, useFloating, useOffsets };
+export { useFloating, useOffsets };

package/dist/components/popper/index.d.ts

@@ -1,4 +1,2 @@
 import Popper from "./popper";
-import type { PopperRef } from "./types";
 export { Popper };
-export type { PopperRef };

package/dist/components/popper/popper.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
-import type { PopperProps, PopperRef } from "./types";
+import type { PopperProps, PopperRef } from "musae/types/popper";
 declare const Popper: React.ForwardRefExoticComponent<PopperProps & React.RefAttributes<PopperRef>>;
 export default Popper;

package/dist/components/portal/portal.d.ts

@@ -1,4 +1,4 @@
-import type { PortalProps } from "./types";
+import type { PortalProps } from "musae/types/portal";
 import { type FC } from "react";
 declare const Portal: FC<PortalProps>;
 export default Portal;

package/dist/components/progress/circular.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
-import { CircularProps } from "./types";
+import { CircularProps } from "musae/types/progress";
 declare const Circular: ({ value: _value, className, style }: CircularProps) => React.JSX.Element;
 export default Circular;

package/dist/components/progress/linear.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
-import { LinearProps } from "./types";
+import type { LinearProps } from "musae/types/progress";
 declare const Linear: ({ value: _value, className, style }: LinearProps) => React.JSX.Element;
 export default Linear;

package/dist/components/progress/progress.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
-import type { ProgressProps } from "./types";
+import type { ProgressProps } from "musae/types/progress";
 declare const Progress: ({ variant, value }: ProgressProps) => React.JSX.Element;
 export default Progress;

package/dist/components/quote/quote.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
-import { QuoteProps } from "./types";
+import { QuoteProps } from "musae/types/quote";
 declare const Quote: ({ className, children, style }: QuoteProps) => React.JSX.Element;
 export default Quote;

package/dist/components/radio/context.d.ts

@@ -1,3 +1,3 @@
-import type { ContextValue } from "./types";
+import type { ContextValue } from "musae/types/radio";
 declare const Context: import("react").Context<ContextValue | null>;
 export default Context;

package/dist/components/radio/group.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
-import type { RadioGroupProps } from "./types";
+import type { RadioGroupProps } from "musae/types/radio";
 declare const Group: ({ disabled, children, ...props }: RadioGroupProps) => React.JSX.Element;
 export default Group;

package/dist/components/radio/index.d.ts

@@ -1,2 +1,2 @@
-import type { TypedRadio } from "./types";
+import type { TypedRadio } from "musae/types/radio";
 export declare const Radio: TypedRadio;

package/dist/components/radio/radio.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
-import type { RadioProps } from "./types";
+import type { RadioProps } from "musae/types/radio";
 declare const Radio: ({ children, value, checked, disabled, ...props }: RadioProps) => React.JSX.Element;
 export default Radio;

package/dist/components/rate/hooks.d.ts

@@ -1,4 +1,4 @@
-import type { RateProps } from "./types";
+import type { RateProps } from "musae/types/rate";
 /**
  * @description
  * value hooks

package/dist/components/rate/rate.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
-import type { RateProps } from "./types";
+import type { RateProps } from "musae/types/rate";
 declare const Rate: ({ count, className, style, halfable, disabled, ...props }: RateProps) => React.JSX.Element;
 export default Rate;

package/dist/components/rate/star.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
-import { StarProps } from "./types";
+import type { StarProps } from "musae/types/rate";
 declare const Star: ({ disabled, value, onEnter, at, onLeave, onClick }: StarProps) => React.JSX.Element;
 export default Star;

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

@@ -61,7 +61,7 @@ var Dropdown = function Dropdown(_ref) {
     return /*#__PURE__*/React.createElement(menu.default, {
       items: items,
       onClick: onClick,
-      selectedKeys: relax.toArray(value)
+      selectedKeys: value
     });
   }, [items, onClick, value]);
   return /*#__PURE__*/React.createElement(popover.default, {

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

@@ -1,4 +1,4 @@
 import React, { type Key } from "react";
-import { DropdownProps } from "../../types/rich-text-editor";
+import type { DropdownProps } from "musae/types/rich-text-editor";
 declare const Dropdown: <T extends Key = React.Key>({ items: _items, value: _value, onChange, children, }: DropdownProps<T>) => React.JSX.Element;
 export default Dropdown;

package/dist/components/rich-text-editor/dropdown.mjs

@@ -59,7 +59,7 @@ var Dropdown = function Dropdown(_ref) {
     return /*#__PURE__*/React.createElement(Menu, {
       items: items,
       onClick: onClick,
-      selectedKeys: toArray(value)
+      selectedKeys: value
     });
   }, [items, onClick, value]);
   return /*#__PURE__*/React.createElement(Popover, {

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

@@ -1,13 +1,31 @@
 var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
 var React = require('react');
+var skeleton = require('../skeleton/skeleton.cjs');
+var useClassNames = require('../../hooks/use-class-names.cjs');
+var componentToken = require('../../utils/component-token.cjs');
+var relax = require('@aiszlab/relax');
+var className = require('../../utils/class-name.cjs');
 
+var _excluded = ["className"];
 var _RichTextEditor = /*#__PURE__*/React.lazy(function () {
   return Promise.resolve().then(function () { return require('./rich-text-editor.cjs'); });
 });
-var RichTextEditor = /*#__PURE__*/React.forwardRef(function (props, ref) {
+var RichTextEditor = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var className$1 = _ref.className,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var styled = {
+    className: "musaex-h22aca musaex-1k094eu musaex-qwu505"
+  };
+  var classNames = useClassNames.useClassNames(componentToken.ComponentToken.RichTextEditor);
   return /*#__PURE__*/React.createElement(React.Suspense, {
-    fallback: /*#__PURE__*/React.createElement("div", null, "Loading...")
+    fallback: /*#__PURE__*/React.createElement(skeleton.default, {
+      animation: true,
+      className: relax.clsx(classNames[className.RichTextEditorClassToken.Loading], styled.className),
+      style: styled.style
+    })
   }, /*#__PURE__*/React.createElement(_RichTextEditor, _objectSpread(_objectSpread({}, props), {}, {
+    className: relax.clsx(classNames[className.RichTextEditorClassToken.RichTextEditor], className$1),
     ref: ref
   })));
 });

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

@@ -1,6 +1,6 @@
 import React from "react";
 import type { RichTextEditorRef } from "musae/types/rich-text-editor";
-declare const RichTextEditor: React.ForwardRefExoticComponent<Pick<React.HTMLAttributes<HTMLDivElement>, "aria-placeholder"> & {
+declare const RichTextEditor: React.ForwardRefExoticComponent<Pick<React.HTMLAttributes<HTMLDivElement>, "aria-placeholder"> & import("../../types/element").ComponentProps & {
     placeholder?: import("@lexical/react/LexicalContentEditable").Props["placeholder"];
     disabled?: boolean;
     defaultValue?: string;

package/dist/components/rich-text-editor/index.mjs

@@ -1,13 +1,31 @@
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import React, { forwardRef, Suspense, createElement, lazy } from 'react';
+import Skeleton from '../skeleton/skeleton.mjs';
+import { useClassNames } from '../../hooks/use-class-names.mjs';
+import { ComponentToken } from '../../utils/component-token.mjs';
+import { clsx } from '@aiszlab/relax';
+import { RichTextEditorClassToken } from '../../utils/class-name.mjs';
 
+var _excluded = ["className"];
 var _RichTextEditor = /*#__PURE__*/lazy(function () {
   return import('./rich-text-editor.mjs');
 });
-var RichTextEditor = /*#__PURE__*/forwardRef(function (props, ref) {
+var RichTextEditor = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var className = _ref.className,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var styled = {
+    className: "musaex-h22aca musaex-1k094eu musaex-qwu505"
+  };
+  var classNames = useClassNames(ComponentToken.RichTextEditor);
   return /*#__PURE__*/React.createElement(Suspense, {
-    fallback: /*#__PURE__*/React.createElement("div", null, "Loading...")
+    fallback: /*#__PURE__*/React.createElement(Skeleton, {
+      animation: true,
+      className: clsx(classNames[RichTextEditorClassToken.Loading], styled.className),
+      style: styled.style
+    })
   }, /*#__PURE__*/createElement(_RichTextEditor, _objectSpread(_objectSpread({}, props), {}, {
+    className: clsx(classNames[RichTextEditorClassToken.RichTextEditor], className),
     ref: ref
   })));
 });

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

@@ -6,7 +6,6 @@ var relax = require('@aiszlab/relax');
 var LexicalComposerContext = require('@lexical/react/LexicalComposerContext');
 var LexicalOnChangePlugin = require('@lexical/react/LexicalOnChangePlugin');
 var markdown = require('@lexical/markdown');
-var index = require('../markdown-shortcut/index.cjs');
 
 var ControlledStatePlugin = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var value = _ref.value,
@@ -36,7 +35,7 @@ var ControlledStatePlugin = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
         onChange === null || onChange === void 0 || onChange(_value);
         return;
       }
-      var markdown$1 = markdown.$convertToMarkdownString(index.TRANSFORMERS, state._nodeMap.get("root"));
+      var markdown$1 = markdown.$convertToMarkdownString(markdown.TRANSFORMERS, state._nodeMap.get("root"));
       onChange === null || onChange === void 0 || onChange(markdown$1);
     });
   });

package/dist/components/rich-text-editor/plugins/controlled-state/index.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import type { Use } from "../../../../types/rich-text-editor";
+import type { Use } from "musae/types/rich-text-editor";
 interface Props {
     value?: string;
     onChange?: (value: string) => void;

package/dist/components/rich-text-editor/plugins/controlled-state/index.mjs

@@ -3,8 +3,7 @@ import React, { forwardRef, useCallback, useImperativeHandle } from 'react';
 import { useUpdateEffect, isUndefined, useEvent } from '@aiszlab/relax';
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
 import { OnChangePlugin } from '@lexical/react/LexicalOnChangePlugin';
-import { $convertToMarkdownString } from '@lexical/markdown';
-import { TRANSFORMERS } from '../markdown-shortcut/index.mjs';
+import { $convertToMarkdownString, TRANSFORMERS } from '@lexical/markdown';
 
 var ControlledStatePlugin = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var value = _ref.value,

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

@@ -1,16 +1,17 @@
 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
+    transformers: markdown.TRANSFORMERS
   });
 };
 
-exports.TRANSFORMERS = TRANSFORMERS;
+Object.defineProperty(exports, "TRANSFORMERS", {
+    enumerable: true,
+    get: function () { return markdown.TRANSFORMERS; }
+});
 exports.default = MarkdownShortcutPlugin;

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

@@ -1,6 +1,6 @@
-import { type Transformer } from "@lexical/markdown";
-export declare const TRANSFORMERS: Transformer[];
+import { TRANSFORMERS } from "@lexical/markdown";
 declare const MarkdownShortcutPlugin: () => import("react").FunctionComponentElement<Readonly<{
-    transformers?: Array<Transformer>;
+    transformers?: Array<import("@lexical/markdown").Transformer>;
 }>>;
 export default MarkdownShortcutPlugin;
+export { TRANSFORMERS };

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

@@ -1,13 +1,12 @@
-import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 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';
+import { TRANSFORMERS } from '@lexical/markdown';
+export { 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$1, {
     transformers: TRANSFORMERS
   });
 };
 
-export { TRANSFORMERS, MarkdownShortcutPlugin as default };
+export { MarkdownShortcutPlugin as default };

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

@@ -1,5 +1,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
 var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
 var React = require('react');
@@ -24,14 +25,14 @@ 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 index = require('./plugins/toolbar/index.cjs');
+var index$1 = 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 _excluded = ["placeholder", "disabled", "defaultValue", "onChange", "value", "className", "style"];
 var styles = {
   shell: function shell(props) {
     return [{
@@ -81,7 +82,9 @@ var RichTextEditor = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     defaultValue = _ref.defaultValue,
     onChange = _ref.onChange;
     _ref.value;
-    var props = _objectWithoutProperties(_ref, _excluded);
+    var className = _ref.className,
+    style = _ref.style,
+    props = _objectWithoutProperties(_ref, _excluded);
   var _useIdentity = relax.useIdentity(),
     _useIdentity2 = _slicedToArray(_useIdentity, 1),
     id = _useIdentity2[0];
@@ -105,7 +108,7 @@ var RichTextEditor = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       codeBackgroundColor: theme$1.colors[colors.ColorToken.SurfaceContainerHighest]
     })),
     editor: {
-      className: "musaex-1a2a7pz musaex-y0sash musaex-1vgzror musaex-igxgg9 musaex-1y06zzy"
+      className: "musaex-1a2a7pz musaex-y0sash musaex-1vgzror musaex-igxgg9 musaex-ktxt4i"
     },
     h1: stylex.default.props(theme.typography.display.large),
     h2: stylex.default.props(theme.typography.display.medium),
@@ -175,7 +178,7 @@ var RichTextEditor = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
         // different value usage, use different serialization
         switch (_use) {
           case "markdown":
-            markdown.$convertFromMarkdownString(defaultValue, index.TRANSFORMERS);
+            markdown.$convertFromMarkdownString(defaultValue, markdown.TRANSFORMERS, void 0, true);
             break;
           default:
             editor.setEditorState(editor.parseEditorState(defaultValue));
@@ -195,9 +198,9 @@ var RichTextEditor = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   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, {
+    className: relax.clsx(className, styled.shell.className),
+    style: _objectSpread(_objectSpread({}, styled.shell.style), style)
+  }, !disabled && /*#__PURE__*/React.createElement(index.default, null), /*#__PURE__*/React.createElement(LexicalRichTextPlugin.RichTextPlugin, {
     contentEditable: /*#__PURE__*/React.createElement(LexicalContentEditable.ContentEditable, {
       className: styled.editor.className,
       style: styled.editor.style,
@@ -207,7 +210,7 @@ var RichTextEditor = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       "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, {
+  }), /*#__PURE__*/React.createElement(LexicalHistoryPlugin.HistoryPlugin, null), /*#__PURE__*/React.createElement(index$1.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, {

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

@@ -1,6 +1,6 @@
 import React from "react";
 import type { RichTextEditorRef } from "musae/types/rich-text-editor";
-declare const RichTextEditor: React.ForwardRefExoticComponent<Pick<React.HTMLAttributes<HTMLDivElement>, "aria-placeholder"> & {
+declare const RichTextEditor: React.ForwardRefExoticComponent<Pick<React.HTMLAttributes<HTMLDivElement>, "aria-placeholder"> & import("../../types/element").ComponentProps & {
     placeholder?: import("@lexical/react/LexicalContentEditable").Props["placeholder"];
     disabled?: boolean;
     defaultValue?: string;