add placeholder extension

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"
   }

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)
+					},
+				},
+			}),
+		]
+	}
+
+}

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'