tiptap: only use dynamic placeholder in edit

This commit is contained in:
fantasticit 2022-08-19 16:14:00 +08:00
parent cb811ab21f
commit 2f97380e63
1 changed files with 25 additions and 11 deletions

View File

@ -56,30 +56,44 @@ export const Placeholder = Extension.create<PlaceholderOptions>({
const start = pos; const start = pos;
const end = pos + node.nodeSize; const end = pos + node.nodeSize;
const key = `${start}-${end}`; let placeholder = '';
if (!this.editor.storage[this.name].has(key)) { if (this.editor.isEditable) {
this.editor.storage[this.name].set( const key = `${start}-${end}`;
key,
if (!this.editor.storage[this.name].has(key)) {
this.editor.storage[this.name].set(
key,
typeof this.options.placeholder === 'function'
? this.options.placeholder({
editor: this.editor,
node,
pos,
})
: this.options.placeholder
);
}
placeholder = this.editor.storage[this.name].get(key);
setTimeout(() => {
this.editor.storage[this.name].delete(key);
}, 500);
} else {
placeholder =
typeof this.options.placeholder === 'function' typeof this.options.placeholder === 'function'
? this.options.placeholder({ ? this.options.placeholder({
editor: this.editor, editor: this.editor,
node, node,
pos, pos,
}) })
: this.options.placeholder : this.options.placeholder;
);
} }
const decoration = Decoration.node(start, end, { const decoration = Decoration.node(start, end, {
'class': classes.join(' '), 'class': classes.join(' '),
'data-placeholder': this.editor.storage[this.name].get(key), 'data-placeholder': placeholder,
}); });
setTimeout(() => {
this.editor.storage[this.name].delete(key);
}, 500);
decorations.push(decoration); decorations.push(decoration);
} }