@uiw/react-md-editor 3.14.5 → 3.17.0

package/lib/Editor.js

@@ -31,7 +31,7 @@ var _Context = require("./Context");
 
 var _jsxRuntime = require("react/jsx-runtime");
 
-var _excluded = ["prefixCls", "className", "value", "commands", "commandsFilter", "extraCommands", "height", "toolbarHeight", "enableScroll", "visibleDragbar", "highlightEnable", "preview", "fullscreen", "overflow", "previewOptions", "textareaProps", "maxHeight", "minHeight", "autoFocus", "tabSize", "defaultTabEnable", "onChange", "onHeightChange", "hideToolbar", "toolbarBottom", "renderTextarea"];
+var _excluded = ["prefixCls", "className", "value", "commands", "commandsFilter", "extraCommands", "height", "toolbarHeight", "enableScroll", "visibleDragbar", "highlightEnable", "preview", "fullscreen", "overflow", "previewOptions", "textareaProps", "maxHeight", "minHeight", "autoFocus", "tabSize", "defaultTabEnable", "onChange", "onHeightChange", "hideToolbar", "toolbarBottom", "components", "renderTextarea"];
 
 function setGroupPopFalse() {
   var data = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
@@ -85,6 +85,7 @@ var InternalMDEditor = function InternalMDEditor(props, ref) {
       hideToolbar = _ref.hideToolbar,
       _ref$toolbarBottom = _ref.toolbarBottom,
       toolbarBottom = _ref$toolbarBottom === void 0 ? false : _ref$toolbarBottom,
+      components = _ref.components,
       renderTextarea = _ref.renderTextarea,
       other = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
 
@@ -98,6 +99,7 @@ var InternalMDEditor = function InternalMDEditor(props, ref) {
   var _useReducer = (0, _react.useReducer)(_Context.reducer, {
     markdown: propsValue,
     preview: previewType,
+    components: components,
     height: height,
     highlightEnable: highlightEnable,
     tabSize: tabSize,
@@ -257,7 +259,7 @@ var InternalMDEditor = function InternalMDEditor(props, ref) {
         });
       },
       style: (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, other.style), {}, {
-        height: state.fullscreen ? '100%' : hideToolbar ? Number(state.height) - toolbarHeight : state.height
+        height: state.height || '100%'
       }),
       children: [!hideToolbar && !toolbarBottom && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Toolbar["default"], {
         prefixCls: prefixCls,
@@ -267,7 +269,7 @@ var InternalMDEditor = function InternalMDEditor(props, ref) {
       }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         className: "".concat(prefixCls, "-content"),
         style: {
-          height: state.fullscreen ? "calc(100% - ".concat(toolbarHeight, "px)") : Number(state.height) - toolbarHeight
+          height: "calc(100% - ".concat(toolbarHeight, "px)")
         },
         children: [/(edit|live)/.test(state.preview || '') && /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextArea["default"], (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
           className: "".concat(prefixCls, "-input"),
@@ -281,7 +283,7 @@ var InternalMDEditor = function InternalMDEditor(props, ref) {
               textareaProps.onChange(evn);
             }
           },
-          renderTextarea: renderTextarea,
+          renderTextarea: (components === null || components === void 0 ? void 0 : components.textarea) || renderTextarea,
           onScroll: function onScroll(e) {
             return handleScroll(e, 'text');
           }

package/lib/Editor.js.map

@@ -40,6 +40,7 @@
     "onHeightChange",
     "hideToolbar",
     "toolbarBottom",
+    "components",
     "renderTextarea",
     "other",
     "cmds",
@@ -86,9 +87,9 @@
     "target",
     "mdPreview",
     "style",
-    "Number",
     "test",
     "evn",
+    "textarea",
     "newHeight",
     "mdEditor",
     "React",
@@ -100,7 +101,7 @@
     "../src/Editor.tsx"
   ],
   "sourcesContent": [
-    "import React, { useEffect, useReducer, useMemo, useRef, useImperativeHandle } from 'react';\nimport MarkdownPreview, { MarkdownPreviewProps, MarkdownPreviewRef } from '@uiw/react-markdown-preview';\nimport TextArea, { ITextAreaProps } from './components/TextArea';\nimport Toolbar from './components/Toolbar';\nimport DragBar from './components/DragBar';\nimport { getCommands, getExtraCommands, ICommand } from './commands';\nimport { reducer, EditorContext, ContextStore, PreviewType } from './Context';\nimport './index.less';\n\nexport interface IProps {\n  prefixCls?: string;\n  className?: string;\n}\n\nexport interface MDEditorProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'>, IProps {\n  /**\n   * The Markdown value.\n   */\n  value?: string;\n  /**\n   * Event handler for the `onChange` event.\n   */\n  onChange?: (value?: string, event?: React.ChangeEvent<HTMLTextAreaElement>, state?: ContextStore) => void;\n  /**\n   * editor height change listener\n   */\n  onHeightChange?: (value?: number, oldValue?: number, state?: ContextStore) => void;\n  /**\n   * Can be used to make `Markdown Editor` focus itself on initialization. Defaults to on.\n   * it will be set to true when either the source `textarea` is focused,\n   * or it has an `autofocus` attribute and no other element is focused.\n   */\n  autoFocus?: ITextAreaProps['autoFocus'];\n  /**\n   * The height of the editor.\n   */\n  height?: number;\n  /**\n   * Custom toolbar heigth\n   * @default 29px\n   */\n  toolbarHeight?: number;\n  /**\n   * Show drag and drop tool. Set the height of the editor.\n   */\n  visibleDragbar?: boolean;\n  /**\n   * @deprecated use `visibleDragbar`\n   */\n  visiableDragbar?: boolean;\n  /**\n   * Show markdown preview.\n   */\n  preview?: PreviewType;\n  /**\n   * Full screen display editor.\n   */\n  fullscreen?: boolean;\n  /**\n   * Disable `fullscreen` setting body styles\n   */\n  overflow?: boolean;\n  /**\n   * Maximum drag height. `visibleDragbar=true`\n   */\n  maxHeight?: number;\n  /**\n   * Minimum drag height. `visibleDragbar=true`\n   */\n  minHeight?: number;\n  /**\n   * This is reset [react-markdown](https://github.com/rexxars/react-markdown) settings.\n   */\n  previewOptions?: Omit<MarkdownPreviewProps, 'source'>;\n  /**\n   * Set the `textarea` related props.\n   */\n  textareaProps?: ITextAreaProps;\n  /** Use div to replace TextArea or re-render TextArea */\n  renderTextarea?: ITextAreaProps['renderTextarea'];\n  /**\n   * Disable editing area code highlighting. The value is `false`, which increases the editing speed.\n   * @default true\n   */\n  highlightEnable?: boolean;\n  /**\n   * The number of characters to insert when pressing tab key.\n   * Default `2` spaces.\n   */\n  tabSize?: number;\n  /**\n   * If `false`, the `tab` key inserts a tab character into the textarea. If `true`, the `tab` key executes default behavior e.g. focus shifts to next element.\n   */\n  defaultTabEnable?: boolean;\n  /**\n   * You can create your own commands or reuse existing commands.\n   */\n  commands?: ICommand[];\n  /**\n   * Filter or modify your commands.\n   * https://github.com/uiwjs/react-md-editor/issues/296\n   */\n  commandsFilter?: (command: ICommand, isExtra: boolean) => false | ICommand;\n  /**\n   * You can create your own commands or reuse existing commands.\n   */\n  extraCommands?: ICommand[];\n  /**\n   * Hide the tool bar\n   */\n  hideToolbar?: boolean;\n  /** Whether to enable scrolling */\n  enableScroll?: boolean;\n  /** Toolbar on bottom */\n  toolbarBottom?: boolean;\n}\n\nfunction setGroupPopFalse(data: Record<string, boolean> = {}) {\n  Object.keys(data).forEach((keyname) => {\n    data[keyname] = false;\n  });\n  return data;\n}\n\nconst InternalMDEditor = (\n  props: MDEditorProps,\n  ref?: ((instance: ContextStore) => void) | React.RefObject<ContextStore> | null,\n) => {\n  const {\n    prefixCls = 'w-md-editor',\n    className,\n    value: propsValue,\n    commands = getCommands(),\n    commandsFilter,\n    extraCommands = getExtraCommands(),\n    height = 200,\n    toolbarHeight = 29,\n    enableScroll = true,\n    visibleDragbar = typeof props.visiableDragbar === 'boolean' ? props.visiableDragbar : true,\n    highlightEnable = true,\n    preview: previewType = 'live',\n    fullscreen = false,\n    overflow = true,\n    previewOptions = {},\n    textareaProps,\n    maxHeight = 1200,\n    minHeight = 100,\n    autoFocus,\n    tabSize = 2,\n    defaultTabEnable = false,\n    onChange,\n    onHeightChange,\n    hideToolbar,\n    toolbarBottom = false,\n    renderTextarea,\n    ...other\n  } = props || {};\n  const cmds = commands\n    .map((item) => (commandsFilter ? commandsFilter(item, false) : item))\n    .filter(Boolean) as ICommand[];\n  const extraCmds = extraCommands\n    .map((item) => (commandsFilter ? commandsFilter(item, true) : item))\n    .filter(Boolean) as ICommand[];\n  let [state, dispatch] = useReducer(reducer, {\n    markdown: propsValue,\n    preview: previewType,\n    height,\n    highlightEnable,\n    tabSize,\n    defaultTabEnable,\n    scrollTop: 0,\n    scrollTopPreview: 0,\n    commands: cmds,\n    extraCommands: extraCmds,\n    fullscreen,\n    barPopup: {},\n  });\n  const container = useRef<HTMLDivElement>(null);\n  const previewRef = useRef<MarkdownPreviewRef>(null);\n  const enableScrollRef = useRef(enableScroll);\n\n  useImperativeHandle(ref, () => ({ ...state }));\n  useMemo(() => (enableScrollRef.current = enableScroll), [enableScroll]);\n  useEffect(() => {\n    const stateInit: ContextStore = {};\n    if (container.current) {\n      stateInit.container = container.current || undefined;\n    }\n    stateInit.markdown = propsValue || '';\n    stateInit.barPopup = {};\n    if (dispatch) {\n      dispatch({ ...state, ...stateInit });\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  const cls = [\n    className,\n    'wmde-markdown-var',\n    prefixCls,\n    state.preview ? `${prefixCls}-show-${state.preview}` : null,\n    state.fullscreen ? `${prefixCls}-fullscreen` : null,\n  ]\n    .filter(Boolean)\n    .join(' ')\n    .trim();\n\n  useMemo(\n    () => propsValue !== state.markdown && dispatch({ markdown: propsValue || '' }),\n    [propsValue, state.markdown],\n  );\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  useMemo(() => previewType !== state.preview && dispatch({ preview: previewType }), [previewType]);\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  useMemo(() => tabSize !== state.tabSize && dispatch({ tabSize }), [tabSize]);\n  useMemo(\n    () => highlightEnable !== state.highlightEnable && dispatch({ highlightEnable }),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [highlightEnable],\n  );\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  useMemo(() => autoFocus !== state.autoFocus && dispatch({ autoFocus: autoFocus }), [autoFocus]);\n  useMemo(\n    () => fullscreen !== state.fullscreen && dispatch({ fullscreen: fullscreen }),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [fullscreen],\n  );\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  useMemo(() => height !== state.height && dispatch({ height: height }), [height]);\n  useMemo(\n    () => height !== state.height && onHeightChange && onHeightChange(state.height, height, state),\n    [height, onHeightChange, state],\n  );\n\n  const textareaDomRef = useRef<HTMLDivElement>();\n  const active = useRef<'text' | 'preview'>('preview');\n  const initScroll = useRef(false);\n\n  useMemo(() => {\n    textareaDomRef.current = state.textareaWarp;\n    if (state.textareaWarp) {\n      state.textareaWarp.addEventListener('mouseover', () => {\n        active.current = 'text';\n      });\n      state.textareaWarp.addEventListener('mouseleave', () => {\n        active.current = 'preview';\n      });\n    }\n  }, [state.textareaWarp]);\n\n  const handleScroll = (e: React.UIEvent<HTMLDivElement>, type: 'text' | 'preview') => {\n    if (!enableScrollRef.current) return;\n    const textareaDom = textareaDomRef.current;\n    const previewDom = previewRef.current ? previewRef.current.mdp.current : undefined;\n    if (!initScroll.current) {\n      active.current = type;\n      initScroll.current = true;\n    }\n    if (textareaDom && previewDom) {\n      const scale =\n        (textareaDom.scrollHeight - textareaDom.offsetHeight) / (previewDom.scrollHeight - previewDom.offsetHeight);\n      if (e.target === textareaDom && active.current === 'text') {\n        previewDom.scrollTop = textareaDom.scrollTop / scale;\n      }\n      if (e.target === previewDom && active.current === 'preview') {\n        textareaDom.scrollTop = previewDom.scrollTop * scale;\n      }\n      let scrollTop = 0;\n      if (active.current === 'text') {\n        scrollTop = textareaDom.scrollTop || 0;\n      } else if (active.current === 'preview') {\n        scrollTop = previewDom.scrollTop || 0;\n      }\n      dispatch({ scrollTop });\n    }\n  };\n\n  const mdPreview = useMemo(\n    () => (\n      <MarkdownPreview\n        {...previewOptions}\n        onScroll={(e) => handleScroll(e, 'preview')}\n        ref={previewRef}\n        source={state.markdown || ''}\n        className={`${prefixCls}-preview ${previewOptions.className || ''}`}\n      />\n    ),\n    [prefixCls, previewOptions, state.markdown],\n  );\n\n  return (\n    <EditorContext.Provider value={{ ...state, dispatch }}>\n      <div\n        ref={container}\n        className={cls}\n        {...other}\n        onClick={() => {\n          dispatch({ barPopup: { ...setGroupPopFalse(state.barPopup) } });\n        }}\n        style={{\n          ...other.style,\n          height: state.fullscreen ? '100%' : hideToolbar ? Number(state.height) - toolbarHeight : state.height,\n        }}\n      >\n        {!hideToolbar && !toolbarBottom && (\n          <Toolbar prefixCls={prefixCls} height={toolbarHeight} overflow={overflow} toolbarBottom={toolbarBottom} />\n        )}\n        <div\n          className={`${prefixCls}-content`}\n          style={{\n            height: state.fullscreen ? `calc(100% - ${toolbarHeight}px)` : Number(state.height) - toolbarHeight,\n          }}\n        >\n          {/(edit|live)/.test(state.preview || '') && (\n            <TextArea\n              className={`${prefixCls}-input`}\n              prefixCls={prefixCls}\n              autoFocus={autoFocus}\n              {...textareaProps}\n              onChange={(evn) => {\n                onChange && onChange(evn.target.value, evn, state);\n                if (textareaProps && textareaProps.onChange) {\n                  textareaProps.onChange(evn);\n                }\n              }}\n              renderTextarea={renderTextarea}\n              onScroll={(e) => handleScroll(e, 'text')}\n            />\n          )}\n          {/(live|preview)/.test(state.preview || '') && mdPreview}\n        </div>\n        {visibleDragbar && !state.fullscreen && (\n          <DragBar\n            prefixCls={prefixCls}\n            height={state.height as number}\n            maxHeight={maxHeight!}\n            minHeight={minHeight!}\n            onChange={(newHeight) => {\n              dispatch({ height: newHeight });\n            }}\n          />\n        )}\n        {!hideToolbar && toolbarBottom && (\n          <Toolbar prefixCls={prefixCls} height={toolbarHeight} overflow={overflow} toolbarBottom={toolbarBottom} />\n        )}\n      </div>\n    </EditorContext.Provider>\n  );\n};\n\nconst mdEditor = React.forwardRef<ContextStore, MDEditorProps>(InternalMDEditor);\n\ntype MDEditor = typeof mdEditor & {\n  Markdown: typeof MarkdownPreview;\n};\n\n(mdEditor as MDEditor).Markdown = MarkdownPreview;\n\nexport default mdEditor as MDEditor;\n"
+    "import React, { useEffect, useReducer, useMemo, useRef, useImperativeHandle, CSSProperties } from 'react';\nimport MarkdownPreview, { MarkdownPreviewProps, MarkdownPreviewRef } from '@uiw/react-markdown-preview';\nimport TextArea, { ITextAreaProps } from './components/TextArea';\nimport Toolbar from './components/Toolbar';\nimport DragBar from './components/DragBar';\nimport { getCommands, getExtraCommands, ICommand } from './commands';\nimport { reducer, EditorContext, ContextStore, PreviewType } from './Context';\nimport './index.less';\n\nexport interface IProps {\n  prefixCls?: string;\n  className?: string;\n}\n\nexport interface MDEditorProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'>, IProps {\n  /**\n   * The Markdown value.\n   */\n  value?: string;\n  /**\n   * Event handler for the `onChange` event.\n   */\n  onChange?: (value?: string, event?: React.ChangeEvent<HTMLTextAreaElement>, state?: ContextStore) => void;\n  /**\n   * editor height change listener\n   */\n  onHeightChange?: (value?: CSSProperties['height'], oldValue?: CSSProperties['height'], state?: ContextStore) => void;\n  /**\n   * Can be used to make `Markdown Editor` focus itself on initialization. Defaults to on.\n   * it will be set to true when either the source `textarea` is focused,\n   * or it has an `autofocus` attribute and no other element is focused.\n   */\n  autoFocus?: ITextAreaProps['autoFocus'];\n  /**\n   * The height of the editor.\n   * ⚠️ `Dragbar` is invalid when **`height`** parameter percentage.\n   */\n  height?: CSSProperties['height'];\n  /**\n   * Custom toolbar heigth\n   * @default 29px\n   */\n  toolbarHeight?: number;\n  /**\n   * Show drag and drop tool. Set the height of the editor.\n   */\n  visibleDragbar?: boolean;\n  /**\n   * @deprecated use `visibleDragbar`\n   */\n  visiableDragbar?: boolean;\n  /**\n   * Show markdown preview.\n   */\n  preview?: PreviewType;\n  /**\n   * Full screen display editor.\n   */\n  fullscreen?: boolean;\n  /**\n   * Disable `fullscreen` setting body styles\n   */\n  overflow?: boolean;\n  /**\n   * Maximum drag height. `visibleDragbar=true`\n   */\n  maxHeight?: number;\n  /**\n   * Minimum drag height. `visibleDragbar=true`\n   */\n  minHeight?: number;\n  /**\n   * This is reset [react-markdown](https://github.com/rexxars/react-markdown) settings.\n   */\n  previewOptions?: Omit<MarkdownPreviewProps, 'source'>;\n  /**\n   * Set the `textarea` related props.\n   */\n  textareaProps?: ITextAreaProps;\n  /**\n   * Use div to replace TextArea or re-render TextArea\n   * @deprecated Please use ~~`renderTextarea`~~ -> `components`\n   */\n  renderTextarea?: ITextAreaProps['renderTextarea'];\n  /**\n   * re-render element\n   */\n  components?: {\n    /** Use div to replace TextArea or re-render TextArea */\n    textarea?: ITextAreaProps['renderTextarea'];\n    /**\n     * Override the default command element\n     * _`toolbar`_ < _`command[].render`_\n     */\n    toolbar?: ICommand['render'];\n  };\n  /**\n   * Disable editing area code highlighting. The value is `false`, which increases the editing speed.\n   * @default true\n   */\n  highlightEnable?: boolean;\n  /**\n   * The number of characters to insert when pressing tab key.\n   * Default `2` spaces.\n   */\n  tabSize?: number;\n  /**\n   * If `false`, the `tab` key inserts a tab character into the textarea. If `true`, the `tab` key executes default behavior e.g. focus shifts to next element.\n   */\n  defaultTabEnable?: boolean;\n  /**\n   * You can create your own commands or reuse existing commands.\n   */\n  commands?: ICommand[];\n  /**\n   * Filter or modify your commands.\n   * https://github.com/uiwjs/react-md-editor/issues/296\n   */\n  commandsFilter?: (command: ICommand, isExtra: boolean) => false | ICommand;\n  /**\n   * You can create your own commands or reuse existing commands.\n   */\n  extraCommands?: ICommand[];\n  /**\n   * Hide the tool bar\n   */\n  hideToolbar?: boolean;\n  /** Whether to enable scrolling */\n  enableScroll?: boolean;\n  /** Toolbar on bottom */\n  toolbarBottom?: boolean;\n}\n\nfunction setGroupPopFalse(data: Record<string, boolean> = {}) {\n  Object.keys(data).forEach((keyname) => {\n    data[keyname] = false;\n  });\n  return data;\n}\n\nconst InternalMDEditor = (\n  props: MDEditorProps,\n  ref?: ((instance: ContextStore) => void) | React.RefObject<ContextStore> | null,\n) => {\n  const {\n    prefixCls = 'w-md-editor',\n    className,\n    value: propsValue,\n    commands = getCommands(),\n    commandsFilter,\n    extraCommands = getExtraCommands(),\n    height = 200,\n    toolbarHeight = 29,\n    enableScroll = true,\n    visibleDragbar = typeof props.visiableDragbar === 'boolean' ? props.visiableDragbar : true,\n    highlightEnable = true,\n    preview: previewType = 'live',\n    fullscreen = false,\n    overflow = true,\n    previewOptions = {},\n    textareaProps,\n    maxHeight = 1200,\n    minHeight = 100,\n    autoFocus,\n    tabSize = 2,\n    defaultTabEnable = false,\n    onChange,\n    onHeightChange,\n    hideToolbar,\n    toolbarBottom = false,\n    components,\n    renderTextarea,\n    ...other\n  } = props || {};\n  const cmds = commands\n    .map((item) => (commandsFilter ? commandsFilter(item, false) : item))\n    .filter(Boolean) as ICommand[];\n  const extraCmds = extraCommands\n    .map((item) => (commandsFilter ? commandsFilter(item, true) : item))\n    .filter(Boolean) as ICommand[];\n  let [state, dispatch] = useReducer(reducer, {\n    markdown: propsValue,\n    preview: previewType,\n    components,\n    height,\n    highlightEnable,\n    tabSize,\n    defaultTabEnable,\n    scrollTop: 0,\n    scrollTopPreview: 0,\n    commands: cmds,\n    extraCommands: extraCmds,\n    fullscreen,\n    barPopup: {},\n  });\n  const container = useRef<HTMLDivElement>(null);\n  const previewRef = useRef<MarkdownPreviewRef>(null);\n  const enableScrollRef = useRef(enableScroll);\n\n  useImperativeHandle(ref, () => ({ ...state }));\n  useMemo(() => (enableScrollRef.current = enableScroll), [enableScroll]);\n  useEffect(() => {\n    const stateInit: ContextStore = {};\n    if (container.current) {\n      stateInit.container = container.current || undefined;\n    }\n    stateInit.markdown = propsValue || '';\n    stateInit.barPopup = {};\n    if (dispatch) {\n      dispatch({ ...state, ...stateInit });\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  const cls = [\n    className,\n    'wmde-markdown-var',\n    prefixCls,\n    state.preview ? `${prefixCls}-show-${state.preview}` : null,\n    state.fullscreen ? `${prefixCls}-fullscreen` : null,\n  ]\n    .filter(Boolean)\n    .join(' ')\n    .trim();\n\n  useMemo(\n    () => propsValue !== state.markdown && dispatch({ markdown: propsValue || '' }),\n    [propsValue, state.markdown],\n  );\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  useMemo(() => previewType !== state.preview && dispatch({ preview: previewType }), [previewType]);\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  useMemo(() => tabSize !== state.tabSize && dispatch({ tabSize }), [tabSize]);\n  useMemo(\n    () => highlightEnable !== state.highlightEnable && dispatch({ highlightEnable }),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [highlightEnable],\n  );\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  useMemo(() => autoFocus !== state.autoFocus && dispatch({ autoFocus: autoFocus }), [autoFocus]);\n  useMemo(\n    () => fullscreen !== state.fullscreen && dispatch({ fullscreen: fullscreen }),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [fullscreen],\n  );\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  useMemo(() => height !== state.height && dispatch({ height: height }), [height]);\n  useMemo(\n    () => height !== state.height && onHeightChange && onHeightChange(state.height, height, state),\n    [height, onHeightChange, state],\n  );\n\n  const textareaDomRef = useRef<HTMLDivElement>();\n  const active = useRef<'text' | 'preview'>('preview');\n  const initScroll = useRef(false);\n\n  useMemo(() => {\n    textareaDomRef.current = state.textareaWarp;\n    if (state.textareaWarp) {\n      state.textareaWarp.addEventListener('mouseover', () => {\n        active.current = 'text';\n      });\n      state.textareaWarp.addEventListener('mouseleave', () => {\n        active.current = 'preview';\n      });\n    }\n  }, [state.textareaWarp]);\n\n  const handleScroll = (e: React.UIEvent<HTMLDivElement>, type: 'text' | 'preview') => {\n    if (!enableScrollRef.current) return;\n    const textareaDom = textareaDomRef.current;\n    const previewDom = previewRef.current ? previewRef.current.mdp.current : undefined;\n    if (!initScroll.current) {\n      active.current = type;\n      initScroll.current = true;\n    }\n    if (textareaDom && previewDom) {\n      const scale =\n        (textareaDom.scrollHeight - textareaDom.offsetHeight) / (previewDom.scrollHeight - previewDom.offsetHeight);\n      if (e.target === textareaDom && active.current === 'text') {\n        previewDom.scrollTop = textareaDom.scrollTop / scale;\n      }\n      if (e.target === previewDom && active.current === 'preview') {\n        textareaDom.scrollTop = previewDom.scrollTop * scale;\n      }\n      let scrollTop = 0;\n      if (active.current === 'text') {\n        scrollTop = textareaDom.scrollTop || 0;\n      } else if (active.current === 'preview') {\n        scrollTop = previewDom.scrollTop || 0;\n      }\n      dispatch({ scrollTop });\n    }\n  };\n\n  const mdPreview = useMemo(\n    () => (\n      <MarkdownPreview\n        {...previewOptions}\n        onScroll={(e) => handleScroll(e, 'preview')}\n        ref={previewRef}\n        source={state.markdown || ''}\n        className={`${prefixCls}-preview ${previewOptions.className || ''}`}\n      />\n    ),\n    [prefixCls, previewOptions, state.markdown],\n  );\n  return (\n    <EditorContext.Provider value={{ ...state, dispatch }}>\n      <div\n        ref={container}\n        className={cls}\n        {...other}\n        onClick={() => {\n          dispatch({ barPopup: { ...setGroupPopFalse(state.barPopup) } });\n        }}\n        style={{\n          ...other.style,\n          height: state.height || '100%',\n        }}\n      >\n        {!hideToolbar && !toolbarBottom && (\n          <Toolbar prefixCls={prefixCls} height={toolbarHeight} overflow={overflow} toolbarBottom={toolbarBottom} />\n        )}\n        <div\n          className={`${prefixCls}-content`}\n          style={{\n            height: `calc(100% - ${toolbarHeight}px)`,\n          }}\n        >\n          {/(edit|live)/.test(state.preview || '') && (\n            <TextArea\n              className={`${prefixCls}-input`}\n              prefixCls={prefixCls}\n              autoFocus={autoFocus}\n              {...textareaProps}\n              onChange={(evn) => {\n                onChange && onChange(evn.target.value, evn, state);\n                if (textareaProps && textareaProps.onChange) {\n                  textareaProps.onChange(evn);\n                }\n              }}\n              renderTextarea={components?.textarea || renderTextarea}\n              onScroll={(e) => handleScroll(e, 'text')}\n            />\n          )}\n          {/(live|preview)/.test(state.preview || '') && mdPreview}\n        </div>\n        {visibleDragbar && !state.fullscreen && (\n          <DragBar\n            prefixCls={prefixCls}\n            height={state.height as number}\n            maxHeight={maxHeight!}\n            minHeight={minHeight!}\n            onChange={(newHeight) => {\n              dispatch({ height: newHeight });\n            }}\n          />\n        )}\n        {!hideToolbar && toolbarBottom && (\n          <Toolbar prefixCls={prefixCls} height={toolbarHeight} overflow={overflow} toolbarBottom={toolbarBottom} />\n        )}\n      </div>\n    </EditorContext.Provider>\n  );\n};\n\nconst mdEditor = React.forwardRef<ContextStore, MDEditorProps>(InternalMDEditor);\n\ntype MDEditor = typeof mdEditor & {\n  Markdown: typeof MarkdownPreview;\n};\n\n(mdEditor as MDEditor).Markdown = MarkdownPreview;\n\nexport default mdEditor as MDEditor;\n"
   ],
-  "mappings": "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"
+  "mappings": "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"
 }

package/lib/commands/index.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import { bold } from './bold';
 import { code, codeBlock } from './code';
 import { italic } from './italic';
@@ -44,6 +45,7 @@ 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, dispatch?: React.Dispatch<ContextStore>, executeCommandState?: ExecuteCommandState) => void;
 }
 export declare type ICommand<T = string> = ICommandChildCommands<T> | ICommandChildHandle<T>;

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  ) => void | undefined | null | 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

