musae 0.3.3 → 0.3.6

package/dist/components/popper/hooks.cjs

@@ -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 = framerMotion.useAnimate(),
     _useAnimate2 = _slicedToArray(_useAnimate, 2),
-    animatableRef = _useAnimate2[0],
+    floatableRef = _useAnimate2[0],
     animate = _useAnimate2[1];
+  var arrowRef = React.useRef(null);
+  var _useContainer = useContainer.useContainer({
+      container: _trigger,
+      useBody: false
+    }, [open]),
+    trigger = _useContainer.container;
+  var _isOpen = React.useRef(false);
+  // appear animation
+  // prevent open again when opened
+  // first remove `display: none` style
+  // then animate
   var appear = relax.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 = relax.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 = React.useCallback(function () {
-    if (!disappearable) return;
-    disappear();
-  }, [disappear, disappearable]);
-  React.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 = React.useRef(null);
-  var _useContainer = useContainer.useContainer({
-      container: _trigger,
-      useBody: false
-    }, [open]),
-    trigger = _useContainer.container;
-  var arrowRef = React.useRef(null);
   // memorized offsets
   var offsets = useOffsets({
     offset: _offset,
     arrowable: arrowable
   });
-  // auto update: calc trigger dom to get position
-  // if trigger changed, re-relate
-  React.useLayoutEffect(function () {
-    var floatable = floatableRef.current;
+  // position listener
+  var position = relax.useEvent(function () {
     if (!trigger) return;
-    if (!floatable) return;
-    var cleanup = dom.autoUpdate(trigger, floatable, function () {
-      dom.computePosition(trigger, floatable, {
+    var cleanup = dom.autoUpdate(trigger, floatableRef.current, function () {
+      dom.computePosition(trigger, floatableRef.current, {
         placement: placement,
-        middleware: [dom.flip(), dom.offset(offsets), arrowable && !!arrowRef.current && dom.arrow({
+        middleware: [dom.flip(), dom.shift(), dom.offset(offsets), arrowable && !!arrowRef.current && dom.arrow({
           element: arrowRef.current,
           padding: 16
-        }), dom.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,25 +156,31 @@ 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
+  React.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
   };
 };
 
-exports.useAnimation = useAnimation;
 exports.useFloating = useFloating;
 exports.useOffsets = useOffsets;

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

@@ -11,28 +11,22 @@ export declare const useOffsets: ({ offset, arrowable, }: {
     crossAxis?: number;
     alignmentAxis?: number | null;
 };
-/**
- * @description
- * use animation
- */
-export declare const useAnimation: ({ open, disappearable, onEntered, onExit, onExited, }: {
-    open: boolean;
-    disappearable: boolean;
-} & Pick<PopperProps, "onEntered" | "onExit" | "onExited">) => {
-    animatableRef: import("framer-motion").AnimationScope<HTMLDivElement>;
-    disappear: () => Promise<void>;
-};
 /**
  * @description
  * floating position
  */
-export declare const useFloating: ({ open, trigger: _trigger, placement, arrowable, offset: _offset, }: {
+export declare const useFloating: ({ open, trigger: _trigger, placement, arrowable, offset: _offset, onEntered, onExit, onExited, disappearable, }: {
     open: boolean;
     trigger: DropdownProps["trigger"];
     placement: DropdownProps["placement"];
     arrowable: boolean;
     offset: DropdownProps["offset"];
+    onEntered?: () => Promise<void> | void;
+    onExit?: () => Promise<void> | void;
+    onExited?: () => Promise<void> | void;
+    disappearable: boolean;
 }) => {
-    floatableRef: import("react").RefObject<HTMLDivElement>;
+    floatableRef: import("framer-motion").AnimationScope<HTMLDivElement>;
     arrowRef: import("react").RefObject<HTMLDivElement>;
+    disappear: (force?: boolean) => Promise<void>;
 };

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/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.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

@@ -25,8 +25,8 @@ 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');
@@ -178,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));
@@ -200,7 +200,7 @@ var RichTextEditor = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }, /*#__PURE__*/React.createElement("div", {
     className: relax.clsx(className, styled.shell.className),
     style: _objectSpread(_objectSpread({}, styled.shell.style), style)
-  }, !disabled && /*#__PURE__*/React.createElement(index$1.default, null), /*#__PURE__*/React.createElement(LexicalRichTextPlugin.RichTextPlugin, {
+  }, !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,
@@ -210,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, {