tiptap: improve

packages/client/package.json

@@ -59,6 +59,7 @@
     "copy-to-clipboard": "^3.3.1",
     "deep-equal": "^2.0.5",
     "dompurify": "^2.3.5",
+    "interactjs": "^1.10.11",
     "katex": "^0.15.2",
     "kity": "^2.0.4",
     "lib0": "^0.2.47",
@@ -74,7 +75,6 @@
     "prosemirror-tables": "^1.1.1",
     "prosemirror-utils": "^0.9.6",
     "prosemirror-view": "^1.23.6",
-    "re-resizable": "^6.9.9",
     "react": "17.0.2",
     "react-countdown": "^2.3.2",
     "react-dom": "17.0.2",

packages/client/src/components/resizeable/resizeable.tsx

@@ -1,51 +1,108 @@
-import React, { useCallback, useState } from 'react';
+import React, { useRef, useEffect } from 'react';
 import cls from 'classnames';
+import { useClickOutside } from 'hooks/use-click-outside';
+import interact from 'interactjs';
 import styles from './style.module.scss';
 
-import { Resizable } from 're-resizable';
+type ISize = { width: number; height: number };
 
 interface IProps {
   width: number;
   height: number;
-  onChange?: (arg: { width: number; height: number }) => void;
-  onChangeEnd?: (arg: { width: number; height: number }) => void;
+  maxWidth?: number;
+  onChange?: (arg: ISize) => void;
+  onChangeEnd?: (arg: ISize) => void;
   className?: string;
 }
 
 const MIN_WIDTH = 50;
 const MIN_HEIGHT = 50;
 
+function clamp(val: number, min: number, max: number): number {
+  if (val < min) {
+    return min;
+  }
+  if (val > max) {
+    return max;
+  }
+  return val;
+}
+
 export const Resizeable: React.FC<IProps> = ({
-  width: defaultWidth,
-  height: defaultHeight,
+  width,
+  height,
+  maxWidth,
   className,
   onChange,
   onChangeEnd,
   children,
 }) => {
-  const [width, setWidth] = useState(defaultWidth);
-  const [height, setHeight] = useState(defaultHeight);
+  const $container = useRef<HTMLDivElement>(null);
+  const $topLeft = useRef<HTMLDivElement>(null);
+  const $topRight = useRef<HTMLDivElement>(null);
+  const $bottomLeft = useRef<HTMLDivElement>(null);
+  const $bottomRight = useRef<HTMLDivElement>(null);
 
-  const onResizeStop = useCallback(
-    (e, direction, ref, d) => {
-      const nextWidth = width + d.width;
-      const nextHeight = height + d.height;
-      setWidth(nextWidth);
-      setHeight(nextHeight);
-      onChangeEnd({ width: nextWidth, height: nextHeight });
-    },
-    [width, height]
-  );
+  useClickOutside($container, {
+    in: () => $container.current.classList.add(styles.isActive),
+    out: () => $container.current.classList.remove(styles.isActive),
+  });
+
+  useEffect(() => {
+    interact($container.current).resizable({
+      edges: {
+        top: true,
+        right: true,
+        bottom: true,
+        left: true,
+      },
+      listeners: {
+        move: function (event) {
+          let { x, y } = event.target.dataset;
+          x = (parseFloat(x) || 0) + event.deltaRect.left;
+          y = (parseFloat(y) || 0) + event.deltaRect.top;
+
+          let { width, height } = event.rect;
+          width = clamp(width, MIN_WIDTH, maxWidth || Infinity);
+          height = clamp(height, MIN_HEIGHT, Infinity);
+
+          Object.assign(event.target.style, {
+            width: `${width}px`,
+            height: `${height}px`,
+          });
+          Object.assign(event.target.dataset, { x, y });
+          onChange && onChange({ width, height });
+        },
+        end: function (event) {
+          let { width, height } = event.rect;
+          width = clamp(width, MIN_WIDTH, maxWidth || Infinity);
+          height = clamp(height, MIN_HEIGHT, Infinity);
+
+          onChangeEnd && onChangeEnd({ width, height });
+        },
+      },
+    });
+  }, [maxWidth]);
+
+  useEffect(() => {
+    Object.assign($container.current.style, {
+      width: `${width}px`,
+      height: `${height}px`,
+    });
+  }, [width, height]);
 
   return (
-    <Resizable
-      size={{ width, height }}
+    <div
+      id="js-resizeable-container"
       className={cls(className, styles.resizable)}
-      minWidth={MIN_WIDTH}
-      minHeight={MIN_HEIGHT}
-      onResizeStop={onResizeStop}
+      ref={$container}
+      style={{ width, height }}
     >
+      <span className={styles.resizer + ' ' + styles.topLeft} ref={$topLeft} data-type={'topLeft'}></span>
+      <span className={styles.resizer + ' ' + styles.topRight} ref={$topRight} data-type={'topRight'}></span>
+      <span className={styles.resizer + ' ' + styles.bottomLeft} ref={$bottomLeft} data-type={'bottomLeft'}></span>
+      <span className={styles.resizer + ' ' + styles.bottomRight} ref={$bottomRight} data-type={'bottomRight'}></span>
       {children}
-    </Resizable>
+    </div>
   );
 };

