tiptap: fix title placeholder, remove span

This commit is contained in:
fantasticit 2022-06-17 21:30:53 +08:00
parent 32f229e423
commit cb23944be6
5 changed files with 41 additions and 9 deletions

View File

@ -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);
},
},
}),
];
},
});

View File

@ -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(-4.2em);
}
&.is-editable {
&::before {
color: #aaa;
transform: translateY(-1.7em);
}
}
}
}

View File

@ -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;
}

View File

@ -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>
);

View File

@ -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,