@uiw/react-md-editor 3.12.3 → 3.14.1

package/lib/components/TextArea/handleKeyDown.js.map

@@ -40,6 +40,7 @@
     "indexOf",
     "end",
     "modifiedTextObj",
+    "insertBeforeEachLine",
     "shiftKey",
     "text",
     "map",
@@ -48,6 +49,7 @@
     "replaceSelection",
     "startTabSize",
     "endTabSize",
+    "insertTextAtPosition",
     "test",
     "startStr",
     "startsWith",
@@ -59,5 +61,5 @@
   "sourcesContent": [
     "import { insertTextAtPosition } from '../../utils/InsertTextAtPosition';\nimport { TextAreaTextApi } from '../../commands';\nimport { insertBeforeEachLine } from '../../commands/list';\n\n/**\n * - `13` - `Enter`\n * - `9` - `Tab`\n */\nfunction stopPropagation(e: KeyboardEvent | React.KeyboardEvent<HTMLTextAreaElement>) {\n  e.stopPropagation();\n  e.preventDefault();\n}\n\nexport default function handleKeyDown(\n  e: KeyboardEvent | React.KeyboardEvent<HTMLTextAreaElement>,\n  tabSize: number = 2,\n  defaultTabEnable: boolean = false,\n) {\n  const target = e.target as HTMLTextAreaElement;\n  const starVal = target.value.substr(0, target.selectionStart);\n  const valArr = starVal.split('\\n');\n  const currentLineStr = valArr[valArr.length - 1];\n  const textArea = new TextAreaTextApi(target);\n\n  /**\n   * `9` - `Tab`\n   */\n  if (!defaultTabEnable && e.code && e.code.toLowerCase() === 'tab') {\n    stopPropagation(e);\n    const space = new Array(tabSize + 1).join('  ');\n    if (target.selectionStart !== target.selectionEnd) {\n      const _star = target.value.substring(0, target.selectionStart).split('\\n');\n      const _end = target.value.substring(0, target.selectionEnd).split('\\n');\n      const modifiedTextLine: string[] = [];\n      _end.forEach((item, idx) => {\n        if (item !== _star[idx]) {\n          modifiedTextLine.push(item);\n        }\n      });\n      const modifiedText = modifiedTextLine.join('\\n');\n      const oldSelectText = target.value.substring(target.selectionStart, target.selectionEnd);\n      const newStarNum = target.value.substring(0, target.selectionStart).length;\n\n      textArea.setSelectionRange({\n        start: target.value.indexOf(modifiedText),\n        end: target.selectionEnd,\n      });\n\n      const modifiedTextObj = insertBeforeEachLine(modifiedText, e.shiftKey ? '' : space);\n\n      let text = modifiedTextObj.modifiedText;\n      if (e.shiftKey) {\n        text = text\n          .split('\\n')\n          .map((item) => item.replace(new RegExp(`^${space}`), ''))\n          .join('\\n');\n      }\n      textArea.replaceSelection(text);\n\n      let startTabSize = e.shiftKey ? -tabSize : tabSize;\n      let endTabSize = e.shiftKey ? -modifiedTextLine.length * tabSize : modifiedTextLine.length * tabSize;\n\n      textArea.setSelectionRange({\n        start: newStarNum + startTabSize,\n        end: newStarNum + oldSelectText.length + endTabSize,\n      });\n    } else {\n      return insertTextAtPosition(target, space);\n    }\n  } else if (\n    e.code &&\n    e.code.toLowerCase() === 'enter' &&\n    (/^(-|\\*)\\s/.test(currentLineStr) || /^\\d+.\\s/.test(currentLineStr))\n  ) {\n    /**\n     * `13` - `Enter`\n     */\n    stopPropagation(e);\n    let startStr = '\\n- ';\n\n    if (currentLineStr.startsWith('*')) {\n      startStr = '\\n* ';\n    }\n\n    if (currentLineStr.startsWith('- [ ]')) {\n      startStr = '\\n- [ ] ';\n    } else if (currentLineStr.startsWith('- [X]')) {\n      startStr = '\\n- [X] ';\n    }\n\n    if (/^\\d+.\\s/.test(currentLineStr)) {\n      startStr = `\\n${parseInt(currentLineStr) + 1}. `;\n    }\n    return insertTextAtPosition(target, startStr);\n  }\n}\n"
   ],
