@uiw/react-md-editor 3.25.2 → 3.25.4

package/esm/Editor.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';
 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,
@@ -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/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,
@@ -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)(_TextArea["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/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.2",
+  "version": "3.25.4",
   "description": "A markdown editor with preview, implemented with React.js and TypeScript.",
   "homepage": "https://uiwjs.github.io/react-md-editor/",
   "author": "kenny wang <wowohoo@qq.com>",

package/src/Editor.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,
@@ -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/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(

package/src/components/Toolbar/index.tsx

@@ -7,7 +7,6 @@ import './index.less';
 
 export interface IToolbarProps extends IProps {
   overflow?: boolean;
-  toolbarBottom?: boolean;
   onCommand?: (command: ICommand<string>, groupName?: string) => void;
   commands?: ICommand<string>[];
   isChild?: boolean;
@@ -125,13 +124,29 @@ export function ToolbarItems(props: IToolbarProps) {
 }
 
 export default function Toolbar(props: IToolbarProps = {}) {
-  const { prefixCls, toolbarBottom, isChild } = props;
+  const { prefixCls, isChild, className } = props;
   const { commands, extraCommands } = useContext(EditorContext);
-  const bottomClassName = toolbarBottom ? 'bottom' : '';
   return (
-    <div className={`${prefixCls}-toolbar ${bottomClassName}`}>
+    <div className={`${prefixCls}-toolbar ${className}`}>
       <ToolbarItems {...props} commands={props.commands || commands || []} />
       {!isChild && <ToolbarItems {...props} commands={extraCommands || []} />}
     </div>
   );
 }
+
+interface ToolbarVisibilityProps {
+  hideToolbar?: boolean;
+  toolbarBottom: boolean;
+  placement: 'bottom' | 'top';
+  overflow: boolean;
+  prefixCls: string;
+}
+
+export function ToolbarVisibility(props: ToolbarVisibilityProps) {
+  const { hideToolbar, toolbarBottom, placement, overflow, prefixCls } = props;
+  if (hideToolbar || (placement === 'bottom' && !toolbarBottom) || (placement === 'top' && toolbarBottom)) {
+    return null;
+  }
+  const cls = toolbarBottom ? 'bottom' : '';
+  return <Toolbar prefixCls={prefixCls} overflow={overflow} className={cls} />;
+}