@uiw/react-md-editor 3.17.0 → 3.18.0

package/lib/Editor.js.map

@@ -20,7 +20,6 @@
     "extraCommands",
     "getExtraCommands",
     "height",
-    "toolbarHeight",
     "enableScroll",
     "visibleDragbar",
     "visiableDragbar",
@@ -80,19 +79,20 @@
     "type",
     "textareaDom",
     "previewDom",
-    "mdp",
     "scale",
     "scrollHeight",
     "offsetHeight",
     "target",
+    "previewClassName",
     "mdPreview",
+    "React",
+    "isValidElement",
     "style",
     "test",
     "evn",
     "textarea",
     "newHeight",
     "mdEditor",
-    "React",
     "forwardRef",
     "Markdown",
     "MarkdownPreview"
@@ -101,7 +101,7 @@
     "../src/Editor.tsx"
   ],
   "sourcesContent": [
-    "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"
+    "import React, { useEffect, useReducer, useMemo, useRef, useImperativeHandle, CSSProperties } from 'react';\nimport MarkdownPreview, { MarkdownPreviewProps } 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   * @deprecated toolbar height adaptive: https://github.com/uiwjs/react-md-editor/issues/427\n   *\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    /** Custom markdown preview */\n    preview?: (source: string, state: ContextStore, dispath: React.Dispatch<ContextStore>) => JSX.Element;\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    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<HTMLDivElement>(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 : 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 previewClassName = `${prefixCls}-preview ${previewOptions.className || ''}`;\n  let mdPreview = useMemo(\n    () => (\n      <div ref={previewRef} className={previewClassName}>\n        <MarkdownPreview\n          {...previewOptions}\n          onScroll={(e) => handleScroll(e, 'preview')}\n          source={state.markdown || ''}\n        />\n      </div>\n    ),\n    [previewClassName, previewOptions, state.markdown],\n  );\n  const preview = components?.preview && components?.preview(state.markdown || '', state, dispatch);\n  if (preview && React.isValidElement(preview)) {\n    mdPreview = (\n      <div className={previewClassName} ref={previewRef} onScroll={(e) => handleScroll(e, 'preview')}>\n        {preview}\n      </div>\n    );\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.height || '100%',\n        }}\n      >\n        {!hideToolbar && !toolbarBottom && (\n          <Toolbar prefixCls={prefixCls} overflow={overflow} toolbarBottom={toolbarBottom} />\n        )}\n        <div className={`${prefixCls}-content`}>\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} 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/components/DragBar/index.less

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

package/lib/components/Toolbar/Child.js

@@ -39,7 +39,6 @@ function Child(props) {
       children: Array.isArray(commands) ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"], (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
         commands: commands
       }, props), {}, {
-        height: "",
         isChild: true
       })) : children
     });

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

@@ -20,7 +20,7 @@
     "../../../src/components/Toolbar/Child.tsx"
   ],
   "sourcesContent": [
-    "import React, { useContext, useMemo } from 'react';\nimport './Child.less';\nimport Toolbar, { IToolbarProps } from './';\nimport { EditorContext } from '../../Context';\n\nexport type ChildProps = IToolbarProps & {\n  children?: JSX.Element;\n  groupName?: string;\n};\n\nexport default function Child(props: ChildProps) {\n  const { prefixCls, groupName, commands, children } = props || {};\n  const { barPopup = {} } = useContext(EditorContext);\n  return useMemo(\n    () => (\n      <div\n        className={`${prefixCls}-toolbar-child ${groupName && barPopup[groupName] ? 'active' : ''}`}\n        onClick={(e) => e.stopPropagation()}\n      >\n        {Array.isArray(commands) ? <Toolbar commands={commands} {...props} height=\"\" isChild /> : children}\n      </div>\n    ),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [commands, barPopup, groupName, prefixCls],\n  );\n}\n"
+    "import React, { useContext, useMemo } from 'react';\nimport './Child.less';\nimport Toolbar, { IToolbarProps } from './';\nimport { EditorContext } from '../../Context';\n\nexport type ChildProps = IToolbarProps & {\n  children?: JSX.Element;\n  groupName?: string;\n};\n\nexport default function Child(props: ChildProps) {\n  const { prefixCls, groupName, commands, children } = props || {};\n  const { barPopup = {} } = useContext(EditorContext);\n  return useMemo(\n    () => (\n      <div\n        className={`${prefixCls}-toolbar-child ${groupName && barPopup[groupName] ? 'active' : ''}`}\n        onClick={(e) => e.stopPropagation()}\n      >\n        {Array.isArray(commands) ? <Toolbar commands={commands} {...props} isChild /> : children}\n      </div>\n    ),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [commands, barPopup, groupName, prefixCls],\n  );\n}\n"
   ],
