From 0f17abeee6df1a8b40c6c96413a158918ec45d34 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= <kontakt@philipp-kuehn.com>
Date: Fri, 21 Jun 2019 22:36:48 +0200
Subject: [PATCH] add dynamic empty text option for placeholder extension

---
 examples/Components/Routes/Title/index.vue    | 19 +++++++++++--------
 .../src/extensions/Placeholder.js             |  4 +++-
 2 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/examples/Components/Routes/Title/index.vue b/examples/Components/Routes/Title/index.vue
index ce0bcd4f..13d59c9d 100644
--- a/examples/Components/Routes/Title/index.vue
+++ b/examples/Components/Routes/Title/index.vue
@@ -17,18 +17,21 @@ export default {
   data() {
     return {
       editor: new Editor({
+        autoFocus: true,
         extensions: [
           new Doc(),
           new Title(),
           new Placeholder({
-            emptyNodeClass: 'is-empty',
-            emptyNodeText: 'Write something …',
+            showOnlyCurrent: false,
+            emptyNodeText: node => {
+              if (node.type.name === 'title') {
+                return 'Give me a name'
+              }
+
+              return 'Write something'
+            },
           }),
         ],
-        content: `
-          <h1>This is a fixed title.</h1>
-          <p>With ProseMirror you can force a document layout. Try to remove this title it – it's not possible.</p>
-        `,
       }),
     }
   },
@@ -39,8 +42,8 @@ export default {
 </script>
 
 <style lang="scss">
-.editor h1.is-empty::before,
-.editor p.is-empty::before {
+.editor *.is-empty:nth-child(1)::before,
+.editor *.is-empty:nth-child(2)::before {
   content: attr(data-empty-text);
   float: left;
   color: #aaa;
diff --git a/packages/tiptap-extensions/src/extensions/Placeholder.js b/packages/tiptap-extensions/src/extensions/Placeholder.js
index 575fbd06..73982fc5 100644
--- a/packages/tiptap-extensions/src/extensions/Placeholder.js
+++ b/packages/tiptap-extensions/src/extensions/Placeholder.js
@@ -44,7 +44,9 @@ export default class Placeholder extends Extension {
               if ((hasAnchor || !this.options.showOnlyCurrent) && isEmpty) {
                 const decoration = Decoration.node(pos, pos + node.nodeSize, {
                   class: this.options.emptyNodeClass,
-                  'data-empty-text': this.options.emptyNodeText,
+                  'data-empty-text': typeof this.options.emptyNodeText === 'function'
+                    ? this.options.emptyNodeText(node)
+                    : this.options.emptyNodeText,
                 })
                 decorations.push(decoration)
               }