mirror of https://github.com/fantasticit/think.git
tiptap: fix title placeholder, remove span
This commit is contained in:
parent
32f229e423
commit
cb23944be6
|
@ -1,6 +1,7 @@
|
||||||
import { mergeAttributes, Node } from '@tiptap/core';
|
import { mergeAttributes, Node } from '@tiptap/core';
|
||||||
import { ReactNodeViewRenderer } from '@tiptap/react';
|
import { ReactNodeViewRenderer } from '@tiptap/react';
|
||||||
import { Plugin, PluginKey, TextSelection } from 'prosemirror-state';
|
import { Plugin, PluginKey, TextSelection } from 'prosemirror-state';
|
||||||
|
import { Decoration, DecorationSet } from 'prosemirror-view';
|
||||||
import { getDatasetAttribute, isInTitle } from 'tiptap/prose-utils';
|
import { getDatasetAttribute, isInTitle } from 'tiptap/prose-utils';
|
||||||
|
|
||||||
import { TitleWrapper } from '../wrappers/title';
|
import { TitleWrapper } from '../wrappers/title';
|
||||||
|
@ -60,6 +61,8 @@ export const Title = Node.create<TitleOptions>({
|
||||||
},
|
},
|
||||||
|
|
||||||
addProseMirrorPlugins() {
|
addProseMirrorPlugins() {
|
||||||
|
const { editor } = this;
|
||||||
|
|
||||||
return [
|
return [
|
||||||
new Plugin({
|
new Plugin({
|
||||||
key: new PluginKey(this.name),
|
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);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}),
|
||||||
];
|
];
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
|
@ -11,10 +11,17 @@
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
height: 0;
|
height: 0;
|
||||||
color: #aaa;
|
color: var(--semi-color-text-0);
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
content: attr(data-placeholder);
|
content: attr(data-placeholder);
|
||||||
transform: translateY(-1.7em);
|
transform: translateY(-4.2em);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.is-editable {
|
||||||
|
&::before {
|
||||||
|
color: #aaa;
|
||||||
|
transform: translateY(-1.7em);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,6 +1,7 @@
|
||||||
.wrap {
|
.wrap {
|
||||||
position: relative;
|
position: relative;
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
|
margin-top: 24px;
|
||||||
|
|
||||||
.coverWrap {
|
.coverWrap {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
@ -28,8 +29,10 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.emptyTitle {
|
.emptyToolbarWrap {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
height: 0;
|
height: 0;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
|
@ -19,7 +19,6 @@ const images = [
|
||||||
export const TitleWrapper = ({ editor, node }) => {
|
export const TitleWrapper = ({ editor, node }) => {
|
||||||
const isEditable = editor.isEditable;
|
const isEditable = editor.isEditable;
|
||||||
const { cover } = node.attrs;
|
const { cover } = node.attrs;
|
||||||
const hasTitleContent = node.content.size > 0;
|
|
||||||
|
|
||||||
const setCover = useCallback(
|
const setCover = useCallback(
|
||||||
(cover) => {
|
(cover) => {
|
||||||
|
@ -63,7 +62,6 @@ export const TitleWrapper = ({ editor, node }) => {
|
||||||
</ButtonGroup>
|
</ButtonGroup>
|
||||||
</div>
|
</div>
|
||||||
) : null}
|
) : null}
|
||||||
{!isEditable && !hasTitleContent && <span className={styles.emptyTitle}>未命名文档</span>}
|
|
||||||
<NodeViewContent></NodeViewContent>
|
<NodeViewContent></NodeViewContent>
|
||||||
</NodeViewWrapper>
|
</NodeViewWrapper>
|
||||||
);
|
);
|
||||||
|
|
|
@ -75,15 +75,16 @@ export const CollaborationKit = [
|
||||||
Paragraph,
|
Paragraph,
|
||||||
Placeholder.configure({
|
Placeholder.configure({
|
||||||
placeholder: ({ node, editor }) => {
|
placeholder: ({ node, editor }) => {
|
||||||
|
if (node.type.name === 'title') {
|
||||||
|
return editor.isEditable ? '请输入标题' : '未命名文档';
|
||||||
|
}
|
||||||
|
|
||||||
if (!editor.isEditable) return;
|
if (!editor.isEditable) return;
|
||||||
|
|
||||||
if (node.type.name === 'title') {
|
|
||||||
return '请输入标题';
|
|
||||||
}
|
|
||||||
return '输入 / 唤起更多';
|
return '输入 / 唤起更多';
|
||||||
},
|
},
|
||||||
showOnlyCurrent: false,
|
showOnlyCurrent: false,
|
||||||
showOnlyWhenEditable: true,
|
showOnlyWhenEditable: false,
|
||||||
}),
|
}),
|
||||||
BackgroundColor,
|
BackgroundColor,
|
||||||
Blockquote,
|
Blockquote,
|
||||||
|
|
Loading…
Reference in New Issue