tiptap: dragable

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

@@ -47,6 +47,7 @@ export const tildeInputRegex = /^~~~([a-z]+)?[\s\n]$/;
 
 export const BuiltInCodeBlock = Node.create<CodeBlockOptions>({
   name: 'codeBlock',
+  draggable: true,
 
   addOptions() {
     return {

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

@@ -18,6 +18,7 @@ export const Countdown = Node.create({
   group: 'block',
   selectable: true,
   atom: true,
+  draggable: true,
 
   addOptions() {
     return {

packages/client/src/tiptap/core/extensions/document-children.ts

@@ -15,6 +15,7 @@ export const DocumentChildren = Node.create({
   name: 'documentChildren',
   group: 'block',
   atom: true,
+  draggable: true,
 
   addOptions() {
     return {

packages/client/src/tiptap/core/extensions/document-reference.ts

@@ -21,6 +21,7 @@ export const DocumentReference = Node.create({
   name: 'documentReference',
   group: 'block',
   atom: true,
+  draggable: true,
 
   addAttributes() {
     return {

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

@@ -25,6 +25,7 @@ export const Flow = Node.create({
   group: 'block',
   selectable: true,
   atom: true,
+  draggable: true,
 
   addAttributes() {
     return {

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

@@ -27,6 +27,7 @@ export const Iframe = Node.create({
   group: 'block',
   selectable: true,
   atom: true,
+  draggable: true,
 
   addOptions() {
     return {

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

@@ -35,6 +35,7 @@ export const Mind = Node.create({
   group: 'block',
   selectable: true,
   atom: true,
+  draggable: true,
   inline: false,
 
   addAttributes() {

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

@@ -1 +1,5 @@
-export { Paragraph } from '@tiptap/extension-paragraph';
+import TitapParagraph from '@tiptap/extension-paragraph';
+
+export const Paragraph = TitapParagraph.extend({
+  draggable: true,
+});

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

@@ -14,7 +14,6 @@
     display: flex;
     min-width: 48px;
     margin: 0;
-    overflow-x: auto;
     line-height: 1.3;
     background-color: var(--semi-color-fill-0);
     counter-reset: line 0;
@@ -24,7 +23,6 @@
       max-height: 370px;
       padding: 0;
       margin: 8px;
-      overflow: auto;
       font-size: 0.875rem;
       line-height: 1.5rem;
       color: inherit;

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

@@ -1,12 +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 { DragableWrapper } from 'tiptap/core/wrappers/dragable';
 import { download, extractFileExtension, extractFilename, normalizeFileSize } from 'tiptap/prose-utils';
 
 import { getFileTypeIcon } from './file-icon';
@@ -154,5 +154,5 @@ export const AttachmentWrapper = ({ editor, node, updateAttributes }) => {
     }
   })();
 
-  return <NodeViewWrapper as="div">{content}</NodeViewWrapper>;
+  return <DragableWrapper editor={editor}>{content}</DragableWrapper>;
 };

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

@@ -1,9 +1,10 @@
-import { NodeViewContent, NodeViewWrapper } from '@tiptap/react';
+import { NodeViewContent } 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 { DragableWrapper } from 'tiptap/core/wrappers/dragable';
 
 import styles from './index.module.scss';
 
@@ -25,7 +26,7 @@ export const CalloutWrapper = ({ editor, node, updateAttributes }) => {
   );
 
   return (
-    <NodeViewWrapper id="js-callout-container" className={cls(styles.wrap)}>
+    <DragableWrapper editor={editor} id="js-callout-container" className={cls(styles.wrap)}>
       <div
         className={cls(styles.innerWrap, 'render-wrapper')}
         style={{
@@ -46,6 +47,6 @@ export const CalloutWrapper = ({ editor, node, updateAttributes }) => {
           }}
         />
       </div>
-    </NodeViewWrapper>
+    </DragableWrapper>
   );
 };

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

@@ -1,9 +1,10 @@
 import { IconCopy } from '@douyinfe/semi-icons';
 import { Button, Select, Tooltip } from '@douyinfe/semi-ui';
-import { NodeViewContent, NodeViewWrapper } from '@tiptap/react';
+import { NodeViewContent } from '@tiptap/react';
 import cls from 'classnames';
 import { copy } from 'helpers/copy';
 import React, { useRef } from 'react';
+import { DragableWrapper } from 'tiptap/core/wrappers/dragable';
 
 import styles from './index.module.scss';
 
@@ -13,7 +14,7 @@ export const CodeBlockWrapper = ({ editor, node: { attrs }, updateAttributes, ex
   const $container = useRef<HTMLPreElement>();
 
   return (
-    <NodeViewWrapper className={cls(styles.wrap, 'render-wrapper')}>
+    <DragableWrapper editor={editor} className={cls(styles.wrap, 'render-wrapper')}>
       <div className={styles.handleWrap}>
         <Select
           size="small"
@@ -43,6 +44,6 @@ export const CodeBlockWrapper = ({ editor, node: { attrs }, updateAttributes, ex
       <pre ref={$container}>
         <NodeViewContent as="code" />
       </pre>
-    </NodeViewWrapper>
+    </DragableWrapper>
   );
 };

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

@@ -1,7 +1,7 @@
 import { Space, Typography } from '@douyinfe/semi-ui';
-import { NodeViewWrapper } from '@tiptap/react';
 import cls from 'classnames';
 import Countdown from 'react-countdown';
+import { DragableWrapper } from 'tiptap/core/wrappers/dragable';
 
 import styles from './index.module.scss';
 
@@ -32,11 +32,11 @@ export const CountdownWrapper = ({ editor, node }) => {
   const { title, date } = node.attrs;
 
   return (
-    <NodeViewWrapper>
+    <DragableWrapper editor={editor}>
       <div className={cls(styles.wrap, 'render-wrapper')}>
         <Text>{title}</Text>
         <Countdown date={date} renderer={renderer}></Countdown>
       </div>
-    </NodeViewWrapper>
+    </DragableWrapper>
   );
 };

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

@@ -1,5 +1,4 @@
 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';
@@ -8,6 +7,7 @@ import { useChildrenDocument } from 'data/document';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
 import { useEffect } from 'react';
+import { DragableWrapper } from 'tiptap/core/wrappers/dragable';
 
 import styles from './index.module.scss';
 
@@ -35,7 +35,8 @@ export const DocumentChildrenWrapper = ({ editor, node, updateAttributes }) => {
   }, [node.attrs, wikiId, documentId, updateAttributes]);
 
   return (
-    <NodeViewWrapper
+    <DragableWrapper
+      editor={editor}
       as="div"
       className={cls('render-wrapper', styles.wrap, isEditable && styles.isEditable, 'documentChildren')}
     >
@@ -77,6 +78,6 @@ export const DocumentChildrenWrapper = ({ editor, node, updateAttributes }) => {
           <Text type="tertiary">当前页面无法使用子文档</Text>
         )}
       </div>
-    </NodeViewWrapper>
+    </DragableWrapper>
   );
 };

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

@@ -1,9 +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 { DragableWrapper } from 'tiptap/core/wrappers/dragable';
 
 import styles from './index.module.scss';
 
@@ -48,8 +48,8 @@ export const DocumentReferenceWrapper = ({ editor, node, updateAttributes }) =>
   }, [wikiId, documentId, isEditable, isShare, title]);
 
   return (
-    <NodeViewWrapper as="div" className={cls(styles.wrap, isEditable && 'render-wrapper')}>
+    <DragableWrapper editor={editor} as="div" className={cls(styles.wrap, isEditable && 'render-wrapper')}>
       {content}
-    </NodeViewWrapper>
+    </DragableWrapper>
   );
 };

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

@@ -0,0 +1,30 @@
+.draggableItem {
+  position: relative;
+  display: flex;
+
+  .dragHandle {
+    position: absolute;
+    top: 0.3rem;
+    left: -1.5rem;
+    width: 1rem;
+    height: 1rem;
+    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 {
+    &:hover {
+      .dragHandle {
+        opacity: 1;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,28 @@
+import { Editor } from '@tiptap/core';
+import { NodeViewWrapper } from '@tiptap/react';
+import cls from 'classnames';
+import React, { ElementType } from 'react';
+
+import styles from './index.module.scss';
+
+export const DragableWrapper: React.FC<{
+  editor: Editor;
+  as?: ElementType;
+  id?: string;
+  className?: string;
+  style?: React.CSSProperties;
+}> = ({ editor, as = 'div', id, className, style = {}, children }) => {
+  const isEditable = editor.isEditable;
+
+  return (
+    <NodeViewWrapper
+      as={as}
+      id={id}
+      className={cls(styles.draggableItem, isEditable && styles.isEditable, 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,5 +1,4 @@
 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';
@@ -8,6 +7,7 @@ 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,7 +95,7 @@ export const FlowWrapper = ({ editor, node, updateAttributes }) => {
   }, [toggleLoading, data]);
 
   return (
-    <NodeViewWrapper className={cls(styles.wrap, isActive && styles.isActive)}>
+    <DragableWrapper editor={editor} className={cls(styles.wrap, isActive && styles.isActive)}>
       <VisibilitySensor onChange={onViewportChange}>
         <Resizeable isEditable={isEditable} width={width} height={height} maxWidth={maxWidth} onChangeEnd={onResize}>
           <div
@@ -134,6 +134,6 @@ export const FlowWrapper = ({ editor, node, updateAttributes }) => {
           </div>
         </Resizeable>
       </VisibilitySensor>
-    </NodeViewWrapper>
+    </DragableWrapper>
   );
 };

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

@@ -1,8 +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 { DragableWrapper } from 'tiptap/core/wrappers/dragable';
 import { getEditorContainerDOMSize } from 'tiptap/prose-utils';
 
 import styles from './index.module.scss';
@@ -22,7 +22,7 @@ export const IframeWrapper = ({ editor, node, updateAttributes }) => {
   );
 
   return (
-    <NodeViewWrapper>
+    <DragableWrapper editor={editor}>
       <Resizeable width={width} maxWidth={maxWidth} height={height} isEditable={isEditable} onChangeEnd={onResize}>
         <div className={cls(styles.wrap, 'render-wrapper')}>
           {url ? (
@@ -36,6 +36,6 @@ export const IframeWrapper = ({ editor, node, updateAttributes }) => {
           )}
         </div>
       </Resizeable>
-    </NodeViewWrapper>
+    </DragableWrapper>
   );
 };

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

@@ -1,10 +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 { DragableWrapper } from 'tiptap/core/wrappers/dragable';
 import {
   extractFileExtension,
   extractFilename,
@@ -69,7 +69,7 @@ export const ImageWrapper = ({ editor, node, updateAttributes }) => {
   }, [src, hasTrigger, selectFile, updateAttributes]);
 
   return (
-    <NodeViewWrapper as="div" style={{ textAlign, fontSize: 0, maxWidth: '100%' }}>
+    <DragableWrapper editor={editor} style={{ textAlign, fontSize: 0, maxWidth: '100%' }}>
       <Resizeable
         className={'render-wrapper'}
         width={width || maxWidth}
@@ -93,6 +93,6 @@ export const ImageWrapper = ({ editor, node, updateAttributes }) => {
           <LazyLoadImage src={src} alt={alt} width={width} height={height} />
         )}
       </Resizeable>
-    </NodeViewWrapper>
+    </DragableWrapper>
   );
 };

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

@@ -1,5 +1,4 @@
 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';
@@ -11,6 +10,7 @@ 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,7 +108,7 @@ export const MindWrapper = ({ editor, node, updateAttributes }) => {
   }, [width, height, setCenter]);
 
   return (
-    <NodeViewWrapper className={cls(styles.wrap, isActive && styles.isActive)}>
+    <DragableWrapper editor={editor} className={cls(styles.wrap, isActive && styles.isActive)}>
       <VisibilitySensor onChange={onViewportChange}>
         <Resizeable isEditable={isEditable} width={width} height={height} maxWidth={maxWidth} onChangeEnd={onResize}>
           <div
@@ -162,6 +162,6 @@ export const MindWrapper = ({ editor, node, updateAttributes }) => {
           </div>
         </Resizeable>
       </VisibilitySensor>
-    </NodeViewWrapper>
+    </DragableWrapper>
   );
 };