From db61d67156d3db0c16325ad5ed4130f61cb53731 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= <kontakt@philipp-kuehn.com>
Date: Thu, 6 Sep 2018 22:58:54 +0200
Subject: [PATCH] add placeholder extension

---
 .../Components/Routes/Placeholder/index.vue   | 36 +++++++++++++++++
 examples/Components/Subnavigation/index.vue   |  3 ++
 examples/main.js                              |  8 ++++
 packages/tiptap-extensions/package.json       |  1 +
 .../src/extensions/Placeholder.js             | 39 +++++++++++++++++++
 packages/tiptap-extensions/src/index.js       |  1 +
 yarn.lock                                     |  2 +-
 7 files changed, 89 insertions(+), 1 deletion(-)
 create mode 100644 examples/Components/Routes/Placeholder/index.vue
 create mode 100644 packages/tiptap-extensions/src/extensions/Placeholder.js

diff --git a/examples/Components/Routes/Placeholder/index.vue b/examples/Components/Routes/Placeholder/index.vue
new file mode 100644
index 00000000..217e68b5
--- /dev/null
+++ b/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>
diff --git a/examples/Components/Subnavigation/index.vue b/examples/Components/Subnavigation/index.vue
index fb743d9b..1297a4de 100644
--- a/examples/Components/Subnavigation/index.vue
+++ b/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>
diff --git a/examples/main.js b/examples/main.js
index d25aaf9b..0ac47f0d 100644
--- a/examples/main.js
+++ b/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,
diff --git a/packages/tiptap-extensions/package.json b/packages/tiptap-extensions/package.json
index 95d5120e..5ac6a811 100644
--- a/packages/tiptap-extensions/package.json
+++ b/packages/tiptap-extensions/package.json
@@ -22,6 +22,7 @@
   "dependencies": {
     "lowlight": "^1.10.0",
     "prosemirror-history": "^1.0.2",
+    "prosemirror-view": "^1.5.1",
     "tiptap": "^0.10.0",
     "tiptap-commands": "^0.3.0"
   }
diff --git a/packages/tiptap-extensions/src/extensions/Placeholder.js b/packages/tiptap-extensions/src/extensions/Placeholder.js
new file mode 100644
index 00000000..a0a659ff
--- /dev/null
+++ b/packages/tiptap-extensions/src/extensions/Placeholder.js
@@ -0,0 +1,39 @@
+import { Extension, Plugin } from 'tiptap'
+import { Decoration, DecorationSet } from 'prosemirror-view'
+
+export default class PlaceholderExtension extends Extension {
+
+	get name() {
+		return 'placeholder'
+	}
+
+	get defaultOptions() {
+		return {
+			emptyNodeClass: 'is-empty',
+		}
+	}
+
+	get plugins() {
+		return [
+			new Plugin({
+				props: {
+					decorations: state => {
+						const decorations = []
+
+						state.doc.descendants((node, pos) => {
+							if (node.type.isBlock && node.childCount === 0) {
+								const decoration = Decoration.node(pos, pos + node.nodeSize, {
+									class: this.options.emptyNodeClass,
+								})
+								decorations.push(decoration)
+							}
+						})
+
+						return DecorationSet.create(state.doc, decorations)
+					},
+				},
+			}),
+		]
+	}
+
+}
diff --git a/packages/tiptap-extensions/src/index.js b/packages/tiptap-extensions/src/index.js
index 3aa41036..d40b75ed 100644
--- a/packages/tiptap-extensions/src/index.js
+++ b/packages/tiptap-extensions/src/index.js
@@ -17,3 +17,4 @@ export { default as LinkMark } from './marks/Link'
 export { default as StrikeMark } from './marks/Strike'
 
 export { default as HistoryExtension } from './extensions/History'
+export { default as PlaceholderExtension } from './extensions/Placeholder'
diff --git a/yarn.lock b/yarn.lock
index ea82c0a8..3485070e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7791,7 +7791,7 @@ prosemirror-utils@^0.6.5:
   version "0.6.5"
   resolved "https://registry.yarnpkg.com/prosemirror-utils/-/prosemirror-utils-0.6.5.tgz#df18e39178d510917838a7337a8b64561324a70b"
 
-prosemirror-view@^1.0.0, prosemirror-view@^1.4.3:
+prosemirror-view@^1.0.0, prosemirror-view@^1.4.3, prosemirror-view@^1.5.1:
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/prosemirror-view/-/prosemirror-view-1.5.1.tgz#545176a65124a89c9d16571797a9ef54853628c4"
   dependencies: