@uiw/react-md-editor 3.17.0 → 3.17.1

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;
     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);

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;
   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;
@@ -251,14 +253,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.17.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>",
@@ -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

@@ -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;
   /**
@@ -150,7 +153,6 @@ const InternalMDEditor = (
     commandsFilter,
     extraCommands = getExtraCommands(),
     height = 200,
-    toolbarHeight = 29,
     enableScroll = true,
     visibleDragbar = typeof props.visiableDragbar === 'boolean' ? props.visiableDragbar : true,
     highlightEnable = true,
@@ -320,14 +322,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 +355,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;
     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);

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%;