From 443045bbdfcf58f5179436ac90e839e88f4343b7 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:00:42 +0200
Subject: [PATCH] add title example

---
 examples/Components/Routes/Title/Doc.js     | 11 +++++
 examples/Components/Routes/Title/Title.js   | 19 ++++++++
 examples/Components/Routes/Title/index.vue  | 50 +++++++++++++++++++++
 examples/Components/Subnavigation/index.vue |  3 ++
 examples/main.js                            |  7 +++
 5 files changed, 90 insertions(+)
 create mode 100644 examples/Components/Routes/Title/Doc.js
 create mode 100644 examples/Components/Routes/Title/Title.js
 create mode 100644 examples/Components/Routes/Title/index.vue

diff --git a/examples/Components/Routes/Title/Doc.js b/examples/Components/Routes/Title/Doc.js
new file mode 100644
index 000000000..31366924f
--- /dev/null
+++ b/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+',
+    }
+  }
+
+}
diff --git a/examples/Components/Routes/Title/Title.js b/examples/Components/Routes/Title/Title.js
new file mode 100644
index 000000000..22d54ae4e
--- /dev/null
+++ b/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],
+    }
+  }
+
+}
diff --git a/examples/Components/Routes/Title/index.vue b/examples/Components/Routes/Title/index.vue
new file mode 100644
index 000000000..e274f72f9
--- /dev/null
+++ b/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>
diff --git a/examples/Components/Subnavigation/index.vue b/examples/Components/Subnavigation/index.vue
index 42485d847..cf93c1c05 100644
--- a/examples/Components/Subnavigation/index.vue
+++ b/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>
diff --git a/examples/main.js b/examples/main.js
index 41db77489..747c8372c 100644
--- a/examples/main.js
+++ b/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'),