@@ -29,6 +29,7 @@ function ToolbarItems(props) {
       preview = _useContext.preview,
       _useContext$barPopup = _useContext.barPopup,
       barPopup = _useContext$barPopup === void 0 ? {} : _useContext$barPopup,
+      components = _useContext.components,
       commandOrchestrator = _useContext.commandOrchestrator,
       dispatch = _useContext.dispatch;
 
@@ -110,9 +111,11 @@ function ToolbarItems(props) {
         }
       }) : undefined;
       var disabled = barPopup && preview && preview === 'preview' && !/(preview|fullscreen)/.test(item.keyCommand);
+      var render = (components === null || components === void 0 ? void 0 : components.toolbar) || item.render;
+      var com = render && typeof render === 'function' ? render(item, !!disabled, handleClick, idx) : null;
       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: [com && /*#__PURE__*/_react["default"].isValidElement(com) && com, !com && !item.buttonProps && item.icon, !com && 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

@@ -10,6 +10,7 @@
     "fullscreen",
     "preview",
     "barPopup",
+    "components",
     "commandOrchestrator",
     "dispatch",
     "originalOverflow",
@@ -50,9 +51,13 @@
     "execute",
     "disabled",
     "test",
+    "render",
+    "toolbar",
+    "com",
+    "React",
+    "isValidElement",
     "buttonProps",
     "icon",
-    "React",
     "createElement",
     "type",
     "key",
@@ -72,7 +77,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 = {}, components, 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        const render = components?.toolbar || item.render;\n        const com = (\n          render && typeof render === 'function' ? render(item, !!disabled, handleClick, idx) : null\n        ) as React.ReactElement;\n        return (\n          <li key={idx} {...item.liProps} className={activeBtn ? `active` : ''}>\n            {com && React.isValidElement(com) && com}\n            {!com && !item.buttonProps && item.icon}\n            {!com &&\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": "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"
 }

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.5",
+  "version": "3.17.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>",

package/src/Context.tsx

@@ -1,14 +1,16 @@
 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;
   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
@@ -76,8 +77,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
@@ -152,6 +168,7 @@ const InternalMDEditor = (
     onHeightChange,
     hideToolbar,
     toolbarBottom = false,
+    components,
     renderTextarea,
     ...other
   } = props || {};
@@ -164,6 +181,7 @@ const InternalMDEditor = (
   let [state, dispatch] = useReducer(reducer, {
     markdown: propsValue,
     preview: previewType,
+    components,
     height,
     highlightEnable,
     tabSize,
@@ -287,7 +305,6 @@ const InternalMDEditor = (
     ),
     [prefixCls, previewOptions, state.markdown],
   );
-
   return (
     <EditorContext.Provider value={{ ...state, dispatch }}>
       <div
@@ -299,7 +316,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 +325,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 || '') && (
@@ -323,7 +340,7 @@ const InternalMDEditor = (
                   textareaProps.onChange(evn);
                 }
               }}
-              renderTextarea={renderTextarea}
+              renderTextarea={components?.textarea || renderTextarea}
               onScroll={(e) => handleScroll(e, 'text')}
             />
           )}

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/Toolbar/index.tsx

@@ -16,7 +16,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 +83,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',
                 {

package/src/index.less

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