-  "mappings": ";;;;;;;;;;;;;AAAA;;AAEA;;AACA;;;;AAOe,SAASA,KAAT,CAAeC,KAAf,EAAkC;EAC/C,WAAqDA,KAAK,IAAI,EAA9D;EAAA,IAAQC,SAAR,QAAQA,SAAR;EAAA,IAAmBC,SAAnB,QAAmBA,SAAnB;EAAA,IAA8BC,QAA9B,QAA8BA,QAA9B;EAAA,IAAwCC,QAAxC,QAAwCA,QAAxC;;EACA,kBAA0B,IAAAC,iBAAA,EAAWC,sBAAX,CAA1B;EAAA,uCAAQC,QAAR;EAAA,IAAQA,QAAR,qCAAmB,EAAnB;;EACA,OAAO,IAAAC,cAAA,EACL;IAAA,oBACE;MACE,SAAS,YAAKP,SAAL,4BAAgCC,SAAS,IAAIK,QAAQ,CAACL,SAAD,CAArB,GAAmC,QAAnC,GAA8C,EAA9E,CADX;MAEE,OAAO,EAAE,iBAACO,CAAD;QAAA,OAAOA,CAAC,CAACC,eAAF,EAAP;MAAA,CAFX;MAAA,UAIGC,KAAK,CAACC,OAAN,CAAcT,QAAd,iBAA0B,qBAAC,YAAD;QAAS,QAAQ,EAAEA;MAAnB,GAAiCH,KAAjC;QAAwC,MAAM,EAAC,EAA/C;QAAkD,OAAO;MAAzD,GAA1B,GAAyFI;IAJ5F,EADF;EAAA,CADK,EASL;EACA,CAACD,QAAD,EAAWI,QAAX,EAAqBL,SAArB,EAAgCD,SAAhC,CAVK,CAAP;AAYD"
+  "mappings": ";;;;;;;;;;;;;AAAA;;AAEA;;AACA;;;;AAOe,SAASA,KAAT,CAAeC,KAAf,EAAkC;EAC/C,WAAqDA,KAAK,IAAI,EAA9D;EAAA,IAAQC,SAAR,QAAQA,SAAR;EAAA,IAAmBC,SAAnB,QAAmBA,SAAnB;EAAA,IAA8BC,QAA9B,QAA8BA,QAA9B;EAAA,IAAwCC,QAAxC,QAAwCA,QAAxC;;EACA,kBAA0B,IAAAC,iBAAA,EAAWC,sBAAX,CAA1B;EAAA,uCAAQC,QAAR;EAAA,IAAQA,QAAR,qCAAmB,EAAnB;;EACA,OAAO,IAAAC,cAAA,EACL;IAAA,oBACE;MACE,SAAS,YAAKP,SAAL,4BAAgCC,SAAS,IAAIK,QAAQ,CAACL,SAAD,CAArB,GAAmC,QAAnC,GAA8C,EAA9E,CADX;MAEE,OAAO,EAAE,iBAACO,CAAD;QAAA,OAAOA,CAAC,CAACC,eAAF,EAAP;MAAA,CAFX;MAAA,UAIGC,KAAK,CAACC,OAAN,CAAcT,QAAd,iBAA0B,qBAAC,YAAD;QAAS,QAAQ,EAAEA;MAAnB,GAAiCH,KAAjC;QAAwC,OAAO;MAA/C,GAA1B,GAA+EI;IAJlF,EADF;EAAA,CADK,EASL;EACA,CAACD,QAAD,EAAWI,QAAX,EAAqBL,SAArB,EAAgCD,SAAhC,CAVK,CAAP;AAYD"
 }

package/lib/components/Toolbar/index.d.ts

@@ -1,10 +1,8 @@
-import React from 'react';
 import { IProps } from '../../Editor';
 import { ICommand } from '../../commands';
 import './index.less';
 export interface IToolbarProps extends IProps {
     overflow?: boolean;
-    height?: React.CSSProperties['height'];
     toolbarBottom?: boolean;
     onCommand?: (command: ICommand<string>, groupName?: string) => void;
     commands?: ICommand<string>[];

package/lib/components/Toolbar/index.js

@@ -140,8 +140,6 @@ function ToolbarItems(props) {
 function Toolbar() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   var prefixCls = props.prefixCls,
-      _props$height = props.height,
-      height = _props$height === void 0 ? 29 : _props$height,
       toolbarBottom = props.toolbarBottom,
       isChild = props.isChild;
 
@@ -152,9 +150,6 @@ function Toolbar() {
   var bottomClassName = toolbarBottom ? 'bottom' : '';
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     className: "".concat(prefixCls, "-toolbar ").concat(bottomClassName),
-    style: {
-      height: height
-    },
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(ToolbarItems, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, props), {}, {
       commands: props.commands || commands || []
     })), !isChild && /*#__PURE__*/(0, _jsxRuntime.jsx)(ToolbarItems, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, props), {}, {

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

@@ -67,7 +67,6 @@
     "Array",
     "isArray",
     "Toolbar",
-    "height",
     "toolbarBottom",
     "isChild",
     "extraCommands",
@@ -77,7 +76,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 = {}, 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"
+    "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  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, toolbarBottom, isChild } = props;\n  const { commands, extraCommands } = useContext(EditorContext);\n  const bottomClassName = toolbarBottom ? 'bottom' : '';\n  return (\n    <div className={`${prefixCls}-toolbar ${bottomClassName}`}>\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/components/Toolbar/index.less

@@ -4,12 +4,13 @@
   &-toolbar {
     border-bottom: 1px solid var(--color-border-default);
     background-color: var(--color-canvas-default);
-    padding: 0 5px 0 5px;
+    padding: 5px 5px;
     display: flex;
     justify-content: space-between;
     align-items: center;
     border-radius: 3px 3px 0 0;
     user-select: none;
+    flex-wrap: wrap;
     &.bottom {
       border-bottom: 0px;
       border-top: 1px solid var(--color-border-default);
@@ -20,10 +21,14 @@
       margin: 0;
       padding: 0;
       list-style: none;
+      line-height: initial;
     }
     li {
       display: inline-block;
       font-size: 14px;
+      & + li {
+        margin: 0;
+      }
       > button {
         border: none;
         height: 20px;

package/lib/index.less

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

package/markdown-editor.css

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

package/package.json

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

package/src/Editor.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useReducer, useMemo, useRef, useImperativeHandle, CSSProperties } from 'react';
-import MarkdownPreview, { MarkdownPreviewProps, MarkdownPreviewRef } from '@uiw/react-markdown-preview';
+import MarkdownPreview, { MarkdownPreviewProps } from '@uiw/react-markdown-preview';
 import TextArea, { ITextAreaProps } from './components/TextArea';
 import Toolbar from './components/Toolbar';
 import DragBar from './components/DragBar';
@@ -39,6 +39,9 @@ export interface MDEditorProps extends Omit<React.HTMLAttributes<HTMLDivElement>
   /**
    * Custom toolbar heigth
    * @default 29px
+   *
+   * @deprecated toolbar height adaptive: https://github.com/uiwjs/react-md-editor/issues/427
+   *
    */
   toolbarHeight?: number;
   /**
@@ -93,6 +96,8 @@ export interface MDEditorProps extends Omit<React.HTMLAttributes<HTMLDivElement>
      * _`toolbar`_ < _`command[].render`_
      */
     toolbar?: ICommand['render'];
+    /** Custom markdown preview */
+    preview?: (source: string, state: ContextStore, dispath: React.Dispatch<ContextStore>) => JSX.Element;
   };
   /**
    * Disable editing area code highlighting. The value is `false`, which increases the editing speed.
@@ -150,7 +155,6 @@ const InternalMDEditor = (
     commandsFilter,
     extraCommands = getExtraCommands(),
     height = 200,
-    toolbarHeight = 29,
     enableScroll = true,
     visibleDragbar = typeof props.visiableDragbar === 'boolean' ? props.visiableDragbar : true,
     highlightEnable = true,
@@ -194,7 +198,7 @@ const InternalMDEditor = (
     barPopup: {},
   });
   const container = useRef<HTMLDivElement>(null);
-  const previewRef = useRef<MarkdownPreviewRef>(null);
+  const previewRef = useRef<HTMLDivElement>(null);
   const enableScrollRef = useRef(enableScroll);
 
   useImperativeHandle(ref, () => ({ ...state }));
@@ -269,7 +273,7 @@ const InternalMDEditor = (
   const handleScroll = (e: React.UIEvent<HTMLDivElement>, type: 'text' | 'preview') => {
     if (!enableScrollRef.current) return;
     const textareaDom = textareaDomRef.current;
-    const previewDom = previewRef.current ? previewRef.current.mdp.current : undefined;
+    const previewDom = previewRef.current ? previewRef.current : undefined;
     if (!initScroll.current) {
       active.current = type;
       initScroll.current = true;
@@ -293,18 +297,28 @@ const InternalMDEditor = (
     }
   };
 
-  const mdPreview = useMemo(
+  const previewClassName = `${prefixCls}-preview ${previewOptions.className || ''}`;
+  let mdPreview = useMemo(
     () => (
-      <MarkdownPreview
-        {...previewOptions}
-        onScroll={(e) => handleScroll(e, 'preview')}
-        ref={previewRef}
-        source={state.markdown || ''}
-        className={`${prefixCls}-preview ${previewOptions.className || ''}`}
-      />
+      <div ref={previewRef} className={previewClassName}>
+        <MarkdownPreview
+          {...previewOptions}
+          onScroll={(e) => handleScroll(e, 'preview')}
+          source={state.markdown || ''}
+        />
+      </div>
     ),
-    [prefixCls, previewOptions, state.markdown],
+    [previewClassName, previewOptions, state.markdown],
   );
+  const preview = components?.preview && components?.preview(state.markdown || '', state, dispatch);
+  if (preview && React.isValidElement(preview)) {
+    mdPreview = (
+      <div className={previewClassName} ref={previewRef} onScroll={(e) => handleScroll(e, 'preview')}>
+        {preview}
+      </div>
+    );
+  }
+
   return (
     <EditorContext.Provider value={{ ...state, dispatch }}>
       <div
@@ -320,14 +334,9 @@ const InternalMDEditor = (
         }}
       >
         {!hideToolbar && !toolbarBottom && (
-          <Toolbar prefixCls={prefixCls} height={toolbarHeight} overflow={overflow} toolbarBottom={toolbarBottom} />
+          <Toolbar prefixCls={prefixCls} overflow={overflow} toolbarBottom={toolbarBottom} />
         )}
-        <div
-          className={`${prefixCls}-content`}
-          style={{
-            height: `calc(100% - ${toolbarHeight}px)`,
-          }}
-        >
+        <div className={`${prefixCls}-content`}>
           {/(edit|live)/.test(state.preview || '') && (
             <TextArea
               className={`${prefixCls}-input`}
@@ -358,7 +367,7 @@ const InternalMDEditor = (
           />
         )}
         {!hideToolbar && toolbarBottom && (
-          <Toolbar prefixCls={prefixCls} height={toolbarHeight} overflow={overflow} toolbarBottom={toolbarBottom} />
+          <Toolbar prefixCls={prefixCls} overflow={overflow} toolbarBottom={toolbarBottom} />
         )}
       </div>
     </EditorContext.Provider>

package/src/components/DragBar/index.less

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

package/src/components/Toolbar/Child.tsx

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

package/src/components/Toolbar/index.less

@@ -4,12 +4,13 @@
   &-toolbar {
     border-bottom: 1px solid var(--color-border-default);
     background-color: var(--color-canvas-default);
-    padding: 0 5px 0 5px;
+    padding: 5px 5px;
     display: flex;
     justify-content: space-between;
     align-items: center;
     border-radius: 3px 3px 0 0;
     user-select: none;
+    flex-wrap: wrap;
     &.bottom {
       border-bottom: 0px;
       border-top: 1px solid var(--color-border-default);
@@ -20,10 +21,14 @@
       margin: 0;
       padding: 0;
       list-style: none;
+      line-height: initial;
     }
     li {
       display: inline-block;
       font-size: 14px;
+      & + li {
+        margin: 0;
+      }
       > button {
         border: none;
         height: 20px;

package/src/components/Toolbar/index.tsx

@@ -7,7 +7,6 @@ import './index.less';
 
 export interface IToolbarProps extends IProps {
   overflow?: boolean;
-  height?: React.CSSProperties['height'];
   toolbarBottom?: boolean;
   onCommand?: (command: ICommand<string>, groupName?: string) => void;
   commands?: ICommand<string>[];
@@ -125,11 +124,11 @@ export function ToolbarItems(props: IToolbarProps) {
 }
 
 export default function Toolbar(props: IToolbarProps = {}) {
-  const { prefixCls, height = 29, toolbarBottom, isChild } = props;
+  const { prefixCls, toolbarBottom, isChild } = props;
   const { commands, extraCommands } = useContext(EditorContext);
   const bottomClassName = toolbarBottom ? 'bottom' : '';
   return (
-    <div className={`${prefixCls}-toolbar ${bottomClassName}`} style={{ height }}>
+    <div className={`${prefixCls}-toolbar ${bottomClassName}`}>
       <ToolbarItems {...props} commands={props.commands || commands || []} />
       {!isChild && <ToolbarItems {...props} commands={extraCommands || []} />}
     </div>

package/src/index.less

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