@uiw/react-md-editor 3.9.7 → 3.10.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uiw/react-md-editor",
-  "version": "3.9.7",
+  "version": "3.10.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>",
@@ -15,6 +15,7 @@
     "css:watch": "compile-less -d src -o esm --watch",
     "css:build:dist": "compile-less -d src --combine markdown-editor.css --rm-global",
     "bundle": "ncc build src/index.tsx --target web --filename mdeditor",
+    "bundle:watch": "ncc watch src/index.tsx --target web --filename mdeditor",
     "bundle:min": "ncc build src/index.tsx --target web --filename mdeditor --minify",
     "watch": "tsbb watch & npm run css:watch",
     "build": "tsbb build && npm run css:build && npm run css:build:dist",
@@ -41,7 +42,7 @@
   },
   "devDependencies": {
     "@kkt/less-modules": "~7.1.1",
-    "@kkt/ncc": "~1.0.8",
+    "@kkt/ncc": "~1.0.9",
     "@kkt/raw-modules": "~7.1.1",
     "@kkt/scope-plugin-options": "~7.1.1",
     "@types/katex": "~0.11.1",
@@ -49,13 +50,13 @@
     "@types/react-dom": "~17.0.11",
     "@types/react-test-renderer": "~17.0.1",
     "@uiw/react-github-corners": "~1.5.3",
-    "@uiw/react-codesandbox": "~1.1.4",
     "@uiw/react-shields": "~1.1.2",
     "compile-less-cli": "~1.8.11",
     "katex": "~0.15.2",
     "husky": "~7.0.4",
     "kkt": "~7.1.5",
     "lint-staged": "~12.3.4",
+    "mermaid": "~8.14.0",
     "prettier": "~2.5.1",
     "react": "~17.0.2",
     "react-dom": "~17.0.2",
@@ -65,7 +66,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.14.6",
-    "@uiw/react-markdown-preview": "~3.4.7",
+    "@uiw/react-markdown-preview": "~3.5.0",
     "rehype-sanitize": "~5.0.1",
     "rehype": "~12.0.1"
   },

package/src/Editor.tsx

@@ -48,6 +48,10 @@ export interface MDEditorProps extends Omit<React.HTMLAttributes<HTMLDivElement>
    * Full screen display editor.
    */
   fullscreen?: boolean;
+  /**
+   * Disable `fullscreen` setting body styles
+   */
+  overflow?: boolean;
   /**
    * Maximum drag height. `visiableDragbar=true`
    */
@@ -126,6 +130,7 @@ const InternalMDEditor = (
     highlightEnable = true,
     preview: previewType = 'live',
     fullscreen = false,
+    overflow = true,
     previewOptions = {},
     textareaProps,
     maxHeight = 1200,
@@ -280,7 +285,7 @@ const InternalMDEditor = (
           height: state.fullscreen ? '100%' : hideToolbar ? Number(state.height) - toolbarHeight : state.height,
         }}
       >
-        {!hideToolbar && <Toolbar prefixCls={prefixCls} height={toolbarHeight} />}
+        {!hideToolbar && <Toolbar prefixCls={prefixCls} height={toolbarHeight} overflow={overflow} />}
         <div
           className={`${prefixCls}-content`}
           style={{

package/src/components/Toolbar/index.tsx

@@ -6,6 +6,7 @@ import Child from './Child';
 import './index.less';
 
 export interface IToolbarProps extends IProps {
+  overflow?: boolean;
   height?: React.CSSProperties['height'];
   onCommand?: (command: ICommand<string>, groupName?: string) => void;
   commands?: ICommand<string>[];
@@ -13,7 +14,7 @@ export interface IToolbarProps extends IProps {
 }
 
 export function ToolbarItems(props: IToolbarProps) {
-  const { prefixCls } = props;
+  const { prefixCls, overflow } = props;
   const { fullscreen, preview, barPopup = {}, commandOrchestrator, dispatch } = useContext(EditorContext);
   const originalOverflow = useRef('');
 
@@ -47,7 +48,7 @@ export function ToolbarItems(props: IToolbarProps) {
   }
 
   useEffect(() => {
-    if (document) {
+    if (document && overflow) {
       if (fullscreen) {
         // prevent scroll on fullscreen
         document.body.style.overflow = 'hidden';
@@ -60,7 +61,7 @@ export function ToolbarItems(props: IToolbarProps) {
         document.body.style.overflow = originalOverflow.current;
       }
     }
-  }, [fullscreen, originalOverflow]);
+  }, [fullscreen, originalOverflow, overflow]);
 
   return (
     <ul>
@@ -68,7 +69,7 @@ export function ToolbarItems(props: IToolbarProps) {
         if (item.keyCommand === 'divider') {
           return <li key={idx} {...item.liProps} className={`${prefixCls}-toolbar-divider`} />;
         }
-        if (!item.keyCommand) return <Fragment />;
+        if (!item.keyCommand) return <Fragment key={idx} />;
         const activeBtn =
           (fullscreen && item.keyCommand === 'fullscreen') || (item.keyCommand === 'preview' && preview === item.value);
         const childNode =
@@ -89,6 +90,7 @@ export function ToolbarItems(props: IToolbarProps) {
                 'button',
                 {
                   type: 'button',
+                  key: idx,
                   disabled,
                   'data-name': item.name,
                   ...item.buttonProps,
@@ -101,6 +103,7 @@ export function ToolbarItems(props: IToolbarProps) {
               )}
             {item.children && (
               <Child
+                overflow={overflow}
                 groupName={item.groupName}
                 prefixCls={prefixCls}
                 children={childNode}