add placeholder extension

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

packages/extension-placeholder/README.md

@@ -0,0 +1,14 @@
+# @tiptap/extension-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?minimal=true)
+[![License](https://img.shields.io/npm/l/@tiptap/extension-placeholder.svg)](https://www.npmjs.com/package/@tiptap/extension-placeholder)
+[![Sponsor](https://img.shields.io/static/v1?label=Sponsor&message=%E2%9D%A4&logo=GitHub)](https://github.com/sponsors/ueberdosis)
+
+## Introduction
+tiptap is a headless wrapper around [ProseMirror](https://ProseMirror.net) – a toolkit for building rich text WYSIWYG editors, which is already in use at many well-known companies such as *New York Times*, *The Guardian* or *Atlassian*.
+
+## Offical Documentation
+Documentation can be found on the [tiptap website](https://tiptap.dev).
+
+## License
+tiptap is open-sourced software licensed under the [MIT license](https://github.com/ueberdosis/tiptap-next/blob/main/LICENSE.md).

packages/extension-placeholder/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "@tiptap/extension-placeholder",
+  "description": "placeholder extension for tiptap",
+  "version": "2.0.0-beta.0",
+  "homepage": "https://tiptap.dev",
+  "keywords": [
+    "tiptap",
+    "tiptap extension"
+  ],
+  "license": "MIT",
+  "funding": {
+    "type": "github",
+    "url": "https://github.com/sponsors/ueberdosis"
+  },
+  "main": "dist/tiptap-extension-placeholder.cjs.js",
+  "umd": "dist/tiptap-extension-placeholder.umd.js",
+  "module": "dist/tiptap-extension-placeholder.esm.js",
+  "unpkg": "dist/tiptap-extension-placeholder.bundle.umd.min.js",
+  "types": "dist/packages/extension-placeholder/src/index.d.ts",
+  "files": [
+    "src",
+    "dist"
+  ],
+  "peerDependencies": {
+    "@tiptap/core": "^2.0.0-beta.1"
+  },
+  "dependencies": {
+    "prosemirror-state": "^1.3.4",
+    "prosemirror-view": "^1.18.1"
+  }
+}

packages/extension-placeholder/src/index.ts

@@ -0,0 +1,5 @@
+import { Placeholder } from './placeholder'
+
+export * from './placeholder'
+
+export default Placeholder

packages/extension-placeholder/src/placeholder.ts

@@ -10,10 +10,10 @@ export interface PlaceholderOptions {
   showOnlyCurrent: boolean,
 }
 
-export default Extension.create({
+export const Placeholder = Extension.create<PlaceholderOptions>({
   name: 'placeholder',
 
-  defaultOptions: <PlaceholderOptions>{
+  defaultOptions: {
     emptyEditorClass: 'is-editor-empty',
     emptyNodeClass: 'is-empty',
     placeholder: 'Write something …',
@@ -47,7 +47,7 @@ export default Extension.create({
 
                 const decoration = Decoration.node(pos, pos + node.nodeSize, {
                   class: classes.join(' '),
-                  'data-empty-text': typeof this.options.placeholder === 'function'
+                  'data-placeholder': typeof this.options.placeholder === 'function'
                     ? this.options.placeholder(node)
                     : this.options.placeholder,
                 })