@uiw/react-md-editor 3.19.8 → 3.20.1

package/esm/Editor.d.ts

@@ -132,6 +132,12 @@ export interface MDEditorProps extends Omit<React.HTMLAttributes<HTMLDivElement>
     enableScroll?: boolean;
     /** Toolbar on bottom */
     toolbarBottom?: boolean;
+    /**
+     * The **`direction`** property sets the direction of text, table columns, and horizontal overflow. Use `rtl` for languages written from right to left (like Hebrew or Arabic), and `ltr` for those written from left to right (like English and most other languages).
+     *
+     * https://github.com/uiwjs/react-md-editor/issues/462
+     */
+    direction?: CSSProperties['direction'];
 }
 declare type Editor = React.FC<PropsWithRef<MDEditorProps>> & {
     Markdown: typeof MarkdownPreview;

package/esm/Editor.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
-var _excluded = ["prefixCls", "className", "value", "commands", "commandsFilter", "extraCommands", "height", "enableScroll", "visibleDragbar", "highlightEnable", "preview", "fullscreen", "overflow", "previewOptions", "textareaProps", "maxHeight", "minHeight", "autoFocus", "tabSize", "defaultTabEnable", "onChange", "onHeightChange", "hideToolbar", "toolbarBottom", "components", "renderTextarea"];
+var _excluded = ["prefixCls", "className", "value", "commands", "commandsFilter", "direction", "extraCommands", "height", "enableScroll", "visibleDragbar", "highlightEnable", "preview", "fullscreen", "overflow", "previewOptions", "textareaProps", "maxHeight", "minHeight", "autoFocus", "tabSize", "defaultTabEnable", "onChange", "onHeightChange", "hideToolbar", "toolbarBottom", "components", "renderTextarea"];
 import React, { useEffect, useReducer, useMemo, useRef, useImperativeHandle } from 'react';
 import MarkdownPreview from '@uiw/react-markdown-preview';
 import TextArea from './components/TextArea';
@@ -28,6 +28,7 @@ var InternalMDEditor = (props, ref) => {
       value: propsValue,
       commands = getCommands(),
       commandsFilter,
+      direction,
       extraCommands = getExtraCommands(),
       height = 200,
       enableScroll = true,
@@ -85,7 +86,7 @@ var InternalMDEditor = (props, ref) => {
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
-  var cls = [className, 'wmde-markdown-var', prefixCls, state.preview ? prefixCls + "-show-" + state.preview : null, state.fullscreen ? prefixCls + "-fullscreen" : null].filter(Boolean).join(' ').trim();
+  var cls = [className, 'wmde-markdown-var', direction ? prefixCls + "-" + direction : null, prefixCls, state.preview ? prefixCls + "-show-" + state.preview : null, state.fullscreen ? prefixCls + "-fullscreen" : null].filter(Boolean).join(' ').trim();
   useMemo(() => propsValue !== state.markdown && dispatch({
     markdown: propsValue || ''
   }), [propsValue, state.markdown]);

package/esm/Editor.js.map

@@ -30,6 +30,7 @@
     "propsValue",
     "commands",
     "commandsFilter",
+    "direction",
     "extraCommands",
     "height",
     "enableScroll",
@@ -109,7 +110,7 @@
     "../src/Editor.tsx"
   ],
   "sourcesContent": [
-    "import React, { useEffect, useReducer, useMemo, useRef, useImperativeHandle, CSSProperties, PropsWithRef } from 'react';\nimport MarkdownPreview, { MarkdownPreviewProps } from '@uiw/react-markdown-preview';\nimport TextArea, { ITextAreaProps } from './components/TextArea';\nimport Toolbar from './components/Toolbar';\nimport DragBar from './components/DragBar';\nimport { getCommands, getExtraCommands, ICommand } from './commands';\nimport { reducer, EditorContext, ContextStore, PreviewType } from './Context';\nimport './index.less';\n\nexport interface IProps {\n  prefixCls?: string;\n  className?: string;\n}\n\nexport interface MDEditorProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'>, IProps {\n  /**\n   * The Markdown value.\n   */\n  value?: string;\n  /**\n   * Event handler for the `onChange` event.\n   */\n  onChange?: (value?: string, event?: React.ChangeEvent<HTMLTextAreaElement>, state?: ContextStore) => void;\n  /**\n   * editor height change listener\n   */\n  onHeightChange?: (value?: CSSProperties['height'], oldValue?: CSSProperties['height'], state?: ContextStore) => void;\n  /**\n   * Can be used to make `Markdown Editor` focus itself on initialization. Defaults to on.\n   * it will be set to true when either the source `textarea` is focused,\n   * or it has an `autofocus` attribute and no other element is focused.\n   */\n  autoFocus?: ITextAreaProps['autoFocus'];\n  /**\n   * The height of the editor.\n   * ⚠️ `Dragbar` is invalid when **`height`** parameter percentage.\n   */\n  height?: CSSProperties['height'];\n  /**\n   * Custom toolbar heigth\n   * @default 29px\n   *\n   * @deprecated toolbar height adaptive: https://github.com/uiwjs/react-md-editor/issues/427\n   *\n   */\n  toolbarHeight?: number;\n  /**\n   * Show drag and drop tool. Set the height of the editor.\n   */\n  visibleDragbar?: boolean;\n  /**\n   * @deprecated use `visibleDragbar`\n   */\n  visiableDragbar?: boolean;\n  /**\n   * Show markdown preview.\n   */\n  preview?: PreviewType;\n  /**\n   * Full screen display editor.\n   */\n  fullscreen?: boolean;\n  /**\n   * Disable `fullscreen` setting body styles\n   */\n  overflow?: boolean;\n  /**\n   * Maximum drag height. `visibleDragbar=true`\n   */\n  maxHeight?: number;\n  /**\n   * Minimum drag height. `visibleDragbar=true`\n   */\n  minHeight?: number;\n  /**\n   * This is reset [react-markdown](https://github.com/rexxars/react-markdown) settings.\n   */\n  previewOptions?: Omit<MarkdownPreviewProps, 'source'>;\n  /**\n   * Set the `textarea` related props.\n   */\n  textareaProps?: ITextAreaProps;\n  /**\n   * Use div to replace TextArea or re-render TextArea\n   * @deprecated Please use ~~`renderTextarea`~~ -> `components`\n   */\n  renderTextarea?: ITextAreaProps['renderTextarea'];\n  /**\n   * re-render element\n   */\n  components?: {\n    /** Use div to replace TextArea or re-render TextArea */\n    textarea?: ITextAreaProps['renderTextarea'];\n    /**\n     * Override the default command element\n     * _`toolbar`_ < _`command[].render`_\n     */\n    toolbar?: ICommand['render'];\n    /** Custom markdown preview */\n    preview?: (source: string, state: ContextStore, dispath: React.Dispatch<ContextStore>) => JSX.Element;\n  };\n  /** Theme configuration */\n  'data-color-mode'?: 'light' | 'dark';\n  /**\n   * Disable editing area code highlighting. The value is `false`, which increases the editing speed.\n   * @default true\n   */\n  highlightEnable?: boolean;\n  /**\n   * The number of characters to insert when pressing tab key.\n   * Default `2` spaces.\n   */\n  tabSize?: number;\n  /**\n   * If `false`, the `tab` key inserts a tab character into the textarea. If `true`, the `tab` key executes default behavior e.g. focus shifts to next element.\n   */\n  defaultTabEnable?: boolean;\n  /**\n   * You can create your own commands or reuse existing commands.\n   */\n  commands?: ICommand[];\n  /**\n   * Filter or modify your commands.\n   * https://github.com/uiwjs/react-md-editor/issues/296\n   */\n  commandsFilter?: (command: ICommand, isExtra: boolean) => false | ICommand;\n  /**\n   * You can create your own commands or reuse existing commands.\n   */\n  extraCommands?: ICommand[];\n  /**\n   * Hide the tool bar\n   */\n  hideToolbar?: boolean;\n  /** Whether to enable scrolling */\n  enableScroll?: boolean;\n  /** Toolbar on bottom */\n  toolbarBottom?: boolean;\n}\n\nfunction setGroupPopFalse(data: Record<string, boolean> = {}) {\n  Object.keys(data).forEach((keyname) => {\n    data[keyname] = false;\n  });\n  return data;\n}\n\nconst InternalMDEditor = (\n  props: MDEditorProps,\n  ref?: ((instance: ContextStore) => void) | React.RefObject<ContextStore> | null,\n) => {\n  const {\n    prefixCls = 'w-md-editor',\n    className,\n    value: propsValue,\n    commands = getCommands(),\n    commandsFilter,\n    extraCommands = getExtraCommands(),\n    height = 200,\n    enableScroll = true,\n    visibleDragbar = typeof props.visiableDragbar === 'boolean' ? props.visiableDragbar : true,\n    highlightEnable = true,\n    preview: previewType = 'live',\n    fullscreen = false,\n    overflow = true,\n    previewOptions = {},\n    textareaProps,\n    maxHeight = 1200,\n    minHeight = 100,\n    autoFocus,\n    tabSize = 2,\n    defaultTabEnable = false,\n    onChange,\n    onHeightChange,\n    hideToolbar,\n    toolbarBottom = false,\n    components,\n    renderTextarea,\n    ...other\n  } = props || {};\n  const cmds = commands\n    .map((item) => (commandsFilter ? commandsFilter(item, false) : item))\n    .filter(Boolean) as ICommand[];\n  const extraCmds = extraCommands\n    .map((item) => (commandsFilter ? commandsFilter(item, true) : item))\n    .filter(Boolean) as ICommand[];\n  let [state, dispatch] = useReducer(reducer, {\n    markdown: propsValue,\n    preview: previewType,\n    components,\n    height,\n    highlightEnable,\n    tabSize,\n    defaultTabEnable,\n    scrollTop: 0,\n    scrollTopPreview: 0,\n    commands: cmds,\n    extraCommands: extraCmds,\n    fullscreen,\n    barPopup: {},\n  });\n  const container = useRef<HTMLDivElement>(null);\n  const previewRef = useRef<HTMLDivElement>(null);\n  const enableScrollRef = useRef(enableScroll);\n\n  useImperativeHandle(ref, () => ({ ...state }));\n  useMemo(() => (enableScrollRef.current = enableScroll), [enableScroll]);\n  useEffect(() => {\n    const stateInit: ContextStore = {};\n    if (container.current) {\n      stateInit.container = container.current || undefined;\n    }\n    stateInit.markdown = propsValue || '';\n    stateInit.barPopup = {};\n    if (dispatch) {\n      dispatch({ ...state, ...stateInit });\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  const cls = [\n    className,\n    'wmde-markdown-var',\n    prefixCls,\n    state.preview ? `${prefixCls}-show-${state.preview}` : null,\n    state.fullscreen ? `${prefixCls}-fullscreen` : null,\n  ]\n    .filter(Boolean)\n    .join(' ')\n    .trim();\n\n  useMemo(\n    () => propsValue !== state.markdown && dispatch({ markdown: propsValue || '' }),\n    [propsValue, state.markdown],\n  );\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  useMemo(() => previewType !== state.preview && dispatch({ preview: previewType }), [previewType]);\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  useMemo(() => tabSize !== state.tabSize && dispatch({ tabSize }), [tabSize]);\n  useMemo(\n    () => highlightEnable !== state.highlightEnable && dispatch({ highlightEnable }),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [highlightEnable],\n  );\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  useMemo(() => autoFocus !== state.autoFocus && dispatch({ autoFocus: autoFocus }), [autoFocus]);\n  useMemo(\n    () => fullscreen !== state.fullscreen && dispatch({ fullscreen: fullscreen }),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [fullscreen],\n  );\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  useMemo(() => height !== state.height && dispatch({ height: height }), [height]);\n  useMemo(\n    () => height !== state.height && onHeightChange && onHeightChange(state.height, height, state),\n    [height, onHeightChange, state],\n  );\n\n  const textareaDomRef = useRef<HTMLDivElement>();\n  const active = useRef<'text' | 'preview'>('preview');\n  const initScroll = useRef(false);\n\n  useMemo(() => {\n    textareaDomRef.current = state.textareaWarp;\n    if (state.textareaWarp) {\n      state.textareaWarp.addEventListener('mouseover', () => {\n        active.current = 'text';\n      });\n      state.textareaWarp.addEventListener('mouseleave', () => {\n        active.current = 'preview';\n      });\n    }\n  }, [state.textareaWarp]);\n\n  const handleScroll = (e: React.UIEvent<HTMLDivElement>, type: 'text' | 'preview') => {\n    if (!enableScrollRef.current) return;\n    const textareaDom = textareaDomRef.current;\n    const previewDom = previewRef.current ? previewRef.current : undefined;\n    if (!initScroll.current) {\n      active.current = type;\n      initScroll.current = true;\n    }\n    if (textareaDom && previewDom) {\n      const scale =\n        (textareaDom.scrollHeight - textareaDom.offsetHeight) / (previewDom.scrollHeight - previewDom.offsetHeight);\n      if (e.target === textareaDom && active.current === 'text') {\n        previewDom.scrollTop = textareaDom.scrollTop / scale;\n      }\n      if (e.target === previewDom && active.current === 'preview') {\n        textareaDom.scrollTop = previewDom.scrollTop * scale;\n      }\n      let scrollTop = 0;\n      if (active.current === 'text') {\n        scrollTop = textareaDom.scrollTop || 0;\n      } else if (active.current === 'preview') {\n        scrollTop = previewDom.scrollTop || 0;\n      }\n      dispatch({ scrollTop });\n    }\n  };\n\n  const previewClassName = `${prefixCls}-preview ${previewOptions.className || ''}`;\n  const handlePreviewScroll = (e: React.UIEvent<HTMLDivElement, UIEvent>) => handleScroll(e, 'preview');\n  let mdPreview = useMemo(\n    () => (\n      <div ref={previewRef} className={previewClassName}>\n        <MarkdownPreview {...previewOptions} onScroll={handlePreviewScroll} source={state.markdown || ''} />\n      </div>\n    ),\n    [previewClassName, previewOptions, state.markdown],\n  );\n  const preview = components?.preview && components?.preview(state.markdown || '', state, dispatch);\n  if (preview && React.isValidElement(preview)) {\n    mdPreview = (\n      <div className={previewClassName} ref={previewRef} onScroll={handlePreviewScroll}>\n        {preview}\n      </div>\n    );\n  }\n\n  const containerStyle = { ...other.style, height: state.height || '100%' };\n  const containerClick = () => dispatch({ barPopup: { ...setGroupPopFalse(state.barPopup) } });\n  const dragBarChange = (newHeight: number) => dispatch({ height: newHeight });\n\n  return (\n    <EditorContext.Provider value={{ ...state, dispatch }}>\n      <div ref={container} className={cls} {...other} onClick={containerClick} style={containerStyle}>\n        {!hideToolbar && !toolbarBottom && (\n          <Toolbar prefixCls={prefixCls} overflow={overflow} toolbarBottom={toolbarBottom} />\n        )}\n        <div className={`${prefixCls}-content`}>\n          {/(edit|live)/.test(state.preview || '') && (\n            <TextArea\n              className={`${prefixCls}-input`}\n              prefixCls={prefixCls}\n              autoFocus={autoFocus}\n              {...textareaProps}\n              onChange={(evn) => {\n                onChange && onChange(evn.target.value, evn, state);\n                if (textareaProps && textareaProps.onChange) {\n                  textareaProps.onChange(evn);\n                }\n              }}\n              renderTextarea={components?.textarea || renderTextarea}\n              onScroll={(e) => handleScroll(e, 'text')}\n            />\n          )}\n          {/(live|preview)/.test(state.preview || '') && mdPreview}\n        </div>\n        {visibleDragbar && !state.fullscreen && (\n          <DragBar\n            prefixCls={prefixCls}\n            height={state.height as number}\n            maxHeight={maxHeight!}\n            minHeight={minHeight!}\n            onChange={dragBarChange}\n          />\n        )}\n        {!hideToolbar && toolbarBottom && (\n          <Toolbar prefixCls={prefixCls} overflow={overflow} toolbarBottom={toolbarBottom} />\n        )}\n      </div>\n    </EditorContext.Provider>\n  );\n};\n\ntype Editor = React.FC<PropsWithRef<MDEditorProps>> & { Markdown: typeof MarkdownPreview };\n\nconst mdEditor: Editor = React.forwardRef(InternalMDEditor) as unknown as Editor;\n\nmdEditor.Markdown = MarkdownPreview;\n\nexport default mdEditor;\n"
+    "import React, { useEffect, useReducer, useMemo, useRef, useImperativeHandle, CSSProperties, PropsWithRef } from 'react';\nimport MarkdownPreview, { MarkdownPreviewProps } from '@uiw/react-markdown-preview';\nimport TextArea, { ITextAreaProps } from './components/TextArea';\nimport Toolbar from './components/Toolbar';\nimport DragBar from './components/DragBar';\nimport { getCommands, getExtraCommands, ICommand } from './commands';\nimport { reducer, EditorContext, ContextStore, PreviewType } from './Context';\nimport './index.less';\n\nexport interface IProps {\n  prefixCls?: string;\n  className?: string;\n}\n\nexport interface MDEditorProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'>, IProps {\n  /**\n   * The Markdown value.\n   */\n  value?: string;\n  /**\n   * Event handler for the `onChange` event.\n   */\n  onChange?: (value?: string, event?: React.ChangeEvent<HTMLTextAreaElement>, state?: ContextStore) => void;\n  /**\n   * editor height change listener\n   */\n  onHeightChange?: (value?: CSSProperties['height'], oldValue?: CSSProperties['height'], state?: ContextStore) => void;\n  /**\n   * Can be used to make `Markdown Editor` focus itself on initialization. Defaults to on.\n   * it will be set to true when either the source `textarea` is focused,\n   * or it has an `autofocus` attribute and no other element is focused.\n   */\n  autoFocus?: ITextAreaProps['autoFocus'];\n  /**\n   * The height of the editor.\n   * ⚠️ `Dragbar` is invalid when **`height`** parameter percentage.\n   */\n  height?: CSSProperties['height'];\n  /**\n   * Custom toolbar heigth\n   * @default 29px\n   *\n   * @deprecated toolbar height adaptive: https://github.com/uiwjs/react-md-editor/issues/427\n   *\n   */\n  toolbarHeight?: number;\n  /**\n   * Show drag and drop tool. Set the height of the editor.\n   */\n  visibleDragbar?: boolean;\n  /**\n   * @deprecated use `visibleDragbar`\n   */\n  visiableDragbar?: boolean;\n  /**\n   * Show markdown preview.\n   */\n  preview?: PreviewType;\n  /**\n   * Full screen display editor.\n   */\n  fullscreen?: boolean;\n  /**\n   * Disable `fullscreen` setting body styles\n   */\n  overflow?: boolean;\n  /**\n   * Maximum drag height. `visibleDragbar=true`\n   */\n  maxHeight?: number;\n  /**\n   * Minimum drag height. `visibleDragbar=true`\n   */\n  minHeight?: number;\n  /**\n   * This is reset [react-markdown](https://github.com/rexxars/react-markdown) settings.\n   */\n  previewOptions?: Omit<MarkdownPreviewProps, 'source'>;\n  /**\n   * Set the `textarea` related props.\n   */\n  textareaProps?: ITextAreaProps;\n  /**\n   * Use div to replace TextArea or re-render TextArea\n   * @deprecated Please use ~~`renderTextarea`~~ -> `components`\n   */\n  renderTextarea?: ITextAreaProps['renderTextarea'];\n  /**\n   * re-render element\n   */\n  components?: {\n    /** Use div to replace TextArea or re-render TextArea */\n    textarea?: ITextAreaProps['renderTextarea'];\n    /**\n     * Override the default command element\n     * _`toolbar`_ < _`command[].render`_\n     */\n    toolbar?: ICommand['render'];\n    /** Custom markdown preview */\n    preview?: (source: string, state: ContextStore, dispath: React.Dispatch<ContextStore>) => JSX.Element;\n  };\n  /** Theme configuration */\n  'data-color-mode'?: 'light' | 'dark';\n  /**\n   * Disable editing area code highlighting. The value is `false`, which increases the editing speed.\n   * @default true\n   */\n  highlightEnable?: boolean;\n  /**\n   * The number of characters to insert when pressing tab key.\n   * Default `2` spaces.\n   */\n  tabSize?: number;\n  /**\n   * If `false`, the `tab` key inserts a tab character into the textarea. If `true`, the `tab` key executes default behavior e.g. focus shifts to next element.\n   */\n  defaultTabEnable?: boolean;\n  /**\n   * You can create your own commands or reuse existing commands.\n   */\n  commands?: ICommand[];\n  /**\n   * Filter or modify your commands.\n   * https://github.com/uiwjs/react-md-editor/issues/296\n   */\n  commandsFilter?: (command: ICommand, isExtra: boolean) => false | ICommand;\n  /**\n   * You can create your own commands or reuse existing commands.\n   */\n  extraCommands?: ICommand[];\n  /**\n   * Hide the tool bar\n   */\n  hideToolbar?: boolean;\n  /** Whether to enable scrolling */\n  enableScroll?: boolean;\n  /** Toolbar on bottom */\n  toolbarBottom?: boolean;\n  /**\n   * The **`direction`** property sets the direction of text, table columns, and horizontal overflow. Use `rtl` for languages written from right to left (like Hebrew or Arabic), and `ltr` for those written from left to right (like English and most other languages).\n   *\n   * https://github.com/uiwjs/react-md-editor/issues/462\n   */\n  direction?: CSSProperties['direction'];\n}\n\nfunction setGroupPopFalse(data: Record<string, boolean> = {}) {\n  Object.keys(data).forEach((keyname) => {\n    data[keyname] = false;\n  });\n  return data;\n}\n\nconst InternalMDEditor = (\n  props: MDEditorProps,\n  ref?: ((instance: ContextStore) => void) | React.RefObject<ContextStore> | null,\n) => {\n  const {\n    prefixCls = 'w-md-editor',\n    className,\n    value: propsValue,\n    commands = getCommands(),\n    commandsFilter,\n    direction,\n    extraCommands = getExtraCommands(),\n    height = 200,\n    enableScroll = true,\n    visibleDragbar = typeof props.visiableDragbar === 'boolean' ? props.visiableDragbar : true,\n    highlightEnable = true,\n    preview: previewType = 'live',\n    fullscreen = false,\n    overflow = true,\n    previewOptions = {},\n    textareaProps,\n    maxHeight = 1200,\n    minHeight = 100,\n    autoFocus,\n    tabSize = 2,\n    defaultTabEnable = false,\n    onChange,\n    onHeightChange,\n    hideToolbar,\n    toolbarBottom = false,\n    components,\n    renderTextarea,\n    ...other\n  } = props || {};\n  const cmds = commands\n    .map((item) => (commandsFilter ? commandsFilter(item, false) : item))\n    .filter(Boolean) as ICommand[];\n  const extraCmds = extraCommands\n    .map((item) => (commandsFilter ? commandsFilter(item, true) : item))\n    .filter(Boolean) as ICommand[];\n  let [state, dispatch] = useReducer(reducer, {\n    markdown: propsValue,\n    preview: previewType,\n    components,\n    height,\n    highlightEnable,\n    tabSize,\n    defaultTabEnable,\n    scrollTop: 0,\n    scrollTopPreview: 0,\n    commands: cmds,\n    extraCommands: extraCmds,\n    fullscreen,\n    barPopup: {},\n  });\n  const container = useRef<HTMLDivElement>(null);\n  const previewRef = useRef<HTMLDivElement>(null);\n  const enableScrollRef = useRef(enableScroll);\n\n  useImperativeHandle(ref, () => ({ ...state }));\n  useMemo(() => (enableScrollRef.current = enableScroll), [enableScroll]);\n  useEffect(() => {\n    const stateInit: ContextStore = {};\n    if (container.current) {\n      stateInit.container = container.current || undefined;\n    }\n    stateInit.markdown = propsValue || '';\n    stateInit.barPopup = {};\n    if (dispatch) {\n      dispatch({ ...state, ...stateInit });\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  const cls = [\n    className,\n    'wmde-markdown-var',\n    direction ? `${prefixCls}-${direction}` : null,\n    prefixCls,\n    state.preview ? `${prefixCls}-show-${state.preview}` : null,\n    state.fullscreen ? `${prefixCls}-fullscreen` : null,\n  ]\n    .filter(Boolean)\n    .join(' ')\n    .trim();\n\n  useMemo(\n    () => propsValue !== state.markdown && dispatch({ markdown: propsValue || '' }),\n    [propsValue, state.markdown],\n  );\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  useMemo(() => previewType !== state.preview && dispatch({ preview: previewType }), [previewType]);\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  useMemo(() => tabSize !== state.tabSize && dispatch({ tabSize }), [tabSize]);\n  useMemo(\n    () => highlightEnable !== state.highlightEnable && dispatch({ highlightEnable }),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [highlightEnable],\n  );\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  useMemo(() => autoFocus !== state.autoFocus && dispatch({ autoFocus: autoFocus }), [autoFocus]);\n  useMemo(\n    () => fullscreen !== state.fullscreen && dispatch({ fullscreen: fullscreen }),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [fullscreen],\n  );\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  useMemo(() => height !== state.height && dispatch({ height: height }), [height]);\n  useMemo(\n    () => height !== state.height && onHeightChange && onHeightChange(state.height, height, state),\n    [height, onHeightChange, state],\n  );\n\n  const textareaDomRef = useRef<HTMLDivElement>();\n  const active = useRef<'text' | 'preview'>('preview');\n  const initScroll = useRef(false);\n\n  useMemo(() => {\n    textareaDomRef.current = state.textareaWarp;\n    if (state.textareaWarp) {\n      state.textareaWarp.addEventListener('mouseover', () => {\n        active.current = 'text';\n      });\n      state.textareaWarp.addEventListener('mouseleave', () => {\n        active.current = 'preview';\n      });\n    }\n  }, [state.textareaWarp]);\n\n  const handleScroll = (e: React.UIEvent<HTMLDivElement>, type: 'text' | 'preview') => {\n    if (!enableScrollRef.current) return;\n    const textareaDom = textareaDomRef.current;\n    const previewDom = previewRef.current ? previewRef.current : undefined;\n    if (!initScroll.current) {\n      active.current = type;\n      initScroll.current = true;\n    }\n    if (textareaDom && previewDom) {\n      const scale =\n        (textareaDom.scrollHeight - textareaDom.offsetHeight) / (previewDom.scrollHeight - previewDom.offsetHeight);\n      if (e.target === textareaDom && active.current === 'text') {\n        previewDom.scrollTop = textareaDom.scrollTop / scale;\n      }\n      if (e.target === previewDom && active.current === 'preview') {\n        textareaDom.scrollTop = previewDom.scrollTop * scale;\n      }\n      let scrollTop = 0;\n      if (active.current === 'text') {\n        scrollTop = textareaDom.scrollTop || 0;\n      } else if (active.current === 'preview') {\n        scrollTop = previewDom.scrollTop || 0;\n      }\n      dispatch({ scrollTop });\n    }\n  };\n\n  const previewClassName = `${prefixCls}-preview ${previewOptions.className || ''}`;\n  const handlePreviewScroll = (e: React.UIEvent<HTMLDivElement, UIEvent>) => handleScroll(e, 'preview');\n  let mdPreview = useMemo(\n    () => (\n      <div ref={previewRef} className={previewClassName}>\n        <MarkdownPreview {...previewOptions} onScroll={handlePreviewScroll} source={state.markdown || ''} />\n      </div>\n    ),\n    [previewClassName, previewOptions, state.markdown],\n  );\n  const preview = components?.preview && components?.preview(state.markdown || '', state, dispatch);\n  if (preview && React.isValidElement(preview)) {\n    mdPreview = (\n      <div className={previewClassName} ref={previewRef} onScroll={handlePreviewScroll}>\n        {preview}\n      </div>\n    );\n  }\n\n  const containerStyle = { ...other.style, height: state.height || '100%' };\n  const containerClick = () => dispatch({ barPopup: { ...setGroupPopFalse(state.barPopup) } });\n  const dragBarChange = (newHeight: number) => dispatch({ height: newHeight });\n\n  return (\n    <EditorContext.Provider value={{ ...state, dispatch }}>\n      <div ref={container} className={cls} {...other} onClick={containerClick} style={containerStyle}>\n        {!hideToolbar && !toolbarBottom && (\n          <Toolbar prefixCls={prefixCls} overflow={overflow} toolbarBottom={toolbarBottom} />\n        )}\n        <div className={`${prefixCls}-content`}>\n          {/(edit|live)/.test(state.preview || '') && (\n            <TextArea\n              className={`${prefixCls}-input`}\n              prefixCls={prefixCls}\n              autoFocus={autoFocus}\n              {...textareaProps}\n              onChange={(evn) => {\n                onChange && onChange(evn.target.value, evn, state);\n                if (textareaProps && textareaProps.onChange) {\n                  textareaProps.onChange(evn);\n                }\n              }}\n              renderTextarea={components?.textarea || renderTextarea}\n              onScroll={(e) => handleScroll(e, 'text')}\n            />\n          )}\n          {/(live|preview)/.test(state.preview || '') && mdPreview}\n        </div>\n        {visibleDragbar && !state.fullscreen && (\n          <DragBar\n            prefixCls={prefixCls}\n            height={state.height as number}\n            maxHeight={maxHeight!}\n            minHeight={minHeight!}\n            onChange={dragBarChange}\n          />\n        )}\n        {!hideToolbar && toolbarBottom && (\n          <Toolbar prefixCls={prefixCls} overflow={overflow} toolbarBottom={toolbarBottom} />\n        )}\n      </div>\n    </EditorContext.Provider>\n  );\n};\n\ntype Editor = React.FC<PropsWithRef<MDEditorProps>> & { Markdown: typeof MarkdownPreview };\n\nconst mdEditor: Editor = React.forwardRef(InternalMDEditor) as unknown as Editor;\n\nmdEditor.Markdown = MarkdownPreview;\n\nexport default mdEditor;\n"
   ],
-  "mappings": "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"
+  "mappings": "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"
 }

package/esm/commands/index.d.ts

@@ -2,6 +2,7 @@ import React from 'react';
 import { ContextStore, ExecuteCommandState } from '../Context';
 import { bold } from './bold';
 import { code, codeBlock } from './code';
+import { comment } from './comment';
 import { divider } from './divider';
 import { fullscreen } from './fullscreen';
 import { group } from './group';
@@ -83,4 +84,4 @@ declare class TextAreaCommandOrchestrator implements CommandOrchestrator {
     getState(): false | TextState;
     executeCommand(command: ICommand<string>, dispatch?: React.Dispatch<ContextStore>, state?: ExecuteCommandState, shortcuts?: string[]): void;
 }
-export { title, title1, title2, title3, title4, title5, title6, bold, codeBlock, italic, strikethrough, hr, group, divider, link, quote, code, image, unorderedListCommand, orderedListCommand, checkedListCommand, codeEdit, codeLive, codePreview, fullscreen, getCommands, getExtraCommands, getStateFromTextArea, TextAreaCommandOrchestrator, TextAreaTextApi, };
+export { title, title1, title2, title3, title4, title5, title6, bold, codeBlock, comment, italic, strikethrough, hr, group, divider, link, quote, code, image, unorderedListCommand, orderedListCommand, checkedListCommand, codeEdit, codeLive, codePreview, fullscreen, getCommands, getExtraCommands, getStateFromTextArea, TextAreaCommandOrchestrator, TextAreaTextApi, };

package/esm/commands/index.js

@@ -82,7 +82,7 @@ class TextAreaCommandOrchestrator {
     command.execute && command.execute(getStateFromTextArea(this.textArea), this.textApi, dispatch, state, shortcuts);
   }
 }
