tiptap: fix title placeholder, remove span

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

@@ -1,6 +1,7 @@
 import { mergeAttributes, Node } from '@tiptap/core';
 import { ReactNodeViewRenderer } from '@tiptap/react';
 import { Plugin, PluginKey, TextSelection } from 'prosemirror-state';
+import { Decoration, DecorationSet } from 'prosemirror-view';
 import { getDatasetAttribute, isInTitle } from 'tiptap/prose-utils';
 
 import { TitleWrapper } from '../wrappers/title';
@@ -60,6 +61,8 @@ export const Title = Node.create<TitleOptions>({
   },
 
   addProseMirrorPlugins() {
+    const { editor } = this;
+
     return [
       new Plugin({
         key: new PluginKey(this.name),
@@ -90,6 +93,26 @@ export const Title = Node.create<TitleOptions>({
           },
         },
       }),
+      new Plugin({
+        props: {
+          decorations: (state) => {
+            const { doc } = state;
+            const decorations = [];
+
+            doc.descendants((node, pos) => {
+              if (node.type.name !== this.name) return;
+
+              decorations.push(
+                Decoration.node(pos, pos + node.nodeSize, {
+                  class: editor.isEditable ? 'is-editable' : '',
+                })
+              );
+            });
+
+            return DecorationSet.create(doc, decorations);
+          },
+        },
+      }),
     ];
   },
 });

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

@@ -11,10 +11,17 @@
       position: absolute;
       bottom: 0;
       height: 0;
-      color: #aaa;
+      color: var(--semi-color-text-0);
       pointer-events: none;
       content: attr(data-placeholder);
-      transform: translateY(-1.7em);
+      transform: translateY(-4.2em);
+    }
+
+    &.is-editable {
+      &::before {
+        color: #aaa;
+        transform: translateY(-1.7em);
+      }
     }
   }
 }

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

@@ -1,6 +1,7 @@
 .wrap {
   position: relative;
   overflow: auto;
+  margin-top: 24px;
 
   .coverWrap {
     position: relative;
@@ -28,8 +29,10 @@
     }
   }
 
-  .emptyTitle {
+  .emptyToolbarWrap {
     position: absolute;
+    top: 0;
+    left: 0;
     height: 0;
     pointer-events: none;
   }

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

@@ -19,7 +19,6 @@ const images = [
 export const TitleWrapper = ({ editor, node }) => {
   const isEditable = editor.isEditable;
   const { cover } = node.attrs;
-  const hasTitleContent = node.content.size > 0;
 
   const setCover = useCallback(
     (cover) => {
@@ -63,7 +62,6 @@ export const TitleWrapper = ({ editor, node }) => {
           </ButtonGroup>
         </div>
       ) : null}
-      {!isEditable && !hasTitleContent && <span className={styles.emptyTitle}>未命名文档</span>}
       <NodeViewContent></NodeViewContent>
     </NodeViewWrapper>
   );

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

@@ -75,15 +75,16 @@ export const CollaborationKit = [
   Paragraph,
   Placeholder.configure({
     placeholder: ({ node, editor }) => {
+      if (node.type.name === 'title') {
+        return editor.isEditable ? '请输入标题' : '未命名文档';
+      }
+
       if (!editor.isEditable) return;
 
-      if (node.type.name === 'title') {
-        return '请输入标题';
-      }
       return '输入 / 唤起更多';
     },
     showOnlyCurrent: false,
-    showOnlyWhenEditable: true,
+    showOnlyWhenEditable: false,
   }),
   BackgroundColor,
   Blockquote,