@uiw/react-md-editor 3.12.3 → 3.13.0

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.13.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/Editor.tsx

@@ -107,6 +107,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> = {}) {
@@ -145,6 +147,7 @@ const InternalMDEditor = (
     onChange,
     onHeightChange,
     hideToolbar,
+    toolbarBottom = false,
     renderTextarea,
     ...other
   } = props || {};
@@ -295,7 +298,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={{
@@ -331,6 +336,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>