@uiw/react-md-editor 3.24.1 → 3.25.0

package/esm/Context.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ICommand, TextAreaCommandOrchestrator } from './commands';
-import { MDEditorProps } from './Editor';
+import { MDEditorProps } from './Types';
 export type PreviewType = 'live' | 'edit' | 'preview';
 export interface ContextStore {
     components?: MDEditorProps['components'];

package/esm/Editor.d.ts

@@ -1,152 +1,7 @@
-import React, { CSSProperties } from 'react';
-import MarkdownPreview, { MarkdownPreviewProps } from '@uiw/react-markdown-preview';
-import { ITextAreaProps } from './components/TextArea';
-import { ICommand, TextState } from './commands';
-import { ContextStore, PreviewType } from './Context';
-import './index.less';
-export interface IProps {
-    prefixCls?: string;
-    className?: string;
-}
-export interface Statistics extends TextState {
-    /** total length of the document */
-    length: number;
-    /** Get the number of lines in the editor. */
-    lineCount: number;
-}
-export interface MDEditorProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'>, IProps {
-    /**
-     * The Markdown value.
-     */
-    value?: string;
-    /**
-     * Event handler for the `onChange` event.
-     */
-    onChange?: (value?: string, event?: React.ChangeEvent<HTMLTextAreaElement>, state?: ContextStore) => void;
-    /**
-     * editor height change listener
-     */
-    onHeightChange?: (value?: CSSProperties['height'], oldValue?: CSSProperties['height'], state?: ContextStore) => void;
-    /** Some data on the statistics editor. */
-    onStatistics?: (data: Statistics) => void;
-    /**
-     * Can be used to make `Markdown Editor` focus itself on initialization. Defaults to on.
-     * it will be set to true when either the source `textarea` is focused,
-     * or it has an `autofocus` attribute and no other element is focused.
-     */
-    autoFocus?: ITextAreaProps['autoFocus'];
-    /**
-     * The height of the editor.
-     * ⚠️ `Dragbar` is invalid when **`height`** parameter percentage.
-     */
-    height?: CSSProperties['height'];
-    /**
-     * Custom toolbar heigth
-     * @default 29px
-     *
-     * @deprecated toolbar height adaptive: https://github.com/uiwjs/react-md-editor/issues/427
-     *
-     */
-    toolbarHeight?: number;
-    /**
-     * Show drag and drop tool. Set the height of the editor.
-     */
-    visibleDragbar?: boolean;
-    /**
-     * @deprecated use `visibleDragbar`
-     */
-    visiableDragbar?: boolean;
-    /**
-     * Show markdown preview.
-     */
-    preview?: PreviewType;
-    /**
-     * Full screen display editor.
-     */
-    fullscreen?: boolean;
-    /**
-     * Disable `fullscreen` setting body styles
-     */
-    overflow?: boolean;
-    /**
-     * Maximum drag height. `visibleDragbar=true`
-     */
-    maxHeight?: number;
-    /**
-     * Minimum drag height. `visibleDragbar=true`
-     */
-    minHeight?: number;
-    /**
-     * This is reset [react-markdown](https://github.com/rexxars/react-markdown) settings.
-     */
-    previewOptions?: Omit<MarkdownPreviewProps, 'source'>;
-    /**
-     * Set the `textarea` related props.
-     */
-    textareaProps?: ITextAreaProps;
-    /**
-     * Use div to replace TextArea or re-render TextArea
-     * @deprecated Please use ~~`renderTextarea`~~ -> `components`
-     */
-    renderTextarea?: ITextAreaProps['renderTextarea'];
-    /**
-     * re-render element
-     */
-    components?: {
-        /** Use div to replace TextArea or re-render TextArea */
-        textarea?: ITextAreaProps['renderTextarea'];
-        /**
-         * Override the default command element
-         * _`toolbar`_ < _`command[].render`_
-         */
-        toolbar?: ICommand['render'];
-        /** Custom markdown preview */
-        preview?: (source: string, state: ContextStore, dispath: React.Dispatch<ContextStore>) => JSX.Element;
-    };
-    /** Theme configuration */
-    'data-color-mode'?: 'light' | 'dark';
-    /**
-     * Disable editing area code highlighting. The value is `false`, which increases the editing speed.
-     * @default true
-     */
-    highlightEnable?: boolean;
-    /**
-     * The number of characters to insert when pressing tab key.
-     * Default `2` spaces.
-     */
-    tabSize?: number;
-    /**
-     * 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.
-     */
-    defaultTabEnable?: boolean;
-    /**
-     * You can create your own commands or reuse existing commands.
-     */
-    commands?: ICommand[];
-    /**
-     * Filter or modify your commands.
-     * https://github.com/uiwjs/react-md-editor/issues/296
-     */
-    commandsFilter?: (command: ICommand, isExtra: boolean) => false | ICommand;
-    /**
-     * You can create your own commands or reuse existing commands.
-     */
-    extraCommands?: ICommand[];
-    /**
-     * Hide the tool bar
-     */
-    hideToolbar?: boolean;
-    /** Whether to enable scrolling */
-    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'];
-}
+import React from 'react';
+import MarkdownPreview from '@uiw/react-markdown-preview';
+import { ContextStore } from './Context';
+import type { MDEditorProps } from './Types';
 export interface RefMDEditor extends ContextStore {
 }
 declare const InternalMDEditor: React.ForwardRefExoticComponent<MDEditorProps & React.RefAttributes<RefMDEditor>>;

