add placeholder extension

docs/src/demos/Experiments/Placeholder/extension/placeholder.ts

@@ -1,67 +0,0 @@
-import { Extension, isNodeEmpty } from '@tiptap/core'
-import { Decoration, DecorationSet } from 'prosemirror-view'
-import { Plugin } from 'prosemirror-state'
-
-export interface PlaceholderOptions {
-  emptyEditorClass: string,
-  emptyNodeClass: string,
-  placeholder: string | Function,
-  showOnlyWhenEditable: boolean,
-  showOnlyCurrent: boolean,
-}
-
-export default Extension.create({
-  name: 'placeholder',
-
-  defaultOptions: <PlaceholderOptions>{
-    emptyEditorClass: 'is-editor-empty',
-    emptyNodeClass: 'is-empty',
-    placeholder: 'Write something …',
-    showOnlyWhenEditable: true,
-    showOnlyCurrent: true,
-  },
-
-  addProseMirrorPlugins() {
-    return [
-      new Plugin({
-        props: {
-          decorations: ({ doc, selection }) => {
-            const active = this.editor.isEditable || !this.options.showOnlyWhenEditable
-            const { anchor } = selection
-            const decorations: Decoration[] = []
-
-            if (!active) {
-              return
-            }
-
-            doc.descendants((node, pos) => {
-              const hasAnchor = anchor >= pos && anchor <= (pos + node.nodeSize)
-              const isEmpty = !node.isLeaf && isNodeEmpty(node)
-
-              if ((hasAnchor || !this.options.showOnlyCurrent) && isEmpty) {
-                const classes = [this.options.emptyNodeClass]
-
-                if (this.editor.isEmpty) {
-                  classes.push(this.options.emptyEditorClass)
-                }
-
-                const decoration = Decoration.node(pos, pos + node.nodeSize, {
-                  class: classes.join(' '),
-                  'data-empty-text': typeof this.options.placeholder === 'function'
-                    ? this.options.placeholder(node)
-                    : this.options.placeholder,
-                })
-
-                decorations.push(decoration)
-              }
-
-              return false
-            })
-
-            return DecorationSet.create(doc, decorations)
-          },
-        },
-      }),
-    ]
-  },
-})

docs/src/demos/Extensions/Placeholder/index.vue

@@ -5,7 +5,7 @@
 <script>
 import { Editor, EditorContent } from '@tiptap/vue-2'
 import { defaultExtensions } from '@tiptap/starter-kit'
-import Placeholder from './extension/placeholder'
+import Placeholder from '@tiptap/extension-placeholder'
 
 export default {
   components: {
@@ -44,7 +44,7 @@ export default {
 
   /* Placeholder */
   .ProseMirror p.is-editor-empty:first-child::before {
-    content: attr(data-empty-text);
+    content: attr(data-placeholder);
     float: left;
     color: #ced4da;
     pointer-events: none;