@uiw/react-md-editor 3.14.4 → 3.16.0

package/lib/commands/index.js.map

@@ -47,7 +47,7 @@
     "../../src/commands/index.ts"
   ],
   "sourcesContent": [
-    "import { bold } from './bold';\nimport { code, codeBlock } from './code';\nimport { italic } from './italic';\nimport { link } from './link';\nimport { unorderedListCommand, orderedListCommand, checkedListCommand } from './list';\nimport { quote } from './quote';\nimport { hr } from './hr';\nimport { title } from './title';\nimport { title1 } from './title1';\nimport { title2 } from './title2';\nimport { title3 } from './title3';\nimport { title4 } from './title4';\nimport { title5 } from './title5';\nimport { title6 } from './title6';\nimport { comment } from './comment';\nimport { group } from './group';\nimport { divider } from './divider';\nimport { codePreview, codeEdit, codeLive } from './preview';\nimport { fullscreen } from './fullscreen';\nimport { image } from './image';\nimport { strikethrough } from './strikeThrough';\nimport { insertTextAtPosition } from '../utils/InsertTextAtPosition';\nimport { ContextStore, ExecuteCommandState } from '../Context';\n\nexport interface CommandOrchestrator {\n  executeCommand(command: ICommand): void;\n}\n\nexport interface ICommandChildHandle<T = string> extends ICommandBase<T> {\n  children?: (handle: {\n    close: () => void;\n    execute: () => void;\n    getState?: TextAreaCommandOrchestrator['getState'];\n    textApi?: TextAreaTextApi;\n  }) => React.ReactElement;\n}\n\nexport interface ICommandChildCommands<T = string> extends ICommandBase<T> {\n  children?: Array<ICommand<T>>;\n}\n\nexport interface ICommandBase<T> {\n  parent?: ICommand<any>;\n  keyCommand?: string;\n  name?: string;\n  shortcuts?: string;\n  groupName?: string;\n  icon?: React.ReactElement;\n  value?: T;\n  position?: 'right';\n  liProps?: React.LiHTMLAttributes<HTMLLIElement>;\n  buttonProps?: React.ButtonHTMLAttributes<HTMLButtonElement> | null;\n  execute?: (\n    state: TextState,\n    api: TextAreaTextApi,\n    dispatch?: React.Dispatch<ContextStore>,\n    executeCommandState?: ExecuteCommandState,\n  ) => void;\n}\n\nexport type ICommand<T = string> = ICommandChildCommands<T> | ICommandChildHandle<T>;\n\nexport interface TextRange {\n  start: number;\n  end: number;\n}\n\nexport interface TextState {\n  text: string;\n  selectedText: string;\n  selection: TextRange;\n}\n\nconst getCommands: () => ICommand[] = () => [\n  comment,\n  bold,\n  italic,\n  strikethrough,\n  hr,\n  title,\n  divider,\n  link,\n  quote,\n  code,\n  codeBlock,\n  image,\n  divider,\n  unorderedListCommand,\n  orderedListCommand,\n  checkedListCommand,\n];\n\nconst getExtraCommands: () => ICommand[] = () => [codeEdit, codeLive, codePreview, divider, fullscreen];\n\nfunction getStateFromTextArea(textArea: HTMLTextAreaElement): TextState {\n  return {\n    selection: {\n      start: textArea.selectionStart,\n      end: textArea.selectionEnd,\n    },\n    text: textArea.value,\n    selectedText: textArea.value.slice(textArea.selectionStart, textArea.selectionEnd),\n  };\n}\n\nclass TextAreaTextApi {\n  textArea: HTMLTextAreaElement;\n\n  constructor(textArea: HTMLTextAreaElement) {\n    this.textArea = textArea;\n  }\n\n  /**\n   * Replaces the current selection with the new text. This will make the new selectedText to be empty, the\n   * selection start and selection end will be the same and will both point to the end\n   * @param text Text that should replace the current selection\n   */\n  replaceSelection(text: string): TextState {\n    insertTextAtPosition(this.textArea, text);\n    return getStateFromTextArea(this.textArea);\n  }\n\n  /**\n   * Selects the specified text range\n   * @param selection\n   */\n  setSelectionRange(selection: TextRange): TextState {\n    this.textArea.focus();\n    this.textArea.selectionStart = selection.start;\n    this.textArea.selectionEnd = selection.end;\n    return getStateFromTextArea(this.textArea);\n  }\n}\n\nclass TextAreaCommandOrchestrator implements CommandOrchestrator {\n  textArea: HTMLTextAreaElement;\n  textApi: TextAreaTextApi;\n\n  constructor(textArea: HTMLTextAreaElement) {\n    this.textArea = textArea;\n    this.textApi = new TextAreaTextApi(textArea);\n  }\n\n  getState() {\n    if (!this.textArea) return false;\n    return getStateFromTextArea(this.textArea);\n  }\n\n  executeCommand(\n    command: ICommand<string>,\n    dispatch?: React.Dispatch<ContextStore>,\n    state?: ExecuteCommandState,\n  ): void {\n    command.execute && command.execute(getStateFromTextArea(this.textArea), this.textApi, dispatch, state);\n  }\n}\n\nexport {\n  // Toolbars.\n  title,\n  title1,\n  title2,\n  title3,\n  title4,\n  title5,\n  title6,\n  bold,\n  codeBlock,\n  italic,\n  strikethrough,\n  hr,\n  group,\n  divider,\n  link,\n  quote,\n  code,\n  image,\n  unorderedListCommand,\n  orderedListCommand,\n  checkedListCommand,\n  codeEdit,\n  codeLive,\n  codePreview,\n  fullscreen,\n  // Tool method.\n  getCommands,\n  getExtraCommands,\n  getStateFromTextArea,\n  TextAreaCommandOrchestrator,\n  TextAreaTextApi,\n};\n"
+    "import React from 'react';\nimport { bold } from './bold';\nimport { code, codeBlock } from './code';\nimport { italic } from './italic';\nimport { link } from './link';\nimport { unorderedListCommand, orderedListCommand, checkedListCommand } from './list';\nimport { quote } from './quote';\nimport { hr } from './hr';\nimport { title } from './title';\nimport { title1 } from './title1';\nimport { title2 } from './title2';\nimport { title3 } from './title3';\nimport { title4 } from './title4';\nimport { title5 } from './title5';\nimport { title6 } from './title6';\nimport { comment } from './comment';\nimport { group } from './group';\nimport { divider } from './divider';\nimport { codePreview, codeEdit, codeLive } from './preview';\nimport { fullscreen } from './fullscreen';\nimport { image } from './image';\nimport { strikethrough } from './strikeThrough';\nimport { insertTextAtPosition } from '../utils/InsertTextAtPosition';\nimport { ContextStore, ExecuteCommandState } from '../Context';\n\nexport interface CommandOrchestrator {\n  executeCommand(command: ICommand): void;\n}\n\nexport interface ICommandChildHandle<T = string> extends ICommandBase<T> {\n  children?: (handle: {\n    close: () => void;\n    execute: () => void;\n    getState?: TextAreaCommandOrchestrator['getState'];\n    textApi?: TextAreaTextApi;\n  }) => React.ReactElement;\n}\n\nexport interface ICommandChildCommands<T = string> extends ICommandBase<T> {\n  children?: Array<ICommand<T>>;\n}\n\nexport interface ICommandBase<T> {\n  parent?: ICommand<any>;\n  keyCommand?: string;\n  name?: string;\n  shortcuts?: string;\n  groupName?: string;\n  icon?: React.ReactElement;\n  value?: T;\n  position?: 'right';\n  liProps?: React.LiHTMLAttributes<HTMLLIElement>;\n  buttonProps?: React.ButtonHTMLAttributes<HTMLButtonElement> | null;\n  render?: (\n    command: ICommand<T>,\n    disabled: boolean,\n    executeCommand: (command: ICommand<T>, name?: string) => void,\n    index: number,\n  ) => React.ReactElement;\n  execute?: (\n    state: TextState,\n    api: TextAreaTextApi,\n    dispatch?: React.Dispatch<ContextStore>,\n    executeCommandState?: ExecuteCommandState,\n  ) => void;\n}\n\nexport type ICommand<T = string> = ICommandChildCommands<T> | ICommandChildHandle<T>;\n\nexport interface TextRange {\n  start: number;\n  end: number;\n}\n\nexport interface TextState {\n  text: string;\n  selectedText: string;\n  selection: TextRange;\n}\n\nconst getCommands: () => ICommand[] = () => [\n  comment,\n  bold,\n  italic,\n  strikethrough,\n  hr,\n  title,\n  divider,\n  link,\n  quote,\n  code,\n  codeBlock,\n  image,\n  divider,\n  unorderedListCommand,\n  orderedListCommand,\n  checkedListCommand,\n];\n\nconst getExtraCommands: () => ICommand[] = () => [codeEdit, codeLive, codePreview, divider, fullscreen];\n\nfunction getStateFromTextArea(textArea: HTMLTextAreaElement): TextState {\n  return {\n    selection: {\n      start: textArea.selectionStart,\n      end: textArea.selectionEnd,\n    },\n    text: textArea.value,\n    selectedText: textArea.value.slice(textArea.selectionStart, textArea.selectionEnd),\n  };\n}\n\nclass TextAreaTextApi {\n  textArea: HTMLTextAreaElement;\n\n  constructor(textArea: HTMLTextAreaElement) {\n    this.textArea = textArea;\n  }\n\n  /**\n   * Replaces the current selection with the new text. This will make the new selectedText to be empty, the\n   * selection start and selection end will be the same and will both point to the end\n   * @param text Text that should replace the current selection\n   */\n  replaceSelection(text: string): TextState {\n    insertTextAtPosition(this.textArea, text);\n    return getStateFromTextArea(this.textArea);\n  }\n\n  /**\n   * Selects the specified text range\n   * @param selection\n   */\n  setSelectionRange(selection: TextRange): TextState {\n    this.textArea.focus();\n    this.textArea.selectionStart = selection.start;\n    this.textArea.selectionEnd = selection.end;\n    return getStateFromTextArea(this.textArea);\n  }\n}\n\nclass TextAreaCommandOrchestrator implements CommandOrchestrator {\n  textArea: HTMLTextAreaElement;\n  textApi: TextAreaTextApi;\n\n  constructor(textArea: HTMLTextAreaElement) {\n    this.textArea = textArea;\n    this.textApi = new TextAreaTextApi(textArea);\n  }\n\n  getState() {\n    if (!this.textArea) return false;\n    return getStateFromTextArea(this.textArea);\n  }\n\n  executeCommand(\n    command: ICommand<string>,\n    dispatch?: React.Dispatch<ContextStore>,\n    state?: ExecuteCommandState,\n  ): void {\n    command.execute && command.execute(getStateFromTextArea(this.textArea), this.textApi, dispatch, state);\n  }\n}\n\nexport {\n  // Toolbars.\n  title,\n  title1,\n  title2,\n  title3,\n  title4,\n  title5,\n  title6,\n  bold,\n  codeBlock,\n  italic,\n  strikethrough,\n  hr,\n  group,\n  divider,\n  link,\n  quote,\n  code,\n  image,\n  unorderedListCommand,\n  orderedListCommand,\n  checkedListCommand,\n  codeEdit,\n  codeLive,\n  codePreview,\n  fullscreen,\n  // Tool method.\n  getCommands,\n  getExtraCommands,\n  getStateFromTextArea,\n  TextAreaCommandOrchestrator,\n  TextAreaTextApi,\n};\n"
   ],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAoDA,IAAMA,WAA6B,GAAG,SAAhCA,WAAgC;EAAA,OAAM,CAC1CC,gBAD0C,EAE1CC,UAF0C,EAG1CC,cAH0C,EAI1CC,4BAJ0C,EAK1CC,MAL0C,EAM1CC,YAN0C,EAO1CC,gBAP0C,EAQ1CC,UAR0C,EAS1CC,YAT0C,EAU1CC,UAV0C,EAW1CC,eAX0C,EAY1CC,YAZ0C,EAa1CL,gBAb0C,EAc1CM,0BAd0C,EAe1CC,wBAf0C,EAgB1CC,wBAhB0C,CAAN;AAAA,CAAtC;;;;AAmBA,IAAMC,gBAAkC,GAAG,SAArCA,gBAAqC;EAAA,OAAM,CAACC,iBAAD,EAAWC,iBAAX,EAAqBC,oBAArB,EAAkCZ,gBAAlC,EAA2Ca,sBAA3C,CAAN;AAAA,CAA3C;;;;AAEA,SAASC,oBAAT,CAA8BC,QAA9B,EAAwE;EACtE,OAAO;IACLC,SAAS,EAAE;MACTC,KAAK,EAAEF,QAAQ,CAACG,cADP;MAETC,GAAG,EAAEJ,QAAQ,CAACK;IAFL,CADN;IAKLC,IAAI,EAAEN,QAAQ,CAACO,KALV;IAMLC,YAAY,EAAER,QAAQ,CAACO,KAAT,CAAeE,KAAf,CAAqBT,QAAQ,CAACG,cAA9B,EAA8CH,QAAQ,CAACK,YAAvD;EANT,CAAP;AAQD;;IAEKK,e;EAGJ,yBAAYV,QAAZ,EAA2C;IAAA;IAAA;IACzC,KAAKA,QAAL,GAAgBA,QAAhB;EACD;EAED;AACF;AACA;AACA;AACA;;;;;WACE,0BAAiBM,IAAjB,EAA0C;MACxC,IAAAK,0CAAA,EAAqB,KAAKX,QAA1B,EAAoCM,IAApC;MACA,OAAOP,oBAAoB,CAAC,KAAKC,QAAN,CAA3B;IACD;IAED;AACF;AACA;AACA;;;;WACE,2BAAkBC,SAAlB,EAAmD;MACjD,KAAKD,QAAL,CAAcY,KAAd;MACA,KAAKZ,QAAL,CAAcG,cAAd,GAA+BF,SAAS,CAACC,KAAzC;MACA,KAAKF,QAAL,CAAcK,YAAd,GAA6BJ,SAAS,CAACG,GAAvC;MACA,OAAOL,oBAAoB,CAAC,KAAKC,QAAN,CAA3B;IACD;;;;;;;IAGGa,2B;EAIJ,qCAAYb,QAAZ,EAA2C;IAAA;IAAA;IAAA;IACzC,KAAKA,QAAL,GAAgBA,QAAhB;IACA,KAAKc,OAAL,GAAe,IAAIJ,eAAJ,CAAoBV,QAApB,CAAf;EACD;;;;WAED,oBAAW;MACT,IAAI,CAAC,KAAKA,QAAV,EAAoB,OAAO,KAAP;MACpB,OAAOD,oBAAoB,CAAC,KAAKC,QAAN,CAA3B;IACD;;;WAED,wBACEe,OADF,EAEEC,QAFF,EAGEC,KAHF,EAIQ;MACNF,OAAO,CAACG,OAAR,IAAmBH,OAAO,CAACG,OAAR,CAAgBnB,oBAAoB,CAAC,KAAKC,QAAN,CAApC,EAAqD,KAAKc,OAA1D,EAAmEE,QAAnE,EAA6EC,KAA7E,CAAnB;IACD"
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AA0DA,IAAMA,WAA6B,GAAG,SAAhCA,WAAgC;EAAA,OAAM,CAC1CC,gBAD0C,EAE1CC,UAF0C,EAG1CC,cAH0C,EAI1CC,4BAJ0C,EAK1CC,MAL0C,EAM1CC,YAN0C,EAO1CC,gBAP0C,EAQ1CC,UAR0C,EAS1CC,YAT0C,EAU1CC,UAV0C,EAW1CC,eAX0C,EAY1CC,YAZ0C,EAa1CL,gBAb0C,EAc1CM,0BAd0C,EAe1CC,wBAf0C,EAgB1CC,wBAhB0C,CAAN;AAAA,CAAtC;;;;AAmBA,IAAMC,gBAAkC,GAAG,SAArCA,gBAAqC;EAAA,OAAM,CAACC,iBAAD,EAAWC,iBAAX,EAAqBC,oBAArB,EAAkCZ,gBAAlC,EAA2Ca,sBAA3C,CAAN;AAAA,CAA3C;;;;AAEA,SAASC,oBAAT,CAA8BC,QAA9B,EAAwE;EACtE,OAAO;IACLC,SAAS,EAAE;MACTC,KAAK,EAAEF,QAAQ,CAACG,cADP;MAETC,GAAG,EAAEJ,QAAQ,CAACK;IAFL,CADN;IAKLC,IAAI,EAAEN,QAAQ,CAACO,KALV;IAMLC,YAAY,EAAER,QAAQ,CAACO,KAAT,CAAeE,KAAf,CAAqBT,QAAQ,CAACG,cAA9B,EAA8CH,QAAQ,CAACK,YAAvD;EANT,CAAP;AAQD;;IAEKK,e;EAGJ,yBAAYV,QAAZ,EAA2C;IAAA;IAAA;IACzC,KAAKA,QAAL,GAAgBA,QAAhB;EACD;EAED;AACF;AACA;AACA;AACA;;;;;WACE,0BAAiBM,IAAjB,EAA0C;MACxC,IAAAK,0CAAA,EAAqB,KAAKX,QAA1B,EAAoCM,IAApC;MACA,OAAOP,oBAAoB,CAAC,KAAKC,QAAN,CAA3B;IACD;IAED;AACF;AACA;AACA;;;;WACE,2BAAkBC,SAAlB,EAAmD;MACjD,KAAKD,QAAL,CAAcY,KAAd;MACA,KAAKZ,QAAL,CAAcG,cAAd,GAA+BF,SAAS,CAACC,KAAzC;MACA,KAAKF,QAAL,CAAcK,YAAd,GAA6BJ,SAAS,CAACG,GAAvC;MACA,OAAOL,oBAAoB,CAAC,KAAKC,QAAN,CAA3B;IACD;;;;;;;IAGGa,2B;EAIJ,qCAAYb,QAAZ,EAA2C;IAAA;IAAA;IAAA;IACzC,KAAKA,QAAL,GAAgBA,QAAhB;IACA,KAAKc,OAAL,GAAe,IAAIJ,eAAJ,CAAoBV,QAApB,CAAf;EACD;;;;WAED,oBAAW;MACT,IAAI,CAAC,KAAKA,QAAV,EAAoB,OAAO,KAAP;MACpB,OAAOD,oBAAoB,CAAC,KAAKC,QAAN,CAA3B;IACD;;;WAED,wBACEe,OADF,EAEEC,QAFF,EAGEC,KAHF,EAIQ;MACNF,OAAO,CAACG,OAAR,IAAmBH,OAAO,CAACG,OAAR,CAAgBnB,oBAAoB,CAAC,KAAKC,QAAN,CAApC,EAAqD,KAAKc,OAA1D,EAAmEE,QAAnE,EAA6EC,KAA7E,CAAnB;IACD"
 }

