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/Experiments/Placeholder/index.vue

@@ -1,54 +0,0 @@
-<template>
-  <editor-content :editor="editor" />
-</template>
-
-<script>
-import { Editor, EditorContent } from '@tiptap/vue-2'
-import { defaultExtensions } from '@tiptap/starter-kit'
-import Placeholder from './extension/placeholder'
-
-export default {
-  components: {
-    EditorContent,
-  },
-
-  data() {
-    return {
-      editor: null,
-    }
-  },
-
-  mounted() {
-    this.editor = new Editor({
-      extensions: [
-        ...defaultExtensions(),
-        Placeholder,
-      ],
-    })
-  },
-
-  beforeDestroy() {
-    this.editor.destroy()
-  },
-}
-</script>
-
-<style lang="scss" scoped>
-::v-deep {
-  /* Basic editor styles */
-  .ProseMirror {
-    > * + * {
-      margin-top: 0.75em;
-    }
-  }
-
-  /* Placeholder */
-  .ProseMirror p.is-editor-empty:first-child::before {
-    content: attr(data-empty-text);
-    float: left;
-    color: #ced4da;
-    pointer-events: none;
-    height: 0;
-  }
-}
-</style>