From 8fcfaef4f1e3afee4f3792b99b72af6eb62b569a Mon Sep 17 00:00:00 2001
From: Hans Pagel <hans.pagel@ueber.io>
Date: Tue, 30 Mar 2021 20:45:48 +0200
Subject: [PATCH] docs: update content

---
 .../demos/Extensions/Placeholder/index.vue    | 14 ++--
 docs/src/demos/Nodes/Emoji/index.spec.js      | 58 ++++++++++++++
 docs/src/demos/Nodes/Emoji/index.vue          | 75 +++++++++++++++++++
 docs/src/docPages/api/extensions.md           |  1 +
 .../docPages/api/extensions/placeholder.md    |  2 +-
 docs/src/docPages/api/nodes/emoji.md          | 14 +++-
 docs/src/docPages/experiments/placeholder.md  |  5 --
 docs/src/links.yaml                           |  1 +
 8 files changed, 156 insertions(+), 14 deletions(-)
 create mode 100644 docs/src/demos/Nodes/Emoji/index.spec.js
 create mode 100644 docs/src/demos/Nodes/Emoji/index.vue
 delete mode 100644 docs/src/docPages/experiments/placeholder.md

diff --git a/docs/src/demos/Extensions/Placeholder/index.vue b/docs/src/demos/Extensions/Placeholder/index.vue
index 544f2dcb..a2828425 100644
--- a/docs/src/demos/Extensions/Placeholder/index.vue
+++ b/docs/src/demos/Extensions/Placeholder/index.vue
@@ -52,12 +52,12 @@ export default {
   }
 
   /* Placeholder (on every new line) */
-  // .ProseMirror p.is-empty::before {
-  //   content: attr(data-placeholder);
-  //   float: left;
-  //   color: #ced4da;
-  //   pointer-events: none;
-  //   height: 0;
-  // }
+  /*.ProseMirror p.is-empty::before {
+    content: attr(data-placeholder);
+    float: left;
+    color: #ced4da;
+    pointer-events: none;
+    height: 0;
+  }*/
 }
 </style>
diff --git a/docs/src/demos/Nodes/Emoji/index.spec.js b/docs/src/demos/Nodes/Emoji/index.spec.js
new file mode 100644
index 00000000..3286da04
--- /dev/null
+++ b/docs/src/demos/Nodes/Emoji/index.spec.js
@@ -0,0 +1,58 @@
+context('/demos/Nodes/Paragraph', () => {
+  before(() => {
+    cy.visit('/demos/Nodes/Paragraph')
+  })
+
+  beforeEach(() => {
+    cy.get('.ProseMirror').then(([{ editor }]) => {
+      editor.commands.clearContent()
+    })
+  })
+
+  it('should parse paragraphs correctly', () => {
+    cy.get('.ProseMirror').then(([{ editor }]) => {
+      editor.commands.setContent('<p>Example Text</p>')
+      expect(editor.getHTML()).to.eq('<p>Example Text</p>')
+
+      editor.commands.setContent('<p><x-unknown>Example Text</x-unknown></p>')
+      expect(editor.getHTML()).to.eq('<p>Example Text</p>')
+
+      editor.commands.setContent('<p style="display: block;">Example Text</p>')
+      expect(editor.getHTML()).to.eq('<p>Example Text</p>')
+    })
+  })
+
+  it('text should be wrapped in a paragraph by default', () => {
+    cy.get('.ProseMirror')
+      .type('Example Text')
+      .find('p')
+      .should('contain', 'Example Text')
+  })
+
+  it('enter should make a new paragraph', () => {
+    cy.get('.ProseMirror')
+      .type('First Paragraph{enter}Second Paragraph')
+      .find('p')
+      .should('have.length', 2)
+
+    cy.get('.ProseMirror')
+      .find('p:first')
+      .should('contain', 'First Paragraph')
+
+    cy.get('.ProseMirror')
+      .find('p:nth-child(2)')
+      .should('contain', 'Second Paragraph')
+  })
+
+  it('backspace should remove the second paragraph', () => {
+    cy.get('.ProseMirror')
+      .type('{enter}')
+      .find('p')
+      .should('have.length', 2)
+
+    cy.get('.ProseMirror')
+      .type('{backspace}')
+      .find('p')
+      .should('have.length', 1)
+  })
+})
diff --git a/docs/src/demos/Nodes/Emoji/index.vue b/docs/src/demos/Nodes/Emoji/index.vue
new file mode 100644
index 00000000..eb4ccbe4
--- /dev/null
+++ b/docs/src/demos/Nodes/Emoji/index.vue
@@ -0,0 +1,75 @@
+<template>
+  <div v-if="editor">
+    <button @click="editor.chain().focus(). insertText('✨').run()">
+      ✨
+    </button>
+    <button @click="editor.chain().focus(). insertText('😅').run()">
+      😅
+    </button>
+    <button @click="editor.chain().focus(). insertText('🎉').run()">
+      🎉
+    </button>
+    <button @click="editor.chain().focus(). insertText('💖').run()">
+      💖
+    </button>
+    <button @click="editor.chain().focus(). insertText('👀').run()">
+      👀
+    </button>
+    <button @click="editor.chain().focus(). insertText('👍️').run()">
+      👍️
+    </button>
+    <editor-content :editor="editor" />
+  </div>
+</template>
+
+<script>
+import { Editor, EditorContent } from '@tiptap/vue-2'
+import Document from '@tiptap/extension-document'
+import Paragraph from '@tiptap/extension-paragraph'
+import Text from '@tiptap/extension-text'
+
+export default {
+  components: {
+    EditorContent,
+  },
+
+  data() {
+    return {
+      editor: null,
+    }
+  },
+
+  mounted() {
+    this.editor = new Editor({
+      extensions: [
+        Document,
+        Paragraph,
+        Text,
+      ],
+    })
+  },
+
+  beforeDestroy() {
+    this.editor.destroy()
+  },
+}
+</script>
+
+<style lang="scss">
+/* Basic editor styles */
+.ProseMirror {
+  > * + * {
+    margin-top: 0.75em;
+  }
+
+  font-size: 3rem;
+}
+
+button {
+  margin: 0.125rem;
+  width: 2rem;
+  height: 2rem;
+  text-align: center;
+  line-height: 2rem;
+}
+</style>
diff --git a/docs/src/docPages/api/extensions.md b/docs/src/docPages/api/extensions.md
index 61cf3a84..f55b8f9b 100644
--- a/docs/src/docPages/api/extensions.md
+++ b/docs/src/docPages/api/extensions.md
@@ -18,6 +18,7 @@ There are also some extensions with more capabilities. We call them [nodes](/api
 | [FontFamily](/api/extensions/font-family)                   | –                 | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-font-family/)          |
 | [Gapcursor](/api/extensions/gapcursor)                      | Yes               | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-gapcursor/)            |
 | [History](/api/extensions/history)                          | Yes               | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-history/)              |
+| [Placeholder](/api/extensions/placeholder)                  | –                 | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-placeholder/)          |
 | [TextAlign](/api/extensions/text-align)                     | –                 | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-text-align/)           |
 | [Typography](/api/extensions/typography)                    | –                 | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-typography/)           |
 
diff --git a/docs/src/docPages/api/extensions/placeholder.md b/docs/src/docPages/api/extensions/placeholder.md
index 078df7af..346124dc 100644
--- a/docs/src/docPages/api/extensions/placeholder.md
+++ b/docs/src/docPages/api/extensions/placeholder.md
@@ -2,7 +2,7 @@
 [![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.
+This extension provides placeholder support. Give your users an idea what they should write with a tiny hint. There is a handful of things to customize, if you feel like it.
 
 ## Installation
 ```bash
diff --git a/docs/src/docPages/api/nodes/emoji.md b/docs/src/docPages/api/nodes/emoji.md
index 0d085130..15103a97 100644
--- a/docs/src/docPages/api/nodes/emoji.md
+++ b/docs/src/docPages/api/nodes/emoji.md
@@ -1,7 +1,19 @@
 # Emoji
 
+## Support for emojis
+There is no extension or example yet, but it’s definitely on our list to build a dedicated extension to add emoji support.
+
+If you want to give it a shot yourself, you could start altering the [`Mention`](/api/nodes/mention) node. This uses the [`Suggestion`](/utilities/suggestion) utility, which should help with an autocomplete and such things.
+
 :::pro Fund the development ♥
 We need your support to maintain, update, support and develop tiptap 2. If you’re waiting for this extension, [become a sponsor and fund open-source](/sponsor).
 :::
 
-TODO
+## Bring your own emoji picker
+You can use any emoji picker, or build your own. Just use [commands](/api/commands) to insert the picked emojis.
+
+```js
+this.editor.chain().focus().insertText('✨').run()
+```
+
+<demo name="Nodes/Emoji" />
diff --git a/docs/src/docPages/experiments/placeholder.md b/docs/src/docPages/experiments/placeholder.md
deleted file mode 100644
index 1a802fe4..00000000
--- a/docs/src/docPages/experiments/placeholder.md
+++ /dev/null
@@ -1,5 +0,0 @@
-# Placeholder
-
-⚠️ Experiment
-
-<demo name="Experiments/Placeholder" />
diff --git a/docs/src/links.yaml b/docs/src/links.yaml
index 0afecb59..4e99ffb7 100644
--- a/docs/src/links.yaml
+++ b/docs/src/links.yaml
@@ -215,6 +215,7 @@
           link: /api/extensions/history
         - title: Placeholder
           link: /api/extensions/placeholder
+          type: new
         - title: TextAlign
           link: /api/extensions/text-align
         - title: Typography