package/lib/components/Toolbar/index.js

@@ -112,7 +112,7 @@ function ToolbarItems(props) {
       var disabled = barPopup && preview && preview === 'preview' && !/(preview|fullscreen)/.test(item.keyCommand);
       return /*#__PURE__*/(0, _jsxRuntime.jsxs)("li", (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, item.liProps), {}, {
         className: activeBtn ? "active" : '',
-        children: [!item.buttonProps && item.icon, item.buttonProps && /*#__PURE__*/_react["default"].createElement('button', (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
+        children: [item.render && typeof item.render === 'function' && item.render(item, !!disabled, handleClick, idx), !item.render && !item.buttonProps && item.icon, !item.render && item.buttonProps && /*#__PURE__*/_react["default"].createElement('button', (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
           type: 'button',
           key: idx,
           disabled: disabled,

package/lib/components/Toolbar/index.js.map

@@ -50,6 +50,7 @@
     "execute",
     "disabled",
     "test",
+    "render",
     "buttonProps",
     "icon",
     "React",
@@ -72,7 +73,7 @@
     "../../../src/components/Toolbar/index.tsx"
   ],
   "sourcesContent": [
-    "import React, { Fragment, useContext, useEffect, useRef } from 'react';\nimport { IProps } from '../../Editor';\nimport { EditorContext, PreviewType, ContextStore } from '../../Context';\nimport { ICommand } from '../../commands';\nimport Child from './Child';\nimport './index.less';\n\nexport interface IToolbarProps extends IProps {\n  overflow?: boolean;\n  height?: React.CSSProperties['height'];\n  toolbarBottom?: boolean;\n  onCommand?: (command: ICommand<string>, groupName?: string) => void;\n  commands?: ICommand<string>[];\n  isChild?: boolean;\n}\n\nexport function ToolbarItems(props: IToolbarProps) {\n  const { prefixCls, overflow } = props;\n  const { fullscreen, preview, barPopup = {}, commandOrchestrator, dispatch } = useContext(EditorContext);\n  const originalOverflow = useRef('');\n\n  function handleClick(command: ICommand<string>, name?: string) {\n    if (!dispatch) return;\n    const state: ContextStore = { barPopup: { ...barPopup } };\n    if (command.keyCommand === 'preview') {\n      state.preview = command.value as PreviewType;\n    }\n    if (command.keyCommand === 'fullscreen') {\n      state.fullscreen = !fullscreen;\n    }\n    if (props.commands && command.keyCommand === 'group') {\n      props.commands.forEach((item) => {\n        if (name === item.groupName) {\n          state.barPopup![name!] = true;\n        } else if (item.keyCommand) {\n          state.barPopup![item.groupName!] = false;\n        }\n      });\n    } else if (name || command.parent) {\n      Object.keys(state.barPopup || {}).forEach((keyName) => {\n        state.barPopup![keyName] = false;\n      });\n    }\n\n    if (Object.keys(state).length) {\n      dispatch({ ...state });\n    }\n    commandOrchestrator && commandOrchestrator.executeCommand(command);\n  }\n\n  useEffect(() => {\n    if (document && overflow) {\n      if (fullscreen) {\n        // prevent scroll on fullscreen\n        document.body.style.overflow = 'hidden';\n      } else {\n        // get the original overflow only the first time\n        if (!originalOverflow.current) {\n          originalOverflow.current = window.getComputedStyle(document.body, null).overflow;\n        }\n        // reset to the original overflow\n        document.body.style.overflow = originalOverflow.current;\n      }\n    }\n  }, [fullscreen, originalOverflow, overflow]);\n\n  return (\n    <ul>\n      {(props.commands || []).map((item, idx) => {\n        if (item.keyCommand === 'divider') {\n          return <li key={idx} {...item.liProps} className={`${prefixCls}-toolbar-divider`} />;\n        }\n        if (!item.keyCommand) return <Fragment key={idx} />;\n        const activeBtn =\n          (fullscreen && item.keyCommand === 'fullscreen') || (item.keyCommand === 'preview' && preview === item.value);\n        const childNode =\n          item.children && typeof item.children === 'function'\n            ? item.children({\n                getState: () => commandOrchestrator!.getState(),\n                textApi: commandOrchestrator ? commandOrchestrator!.textApi : undefined,\n                close: () => handleClick({}, item.groupName),\n                execute: () => handleClick({ execute: item.execute }),\n              })\n            : undefined;\n        const disabled = barPopup && preview && preview === 'preview' && !/(preview|fullscreen)/.test(item.keyCommand);\n        return (\n          <li key={idx} {...item.liProps} className={activeBtn ? `active` : ''}>\n            {!item.buttonProps && item.icon}\n            {item.buttonProps &&\n              React.createElement(\n                'button',\n                {\n                  type: 'button',\n                  key: idx,\n                  disabled,\n                  'data-name': item.name,\n                  ...item.buttonProps,\n                  onClick: (evn: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {\n                    evn.stopPropagation();\n                    handleClick(item, item.groupName);\n                  },\n                },\n                item.icon,\n              )}\n            {item.children && (\n              <Child\n                overflow={overflow}\n                groupName={item.groupName}\n                prefixCls={prefixCls}\n                children={childNode}\n                commands={Array.isArray(item.children) ? item.children : undefined}\n              />\n            )}\n          </li>\n        );\n      })}\n    </ul>\n  );\n}\n\nexport default function Toolbar(props: IToolbarProps = {}) {\n  const { prefixCls, height = 29, toolbarBottom, isChild } = props;\n  const { commands, extraCommands } = useContext(EditorContext);\n  const bottomClassName = toolbarBottom ? 'bottom' : '';\n  return (\n    <div className={`${prefixCls}-toolbar ${bottomClassName}`} style={{ height }}>\n      <ToolbarItems {...props} commands={props.commands || commands || []} />\n      {!isChild && <ToolbarItems {...props} commands={extraCommands || []} />}\n    </div>\n  );\n}\n"
+    "import React, { Fragment, useContext, useEffect, useRef } from 'react';\nimport { IProps } from '../../Editor';\nimport { EditorContext, PreviewType, ContextStore } from '../../Context';\nimport { ICommand } from '../../commands';\nimport Child from './Child';\nimport './index.less';\n\nexport interface IToolbarProps extends IProps {\n  overflow?: boolean;\n  height?: React.CSSProperties['height'];\n  toolbarBottom?: boolean;\n  onCommand?: (command: ICommand<string>, groupName?: string) => void;\n  commands?: ICommand<string>[];\n  isChild?: boolean;\n}\n\nexport function ToolbarItems(props: IToolbarProps) {\n  const { prefixCls, overflow } = props;\n  const { fullscreen, preview, barPopup = {}, commandOrchestrator, dispatch } = useContext(EditorContext);\n  const originalOverflow = useRef('');\n\n  function handleClick(command: ICommand<string>, name?: string) {\n    if (!dispatch) return;\n    const state: ContextStore = { barPopup: { ...barPopup } };\n    if (command.keyCommand === 'preview') {\n      state.preview = command.value as PreviewType;\n    }\n    if (command.keyCommand === 'fullscreen') {\n      state.fullscreen = !fullscreen;\n    }\n    if (props.commands && command.keyCommand === 'group') {\n      props.commands.forEach((item) => {\n        if (name === item.groupName) {\n          state.barPopup![name!] = true;\n        } else if (item.keyCommand) {\n          state.barPopup![item.groupName!] = false;\n        }\n      });\n    } else if (name || command.parent) {\n      Object.keys(state.barPopup || {}).forEach((keyName) => {\n        state.barPopup![keyName] = false;\n      });\n    }\n\n    if (Object.keys(state).length) {\n      dispatch({ ...state });\n    }\n    commandOrchestrator && commandOrchestrator.executeCommand(command);\n  }\n\n  useEffect(() => {\n    if (document && overflow) {\n      if (fullscreen) {\n        // prevent scroll on fullscreen\n        document.body.style.overflow = 'hidden';\n      } else {\n        // get the original overflow only the first time\n        if (!originalOverflow.current) {\n          originalOverflow.current = window.getComputedStyle(document.body, null).overflow;\n        }\n        // reset to the original overflow\n        document.body.style.overflow = originalOverflow.current;\n      }\n    }\n  }, [fullscreen, originalOverflow, overflow]);\n\n  return (\n    <ul>\n      {(props.commands || []).map((item, idx) => {\n        if (item.keyCommand === 'divider') {\n          return <li key={idx} {...item.liProps} className={`${prefixCls}-toolbar-divider`} />;\n        }\n        if (!item.keyCommand) return <Fragment key={idx} />;\n        const activeBtn =\n          (fullscreen && item.keyCommand === 'fullscreen') || (item.keyCommand === 'preview' && preview === item.value);\n        const childNode =\n          item.children && typeof item.children === 'function'\n            ? item.children({\n                getState: () => commandOrchestrator!.getState(),\n                textApi: commandOrchestrator ? commandOrchestrator!.textApi : undefined,\n                close: () => handleClick({}, item.groupName),\n                execute: () => handleClick({ execute: item.execute }),\n              })\n            : undefined;\n        const disabled = barPopup && preview && preview === 'preview' && !/(preview|fullscreen)/.test(item.keyCommand);\n        return (\n          <li key={idx} {...item.liProps} className={activeBtn ? `active` : ''}>\n            {item.render && typeof item.render === 'function' && item.render(item, !!disabled, handleClick, idx)}\n            {!item.render && !item.buttonProps && item.icon}\n            {!item.render &&\n              item.buttonProps &&\n              React.createElement(\n                'button',\n                {\n                  type: 'button',\n                  key: idx,\n                  disabled,\n                  'data-name': item.name,\n                  ...item.buttonProps,\n                  onClick: (evn: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {\n                    evn.stopPropagation();\n                    handleClick(item, item.groupName);\n                  },\n                },\n                item.icon,\n              )}\n            {item.children && (\n              <Child\n                overflow={overflow}\n                groupName={item.groupName}\n                prefixCls={prefixCls}\n                children={childNode}\n                commands={Array.isArray(item.children) ? item.children : undefined}\n              />\n            )}\n          </li>\n        );\n      })}\n    </ul>\n  );\n}\n\nexport default function Toolbar(props: IToolbarProps = {}) {\n  const { prefixCls, height = 29, toolbarBottom, isChild } = props;\n  const { commands, extraCommands } = useContext(EditorContext);\n  const bottomClassName = toolbarBottom ? 'bottom' : '';\n  return (\n    <div className={`${prefixCls}-toolbar ${bottomClassName}`} style={{ height }}>\n      <ToolbarItems {...props} commands={props.commands || commands || []} />\n      {!isChild && <ToolbarItems {...props} commands={extraCommands || []} />}\n    </div>\n  );\n}\n"
   ],
-  "mappings": "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"
+  "mappings": ";;;;;;;;;;;;;;AAAA;;AAEA;;AAEA;;;;AAYO,SAASA,YAAT,CAAsBC,KAAtB,EAA4C;EACjD,IAAQC,SAAR,GAAgCD,KAAhC,CAAQC,SAAR;EAAA,IAAmBC,QAAnB,GAAgCF,KAAhC,CAAmBE,QAAnB;;EACA,kBAA8E,IAAAC,iBAAA,EAAWC,sBAAX,CAA9E;EAAA,IAAQC,UAAR,eAAQA,UAAR;EAAA,IAAoBC,OAApB,eAAoBA,OAApB;EAAA,uCAA6BC,QAA7B;EAAA,IAA6BA,QAA7B,qCAAwC,EAAxC;EAAA,IAA4CC,mBAA5C,eAA4CA,mBAA5C;EAAA,IAAiEC,QAAjE,eAAiEA,QAAjE;;EACA,IAAMC,gBAAgB,GAAG,IAAAC,aAAA,EAAO,EAAP,CAAzB;;EAEA,SAASC,WAAT,CAAqBC,OAArB,EAAgDC,IAAhD,EAA+D;IAC7D,IAAI,CAACL,QAAL,EAAe;IACf,IAAMM,KAAmB,GAAG;MAAER,QAAQ,qCAAOA,QAAP;IAAV,CAA5B;;IACA,IAAIM,OAAO,CAACG,UAAR,KAAuB,SAA3B,EAAsC;MACpCD,KAAK,CAACT,OAAN,GAAgBO,OAAO,CAACI,KAAxB;IACD;;IACD,IAAIJ,OAAO,CAACG,UAAR,KAAuB,YAA3B,EAAyC;MACvCD,KAAK,CAACV,UAAN,GAAmB,CAACA,UAApB;IACD;;IACD,IAAIL,KAAK,CAACkB,QAAN,IAAkBL,OAAO,CAACG,UAAR,KAAuB,OAA7C,EAAsD;MACpDhB,KAAK,CAACkB,QAAN,CAAeC,OAAf,CAAuB,UAACC,IAAD,EAAU;QAC/B,IAAIN,IAAI,KAAKM,IAAI,CAACC,SAAlB,EAA6B;UAC3BN,KAAK,CAACR,QAAN,CAAgBO,IAAhB,IAAyB,IAAzB;QACD,CAFD,MAEO,IAAIM,IAAI,CAACJ,UAAT,EAAqB;UAC1BD,KAAK,CAACR,QAAN,CAAgBa,IAAI,CAACC,SAArB,IAAmC,KAAnC;QACD;MACF,CAND;IAOD,CARD,MAQO,IAAIP,IAAI,IAAID,OAAO,CAACS,MAApB,EAA4B;MACjCC,MAAM,CAACC,IAAP,CAAYT,KAAK,CAACR,QAAN,IAAkB,EAA9B,EAAkCY,OAAlC,CAA0C,UAACM,OAAD,EAAa;QACrDV,KAAK,CAACR,QAAN,CAAgBkB,OAAhB,IAA2B,KAA3B;MACD,CAFD;IAGD;;IAED,IAAIF,MAAM,CAACC,IAAP,CAAYT,KAAZ,EAAmBW,MAAvB,EAA+B;MAC7BjB,QAAQ,oCAAMM,KAAN,EAAR;IACD;;IACDP,mBAAmB,IAAIA,mBAAmB,CAACmB,cAApB,CAAmCd,OAAnC,CAAvB;EACD;;EAED,IAAAe,gBAAA,EAAU,YAAM;IACd,IAAIC,QAAQ,IAAI3B,QAAhB,EAA0B;MACxB,IAAIG,UAAJ,EAAgB;QACd;QACAwB,QAAQ,CAACC,IAAT,CAAcC,KAAd,CAAoB7B,QAApB,GAA+B,QAA/B;MACD,CAHD,MAGO;QACL;QACA,IAAI,CAACQ,gBAAgB,CAACsB,OAAtB,EAA+B;UAC7BtB,gBAAgB,CAACsB,OAAjB,GAA2BC,MAAM,CAACC,gBAAP,CAAwBL,QAAQ,CAACC,IAAjC,EAAuC,IAAvC,EAA6C5B,QAAxE;QACD,CAJI,CAKL;;;QACA2B,QAAQ,CAACC,IAAT,CAAcC,KAAd,CAAoB7B,QAApB,GAA+BQ,gBAAgB,CAACsB,OAAhD;MACD;IACF;EACF,CAdD,EAcG,CAAC3B,UAAD,EAAaK,gBAAb,EAA+BR,QAA/B,CAdH;EAgBA,oBACE;IAAA,UACG,CAACF,KAAK,CAACkB,QAAN,IAAkB,EAAnB,EAAuBiB,GAAvB,CAA2B,UAACf,IAAD,EAAOgB,GAAP,EAAe;MACzC,IAAIhB,IAAI,CAACJ,UAAL,KAAoB,SAAxB,EAAmC;QACjC,oBAAO,6FAAkBI,IAAI,CAACiB,OAAvB;UAAgC,SAAS,YAAKpC,SAAL;QAAzC,IAASmC,GAAT,CAAP;MACD;;MACD,IAAI,CAAChB,IAAI,CAACJ,UAAV,EAAsB,oBAAO,qBAAC,eAAD,MAAeoB,GAAf,CAAP;MACtB,IAAME,SAAS,GACZjC,UAAU,IAAIe,IAAI,CAACJ,UAAL,KAAoB,YAAnC,IAAqDI,IAAI,CAACJ,UAAL,KAAoB,SAApB,IAAiCV,OAAO,KAAKc,IAAI,CAACH,KADzG;MAEA,IAAMsB,SAAS,GACbnB,IAAI,CAACoB,QAAL,IAAiB,OAAOpB,IAAI,CAACoB,QAAZ,KAAyB,UAA1C,GACIpB,IAAI,CAACoB,QAAL,CAAc;QACZC,QAAQ,EAAE;UAAA,OAAMjC,mBAAmB,CAAEiC,QAArB,EAAN;QAAA,CADE;QAEZC,OAAO,EAAElC,mBAAmB,GAAGA,mBAAmB,CAAEkC,OAAxB,GAAkCC,SAFlD;QAGZC,KAAK,EAAE;UAAA,OAAMhC,WAAW,CAAC,EAAD,EAAKQ,IAAI,CAACC,SAAV,CAAjB;QAAA,CAHK;QAIZwB,OAAO,EAAE;UAAA,OAAMjC,WAAW,CAAC;YAAEiC,OAAO,EAAEzB,IAAI,CAACyB;UAAhB,CAAD,CAAjB;QAAA;MAJG,CAAd,CADJ,GAOIF,SARN;MASA,IAAMG,QAAQ,GAAGvC,QAAQ,IAAID,OAAZ,IAAuBA,OAAO,KAAK,SAAnC,IAAgD,CAAC,uBAAuByC,IAAvB,CAA4B3B,IAAI,CAACJ,UAAjC,CAAlE;MACA,oBACE,8FAAkBI,IAAI,CAACiB,OAAvB;QAAgC,SAAS,EAAEC,SAAS,cAAc,EAAlE;QAAA,WACGlB,IAAI,CAAC4B,MAAL,IAAe,OAAO5B,IAAI,CAAC4B,MAAZ,KAAuB,UAAtC,IAAoD5B,IAAI,CAAC4B,MAAL,CAAY5B,IAAZ,EAAkB,CAAC,CAAC0B,QAApB,EAA8BlC,WAA9B,EAA2CwB,GAA3C,CADvD,EAEG,CAAChB,IAAI,CAAC4B,MAAN,IAAgB,CAAC5B,IAAI,CAAC6B,WAAtB,IAAqC7B,IAAI,CAAC8B,IAF7C,EAGG,CAAC9B,IAAI,CAAC4B,MAAN,IACC5B,IAAI,CAAC6B,WADN,iBAECE,iBAAA,CAAMC,aAAN,CACE,QADF;UAGIC,IAAI,EAAE,QAHV;UAIIC,GAAG,EAAElB,GAJT;UAKIU,QAAQ,EAARA,QALJ;UAMI,aAAa1B,IAAI,CAACN;QANtB,GAOOM,IAAI,CAAC6B,WAPZ;UAQIM,OAAO,EAAE,iBAACC,GAAD,EAA0D;YACjEA,GAAG,CAACC,eAAJ;YACA7C,WAAW,CAACQ,IAAD,EAAOA,IAAI,CAACC,SAAZ,CAAX;UACD;QAXL,IAaED,IAAI,CAAC8B,IAbP,CALJ,EAoBG9B,IAAI,CAACoB,QAAL,iBACC,qBAAC,iBAAD;UACE,QAAQ,EAAEtC,QADZ;UAEE,SAAS,EAAEkB,IAAI,CAACC,SAFlB;UAGE,SAAS,EAAEpB,SAHb;UAIE,QAAQ,EAAEsC,SAJZ;UAKE,QAAQ,EAAEmB,KAAK,CAACC,OAAN,CAAcvC,IAAI,CAACoB,QAAnB,IAA+BpB,IAAI,CAACoB,QAApC,GAA+CG;QAL3D,EArBJ;MAAA,IAASP,GAAT,CADF;IAgCD,CAjDA;EADH,EADF;AAsDD;;AAEc,SAASwB,OAAT,GAA4C;EAAA,IAA3B5D,KAA2B,uEAAJ,EAAI;EACzD,IAAQC,SAAR,GAA2DD,KAA3D,CAAQC,SAAR;EAAA,oBAA2DD,KAA3D,CAAmB6D,MAAnB;EAAA,IAAmBA,MAAnB,8BAA4B,EAA5B;EAAA,IAAgCC,aAAhC,GAA2D9D,KAA3D,CAAgC8D,aAAhC;EAAA,IAA+CC,OAA/C,GAA2D/D,KAA3D,CAA+C+D,OAA/C;;EACA,mBAAoC,IAAA5D,iBAAA,EAAWC,sBAAX,CAApC;EAAA,IAAQc,QAAR,gBAAQA,QAAR;EAAA,IAAkB8C,aAAlB,gBAAkBA,aAAlB;;EACA,IAAMC,eAAe,GAAGH,aAAa,GAAG,QAAH,GAAc,EAAnD;EACA,oBACE;IAAK,SAAS,YAAK7D,SAAL,sBAA0BgE,eAA1B,CAAd;IAA2D,KAAK,EAAE;MAAEJ,MAAM,EAANA;IAAF,CAAlE;IAAA,wBACE,qBAAC,YAAD,oEAAkB7D,KAAlB;MAAyB,QAAQ,EAAEA,KAAK,CAACkB,QAAN,IAAkBA,QAAlB,IAA8B;IAAjE,GADF,EAEG,CAAC6C,OAAD,iBAAY,qBAAC,YAAD,oEAAkB/D,KAAlB;MAAyB,QAAQ,EAAEgE,aAAa,IAAI;IAApD,GAFf;EAAA,EADF;AAMD"
 }

package/lib/index.less

@@ -72,6 +72,7 @@
     left: 0;
     right: 0;
     bottom: 0;
+    height: 100% !important;
   }
   &-fullscreen &-content {
     height: 100%;

package/markdown-editor.css

@@ -312,6 +312,7 @@
   left: 0;
   right: 0;
   bottom: 0;
+  height: 100% !important;
 }
 .w-md-editor-fullscreen .w-md-editor-content {
   height: 100%;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uiw/react-md-editor",
-  "version": "3.14.4",
+  "version": "3.16.0",
   "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.10",
+    "@uiw/react-markdown-preview": "^4.0.22",
     "rehype": "~12.0.1"
   },
   "keywords": [

package/src/Context.tsx

@@ -8,7 +8,7 @@ export type ContextStore = {
   extraCommands?: ICommand<string>[];
   markdown?: string;
   preview?: PreviewType;
-  height?: number;
+  height?: React.CSSProperties['height'];
   fullscreen?: boolean;
   highlightEnable?: boolean;
   autoFocus?: boolean;

package/src/Editor.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useReducer, useMemo, useRef, useImperativeHandle } from 'react';
+import React, { useEffect, useReducer, useMemo, useRef, useImperativeHandle, CSSProperties } from 'react';
 import MarkdownPreview, { MarkdownPreviewProps, MarkdownPreviewRef } from '@uiw/react-markdown-preview';
 import TextArea, { ITextAreaProps } from './components/TextArea';
 import Toolbar from './components/Toolbar';
@@ -24,7 +24,7 @@ export interface MDEditorProps extends Omit<React.HTMLAttributes<HTMLDivElement>
   /**
    * editor height change listener
    */
-  onHeightChange?: (value?: number, oldValue?: number, state?: ContextStore) => void;
+  onHeightChange?: (value?: CSSProperties['height'], oldValue?: CSSProperties['height'], state?: ContextStore) => void;
   /**
    * Can be used to make `Markdown Editor` focus itself on initialization. Defaults to on.
    * it will be set to true when either the source `textarea` is focused,
@@ -33,8 +33,9 @@ export interface MDEditorProps extends Omit<React.HTMLAttributes<HTMLDivElement>
   autoFocus?: ITextAreaProps['autoFocus'];
   /**
    * The height of the editor.
+   * ⚠️ `Dragbar` is invalid when **`height`** parameter percentage.
    */
-  height?: number;
+  height?: CSSProperties['height'];
   /**
    * Custom toolbar heigth
    * @default 29px
@@ -287,7 +288,6 @@ const InternalMDEditor = (
     ),
     [prefixCls, previewOptions, state.markdown],
   );
-
   return (
     <EditorContext.Provider value={{ ...state, dispatch }}>
       <div
@@ -299,7 +299,7 @@ const InternalMDEditor = (
         }}
         style={{
           ...other.style,
-          height: state.fullscreen ? '100%' : hideToolbar ? Number(state.height) - toolbarHeight : state.height,
+          height: state.height || '100%',
         }}
       >
         {!hideToolbar && !toolbarBottom && (
@@ -308,7 +308,7 @@ const InternalMDEditor = (
         <div
           className={`${prefixCls}-content`}
           style={{
-            height: state.fullscreen ? `calc(100% - ${toolbarHeight}px)` : Number(state.height) - toolbarHeight,
+            height: `calc(100% - ${toolbarHeight}px)`,
           }}
         >
           {/(edit|live)/.test(state.preview || '') && (

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,
+  ) => React.ReactElement;
   execute?: (
     state: TextState,
     api: TextAreaTextApi,

package/src/components/Toolbar/index.tsx

@@ -85,8 +85,10 @@ export function ToolbarItems(props: IToolbarProps) {
         const disabled = barPopup && preview && preview === 'preview' && !/(preview|fullscreen)/.test(item.keyCommand);
         return (
           <li key={idx} {...item.liProps} className={activeBtn ? `active` : ''}>
-            {!item.buttonProps && item.icon}
-            {item.buttonProps &&
+            {item.render && typeof item.render === 'function' && item.render(item, !!disabled, handleClick, idx)}
+            {!item.render && !item.buttonProps && item.icon}
+            {!item.render &&
+              item.buttonProps &&
               React.createElement(
                 'button',
                 {

package/src/index.less

@@ -72,6 +72,7 @@
     left: 0;
     right: 0;
     bottom: 0;
+    height: 100% !important;
   }
   &-fullscreen &-content {
     height: 100%;