-  "mappings": "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"
+  "mappings": "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"
 }

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

@@ -8,6 +8,7 @@
     "onScroll",
     "renderTextarea",
     "otherProps",
+    "useContext",
     "EditorContext",
     "markdown",
     "scrollTop",
@@ -21,6 +22,7 @@
     "executeRef",
     "warp",
     "createRef",
+    "useEffect",
     "state",
     "current",
     "textareaWarp",
@@ -40,7 +42,6 @@
     "overflow",
     "onChange",
     "shortcuts",
-    "useContext",
     "ref"
   ],
   "sources": [
@@ -49,5 +50,5 @@
   "sourcesContent": [
     "import React, { useEffect, Fragment, useContext } from 'react';\nimport { EditorContext, ContextStore, ExecuteCommandState } from '../../Context';\nimport shortcuts from './shortcuts';\nimport Markdown from './Markdown';\nimport Textarea, { TextAreaProps } from './Textarea';\nimport { IProps } from '../../Editor';\nimport { TextAreaCommandOrchestrator, ICommand } from '../../commands';\nimport './index.less';\n\ntype RenderTextareaHandle = {\n  dispatch: ContextStore['dispatch'];\n  onChange?: TextAreaProps['onChange'];\n  useContext?: {\n    commands: ContextStore['commands'];\n    extraCommands: ContextStore['extraCommands'];\n    commandOrchestrator?: TextAreaCommandOrchestrator;\n  };\n  shortcuts?: (\n    e: KeyboardEvent | React.KeyboardEvent<HTMLTextAreaElement>,\n    commands: ICommand[],\n    commandOrchestrator?: TextAreaCommandOrchestrator,\n    dispatch?: React.Dispatch<ContextStore>,\n    state?: ExecuteCommandState,\n  ) => void;\n};\n\nexport interface ITextAreaProps\n  extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'value' | 'onScroll'>,\n    IProps {\n  value?: string;\n  onScroll?: (e: React.UIEvent<HTMLDivElement>) => void;\n  renderTextarea?: (\n    props: React.TextareaHTMLAttributes<HTMLTextAreaElement> | React.HTMLAttributes<HTMLDivElement>,\n    opts: RenderTextareaHandle,\n  ) => JSX.Element;\n}\n\nexport type TextAreaRef = {\n  text?: HTMLTextAreaElement;\n  warp?: HTMLDivElement;\n};\n\nexport default function TextArea(props: ITextAreaProps) {\n  const { prefixCls, className, onScroll, renderTextarea, ...otherProps } = props || {};\n  const { markdown, scrollTop, commands, highlightEnable, extraCommands, dispatch } = useContext(EditorContext);\n  const textRef = React.useRef<HTMLTextAreaElement>(null);\n  const executeRef = React.useRef<TextAreaCommandOrchestrator>();\n  const warp = React.createRef<HTMLDivElement>();\n  useEffect(() => {\n    const state: ContextStore = {};\n    if (warp.current) {\n      state.textareaWarp = warp.current || undefined;\n      warp.current.scrollTop = scrollTop || 0;\n    }\n    if (dispatch) {\n      dispatch({ ...state });\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  useEffect(() => {\n    if (textRef.current && dispatch) {\n      const commandOrchestrator = new TextAreaCommandOrchestrator(textRef.current);\n      executeRef.current = commandOrchestrator;\n      dispatch({ textarea: textRef.current, commandOrchestrator });\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  // @ts-ignore\n  const textStyle: React.CSSProperties = highlightEnable ? {} : { '-webkit-text-fill-color': 'inherit' };\n\n  return (\n    <div ref={warp} className={`${prefixCls}-aree ${className || ''}`} onScroll={onScroll}>\n      <div className={`${prefixCls}-text`}>\n        {renderTextarea ? (\n          React.cloneElement(\n            renderTextarea(\n              {\n                ...otherProps,\n                value: markdown,\n                autoComplete: 'off',\n                autoCorrect: 'off',\n                spellCheck: 'false',\n                autoCapitalize: 'off',\n                className: `${prefixCls}-text-input`,\n                style: {\n                  WebkitTextFillColor: 'inherit',\n                  overflow: 'auto',\n                },\n              },\n              {\n                dispatch,\n                onChange: otherProps.onChange,\n                shortcuts,\n                useContext: { commands, extraCommands, commandOrchestrator: executeRef.current },\n              },\n            ),\n            {\n              ref: textRef,\n            },\n          )\n        ) : (\n          <Fragment>\n            {highlightEnable && <Markdown prefixCls={prefixCls} />}\n            <Textarea prefixCls={prefixCls} {...otherProps} style={textStyle} />\n          </Fragment>\n        )}\n      </div>\n    </div>\n  );\n}\n"
   ],
-  "mappings": "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"
+  "mappings": "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"
 }

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

