mirror/tiptap
1
0
Fork 0
mirror of https://github.com/ueberdosis/tiptap.git synced 2025-01-19 06:43:02 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

improve placeholder extension

Browse Source
This commit is contained in:
Philipp Kühn 2019-06-21 22:26:12 +02:00
parent ce287ff22f
commit b64eca7ab5
1 changed files with 15 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
packages/tiptap-extensions/src/extensions/Placeholder.js
View File

@ -10,8 +10,9 @@ export default class Placeholder extends Extension {
get defaultOptions() { get defaultOptions() {
return { return {
emptyNodeClass: 'is-empty', emptyNodeClass: 'is-empty',
emptyNodeText: 'Write something...', emptyNodeText: 'Write something …',
showOnlyWhenEditable: true, showOnlyWhenEditable: true,
showOnlyCurrent: true,
} }
} }
@ -25,28 +26,30 @@ export default class Placeholder extends Extension {
return [ return [
new Plugin({ new Plugin({
props: { props: {
decorations: ({ doc, plugins }) => { decorations: ({ doc, plugins, selection }) => {
const editablePlugin = plugins.find(plugin => plugin.key.startsWith('editable$')) const editablePlugin = plugins.find(plugin => plugin.key.startsWith('editable$'))
const editable = editablePlugin.props.editable() const editable = editablePlugin.props.editable()
const active = editable || !this.options.showOnlyWhenEditable const active = editable || !this.options.showOnlyWhenEditable
const { anchor } = selection
const decorations = []
if (!active) { if (!active) {
return false return false
} }
const decorations = []
const completelyEmpty = doc.textContent === '' && doc.childCount <= 1 && doc.content.size <= 2
doc.descendants((node, pos) => { doc.descendants((node, pos) => {
if (!completelyEmpty) { const hasAnchor = anchor >= pos && anchor <= (pos + node.nodeSize)
return const isEmpty = node.content.size === 0
if ((hasAnchor || !this.options.showOnlyCurrent) && isEmpty) {
const decoration = Decoration.node(pos, pos + node.nodeSize, {
class: this.options.emptyNodeClass,
'data-empty-text': this.options.emptyNodeText,
})
decorations.push(decoration)
} }
const decoration = Decoration.node(pos, pos + node.nodeSize, { return false
class: this.options.emptyNodeClass,
'data-empty-text': this.options.emptyNodeText,
})
decorations.push(decoration)
}) })
return DecorationSet.create(doc, decorations) return DecorationSet.create(doc, decorations)