add placeholder extension

examples/Components/Routes/Placeholder/index.vue

@@ -0,0 +1,36 @@
+<template>
+	<div>
+		<editor class="editor" :extensions="extensions">
+			<div class="editor__content" slot="content" slot-scope="props"></div>
+		</editor>
+	</div>
+</template>
+
+<script>
+import { Editor } from 'tiptap'
+import { PlaceholderExtension } from 'tiptap-extensions'
+
+export default {
+	components: {
+		Editor,
+	},
+	data() {
+		return {
+			extensions: [
+				new PlaceholderExtension(),
+			],
+		}
+	},
+}
+</script>
+
+<style lang="scss">
+.editor p.is-empty:first-child::before {
+	content: 'Start typing…';
+	float: left;
+	color: #aaa;
+	pointer-events: none;
+	height: 0;
+	font-style: italic;
+}
+</style>

examples/Components/Subnavigation/index.vue

@@ -30,6 +30,9 @@
 		<router-link class="subnavigation__link" to="/embeds">
 			Embeds
 		</router-link>
+		<router-link class="subnavigation__link" to="/placeholder">
+			Placeholder
+		</router-link>
 		<router-link class="subnavigation__link" to="/export">
 			Export HTML or JSON
 		</router-link>

examples/main.js

@@ -13,6 +13,7 @@ import RouteMarkdownShortcuts from 'Components/Routes/MarkdownShortcuts'
 import RouteCodeHighlighting from 'Components/Routes/CodeHighlighting'
 import RouteReadOnly from 'Components/Routes/ReadOnly'
 import RouteEmbeds from 'Components/Routes/Embeds'
+import RoutePlaceholder from 'Components/Routes/Placeholder'
 import RouteExport from 'Components/Routes/Export'
 
 const __svg__ = { path: './assets/images/icons/*.svg', name: 'assets/images/[hash].sprite.svg' }
@@ -93,6 +94,13 @@ const routes = [
       githubUrl: 'https://github.com/heyscrumpy/tiptap/tree/master/examples/Components/Routes/Embeds',
     },
   },
+  {
+    path: '/placeholder',
+    component: RoutePlaceholder,
+    meta: {
+      githubUrl: 'https://github.com/heyscrumpy/tiptap/tree/master/examples/Components/Routes/Placeholder',
+    },
+  },
   {
     path: '/export',
     component: RouteExport,