@uiw/react-md-editor 4.0.10 → 4.1.0

package/src/Editor.tsx

@@ -1,275 +1,7 @@
-import React, { useEffect, useReducer, useMemo, useRef, useImperativeHandle } from 'react';
 import MarkdownPreview from '@uiw/react-markdown-preview';
-import { ToolbarVisibility } from './components/Toolbar/';
 import TextArea from './components/TextArea/';
-import DragBar from './components/DragBar/';
-import { getCommands, getExtraCommands, type ICommand, type TextState, TextAreaCommandOrchestrator } from './commands/';
-import { reducer, EditorContext, type ContextStore } from './Context';
-import type { MDEditorProps } from './Types';
+import { createMDEditor } from './Editor.factory';
 
-function setGroupPopFalse(data: Record<string, boolean> = {}) {
-  Object.keys(data).forEach((keyname) => {
-    data[keyname] = false;
-  });
-  return data;
-}
+export type { RefMDEditor } from './Editor.factory';
 
-export interface RefMDEditor extends ContextStore {}
-
-const InternalMDEditor = React.forwardRef<RefMDEditor, MDEditorProps>(
-  (props: MDEditorProps, ref: React.ForwardedRef<RefMDEditor>) => {
-    const {
-      prefixCls = 'w-md-editor',
-      className,
-      value: propsValue,
-      commands = getCommands(),
-      commandsFilter,
-      direction,
-      extraCommands = getExtraCommands(),
-      height = 200,
-      enableScroll = true,
-      visibleDragbar = typeof props.visiableDragbar === 'boolean' ? props.visiableDragbar : true,
-      highlightEnable = true,
-      preview: previewType = 'live',
-      fullscreen = false,
-      overflow = true,
-      previewOptions = {},
-      textareaProps,
-      maxHeight = 1200,
-      minHeight = 100,
-      autoFocus,
-      autoFocusEnd = false,
-      tabSize = 2,
-      defaultTabEnable = false,
-      onChange,
-      onStatistics,
-      onHeightChange,
-      hideToolbar,
-      toolbarBottom = false,
-      components,
-      renderTextarea,
-      ...other
-    } = props || {};
-    const cmds = commands
-      .map((item) => (commandsFilter ? commandsFilter(item, false) : item))
-      .filter(Boolean) as ICommand[];
-    const extraCmds = extraCommands
-      .map((item) => (commandsFilter ? commandsFilter(item, true) : item))
-      .filter(Boolean) as ICommand[];
-    let [state, dispatch] = useReducer(reducer, {
-      markdown: propsValue,
-      preview: previewType,
-      components,
-      height,
-      minHeight,
-      highlightEnable,
-      tabSize,
-      defaultTabEnable,
-      scrollTop: 0,
-      scrollTopPreview: 0,
-      commands: cmds,
-      extraCommands: extraCmds,
-      fullscreen,
-      barPopup: {},
-    });
-    const container = useRef<HTMLDivElement>(null);
-    const previewRef = useRef<HTMLDivElement>(null);
-    const enableScrollRef = useRef(enableScroll);
-
-    useImperativeHandle(ref, () => ({ ...state, container: container.current, dispatch }));
-    useMemo(() => (enableScrollRef.current = enableScroll), [enableScroll]);
-    useEffect(() => {
-      const stateInit: ContextStore = {};
-      if (container.current) {
-        stateInit.container = container.current || undefined;
-      }
-      stateInit.markdown = propsValue || '';
-      stateInit.barPopup = {};
-      if (dispatch) {
-        dispatch({ ...state, ...stateInit });
-      }
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
-
-    const 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],
-    );
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    useMemo(() => previewType !== state.preview && dispatch({ preview: previewType }), [previewType]);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    useMemo(() => tabSize !== state.tabSize && dispatch({ tabSize }), [tabSize]);
-    useMemo(
-      () => highlightEnable !== state.highlightEnable && dispatch({ highlightEnable }),
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-      [highlightEnable],
-    );
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    useMemo(() => autoFocus !== state.autoFocus && dispatch({ autoFocus: autoFocus }), [autoFocus]);
-    useMemo(() => autoFocusEnd !== state.autoFocusEnd && dispatch({ autoFocusEnd: autoFocusEnd }), [autoFocusEnd]);
-    useMemo(
-      () => fullscreen !== state.fullscreen && dispatch({ fullscreen: fullscreen }),
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-      [fullscreen],
-    );
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    useMemo(() => height !== state.height && dispatch({ height: height }), [height]);
-    useMemo(
-      () => height !== state.height && onHeightChange && onHeightChange(state.height, height, state),
-      [height, onHeightChange, state],
-    );
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    useMemo(() => commands !== state.commands && dispatch({ commands: cmds }), [props.commands]);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    useMemo(
-      () => extraCommands !== state.extraCommands && dispatch({ extraCommands: extraCmds }),
-      [props.extraCommands],
-    );
-
-    const textareaDomRef = useRef<HTMLDivElement>();
-    const active = useRef<'text' | 'preview'>('preview');
-    const initScroll = useRef(false);
-
-    useMemo(() => {
-      textareaDomRef.current = state.textareaWarp;
-      if (state.textareaWarp) {
-        state.textareaWarp.addEventListener('mouseover', () => {
-          active.current = 'text';
-        });
-        state.textareaWarp.addEventListener('mouseleave', () => {
-          active.current = 'preview';
-        });
-      }
-    }, [state.textareaWarp]);
-
-    const handleScroll = (e: React.UIEvent<HTMLDivElement>, type: 'text' | 'preview') => {
-      if (!enableScrollRef.current) return;
-      const textareaDom = textareaDomRef.current;
-      const previewDom = previewRef.current ? previewRef.current : undefined;
-      if (!initScroll.current) {
-        active.current = type;
-        initScroll.current = true;
-      }
-      if (textareaDom && previewDom) {
-        const scale =
-          (textareaDom.scrollHeight - textareaDom.offsetHeight) / (previewDom.scrollHeight - previewDom.offsetHeight);
-        if (e.target === textareaDom && active.current === 'text') {
-          previewDom.scrollTop = textareaDom.scrollTop / scale;
-        }
-        if (e.target === previewDom && active.current === 'preview') {
-          textareaDom.scrollTop = previewDom.scrollTop * scale;
-        }
-        let scrollTop = 0;
-        if (active.current === 'text') {
-          scrollTop = textareaDom.scrollTop || 0;
-        } else if (active.current === 'preview') {
-          scrollTop = previewDom.scrollTop || 0;
-        }
-        dispatch({ scrollTop });
-      }
-    };
-
-    const previewClassName = `${prefixCls}-preview ${previewOptions.className || ''}`;
-    const handlePreviewScroll = (e: React.UIEvent<HTMLDivElement, UIEvent>) => handleScroll(e, 'preview');
-    let mdPreview = useMemo(
-      () => (
-        <div ref={previewRef} className={previewClassName}>
-          <MarkdownPreview {...previewOptions} onScroll={handlePreviewScroll} source={state.markdown || ''} />
-        </div>
-      ),
-      [previewClassName, previewOptions, state.markdown],
-    );
-    const preview = components?.preview && components?.preview(state.markdown || '', state, dispatch);
-    if (preview && React.isValidElement(preview)) {
-      mdPreview = (
-        <div className={previewClassName} ref={previewRef} onScroll={handlePreviewScroll}>
-          {preview}
-        </div>
-      );
-    }
-
-    const containerStyle = { ...other.style, height: state.height || '100%' };
-    const containerClick = () => dispatch({ barPopup: { ...setGroupPopFalse(state.barPopup) } });
-    const dragBarChange = (newHeight: number) => dispatch({ height: newHeight });
-
-    const changeHandle = (evn: React.ChangeEvent<HTMLTextAreaElement>) => {
-      onChange && onChange(evn.target.value, evn, state);
-      if (textareaProps && textareaProps.onChange) {
-        textareaProps.onChange(evn);
-      }
-      if (state.textarea && state.textarea instanceof HTMLTextAreaElement && onStatistics) {
-        const obj = new TextAreaCommandOrchestrator(state.textarea!);
-        const objState = (obj.getState() || {}) as TextState;
-        onStatistics({
-          ...objState,
-          lineCount: evn.target.value.split('\n').length,
-          length: evn.target.value.length,
-        });
-      }
-    };
-    return (
-      <EditorContext.Provider value={{ ...state, dispatch }}>
-        <div ref={container} className={cls} {...other} onClick={containerClick} style={containerStyle}>
-          <ToolbarVisibility
-            hideToolbar={hideToolbar}
-            toolbarBottom={toolbarBottom}
-            prefixCls={prefixCls}
-            overflow={overflow}
-            placement="top"
-          />
-          <div className={`${prefixCls}-content`}>
-            {/(edit|live)/.test(state.preview || '') && (
-              <TextArea
-                className={`${prefixCls}-input`}
-                prefixCls={prefixCls}
-                autoFocus={autoFocus}
-                {...textareaProps}
-                onChange={changeHandle}
-                renderTextarea={components?.textarea || renderTextarea}
-                onScroll={(e) => handleScroll(e, 'text')}
-              />
-            )}
-            {/(live|preview)/.test(state.preview || '') && mdPreview}
-          </div>
-          {visibleDragbar && !state.fullscreen && (
-            <DragBar
-              prefixCls={prefixCls}
-              height={state.height as number}
-              maxHeight={maxHeight!}
-              minHeight={minHeight!}
-              onChange={dragBarChange}
-            />
-          )}
-          <ToolbarVisibility
-            hideToolbar={hideToolbar}
-            toolbarBottom={toolbarBottom}
-            prefixCls={prefixCls}
-            overflow={overflow}
-            placement="bottom"
-          />
-        </div>
-      </EditorContext.Provider>
-    );
-  },
-);
-
-type EditorComponent = typeof InternalMDEditor & {
-  Markdown: typeof MarkdownPreview;
-};
-
-const Editor = InternalMDEditor as EditorComponent;
-Editor.Markdown = MarkdownPreview;
-
-export default Editor;
+export default createMDEditor({ MarkdownPreview, TextArea });

