diff --git a/packages/client/src/tiptap/core/extensions/title.ts b/packages/client/src/tiptap/core/extensions/title.ts index 8603f5c9..1e47cf04 100644 --- a/packages/client/src/tiptap/core/extensions/title.ts +++ b/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({ }, addProseMirrorPlugins() { + const { editor } = this; + return [ new Plugin({ key: new PluginKey(this.name), @@ -90,6 +93,26 @@ export const Title = Node.create({ }, }, }), + 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); + }, + }, + }), ]; }, }); diff --git a/packages/client/src/tiptap/core/styles/title.scss b/packages/client/src/tiptap/core/styles/title.scss index 747a7483..b00b51ef 100644 --- a/packages/client/src/tiptap/core/styles/title.scss +++ b/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); + } } } } diff --git a/packages/client/src/tiptap/core/wrappers/title/index.module.scss b/packages/client/src/tiptap/core/wrappers/title/index.module.scss index f6f25f25..cdd8088a 100644 --- a/packages/client/src/tiptap/core/wrappers/title/index.module.scss +++ b/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; } diff --git a/packages/client/src/tiptap/core/wrappers/title/index.tsx b/packages/client/src/tiptap/core/wrappers/title/index.tsx index 41830b1c..b05fba2d 100644 --- a/packages/client/src/tiptap/core/wrappers/title/index.tsx +++ b/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 }) => { ) : null} - {!isEditable && !hasTitleContent && 未命名文档} ); diff --git a/packages/client/src/tiptap/editor/collaboration/kit.ts b/packages/client/src/tiptap/editor/collaboration/kit.ts index 9c0a1dad..50d23f17 100644 --- a/packages/client/src/tiptap/editor/collaboration/kit.ts +++ b/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,