packages/client/src/components/resizeable/style.module.scss

@@ -4,6 +4,43 @@
   width: 100px;
   height: 100px;
   max-width: 100%;
+  box-sizing: border-box;
+
+  .resizer {
+    position: absolute;
+    z-index: 9999;
+    width: 10px;
+    height: 10px;
+    background: white;
+    border: 3px solid #4286f4;
+    border-radius: 50%;
+    opacity: 0;
+    box-sizing: border-box;
+  }
+
+  .resizer.topLeft {
+    top: -5px;
+    left: -5px;
+    cursor: nwse-resize;
+  }
+
+  .resizer.topRight {
+    top: -5px;
+    right: -5px;
+    cursor: nesw-resize;
+  }
+
+  .resizer.bottomLeft {
+    bottom: -5px;
+    left: -5px;
+    cursor: nesw-resize;
+  }
+
+  .resizer.bottomRight {
+    right: -5px;
+    bottom: -5px;
+    cursor: nwse-resize;
+  }
 
   &.isActive {
     .resizer {

packages/client/src/tiptap/extensions/mind.ts

@@ -10,10 +10,19 @@ const DEFAULT_MIND_DATA = {
   version: '1.4.43',
 };
 
+export interface IMindAttrs {
+  width?: number;
+  height?: number;
+  data?: Record<string, unknown>;
+  template?: string;
+  theme?: string;
+  zoom?: number;
+}
+
 declare module '@tiptap/core' {
   interface Commands<ReturnType> {
     mind: {
-      setMind: (attrs?: unknown) => ReturnType;
+      setMind: (attrs?: IMindAttrs) => ReturnType;
     };
   }
 }
@@ -28,7 +37,7 @@ export const Mind = Node.create({
   addAttributes() {
     return {
       width: {
-        default: '100%',
+        default: null,
         parseHTML: getDatasetAttribute('width'),
       },
       height: {
@@ -51,10 +60,6 @@ export const Mind = Node.create({
         default: 100,
         parseHTML: getDatasetAttribute('zoom'),
       },
-      callCenterCount: {
-        default: 0,
-        parseHTML: (element) => Number(getDatasetAttribute('callcentercount')(element)),
-      },
     };
   },
 
@@ -83,6 +88,9 @@ export const Mind = Node.create({
       setMind:
         (options) =>
         ({ tr, commands, chain, editor }) => {
+          options = options || {};
+          options.data = options.data || DEFAULT_MIND_DATA;
+
           // @ts-ignore
           if (tr.selection?.node?.type?.name == this.name) {
             return commands.updateAttributes(this.name, options);
@@ -94,7 +102,7 @@ export const Mind = Node.create({
             .insertContentAt(pos.before(), [
               {
                 type: this.name,
-                attrs: { data: DEFAULT_MIND_DATA },
+                attrs: options,
               },
             ])
             .run();

packages/client/src/tiptap/menubar.tsx

@@ -34,6 +34,7 @@ import { Search } from './menus/search';
 
 import { Callout } from './menus/callout';
 import { Countdonw } from './menus/countdown';
+import { DocumentChildren } from './menus/document-children';
 import { DocumentReference } from './menus/document-reference';
 import { Image } from './menus/image';
 import { Iframe } from './menus/iframe';
@@ -91,6 +92,7 @@ export const MenuBar: React.FC<{ editor: any }> = ({ editor }) => {
 
         <Callout editor={editor} />
         <Countdonw editor={editor} />
+        <DocumentChildren editor={editor} />
         <DocumentReference editor={editor} />
         <Image editor={editor} />
         <Iframe editor={editor} />

packages/client/src/tiptap/menus/_components/size.tsx

@@ -1,11 +1,13 @@
 import { useCallback, useRef } from 'react';
 import { Button, Form, Dropdown } from '@douyinfe/semi-ui';
 import { FormApi } from '@douyinfe/semi-ui/lib/es/form';
+import { number } from 'lib0';
 
 type ISize = { width: number; height: number };
 
-export const Size: React.FC<{ width: number; height: number; onOk: (arg: ISize) => void }> = ({
+export const Size: React.FC<{ width: number; maxWidth?: number; height: number; onOk: (arg: ISize) => void }> = ({
   width,
+  maxWidth,
   height,
   onOk,
   children,
@@ -27,7 +29,7 @@ export const Size: React.FC<{ width: number; height: number; onOk: (arg: ISize)
       render={
         <div style={{ padding: '0 12px 12px' }}>
           <Form initValues={{ width, height }} getFormApi={(formApi) => ($form.current = formApi)} labelPosition="left">
-            <Form.InputNumber autofocus label="宽" field="width" />
+            <Form.InputNumber autofocus label="宽" field="width" {...(maxWidth ? { max: maxWidth } : {})} />
             <Form.InputNumber label="高" field="height" />
           </Form>
           <Button size="small" type="primary" theme="solid" htmlType="submit" onClick={handleOk}>

packages/client/src/tiptap/menus/document-children/bubble.tsx

@@ -0,0 +1,26 @@
+import { useCallback } from 'react';
+import { Space, Button } from '@douyinfe/semi-ui';
+import { IconDelete } from '@douyinfe/semi-icons';
+import { Tooltip } from 'components/tooltip';
+import { BubbleMenu } from '../../views/bubble-menu';
+import { DocumentChildren } from '../../extensions/document-children';
+
+export const DocumentChildrenBubbleMenu = ({ editor }) => {
+  const deleteNode = useCallback(() => editor.chain().deleteSelection().run(), [editor]);
+
+  return (
+    <BubbleMenu
+      className={'bubble-menu'}
+      editor={editor}
+      pluginKey="document-children-bubble-menu"
+      shouldShow={() => editor.isActive(DocumentChildren.name)}
+      tippyOptions={{ maxWidth: 'calc(100vw - 100px)' }}
+    >
+      <Space>
+        <Tooltip content="删除节点" hideOnClick>
+          <Button onClick={deleteNode} icon={<IconDelete />} type="tertiary" theme="borderless" size="small" />
+        </Tooltip>
+      </Space>
+    </BubbleMenu>
+  );
+};

packages/client/src/tiptap/menus/document-children/index.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Editor } from '@tiptap/core';
+import { DocumentChildrenBubbleMenu } from './bubble';
+
+export const DocumentChildren: React.FC<{ editor: Editor }> = ({ editor }) => {
+  if (!editor) {
+    return null;
+  }
+
+  return (
+    <>
+      <DocumentChildrenBubbleMenu editor={editor} />
+    </>
+  );
+};

packages/client/src/tiptap/menus/document-reference/bubble.tsx

@@ -60,7 +60,9 @@ export const DocumentReferenceBubbleMenu = ({ editor }) => {
                       style={{ cursor: 'pointer' }}
                       main={
                         <div style={{ display: 'flex', alignItems: 'center' }}>
-                          <IconDocument />
+                          <Text style={{ display: 'flex', alignItems: 'center' }}>
+                            <IconDocument />
+                          </Text>
                           <Text
                             ellipsis={{ showTooltip: { opts: { content: item.title, position: 'right' } } }}
                             style={{ width: 150, paddingLeft: 6 }}

packages/client/src/tiptap/menus/image/bubble.tsx

@@ -6,10 +6,12 @@ import { BubbleMenu } from '../../views/bubble-menu';
 import { Divider } from '../../divider';
 import { Image } from '../../extensions/image';
 import { Size } from '../_components/size';
+import { getEditorContainerDOMSize } from '../../utils/editor';
 
 export const ImageBubbleMenu = ({ editor }) => {
   const attrs = editor.getAttributes(Image.name);
   const { width: currentWidth, height: currentHeight } = attrs;
+  const { width: maxWidth } = getEditorContainerDOMSize(editor);
   const [width, setWidth] = useState(currentWidth);
   const [height, setHeight] = useState(currentHeight);
 
@@ -91,6 +93,7 @@ export const ImageBubbleMenu = ({ editor }) => {
 
         <Size
           width={width}
+          maxWidth={maxWidth}
           height={height}
           onOk={(size) => {
             editor

packages/client/src/tiptap/menus/insert/index.tsx

@@ -21,6 +21,7 @@ import { useToggle } from 'hooks/use-toggle';
 import { useUser } from 'data/user';
 import { createKeysLocalStorageLRUCache } from 'helpers/lru-cache';
 import { isTitleActive } from '../../utils/is-active';
+import { getEditorContainerDOMSize } from '../../utils/editor';
 import { createCountdown } from '../countdown/service';
 
 const insertMenuLRUCache = createKeysLocalStorageLRUCache('TIPTAP_INSERT_MENU', 3);
@@ -88,7 +89,10 @@ const COMMANDS = [
   {
     icon: <IconMind />,
     label: '思维导图',
-    action: (editor) => editor.chain().focus().setMind().run(),
+    action: (editor) => {
+      const { width } = getEditorContainerDOMSize(editor);
+      editor.chain().focus().setMind({ width }).run();
+    },
   },
   {
     icon: <IconMath />,

packages/client/src/tiptap/menus/mind/bubble.tsx

@@ -1,11 +1,25 @@
 import { useCallback } from 'react';
 import { Space, Button } from '@douyinfe/semi-ui';
-import { IconDelete } from '@douyinfe/semi-icons';
+import { IconLineHeight, IconDelete } from '@douyinfe/semi-icons';
 import { Tooltip } from 'components/tooltip';
 import { BubbleMenu } from '../../views/bubble-menu';
 import { Mind } from '../../extensions/mind';
+import { Size } from '../_components/size';
+import { Divider } from '../../divider';
+import { getEditorContainerDOMSize } from '../../utils/editor';
 
 export const MindBubbleMenu = ({ editor }) => {
+  const attrs = editor.getAttributes(Mind.name);
+  const { width, height } = attrs;
+  const { width: maxWidth } = getEditorContainerDOMSize(editor);
+
+  const setSize = useCallback(
+    (size) => {
+      editor.chain().updateAttributes(Mind.name, size).setNodeSelection(editor.state.selection.from).focus().run();
+    },
+    [editor]
+  );
+
   const deleteNode = useCallback(() => editor.chain().deleteSelection().run(), [editor]);
 
   return (
@@ -15,8 +29,15 @@ export const MindBubbleMenu = ({ editor }) => {
       pluginKey="mind-bubble-menu"
       shouldShow={() => editor.isActive(Mind.name)}
       tippyOptions={{ maxWidth: 'calc(100vw - 100px)' }}
+      matchRenderContainer={(node) => node && node.id === 'js-resizeable-container'}
     >
       <Space>
+        <Size width={width} maxWidth={maxWidth} height={height} onOk={setSize}>
+          <Tooltip content="设置宽高">
+            <Button icon={<IconLineHeight />} type="tertiary" theme="borderless" size="small" />
+          </Tooltip>
+        </Size>
+        <Divider />
         <Tooltip content="删除节点" hideOnClick>
           <Button onClick={deleteNode} icon={<IconDelete />} type="tertiary" theme="borderless" size="small" />
         </Tooltip>

packages/client/src/tiptap/styles/kityminder.scss

@@ -146,6 +146,7 @@
   z-index: 999;
   pointer-events: all;
   background: white;
+  color: #333;
   outline: none;
   opacity: 1;
 }

packages/client/src/tiptap/styles/node.scss

@@ -27,12 +27,16 @@
     }
   }
 
-  .node-image,
   .node-attachment,
+  .node-callout,
+  .node-countdown,
   .node-iframe,
+  .node-image,
+  .node-katex,
   .node-mind,
-  .node-banner,
-  .node-countdown {
+  .node-codeBlock,
+  .node-documentChildren,
+  .node-documentReference {
     margin-top: 0.75em;
   }
 
@@ -53,9 +57,6 @@
   .node-codeBlock,
   .node-documentChildren,
   .node-documentReference {
-    display: inline-block;
-    max-width: 100%;
-
     .render-wrapper {
       position: relative;
       user-select: text;

packages/client/src/tiptap/utils/editor.ts

@@ -0,0 +1,15 @@
+import { Editor } from '@tiptap/core';
+
+const cache = new Map();
+
+export function getEditorContainerDOMSize(editor: Editor): { width: number } {
+  if (!cache.has('width')) {
+    cache.set('width', (editor.options.element as HTMLElement).offsetWidth);
+  }
+
+  if (cache.has('width') && cache.get('width') <= 0) {
+    cache.set('width', (editor.options.element as HTMLElement).offsetWidth);
+  }
+
+  return { width: cache.get('width') };
+}

packages/client/src/tiptap/wrappers/callout/index.module.scss

@@ -1,5 +1,4 @@
 .wrap {
-  margin-top: 0.75em;
   line-height: 0;
 
   .innerWrap {

packages/client/src/tiptap/wrappers/code-block/index.module.scss

@@ -1,6 +1,5 @@
 .wrap {
   position: relative;
-  margin-top: 0.75em;
 
   .handleWrap {
     display: flex;

packages/client/src/tiptap/wrappers/document-children/index.module.scss

@@ -1,8 +1,8 @@
 .wrap {
   padding: 12px;
-  margin-top: 0.75em;
   border: 1px solid var(--node-border-color);
   border-radius: var(--border-radius);
+  user-select: none;
 
   .itemWrap {
     display: flex;

packages/client/src/tiptap/wrappers/document-reference/index.module.scss

@@ -1,5 +1,4 @@
 .wrap {
-  margin-top: 0.75em;
   border-radius: var(--border-radius);
 
   .itemWrap {

packages/client/src/tiptap/wrappers/iframe/index.tsx

@@ -3,6 +3,7 @@ import cls from 'classnames';
 import { NodeViewWrapper, NodeViewContent } from '@tiptap/react';
 import { Typography } from '@douyinfe/semi-ui';
 import { Resizeable } from 'components/resizeable';
+import { getEditorContainerDOMSize } from '../../utils/editor';
 import styles from './index.module.scss';
 
 const { Text } = Typography;
@@ -10,6 +11,7 @@ const { Text } = Typography;
 export const IframeWrapper = ({ editor, node, updateAttributes }) => {
   const isEditable = editor.isEditable;
   const { url, width, height } = node.attrs;
+  const { width: maxWidth } = getEditorContainerDOMSize(editor);
 
   const onResize = useCallback((size) => {
     updateAttributes({ width: size.width, height: size.height });
@@ -39,7 +41,7 @@ export const IframeWrapper = ({ editor, node, updateAttributes }) => {
   return (
     <NodeViewWrapper>
       {isEditable ? (
-        <Resizeable height={height} width={width} onChangeEnd={onResize}>
+        <Resizeable width={width || maxWidth} maxWidth={maxWidth} height={height} onChangeEnd={onResize}>
           <div style={{ width, height, maxWidth: '100%' }}>{content}</div>
         </Resizeable>
       ) : (

packages/client/src/tiptap/wrappers/image/index.tsx

@@ -7,6 +7,7 @@ import { Resizeable } from 'components/resizeable';
 import { useToggle } from 'hooks/use-toggle';
 import { uploadFile } from 'services/file';
 import { extractFileExtension, extractFilename, getImageWidthHeight } from '../../utils/file';
+import { getEditorContainerDOMSize } from '../../utils/editor';
 import styles from './index.module.scss';
 
 const { Text } = Typography;
@@ -14,6 +15,7 @@ const { Text } = Typography;
 export const ImageWrapper = ({ editor, node, updateAttributes }) => {
   const isEditable = editor.isEditable;
   const { hasTrigger, error, src, alt, title, width, height, textAlign } = node.attrs;
+  const { width: maxWidth } = getEditorContainerDOMSize(editor);
   const $upload = useRef<HTMLInputElement>();
   const [loading, toggleLoading] = useToggle(false);
 
@@ -80,7 +82,13 @@ export const ImageWrapper = ({ editor, node, updateAttributes }) => {
 
     if (isEditable) {
       return (
-        <Resizeable className={cls('render-wrapper')} width={width} height={height} onChangeEnd={onResize}>
+        <Resizeable
+          className={cls('render-wrapper')}
+          width={width || maxWidth}
+          height={height}
+          maxWidth={maxWidth}
+          onChangeEnd={onResize}
+        >
           {img}
         </Resizeable>
       );

packages/client/src/tiptap/wrappers/mind/index.module.scss

@@ -20,7 +20,7 @@
     opacity: 0;
   }
 
-  &.isActive {
+  &:hover {
     .toolbarWrap {
       opacity: 1;
     }

packages/client/src/tiptap/wrappers/mind/index.tsx

@@ -1,4 +1,4 @@
-import { NodeViewWrapper } from '@tiptap/react';
+import { NodeViewContent, NodeViewWrapper } from '@tiptap/react';
 import cls from 'classnames';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Spin, Typography } from '@douyinfe/semi-ui';
@@ -6,6 +6,7 @@ import deepEqual from 'deep-equal';
 import { Resizeable } from 'components/resizeable';
 import { useToggle } from 'hooks/use-toggle';
 import { clamp } from '../../utils/clamp';
+import { getEditorContainerDOMSize } from '../../utils/editor';
 import { Mind } from '../../extensions/mind';
 import { loadKityMinder } from './kityminder';
 import { Toolbar } from './toolbar';
@@ -17,8 +18,9 @@ const { Text } = Typography;
 export const MindWrapper = ({ editor, node, updateAttributes }) => {
   const $container = useRef();
   const $mind = useRef<any>();
-  const isMindActive = editor.isActive(Mind.name);
   const isEditable = editor.isEditable;
+  const isActive = editor.isActive(Mind.name);
+  const { width: maxWidth } = getEditorContainerDOMSize(editor);
   const { data, template, theme, zoom, width, height } = node.attrs;
   const [loading, toggleLoading] = useToggle(true);
   const [error, setError] = useState<Error | null>(null);
@@ -202,9 +204,9 @@ export const MindWrapper = ({ editor, node, updateAttributes }) => {
   }, [theme]);
 
   return (
-    <NodeViewWrapper className={cls(styles.wrap, isMindActive && styles.isActive)}>
+    <NodeViewWrapper className={cls(styles.wrap, isActive && styles.isActive)}>
       {isEditable ? (
-        <Resizeable width={width} height={height} onChangeEnd={onResize}>
+        <Resizeable width={width} height={height} maxWidth={maxWidth} onChangeEnd={onResize}>
           {content}
         </Resizeable>
       ) : (
@@ -213,6 +215,7 @@ export const MindWrapper = ({ editor, node, updateAttributes }) => {
       <div className={styles.toolbarWrap}>
         <Toolbar
           isEditable={isEditable}
+          maxHeight={height * 0.8}
           template={template}
           theme={theme}
           zoom={zoom}
@@ -223,6 +226,7 @@ export const MindWrapper = ({ editor, node, updateAttributes }) => {
           setTheme={setTheme}
         />
       </div>
+      <NodeViewContent />
     </NodeViewWrapper>
   );
 };

packages/client/src/tiptap/wrappers/mind/kityminder/index.ts

@@ -2,7 +2,6 @@ export const loadKityMinder = async (): Promise<any> => {
   if (typeof window !== 'undefined') {
     if (window.kityminder) {
       if (window.kityminder.Editor) {
-        console.log('无需重复');
         return;
       }
     }

packages/client/src/tiptap/wrappers/mind/toolbar/index.module.scss

@@ -5,7 +5,7 @@
   z-index: 1000;
   display: flex;
   padding: 4px;
-  overflow-x: auto;
+  overflow: auto;
   background-color: var(--semi-color-nav-bg);
   border: 1px solid var(--semi-color-border);
   border-radius: 3px;

packages/client/src/tiptap/wrappers/mind/toolbar/index.tsx

@@ -11,6 +11,7 @@ const { Text } = Typography;
 
 interface IProps {
   isEditable: boolean;
+  maxHeight: number;
   zoom: number | string;
   template: string;
   theme: string;
@@ -23,6 +24,7 @@ interface IProps {
 
 export const Toolbar: React.FC<IProps> = ({
   isEditable,
+  maxHeight,
   template,
   theme,
   zoom,
@@ -33,7 +35,7 @@ export const Toolbar: React.FC<IProps> = ({
   setTheme,
 }) => {
   return (
-    <div className={styles.wrap}>
+    <div className={styles.wrap} style={{ maxHeight }}>
       {isEditable ? (
         <>
           <Tooltip content="缩小" position="right">

pnpm-lock.yaml

@@ -89,6 +89,7 @@ importers:
       copy-to-clipboard: ^3.3.1
       deep-equal: ^2.0.5
       dompurify: ^2.3.5
+      interactjs: ^1.10.11
       katex: ^0.15.2
       kity: ^2.0.4
       lib0: ^0.2.47
@@ -104,7 +105,6 @@ importers:
       prosemirror-tables: ^1.1.1
       prosemirror-utils: ^0.9.6
       prosemirror-view: ^1.23.6
-      re-resizable: ^6.9.9
       react: 17.0.2
       react-countdown: ^2.3.2
       react-dom: 17.0.2
@@ -172,6 +172,7 @@ importers:
       copy-to-clipboard: 3.3.1
       deep-equal: 2.0.5
       dompurify: 2.3.5
+      interactjs: 1.10.11
       katex: 0.15.2
       kity: 2.0.4
       lib0: 0.2.47
@@ -187,7 +188,6 @@ importers:
       prosemirror-tables: 1.1.1
       prosemirror-utils: 0.9.6_prosemirror-tables@1.1.1
       prosemirror-view: 1.23.6
-      re-resizable: 6.9.9_react-dom@17.0.2+react@17.0.2
       react: 17.0.2
       react-countdown: 2.3.2_react-dom@17.0.2+react@17.0.2
       react-dom: 17.0.2_react@17.0.2
@@ -955,6 +955,10 @@ packages:
       - y-protocols
     dev: false
 
+  /@interactjs/types/1.10.11:
+    resolution: {integrity: sha512-YRsVFWjL8Gkkvlx3qnjeaxW4fnibSJ9791g8BA7Pv5ANByI64WmtR1vU7A2rXcrOn8XvyCEfY0ss1s8NhZP+MA==}
+    dev: false
+
   /@ioredis/commands/1.1.1:
     resolution: {integrity: sha512-fsR4P/ROllzf/7lXYyElUJCheWdTJVJvOTps8v9IWKFATxR61ANOlnoPqhH099xYLrJGpc2ZQ28B3rMeUt5VQg==}
     dev: false
@@ -4464,6 +4468,12 @@ packages:
       through: 2.3.8
     dev: true
 
+  /interactjs/1.10.11:
+    resolution: {integrity: sha512-VPUWsGAOPmrZe1YF7Fq/4AIBBZ+3FikZRS8bpzT6VsAfUuhxl/CKJY73IAiZHd3fz9p174CXErn0Qs81XEFICA==}
+    dependencies:
+      '@interactjs/types': 1.10.11
+    dev: false
+
   /internal-slot/1.0.3:
     resolution: {integrity: sha512-O0DB1JC/sPyZl7cIo78n5dR7eUSwwpYPiXRhTzNxZVAMUuB8vlnRFyLxdrVToks6XPLVnFfbzaVd5WLjhgg+vA==}
     engines: {node: '>= 0.4'}
@@ -6697,16 +6707,6 @@ packages:
       unpipe: 1.0.0
     dev: false
 
-  /re-resizable/6.9.9_react-dom@17.0.2+react@17.0.2:
-    resolution: {integrity: sha512-l+MBlKZffv/SicxDySKEEh42hR6m5bAHfNu3Tvxks2c4Ah+ldnWjfnVRwxo/nxF27SsUsxDS0raAzFuJNKABXA==}
-    peerDependencies:
-      react: ^16.13.1 || ^17.0.0 || ^18.0.0
-      react-dom: ^16.13.1 || ^17.0.0 || ^18.0.0
-    dependencies:
-      react: 17.0.2
-      react-dom: 17.0.2_react@17.0.2
-    dev: false
-
   /react-countdown/2.3.2_react-dom@17.0.2+react@17.0.2:
     resolution: {integrity: sha512-Q4SADotHtgOxNWhDdvgupmKVL0pMB9DvoFcxv5AzjsxVhzOVxnttMbAywgqeOdruwEAmnPhOhNv/awAgkwru2w==}
     peerDependencies: