@uiw/react-md-editor 3.16.0 → 3.17.2

package/markdown-editor.css

@@ -2,6 +2,7 @@
   position: absolute;
   cursor: s-resize;
   right: 0;
+  bottom: 0;
   margin-top: -11px;
   margin-right: 0;
   width: 14px;
@@ -174,13 +175,14 @@
 .w-md-editor-toolbar {
   border-bottom: 1px solid var(--color-border-default);
   background-color: var(--color-canvas-default);
-  padding: 0 5px 0 5px;
+  padding: 5px 5px;
   display: flex;
   justify-content: space-between;
   align-items: center;
   border-radius: 3px 3px 0 0;
   -webkit-user-select: none;
           user-select: none;
+  flex-wrap: wrap;
 }
 .w-md-editor-toolbar.bottom {
   border-bottom: 0px;
@@ -192,11 +194,15 @@
   margin: 0;
   padding: 0;
   list-style: none;
+  line-height: initial;
 }
 .w-md-editor-toolbar li {
   display: inline-block;
   font-size: 14px;
 }
+.w-md-editor-toolbar li + li {
+  margin: 0;
+}
 .w-md-editor-toolbar li > button {
   border: none;
   height: 20px;
@@ -251,14 +257,21 @@
   box-shadow: 0 0 0 1px var(--color-border-default), 0 0 0 var(--color-border-default), 0 1px 1px var(--color-border-default);
   background-color: var(--color-canvas-default);
   font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  display: flex;
+  flex-direction: column;
 }
-.w-md-editor .copied {
-  display: none !important;
+.w-md-editor-toolbar {
+  height: -webkit-fit-content;
+  height: fit-content;
 }
 .w-md-editor-content {
+  height: 100%;
+  overflow: auto;
   position: relative;
   border-radius: 0 0 3px 0;
-  height: calc(100% - 39.1px);
+}
+.w-md-editor .copied {
+  display: none !important;
 }
 .w-md-editor-input {
   width: 50%;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uiw/react-md-editor",
-  "version": "3.16.0",
+  "version": "3.17.2",
   "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>",
@@ -36,7 +36,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.14.6",
-    "@uiw/react-markdown-preview": "^4.0.22",
+    "@uiw/react-markdown-preview": "^4.0.24",
     "rehype": "~12.0.1"
   },
   "keywords": [

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

@@ -56,7 +56,7 @@ export interface ICommandBase<T> {
     disabled: boolean,
     executeCommand: (command: ICommand<T>, name?: string) => void,
     index: number,
-  ) => React.ReactElement;
+  ) => 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 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);
@@ -20,10 +21,14 @@
       margin: 0;
       padding: 0;
       list-style: none;
+      line-height: initial;
     }
     li {
       display: inline-block;
       font-size: 14px;
+      & + li {
+        margin: 0;
+      }
       > button {
         border: none;
         height: 20px;

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,11 +82,15 @@ 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.render && typeof item.render === 'function' && item.render(item, !!disabled, handleClick, idx)}
-            {!item.render && !item.buttonProps && item.icon}
-            {!item.render &&
+            {com && React.isValidElement(com) && com}
+            {!com && !item.buttonProps && item.icon}
+            {!com &&
               item.buttonProps &&
               React.createElement(
                 'button',
@@ -121,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%;