add dynamic empty text option for placeholder extension

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',
+            showOnlyCurrent: false,
-            emptyNodeText: 'Write something …',
+            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 *.is-empty:nth-child(1)::before,
-.editor p.is-empty::before {
+.editor *.is-empty:nth-child(2)::before {
   content: attr(data-empty-text);
   float: left;
   color: #aaa;

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