package/esm/Editor.js

@@ -8,7 +8,6 @@ import Toolbar from './components/Toolbar';
 import DragBar from './components/DragBar';
 import { getCommands, getExtraCommands, TextAreaCommandOrchestrator } from './commands';
 import { reducer, EditorContext } from './Context';
-import "./index.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 function setGroupPopFalse(data) {

package/esm/Editor.nohighlight.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import MarkdownPreview from '@uiw/react-markdown-preview/nohighlight';
+import { ContextStore } from './Context';
+import type { MDEditorProps } from './Types';
+export interface RefMDEditor extends ContextStore {
+}
+declare const InternalMDEditor: React.ForwardRefExoticComponent<MDEditorProps & React.RefAttributes<RefMDEditor>>;
+type EditorComponent = typeof InternalMDEditor & {
+    Markdown: typeof MarkdownPreview;
+};
+declare const Editor: EditorComponent;
+export default Editor;

package/esm/Editor.nohighlight.js

@@ -0,0 +1,255 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["prefixCls", "className", "value", "commands", "commandsFilter", "direction", "extraCommands", "height", "enableScroll", "visibleDragbar", "highlightEnable", "preview", "fullscreen", "overflow", "previewOptions", "textareaProps", "maxHeight", "minHeight", "autoFocus", "tabSize", "defaultTabEnable", "onChange", "onStatistics", "onHeightChange", "hideToolbar", "toolbarBottom", "components", "renderTextarea"];
+import React, { useEffect, useReducer, useMemo, useRef, useImperativeHandle } from 'react';
+import MarkdownPreview from '@uiw/react-markdown-preview/nohighlight';
+import TextArea from './components/TextArea/index.nohighlight';
+import Toolbar from './components/Toolbar';
+import DragBar from './components/DragBar';
+import { getCommands, getExtraCommands, TextAreaCommandOrchestrator } from './commands';
+import { reducer, EditorContext } from './Context';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+function setGroupPopFalse(data) {
+  if (data === void 0) {
+    data = {};
+  }
+  Object.keys(data).forEach(keyname => {
+    data[keyname] = false;
+  });
+  return data;
+}
+var InternalMDEditor = /*#__PURE__*/React.forwardRef((props, ref) => {
+  var _ref = props || {},
+    {
+      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,
+      tabSize = 2,
+      defaultTabEnable = false,
+      onChange,
+      onStatistics,
+      onHeightChange,
+      hideToolbar,
+      toolbarBottom = false,
+      components,
+      renderTextarea
+    } = _ref,
+    other = _objectWithoutPropertiesLoose(_ref, _excluded);
+  var cmds = commands.map(item => commandsFilter ? commandsFilter(item, false) : item).filter(Boolean);
+  var extraCmds = extraCommands.map(item => commandsFilter ? commandsFilter(item, true) : item).filter(Boolean);
+  var [state, dispatch] = useReducer(reducer, {
+    markdown: propsValue,
+    preview: previewType,
+    components,
+    height,
+    highlightEnable,
+    tabSize,
+    defaultTabEnable,
+    scrollTop: 0,
+    scrollTopPreview: 0,
+    commands: cmds,
+    extraCommands: extraCmds,
+    fullscreen,
+    barPopup: {}
+  });
+  var container = useRef(null);
+  var previewRef = useRef(null);
+  var enableScrollRef = useRef(enableScroll);
+  useImperativeHandle(ref, () => _extends({}, state, {
+    container: container.current,
+    dispatch
+  }));
+  useMemo(() => enableScrollRef.current = enableScroll, [enableScroll]);
+  useEffect(() => {
+    var stateInit = {};
+    if (container.current) {
+      stateInit.container = container.current || undefined;
+    }
+    stateInit.markdown = propsValue || '';
+    stateInit.barPopup = {};
+    if (dispatch) {
+      dispatch(_extends({}, state, stateInit));
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  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]);
+  // 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(() => 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]);
+  var textareaDomRef = useRef();
+  var active = useRef('preview');
+  var 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]);
+  var handleScroll = (e, type) => {
+    if (!enableScrollRef.current) return;
+    var textareaDom = textareaDomRef.current;
+    var previewDom = previewRef.current ? previewRef.current : undefined;
+    if (!initScroll.current) {
+      active.current = type;
+      initScroll.current = true;
+    }
+    if (textareaDom && previewDom) {
+      var 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;
+      }
+      var scrollTop = 0;
+      if (active.current === 'text') {
+        scrollTop = textareaDom.scrollTop || 0;
+      } else if (active.current === 'preview') {
+        scrollTop = previewDom.scrollTop || 0;
+      }
+      dispatch({
+        scrollTop
+      });
+    }
+  };
+  var previewClassName = prefixCls + "-preview " + (previewOptions.className || '');
+  var handlePreviewScroll = e => handleScroll(e, 'preview');
+  var mdPreview = useMemo(() => /*#__PURE__*/_jsx("div", {
+    ref: previewRef,
+    className: previewClassName,
+    children: /*#__PURE__*/_jsx(MarkdownPreview, _extends({}, previewOptions, {
+      onScroll: handlePreviewScroll,
+      source: state.markdown || ''
+    }))
+  }), [previewClassName, previewOptions, state.markdown]);
+  var preview = (components == null ? void 0 : components.preview) && (components == null ? void 0 : components.preview(state.markdown || '', state, dispatch));
+  if (preview && /*#__PURE__*/React.isValidElement(preview)) {
+    mdPreview = /*#__PURE__*/_jsx("div", {
+      className: previewClassName,
+      ref: previewRef,
+      onScroll: handlePreviewScroll,
+      children: preview
+    });
+  }
+  var containerStyle = _extends({}, other.style, {
+    height: state.height || '100%'
+  });
+  var containerClick = () => dispatch({
+    barPopup: _extends({}, setGroupPopFalse(state.barPopup))
+  });
+  var dragBarChange = newHeight => dispatch({
+    height: newHeight
+  });
+  var changeHandle = evn => {
+    onChange && onChange(evn.target.value, evn, state);
+    if (textareaProps && textareaProps.onChange) {
+      textareaProps.onChange(evn);
+    }
+    if (state.textarea && state.textarea instanceof HTMLTextAreaElement && onStatistics) {
+      var obj = new TextAreaCommandOrchestrator(state.textarea);
+      var objState = obj.getState() || {};
+      onStatistics(_extends({}, objState, {
+        lineCount: evn.target.value.split('\n').length,
+        length: evn.target.value.length
+      }));
+    }
+  };
+  return /*#__PURE__*/_jsx(EditorContext.Provider, {
+    value: _extends({}, state, {
+      dispatch
+    }),
+    children: /*#__PURE__*/_jsxs("div", _extends({
+      ref: container,
+      className: cls
+    }, other, {
+      onClick: containerClick,
+      style: containerStyle,
+      children: [!hideToolbar && !toolbarBottom && /*#__PURE__*/_jsx(Toolbar, {
+        prefixCls: prefixCls,
+        overflow: overflow,
+        toolbarBottom: toolbarBottom
+      }), /*#__PURE__*/_jsxs("div", {
+        className: prefixCls + "-content",
+        children: [/(edit|live)/.test(state.preview || '') && /*#__PURE__*/_jsx(TextArea, _extends({
+          className: prefixCls + "-input",
+          prefixCls: prefixCls,
+          autoFocus: autoFocus
+        }, textareaProps, {
+          onChange: changeHandle,
+          renderTextarea: (components == null ? void 0 : components.textarea) || renderTextarea,
+          onScroll: e => handleScroll(e, 'text')
+        })), /(live|preview)/.test(state.preview || '') && mdPreview]
+      }), visibleDragbar && !state.fullscreen && /*#__PURE__*/_jsx(DragBar, {
+        prefixCls: prefixCls,
+        height: state.height,
+        maxHeight: maxHeight,
+        minHeight: minHeight,
+        onChange: dragBarChange
+      }), !hideToolbar && toolbarBottom && /*#__PURE__*/_jsx(Toolbar, {
+        prefixCls: prefixCls,
+        overflow: overflow,
+        toolbarBottom: toolbarBottom
+      })]
+    }))
+  });
+});
+var Editor = InternalMDEditor;
+Editor.Markdown = MarkdownPreview;
+export default Editor;

