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;

docs/src/docPages/api/extensions/placeholder.md

@@ -0,0 +1,29 @@
+# Placeholder
+[![Version](https://img.shields.io/npm/v/@tiptap/extension-placeholder.svg?label=version)](https://www.npmjs.com/package/@tiptap/extension-placeholder)
+[![Downloads](https://img.shields.io/npm/dm/@tiptap/extension-placeholder.svg)](https://npmcharts.com/compare/@tiptap/extension-placeholder?minimal=true)
+
+This extension provides placeholder support.
+
+## Installation
+```bash
+# with npm
+npm install @tiptap/extension-placeholder
+
+# with Yarn
+yarn add @tiptap/extension-placeholder
+```
+
+## Settings
+| Option               | Type                | Default               | Description                                                 |
+| -------------------- | ------------------- | --------------------- | ----------------------------------------------------------- |
+| emptyEditorClass     | `String`            | `'is-editor-empty'`   | The added CSS class if the editor is empty.                 |
+| emptyNodeClass       | `String`            | `'is-empty'`          | The added CSS class if the node is empty.                   |
+| placeholder          | `String | Function` | `'Write something …'` | The placeholder text added as `data-placeholder` attribute. |
+| showOnlyWhenEditable | `Boolean`           | `true`                | Show decorations only when editor is editable.              |
+| showOnlyCurrent      | `Boolean`           | `true`                | Show decorations only in currently selected node.           |
+
+## Source code
+[packages/extension-placeholder/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-placeholder/)
+
+## Usage
+<demo name="Extensions/Placeholder" />

docs/src/docPages/experiments.md

@@ -8,6 +8,3 @@ Congratulations! You’ve found our playground with a list of experiments. Be aw
 * [@tiptap/extension-iframe?](/experiments/embeds)
 * [@tiptap/extension-toggle-list?](/experiments/details)
 * [@tiptap/extension-collaboration-annotation](/experiments/collaboration-annotation)
-
-## Waiting for approval
-* [@tiptap/extension-placeholder](/experiments/placeholder)

docs/src/links.yaml

@@ -213,6 +213,8 @@
           link: /api/extensions/gapcursor
         - title: History
           link: /api/extensions/history
+        - title: Placeholder
+          link: /api/extensions/placeholder
         - title: TextAlign
           link: /api/extensions/text-align
         - title: Typography