add title example

examples/Components/Routes/Title/Doc.js

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

examples/Components/Routes/Title/Title.js

@@ -0,0 +1,19 @@
+import { Node } from 'tiptap'
+
+export default class Title extends Node {
+
+  get name() {
+    return 'title'
+  }
+
+  get schema() {
+    return {
+      content: 'inline*',
+      parseDOM: [{
+        tag: 'h1',
+      }],
+      toDOM: () => ['h1', 0],
+    }
+  }
+
+}

examples/Components/Routes/Title/index.vue

@@ -0,0 +1,50 @@
+<template>
+  <div class="editor">
+    <editor-content class="editor__content" :editor="editor" />
+  </div>
+</template>
+
+<script>
+import { Editor, EditorContent } from 'tiptap'
+import { Placeholder } from 'tiptap-extensions'
+import Doc from './Doc'
+import Title from './Title'
+
+export default {
+  components: {
+    EditorContent,
+  },
+  data() {
+    return {
+      editor: new Editor({
+        extensions: [
+          new Doc(),
+          new Title(),
+          new Placeholder({
+            emptyNodeClass: 'is-empty',
+            emptyNodeText: 'Write something …',
+          }),
+        ],
+        content: `
+          <h1>This is a fixed title.</h1>
+          <p>With ProseMirror you can force a document layout. Try to remove it. It's not possible.</p>
+        `,
+      }),
+    }
+  },
+  beforeDestroy() {
+    this.editor.destroy()
+  },
+}
+</script>
+
+<style lang="scss">
+.editor p.is-empty:first-child::before {
+  content: attr(data-empty-text);
+  float: left;
+  color: #aaa;
+  pointer-events: none;
+  height: 0;
+  font-style: italic;
+}
+</style>

examples/Components/Subnavigation/index.vue

@@ -51,6 +51,9 @@
     <router-link class="subnavigation__link" to="/collaboration">
       Collaboration
     </router-link>
+    <router-link class="subnavigation__link" to="/title">
+      Title
+    </router-link>
     <router-link class="subnavigation__link" to="/export">
       Export HTML or JSON
     </router-link>

examples/main.js

@@ -130,6 +130,13 @@ const routes = [
       githubUrl: 'https://github.com/scrumpy/tiptap/tree/master/examples/Components/Routes/Collaboration',
     },
   },
+  {
+    path: '/title',
+    component: () => import('Components/Routes/Title'),
+    meta: {
+      githubUrl: 'https://github.com/scrumpy/tiptap/tree/master/examples/Components/Routes/Title',
+    },
+  },
   {
     path: '/export',
     component: () => import('Components/Routes/Export'),