tiptap editor > Implements Placeholer + Title

components/editor/components/Doc.js

@@ -0,0 +1,12 @@
+
+import { Doc } from 'tiptap'
+
+export default class CustomDoc extends Doc {
+
+  get schema() {
+    return {
+      content: 'title subtitle block+',
+    }
+  }
+
+}

components/editor/components/Subtitle.js

@@ -0,0 +1,21 @@
+import { Node } from 'tiptap'
+
+export default class Subtitle extends Node {
+
+  get name() {
+    return 'subtitle'
+  }
+
+  get schema() {
+    return {
+      content: 'inline*',
+      // define how the editor detects your node from pasted HTML
+      parseDOM: [{
+        tag: 'h2',
+      }],
+      // this is how this node will be rendered
+      toDOM: () => ['h2', { class: 'subtitle' }, 0],
+    }
+  }
+
+}

components/editor/components/Title.js

@@ -0,0 +1,21 @@
+import { Node } from 'tiptap'
+
+export default class Title extends Node {
+
+  get name() {
+    return 'title'
+  }
+
+  get schema() {
+    return {
+      content: 'inline*',
+      // define how the editor detects your node from pasted HTML
+      parseDOM: [{
+        tag: 'h1',
+      }],
+      // this is how this node will be rendered
+      toDOM: () => ['h1', { class: 'title' }, 0],
+    }
+  }
+
+}

components/editor/index.vue

@@ -26,10 +26,17 @@ import {
   OrderedList,
   BulletList,
   ListItem,
-  CodeBlockHighlight
+  CodeBlockHighlight,
+  Placeholder
 } from 'tiptap-extensions'
+
+import Title from '~/components/editor/components/Title'
+import Subtitle from '~/components/editor/components/Subtitle'
+import Doc from '~/components/editor/components/Doc'
+
 import javascript from 'highlight.js/lib/languages/javascript'
 import css from 'highlight.js/lib/languages/css'
+
 export default {
   components: {
     EditorContent,
@@ -45,6 +52,21 @@ export default {
   mounted(){
     this.editor = new Editor({
       extensions: [
+        new Doc(),
+        new Title(),
+        new Subtitle(),
+        new Placeholder({
+          showOnlyCurrent: false,
+          emptyNodeText: node => {
+            if (node.type.name === 'title') {
+              return 'Inspirational Title'
+            }
+            if (node.type.name === 'subtitle') {
+              return 'Some catchy subtitle'
+            }
+            return 'Write your story...'
+          }
+        }),
         new Heading({ levels: [1, 2, 3]}),
         new Bold(),
         new Code(),