diff --git a/examples/Components/Routes/Placeholder/index.vue b/examples/Components/Routes/Placeholder/index.vue index ff56a457..a11c24f4 100644 --- a/examples/Components/Routes/Placeholder/index.vue +++ b/examples/Components/Routes/Placeholder/index.vue @@ -25,6 +25,7 @@ export default { new Placeholder({ emptyClass: 'is-empty', emptyNodeText: 'Write something …', + showOnlyWhenEditable: true, }), ], }), diff --git a/packages/tiptap-extensions/src/extensions/Placeholder.js b/packages/tiptap-extensions/src/extensions/Placeholder.js index fb60b929..cfd605f5 100644 --- a/packages/tiptap-extensions/src/extensions/Placeholder.js +++ b/packages/tiptap-extensions/src/extensions/Placeholder.js @@ -11,6 +11,7 @@ export default class Placeholder extends Extension { return { emptyNodeClass: 'is-empty', emptyNodeText: 'Write something...', + showOnlyWhenEditable: true, } } @@ -18,7 +19,15 @@ export default class Placeholder extends Extension { return [ new Plugin({ props: { - decorations: ({ doc }) => { + decorations: ({ doc, plugins }) => { + const editablePlugin = plugins.find(plugin => plugin.key.startsWith('editable$')) + const editable = editablePlugin.props.editable() + const active = editable || !this.options.showOnlyWhenEditable + + if (!active) { + return false + } + const decorations = [] const completelyEmpty = doc.textContent === '' && doc.childCount <= 1 && doc.content.size <= 2 diff --git a/packages/tiptap/src/Editor.js b/packages/tiptap/src/Editor.js index 984fa110..b4315658 100644 --- a/packages/tiptap/src/Editor.js +++ b/packages/tiptap/src/Editor.js @@ -1,4 +1,4 @@ -import { EditorState, Plugin } from 'prosemirror-state' +import { EditorState, Plugin, PluginKey } from 'prosemirror-state' import { EditorView } from 'prosemirror-view' import { Schema, DOMParser, DOMSerializer } from 'prosemirror-model' import { dropCursor } from 'prosemirror-dropcursor' @@ -162,8 +162,13 @@ export default class Editor { dropCursor(this.options.dropCursor), gapCursor(), new Plugin({ + key: new PluginKey('editable'), props: { editable: () => this.options.editable, + }, + }), + new Plugin({ + props: { attributes: { tabindex: 0, },