refactor: optimizi toolbar.

Author: jaywcjlove

core/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';
@@ -219,9 +219,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 +249,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>
     );

core/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';
@@ -216,26 +216,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 +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>
     );

core/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} />;
+}