@uiw/react-md-editor 3.15.0 → 3.17.1

package/src/Context.tsx

@@ -1,9 +1,11 @@
 import React from 'react';
 import { ICommand, TextAreaCommandOrchestrator } from './commands';
+import { MDEditorProps } from './Editor';
 
 export type PreviewType = 'live' | 'edit' | 'preview';
 
 export type ContextStore = {
+  components?: MDEditorProps['components'];
   commands?: ICommand<string>[];
   extraCommands?: ICommand<string>[];
   markdown?: string;

package/src/Editor.tsx

@@ -39,6 +39,9 @@ export interface MDEditorProps extends Omit<React.HTMLAttributes<HTMLDivElement>
   /**
    * Custom toolbar heigth
    * @default 29px
+   *
+   * @deprecated toolbar height adaptive: https://github.com/uiwjs/react-md-editor/issues/427
+   *
    */
   toolbarHeight?: number;
   /**
@@ -77,8 +80,23 @@ export interface MDEditorProps extends Omit<React.HTMLAttributes<HTMLDivElement>
    * Set the `textarea` related props.
    */
   textareaProps?: ITextAreaProps;
-  /** Use div to replace TextArea or re-render TextArea */
+  /**
+   * 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'];
+  };
   /**
    * Disable editing area code highlighting. The value is `false`, which increases the editing speed.
    * @default true
@@ -135,7 +153,6 @@ const InternalMDEditor = (
     commandsFilter,
     extraCommands = getExtraCommands(),
     height = 200,
-    toolbarHeight = 29,
     enableScroll = true,
     visibleDragbar = typeof props.visiableDragbar === 'boolean' ? props.visiableDragbar : true,
     highlightEnable = true,
@@ -153,6 +170,7 @@ const InternalMDEditor = (
     onHeightChange,
     hideToolbar,
     toolbarBottom = false,
+    components,
     renderTextarea,
     ...other
   } = props || {};
@@ -165,6 +183,7 @@ const InternalMDEditor = (
   let [state, dispatch] = useReducer(reducer, {
     markdown: propsValue,
     preview: previewType,
+    components,
     height,
     highlightEnable,
     tabSize,
@@ -303,14 +322,9 @@ const InternalMDEditor = (
         }}
       >
         {!hideToolbar && !toolbarBottom && (
-          <Toolbar prefixCls={prefixCls} height={toolbarHeight} overflow={overflow} toolbarBottom={toolbarBottom} />
+          <Toolbar prefixCls={prefixCls} overflow={overflow} toolbarBottom={toolbarBottom} />
         )}
-        <div
-          className={`${prefixCls}-content`}
-          style={{
-            height: `calc(100% - ${toolbarHeight}px)`,
-          }}
-        >
+        <div className={`${prefixCls}-content`}>
           {/(edit|live)/.test(state.preview || '') && (
             <TextArea
               className={`${prefixCls}-input`}
@@ -323,7 +337,7 @@ const InternalMDEditor = (
                   textareaProps.onChange(evn);
                 }
               }}
-              renderTextarea={renderTextarea}
+              renderTextarea={components?.textarea || renderTextarea}
               onScroll={(e) => handleScroll(e, 'text')}
             />
           )}
@@ -341,7 +355,7 @@ const InternalMDEditor = (
           />
         )}
         {!hideToolbar && toolbarBottom && (
-          <Toolbar prefixCls={prefixCls} height={toolbarHeight} overflow={overflow} toolbarBottom={toolbarBottom} />
+          <Toolbar prefixCls={prefixCls} overflow={overflow} toolbarBottom={toolbarBottom} />
         )}
       </div>
     </EditorContext.Provider>

package/src/commands/index.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import { bold } from './bold';
 import { code, codeBlock } from './code';
 import { italic } from './italic';
@@ -50,6 +51,12 @@ export interface ICommandBase<T> {
   position?: 'right';
   liProps?: React.LiHTMLAttributes<HTMLLIElement>;
   buttonProps?: React.ButtonHTMLAttributes<HTMLButtonElement> | null;
+  render?: (
+    command: ICommand<T>,
+    disabled: boolean,
+    executeCommand: (command: ICommand<T>, name?: string) => void,
+    index: number,
+  ) => void | undefined | null | React.ReactElement;
   execute?: (
     state: TextState,
     api: TextAreaTextApi,

package/src/components/DragBar/index.less

@@ -5,6 +5,7 @@
     position: absolute;
     cursor: s-resize;
     right: 0;
+    bottom: 0;
     margin-top: -11px;
     margin-right: 0;
     width: 14px;

package/src/components/Toolbar/Child.tsx

@@ -17,7 +17,7 @@ export default function Child(props: ChildProps) {
         className={`${prefixCls}-toolbar-child ${groupName && barPopup[groupName] ? 'active' : ''}`}
         onClick={(e) => e.stopPropagation()}
       >
-        {Array.isArray(commands) ? <Toolbar commands={commands} {...props} height="" isChild /> : children}
+        {Array.isArray(commands) ? <Toolbar commands={commands} {...props} isChild /> : children}
       </div>
     ),
     // eslint-disable-next-line react-hooks/exhaustive-deps

package/src/components/Toolbar/index.less

@@ -4,12 +4,13 @@
   &-toolbar {
     border-bottom: 1px solid var(--color-border-default);
     background-color: var(--color-canvas-default);
-    padding: 0 5px 0 5px;
+    padding: 5px;
     display: flex;
     justify-content: space-between;
     align-items: center;
     border-radius: 3px 3px 0 0;
     user-select: none;
+    flex-wrap: wrap;
     &.bottom {
       border-bottom: 0px;
       border-top: 1px solid var(--color-border-default);

package/src/components/Toolbar/index.tsx

@@ -7,7 +7,6 @@ import './index.less';
 
 export interface IToolbarProps extends IProps {
   overflow?: boolean;
-  height?: React.CSSProperties['height'];
   toolbarBottom?: boolean;
   onCommand?: (command: ICommand<string>, groupName?: string) => void;
   commands?: ICommand<string>[];
@@ -16,7 +15,7 @@ export interface IToolbarProps extends IProps {
 
 export function ToolbarItems(props: IToolbarProps) {
   const { prefixCls, overflow } = props;
-  const { fullscreen, preview, barPopup = {}, commandOrchestrator, dispatch } = useContext(EditorContext);
+  const { fullscreen, preview, barPopup = {}, components, commandOrchestrator, dispatch } = useContext(EditorContext);
   const originalOverflow = useRef('');
 
   function handleClick(command: ICommand<string>, name?: string) {
@@ -83,10 +82,16 @@ export function ToolbarItems(props: IToolbarProps) {
               })
             : undefined;
         const disabled = barPopup && preview && preview === 'preview' && !/(preview|fullscreen)/.test(item.keyCommand);
+        const render = components?.toolbar || item.render;
+        const com = (
+          render && typeof render === 'function' ? render(item, !!disabled, handleClick, idx) : null
+        ) as React.ReactElement;
         return (
           <li key={idx} {...item.liProps} className={activeBtn ? `active` : ''}>
-            {!item.buttonProps && item.icon}
-            {item.buttonProps &&
+            {com && React.isValidElement(com) && com}
+            {!com && !item.buttonProps && item.icon}
+            {!com &&
+              item.buttonProps &&
               React.createElement(
                 'button',
                 {
@@ -119,11 +124,11 @@ export function ToolbarItems(props: IToolbarProps) {
 }
 
 export default function Toolbar(props: IToolbarProps = {}) {
-  const { prefixCls, height = 29, toolbarBottom, isChild } = props;
+  const { prefixCls, toolbarBottom, isChild } = props;
   const { commands, extraCommands } = useContext(EditorContext);
   const bottomClassName = toolbarBottom ? 'bottom' : '';
   return (
-    <div className={`${prefixCls}-toolbar ${bottomClassName}`} style={{ height }}>
+    <div className={`${prefixCls}-toolbar ${bottomClassName}`}>
       <ToolbarItems {...props} commands={props.commands || commands || []} />
       {!isChild && <ToolbarItems {...props} commands={extraCommands || []} />}
     </div>

package/src/index.less

@@ -10,13 +10,19 @@
     0 1px 1px var(--color-border-default);
   background-color: var(--color-canvas-default);
   font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
-  .copied {
-    display: none !important;
+  display: flex;
+  flex-direction: column;
+  &-toolbar {
+    height: fit-content;
   }
   &-content {
+    height: 100%;
+    overflow: auto;
     position: relative;
     border-radius: 0 0 3px 0;
-    height: calc(100% - 39.1px);
+  }
+  .copied {
+    display: none !important;
   }
   &-input {
     width: 50%;