@@ -7,8 +7,10 @@
     "groupName",
     "commands",
     "children",
+    "useContext",
     "EditorContext",
     "barPopup",
+    "useMemo",
     "e",
     "stopPropagation",
     "Array",
@@ -20,5 +22,5 @@
   "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"
   ],
-  "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,uBAAWC,sBAAX,CAA1B;EAAA,uCAAQC,QAAR;EAAA,IAAQA,QAAR,qCAAmB,EAAnB;;EACA,OAAO,oBACL;IAAA,oBACE;MACE,SAAS,YAAKL,SAAL,4BAAgCC,SAAS,IAAII,QAAQ,CAACJ,SAAD,CAArB,GAAmC,QAAnC,GAA8C,EAA9E,CADX;MAEE,OAAO,EAAE,iBAACK,CAAD;QAAA,OAAOA,CAAC,CAACC,eAAF,EAAP;MAAA,CAFX;MAAA,UAIGC,KAAK,CAACC,OAAN,CAAcP,QAAd,iBAA0B,qBAAC,SAAD;QAAS,QAAQ,EAAEA;MAAnB,GAAiCH,KAAjC;QAAwC,MAAM,EAAC,EAA/C;QAAkD,OAAO;MAAzD,GAA1B,GAAyFI;IAJ5F,EADF;EAAA,CADK,EASL;EACA,CAACD,QAAD,EAAWG,QAAX,EAAqBJ,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,SAAD;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"
 }

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

@@ -5,6 +5,7 @@ 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>[];
     isChild?: boolean;

package/lib/components/Toolbar/index.js