package/esm/Types.d.ts

@@ -0,0 +1,148 @@
+import type { CSSProperties } from 'react';
+import type { MarkdownPreviewProps } from '@uiw/react-markdown-preview/nohighlight';
+import type { ITextAreaProps } from './components/TextArea/index.nohighlight';
+import type { ICommand, TextState } from './commands';
+import type { ContextStore, PreviewType } from './Context';
+export interface IProps {
+    prefixCls?: string;
+    className?: string;
+}
+export interface Statistics extends TextState {
+    /** total length of the document */
+    length: number;
+    /** Get the number of lines in the editor. */
+    lineCount: number;
+}
+export interface MDEditorProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'>, IProps {
+    /**
+     * The Markdown value.
+     */
+    value?: string;
+    /**
+     * Event handler for the `onChange` event.
+     */
+    onChange?: (value?: string, event?: React.ChangeEvent<HTMLTextAreaElement>, state?: ContextStore) => void;
+    /**
+     * editor height change listener
+     */
+    onHeightChange?: (value?: CSSProperties['height'], oldValue?: CSSProperties['height'], state?: ContextStore) => void;
+    /** Some data on the statistics editor. */
+    onStatistics?: (data: Statistics) => void;
+    /**
+     * Can be used to make `Markdown Editor` focus itself on initialization. Defaults to on.
+     * it will be set to true when either the source `textarea` is focused,
+     * or it has an `autofocus` attribute and no other element is focused.
+     */
+    autoFocus?: ITextAreaProps['autoFocus'];
+    /**
+     * The height of the editor.
+     * ⚠️ `Dragbar` is invalid when **`height`** parameter percentage.
+     */
+    height?: CSSProperties['height'];
+    /**
+     * Custom toolbar heigth
+     * @default 29px
+     *
+     * @deprecated toolbar height adaptive: https://github.com/uiwjs/react-md-editor/issues/427
+     *
+     */
+    toolbarHeight?: number;
+    /**
+     * Show drag and drop tool. Set the height of the editor.
+     */
+    visibleDragbar?: boolean;
+    /**
+     * @deprecated use `visibleDragbar`
+     */
+    visiableDragbar?: boolean;
+    /**
+     * Show markdown preview.
+     */
+    preview?: PreviewType;
+    /**
+     * Full screen display editor.
+     */
+    fullscreen?: boolean;
+    /**
+     * Disable `fullscreen` setting body styles
+     */
+    overflow?: boolean;
+    /**
+     * Maximum drag height. `visibleDragbar=true`
+     */
+    maxHeight?: number;
+    /**
+     * Minimum drag height. `visibleDragbar=true`
+     */
+    minHeight?: number;
+    /**
+     * This is reset [react-markdown](https://github.com/rexxars/react-markdown) settings.
+     */
+    previewOptions?: Omit<MarkdownPreviewProps, 'source'>;
+    /**
+     * Set the `textarea` related props.
+     */
+    textareaProps?: ITextAreaProps;
+    /**
+     * Use div to replace TextArea or re-render TextArea
+     * @deprecated Please use ~~`renderTextarea`~~ -> `components`
+     */
+    renderTextarea?: ITextAreaProps['renderTextarea'];
+    /**
+     * re-render element
+     */
+    components?: {
+        /** Use div to replace TextArea or re-render TextArea */
+        textarea?: ITextAreaProps['renderTextarea'];
+        /**
+         * Override the default command element
+         * _`toolbar`_ < _`command[].render`_
+         */
+        toolbar?: ICommand['render'];
+        /** Custom markdown preview */
+        preview?: (source: string, state: ContextStore, dispath: React.Dispatch<ContextStore>) => JSX.Element;
+    };
+    /** Theme configuration */
+    'data-color-mode'?: 'light' | 'dark';
+    /**
+     * Disable editing area code highlighting. The value is `false`, which increases the editing speed.
+     * @default true
+     */
+    highlightEnable?: boolean;
+    /**
+     * The number of characters to insert when pressing tab key.
+     * Default `2` spaces.
+     */
+    tabSize?: number;
+    /**
+     * 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.
+     */
+    defaultTabEnable?: boolean;
+    /**
+     * You can create your own commands or reuse existing commands.
+     */
+    commands?: ICommand[];
+    /**
+     * Filter or modify your commands.
+     * https://github.com/uiwjs/react-md-editor/issues/296
+     */
+    commandsFilter?: (command: ICommand, isExtra: boolean) => false | ICommand;
+    /**
+     * You can create your own commands or reuse existing commands.
+     */
+    extraCommands?: ICommand[];
+    /**
+     * Hide the tool bar
+     */
+    hideToolbar?: boolean;
+    /** Whether to enable scrolling */
+    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'];
+}

