feat: improve tiptap

packages/client/src/components/tiptap/components/attachment/index.tsx

@@ -149,5 +149,9 @@ export const AttachmentWrapper = ({ editor, node, updateAttributes }) => {
     }
   })();
 
-  return <NodeViewWrapper as="div">{content}</NodeViewWrapper>;
+  return (
+    <NodeViewWrapper as="div">
+      {content} <NodeViewContent />
+    </NodeViewWrapper>
+  );
 };

packages/client/src/components/tiptap/components/documentReference/index.module.scss

@@ -33,4 +33,16 @@
       margin-left: 8px;
     }
   }
+
+  .empty {
+    display: flex;
+    align-items: center;
+    padding: 8px;
+    border: 1px solid var(--semi-color-border);
+    margin-top: 12px;
+    border-radius: var(--border-radius);
+    text-decoration: none;
+    color: var(--semi-color-text-1);
+    cursor: not-allowed;
+  }
 }

packages/client/src/components/tiptap/components/documentReference/index.tsx

@@ -47,6 +47,7 @@ export const DocumentReferenceWrapper = ({ editor, node, updateAttributes }) =>
             )}
           />
         )}
+        {wikiId && documentId ? (
           <Link
             key={documentId}
             href={{
@@ -59,6 +60,11 @@ export const DocumentReferenceWrapper = ({ editor, node, updateAttributes }) =>
               <span>{title || '请选择文档'}</span>
             </a>
           </Link>
+        ) : (
+          <div className={styles.empty}>
+            <span>{'用户未选择文档'}</span>
+          </div>
+        )}
       </div>
       <NodeViewContent></NodeViewContent>
     </NodeViewWrapper>

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

@@ -1,4 +1,4 @@
-import { NodeViewWrapper } from '@tiptap/react';
+import { NodeViewWrapper, NodeViewContent } from '@tiptap/react';
 import { Resizeable } from 'components/resizeable';
 import { useEffect, useRef } from 'react';
 import { Typography, Spin } from '@douyinfe/semi-ui';
@@ -87,6 +87,7 @@ export const ImageWrapper = ({ editor, node, updateAttributes }) => {
   return (
     <NodeViewWrapper as="div" style={{ textAlign, fontSize: 0, maxWidth: '100%' }}>
       {content}
+      <NodeViewContent />
     </NodeViewWrapper>
   );
 };

packages/client/src/components/tiptap/extensions/attachment.ts

@@ -12,6 +12,8 @@ declare module '@tiptap/core' {
 
 export const Attachment = Node.create({
   name: 'attachment',
+  content: '',
+  marks: '',
   group: 'block',
   draggable: true,
   atom: true,

packages/client/src/components/tiptap/extensions/image.ts

@@ -16,7 +16,12 @@ export const Image = BuiltInImage.extend({
   addOptions() {
     return {
       ...this.parent?.(),
-      inline: true,
+      inline: false,
+      content: '',
+      marks: '',
+      group: 'block',
+      draggable: true,
+      atom: true,
     };
   },
   addAttributes() {