@uiw/react-md-editor 3.24.1 → 3.25.0

package/esm/components/TextArea/index.nohighlight.js

@@ -0,0 +1,93 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["prefixCls", "className", "onScroll", "renderTextarea"];
+import React, { useEffect, Fragment, useContext } from 'react';
+import { EditorContext } from '../../Context';
+import shortcuts from './shortcuts';
+import Textarea from './Textarea';
+import { TextAreaCommandOrchestrator } from '../../commands';
+import "./index.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function TextArea(props) {
+  var _ref = props || {},
+    {
+      prefixCls,
+      className,
+      onScroll,
+      renderTextarea
+    } = _ref,
+    otherProps = _objectWithoutPropertiesLoose(_ref, _excluded);
+  var {
+    markdown,
+    scrollTop,
+    commands,
+    extraCommands,
+    dispatch
+  } = useContext(EditorContext);
+  var textRef = React.useRef(null);
+  var executeRef = React.useRef();
+  var warp = /*#__PURE__*/React.createRef();
+  useEffect(() => {
+    var state = {};
+    if (warp.current) {
+      state.textareaWarp = warp.current || undefined;
+      warp.current.scrollTop = scrollTop || 0;
+    }
+    if (dispatch) {
+      dispatch(_extends({}, state));
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  useEffect(() => {
+    if (textRef.current && dispatch) {
+      var _commandOrchestrator = new TextAreaCommandOrchestrator(textRef.current);
+      executeRef.current = _commandOrchestrator;
+      dispatch({
+        textarea: textRef.current,
+        commandOrchestrator: _commandOrchestrator
+      });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  var textStyle = {
+    WebkitTextFillColor: 'initial',
+    overflow: 'auto'
+  };
+  return /*#__PURE__*/_jsx("div", {
+    ref: warp,
+    className: prefixCls + "-area " + (className || ''),
+    onScroll: onScroll,
+    children: /*#__PURE__*/_jsx("div", {
+      className: prefixCls + "-text",
+      children: renderTextarea ? /*#__PURE__*/React.cloneElement(renderTextarea(_extends({}, 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
+      }) : /*#__PURE__*/_jsx(Fragment, {
+        children: /*#__PURE__*/_jsx(Textarea, _extends({
+          prefixCls: prefixCls
+        }, otherProps, {
+          style: textStyle
+        }))
+      })
+    })
+  });
+}

package/esm/components/Toolbar/Child.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import './Child.less';
-import { IToolbarProps } from './';
+import { type IToolbarProps } from './';
 export type ChildProps = IToolbarProps & {
     children?: JSX.Element;
     groupName?: string;

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

@@ -1,4 +1,4 @@
-import { IProps } from '../../Editor';
+import { IProps } from '../../Types';
 import { ICommand } from '../../commands';
 import './index.less';
 export interface IToolbarProps extends IProps {

package/esm/index.d.ts

@@ -1,11 +1,13 @@
 import MDEditor from './Editor';
 import * as commands from './commands';
 import * as MarkdownUtil from './utils/markdownUtils';
+import './index.less';
 export * from './commands';
 export * from './commands/group';
 export * from './utils/markdownUtils';
 export * from './utils/InsertTextAtPosition';
 export * from './Editor';
 export * from './Context';
+export * from './Types';
 export { MarkdownUtil, commands };
 export default MDEditor;

package/esm/index.js

@@ -1,11 +1,13 @@
 import MDEditor from './Editor';
 import * as commands from './commands';
 import * as MarkdownUtil from './utils/markdownUtils';
+import "./index.css";
 export * from './commands';
 export * from './commands/group';
 export * from './utils/markdownUtils';
 export * from './utils/InsertTextAtPosition';
 export * from './Editor';
 export * from './Context';
+export * from './Types';
 export { MarkdownUtil, commands };
 export default MDEditor;

package/esm/index.nohighlight.d.ts

@@ -0,0 +1,13 @@
+import MDEditor from './Editor.nohighlight';
+import * as commands from './commands';
+import * as MarkdownUtil from './utils/markdownUtils';
+import './index.less';
+export * from './commands';
+export * from './commands/group';
+export * from './utils/markdownUtils';
+export * from './utils/InsertTextAtPosition';
+export * from './Editor.nohighlight';
+export * from './Context';
+export * from './Types';
+export { MarkdownUtil, commands };
+export default MDEditor;

package/esm/index.nohighlight.js

@@ -0,0 +1,13 @@
+import MDEditor from './Editor.nohighlight';
+import * as commands from './commands';
+import * as MarkdownUtil from './utils/markdownUtils';
+import "./index.css";
+export * from './commands';
+export * from './commands/group';
+export * from './utils/markdownUtils';
+export * from './utils/InsertTextAtPosition';
+export * from './Editor.nohighlight';
+export * from './Context';
+export * from './Types';
+export { MarkdownUtil, commands };
+export default MDEditor;

package/lib/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/lib/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/lib/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/lib/Editor.nohighlight.js

@@ -0,0 +1,317 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireWildcard(require("react"));
+var _nohighlight = _interopRequireDefault(require("@uiw/react-markdown-preview/nohighlight"));
+var _index = _interopRequireDefault(require("./components/TextArea/index.nohighlight"));
+var _Toolbar = _interopRequireDefault(require("./components/Toolbar"));
+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", "direction", "extraCommands", "height", "enableScroll", "visibleDragbar", "highlightEnable", "preview", "fullscreen", "overflow", "previewOptions", "textareaProps", "maxHeight", "minHeight", "autoFocus", "tabSize", "defaultTabEnable", "onChange", "onStatistics", "onHeightChange", "hideToolbar", "toolbarBottom", "components", "renderTextarea"];
+function setGroupPopFalse() {
+  var data = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  Object.keys(data).forEach(function (keyname) {
+    data[keyname] = false;
+  });
+  return data;
+}
+var InternalMDEditor = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
+  var _ref = props || {},
+    _ref$prefixCls = _ref.prefixCls,
+    prefixCls = _ref$prefixCls === void 0 ? 'w-md-editor' : _ref$prefixCls,
+    className = _ref.className,
+    propsValue = _ref.value,
+    _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,
+    height = _ref$height === void 0 ? 200 : _ref$height,
+    _ref$enableScroll = _ref.enableScroll,
+    enableScroll = _ref$enableScroll === void 0 ? true : _ref$enableScroll,
+    _ref$visibleDragbar = _ref.visibleDragbar,
+    visibleDragbar = _ref$visibleDragbar === void 0 ? typeof props.visiableDragbar === 'boolean' ? props.visiableDragbar : true : _ref$visibleDragbar,
+    _ref$highlightEnable = _ref.highlightEnable,
+    highlightEnable = _ref$highlightEnable === void 0 ? true : _ref$highlightEnable,
+    _ref$preview = _ref.preview,
+    previewType = _ref$preview === void 0 ? 'live' : _ref$preview,
+    _ref$fullscreen = _ref.fullscreen,
+    fullscreen = _ref$fullscreen === void 0 ? false : _ref$fullscreen,
+    _ref$overflow = _ref.overflow,
+    overflow = _ref$overflow === void 0 ? true : _ref$overflow,
+    _ref$previewOptions = _ref.previewOptions,
+    previewOptions = _ref$previewOptions === void 0 ? {} : _ref$previewOptions,
+    textareaProps = _ref.textareaProps,
+    _ref$maxHeight = _ref.maxHeight,
+    maxHeight = _ref$maxHeight === void 0 ? 1200 : _ref$maxHeight,
+    _ref$minHeight = _ref.minHeight,
+    minHeight = _ref$minHeight === void 0 ? 100 : _ref$minHeight,
+    autoFocus = _ref.autoFocus,
+    _ref$tabSize = _ref.tabSize,
+    tabSize = _ref$tabSize === void 0 ? 2 : _ref$tabSize,
+    _ref$defaultTabEnable = _ref.defaultTabEnable,
+    defaultTabEnable = _ref$defaultTabEnable === void 0 ? false : _ref$defaultTabEnable,
+    onChange = _ref.onChange,
+    onStatistics = _ref.onStatistics,
+    onHeightChange = _ref.onHeightChange,
+    hideToolbar = _ref.hideToolbar,
+    _ref$toolbarBottom = _ref.toolbarBottom,
+    toolbarBottom = _ref$toolbarBottom === void 0 ? false : _ref$toolbarBottom,
+    components = _ref.components,
+    renderTextarea = _ref.renderTextarea,
+    other = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  var cmds = commands.map(function (item) {
+    return commandsFilter ? commandsFilter(item, false) : item;
+  }).filter(Boolean);
+  var extraCmds = extraCommands.map(function (item) {
+    return commandsFilter ? commandsFilter(item, true) : item;
+  }).filter(Boolean);
+  var _useReducer = (0, _react.useReducer)(_Context.reducer, {
+      markdown: propsValue,
+      preview: previewType,
+      components: components,
+      height: height,
+      highlightEnable: highlightEnable,
+      tabSize: tabSize,
+      defaultTabEnable: defaultTabEnable,
+      scrollTop: 0,
+      scrollTopPreview: 0,
+      commands: cmds,
+      extraCommands: extraCmds,
+      fullscreen: fullscreen,
+      barPopup: {}
+    }),
+    _useReducer2 = (0, _slicedToArray2["default"])(_useReducer, 2),
+    state = _useReducer2[0],
+    dispatch = _useReducer2[1];
+  var container = (0, _react.useRef)(null);
+  var previewRef = (0, _react.useRef)(null);
+  var enableScrollRef = (0, _react.useRef)(enableScroll);
+  (0, _react.useImperativeHandle)(ref, function () {
+    return (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, state), {}, {
+      container: container.current,
+      dispatch: dispatch
+    });
+  });
+  (0, _react.useMemo)(function () {
+    return enableScrollRef.current = enableScroll;
+  }, [enableScroll]);
+  (0, _react.useEffect)(function () {
+    var stateInit = {};
+    if (container.current) {
+      stateInit.container = container.current || undefined;
+    }
+    stateInit.markdown = propsValue || '';
+    stateInit.barPopup = {};
+    if (dispatch) {
+      dispatch((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, state), stateInit));
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  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 || ''
+    });
+  }, [propsValue, state.markdown]);
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  (0, _react.useMemo)(function () {
+    return previewType !== state.preview && dispatch({
+      preview: previewType
+    });
+  }, [previewType]);
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  (0, _react.useMemo)(function () {
+    return tabSize !== state.tabSize && dispatch({
+      tabSize: tabSize
+    });
+  }, [tabSize]);
+  (0, _react.useMemo)(function () {
+    return highlightEnable !== state.highlightEnable && dispatch({
+      highlightEnable: highlightEnable
+    });
+  },
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  [highlightEnable]);
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  (0, _react.useMemo)(function () {
+    return autoFocus !== state.autoFocus && dispatch({
+      autoFocus: autoFocus
+    });
+  }, [autoFocus]);
+  (0, _react.useMemo)(function () {
+    return fullscreen !== state.fullscreen && dispatch({
+      fullscreen: fullscreen
+    });
+  },
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  [fullscreen]);
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  (0, _react.useMemo)(function () {
+    return height !== state.height && dispatch({
+      height: height
+    });
+  }, [height]);
+  (0, _react.useMemo)(function () {
+    return height !== state.height && onHeightChange && onHeightChange(state.height, height, state);
+  }, [height, onHeightChange, state]);
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  (0, _react.useMemo)(function () {
+    return commands !== state.commands && dispatch({
+      commands: cmds
+    });
+  }, [props.commands]);
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  (0, _react.useMemo)(function () {
+    return extraCommands !== state.extraCommands && dispatch({
+      extraCommands: extraCmds
+    });
+  }, [props.extraCommands]);
+  var textareaDomRef = (0, _react.useRef)();
+  var active = (0, _react.useRef)('preview');
+  var initScroll = (0, _react.useRef)(false);
+  (0, _react.useMemo)(function () {
+    textareaDomRef.current = state.textareaWarp;
+    if (state.textareaWarp) {
+      state.textareaWarp.addEventListener('mouseover', function () {
+        active.current = 'text';
+      });
+      state.textareaWarp.addEventListener('mouseleave', function () {
+        active.current = 'preview';
+      });
+    }
+  }, [state.textareaWarp]);
+  var handleScroll = function 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: scrollTop
+      });
+    }
+  };
+  var previewClassName = "".concat(prefixCls, "-preview ").concat(previewOptions.className || '');
+  var handlePreviewScroll = function handlePreviewScroll(e) {
+    return handleScroll(e, 'preview');
+  };
+  var mdPreview = (0, _react.useMemo)(function () {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      ref: previewRef,
+      className: previewClassName,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_nohighlight["default"], (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, previewOptions), {}, {
+        onScroll: handlePreviewScroll,
+        source: state.markdown || ''
+      }))
+    });
+  }, [previewClassName, previewOptions, state.markdown]);
+  var preview = (components === null || components === void 0 ? void 0 : components.preview) && (components === null || components === void 0 ? void 0 : components.preview(state.markdown || '', state, dispatch));
+  if (preview && /*#__PURE__*/_react["default"].isValidElement(preview)) {
+    mdPreview = /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: previewClassName,
+      ref: previewRef,
+      onScroll: handlePreviewScroll,
+      children: preview
+    });
+  }
+  var containerStyle = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, other.style), {}, {
+    height: state.height || '100%'
+  });
+  var containerClick = function containerClick() {
+    return dispatch({
+      barPopup: (0, _objectSpread2["default"])({}, setGroupPopFalse(state.barPopup))
+    });
+  };
+  var dragBarChange = function dragBarChange(newHeight) {
+    return dispatch({
+      height: newHeight
+    });
+  };
+  var changeHandle = function 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 _commands.TextAreaCommandOrchestrator(state.textarea);
+      var objState = obj.getState() || {};
+      onStatistics((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, objState), {}, {
+        lineCount: evn.target.value.split('\n').length,
+        length: evn.target.value.length
+      }));
+    }
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Context.EditorContext.Provider, {
+    value: (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, state), {}, {
+      dispatch: dispatch
+    }),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
+      ref: container,
+      className: cls
+    }, other), {}, {
+      onClick: containerClick,
+      style: containerStyle,
+      children: [!hideToolbar && !toolbarBottom && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Toolbar["default"], {
+        prefixCls: prefixCls,
+        overflow: overflow,
+        toolbarBottom: toolbarBottom
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "".concat(prefixCls, "-content"),
+        children: [/(edit|live)/.test(state.preview || '') && /*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
+          className: "".concat(prefixCls, "-input"),
+          prefixCls: prefixCls,
+          autoFocus: autoFocus
+        }, textareaProps), {}, {
+          onChange: changeHandle,
+          renderTextarea: (components === null || components === void 0 ? void 0 : components.textarea) || renderTextarea,
+          onScroll: function onScroll(e) {
+            return handleScroll(e, 'text');
+          }
+        })), /(live|preview)/.test(state.preview || '') && mdPreview]
+      }), visibleDragbar && !state.fullscreen && /*#__PURE__*/(0, _jsxRuntime.jsx)(_DragBar["default"], {
+        prefixCls: prefixCls,
+        height: state.height,
+        maxHeight: maxHeight,
+        minHeight: minHeight,
+        onChange: dragBarChange
+      }), !hideToolbar && toolbarBottom && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Toolbar["default"], {
+        prefixCls: prefixCls,
+        overflow: overflow,
+        toolbarBottom: toolbarBottom
+      })]
+    }))
+  });
+});
+var Editor = InternalMDEditor;
+Editor.Markdown = _nohighlight["default"];
+var _default = exports["default"] = Editor;
+module.exports = exports.default;