Merge pull request #144 from fantasticit/fix/drag

packages/client/src/tiptap/core/extensions/code-block.ts

@@ -158,6 +158,8 @@ export interface CodeBlockLowlightOptions extends CodeBlockOptions {
 }
 
 export const CodeBlock = BuiltInCodeBlock.extend<CodeBlockLowlightOptions>({
+  draggable: true,
+
   addOptions() {
     return {
       ...this.parent?.(),

packages/client/src/tiptap/core/extensions/countdown.ts

@@ -64,15 +64,12 @@ export const Countdown = Node.create({
           }
 
           const { selection } = editor.state;
-          const pos = selection.$head;
 
           return chain()
-            .insertContentAt(pos.after(), [
+            .insertContent({
-              {
               type: this.name,
               attrs: options,
-              },
+            })
-            ])
             .run();
         },
     };

packages/client/src/tiptap/core/extensions/dragable.ts

@@ -1,158 +0,0 @@
-import { Extension } from '@tiptap/core';
-import { Plugin } from 'prosemirror-state';
-import { NodeSelection } from 'prosemirror-state';
-import { __serializeForClipboard } from 'prosemirror-view';
-
-function createRect(rect) {
-  if (rect == null) {
-    return null;
-  }
-  const newRect = {
-    left: rect.left + document.body.scrollLeft,
-    top: rect.top + document.body.scrollTop,
-    width: rect.width,
-    height: rect.height,
-    bottom: 0,
-    right: 0,
-  };
-  newRect.bottom = newRect.top + newRect.height;
-  newRect.right = newRect.left + newRect.width;
-  return newRect;
-}
-
-function absoluteRect(element) {
-  return createRect(element.getBoundingClientRect());
-}
-
-export const Dragable = Extension.create({
-  name: 'dragable',
-
-  addProseMirrorPlugins() {
-    let scrollContainer;
-    let dropElement;
-    let currentNode;
-    let editorView;
-    const WIDTH = 24;
-
-    function drag(e) {
-      if (!currentNode || currentNode.nodeType !== 1) return;
-
-      let pos = null;
-      const desc = editorView.docView.nearestDesc(currentNode, true);
-
-      if (!(!desc || desc === editorView.docView)) {
-        pos = desc.posBefore;
-      }
-
-      if (!pos) return;
-
-      editorView.dispatch(editorView.state.tr.setSelection(NodeSelection.create(editorView.state.doc, pos)));
-      const slice = editorView.state.selection.content();
-      const { dom, text } = __serializeForClipboard(editorView, slice);
-      e.dataTransfer.clearData();
-      e.dataTransfer.setData('text/html', dom.innerHTML);
-      e.dataTransfer.setData('text/plain', text);
-      editorView.dragging = { slice, move: true };
-    }
-
-    function onScroll() {
-      if (!dropElement) return;
-      dropElement.style.opacity = 0;
-    }
-
-    return [
-      new Plugin({
-        view(view) {
-          if (view.editable) {
-            editorView = view;
-            dropElement = document.createElement('div');
-            dropElement.setAttribute('draggable', 'true');
-            dropElement.className = 'drag-handler';
-            dropElement.addEventListener('dragstart', drag);
-            view.dom.parentElement.appendChild(dropElement);
-
-            scrollContainer = view.dom.parentElement.parentElement?.parentElement?.parentElement;
-
-            if (scrollContainer) {
-              scrollContainer.addEventListener('scroll', onScroll);
-            }
-          }
-
-          return {
-            update(view) {
-              editorView = view;
-            },
-            destroy() {
-              if (dropElement && dropElement.parentNode) {
-                dropElement.removeEventListener('dragstart', drag);
-                dropElement.parentNode.removeChild(dropElement);
-              }
-
-              if (scrollContainer) {
-                scrollContainer.removeEventListener('scroll', onScroll);
-              }
-            },
-          };
-        },
-        props: {
-          handleDOMEvents: {
-            drop() {
-              if (!dropElement) return;
-
-              dropElement.style.opacity = 0;
-              setTimeout(() => {
-                const node = document.querySelector('.ProseMirror-hideselection');
-                if (node) {
-                  node.classList.remove('ProseMirror-hideselection');
-                }
-              }, 50);
-            },
-            mousedown(view, event) {
-              if (!dropElement) return;
-
-              const coords = { left: event.clientX, top: event.clientY };
-              const pos = view.posAtCoords(coords);
-
-              if (!pos) {
-                dropElement.style.opacity = 0;
-                return;
-              }
-
-              let node = view.domAtPos(pos.pos);
-
-              node = node.node;
-
-              while (node && node.parentNode) {
-                if (node.parentNode?.classList?.contains?.('ProseMirror')) {
-                  break;
-                }
-                node = node.parentNode;
-              }
-
-              if (!node || !node.getBoundingClientRect) {
-                dropElement.style.opacity = 0;
-                return;
-              }
-
-              if (node?.classList?.contains('node-title') || node?.classList?.contains('node-table')) {
-                dropElement.style.opacity = 0;
-                return;
-              }
-
-              currentNode = node;
-
-              const rect = absoluteRect(node);
-              const win = node.ownerDocument.defaultView;
-              rect.top += win.pageYOffset;
-              rect.left += win.pageXOffset;
-              rect.width = WIDTH + 'px';
-              dropElement.style.left = rect.left - WIDTH + 'px';
-              dropElement.style.top = rect.top + 6 + 'px';
-              dropElement.style.opacity = 1;
-            },
-          },
-        },
-      }),
-    ];
-  },
-});

packages/client/src/tiptap/core/extensions/flow.ts

@@ -84,15 +84,12 @@ export const Flow = Node.create({
           }
 
           const { selection } = editor.state;
-          const pos = selection.$head;
 
           return chain()
-            .insertContentAt(pos.after(), [
+            .insertContent({
-              {
               type: this.name,
               attrs: options,
-              },
+            })
-            ])
             .run();
         },
     };

packages/client/src/tiptap/core/extensions/iframe.ts

@@ -84,15 +84,12 @@ export const Iframe = Node.create({
 
           const attrs = options || { url: '' };
           const { selection } = editor.state;
-          const pos = selection.$head;
 
           return chain()
-            .insertContentAt(pos.after(), [
+            .insertContent({
-              {
               type: this.name,
               attrs,
-              },
+            })
-            ])
             .run();
         },
     };

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

@@ -95,15 +95,12 @@ export const Mind = Node.create({
           }
 
           const { selection } = editor.state;
-          const pos = selection.$head;
 
           return chain()
-            .insertContentAt(pos.after(), [
+            .insertContent({
-              {
               type: this.name,
               attrs: options,
-              },
+            })
-            ])
             .run();
         },
     };

packages/client/src/tiptap/core/extensions/paragraph.ts

@@ -1,3 +1,22 @@
+import { mergeAttributes } from '@tiptap/core';
 import TitapParagraph from '@tiptap/extension-paragraph';
 
-export const Paragraph = TitapParagraph.extend({});
+export const Paragraph = TitapParagraph.extend({
+  draggable: true,
+
+  renderHTML({ HTMLAttributes }) {
+    return [
+      'p',
+      mergeAttributes(this.options.HTMLAttributes, HTMLAttributes),
+      [
+        'div',
+        {
+          'contentEditable': 'false',
+          'draggable': 'true',
+          'data-drag-handle': 'true',
+        },
+      ],
+      ['div', 0],
+    ];
+  },
+});

packages/client/src/tiptap/core/index.tsx

@@ -22,6 +22,16 @@ export const useEditor = (options: Partial<EditorOptions> = {}, deps: Dependency
   const forceUpdate = useForceUpdate();
 
   useEffect(() => {
+    options.editorProps = options.editorProps || {};
+
+    if (options.editable) {
+      options.editorProps.attributes = options.editorProps.attributes || {};
+      // @ts-ignore
+      options.editorProps.attributes.class = options.editorProps.attributes.class || '';
+      // @ts-ignore
+      options.editorProps.attributes.class += ' is-editable';
+    }
+
     const instance = new Editor(options);
 
     setEditor(instance);

packages/client/src/tiptap/core/styles/drag.scss

@@ -1,11 +1,91 @@
-.drag-handler {
+/* stylelint-disable */
-  position: fixed;
+.ProseMirror {
+  &.is-editable {
+    [data-drag-handle] {
+      position: relative;
+      display: inline;
+      opacity: 0;
+      transition: opacity 0.3s ease-out;
+      z-index: 100;
+
+      &:hover {
+        opacity: 1 !important;
+      }
+
+      &::before {
+        content: '';
+        position: absolute;
+        left: -24px;
+        top: 2px;
         width: 16px;
         height: 16px;
-  cursor: grab;
+        text-align: center;
-  opacity: 1;
+        margin-left: auto;
-  background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 16"><path fill-opacity="0.2" d="M4 14c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2zM2 6C.9 6 0 6.9 0 8s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-6C.9 0 0 .9 0 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6 4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" /></svg>');
+        cursor: move;
-  background-repeat: no-repeat;
+        background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='3' y='1' width='3' height='3' rx='1.5' fill='%23111'/%3E%3Crect x='10' y='1' width='3' height='3' rx='1.5' fill='%23111'/%3E%3Crect x='3' y='6' width='3' height='3' rx='1.5' fill='%23111'/%3E%3Crect x='10' y='6' width='3' height='3' rx='1.5' fill='%23111'/%3E%3Crect x='3' y='11' width='3' height='3' rx='1.5' fill='%23111'/%3E%3Crect x='10' y='11' width='3' height='3' rx='1.5' fill='%23111'/%3E%3C/svg%3E");
         background-size: contain;
-  background-position: center;
+        background-position: center 0;
+        background-repeat: no-repeat;
+        filter: var(--invert-filter);
+      }
+    }
+
+    p {
+      [data-drag-handle] {
+        &::before {
+          top: 6px;
+        }
+      }
+
+      &:hover {
+        [data-drag-handle] {
+          opacity: 0.3;
+        }
+      }
+    }
+
+    ul {
+      li {
+        [data-drag-handle] {
+          &::before {
+            left: -36px;
+          }
+        }
+      }
+
+      &[data-type='taskList'] {
+        li {
+          [data-drag-handle] {
+            &::before {
+              left: -46px;
+            }
+          }
+        }
+      }
+    }
+
+    ol {
+      li {
+        [data-drag-handle] {
+          &::before {
+            left: -36px;
+          }
+        }
+      }
+    }
+
+    .drag-container {
+      position: relative;
+
+      &:hover {
+        [data-drag-handle] {
+          opacity: 0.3;
+        }
+      }
+
+      .drag-content {
+        width: 100%;
+      }
+    }
+  }
 }

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

@@ -21,7 +21,8 @@
   }
 
   .node-codeBlock,
-  .node-katex {
+  .node-katex,
+  .node-documentChildren {
     .render-wrapper {
       border-radius: var(--border-radius);
     }

packages/client/src/tiptap/core/wrappers/attachment/index.tsx

@@ -1,13 +1,12 @@
 import { IconClose, IconDownload, IconPlayCircle } from '@douyinfe/semi-icons';
 import { Button, Collapsible, Progress, Space, Spin, Toast, Typography } from '@douyinfe/semi-ui';
 import { FILE_CHUNK_SIZE } from '@think/domains';
+import { NodeViewWrapper } from '@tiptap/react';
 import cls from 'classnames';
 import { Tooltip } from 'components/tooltip';
 import { useToggle } from 'hooks/use-toggle';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { uploadFile } from 'services/file';
-import { Attachment } from 'tiptap/core/extensions/attachment';
-import { DragableWrapper } from 'tiptap/core/wrappers/dragable';
 import { download, extractFileExtension, extractFilename, normalizeFileSize } from 'tiptap/prose-utils';
 
 import { getFileTypeIcon } from './file-icon';
@@ -156,8 +155,9 @@ export const AttachmentWrapper = ({ editor, node, updateAttributes }) => {
   })();
 
   return (
-    <DragableWrapper editor={editor} extensionName={Attachment.name}>
+    <NodeViewWrapper className={'drag-container'}>
-      {content}
+      <div className={'drag-handle'} contentEditable="false" draggable="true" data-drag-handle />
-    </DragableWrapper>
+      <div className={'drag-content'}>{content}</div>
+    </NodeViewWrapper>
   );
 };

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

@@ -44,4 +44,10 @@
     display: flex;
     padding: 10px;
   }
+
+  [data-node-view-content] {
+    [data-drag-handle] {
+      opacity: 0 !important;
+    }
+  }
 }

packages/client/src/tiptap/core/wrappers/callout/index.tsx

@@ -1,11 +1,9 @@
-import { NodeViewContent } from '@tiptap/react';
+import { NodeViewContent, NodeViewWrapper } from '@tiptap/react';
 import cls from 'classnames';
 import { EmojiPicker } from 'components/emoji-picker';
 import { convertColorToRGBA } from 'helpers/color';
 import { Theme, ThemeEnum } from 'hooks/use-theme';
 import { useCallback, useMemo } from 'react';
-import { Callout } from 'tiptap/core/extensions/callout';
-import { DragableWrapper } from 'tiptap/core/wrappers/dragable';
 
 import styles from './index.module.scss';
 
@@ -27,12 +25,9 @@ export const CalloutWrapper = ({ editor, node, updateAttributes }) => {
   );
 
   return (
-    <DragableWrapper
+    <NodeViewWrapper id="js-callout-container" className={cls('drag-container', styles.wrap)}>
-      editor={editor}
+      <div className={'drag-handle'} contentEditable="false" draggable="true" data-drag-handle />
-      extensionName={Callout.name}
+      <div className={'drag-content'}>
-      id="js-callout-container"
-      className={cls(styles.wrap)}
-    >
         <div
           className={cls(styles.innerWrap, 'render-wrapper')}
           style={{
@@ -53,6 +48,7 @@ export const CalloutWrapper = ({ editor, node, updateAttributes }) => {
             }}
           />
         </div>
-    </DragableWrapper>
+      </div>
+    </NodeViewWrapper>
   );
 };

packages/client/src/tiptap/core/wrappers/code-block/index.tsx

@@ -1,6 +1,6 @@
 import { IconCopy } from '@douyinfe/semi-icons';
 import { Button, Select, Tooltip } from '@douyinfe/semi-ui';
-import { NodeViewContent } from '@tiptap/react';
+import { NodeViewContent, NodeViewWrapper } from '@tiptap/react';
 import cls from 'classnames';
 import { copy } from 'helpers/copy';
 import React, { useRef } from 'react';
@@ -16,11 +16,9 @@ export const CodeBlockWrapper = ({ editor, node: { attrs }, updateAttributes, ex
   const $container = useRef<HTMLPreElement>();
 
   return (
-    <DragableWrapper
+    <NodeViewWrapper className={cls('drag-container', styles.wrap, !isPrint && styles.maxHeight, 'render-wrapper')}>
-      editor={editor}
+      <div className={'drag-handle'} contentEditable="false" draggable="true" data-drag-handle />
-      extensionName={CodeBlock.name}
+      <div className={'drag-content'}>
-      className={cls(styles.wrap, !isPrint && styles.maxHeight, 'render-wrapper')}
-    >
         <div className={styles.handleWrap}>
           <Select
             size="small"
@@ -50,6 +48,7 @@ export const CodeBlockWrapper = ({ editor, node: { attrs }, updateAttributes, ex
         <pre ref={$container}>
           <NodeViewContent as="code" />
         </pre>
-    </DragableWrapper>
+      </div>
+    </NodeViewWrapper>
   );
 };

packages/client/src/tiptap/core/wrappers/countdown/index.tsx

@@ -1,8 +1,7 @@
 import { Space, Typography } from '@douyinfe/semi-ui';
+import { NodeViewWrapper } from '@tiptap/react';
 import cls from 'classnames';
 import ReactCountdown from 'react-countdown';
-import { Countdown } from 'tiptap/core/extensions/countdown';
-import { DragableWrapper } from 'tiptap/core/wrappers/dragable';
 
 import styles from './index.module.scss';
 
@@ -33,11 +32,14 @@ export const CountdownWrapper = ({ editor, node }) => {
   const { title, date } = node.attrs;
 
   return (
-    <DragableWrapper editor={editor} extensionName={Countdown.name}>
+    <NodeViewWrapper className={'drag-container'}>
+      <div className={'drag-handle'} contentEditable="false" draggable="true" data-drag-handle />
+      <div className={'drag-content'}>
         <div className={cls(styles.wrap, 'render-wrapper')}>
           <Text>{title}</Text>
           <ReactCountdown date={date} renderer={renderer}></ReactCountdown>
         </div>
-    </DragableWrapper>
+      </div>
+    </NodeViewWrapper>
   );
 };

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

@@ -1,6 +1,5 @@
 .wrap {
   padding: 12px;
-  border: 1px solid var(--node-border-color);
   border-radius: var(--border-radius);
   user-select: none;
 

packages/client/src/tiptap/core/wrappers/document-children/index.tsx

@@ -1,4 +1,5 @@
 import { Typography } from '@douyinfe/semi-ui';
+import { NodeViewWrapper } from '@tiptap/react';
 import cls from 'classnames';
 import { DataRender } from 'components/data-render';
 import { Empty } from 'components/empty';
@@ -7,8 +8,6 @@ import { useChildrenDocument } from 'data/document';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
 import { useEffect } from 'react';
-import { DocumentChildren } from 'tiptap/core/extensions/document-children';
-import { DragableWrapper } from 'tiptap/core/wrappers/dragable';
 
 import styles from './index.module.scss';
 
@@ -36,13 +35,9 @@ export const DocumentChildrenWrapper = ({ editor, node, updateAttributes }) => {
   }, [node.attrs, wikiId, documentId, updateAttributes]);
 
   return (
-    <DragableWrapper
+    <NodeViewWrapper as="div" className={cls('drag-container', 'render-wrapper')}>
-      editor={editor}
+      <div className={'drag-handle'} contentEditable="false" draggable="true" data-drag-handle />
-      extensionName={DocumentChildren.name}
+      <div className={cls('drag-content', styles.wrap, isEditable && styles.isEditable, 'documentChildren')}>
-      as="div"
-      className={cls('render-wrapper', styles.wrap, isEditable && styles.isEditable, 'documentChildren')}
-    >
-      <div>
         <div>
           <Text type="tertiary">子文档</Text>
         </div>
@@ -82,6 +77,6 @@ export const DocumentChildrenWrapper = ({ editor, node, updateAttributes }) => {
           <Text type="tertiary">当前页面无法使用子文档</Text>
         )}
       </div>
-    </DragableWrapper>
+    </NodeViewWrapper>
   );
 };

packages/client/src/tiptap/core/wrappers/document-reference/index.tsx

@@ -1,10 +1,9 @@
+import { NodeViewWrapper } from '@tiptap/react';
 import cls from 'classnames';
 import { IconDocument } from 'components/icons';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
 import { useMemo } from 'react';
-import { DocumentReference } from 'tiptap/core/extensions/document-reference';
-import { DragableWrapper } from 'tiptap/core/wrappers/dragable';
 
 import styles from './index.module.scss';
 
@@ -51,13 +50,9 @@ export const DocumentReferenceWrapper = ({ editor, node, updateAttributes }) =>
   }, [organizationId, wikiId, documentId, isEditable, isShare, title]);
 
   return (
-    <DragableWrapper
+    <NodeViewWrapper as="div" className={cls('drag-container', styles.wrap, isEditable && 'render-wrapper')}>
-      editor={editor}
+      <div className={'drag-handle'} contentEditable="false" draggable="true" data-drag-handle />
-      extensionName={DocumentReference.name}
+      <div className={'drag-content'}>{content}</div>
-      as="div"
+    </NodeViewWrapper>
-      className={cls(styles.wrap, isEditable && 'render-wrapper')}
-    >
-      {content}
-    </DragableWrapper>
   );
 };