@@ -139,14 +139,16 @@ function Toolbar() {
   var prefixCls = props.prefixCls,
       _props$height = props.height,
       height = _props$height === void 0 ? 29 : _props$height,
+      toolbarBottom = props.toolbarBottom,
       isChild = props.isChild;
 
   var _useContext2 = (0, _react.useContext)(_Context.EditorContext),
       commands = _useContext2.commands,
       extraCommands = _useContext2.extraCommands;
 
+  var bottomClassName = toolbarBottom ? 'bottom' : '';
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-    className: "".concat(prefixCls, "-toolbar"),
+    className: "".concat(prefixCls, "-toolbar ").concat(bottomClassName),
     style: {
       height: height
     },

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

@@ -5,6 +5,7 @@
     "props",
     "prefixCls",
     "overflow",
+    "useContext",
     "EditorContext",
     "fullscreen",
     "preview",
@@ -12,6 +13,7 @@
     "commandOrchestrator",
     "dispatch",
     "originalOverflow",
+    "useRef",
     "handleClick",
     "command",
     "name",
@@ -28,6 +30,7 @@
     "keyName",
     "length",
     "executeCommand",
+    "useEffect",
     "document",
     "body",
     "style",
@@ -60,14 +63,16 @@
     "isArray",
     "Toolbar",
     "height",
+    "toolbarBottom",
     "isChild",
-    "extraCommands"
+    "extraCommands",
+    "bottomClassName"
   ],
   "sources": [
     "../../../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  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, isChild } = props;\n  const { commands, extraCommands } = useContext(EditorContext);\n  return (\n    <div className={`${prefixCls}-toolbar`} style={{ height }}>\n      <ToolbarItems {...props} commands={props.commands || commands || []} />\n      {!isChild && <ToolbarItems {...props} commands={extraCommands || []} />}\n    </div>\n  );\n}\n"
+    "import React, { Fragment, useContext, useEffect, useRef } from 'react';\nimport { IProps } from '../../Editor';\nimport { EditorContext, PreviewType, ContextStore } from '../../Context';\nimport { ICommand } from '../../commands';\nimport Child from './Child';\nimport './index.less';\n\nexport interface IToolbarProps extends IProps {\n  overflow?: boolean;\n  height?: React.CSSProperties['height'];\n  toolbarBottom?: boolean;\n  onCommand?: (command: ICommand<string>, groupName?: string) => void;\n  commands?: ICommand<string>[];\n  isChild?: boolean;\n}\n\nexport function ToolbarItems(props: IToolbarProps) {\n  const { prefixCls, overflow } = props;\n  const { fullscreen, preview, barPopup = {}, commandOrchestrator, dispatch } = useContext(EditorContext);\n  const originalOverflow = useRef('');\n\n  function handleClick(command: ICommand<string>, name?: string) {\n    if (!dispatch) return;\n    const state: ContextStore = { barPopup: { ...barPopup } };\n    if (command.keyCommand === 'preview') {\n      state.preview = command.value as PreviewType;\n    }\n    if (command.keyCommand === 'fullscreen') {\n      state.fullscreen = !fullscreen;\n    }\n    if (props.commands && command.keyCommand === 'group') {\n      props.commands.forEach((item) => {\n        if (name === item.groupName) {\n          state.barPopup![name!] = true;\n        } else if (item.keyCommand) {\n          state.barPopup![item.groupName!] = false;\n        }\n      });\n    } else if (name || command.parent) {\n      Object.keys(state.barPopup || {}).forEach((keyName) => {\n        state.barPopup![keyName] = false;\n      });\n    }\n\n    if (Object.keys(state).length) {\n      dispatch({ ...state });\n    }\n    commandOrchestrator && commandOrchestrator.executeCommand(command);\n  }\n\n  useEffect(() => {\n    if (document && overflow) {\n      if (fullscreen) {\n        // prevent scroll on fullscreen\n        document.body.style.overflow = 'hidden';\n      } else {\n        // get the original overflow only the first time\n        if (!originalOverflow.current) {\n          originalOverflow.current = window.getComputedStyle(document.body, null).overflow;\n        }\n        // reset to the original overflow\n        document.body.style.overflow = originalOverflow.current;\n      }\n    }\n  }, [fullscreen, originalOverflow, overflow]);\n\n  return (\n    <ul>\n      {(props.commands || []).map((item, idx) => {\n        if (item.keyCommand === 'divider') {\n          return <li key={idx} {...item.liProps} className={`${prefixCls}-toolbar-divider`} />;\n        }\n        if (!item.keyCommand) return <Fragment key={idx} />;\n        const activeBtn =\n          (fullscreen && item.keyCommand === 'fullscreen') || (item.keyCommand === 'preview' && preview === item.value);\n        const childNode =\n          item.children && typeof item.children === 'function'\n            ? item.children({\n                getState: () => commandOrchestrator!.getState(),\n                textApi: commandOrchestrator ? commandOrchestrator!.textApi : undefined,\n                close: () => handleClick({}, item.groupName),\n                execute: () => handleClick({ execute: item.execute }),\n              })\n            : undefined;\n        const disabled = barPopup && preview && preview === 'preview' && !/(preview|fullscreen)/.test(item.keyCommand);\n        return (\n          <li key={idx} {...item.liProps} className={activeBtn ? `active` : ''}>\n            {!item.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"
   ],
-  "mappings": "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"
+  "mappings": "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"
 }

package/lib/components/Toolbar/index.less

@@ -10,6 +10,11 @@
     align-items: center;
     border-radius: 3px 3px 0 0;
     user-select: none;
+    &.bottom {
+      border-bottom: 0px;
+      border-top: 1px solid var(--color-border-default);
+      border-radius: 0 0 3px 3px;
+    }
     ul,
     li {
       margin: 0;

package/markdown-editor.css

@@ -182,6 +182,11 @@
   -webkit-user-select: none;
           user-select: none;
 }
+.w-md-editor-toolbar.bottom {
+  border-bottom: 0px;
+  border-top: 1px solid var(--color-border-default);
+  border-radius: 0 0 3px 3px;
+}
 .w-md-editor-toolbar ul,
 .w-md-editor-toolbar li {
   margin: 0;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uiw/react-md-editor",
-  "version": "3.12.3",
+  "version": "3.14.1",
   "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>",
@@ -67,7 +67,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.14.6",
-    "@uiw/react-markdown-preview": "~4.0.5",
+    "@uiw/react-markdown-preview": "^4.0.10",
     "rehype-sanitize": "~5.0.1",
     "rehype": "~12.0.1"
   },

package/src/Editor.tsx

@@ -43,6 +43,10 @@ export interface MDEditorProps extends Omit<React.HTMLAttributes<HTMLDivElement>
   /**
    * Show drag and drop tool. Set the height of the editor.
    */
