do not show placeholder if non editable

examples/Components/Routes/Placeholder/index.vue

@@ -25,6 +25,7 @@ export default {
           new Placeholder({
             emptyClass: 'is-empty',
             emptyNodeText: 'Write something …',
+            showOnlyWhenEditable: true,
           }),
         ],
       }),

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
 

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,
             },