packages/client/src/tiptap/core/wrappers/dragable/index.module.scss

@@ -1,30 +0,0 @@
-.draggableItem {
-  position: relative;
-  display: flex;
-
-  .dragHandle {
-    position: absolute;
-    top: 0.3rem;
-    left: -24px;
-    width: 16px;
-    height: 16px;
-    cursor: grab;
-    opacity: 0;
-    background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 16"><path fill-opacity="0.2" d="M4 14c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2zM2 6C.9 6 0 6.9 0 8s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-6C.9 0 0 .9 0 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6 4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" /></svg>');
-    background-repeat: no-repeat;
-    background-size: contain;
-    background-position: center;
-  }
-
-  .content {
-    width: 100%;
-  }
-
-  &.isEditable {
-    &.isActive {
-      .dragHandle {
-        opacity: 1;
-      }
-    }
-  }
-}

packages/client/src/tiptap/core/wrappers/dragable/index.tsx

@@ -1,31 +0,0 @@
-import { Editor } from '@tiptap/core';
-import { NodeViewWrapper } from '@tiptap/react';
-import cls from 'classnames';
-import React, { ElementType } from 'react';
-import { useActive } from 'tiptap/core/hooks/use-active';
-
-import styles from './index.module.scss';
-
-export const DragableWrapper: React.FC<{
-  editor: Editor;
-  extensionName: string;
-  as?: ElementType;
-  id?: string;
-  className?: string;
-  style?: React.CSSProperties;
-}> = ({ editor, extensionName, as = 'div', id, className, style = {}, children }) => {
-  const isEditable = editor.isEditable;
-  const isActive = useActive(editor, extensionName);
-
-  return (
-    <NodeViewWrapper
-      as={as}
-      id={id}
-      className={cls(styles.draggableItem, isEditable && styles.isEditable, isActive && styles.isActive, className)}
-      style={style}
-    >
-      <div className={styles.dragHandle} contentEditable="false" draggable="true" data-drag-handle />
-      <div className={styles.content}>{children}</div>
-    </NodeViewWrapper>
-  );
-};

packages/client/src/tiptap/core/wrappers/flow/index.tsx

@@ -1,4 +1,5 @@
 import { Button, Space, Spin, Typography } from '@douyinfe/semi-ui';
+import { NodeViewWrapper } from '@tiptap/react';
 import cls from 'classnames';
 import { IconFlow, IconMindCenter, IconZoomIn, IconZoomOut } from 'components/icons';
 import { Resizeable } from 'components/resizeable';
@@ -7,7 +8,6 @@ import { useCallback, useEffect, useRef, useState } from 'react';
 import VisibilitySensor from 'react-visibility-sensor';
 import { load, renderXml } from 'thirtypart/diagram';
 import { Flow } from 'tiptap/core/extensions/flow';
-import { DragableWrapper } from 'tiptap/core/wrappers/dragable';
 import { getEditorContainerDOMSize } from 'tiptap/prose-utils';
 
 import styles from './index.module.scss';
@@ -95,11 +95,9 @@ export const FlowWrapper = ({ editor, node, updateAttributes }) => {
   }, [toggleLoading, data]);
 
   return (
-    <DragableWrapper
+    <NodeViewWrapper className={cls('drag-container', isActive && styles.isActive)}>
-      editor={editor}
+      <div className={'drag-handle'} contentEditable="false" draggable="true" data-drag-handle />
-      className={cls(styles.wrap, isActive && styles.isActive)}
+      <div className={cls('drag-content', styles.wrap)}>
-      extensionName={Flow.name}
-    >
         <VisibilitySensor onChange={onViewportChange}>
           <Resizeable isEditable={isEditable} width={width} height={height} maxWidth={maxWidth} onChangeEnd={onResize}>
             <div
@@ -138,6 +136,7 @@ export const FlowWrapper = ({ editor, node, updateAttributes }) => {
             </div>
           </Resizeable>
         </VisibilitySensor>
-    </DragableWrapper>
+      </div>
+    </NodeViewWrapper>
   );
 };

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

@@ -1,9 +1,8 @@
 import { Typography } from '@douyinfe/semi-ui';
+import { NodeViewWrapper } from '@tiptap/react';
 import cls from 'classnames';
 import { Resizeable } from 'components/resizeable';
 import { useCallback } from 'react';
-import { Iframe } from 'tiptap/core/extensions/iframe';
-import { DragableWrapper } from 'tiptap/core/wrappers/dragable';
 import { getEditorContainerDOMSize } from 'tiptap/prose-utils';
 
 import styles from './index.module.scss';
@@ -23,7 +22,9 @@ export const IframeWrapper = ({ editor, node, updateAttributes }) => {
   );
 
   return (
-    <DragableWrapper editor={editor} extensionName={Iframe.name}>
+    <NodeViewWrapper className={'drag-container'}>
+      <div className={'drag-handle'} contentEditable="false" draggable="true" data-drag-handle />
+      <div className={'drag-content'}>
         <Resizeable width={width} maxWidth={maxWidth} height={height} isEditable={isEditable} onChangeEnd={onResize}>
           <div className={cls(styles.wrap, 'render-wrapper')}>
             {url ? (
@@ -37,6 +38,7 @@ export const IframeWrapper = ({ editor, node, updateAttributes }) => {
             )}
           </div>
         </Resizeable>
-    </DragableWrapper>
+      </div>
+    </NodeViewWrapper>
   );
 };

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

@@ -1,11 +1,10 @@
 import { Spin, Typography } from '@douyinfe/semi-ui';
+import { NodeViewWrapper } from '@tiptap/react';
 import { Resizeable } from 'components/resizeable';
 import { useToggle } from 'hooks/use-toggle';
 import { useCallback, useEffect, useRef } from 'react';
 import { LazyLoadImage } from 'react-lazy-load-image-component';
 import { uploadFile } from 'services/file';
-import { Image } from 'tiptap/core/extensions/image';
-import { DragableWrapper } from 'tiptap/core/wrappers/dragable';
 import {
   extractFileExtension,
   extractFilename,
@@ -70,7 +69,9 @@ export const ImageWrapper = ({ editor, node, updateAttributes }) => {
   }, [src, hasTrigger, selectFile, updateAttributes]);
 
   return (
-    <DragableWrapper editor={editor} extensionName={Image.name} style={{ textAlign, fontSize: 0, maxWidth: '100%' }}>
+    <NodeViewWrapper className={'drag-container'} style={{ textAlign, fontSize: 0, maxWidth: '100%' }}>
+      <div className={'drag-handle'} contentEditable="false" draggable="true" data-drag-handle />
+      <div className={'drag-content'}>
         <Resizeable
           className={'render-wrapper'}
           width={width || maxWidth}
@@ -94,6 +95,7 @@ export const ImageWrapper = ({ editor, node, updateAttributes }) => {
             <LazyLoadImage src={src} alt={alt} width={width} height={height} />
           )}
         </Resizeable>
-    </DragableWrapper>
+      </div>
+    </NodeViewWrapper>
   );
 };

packages/client/src/tiptap/core/wrappers/katex/index.tsx

@@ -1,9 +1,8 @@
+import { NodeViewWrapper } from '@tiptap/react';
 import { convertColorToRGBA } from 'helpers/color';
 import { Theme, ThemeEnum } from 'hooks/use-theme';
 import katex from 'katex';
 import { useMemo } from 'react';
-import { Katex } from 'tiptap/core/extensions/katex';
-import { DragableWrapper } from 'tiptap/core/wrappers/dragable';
 
 import styles from './index.module.scss';
 
@@ -35,15 +34,16 @@ export const KatexWrapper = ({ node, editor }) => {
   );
 
   return (
-    <DragableWrapper
+    <NodeViewWrapper
-      editor={editor}
+      className={'drag-container render-wrapper'}
-      extensionName={Katex.name}
-      className={'render-wrapper'}
       style={{
         backgroundColor,
       }}
     >
+      <div className={'drag-handle'} contentEditable="false" draggable="true" data-drag-handle />
+      <div className={'drag-content'}>
         <div className={styles.wrap}>{content}</div>
-    </DragableWrapper>
+      </div>
+    </NodeViewWrapper>
   );
 };

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

@@ -1,4 +1,5 @@
 import { Button, Space, Spin, Typography } from '@douyinfe/semi-ui';
+import { NodeViewWrapper } from '@tiptap/react';
 import cls from 'classnames';
 import { IconMind, IconMindCenter, IconZoomIn, IconZoomOut } from 'components/icons';
 import { Resizeable } from 'components/resizeable';
@@ -10,7 +11,6 @@ import VisibilitySensor from 'react-visibility-sensor';
 import { load, renderMind } from 'thirtypart/kityminder';
 import { Mind } from 'tiptap/core/extensions/mind';
 import { MAX_ZOOM, MIN_ZOOM, ZOOM_STEP } from 'tiptap/core/menus/mind/constant';
-import { DragableWrapper } from 'tiptap/core/wrappers/dragable';
 import { clamp, getEditorContainerDOMSize } from 'tiptap/prose-utils';
 
 import styles from './index.module.scss';
@@ -108,11 +108,9 @@ export const MindWrapper = ({ editor, node, updateAttributes }) => {
   }, [width, height, setCenter]);
 
   return (
-    <DragableWrapper
+    <NodeViewWrapper className={cls('drag-container', styles.wrap, isActive && styles.isActive)}>
-      editor={editor}
+      <div className={'drag-handle'} contentEditable="false" draggable="true" data-drag-handle />
-      extensionName={Mind.name}
+      <div className={'drag-content'}>
-      className={cls(styles.wrap, isActive && styles.isActive)}
-    >
         <VisibilitySensor onChange={onViewportChange}>
           <Resizeable isEditable={isEditable} width={width} height={height} maxWidth={maxWidth} onChangeEnd={onResize}>
             <div
@@ -142,7 +140,13 @@ export const MindWrapper = ({ editor, node, updateAttributes }) => {
 
               <div className={styles.mindHandlerWrap}>
                 <Tooltip content="居中">
-                <Button size="small" theme="borderless" type="tertiary" icon={<IconMindCenter />} onClick={setCenter} />
+                  <Button
+                    size="small"
+                    theme="borderless"
+                    type="tertiary"
+                    icon={<IconMindCenter />}
+                    onClick={setCenter}
+                  />
                 </Tooltip>
                 <Tooltip content="缩小">
                   <Button
@@ -166,6 +170,7 @@ export const MindWrapper = ({ editor, node, updateAttributes }) => {
             </div>
           </Resizeable>
         </VisibilitySensor>
-    </DragableWrapper>
+      </div>
+    </NodeViewWrapper>
   );
 };

packages/client/src/tiptap/editor/collaboration/kit.ts

@@ -16,7 +16,6 @@ import { Countdown } from 'tiptap/core/extensions/countdown';
 import { Document } from 'tiptap/core/extensions/document';
 import { DocumentChildren } from 'tiptap/core/extensions/document-children';
 import { DocumentReference } from 'tiptap/core/extensions/document-reference';
-import { Dragable } from 'tiptap/core/extensions/dragable';
 import { Dropcursor } from 'tiptap/core/extensions/dropcursor';
 import { Emoji } from 'tiptap/core/extensions/emoji';
 import { EventEmitter } from 'tiptap/core/extensions/event-emitter';
@@ -99,7 +98,6 @@ export const CollaborationKit = [
   CodeBlock,
   Color,
   ColorHighlighter,
-  Dragable,
   Dropcursor,
   EventEmitter,
   Focus,