-export { title, title1, title2, title3, title4, title5, title6, bold, codeBlock, italic, strikethrough, hr, group, divider, link, quote, code, image, unorderedListCommand, orderedListCommand, checkedListCommand, codeEdit, codeLive, codePreview, fullscreen,
+export { title, title1, title2, title3, title4, title5, title6, bold, codeBlock, comment, italic, strikethrough, hr, group, divider, link, quote, code, image, unorderedListCommand, orderedListCommand, checkedListCommand, codeEdit, codeLive, codePreview, fullscreen,
 // Tool method.
 getCommands, getExtraCommands, getStateFromTextArea, TextAreaCommandOrchestrator, TextAreaTextApi };
 //# sourceMappingURL=index.js.map

package/esm/commands/index.js.map

@@ -63,7 +63,7 @@
     "../../src/commands/index.ts"
   ],
   "sourcesContent": [
-    "import React from 'react';\nimport { ContextStore, ExecuteCommandState } from '../Context';\nimport { insertTextAtPosition } from '../utils/InsertTextAtPosition';\nimport { bold } from './bold';\nimport { code, codeBlock } from './code';\nimport { comment } from './comment';\nimport { divider } from './divider';\nimport { fullscreen } from './fullscreen';\nimport { group } from './group';\nimport { hr } from './hr';\nimport { image } from './image';\nimport { italic } from './italic';\nimport { link } from './link';\nimport { checkedListCommand, orderedListCommand, unorderedListCommand } from './list';\nimport { codeEdit, codeLive, codePreview } from './preview';\nimport { quote } from './quote';\nimport { strikethrough } from './strikeThrough';\nimport { title } from './title';\nimport { title1 } from './title1';\nimport { title2 } from './title2';\nimport { title3 } from './title3';\nimport { title4 } from './title4';\nimport { title5 } from './title5';\nimport { title6 } from './title6';\n\nexport interface CommandOrchestrator {\n  executeCommand(command: ICommand): void;\n}\n\nexport interface ICommandChildHandle<T = string> extends ICommandBase<T> {\n  children?: (handle: {\n    close: () => void;\n    execute: () => void;\n    getState?: TextAreaCommandOrchestrator['getState'];\n    textApi?: TextAreaTextApi;\n  }) => React.ReactElement;\n}\n\nexport interface ICommandChildCommands<T = string> extends ICommandBase<T> {\n  children?: Array<ICommand<T>>;\n}\n\nexport interface ICommandBase<T> {\n  parent?: ICommand<any>;\n  keyCommand?: string;\n  name?: string;\n  shortcuts?: string;\n  groupName?: string;\n  icon?: React.ReactElement;\n  value?: T;\n  position?: 'right';\n  liProps?: React.LiHTMLAttributes<HTMLLIElement>;\n  buttonProps?: React.ButtonHTMLAttributes<HTMLButtonElement> | null;\n  render?: (\n    command: ICommand<T>,\n    disabled: boolean,\n    executeCommand: (command: ICommand<T>, name?: string) => void,\n    index: number,\n  ) => void | undefined | null | React.ReactElement;\n  execute?: (\n    state: TextState,\n    api: TextAreaTextApi,\n    dispatch?: React.Dispatch<ContextStore>,\n    executeCommandState?: ExecuteCommandState,\n    shortcuts?: string[],\n  ) => void;\n}\n\nexport type ICommand<T = string> = ICommandChildCommands<T> | ICommandChildHandle<T>;\n\nexport interface TextRange {\n  start: number;\n  end: number;\n}\n\nexport interface TextState {\n  text: string;\n  selectedText: string;\n  selection: TextRange;\n}\n\nconst getCommands: () => ICommand[] = () => [\n  bold,\n  italic,\n  strikethrough,\n  hr,\n  group([title1, title2, title3, title4, title5, title6], {\n    name: 'title',\n    groupName: 'title',\n    buttonProps: { 'aria-label': 'Insert title', title: 'Insert title' },\n  }),\n  divider,\n  link,\n  quote,\n  code,\n  codeBlock,\n  comment,\n  image,\n  divider,\n  unorderedListCommand,\n  orderedListCommand,\n  checkedListCommand,\n];\n\nconst getExtraCommands: () => ICommand[] = () => [codeEdit, codeLive, codePreview, divider, fullscreen];\n\nfunction getStateFromTextArea(textArea: HTMLTextAreaElement): TextState {\n  return {\n    selection: {\n      start: textArea.selectionStart,\n      end: textArea.selectionEnd,\n    },\n    text: textArea.value,\n    selectedText: textArea.value?.slice(textArea.selectionStart, textArea.selectionEnd),\n  };\n}\n\nclass TextAreaTextApi {\n  textArea: HTMLTextAreaElement;\n\n  constructor(textArea: HTMLTextAreaElement) {\n    this.textArea = textArea;\n  }\n\n  /**\n   * Replaces the current selection with the new text. This will make the new selectedText to be empty, the\n   * selection start and selection end will be the same and will both point to the end\n   * @param text Text that should replace the current selection\n   */\n  replaceSelection(text: string): TextState {\n    insertTextAtPosition(this.textArea, text);\n    return getStateFromTextArea(this.textArea);\n  }\n\n  /**\n   * Selects the specified text range\n   * @param selection\n   */\n  setSelectionRange(selection: TextRange): TextState {\n    this.textArea.focus();\n    this.textArea.selectionStart = selection.start;\n    this.textArea.selectionEnd = selection.end;\n    return getStateFromTextArea(this.textArea);\n  }\n}\n\nclass TextAreaCommandOrchestrator implements CommandOrchestrator {\n  textArea: HTMLTextAreaElement;\n  textApi: TextAreaTextApi;\n\n  constructor(textArea: HTMLTextAreaElement) {\n    this.textArea = textArea;\n    this.textApi = new TextAreaTextApi(textArea);\n  }\n\n  getState() {\n    if (!this.textArea) return false;\n    return getStateFromTextArea(this.textArea);\n  }\n\n  executeCommand(\n    command: ICommand<string>,\n    dispatch?: React.Dispatch<ContextStore>,\n    state?: ExecuteCommandState,\n    shortcuts?: string[],\n  ): void {\n    command.execute && command.execute(getStateFromTextArea(this.textArea), this.textApi, dispatch, state, shortcuts);\n  }\n}\n\nexport {\n  title,\n  title1,\n  title2,\n  title3,\n  title4,\n  title5,\n  title6,\n  bold,\n  codeBlock,\n  italic,\n  strikethrough,\n  hr,\n  group,\n  divider,\n  link,\n  quote,\n  code,\n  image,\n  unorderedListCommand,\n  orderedListCommand,\n  checkedListCommand,\n  codeEdit,\n  codeLive,\n  codePreview,\n  fullscreen,\n  // Tool method.\n  getCommands,\n  getExtraCommands,\n  getStateFromTextArea,\n  TextAreaCommandOrchestrator,\n  TextAreaTextApi,\n};\n"
+    "import React from 'react';\nimport { ContextStore, ExecuteCommandState } from '../Context';\nimport { insertTextAtPosition } from '../utils/InsertTextAtPosition';\nimport { bold } from './bold';\nimport { code, codeBlock } from './code';\nimport { comment } from './comment';\nimport { divider } from './divider';\nimport { fullscreen } from './fullscreen';\nimport { group } from './group';\nimport { hr } from './hr';\nimport { image } from './image';\nimport { italic } from './italic';\nimport { link } from './link';\nimport { checkedListCommand, orderedListCommand, unorderedListCommand } from './list';\nimport { codeEdit, codeLive, codePreview } from './preview';\nimport { quote } from './quote';\nimport { strikethrough } from './strikeThrough';\nimport { title } from './title';\nimport { title1 } from './title1';\nimport { title2 } from './title2';\nimport { title3 } from './title3';\nimport { title4 } from './title4';\nimport { title5 } from './title5';\nimport { title6 } from './title6';\n\nexport interface CommandOrchestrator {\n  executeCommand(command: ICommand): void;\n}\n\nexport interface ICommandChildHandle<T = string> extends ICommandBase<T> {\n  children?: (handle: {\n    close: () => void;\n    execute: () => void;\n    getState?: TextAreaCommandOrchestrator['getState'];\n    textApi?: TextAreaTextApi;\n  }) => React.ReactElement;\n}\n\nexport interface ICommandChildCommands<T = string> extends ICommandBase<T> {\n  children?: Array<ICommand<T>>;\n}\n\nexport interface ICommandBase<T> {\n  parent?: ICommand<any>;\n  keyCommand?: string;\n  name?: string;\n  shortcuts?: string;\n  groupName?: string;\n  icon?: React.ReactElement;\n  value?: T;\n  position?: 'right';\n  liProps?: React.LiHTMLAttributes<HTMLLIElement>;\n  buttonProps?: React.ButtonHTMLAttributes<HTMLButtonElement> | null;\n  render?: (\n    command: ICommand<T>,\n    disabled: boolean,\n    executeCommand: (command: ICommand<T>, name?: string) => void,\n    index: number,\n  ) => void | undefined | null | React.ReactElement;\n  execute?: (\n    state: TextState,\n    api: TextAreaTextApi,\n    dispatch?: React.Dispatch<ContextStore>,\n    executeCommandState?: ExecuteCommandState,\n    shortcuts?: string[],\n  ) => void;\n}\n\nexport type ICommand<T = string> = ICommandChildCommands<T> | ICommandChildHandle<T>;\n\nexport interface TextRange {\n  start: number;\n  end: number;\n}\n\nexport interface TextState {\n  text: string;\n  selectedText: string;\n  selection: TextRange;\n}\n\nconst getCommands: () => ICommand[] = () => [\n  bold,\n  italic,\n  strikethrough,\n  hr,\n  group([title1, title2, title3, title4, title5, title6], {\n    name: 'title',\n    groupName: 'title',\n    buttonProps: { 'aria-label': 'Insert title', title: 'Insert title' },\n  }),\n  divider,\n  link,\n  quote,\n  code,\n  codeBlock,\n  comment,\n  image,\n  divider,\n  unorderedListCommand,\n  orderedListCommand,\n  checkedListCommand,\n];\n\nconst getExtraCommands: () => ICommand[] = () => [codeEdit, codeLive, codePreview, divider, fullscreen];\n\nfunction getStateFromTextArea(textArea: HTMLTextAreaElement): TextState {\n  return {\n    selection: {\n      start: textArea.selectionStart,\n      end: textArea.selectionEnd,\n    },\n    text: textArea.value,\n    selectedText: textArea.value?.slice(textArea.selectionStart, textArea.selectionEnd),\n  };\n}\n\nclass TextAreaTextApi {\n  textArea: HTMLTextAreaElement;\n\n  constructor(textArea: HTMLTextAreaElement) {\n    this.textArea = textArea;\n  }\n\n  /**\n   * Replaces the current selection with the new text. This will make the new selectedText to be empty, the\n   * selection start and selection end will be the same and will both point to the end\n   * @param text Text that should replace the current selection\n   */\n  replaceSelection(text: string): TextState {\n    insertTextAtPosition(this.textArea, text);\n    return getStateFromTextArea(this.textArea);\n  }\n\n  /**\n   * Selects the specified text range\n   * @param selection\n   */\n  setSelectionRange(selection: TextRange): TextState {\n    this.textArea.focus();\n    this.textArea.selectionStart = selection.start;\n    this.textArea.selectionEnd = selection.end;\n    return getStateFromTextArea(this.textArea);\n  }\n}\n\nclass TextAreaCommandOrchestrator implements CommandOrchestrator {\n  textArea: HTMLTextAreaElement;\n  textApi: TextAreaTextApi;\n\n  constructor(textArea: HTMLTextAreaElement) {\n    this.textArea = textArea;\n    this.textApi = new TextAreaTextApi(textArea);\n  }\n\n  getState() {\n    if (!this.textArea) return false;\n    return getStateFromTextArea(this.textArea);\n  }\n\n  executeCommand(\n    command: ICommand<string>,\n    dispatch?: React.Dispatch<ContextStore>,\n    state?: ExecuteCommandState,\n    shortcuts?: string[],\n  ): void {\n    command.execute && command.execute(getStateFromTextArea(this.textArea), this.textApi, dispatch, state, shortcuts);\n  }\n}\n\nexport {\n  title,\n  title1,\n  title2,\n  title3,\n  title4,\n  title5,\n  title6,\n  bold,\n  codeBlock,\n  comment,\n  italic,\n  strikethrough,\n  hr,\n  group,\n  divider,\n  link,\n  quote,\n  code,\n  image,\n  unorderedListCommand,\n  orderedListCommand,\n  checkedListCommand,\n  codeEdit,\n  codeLive,\n  codePreview,\n  fullscreen,\n  // Tool method.\n  getCommands,\n  getExtraCommands,\n  getStateFromTextArea,\n  TextAreaCommandOrchestrator,\n  TextAreaTextApi,\n};\n"
   ],