package/src/components/TextArea/Markdown.common.tsx

@@ -0,0 +1,49 @@
+import React, { useContext, useEffect } from 'react';
+import { rehype } from 'rehype';
+import rehypePrism from 'rehype-prism-plus/common';
+import { type IProps } from '../../Types';
+import { EditorContext } from '../../Context';
+
+function html2Escape(sHtml: string) {
+  return sHtml.replace(
+    /[<&"]/g,
+    (c: string) => (({ '<': '&lt;', '>': '&gt;', '&': '&amp;', '"': '&quot;' }) as Record<string, string>)[c],
+  );
+}
+
+export interface MarkdownProps extends IProps, React.HTMLAttributes<HTMLPreElement> {}
+
+export default function Markdown(props: MarkdownProps) {
+  const { prefixCls } = props;
+  const { markdown = '', highlightEnable, dispatch } = useContext(EditorContext);
+  const preRef = React.createRef<HTMLPreElement>();
+  useEffect(() => {
+    if (preRef.current && dispatch) {
+      dispatch({ textareaPre: preRef.current });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  if (!markdown) {
+    return <pre ref={preRef} className={`${prefixCls}-text-pre wmde-markdown-color`} />;
+  }
+  let mdStr = `<pre class="language-markdown ${prefixCls}-text-pre wmde-markdown-color"><code class="language-markdown">${html2Escape(
+    String.raw`${markdown}`,
+  )}\n</code></pre>`;
+
+  if (highlightEnable) {
+    try {
+      mdStr = rehype()
+        .data('settings', { fragment: true })
+        // https://github.com/uiwjs/react-md-editor/issues/593
+        // @ts-ignore
+        .use(rehypePrism, { ignoreMissing: true })
+        .processSync(mdStr)
+        .toString();
+    } catch (error) {}
+  }
+
+  return React.createElement('div', {
+    className: 'wmde-markdown-color',
+    dangerouslySetInnerHTML: { __html: mdStr || '' },
+  });
+}

package/src/components/TextArea/factory.tsx

@@ -0,0 +1,120 @@
+import React, { useEffect, Fragment, useContext, JSX } from 'react';
+import type * as CSS from 'csstype';
+import { EditorContext, type ContextStore, type ExecuteCommandState } from '../../Context';
+import shortcuts from './shortcuts';
+import Textarea, { type TextAreaProps } from './Textarea';
+import { type IProps } from '../../Types';
+import { TextAreaCommandOrchestrator, type ICommand } from '../../commands/';
+import './index.less';
+
+export type RenderTextareaHandle = {
+  dispatch: ContextStore['dispatch'];
+  onChange?: TextAreaProps['onChange'];
+  useContext?: {
+    commands: ContextStore['commands'];
+    extraCommands: ContextStore['extraCommands'];
+    commandOrchestrator?: TextAreaCommandOrchestrator;
+  };
+  shortcuts?: (
+    e: KeyboardEvent | React.KeyboardEvent<HTMLTextAreaElement>,
+    commands: ICommand[],
+    commandOrchestrator?: TextAreaCommandOrchestrator,
+    dispatch?: React.Dispatch<ContextStore>,
+    state?: ExecuteCommandState,
+  ) => void;
+};
+
+export interface ITextAreaProps
+  extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'value' | 'onScroll'>,
+    IProps {
+  value?: string;
+  onScroll?: (e: React.UIEvent<HTMLDivElement>) => void;
+  renderTextarea?: (
+    props: React.TextareaHTMLAttributes<HTMLTextAreaElement> | React.HTMLAttributes<HTMLDivElement>,
+    opts: RenderTextareaHandle,
+  ) => JSX.Element;
+}
+
+export type TextAreaRef = {
+  text?: HTMLTextAreaElement;
+  warp?: HTMLDivElement;
+};
+
+type MarkdownComponent = React.ComponentType<{ prefixCls?: string }>;
+
+export function createTextArea(options?: { Markdown?: MarkdownComponent; useMinHeight?: boolean }) {
+  const MarkdownComponent = options?.Markdown;
+  const useMinHeight = options?.useMinHeight ?? false;
+
+  return function TextArea(props: ITextAreaProps) {
+    const { prefixCls, className, onScroll, renderTextarea, ...otherProps } = props || {};
+    const { markdown, scrollTop, commands, minHeight, highlightEnable, extraCommands, dispatch } =
+      useContext(EditorContext);
+    const textRef = React.useRef<HTMLTextAreaElement>(null);
+    const executeRef = React.useRef<TextAreaCommandOrchestrator>();
+    const warp = React.createRef<HTMLDivElement>();
+    useEffect(() => {
+      const state: ContextStore = {};
+      if (warp.current) {
+        state.textareaWarp = warp.current || undefined;
+        warp.current.scrollTop = scrollTop || 0;
+      }
+      if (dispatch) {
+        dispatch({ ...state });
+      }
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
+    useEffect(() => {
+      if (textRef.current && dispatch) {
+        const commandOrchestrator = new TextAreaCommandOrchestrator(textRef.current);
+        executeRef.current = commandOrchestrator;
+        dispatch({ textarea: textRef.current, commandOrchestrator });
+      }
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
+    const textStyle: CSS.Properties =
+      MarkdownComponent && highlightEnable ? {} : { WebkitTextFillColor: 'initial', overflow: 'auto' };
+
+    return (
+      <div ref={warp} className={`${prefixCls}-area ${className || ''}`} onScroll={onScroll}>
+        <div className={`${prefixCls}-text`} style={useMinHeight ? { minHeight } : undefined}>
+          {renderTextarea ? (
+            React.cloneElement(
+              renderTextarea(
+                {
+                  ...otherProps,
+                  value: markdown,
+                  autoComplete: 'off',
+                  autoCorrect: 'off',
+                  spellCheck: 'false',
+                  autoCapitalize: 'off',
+                  className: `${prefixCls}-text-input`,
+                  style: {
+                    WebkitTextFillColor: 'inherit',
+                    overflow: 'auto',
+                  },
+                },
+                {
+                  dispatch,
+                  onChange: otherProps.onChange,
+                  shortcuts,
+                  useContext: { commands, extraCommands, commandOrchestrator: executeRef.current },
+                },
+              ),
+              {
+                ref: textRef,
+              },
+            )
+          ) : (
+            <Fragment>
+              {MarkdownComponent && highlightEnable && <MarkdownComponent prefixCls={prefixCls} />}
+              <Textarea prefixCls={prefixCls} {...otherProps} style={textStyle} />
+            </Fragment>
+          )}
+        </div>
+      </div>
+    );
+  };
+}

package/src/components/TextArea/index.common.tsx

@@ -0,0 +1,6 @@
+import Markdown from './Markdown.common';
+import { createTextArea } from './factory';
+
+export type { ITextAreaProps, RenderTextareaHandle, TextAreaRef } from './factory';
+
+export default createTextArea({ Markdown, useMinHeight: true });

package/src/components/TextArea/index.nohighlight.tsx

@@ -1,110 +1,5 @@
-import React, { useEffect, Fragment, useContext, JSX } from 'react';
-import type * as CSS from 'csstype';
-import { EditorContext, type ContextStore, ExecuteCommandState } from '../../Context';
-import shortcuts from './shortcuts';
-import Textarea, { TextAreaProps } from './Textarea';
-import { type IProps } from '../../Types';
-import { TextAreaCommandOrchestrator, type ICommand } from '../../commands/';
-import './index.less';
+import { createTextArea } from './factory';
 
-type RenderTextareaHandle = {
-  dispatch: ContextStore['dispatch'];
-  onChange?: TextAreaProps['onChange'];
-  useContext?: {
-    commands: ContextStore['commands'];
-    extraCommands: ContextStore['extraCommands'];
-    commandOrchestrator?: TextAreaCommandOrchestrator;
-  };
-  shortcuts?: (
-    e: KeyboardEvent | React.KeyboardEvent<HTMLTextAreaElement>,
-    commands: ICommand[],
-    commandOrchestrator?: TextAreaCommandOrchestrator,
-    dispatch?: React.Dispatch<ContextStore>,
-    state?: ExecuteCommandState,
-  ) => void;
-};
+export type { ITextAreaProps, RenderTextareaHandle, TextAreaRef } from './factory';
 
-export interface ITextAreaProps
-  extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'value' | 'onScroll'>,
-    IProps {
-  value?: string;
-  onScroll?: (e: React.UIEvent<HTMLDivElement>) => void;
-  renderTextarea?: (
-    props: React.TextareaHTMLAttributes<HTMLTextAreaElement> | React.HTMLAttributes<HTMLDivElement>,
-    opts: RenderTextareaHandle,
-  ) => JSX.Element;
-}
-
-export type TextAreaRef = {
-  text?: HTMLTextAreaElement;
-  warp?: HTMLDivElement;
-};
-
-export default function TextArea(props: ITextAreaProps) {
-  const { prefixCls, className, onScroll, renderTextarea, ...otherProps } = props || {};
-  const { markdown, scrollTop, commands, extraCommands, dispatch } = useContext(EditorContext);
-  const textRef = React.useRef<HTMLTextAreaElement>(null);
-  const executeRef = React.useRef<TextAreaCommandOrchestrator>();
-  const warp = React.createRef<HTMLDivElement>();
-  useEffect(() => {
-    const state: ContextStore = {};
-    if (warp.current) {
-      state.textareaWarp = warp.current || undefined;
-      warp.current.scrollTop = scrollTop || 0;
-    }
-    if (dispatch) {
-      dispatch({ ...state });
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  useEffect(() => {
-    if (textRef.current && dispatch) {
-      const commandOrchestrator = new TextAreaCommandOrchestrator(textRef.current);
-      executeRef.current = commandOrchestrator;
-      dispatch({ textarea: textRef.current, commandOrchestrator });
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  const textStyle: CSS.Properties = { WebkitTextFillColor: 'initial', overflow: 'auto' };
-
-  return (
-    <div ref={warp} className={`${prefixCls}-area ${className || ''}`} onScroll={onScroll}>
-      <div className={`${prefixCls}-text`}>
-        {renderTextarea ? (
-          React.cloneElement(
-            renderTextarea(
-              {
-                ...otherProps,
-                value: markdown,
-                autoComplete: 'off',
-                autoCorrect: 'off',
-                spellCheck: 'false',
-                autoCapitalize: 'off',
-                className: `${prefixCls}-text-input`,
-                style: {
-                  WebkitTextFillColor: 'inherit',
-                  overflow: 'auto',
-                },
-              },
-              {
-                dispatch,
-                onChange: otherProps.onChange,
-                shortcuts,
-                useContext: { commands, extraCommands, commandOrchestrator: executeRef.current },
-              },
-            ),
-            {
-              ref: textRef,
-            },
-          )
-        ) : (
-          <Fragment>
-            <Textarea prefixCls={prefixCls} {...otherProps} style={textStyle} />
-          </Fragment>
-        )}
-      </div>
-    </div>
-  );
-}
+export default createTextArea();

package/src/components/TextArea/index.tsx

@@ -1,113 +1,6 @@
-import React, { useEffect, Fragment, useContext, JSX } from 'react';
-import type * as CSS from 'csstype';
-import { EditorContext, type ContextStore, type ExecuteCommandState } from '../../Context';
-import shortcuts from './shortcuts';
 import Markdown from './Markdown';
-import Textarea, { type TextAreaProps } from './Textarea';
-import { type IProps } from '../../Types';
-import { TextAreaCommandOrchestrator, type ICommand } from '../../commands/';
-import './index.less';
+import { createTextArea } from './factory';
 
-type RenderTextareaHandle = {
-  dispatch: ContextStore['dispatch'];
-  onChange?: TextAreaProps['onChange'];
-  useContext?: {
-    commands: ContextStore['commands'];
-    extraCommands: ContextStore['extraCommands'];
-    commandOrchestrator?: TextAreaCommandOrchestrator;
-  };
-  shortcuts?: (
-    e: KeyboardEvent | React.KeyboardEvent<HTMLTextAreaElement>,
-    commands: ICommand[],
-    commandOrchestrator?: TextAreaCommandOrchestrator,
-    dispatch?: React.Dispatch<ContextStore>,
-    state?: ExecuteCommandState,
-  ) => void;
-};
+export type { ITextAreaProps, RenderTextareaHandle, TextAreaRef } from './factory';
 
-export interface ITextAreaProps
-  extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'value' | 'onScroll'>,
-    IProps {
-  value?: string;
-  onScroll?: (e: React.UIEvent<HTMLDivElement>) => void;
-  renderTextarea?: (
-    props: React.TextareaHTMLAttributes<HTMLTextAreaElement> | React.HTMLAttributes<HTMLDivElement>,
-    opts: RenderTextareaHandle,
-  ) => JSX.Element;
-}
-
-export type TextAreaRef = {
-  text?: HTMLTextAreaElement;
-  warp?: HTMLDivElement;
-};
-
-export default function TextArea(props: ITextAreaProps) {
-  const { prefixCls, className, onScroll, renderTextarea, ...otherProps } = props || {};
-  const { markdown, scrollTop, commands, minHeight, highlightEnable, extraCommands, dispatch } =
-    useContext(EditorContext);
-  const textRef = React.useRef<HTMLTextAreaElement>(null);
-  const executeRef = React.useRef<TextAreaCommandOrchestrator>();
-  const warp = React.createRef<HTMLDivElement>();
-  useEffect(() => {
-    const state: ContextStore = {};
-    if (warp.current) {
-      state.textareaWarp = warp.current || undefined;
-      warp.current.scrollTop = scrollTop || 0;
-    }
-    if (dispatch) {
-      dispatch({ ...state });
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  useEffect(() => {
-    if (textRef.current && dispatch) {
-      const commandOrchestrator = new TextAreaCommandOrchestrator(textRef.current);
-      executeRef.current = commandOrchestrator;
-      dispatch({ textarea: textRef.current, commandOrchestrator });
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  const textStyle: CSS.Properties = highlightEnable ? {} : { WebkitTextFillColor: 'initial', overflow: 'auto' };
-
-  return (
-    <div ref={warp} className={`${prefixCls}-area ${className || ''}`} onScroll={onScroll}>
-      <div className={`${prefixCls}-text`} style={{ minHeight }}>
-        {renderTextarea ? (
-          React.cloneElement(
-            renderTextarea(
-              {
-                ...otherProps,
-                value: markdown,
-                autoComplete: 'off',
-                autoCorrect: 'off',
-                spellCheck: 'false',
-                autoCapitalize: 'off',
-                className: `${prefixCls}-text-input`,
-                style: {
-                  WebkitTextFillColor: 'inherit',
-                  overflow: 'auto',
-                },
-              },
-              {
-                dispatch,
-                onChange: otherProps.onChange,
-                shortcuts,
-                useContext: { commands, extraCommands, commandOrchestrator: executeRef.current },
-              },
-            ),
-            {
-              ref: textRef,
-            },
-          )
-        ) : (
-          <Fragment>
-            {highlightEnable && <Markdown prefixCls={prefixCls} />}
-            <Textarea prefixCls={prefixCls} {...otherProps} style={textStyle} />
-          </Fragment>
-        )}
-      </div>
-    </div>
-  );
-}
+export default createTextArea({ Markdown, useMinHeight: true });