package/esm/Types.js

@@ -0,0 +1 @@
+export {};

package/esm/components/DragBar/index.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { IProps } from '../../Editor';
+import { IProps } from '../../Types';
 import './index.less';
 export interface IDragBarProps extends IProps {
     height: number;

package/esm/components/TextArea/Markdown.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { IProps } from '../../Editor';
+import { IProps } from '../../Types';
 export interface MarkdownProps extends IProps, React.HTMLAttributes<HTMLPreElement> {
 }
 export default function Markdown(props: MarkdownProps): import("react/jsx-runtime").JSX.Element;

package/esm/components/TextArea/Textarea.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { IProps } from '../../Editor';
+import { IProps } from '../../Types';
 import './index.less';
 export interface TextAreaProps extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'value'>, IProps {
 }

package/esm/components/TextArea/index.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { ContextStore, ExecuteCommandState } from '../../Context';
 import { TextAreaProps } from './Textarea';
-import { IProps } from '../../Editor';
+import { IProps } from '../../Types';
 import { TextAreaCommandOrchestrator, ICommand } from '../../commands';
 import './index.less';
 type RenderTextareaHandle = {

package/esm/components/TextArea/index.nohighlight.d.ts

@@ -0,0 +1,27 @@
+import React from 'react';
+import { ContextStore, ExecuteCommandState } from '../../Context';
+import { TextAreaProps } from './Textarea';
+import { IProps } from '../../Types';
+import { TextAreaCommandOrchestrator, ICommand } from '../../commands';
+import './index.less';
+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;
+};
+export default function TextArea(props: ITextAreaProps): import("react/jsx-runtime").JSX.Element;
+export {};