-  "mappings": "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"
+  "mappings": "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"
 }

package/esm/index.css

@@ -10,6 +10,19 @@
   display: flex;
   flex-direction: column;
 }
+.w-md-editor.w-md-editor-rtl {
+  direction: rtl !important;
+  text-align: right !important;
+}
+.w-md-editor.w-md-editor-rtl .w-md-editor-preview {
+  right: unset !important;
+  left: 0;
+  text-align: right !important;
+  box-shadow: inset -1px 0 0 0 var(--color-border-default);
+}
+.w-md-editor.w-md-editor-rtl .w-md-editor-text {
+  text-align: right !important;
+}
 .w-md-editor-toolbar {
   height: -webkit-fit-content;
   height: fit-content;

package/esm/index.less

@@ -12,6 +12,19 @@
   font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
   display: flex;
   flex-direction: column;
+  &&-rtl {
+    direction: rtl !important;
+    text-align: right !important;
+  }
+  &&-rtl &-preview {
+    right: unset !important;
+    left: 0;
+    text-align: right !important;
+    box-shadow: inset -1px 0 0 0 var(--color-border-default);
+  }
+  &&-rtl &-text {
+    text-align: right !important;
+  }
   &-toolbar {
     height: fit-content;
   }

package/lib/Editor.d.ts

@@ -132,6 +132,12 @@ export interface MDEditorProps extends Omit<React.HTMLAttributes<HTMLDivElement>
     enableScroll?: boolean;
     /** Toolbar on bottom */
     toolbarBottom?: boolean;
+    /**
+     * The **`direction`** property sets the direction of text, table columns, and horizontal overflow. Use `rtl` for languages written from right to left (like Hebrew or Arabic), and `ltr` for those written from left to right (like English and most other languages).
+     *
+     * https://github.com/uiwjs/react-md-editor/issues/462
+     */
+    direction?: CSSProperties['direction'];
 }
 declare type Editor = React.FC<PropsWithRef<MDEditorProps>> & {
     Markdown: typeof MarkdownPreview;

package/lib/Editor.js

@@ -17,7 +17,7 @@ var _DragBar = _interopRequireDefault(require("./components/DragBar"));
 var _commands = require("./commands");
 var _Context = require("./Context");
 var _jsxRuntime = require("react/jsx-runtime");
-var _excluded = ["prefixCls", "className", "value", "commands", "commandsFilter", "extraCommands", "height", "enableScroll", "visibleDragbar", "highlightEnable", "preview", "fullscreen", "overflow", "previewOptions", "textareaProps", "maxHeight", "minHeight", "autoFocus", "tabSize", "defaultTabEnable", "onChange", "onHeightChange", "hideToolbar", "toolbarBottom", "components", "renderTextarea"];
+var _excluded = ["prefixCls", "className", "value", "commands", "commandsFilter", "direction", "extraCommands", "height", "enableScroll", "visibleDragbar", "highlightEnable", "preview", "fullscreen", "overflow", "previewOptions", "textareaProps", "maxHeight", "minHeight", "autoFocus", "tabSize", "defaultTabEnable", "onChange", "onHeightChange", "hideToolbar", "toolbarBottom", "components", "renderTextarea"];
 function setGroupPopFalse() {
   var data = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   Object.keys(data).forEach(function (keyname) {
@@ -34,6 +34,7 @@ var InternalMDEditor = function InternalMDEditor(props, ref) {
     _ref$commands = _ref.commands,
     commands = _ref$commands === void 0 ? (0, _commands.getCommands)() : _ref$commands,
     commandsFilter = _ref.commandsFilter,
+    direction = _ref.direction,
     _ref$extraCommands = _ref.extraCommands,
     extraCommands = _ref$extraCommands === void 0 ? (0, _commands.getExtraCommands)() : _ref$extraCommands,
     _ref$height = _ref.height,
@@ -115,7 +116,7 @@ var InternalMDEditor = function InternalMDEditor(props, ref) {
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
-  var cls = [className, 'wmde-markdown-var', prefixCls, state.preview ? "".concat(prefixCls, "-show-").concat(state.preview) : null, state.fullscreen ? "".concat(prefixCls, "-fullscreen") : null].filter(Boolean).join(' ').trim();
+  var cls = [className, 'wmde-markdown-var', direction ? "".concat(prefixCls, "-").concat(direction) : null, prefixCls, state.preview ? "".concat(prefixCls, "-show-").concat(state.preview) : null, state.fullscreen ? "".concat(prefixCls, "-fullscreen") : null].filter(Boolean).join(' ').trim();
   (0, _react.useMemo)(function () {
     return propsValue !== state.markdown && dispatch({
       markdown: propsValue || ''

package/lib/Editor.js.map

@@ -17,6 +17,7 @@
     "commands",
     "getCommands",
     "commandsFilter",
+    "direction",
     "extraCommands",
     "getExtraCommands",
     "height",
@@ -105,7 +106,7 @@
     "../src/Editor.tsx"
   ],
   "sourcesContent": [
-    "import React, { useEffect, useReducer, useMemo, useRef, useImperativeHandle, CSSProperties, PropsWithRef } from 'react';\nimport MarkdownPreview, { MarkdownPreviewProps } from '@uiw/react-markdown-preview';\nimport TextArea, { ITextAreaProps } from './components/TextArea';\nimport Toolbar from './components/Toolbar';\nimport DragBar from './components/DragBar';\nimport { getCommands, getExtraCommands, ICommand } from './commands';\nimport { reducer, EditorContext, ContextStore, PreviewType } from './Context';\nimport './index.less';\n\nexport interface IProps {\n  prefixCls?: string;\n  className?: string;\n}\n\nexport interface MDEditorProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'>, IProps {\n  /**\n   * The Markdown value.\n   */\n  value?: string;\n  /**\n   * Event handler for the `onChange` event.\n   */\n  onChange?: (value?: string, event?: React.ChangeEvent<HTMLTextAreaElement>, state?: ContextStore) => void;\n  /**\n   * editor height change listener\n   */\n  onHeightChange?: (value?: CSSProperties['height'], oldValue?: CSSProperties['height'], state?: ContextStore) => void;\n  /**\n   * Can be used to make `Markdown Editor` focus itself on initialization. Defaults to on.\n   * it will be set to true when either the source `textarea` is focused,\n   * or it has an `autofocus` attribute and no other element is focused.\n   */\n  autoFocus?: ITextAreaProps['autoFocus'];\n  /**\n   * The height of the editor.\n   * ⚠️ `Dragbar` is invalid when **`height`** parameter percentage.\n   */\n  height?: CSSProperties['height'];\n  /**\n   * Custom toolbar heigth\n   * @default 29px\n   *\n   * @deprecated toolbar height adaptive: https://github.com/uiwjs/react-md-editor/issues/427\n   *\n   */\n  toolbarHeight?: number;\n  /**\n   * Show drag and drop tool. Set the height of the editor.\n   */\n  visibleDragbar?: boolean;\n  /**\n   * @deprecated use `visibleDragbar`\n   */\n  visiableDragbar?: boolean;\n  /**\n   * Show markdown preview.\n   */\n  preview?: PreviewType;\n  /**\n   * Full screen display editor.\n   */\n  fullscreen?: boolean;\n  /**\n   * Disable `fullscreen` setting body styles\n   */\n  overflow?: boolean;\n  /**\n   * Maximum drag height. `visibleDragbar=true`\n   */\n  maxHeight?: number;\n  /**\n   * Minimum drag height. `visibleDragbar=true`\n   */\n  minHeight?: number;\n  /**\n   * This is reset [react-markdown](https://github.com/rexxars/react-markdown) settings.\n   */\n  previewOptions?: Omit<MarkdownPreviewProps, 'source'>;\n  /**\n   * Set the `textarea` related props.\n   */\n  textareaProps?: ITextAreaProps;\n  /**\n   * Use div to replace TextArea or re-render TextArea\n   * @deprecated Please use ~~`renderTextarea`~~ -> `components`\n   */\n  renderTextarea?: ITextAreaProps['renderTextarea'];\n  /**\n   * re-render element\n   */\n  components?: {\n    /** Use div to replace TextArea or re-render TextArea */\n    textarea?: ITextAreaProps['renderTextarea'];\n    /**\n     * Override the default command element\n     * _`toolbar`_ < _`command[].render`_\n     */\n    toolbar?: ICommand['render'];\n    /** Custom markdown preview */\n    preview?: (source: string, state: ContextStore, dispath: React.Dispatch<ContextStore>) => JSX.Element;\n  };\n  /** Theme configuration */\n  'data-color-mode'?: 'light' | 'dark';\n  /**\n   * Disable editing area code highlighting. The value is `false`, which increases the editing speed.\n   * @default true\n   */\n  highlightEnable?: boolean;\n  /**\n   * The number of characters to insert when pressing tab key.\n   * Default `2` spaces.\n   */\n  tabSize?: number;\n  /**\n   * If `false`, the `tab` key inserts a tab character into the textarea. If `true`, the `tab` key executes default behavior e.g. focus shifts to next element.\n   */\n  defaultTabEnable?: boolean;\n  /**\n   * You can create your own commands or reuse existing commands.\n   */\n  commands?: ICommand[];\n  /**\n   * Filter or modify your commands.\n   * https://github.com/uiwjs/react-md-editor/issues/296\n   */\n  commandsFilter?: (command: ICommand, isExtra: boolean) => false | ICommand;\n  /**\n   * You can create your own commands or reuse existing commands.\n   */\n  extraCommands?: ICommand[];\n  /**\n   * Hide the tool bar\n   */\n  hideToolbar?: boolean;\n  /** Whether to enable scrolling */\n  enableScroll?: boolean;\n  /** Toolbar on bottom */\n  toolbarBottom?: boolean;\n}\n\nfunction setGroupPopFalse(data: Record<string, boolean> = {}) {\n  Object.keys(data).forEach((keyname) => {\n    data[keyname] = false;\n  });\n  return data;\n}\n\nconst InternalMDEditor = (\n  props: MDEditorProps,\n  ref?: ((instance: ContextStore) => void) | React.RefObject<ContextStore> | null,\n) => {\n  const {\n    prefixCls = 'w-md-editor',\n    className,\n    value: propsValue,\n    commands = getCommands(),\n    commandsFilter,\n    extraCommands = getExtraCommands(),\n    height = 200,\n    enableScroll = true,\n    visibleDragbar = typeof props.visiableDragbar === 'boolean' ? props.visiableDragbar : true,\n    highlightEnable = true,\n    preview: previewType = 'live',\n    fullscreen = false,\n    overflow = true,\n    previewOptions = {},\n    textareaProps,\n    maxHeight = 1200,\n    minHeight = 100,\n    autoFocus,\n    tabSize = 2,\n    defaultTabEnable = false,\n    onChange,\n    onHeightChange,\n    hideToolbar,\n    toolbarBottom = false,\n    components,\n    renderTextarea,\n    ...other\n  } = props || {};\n  const cmds = commands\n    .map((item) => (commandsFilter ? commandsFilter(item, false) : item))\n    .filter(Boolean) as ICommand[];\n  const extraCmds = extraCommands\n    .map((item) => (commandsFilter ? commandsFilter(item, true) : item))\n    .filter(Boolean) as ICommand[];\n  let [state, dispatch] = useReducer(reducer, {\n    markdown: propsValue,\n    preview: previewType,\n    components,\n    height,\n    highlightEnable,\n    tabSize,\n    defaultTabEnable,\n    scrollTop: 0,\n    scrollTopPreview: 0,\n    commands: cmds,\n    extraCommands: extraCmds,\n    fullscreen,\n    barPopup: {},\n  });\n  const container = useRef<HTMLDivElement>(null);\n  const previewRef = useRef<HTMLDivElement>(null);\n  const enableScrollRef = useRef(enableScroll);\n\n  useImperativeHandle(ref, () => ({ ...state }));\n  useMemo(() => (enableScrollRef.current = enableScroll), [enableScroll]);\n  useEffect(() => {\n    const stateInit: ContextStore = {};\n    if (container.current) {\n      stateInit.container = container.current || undefined;\n    }\n    stateInit.markdown = propsValue || '';\n    stateInit.barPopup = {};\n    if (dispatch) {\n      dispatch({ ...state, ...stateInit });\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  const cls = [\n    className,\n    'wmde-markdown-var',\n    prefixCls,\n    state.preview ? `${prefixCls}-show-${state.preview}` : null,\n    state.fullscreen ? `${prefixCls}-fullscreen` : null,\n  ]\n    .filter(Boolean)\n    .join(' ')\n    .trim();\n\n  useMemo(\n    () => propsValue !== state.markdown && dispatch({ markdown: propsValue || '' }),\n    [propsValue, state.markdown],\n  );\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  useMemo(() => previewType !== state.preview && dispatch({ preview: previewType }), [previewType]);\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  useMemo(() => tabSize !== state.tabSize && dispatch({ tabSize }), [tabSize]);\n  useMemo(\n    () => highlightEnable !== state.highlightEnable && dispatch({ highlightEnable }),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [highlightEnable],\n  );\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  useMemo(() => autoFocus !== state.autoFocus && dispatch({ autoFocus: autoFocus }), [autoFocus]);\n  useMemo(\n    () => fullscreen !== state.fullscreen && dispatch({ fullscreen: fullscreen }),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [fullscreen],\n  );\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  useMemo(() => height !== state.height && dispatch({ height: height }), [height]);\n  useMemo(\n    () => height !== state.height && onHeightChange && onHeightChange(state.height, height, state),\n    [height, onHeightChange, state],\n  );\n\n  const textareaDomRef = useRef<HTMLDivElement>();\n  const active = useRef<'text' | 'preview'>('preview');\n  const initScroll = useRef(false);\n\n  useMemo(() => {\n    textareaDomRef.current = state.textareaWarp;\n    if (state.textareaWarp) {\n      state.textareaWarp.addEventListener('mouseover', () => {\n        active.current = 'text';\n      });\n      state.textareaWarp.addEventListener('mouseleave', () => {\n        active.current = 'preview';\n      });\n    }\n  }, [state.textareaWarp]);\n\n  const handleScroll = (e: React.UIEvent<HTMLDivElement>, type: 'text' | 'preview') => {\n    if (!enableScrollRef.current) return;\n    const textareaDom = textareaDomRef.current;\n    const previewDom = previewRef.current ? previewRef.current : undefined;\n    if (!initScroll.current) {\n      active.current = type;\n      initScroll.current = true;\n    }\n    if (textareaDom && previewDom) {\n      const scale =\n        (textareaDom.scrollHeight - textareaDom.offsetHeight) / (previewDom.scrollHeight - previewDom.offsetHeight);\n      if (e.target === textareaDom && active.current === 'text') {\n        previewDom.scrollTop = textareaDom.scrollTop / scale;\n      }\n      if (e.target === previewDom && active.current === 'preview') {\n        textareaDom.scrollTop = previewDom.scrollTop * scale;\n      }\n      let scrollTop = 0;\n      if (active.current === 'text') {\n        scrollTop = textareaDom.scrollTop || 0;\n      } else if (active.current === 'preview') {\n        scrollTop = previewDom.scrollTop || 0;\n      }\n      dispatch({ scrollTop });\n    }\n  };\n\n  const previewClassName = `${prefixCls}-preview ${previewOptions.className || ''}`;\n  const handlePreviewScroll = (e: React.UIEvent<HTMLDivElement, UIEvent>) => handleScroll(e, 'preview');\n  let mdPreview = useMemo(\n    () => (\n      <div ref={previewRef} className={previewClassName}>\n        <MarkdownPreview {...previewOptions} onScroll={handlePreviewScroll} source={state.markdown || ''} />\n      </div>\n    ),\n    [previewClassName, previewOptions, state.markdown],\n  );\n  const preview = components?.preview && components?.preview(state.markdown || '', state, dispatch);\n  if (preview && React.isValidElement(preview)) {\n    mdPreview = (\n      <div className={previewClassName} ref={previewRef} onScroll={handlePreviewScroll}>\n        {preview}\n      </div>\n    );\n  }\n\n  const containerStyle = { ...other.style, height: state.height || '100%' };\n  const containerClick = () => dispatch({ barPopup: { ...setGroupPopFalse(state.barPopup) } });\n  const dragBarChange = (newHeight: number) => dispatch({ height: newHeight });\n\n  return (\n    <EditorContext.Provider value={{ ...state, dispatch }}>\n      <div ref={container} className={cls} {...other} onClick={containerClick} style={containerStyle}>\n        {!hideToolbar && !toolbarBottom && (\n          <Toolbar prefixCls={prefixCls} overflow={overflow} toolbarBottom={toolbarBottom} />\n        )}\n        <div className={`${prefixCls}-content`}>\n          {/(edit|live)/.test(state.preview || '') && (\n            <TextArea\n              className={`${prefixCls}-input`}\n              prefixCls={prefixCls}\n              autoFocus={autoFocus}\n              {...textareaProps}\n              onChange={(evn) => {\n                onChange && onChange(evn.target.value, evn, state);\n                if (textareaProps && textareaProps.onChange) {\n                  textareaProps.onChange(evn);\n                }\n              }}\n              renderTextarea={components?.textarea || renderTextarea}\n              onScroll={(e) => handleScroll(e, 'text')}\n            />\n          )}\n          {/(live|preview)/.test(state.preview || '') && mdPreview}\n        </div>\n        {visibleDragbar && !state.fullscreen && (\n          <DragBar\n            prefixCls={prefixCls}\n            height={state.height as number}\n            maxHeight={maxHeight!}\n            minHeight={minHeight!}\n            onChange={dragBarChange}\n          />\n        )}\n        {!hideToolbar && toolbarBottom && (\n          <Toolbar prefixCls={prefixCls} overflow={overflow} toolbarBottom={toolbarBottom} />\n        )}\n      </div>\n    </EditorContext.Provider>\n  );\n};\n\ntype Editor = React.FC<PropsWithRef<MDEditorProps>> & { Markdown: typeof MarkdownPreview };\n\nconst mdEditor: Editor = React.forwardRef(InternalMDEditor) as unknown as Editor;\n\nmdEditor.Markdown = MarkdownPreview;\n\nexport default mdEditor;\n"
+    "import React, { useEffect, useReducer, useMemo, useRef, useImperativeHandle, CSSProperties, PropsWithRef } from 'react';\nimport MarkdownPreview, { MarkdownPreviewProps } from '@uiw/react-markdown-preview';\nimport TextArea, { ITextAreaProps } from './components/TextArea';\nimport Toolbar from './components/Toolbar';\nimport DragBar from './components/DragBar';\nimport { getCommands, getExtraCommands, ICommand } from './commands';\nimport { reducer, EditorContext, ContextStore, PreviewType } from './Context';\nimport './index.less';\n\nexport interface IProps {\n  prefixCls?: string;\n  className?: string;\n}\n\nexport interface MDEditorProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'>, IProps {\n  /**\n   * The Markdown value.\n   */\n  value?: string;\n  /**\n   * Event handler for the `onChange` event.\n   */\n  onChange?: (value?: string, event?: React.ChangeEvent<HTMLTextAreaElement>, state?: ContextStore) => void;\n  /**\n   * editor height change listener\n   */\n  onHeightChange?: (value?: CSSProperties['height'], oldValue?: CSSProperties['height'], state?: ContextStore) => void;\n  /**\n   * Can be used to make `Markdown Editor` focus itself on initialization. Defaults to on.\n   * it will be set to true when either the source `textarea` is focused,\n   * or it has an `autofocus` attribute and no other element is focused.\n   */\n  autoFocus?: ITextAreaProps['autoFocus'];\n  /**\n   * The height of the editor.\n   * ⚠️ `Dragbar` is invalid when **`height`** parameter percentage.\n   */\n  height?: CSSProperties['height'];\n  /**\n   * Custom toolbar heigth\n   * @default 29px\n   *\n   * @deprecated toolbar height adaptive: https://github.com/uiwjs/react-md-editor/issues/427\n   *\n   */\n  toolbarHeight?: number;\n  /**\n   * Show drag and drop tool. Set the height of the editor.\n   */\n  visibleDragbar?: boolean;\n  /**\n   * @deprecated use `visibleDragbar`\n   */\n  visiableDragbar?: boolean;\n  /**\n   * Show markdown preview.\n   */\n  preview?: PreviewType;\n  /**\n   * Full screen display editor.\n   */\n  fullscreen?: boolean;\n  /**\n   * Disable `fullscreen` setting body styles\n   */\n  overflow?: boolean;\n  /**\n   * Maximum drag height. `visibleDragbar=true`\n   */\n  maxHeight?: number;\n  /**\n   * Minimum drag height. `visibleDragbar=true`\n   */\n  minHeight?: number;\n  /**\n   * This is reset [react-markdown](https://github.com/rexxars/react-markdown) settings.\n   */\n  previewOptions?: Omit<MarkdownPreviewProps, 'source'>;\n  /**\n   * Set the `textarea` related props.\n   */\n  textareaProps?: ITextAreaProps;\n  /**\n   * Use div to replace TextArea or re-render TextArea\n   * @deprecated Please use ~~`renderTextarea`~~ -> `components`\n   */\n  renderTextarea?: ITextAreaProps['renderTextarea'];\n  /**\n   * re-render element\n   */\n  components?: {\n    /** Use div to replace TextArea or re-render TextArea */\n    textarea?: ITextAreaProps['renderTextarea'];\n    /**\n     * Override the default command element\n     * _`toolbar`_ < _`command[].render`_\n     */\n    toolbar?: ICommand['render'];\n    /** Custom markdown preview */\n    preview?: (source: string, state: ContextStore, dispath: React.Dispatch<ContextStore>) => JSX.Element;\n  };\n  /** Theme configuration */\n  'data-color-mode'?: 'light' | 'dark';\n  /**\n   * Disable editing area code highlighting. The value is `false`, which increases the editing speed.\n   * @default true\n   */\n  highlightEnable?: boolean;\n  /**\n   * The number of characters to insert when pressing tab key.\n   * Default `2` spaces.\n   */\n  tabSize?: number;\n  /**\n   * If `false`, the `tab` key inserts a tab character into the textarea. If `true`, the `tab` key executes default behavior e.g. focus shifts to next element.\n   */\n  defaultTabEnable?: boolean;\n  /**\n   * You can create your own commands or reuse existing commands.\n   */\n  commands?: ICommand[];\n  /**\n   * Filter or modify your commands.\n   * https://github.com/uiwjs/react-md-editor/issues/296\n   */\n  commandsFilter?: (command: ICommand, isExtra: boolean) => false | ICommand;\n  /**\n   * You can create your own commands or reuse existing commands.\n   */\n  extraCommands?: ICommand[];\n  /**\n   * Hide the tool bar\n   */\n  hideToolbar?: boolean;\n  /** Whether to enable scrolling */\n  enableScroll?: boolean;\n  /** Toolbar on bottom */\n  toolbarBottom?: boolean;\n  /**\n   * The **`direction`** property sets the direction of text, table columns, and horizontal overflow. Use `rtl` for languages written from right to left (like Hebrew or Arabic), and `ltr` for those written from left to right (like English and most other languages).\n   *\n   * https://github.com/uiwjs/react-md-editor/issues/462\n   */\n  direction?: CSSProperties['direction'];\n}\n\nfunction setGroupPopFalse(data: Record<string, boolean> = {}) {\n  Object.keys(data).forEach((keyname) => {\n    data[keyname] = false;\n  });\n  return data;\n}\n\nconst InternalMDEditor = (\n  props: MDEditorProps,\n  ref?: ((instance: ContextStore) => void) | React.RefObject<ContextStore> | null,\n) => {\n  const {\n    prefixCls = 'w-md-editor',\n    className,\n    value: propsValue,\n    commands = getCommands(),\n    commandsFilter,\n    direction,\n    extraCommands = getExtraCommands(),\n    height = 200,\n    enableScroll = true,\n    visibleDragbar = typeof props.visiableDragbar === 'boolean' ? props.visiableDragbar : true,\n    highlightEnable = true,\n    preview: previewType = 'live',\n    fullscreen = false,\n    overflow = true,\n    previewOptions = {},\n    textareaProps,\n    maxHeight = 1200,\n    minHeight = 100,\n    autoFocus,\n    tabSize = 2,\n    defaultTabEnable = false,\n    onChange,\n    onHeightChange,\n    hideToolbar,\n    toolbarBottom = false,\n    components,\n    renderTextarea,\n    ...other\n  } = props || {};\n  const cmds = commands\n    .map((item) => (commandsFilter ? commandsFilter(item, false) : item))\n    .filter(Boolean) as ICommand[];\n  const extraCmds = extraCommands\n    .map((item) => (commandsFilter ? commandsFilter(item, true) : item))\n    .filter(Boolean) as ICommand[];\n  let [state, dispatch] = useReducer(reducer, {\n    markdown: propsValue,\n    preview: previewType,\n    components,\n    height,\n    highlightEnable,\n    tabSize,\n    defaultTabEnable,\n    scrollTop: 0,\n    scrollTopPreview: 0,\n    commands: cmds,\n    extraCommands: extraCmds,\n    fullscreen,\n    barPopup: {},\n  });\n  const container = useRef<HTMLDivElement>(null);\n  const previewRef = useRef<HTMLDivElement>(null);\n  const enableScrollRef = useRef(enableScroll);\n\n  useImperativeHandle(ref, () => ({ ...state }));\n  useMemo(() => (enableScrollRef.current = enableScroll), [enableScroll]);\n  useEffect(() => {\n    const stateInit: ContextStore = {};\n    if (container.current) {\n      stateInit.container = container.current || undefined;\n    }\n    stateInit.markdown = propsValue || '';\n    stateInit.barPopup = {};\n    if (dispatch) {\n      dispatch({ ...state, ...stateInit });\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  const cls = [\n    className,\n    'wmde-markdown-var',\n    direction ? `${prefixCls}-${direction}` : null,\n    prefixCls,\n    state.preview ? `${prefixCls}-show-${state.preview}` : null,\n    state.fullscreen ? `${prefixCls}-fullscreen` : null,\n  ]\n    .filter(Boolean)\n    .join(' ')\n    .trim();\n\n  useMemo(\n    () => propsValue !== state.markdown && dispatch({ markdown: propsValue || '' }),\n    [propsValue, state.markdown],\n  );\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  useMemo(() => previewType !== state.preview && dispatch({ preview: previewType }), [previewType]);\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  useMemo(() => tabSize !== state.tabSize && dispatch({ tabSize }), [tabSize]);\n  useMemo(\n    () => highlightEnable !== state.highlightEnable && dispatch({ highlightEnable }),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [highlightEnable],\n  );\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  useMemo(() => autoFocus !== state.autoFocus && dispatch({ autoFocus: autoFocus }), [autoFocus]);\n  useMemo(\n    () => fullscreen !== state.fullscreen && dispatch({ fullscreen: fullscreen }),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [fullscreen],\n  );\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  useMemo(() => height !== state.height && dispatch({ height: height }), [height]);\n  useMemo(\n    () => height !== state.height && onHeightChange && onHeightChange(state.height, height, state),\n    [height, onHeightChange, state],\n  );\n\n  const textareaDomRef = useRef<HTMLDivElement>();\n  const active = useRef<'text' | 'preview'>('preview');\n  const initScroll = useRef(false);\n\n  useMemo(() => {\n    textareaDomRef.current = state.textareaWarp;\n    if (state.textareaWarp) {\n      state.textareaWarp.addEventListener('mouseover', () => {\n        active.current = 'text';\n      });\n      state.textareaWarp.addEventListener('mouseleave', () => {\n        active.current = 'preview';\n      });\n    }\n  }, [state.textareaWarp]);\n\n  const handleScroll = (e: React.UIEvent<HTMLDivElement>, type: 'text' | 'preview') => {\n    if (!enableScrollRef.current) return;\n    const textareaDom = textareaDomRef.current;\n    const previewDom = previewRef.current ? previewRef.current : undefined;\n    if (!initScroll.current) {\n      active.current = type;\n      initScroll.current = true;\n    }\n    if (textareaDom && previewDom) {\n      const scale =\n        (textareaDom.scrollHeight - textareaDom.offsetHeight) / (previewDom.scrollHeight - previewDom.offsetHeight);\n      if (e.target === textareaDom && active.current === 'text') {\n        previewDom.scrollTop = textareaDom.scrollTop / scale;\n      }\n      if (e.target === previewDom && active.current === 'preview') {\n        textareaDom.scrollTop = previewDom.scrollTop * scale;\n      }\n      let scrollTop = 0;\n      if (active.current === 'text') {\n        scrollTop = textareaDom.scrollTop || 0;\n      } else if (active.current === 'preview') {\n        scrollTop = previewDom.scrollTop || 0;\n      }\n      dispatch({ scrollTop });\n    }\n  };\n\n  const previewClassName = `${prefixCls}-preview ${previewOptions.className || ''}`;\n  const handlePreviewScroll = (e: React.UIEvent<HTMLDivElement, UIEvent>) => handleScroll(e, 'preview');\n  let mdPreview = useMemo(\n    () => (\n      <div ref={previewRef} className={previewClassName}>\n        <MarkdownPreview {...previewOptions} onScroll={handlePreviewScroll} source={state.markdown || ''} />\n      </div>\n    ),\n    [previewClassName, previewOptions, state.markdown],\n  );\n  const preview = components?.preview && components?.preview(state.markdown || '', state, dispatch);\n  if (preview && React.isValidElement(preview)) {\n    mdPreview = (\n      <div className={previewClassName} ref={previewRef} onScroll={handlePreviewScroll}>\n        {preview}\n      </div>\n    );\n  }\n\n  const containerStyle = { ...other.style, height: state.height || '100%' };\n  const containerClick = () => dispatch({ barPopup: { ...setGroupPopFalse(state.barPopup) } });\n  const dragBarChange = (newHeight: number) => dispatch({ height: newHeight });\n\n  return (\n    <EditorContext.Provider value={{ ...state, dispatch }}>\n      <div ref={container} className={cls} {...other} onClick={containerClick} style={containerStyle}>\n        {!hideToolbar && !toolbarBottom && (\n          <Toolbar prefixCls={prefixCls} overflow={overflow} toolbarBottom={toolbarBottom} />\n        )}\n        <div className={`${prefixCls}-content`}>\n          {/(edit|live)/.test(state.preview || '') && (\n            <TextArea\n              className={`${prefixCls}-input`}\n              prefixCls={prefixCls}\n              autoFocus={autoFocus}\n              {...textareaProps}\n              onChange={(evn) => {\n                onChange && onChange(evn.target.value, evn, state);\n                if (textareaProps && textareaProps.onChange) {\n                  textareaProps.onChange(evn);\n                }\n              }}\n              renderTextarea={components?.textarea || renderTextarea}\n              onScroll={(e) => handleScroll(e, 'text')}\n            />\n          )}\n          {/(live|preview)/.test(state.preview || '') && mdPreview}\n        </div>\n        {visibleDragbar && !state.fullscreen && (\n          <DragBar\n            prefixCls={prefixCls}\n            height={state.height as number}\n            maxHeight={maxHeight!}\n            minHeight={minHeight!}\n            onChange={dragBarChange}\n          />\n        )}\n        {!hideToolbar && toolbarBottom && (\n          <Toolbar prefixCls={prefixCls} overflow={overflow} toolbarBottom={toolbarBottom} />\n        )}\n      </div>\n    </EditorContext.Provider>\n  );\n};\n\ntype Editor = React.FC<PropsWithRef<MDEditorProps>> & { Markdown: typeof MarkdownPreview };\n\nconst mdEditor: Editor = React.forwardRef(InternalMDEditor) as unknown as Editor;\n\nmdEditor.Markdown = MarkdownPreview;\n\nexport default mdEditor;\n"
   ],
-  "mappings": ";;;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AAA8E;AAAA;AAsI9E,SAASA,gBAAgB,GAAqC;EAAA,IAApCC,IAA6B,uEAAG,CAAC,CAAC;EAC1DC,MAAM,CAACC,IAAI,CAACF,IAAI,CAAC,CAACG,OAAO,CAAC,UAACC,OAAO,EAAK;IACrCJ,IAAI,CAACI,OAAO,CAAC,GAAG,KAAK;EACvB,CAAC,CAAC;EACF,OAAOJ,IAAI;AACb;AAEA,IAAMK,gBAAgB,GAAG,SAAnBA,gBAAgB,CACpBC,KAAoB,EACpBC,GAA+E,EAC5E;EACH,WA4BID,KAAK,IAAI,CAAC,CAAC;IAAA,sBA3BbE,SAAS;IAATA,SAAS,+BAAG,aAAa;IACzBC,SAAS,QAATA,SAAS;IACFC,UAAU,QAAjBC,KAAK;IAAA,qBACLC,QAAQ;IAARA,QAAQ,8BAAG,IAAAC,qBAAW,GAAE;IACxBC,cAAc,QAAdA,cAAc;IAAA,0BACdC,aAAa;IAAbA,aAAa,mCAAG,IAAAC,0BAAgB,GAAE;IAAA,mBAClCC,MAAM;IAANA,MAAM,4BAAG,GAAG;IAAA,yBACZC,YAAY;IAAZA,YAAY,kCAAG,IAAI;IAAA,2BACnBC,cAAc;IAAdA,cAAc,oCAAG,OAAOb,KAAK,CAACc,eAAe,KAAK,SAAS,GAAGd,KAAK,CAACc,eAAe,GAAG,IAAI;IAAA,4BAC1FC,eAAe;IAAfA,eAAe,qCAAG,IAAI;IAAA,oBACtBC,OAAO;IAAEC,WAAW,6BAAG,MAAM;IAAA,uBAC7BC,UAAU;IAAVA,UAAU,gCAAG,KAAK;IAAA,qBAClBC,QAAQ;IAARA,QAAQ,8BAAG,IAAI;IAAA,2BACfC,cAAc;IAAdA,cAAc,oCAAG,CAAC,CAAC;IACnBC,aAAa,QAAbA,aAAa;IAAA,sBACbC,SAAS;IAATA,SAAS,+BAAG,IAAI;IAAA,sBAChBC,SAAS;IAATA,SAAS,+BAAG,GAAG;IACfC,SAAS,QAATA,SAAS;IAAA,oBACTC,OAAO;IAAPA,OAAO,6BAAG,CAAC;IAAA,6BACXC,gBAAgB;IAAhBA,gBAAgB,sCAAG,KAAK;IACxBC,SAAQ,QAARA,QAAQ;IACRC,cAAc,QAAdA,cAAc;IACdC,WAAW,QAAXA,WAAW;IAAA,0BACXC,aAAa;IAAbA,aAAa,mCAAG,KAAK;IACrBC,UAAU,QAAVA,UAAU;IACVC,cAAc,QAAdA,cAAc;IACXC,KAAK;EAEV,IAAMC,IAAI,GAAG5B,QAAQ,CAClB6B,GAAG,CAAC,UAACC,IAAI;IAAA,OAAM5B,cAAc,GAAGA,cAAc,CAAC4B,IAAI,EAAE,KAAK,CAAC,GAAGA,IAAI;EAAA,CAAC,CAAC,CACpEC,MAAM,CAACC,OAAO,CAAe;EAChC,IAAMC,SAAS,GAAG9B,aAAa,CAC5B0B,GAAG,CAAC,UAACC,IAAI;IAAA,OAAM5B,cAAc,GAAGA,cAAc,CAAC4B,IAAI,EAAE,IAAI,CAAC,GAAGA,IAAI;EAAA,CAAC,CAAC,CACnEC,MAAM,CAACC,OAAO,CAAe;EAChC,kBAAwB,IAAAE,iBAAU,EAACC,gBAAO,EAAE;MAC1CC,QAAQ,EAAEtC,UAAU;MACpBY,OAAO,EAAEC,WAAW;MACpBc,UAAU,EAAVA,UAAU;MACVpB,MAAM,EAANA,MAAM;MACNI,eAAe,EAAfA,eAAe;MACfU,OAAO,EAAPA,OAAO;MACPC,gBAAgB,EAAhBA,gBAAgB;MAChBiB,SAAS,EAAE,CAAC;MACZC,gBAAgB,EAAE,CAAC;MACnBtC,QAAQ,EAAE4B,IAAI;MACdzB,aAAa,EAAE8B,SAAS;MACxBrB,UAAU,EAAVA,UAAU;MACV2B,QAAQ,EAAE,CAAC;IACb,CAAC,CAAC;IAAA;IAdGC,KAAK;IAAEC,QAAQ;EAepB,IAAMC,SAAS,GAAG,IAAAC,aAAM,EAAiB,IAAI,CAAC;EAC9C,IAAMC,UAAU,GAAG,IAAAD,aAAM,EAAiB,IAAI,CAAC;EAC/C,IAAME,eAAe,GAAG,IAAAF,aAAM,EAACrC,YAAY,CAAC;EAE5C,IAAAwC,0BAAmB,EAACnD,GAAG,EAAE;IAAA,0CAAY6C,KAAK;EAAA,CAAG,CAAC;EAC9C,IAAAO,cAAO,EAAC;IAAA,OAAOF,eAAe,CAACG,OAAO,GAAG1C,YAAY;EAAA,CAAC,EAAE,CAACA,YAAY,CAAC,CAAC;EACvE,IAAA2C,gBAAS,EAAC,YAAM;IACd,IAAMC,SAAuB,GAAG,CAAC,CAAC;IAClC,IAAIR,SAAS,CAACM,OAAO,EAAE;MACrBE,SAAS,CAACR,SAAS,GAAGA,SAAS,CAACM,OAAO,IAAIG,SAAS;IACtD;IACAD,SAAS,CAACd,QAAQ,GAAGtC,UAAU,IAAI,EAAE;IACrCoD,SAAS,CAACX,QAAQ,GAAG,CAAC,CAAC;IACvB,IAAIE,QAAQ,EAAE;MACZA,QAAQ,mEAAMD,KAAK,GAAKU,SAAS,EAAG;IACtC;IACA;EACF,CAAC,EAAE,EAAE,CAAC;EAEN,IAAME,GAAG,GAAG,CACVvD,SAAS,EACT,mBAAmB,EACnBD,SAAS,EACT4C,KAAK,CAAC9B,OAAO,aAAMd,SAAS,mBAAS4C,KAAK,CAAC9B,OAAO,IAAK,IAAI,EAC3D8B,KAAK,CAAC5B,UAAU,aAAMhB,SAAS,mBAAgB,IAAI,CACpD,CACEmC,MAAM,CAACC,OAAO,CAAC,CACfqB,IAAI,CAAC,GAAG,CAAC,CACTC,IAAI,EAAE;EAET,IAAAP,cAAO,EACL;IAAA,OAAMjD,UAAU,KAAK0C,KAAK,CAACJ,QAAQ,IAAIK,QAAQ,CAAC;MAAEL,QAAQ,EAAEtC,UAAU,IAAI;IAAG,CAAC,CAAC;EAAA,GAC/E,CAACA,UAAU,EAAE0C,KAAK,CAACJ,QAAQ,CAAC,CAC7B;EACD;EACA,IAAAW,cAAO,EAAC;IAAA,OAAMpC,WAAW,KAAK6B,KAAK,CAAC9B,OAAO,IAAI+B,QAAQ,CAAC;MAAE/B,OAAO,EAAEC;IAAY,CAAC,CAAC;EAAA,GAAE,CAACA,WAAW,CAAC,CAAC;EACjG;EACA,IAAAoC,cAAO,EAAC;IAAA,OAAM5B,OAAO,KAAKqB,KAAK,CAACrB,OAAO,IAAIsB,QAAQ,CAAC;MAAEtB,OAAO,EAAPA;IAAQ,CAAC,CAAC;EAAA,GAAE,CAACA,OAAO,CAAC,CAAC;EAC5E,IAAA4B,cAAO,EACL;IAAA,OAAMtC,eAAe,KAAK+B,KAAK,CAAC/B,eAAe,IAAIgC,QAAQ,CAAC;MAAEhC,eAAe,EAAfA;IAAgB,CAAC,CAAC;EAAA;EAChF;EACA,CAACA,eAAe,CAAC,CAClB;EACD;EACA,IAAAsC,cAAO,EAAC;IAAA,OAAM7B,SAAS,KAAKsB,KAAK,CAACtB,SAAS,IAAIuB,QAAQ,CAAC;MAAEvB,SAAS,EAAEA;IAAU,CAAC,CAAC;EAAA,GAAE,CAACA,SAAS,CAAC,CAAC;EAC/F,IAAA6B,cAAO,EACL;IAAA,OAAMnC,UAAU,KAAK4B,KAAK,CAAC5B,UAAU,IAAI6B,QAAQ,CAAC;MAAE7B,UAAU,EAAEA;IAAW,CAAC,CAAC;EAAA;EAC7E;EACA,CAACA,UAAU,CAAC,CACb;EACD;EACA,IAAAmC,cAAO,EAAC;IAAA,OAAM1C,MAAM,KAAKmC,KAAK,CAACnC,MAAM,IAAIoC,QAAQ,CAAC;MAAEpC,MAAM,EAAEA;IAAO,CAAC,CAAC;EAAA,GAAE,CAACA,MAAM,CAAC,CAAC;EAChF,IAAA0C,cAAO,EACL;IAAA,OAAM1C,MAAM,KAAKmC,KAAK,CAACnC,MAAM,IAAIiB,cAAc,IAAIA,cAAc,CAACkB,KAAK,CAACnC,MAAM,EAAEA,MAAM,EAAEmC,KAAK,CAAC;EAAA,GAC9F,CAACnC,MAAM,EAAEiB,cAAc,EAAEkB,KAAK,CAAC,CAChC;EAED,IAAMe,cAAc,GAAG,IAAAZ,aAAM,GAAkB;EAC/C,IAAMa,MAAM,GAAG,IAAAb,aAAM,EAAqB,SAAS,CAAC;EACpD,IAAMc,UAAU,GAAG,IAAAd,aAAM,EAAC,KAAK,CAAC;EAEhC,IAAAI,cAAO,EAAC,YAAM;IACZQ,cAAc,CAACP,OAAO,GAAGR,KAAK,CAACkB,YAAY;IAC3C,IAAIlB,KAAK,CAACkB,YAAY,EAAE;MACtBlB,KAAK,CAACkB,YAAY,CAACC,gBAAgB,CAAC,WAAW,EAAE,YAAM;QACrDH,MAAM,CAACR,OAAO,GAAG,MAAM;MACzB,CAAC,CAAC;MACFR,KAAK,CAACkB,YAAY,CAACC,gBAAgB,CAAC,YAAY,EAAE,YAAM;QACtDH,MAAM,CAACR,OAAO,GAAG,SAAS;MAC5B,CAAC,CAAC;IACJ;EACF,CAAC,EAAE,CAACR,KAAK,CAACkB,YAAY,CAAC,CAAC;EAExB,IAAME,YAAY,GAAG,SAAfA,YAAY,CAAIC,CAAgC,EAAEC,IAAwB,EAAK;IACnF,IAAI,CAACjB,eAAe,CAACG,OAAO,EAAE;IAC9B,IAAMe,WAAW,GAAGR,cAAc,CAACP,OAAO;IAC1C,IAAMgB,UAAU,GAAGpB,UAAU,CAACI,OAAO,GAAGJ,UAAU,CAACI,OAAO,GAAGG,SAAS;IACtE,IAAI,CAACM,UAAU,CAACT,OAAO,EAAE;MACvBQ,MAAM,CAACR,OAAO,GAAGc,IAAI;MACrBL,UAAU,CAACT,OAAO,GAAG,IAAI;IAC3B;IACA,IAAIe,WAAW,IAAIC,UAAU,EAAE;MAC7B,IAAMC,KAAK,GACT,CAACF,WAAW,CAACG,YAAY,GAAGH,WAAW,CAACI,YAAY,KAAKH,UAAU,CAACE,YAAY,GAAGF,UAAU,CAACG,YAAY,CAAC;MAC7G,IAAIN,CAAC,CAACO,MAAM,KAAKL,WAAW,IAAIP,MAAM,CAACR,OAAO,KAAK,MAAM,EAAE;QACzDgB,UAAU,CAAC3B,SAAS,GAAG0B,WAAW,CAAC1B,SAAS,GAAG4B,KAAK;MACtD;MACA,IAAIJ,CAAC,CAACO,MAAM,KAAKJ,UAAU,IAAIR,MAAM,CAACR,OAAO,KAAK,SAAS,EAAE;QAC3De,WAAW,CAAC1B,SAAS,GAAG2B,UAAU,CAAC3B,SAAS,GAAG4B,KAAK;MACtD;MACA,IAAI5B,SAAS,GAAG,CAAC;MACjB,IAAImB,MAAM,CAACR,OAAO,KAAK,MAAM,EAAE;QAC7BX,SAAS,GAAG0B,WAAW,CAAC1B,SAAS,IAAI,CAAC;MACxC,CAAC,MAAM,IAAImB,MAAM,CAACR,OAAO,KAAK,SAAS,EAAE;QACvCX,SAAS,GAAG2B,UAAU,CAAC3B,SAAS,IAAI,CAAC;MACvC;MACAI,QAAQ,CAAC;QAAEJ,SAAS,EAATA;MAAU,CAAC,CAAC;IACzB;EACF,CAAC;EAED,IAAMgC,gBAAgB,aAAMzE,SAAS,sBAAYkB,cAAc,CAACjB,SAAS,IAAI,EAAE,CAAE;EACjF,IAAMyE,mBAAmB,GAAG,SAAtBA,mBAAmB,CAAIT,CAAyC;IAAA,OAAKD,YAAY,CAACC,CAAC,EAAE,SAAS,CAAC;EAAA;EACrG,IAAIU,SAAS,GAAG,IAAAxB,cAAO,EACrB;IAAA,oBACE;MAAK,GAAG,EAAEH,UAAW;MAAC,SAAS,EAAEyB,gBAAiB;MAAA,uBAChD,qBAAC,gCAAe,oEAAKvD,cAAc;QAAE,QAAQ,EAAEwD,mBAAoB;QAAC,MAAM,EAAE9B,KAAK,CAACJ,QAAQ,IAAI;MAAG;IAAG,EAChG;EAAA,CACP,EACD,CAACiC,gBAAgB,EAAEvD,cAAc,EAAE0B,KAAK,CAACJ,QAAQ,CAAC,CACnD;EACD,IAAM1B,OAAO,GAAG,CAAAe,UAAU,aAAVA,UAAU,uBAAVA,UAAU,CAAEf,OAAO,MAAIe,UAAU,aAAVA,UAAU,uBAAVA,UAAU,CAAEf,OAAO,CAAC8B,KAAK,CAACJ,QAAQ,IAAI,EAAE,EAAEI,KAAK,EAAEC,QAAQ,CAAC;EACjG,IAAI/B,OAAO,iBAAI8D,iBAAK,CAACC,cAAc,CAAC/D,OAAO,CAAC,EAAE;IAC5C6D,SAAS,gBACP;MAAK,SAAS,EAAEF,gBAAiB;MAAC,GAAG,EAAEzB,UAAW;MAAC,QAAQ,EAAE0B,mBAAoB;MAAA,UAC9E5D;IAAO,EAEX;EACH;EAEA,IAAMgE,cAAc,qEAAQ/C,KAAK,CAACgD,KAAK;IAAEtE,MAAM,EAAEmC,KAAK,CAACnC,MAAM,IAAI;EAAM,EAAE;EACzE,IAAMuE,cAAc,GAAG,SAAjBA,cAAc;IAAA,OAASnC,QAAQ,CAAC;MAAEF,QAAQ,qCAAOpD,gBAAgB,CAACqD,KAAK,CAACD,QAAQ,CAAC;IAAG,CAAC,CAAC;EAAA;EAC5F,IAAMsC,aAAa,GAAG,SAAhBA,aAAa,CAAIC,SAAiB;IAAA,OAAKrC,QAAQ,CAAC;MAAEpC,MAAM,EAAEyE;IAAU,CAAC,CAAC;EAAA;EAE5E,oBACE,qBAAC,sBAAa,CAAC,QAAQ;IAAC,KAAK,oEAAOtC,KAAK;MAAEC,QAAQ,EAARA;IAAQ,EAAG;IAAA,uBACpD;MAAK,GAAG,EAAEC,SAAU;MAAC,SAAS,EAAEU;IAAI,GAAKzB,KAAK;MAAE,OAAO,EAAEiD,cAAe;MAAC,KAAK,EAAEF,cAAe;MAAA,WAC5F,CAACnD,WAAW,IAAI,CAACC,aAAa,iBAC7B,qBAAC,mBAAO;QAAC,SAAS,EAAE5B,SAAU;QAAC,QAAQ,EAAEiB,QAAS;QAAC,aAAa,EAAEW;MAAc,EACjF,eACD;QAAK,SAAS,YAAK5B,SAAS,aAAW;QAAA,WACpC,aAAa,CAACmF,IAAI,CAACvC,KAAK,CAAC9B,OAAO,IAAI,EAAE,CAAC,iBACtC,qBAAC,oBAAQ;UACP,SAAS,YAAKd,SAAS,WAAS;UAChC,SAAS,EAAEA,SAAU;UACrB,SAAS,EAAEsB;QAAU,GACjBH,aAAa;UACjB,QAAQ,EAAE,kBAACiE,GAAG,EAAK;YACjB3D,SAAQ,IAAIA,SAAQ,CAAC2D,GAAG,CAACZ,MAAM,CAACrE,KAAK,EAAEiF,GAAG,EAAExC,KAAK,CAAC;YAClD,IAAIzB,aAAa,IAAIA,aAAa,CAACM,QAAQ,EAAE;cAC3CN,aAAa,CAACM,QAAQ,CAAC2D,GAAG,CAAC;YAC7B;UACF,CAAE;UACF,cAAc,EAAE,CAAAvD,UAAU,aAAVA,UAAU,uBAAVA,UAAU,CAAEwD,QAAQ,KAAIvD,cAAe;UACvD,QAAQ,EAAE,kBAACmC,CAAC;YAAA,OAAKD,YAAY,CAACC,CAAC,EAAE,MAAM,CAAC;UAAA;QAAC,GAE5C,EACA,gBAAgB,CAACkB,IAAI,CAACvC,KAAK,CAAC9B,OAAO,IAAI,EAAE,CAAC,IAAI6D,SAAS;MAAA,EACpD,EACLhE,cAAc,IAAI,CAACiC,KAAK,CAAC5B,UAAU,iBAClC,qBAAC,mBAAO;QACN,SAAS,EAAEhB,SAAU;QACrB,MAAM,EAAE4C,KAAK,CAACnC,MAAiB;QAC/B,SAAS,EAAEW,SAAW;QACtB,SAAS,EAAEC,SAAW;QACtB,QAAQ,EAAE4D;MAAc,EAE3B,EACA,CAACtD,WAAW,IAAIC,aAAa,iBAC5B,qBAAC,mBAAO;QAAC,SAAS,EAAE5B,SAAU;QAAC,QAAQ,EAAEiB,QAAS;QAAC,aAAa,EAAEW;MAAc,EACjF;IAAA;EACG,EACiB;AAE7B,CAAC;AAID,IAAM0D,QAAgB,gBAAGV,iBAAK,CAACW,UAAU,CAAC1F,gBAAgB,CAAsB;AAEhFyF,QAAQ,CAACE,QAAQ,GAAGC,gCAAe;AAAC,eAErBH,QAAQ;AAAA;AAAA"
+  "mappings": "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"
 }

package/lib/commands/index.d.ts

@@ -2,6 +2,7 @@ import React from 'react';
 import { ContextStore, ExecuteCommandState } from '../Context';
 import { bold } from './bold';
 import { code, codeBlock } from './code';
+import { comment } from './comment';
 import { divider } from './divider';
 import { fullscreen } from './fullscreen';
 import { group } from './group';
@@ -83,4 +84,4 @@ declare class TextAreaCommandOrchestrator implements CommandOrchestrator {
     getState(): false | TextState;
     executeCommand(command: ICommand<string>, dispatch?: React.Dispatch<ContextStore>, state?: ExecuteCommandState, shortcuts?: string[]): void;
 }
-export { title, title1, title2, title3, title4, title5, title6, bold, codeBlock, italic, strikethrough, hr, group, divider, link, quote, code, image, unorderedListCommand, orderedListCommand, checkedListCommand, codeEdit, codeLive, codePreview, fullscreen, getCommands, getExtraCommands, getStateFromTextArea, TextAreaCommandOrchestrator, TextAreaTextApi, };
+export { title, title1, title2, title3, title4, title5, title6, bold, codeBlock, comment, italic, strikethrough, hr, group, divider, link, quote, code, image, unorderedListCommand, orderedListCommand, checkedListCommand, codeEdit, codeLive, codePreview, fullscreen, getCommands, getExtraCommands, getStateFromTextArea, TextAreaCommandOrchestrator, TextAreaTextApi, };

package/lib/commands/index.js

@@ -47,6 +47,12 @@ Object.defineProperty(exports, "codePreview", {
     return _preview.codePreview;
   }
 });
+Object.defineProperty(exports, "comment", {
+  enumerable: true,
+  get: function get() {
+    return _comment.comment;
+  }
+});
 Object.defineProperty(exports, "divider", {
   enumerable: true,
   get: function get() {

package/lib/commands/index.js.map

@@ -58,7 +58,7 @@
     "../../src/commands/index.ts"
   ],
   "sourcesContent": [
-    "import React from 'react';\nimport { ContextStore, ExecuteCommandState } from '../Context';\nimport { insertTextAtPosition } from '../utils/InsertTextAtPosition';\nimport { bold } from './bold';\nimport { code, codeBlock } from './code';\nimport { comment } from './comment';\nimport { divider } from './divider';\nimport { fullscreen } from './fullscreen';\nimport { group } from './group';\nimport { hr } from './hr';\nimport { image } from './image';\nimport { italic } from './italic';\nimport { link } from './link';\nimport { checkedListCommand, orderedListCommand, unorderedListCommand } from './list';\nimport { codeEdit, codeLive, codePreview } from './preview';\nimport { quote } from './quote';\nimport { strikethrough } from './strikeThrough';\nimport { title } from './title';\nimport { title1 } from './title1';\nimport { title2 } from './title2';\nimport { title3 } from './title3';\nimport { title4 } from './title4';\nimport { title5 } from './title5';\nimport { title6 } from './title6';\n\nexport interface CommandOrchestrator {\n  executeCommand(command: ICommand): void;\n}\n\nexport interface ICommandChildHandle<T = string> extends ICommandBase<T> {\n  children?: (handle: {\n    close: () => void;\n    execute: () => void;\n    getState?: TextAreaCommandOrchestrator['getState'];\n    textApi?: TextAreaTextApi;\n  }) => React.ReactElement;\n}\n\nexport interface ICommandChildCommands<T = string> extends ICommandBase<T> {\n  children?: Array<ICommand<T>>;\n}\n\nexport interface ICommandBase<T> {\n  parent?: ICommand<any>;\n  keyCommand?: string;\n  name?: string;\n  shortcuts?: string;\n  groupName?: string;\n  icon?: React.ReactElement;\n  value?: T;\n  position?: 'right';\n  liProps?: React.LiHTMLAttributes<HTMLLIElement>;\n  buttonProps?: React.ButtonHTMLAttributes<HTMLButtonElement> | null;\n  render?: (\n    command: ICommand<T>,\n    disabled: boolean,\n    executeCommand: (command: ICommand<T>, name?: string) => void,\n    index: number,\n  ) => void | undefined | null | React.ReactElement;\n  execute?: (\n    state: TextState,\n    api: TextAreaTextApi,\n    dispatch?: React.Dispatch<ContextStore>,\n    executeCommandState?: ExecuteCommandState,\n    shortcuts?: string[],\n  ) => void;\n}\n\nexport type ICommand<T = string> = ICommandChildCommands<T> | ICommandChildHandle<T>;\n\nexport interface TextRange {\n  start: number;\n  end: number;\n}\n\nexport interface TextState {\n  text: string;\n  selectedText: string;\n  selection: TextRange;\n}\n\nconst getCommands: () => ICommand[] = () => [\n  bold,\n  italic,\n  strikethrough,\n  hr,\n  group([title1, title2, title3, title4, title5, title6], {\n    name: 'title',\n    groupName: 'title',\n    buttonProps: { 'aria-label': 'Insert title', title: 'Insert title' },\n  }),\n  divider,\n  link,\n  quote,\n  code,\n  codeBlock,\n  comment,\n  image,\n  divider,\n  unorderedListCommand,\n  orderedListCommand,\n  checkedListCommand,\n];\n\nconst getExtraCommands: () => ICommand[] = () => [codeEdit, codeLive, codePreview, divider, fullscreen];\n\nfunction getStateFromTextArea(textArea: HTMLTextAreaElement): TextState {\n  return {\n    selection: {\n      start: textArea.selectionStart,\n      end: textArea.selectionEnd,\n    },\n    text: textArea.value,\n    selectedText: textArea.value?.slice(textArea.selectionStart, textArea.selectionEnd),\n  };\n}\n\nclass TextAreaTextApi {\n  textArea: HTMLTextAreaElement;\n\n  constructor(textArea: HTMLTextAreaElement) {\n    this.textArea = textArea;\n  }\n\n  /**\n   * Replaces the current selection with the new text. This will make the new selectedText to be empty, the\n   * selection start and selection end will be the same and will both point to the end\n   * @param text Text that should replace the current selection\n   */\n  replaceSelection(text: string): TextState {\n    insertTextAtPosition(this.textArea, text);\n    return getStateFromTextArea(this.textArea);\n  }\n\n  /**\n   * Selects the specified text range\n   * @param selection\n   */\n  setSelectionRange(selection: TextRange): TextState {\n    this.textArea.focus();\n    this.textArea.selectionStart = selection.start;\n    this.textArea.selectionEnd = selection.end;\n    return getStateFromTextArea(this.textArea);\n  }\n}\n\nclass TextAreaCommandOrchestrator implements CommandOrchestrator {\n  textArea: HTMLTextAreaElement;\n  textApi: TextAreaTextApi;\n\n  constructor(textArea: HTMLTextAreaElement) {\n    this.textArea = textArea;\n    this.textApi = new TextAreaTextApi(textArea);\n  }\n\n  getState() {\n    if (!this.textArea) return false;\n    return getStateFromTextArea(this.textArea);\n  }\n\n  executeCommand(\n    command: ICommand<string>,\n    dispatch?: React.Dispatch<ContextStore>,\n    state?: ExecuteCommandState,\n    shortcuts?: string[],\n  ): void {\n    command.execute && command.execute(getStateFromTextArea(this.textArea), this.textApi, dispatch, state, shortcuts);\n  }\n}\n\nexport {\n  title,\n  title1,\n  title2,\n  title3,\n  title4,\n  title5,\n  title6,\n  bold,\n  codeBlock,\n  italic,\n  strikethrough,\n  hr,\n  group,\n  divider,\n  link,\n  quote,\n  code,\n  image,\n  unorderedListCommand,\n  orderedListCommand,\n  checkedListCommand,\n  codeEdit,\n  codeLive,\n  codePreview,\n  fullscreen,\n  // Tool method.\n  getCommands,\n  getExtraCommands,\n  getStateFromTextArea,\n  TextAreaCommandOrchestrator,\n  TextAreaTextApi,\n};\n"
+    "import React from 'react';\nimport { ContextStore, ExecuteCommandState } from '../Context';\nimport { insertTextAtPosition } from '../utils/InsertTextAtPosition';\nimport { bold } from './bold';\nimport { code, codeBlock } from './code';\nimport { comment } from './comment';\nimport { divider } from './divider';\nimport { fullscreen } from './fullscreen';\nimport { group } from './group';\nimport { hr } from './hr';\nimport { image } from './image';\nimport { italic } from './italic';\nimport { link } from './link';\nimport { checkedListCommand, orderedListCommand, unorderedListCommand } from './list';\nimport { codeEdit, codeLive, codePreview } from './preview';\nimport { quote } from './quote';\nimport { strikethrough } from './strikeThrough';\nimport { title } from './title';\nimport { title1 } from './title1';\nimport { title2 } from './title2';\nimport { title3 } from './title3';\nimport { title4 } from './title4';\nimport { title5 } from './title5';\nimport { title6 } from './title6';\n\nexport interface CommandOrchestrator {\n  executeCommand(command: ICommand): void;\n}\n\nexport interface ICommandChildHandle<T = string> extends ICommandBase<T> {\n  children?: (handle: {\n    close: () => void;\n    execute: () => void;\n    getState?: TextAreaCommandOrchestrator['getState'];\n    textApi?: TextAreaTextApi;\n  }) => React.ReactElement;\n}\n\nexport interface ICommandChildCommands<T = string> extends ICommandBase<T> {\n  children?: Array<ICommand<T>>;\n}\n\nexport interface ICommandBase<T> {\n  parent?: ICommand<any>;\n  keyCommand?: string;\n  name?: string;\n  shortcuts?: string;\n  groupName?: string;\n  icon?: React.ReactElement;\n  value?: T;\n  position?: 'right';\n  liProps?: React.LiHTMLAttributes<HTMLLIElement>;\n  buttonProps?: React.ButtonHTMLAttributes<HTMLButtonElement> | null;\n  render?: (\n    command: ICommand<T>,\n    disabled: boolean,\n    executeCommand: (command: ICommand<T>, name?: string) => void,\n    index: number,\n  ) => void | undefined | null | React.ReactElement;\n  execute?: (\n    state: TextState,\n    api: TextAreaTextApi,\n    dispatch?: React.Dispatch<ContextStore>,\n    executeCommandState?: ExecuteCommandState,\n    shortcuts?: string[],\n  ) => void;\n}\n\nexport type ICommand<T = string> = ICommandChildCommands<T> | ICommandChildHandle<T>;\n\nexport interface TextRange {\n  start: number;\n  end: number;\n}\n\nexport interface TextState {\n  text: string;\n  selectedText: string;\n  selection: TextRange;\n}\n\nconst getCommands: () => ICommand[] = () => [\n  bold,\n  italic,\n  strikethrough,\n  hr,\n  group([title1, title2, title3, title4, title5, title6], {\n    name: 'title',\n    groupName: 'title',\n    buttonProps: { 'aria-label': 'Insert title', title: 'Insert title' },\n  }),\n  divider,\n  link,\n  quote,\n  code,\n  codeBlock,\n  comment,\n  image,\n  divider,\n  unorderedListCommand,\n  orderedListCommand,\n  checkedListCommand,\n];\n\nconst getExtraCommands: () => ICommand[] = () => [codeEdit, codeLive, codePreview, divider, fullscreen];\n\nfunction getStateFromTextArea(textArea: HTMLTextAreaElement): TextState {\n  return {\n    selection: {\n      start: textArea.selectionStart,\n      end: textArea.selectionEnd,\n    },\n    text: textArea.value,\n    selectedText: textArea.value?.slice(textArea.selectionStart, textArea.selectionEnd),\n  };\n}\n\nclass TextAreaTextApi {\n  textArea: HTMLTextAreaElement;\n\n  constructor(textArea: HTMLTextAreaElement) {\n    this.textArea = textArea;\n  }\n\n  /**\n   * Replaces the current selection with the new text. This will make the new selectedText to be empty, the\n   * selection start and selection end will be the same and will both point to the end\n   * @param text Text that should replace the current selection\n   */\n  replaceSelection(text: string): TextState {\n    insertTextAtPosition(this.textArea, text);\n    return getStateFromTextArea(this.textArea);\n  }\n\n  /**\n   * Selects the specified text range\n   * @param selection\n   */\n  setSelectionRange(selection: TextRange): TextState {\n    this.textArea.focus();\n    this.textArea.selectionStart = selection.start;\n    this.textArea.selectionEnd = selection.end;\n    return getStateFromTextArea(this.textArea);\n  }\n}\n\nclass TextAreaCommandOrchestrator implements CommandOrchestrator {\n  textArea: HTMLTextAreaElement;\n  textApi: TextAreaTextApi;\n\n  constructor(textArea: HTMLTextAreaElement) {\n    this.textArea = textArea;\n    this.textApi = new TextAreaTextApi(textArea);\n  }\n\n  getState() {\n    if (!this.textArea) return false;\n    return getStateFromTextArea(this.textArea);\n  }\n\n  executeCommand(\n    command: ICommand<string>,\n    dispatch?: React.Dispatch<ContextStore>,\n    state?: ExecuteCommandState,\n    shortcuts?: string[],\n  ): void {\n    command.execute && command.execute(getStateFromTextArea(this.textArea), this.textApi, dispatch, state, shortcuts);\n  }\n}\n\nexport {\n  title,\n  title1,\n  title2,\n  title3,\n  title4,\n  title5,\n  title6,\n  bold,\n  codeBlock,\n  comment,\n  italic,\n  strikethrough,\n  hr,\n  group,\n  divider,\n  link,\n  quote,\n  code,\n  image,\n  unorderedListCommand,\n  orderedListCommand,\n  checkedListCommand,\n  codeEdit,\n  codeLive,\n  codePreview,\n  fullscreen,\n  // Tool method.\n  getCommands,\n  getExtraCommands,\n  getStateFromTextArea,\n  TextAreaCommandOrchestrator,\n  TextAreaTextApi,\n};\n"
   ],
-  "mappings": "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"
+  "mappings": "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"
 }

package/lib/index.less

@@ -12,6 +12,19 @@
   font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
   display: flex;
   flex-direction: column;
+  &&-rtl {
+    direction: rtl !important;
+    text-align: right !important;
+  }
+  &&-rtl &-preview {
+    right: unset !important;
+    left: 0;
+    text-align: right !important;
+    box-shadow: inset -1px 0 0 0 var(--color-border-default);
+  }
+  &&-rtl &-text {
+    text-align: right !important;
+  }
   &-toolbar {
     height: fit-content;
   }

package/markdown-editor.css

@@ -260,6 +260,19 @@
   display: flex;
   flex-direction: column;
 }
+.w-md-editor.w-md-editor-rtl {
+  direction: rtl !important;
+  text-align: right !important;
+}
+.w-md-editor.w-md-editor-rtl .w-md-editor-preview {
+  right: unset !important;
+  left: 0;
+  text-align: right !important;
+  box-shadow: inset -1px 0 0 0 var(--color-border-default);
+}
+.w-md-editor.w-md-editor-rtl .w-md-editor-text {
+  text-align: right !important;
+}
 .w-md-editor-toolbar {
   height: -webkit-fit-content;
   height: fit-content;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uiw/react-md-editor",
-  "version": "3.19.8",
+  "version": "3.20.1",
   "description": "A markdown editor with preview, implemented with React.js and TypeScript.",
   "homepage": "https://uiwjs.github.io/react-md-editor/",
   "author": "kenny wang <wowohoo@qq.com>",

package/src/Editor.tsx

@@ -136,6 +136,12 @@ export interface MDEditorProps extends Omit<React.HTMLAttributes<HTMLDivElement>
   enableScroll?: boolean;
   /** Toolbar on bottom */
   toolbarBottom?: boolean;
+  /**
+   * The **`direction`** property sets the direction of text, table columns, and horizontal overflow. Use `rtl` for languages written from right to left (like Hebrew or Arabic), and `ltr` for those written from left to right (like English and most other languages).
+   *
+   * https://github.com/uiwjs/react-md-editor/issues/462
+   */
+  direction?: CSSProperties['direction'];
 }
 
 function setGroupPopFalse(data: Record<string, boolean> = {}) {
@@ -155,6 +161,7 @@ const InternalMDEditor = (
     value: propsValue,
     commands = getCommands(),
     commandsFilter,
+    direction,
     extraCommands = getExtraCommands(),
     height = 200,
     enableScroll = true,
@@ -221,6 +228,7 @@ const InternalMDEditor = (
   const cls = [
     className,
     'wmde-markdown-var',
+    direction ? `${prefixCls}-${direction}` : null,
     prefixCls,
     state.preview ? `${prefixCls}-show-${state.preview}` : null,
     state.fullscreen ? `${prefixCls}-fullscreen` : null,

package/src/commands/index.ts

@@ -178,6 +178,7 @@ export {
   title6,
   bold,
   codeBlock,
+  comment,
   italic,
   strikethrough,
   hr,