+  visibleDragbar?: boolean;
+  /**
+   * @deprecated use `visibleDragbar`
+   */
   visiableDragbar?: boolean;
   /**
    * Show markdown preview.
@@ -57,11 +61,11 @@ export interface MDEditorProps extends Omit<React.HTMLAttributes<HTMLDivElement>
    */
   overflow?: boolean;
   /**
-   * Maximum drag height. `visiableDragbar=true`
+   * Maximum drag height. `visibleDragbar=true`
    */
   maxHeight?: number;
   /**
-   * Minimum drag height. `visiableDragbar=true`
+   * Minimum drag height. `visibleDragbar=true`
    */
   minHeight?: number;
   /**
@@ -107,6 +111,8 @@ export interface MDEditorProps extends Omit<React.HTMLAttributes<HTMLDivElement>
   hideToolbar?: boolean;
   /** Whether to enable scrolling */
   enableScroll?: boolean;
+  /** Toolbar on bottom */
+  toolbarBottom?: boolean;
 }
 
 function setGroupPopFalse(data: Record<string, boolean> = {}) {
@@ -130,7 +136,7 @@ const InternalMDEditor = (
     height = 200,
     toolbarHeight = 29,
     enableScroll = true,
-    visiableDragbar = true,
+    visibleDragbar = typeof props.visiableDragbar === 'boolean' ? props.visiableDragbar : true,
     highlightEnable = true,
     preview: previewType = 'live',
     fullscreen = false,
@@ -145,6 +151,7 @@ const InternalMDEditor = (
     onChange,
     onHeightChange,
     hideToolbar,
+    toolbarBottom = false,
     renderTextarea,
     ...other
   } = props || {};
@@ -295,7 +302,9 @@ const InternalMDEditor = (
           height: state.fullscreen ? '100%' : hideToolbar ? Number(state.height) - toolbarHeight : state.height,
         }}
       >
-        {!hideToolbar && <Toolbar prefixCls={prefixCls} height={toolbarHeight} overflow={overflow} />}
+        {!hideToolbar && !toolbarBottom && (
+          <Toolbar prefixCls={prefixCls} height={toolbarHeight} overflow={overflow} toolbarBottom={toolbarBottom} />
+        )}
         <div
           className={`${prefixCls}-content`}
           style={{
@@ -320,7 +329,7 @@ const InternalMDEditor = (
           )}
           {/(live|preview)/.test(state.preview || '') && mdPreview}
         </div>
-        {visiableDragbar && !state.fullscreen && (
+        {visibleDragbar && !state.fullscreen && (
           <DragBar
             prefixCls={prefixCls}
             height={state.height as number}
@@ -331,6 +340,9 @@ const InternalMDEditor = (
             }}
           />
         )}
+        {!hideToolbar && toolbarBottom && (
+          <Toolbar prefixCls={prefixCls} height={toolbarHeight} overflow={overflow} toolbarBottom={toolbarBottom} />
+        )}
       </div>
     </EditorContext.Provider>
   );

package/src/components/Toolbar/index.less

@@ -10,6 +10,11 @@
     align-items: center;
     border-radius: 3px 3px 0 0;
     user-select: none;
+    &.bottom {
+      border-bottom: 0px;
+      border-top: 1px solid var(--color-border-default);
+      border-radius: 0 0 3px 3px;
+    }
     ul,
     li {
       margin: 0;

package/src/components/Toolbar/index.tsx

@@ -8,6 +8,7 @@ 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>[];
   isChild?: boolean;
@@ -118,10 +119,11 @@ export function ToolbarItems(props: IToolbarProps) {
 }
 
 export default function Toolbar(props: IToolbarProps = {}) {
-  const { prefixCls, height = 29, isChild } = props;
+  const { prefixCls, height = 29, toolbarBottom, isChild } = props;
   const { commands, extraCommands } = useContext(EditorContext);
+  const bottomClassName = toolbarBottom ? 'bottom' : '';
   return (
-    <div className={`${prefixCls}-toolbar`} style={{ height }}>
+    <div className={`${prefixCls}-toolbar ${bottomClassName}`} style={{ height }}>
       <ToolbarItems {...props} commands={props.commands || commands || []} />
       {!isChild && <ToolbarItems {...props} commands={extraCommands || []} />}
     </div>