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 { 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);
|
||||
},
|
||||
},
|
||||
}),
|
||||
];
|
||||
},
|
||||
});
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
|
|
|
@ -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,
|
||||
|
|
Loading…
Reference in New Issue