fix placeholder

This commit is contained in:
Philipp Kühn
2018-09-13 23:57:55 +02:00
parent 681417602f
commit 2aa7987c5e
2 changed files with 18 additions and 9 deletions

View File

@@ -8,7 +8,11 @@
<script> <script>
import { Editor } from 'tiptap' import { Editor } from 'tiptap'
import { PlaceholderExtension } from 'tiptap-extensions' import {
BulletListNode,
ListItemNode,
PlaceholderExtension,
} from 'tiptap-extensions'
export default { export default {
components: { components: {
@@ -17,6 +21,8 @@ export default {
data() { data() {
return { return {
extensions: [ extensions: [
new BulletListNode(),
new ListItemNode(),
new PlaceholderExtension({ new PlaceholderExtension({
emptyNodeClass: 'is-empty', emptyNodeClass: 'is-empty',
}), }),

View File

@@ -17,19 +17,22 @@ export default class PlaceholderExtension extends Extension {
return [ return [
new Plugin({ new Plugin({
props: { props: {
decorations: state => { decorations: ({ doc }) => {
const decorations = [] const decorations = []
const completelyEmpty = doc.textContent === '' && doc.childCount <= 1 && doc.content.size <= 2
state.doc.descendants((node, pos) => { doc.descendants((node, pos) => {
if (node.type.isBlock && node.childCount === 0) { if (!completelyEmpty) {
const decoration = Decoration.node(pos, pos + node.nodeSize, { return
class: this.options.emptyNodeClass,
})
decorations.push(decoration)
} }
const decoration = Decoration.node(pos, pos + node.nodeSize, {
class: this.options.emptyNodeClass,
})
decorations.push(decoration)
}) })
return DecorationSet.create(state.doc, decorations) return DecorationSet.create(doc, decorations)
}, },
}, },
}), }),