@uiw/react-md-editor 3.25.1 → 3.25.3

package/esm/Editor.js

@@ -1,10 +1,10 @@
 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 React, { useEffect, useReducer, useMemo, useRef, useImperativeHandle, Fragment } from 'react';
 import MarkdownPreview from '@uiw/react-markdown-preview';
 import TextArea from './components/TextArea';
-import Toolbar from './components/Toolbar';
+import { ToolbarVisibility } from './components/Toolbar';
 import DragBar from './components/DragBar';
 import { getCommands, getExtraCommands, TextAreaCommandOrchestrator } from './commands';
 import { reducer, EditorContext } from './Context';
@@ -59,6 +59,7 @@ var InternalMDEditor = /*#__PURE__*/React.forwardRef((props, ref) => {
     preview: previewType,
     components,
     height,
+    minHeight,
     highlightEnable,
     tabSize,
     defaultTabEnable,
@@ -211,6 +212,17 @@ var InternalMDEditor = /*#__PURE__*/React.forwardRef((props, ref) => {
       }));
     }
   };
+  var contentView = /(live|preview)/.test(state.preview || '') && /*#__PURE__*/_jsxs(Fragment, {
+    children: [/*#__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')
+    })), mdPreview]
+  });
   return /*#__PURE__*/_jsx(EditorContext.Provider, {
     value: _extends({}, state, {
       dispatch
@@ -221,31 +233,27 @@ var InternalMDEditor = /*#__PURE__*/React.forwardRef((props, ref) => {
     }, other, {
       onClick: containerClick,
       style: containerStyle,
-      children: [!hideToolbar && !toolbarBottom && /*#__PURE__*/_jsx(Toolbar, {
+      children: [/*#__PURE__*/_jsx(ToolbarVisibility, {
+        hideToolbar: hideToolbar,
+        toolbarBottom: toolbarBottom,
         prefixCls: prefixCls,
         overflow: overflow,
-        toolbarBottom: toolbarBottom
-      }), /*#__PURE__*/_jsxs("div", {
+        placement: "top"
+      }), /*#__PURE__*/_jsx("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]
+        children: contentView
       }), visibleDragbar && !state.fullscreen && /*#__PURE__*/_jsx(DragBar, {
         prefixCls: prefixCls,
         height: state.height,
         maxHeight: maxHeight,
         minHeight: minHeight,
         onChange: dragBarChange
-      }), !hideToolbar && toolbarBottom && /*#__PURE__*/_jsx(Toolbar, {
+      }), /*#__PURE__*/_jsx(ToolbarVisibility, {
+        hideToolbar: hideToolbar,
+        toolbarBottom: toolbarBottom,
         prefixCls: prefixCls,
         overflow: overflow,
-        toolbarBottom: toolbarBottom
+        placement: "bottom"
       })]
     }))
   });

package/esm/Editor.nohighlight.js

@@ -4,7 +4,7 @@ var _excluded = ["prefixCls", "className", "value", "commands", "commandsFilter"
 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 { ToolbarVisibility } from './components/Toolbar';
 import DragBar from './components/DragBar';
 import { getCommands, getExtraCommands, TextAreaCommandOrchestrator } from './commands';
 import { reducer, EditorContext } from './Context';
@@ -59,6 +59,7 @@ var InternalMDEditor = /*#__PURE__*/React.forwardRef((props, ref) => {
     preview: previewType,
     components,
     height,
+    minHeight,
     highlightEnable,
     tabSize,
     defaultTabEnable,
@@ -221,10 +222,12 @@ var InternalMDEditor = /*#__PURE__*/React.forwardRef((props, ref) => {
     }, other, {
       onClick: containerClick,
       style: containerStyle,
-      children: [!hideToolbar && !toolbarBottom && /*#__PURE__*/_jsx(Toolbar, {
+      children: [/*#__PURE__*/_jsx(ToolbarVisibility, {
+        hideToolbar: hideToolbar,
+        toolbarBottom: toolbarBottom,
         prefixCls: prefixCls,
         overflow: overflow,
-        toolbarBottom: toolbarBottom
+        placement: "top"
       }), /*#__PURE__*/_jsxs("div", {
         className: prefixCls + "-content",
         children: [/(edit|live)/.test(state.preview || '') && /*#__PURE__*/_jsx(TextArea, _extends({
@@ -242,10 +245,12 @@ var InternalMDEditor = /*#__PURE__*/React.forwardRef((props, ref) => {
         maxHeight: maxHeight,
         minHeight: minHeight,
         onChange: dragBarChange
-      }), !hideToolbar && toolbarBottom && /*#__PURE__*/_jsx(Toolbar, {
+      }), /*#__PURE__*/_jsx(ToolbarVisibility, {
+        hideToolbar: hideToolbar,
+        toolbarBottom: toolbarBottom,
         prefixCls: prefixCls,
         overflow: overflow,
-        toolbarBottom: toolbarBottom
+        placement: "bottom"
       })]
     }))
   });

package/esm/components/TextArea/index.css

@@ -14,8 +14,7 @@
   margin: 0;
   font-size: 14px !important;
   line-height: 18px !important;
-  -webkit-font-variant-ligatures: common-ligatures;
-          font-variant-ligatures: common-ligatures;
+  font-variant-ligatures: common-ligatures;
 }
 .w-md-editor-text-pre,
 .w-md-editor-text-input,
@@ -29,8 +28,7 @@
   font-family: var(--md-editor-font-family) !important;
   font-size: inherit;
   font-style: inherit;
-  -webkit-font-variant-ligatures: inherit;
-          font-variant-ligatures: inherit;
+  font-variant-ligatures: inherit;
   font-weight: inherit;
   letter-spacing: inherit;
   line-height: inherit;

package/esm/components/TextArea/index.js

@@ -23,6 +23,7 @@ export default function TextArea(props) {
     markdown,
     scrollTop,
     commands,
+    minHeight,
     highlightEnable,
     extraCommands,
     dispatch
@@ -62,6 +63,9 @@ export default function TextArea(props) {
     onScroll: onScroll,
     children: /*#__PURE__*/_jsx("div", {
       className: prefixCls + "-text",
+      style: {
+        minHeight
+      },
       children: renderTextarea ? /*#__PURE__*/React.cloneElement(renderTextarea(_extends({}, otherProps, {
         value: markdown,
         autoComplete: 'off',

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

@@ -3,10 +3,18 @@ import { ICommand } from '../../commands';
 import './index.less';
 export interface IToolbarProps extends IProps {
     overflow?: boolean;
-    toolbarBottom?: boolean;
     onCommand?: (command: ICommand<string>, groupName?: string) => void;
     commands?: ICommand<string>[];
     isChild?: boolean;
 }
 export declare function ToolbarItems(props: IToolbarProps): import("react/jsx-runtime").JSX.Element;
 export default function Toolbar(props?: IToolbarProps): import("react/jsx-runtime").JSX.Element;
+interface ToolbarVisibilityProps {
+    hideToolbar?: boolean;
+    toolbarBottom: boolean;
+    placement: 'bottom' | 'top';
+    overflow: boolean;
+    prefixCls: string;
+}
+export declare function ToolbarVisibility(props: ToolbarVisibilityProps): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/esm/components/Toolbar/index.js

@@ -113,20 +113,37 @@ export default function Toolbar(props) {
   }
   var {
     prefixCls,
-    toolbarBottom,
-    isChild
+    isChild,
+    className
   } = props;
   var {
     commands,
     extraCommands
   } = useContext(EditorContext);
-  var bottomClassName = toolbarBottom ? 'bottom' : '';
   return /*#__PURE__*/_jsxs("div", {
-    className: prefixCls + "-toolbar " + bottomClassName,
+    className: prefixCls + "-toolbar " + className,
     children: [/*#__PURE__*/_jsx(ToolbarItems, _extends({}, props, {
       commands: props.commands || commands || []
     })), !isChild && /*#__PURE__*/_jsx(ToolbarItems, _extends({}, props, {
       commands: extraCommands || []
     }))]
   });
+}
+export function ToolbarVisibility(props) {
+  var {
+    hideToolbar,
+    toolbarBottom,
+    placement,
+    overflow,
+    prefixCls
+  } = props;
+  if (hideToolbar || placement === 'bottom' && !toolbarBottom || placement === 'top' && toolbarBottom) {
+    return null;
+  }
+  var cls = toolbarBottom ? 'bottom' : '';
+  return /*#__PURE__*/_jsx(Toolbar, {
+    prefixCls: prefixCls,
+    overflow: overflow,
+    className: cls
+  });
 }

package/lib/Editor.js

@@ -12,7 +12,7 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 var _react = _interopRequireWildcard(require("react"));
 var _reactMarkdownPreview = _interopRequireDefault(require("@uiw/react-markdown-preview"));
 var _TextArea = _interopRequireDefault(require("./components/TextArea"));
-var _Toolbar = _interopRequireDefault(require("./components/Toolbar"));
+var _Toolbar = require("./components/Toolbar");
 var _DragBar = _interopRequireDefault(require("./components/DragBar"));
 var _commands = require("./commands");
 var _Context = require("./Context");
@@ -83,6 +83,7 @@ var InternalMDEditor = /*#__PURE__*/_react["default"].forwardRef(function (props
       preview: previewType,
       components: components,
       height: height,
+      minHeight: minHeight,
       highlightEnable: highlightEnable,
       tabSize: tabSize,
       defaultTabEnable: defaultTabEnable,
@@ -270,6 +271,19 @@ var InternalMDEditor = /*#__PURE__*/_react["default"].forwardRef(function (props
       }));
     }
   };
+  var contentView = /(live|preview)/.test(state.preview || '') && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_TextArea["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');
+      }
+    })), mdPreview]
+  });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Context.EditorContext.Provider, {
     value: (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, state), {}, {
       dispatch: dispatch
@@ -280,33 +294,27 @@ var InternalMDEditor = /*#__PURE__*/_react["default"].forwardRef(function (props
     }, other), {}, {
       onClick: containerClick,
       style: containerStyle,
-      children: [!hideToolbar && !toolbarBottom && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Toolbar["default"], {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Toolbar.ToolbarVisibility, {
+        hideToolbar: hideToolbar,
+        toolbarBottom: toolbarBottom,
         prefixCls: prefixCls,
         overflow: overflow,
-        toolbarBottom: toolbarBottom
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        placement: "top"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         className: "".concat(prefixCls, "-content"),
-        children: [/(edit|live)/.test(state.preview || '') && /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextArea["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]
+        children: contentView
       }), 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"], {
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Toolbar.ToolbarVisibility, {
+        hideToolbar: hideToolbar,
+        toolbarBottom: toolbarBottom,
         prefixCls: prefixCls,
         overflow: overflow,
-        toolbarBottom: toolbarBottom
+        placement: "bottom"
       })]
     }))
   });

package/lib/Editor.nohighlight.js

@@ -12,7 +12,7 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 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 _Toolbar = require("./components/Toolbar");
 var _DragBar = _interopRequireDefault(require("./components/DragBar"));
 var _commands = require("./commands");
 var _Context = require("./Context");
@@ -83,6 +83,7 @@ var InternalMDEditor = /*#__PURE__*/_react["default"].forwardRef(function (props
       preview: previewType,
       components: components,
       height: height,
+      minHeight: minHeight,
       highlightEnable: highlightEnable,
       tabSize: tabSize,
       defaultTabEnable: defaultTabEnable,
@@ -280,10 +281,12 @@ var InternalMDEditor = /*#__PURE__*/_react["default"].forwardRef(function (props
     }, other), {}, {
       onClick: containerClick,
       style: containerStyle,
-      children: [!hideToolbar && !toolbarBottom && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Toolbar["default"], {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Toolbar.ToolbarVisibility, {
+        hideToolbar: hideToolbar,
+        toolbarBottom: toolbarBottom,
         prefixCls: prefixCls,
         overflow: overflow,
-        toolbarBottom: toolbarBottom
+        placement: "top"
       }), /*#__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"])({
@@ -303,10 +306,12 @@ var InternalMDEditor = /*#__PURE__*/_react["default"].forwardRef(function (props
         maxHeight: maxHeight,
         minHeight: minHeight,
         onChange: dragBarChange
-      }), !hideToolbar && toolbarBottom && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Toolbar["default"], {
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Toolbar.ToolbarVisibility, {
+        hideToolbar: hideToolbar,
+        toolbarBottom: toolbarBottom,
         prefixCls: prefixCls,
         overflow: overflow,
-        toolbarBottom: toolbarBottom
+        placement: "bottom"
       })]
     }))
   });

package/lib/components/TextArea/index.js

@@ -27,6 +27,7 @@ function TextArea(props) {
     markdown = _useContext.markdown,
     scrollTop = _useContext.scrollTop,
     commands = _useContext.commands,
+    minHeight = _useContext.minHeight,
     highlightEnable = _useContext.highlightEnable,
     extraCommands = _useContext.extraCommands,
     dispatch = _useContext.dispatch;
@@ -65,6 +66,9 @@ function TextArea(props) {
     onScroll: onScroll,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: "".concat(prefixCls, "-text"),
+      style: {
+        minHeight: minHeight
+      },
       children: renderTextarea ? /*#__PURE__*/_react["default"].cloneElement(renderTextarea((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, otherProps), {}, {
         value: markdown,
         autoComplete: 'off',

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

@@ -3,10 +3,18 @@ import { ICommand } from '../../commands';
 import './index.less';
 export interface IToolbarProps extends IProps {
     overflow?: boolean;
-    toolbarBottom?: boolean;
     onCommand?: (command: ICommand<string>, groupName?: string) => void;
     commands?: ICommand<string>[];
     isChild?: boolean;
 }
 export declare function ToolbarItems(props: IToolbarProps): import("react/jsx-runtime").JSX.Element;
 export default function Toolbar(props?: IToolbarProps): import("react/jsx-runtime").JSX.Element;
+interface ToolbarVisibilityProps {
+    hideToolbar?: boolean;
+    toolbarBottom: boolean;
+    placement: 'bottom' | 'top';
+    overflow: boolean;
+    prefixCls: string;
+}
+export declare function ToolbarVisibility(props: ToolbarVisibilityProps): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/lib/components/Toolbar/index.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ToolbarItems = ToolbarItems;
+exports.ToolbarVisibility = ToolbarVisibility;
 exports["default"] = Toolbar;
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
 var _react = _interopRequireWildcard(require("react"));
@@ -121,18 +122,33 @@ function ToolbarItems(props) {
 function Toolbar() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   var prefixCls = props.prefixCls,
-    toolbarBottom = props.toolbarBottom,
-    isChild = props.isChild;
+    isChild = props.isChild,
+    className = props.className;
   var _useContext2 = (0, _react.useContext)(_Context.EditorContext),
     commands = _useContext2.commands,
     extraCommands = _useContext2.extraCommands;
-  var bottomClassName = toolbarBottom ? 'bottom' : '';
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-    className: "".concat(prefixCls, "-toolbar ").concat(bottomClassName),
+    className: "".concat(prefixCls, "-toolbar ").concat(className),
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(ToolbarItems, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, props), {}, {
       commands: props.commands || commands || []
     })), !isChild && /*#__PURE__*/(0, _jsxRuntime.jsx)(ToolbarItems, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, props), {}, {
       commands: extraCommands || []
     }))]
   });
+}
+function ToolbarVisibility(props) {
+  var hideToolbar = props.hideToolbar,
+    toolbarBottom = props.toolbarBottom,
+    placement = props.placement,
+    overflow = props.overflow,
+    prefixCls = props.prefixCls;
+  if (hideToolbar || placement === 'bottom' && !toolbarBottom || placement === 'top' && toolbarBottom) {
+    return null;
+  }
+  var cls = toolbarBottom ? 'bottom' : '';
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Toolbar, {
+    prefixCls: prefixCls,
+    overflow: overflow,
+    className: cls
+  });
 }

package/markdown-editor.css

@@ -32,8 +32,7 @@
   margin: 0;
   font-size: 14px !important;
   line-height: 18px !important;
-  -webkit-font-variant-ligatures: common-ligatures;
-          font-variant-ligatures: common-ligatures;
+  font-variant-ligatures: common-ligatures;
 }
 .w-md-editor-text-pre,
 .w-md-editor-text-input,
@@ -47,8 +46,7 @@
   font-family: var(--md-editor-font-family) !important;
   font-size: inherit;
   font-style: inherit;
-  -webkit-font-variant-ligatures: inherit;
-          font-variant-ligatures: inherit;
+  font-variant-ligatures: inherit;
   font-weight: inherit;
   letter-spacing: inherit;
   line-height: inherit;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uiw/react-md-editor",
-  "version": "3.25.1",
+  "version": "3.25.3",
   "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>",
@@ -9,6 +9,7 @@
   "exports": {
     "./README.md": "./README.md",
     "./package.json": "./package.json",
+    "./markdown-editor.css": "./markdown-editor.css",
     ".": {
       "import": "./esm/index.js",
       "types": "./lib/index.d.ts",

package/src/Editor.nohighlight.tsx

@@ -1,7 +1,7 @@
 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 { ToolbarVisibility } from './components/Toolbar';
 import DragBar from './components/DragBar';
 import { getCommands, getExtraCommands, ICommand, TextState, TextAreaCommandOrchestrator } from './commands';
 import { reducer, EditorContext, ContextStore } from './Context';
@@ -60,6 +60,7 @@ const InternalMDEditor = React.forwardRef<RefMDEditor, MDEditorProps>(
       preview: previewType,
       components,
       height,
+      minHeight,
       highlightEnable,
       tabSize,
       defaultTabEnable,
@@ -219,9 +220,13 @@ const InternalMDEditor = React.forwardRef<RefMDEditor, MDEditorProps>(
     return (
       <EditorContext.Provider value={{ ...state, dispatch }}>
         <div ref={container} className={cls} {...other} onClick={containerClick} style={containerStyle}>
-          {!hideToolbar && !toolbarBottom && (
-            <Toolbar prefixCls={prefixCls} overflow={overflow} toolbarBottom={toolbarBottom} />
-          )}
+          <ToolbarVisibility
+            hideToolbar={hideToolbar}
+            toolbarBottom={toolbarBottom}
+            prefixCls={prefixCls}
+            overflow={overflow}
+            placement="top"
+          />
           <div className={`${prefixCls}-content`}>
             {/(edit|live)/.test(state.preview || '') && (
               <TextArea
@@ -245,9 +250,13 @@ const InternalMDEditor = React.forwardRef<RefMDEditor, MDEditorProps>(
               onChange={dragBarChange}
             />
           )}
-          {!hideToolbar && toolbarBottom && (
-            <Toolbar prefixCls={prefixCls} overflow={overflow} toolbarBottom={toolbarBottom} />
-          )}
+          <ToolbarVisibility
+            hideToolbar={hideToolbar}
+            toolbarBottom={toolbarBottom}
+            prefixCls={prefixCls}
+            overflow={overflow}
+            placement="bottom"
+          />
         </div>
       </EditorContext.Provider>
     );

package/src/Editor.tsx

@@ -1,7 +1,7 @@
-import React, { useEffect, useReducer, useMemo, useRef, useImperativeHandle } from 'react';
+import React, { useEffect, useReducer, useMemo, useRef, useImperativeHandle, Fragment } from 'react';
 import MarkdownPreview from '@uiw/react-markdown-preview';
 import TextArea from './components/TextArea';
-import Toolbar from './components/Toolbar';
+import { ToolbarVisibility } from './components/Toolbar';
 import DragBar from './components/DragBar';
 import { getCommands, getExtraCommands, ICommand, TextState, TextAreaCommandOrchestrator } from './commands';
 import { reducer, EditorContext, ContextStore } from './Context';
@@ -60,6 +60,7 @@ const InternalMDEditor = React.forwardRef<RefMDEditor, MDEditorProps>(
       preview: previewType,
       components,
       height,
+      minHeight,
       highlightEnable,
       tabSize,
       defaultTabEnable,
@@ -216,26 +217,31 @@ const InternalMDEditor = React.forwardRef<RefMDEditor, MDEditorProps>(
         });
       }
     };
+    const contentView = /(live|preview)/.test(state.preview || '') && (
+      <Fragment>
+        <TextArea
+          className={`${prefixCls}-input`}
+          prefixCls={prefixCls}
+          autoFocus={autoFocus}
+          {...textareaProps}
+          onChange={changeHandle}
+          renderTextarea={components?.textarea || renderTextarea}
+          onScroll={(e) => handleScroll(e, 'text')}
+        />
+        {mdPreview}
+      </Fragment>
+    );
     return (
       <EditorContext.Provider value={{ ...state, dispatch }}>
         <div ref={container} className={cls} {...other} onClick={containerClick} style={containerStyle}>
-          {!hideToolbar && !toolbarBottom && (
-            <Toolbar prefixCls={prefixCls} overflow={overflow} toolbarBottom={toolbarBottom} />
-          )}
-          <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>
+          <ToolbarVisibility
+            hideToolbar={hideToolbar}
+            toolbarBottom={toolbarBottom}
+            prefixCls={prefixCls}
+            overflow={overflow}
+            placement="top"
+          />
+          <div className={`${prefixCls}-content`}>{contentView}</div>
           {visibleDragbar && !state.fullscreen && (
             <DragBar
               prefixCls={prefixCls}
@@ -245,9 +251,13 @@ const InternalMDEditor = React.forwardRef<RefMDEditor, MDEditorProps>(
               onChange={dragBarChange}
             />
           )}
-          {!hideToolbar && toolbarBottom && (
-            <Toolbar prefixCls={prefixCls} overflow={overflow} toolbarBottom={toolbarBottom} />
-          )}
+          <ToolbarVisibility
+            hideToolbar={hideToolbar}
+            toolbarBottom={toolbarBottom}
+            prefixCls={prefixCls}
+            overflow={overflow}
+            placement="bottom"
+          />
         </div>
       </EditorContext.Provider>
     );

package/src/components/TextArea/index.tsx

@@ -42,7 +42,8 @@ export type TextAreaRef = {
 
 export default function TextArea(props: ITextAreaProps) {
   const { prefixCls, className, onScroll, renderTextarea, ...otherProps } = props || {};
-  const { markdown, scrollTop, commands, highlightEnable, extraCommands, dispatch } = useContext(EditorContext);
+  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>();
@@ -71,7 +72,7 @@ export default function TextArea(props: ITextAreaProps) {
 
   return (
     <div ref={warp} className={`${prefixCls}-area ${className || ''}`} onScroll={onScroll}>
-      <div className={`${prefixCls}-text`}>
+      <div className={`${prefixCls}-text`} style={{ minHeight }}>
         {renderTextarea ? (
           React.cloneElement(
             renderTextarea(