From 3f1fa8139224081bfe1786edd734058489d4a7f1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= <kontakt@philipp-kuehn.com>
Date: Thu, 1 Apr 2021 15:47:00 +0200
Subject: [PATCH] add doc page for floating menu

---
 .../Extensions/FloatingMenu/Vue/index.vue     |  2 +-
 .../docPages/api/extensions/floating-menu.md  | 41 +++++++++++++++++++
 docs/src/links.yaml                           |  2 +
 3 files changed, 44 insertions(+), 1 deletion(-)
 create mode 100644 docs/src/docPages/api/extensions/floating-menu.md

diff --git a/docs/src/demos/Extensions/FloatingMenu/Vue/index.vue b/docs/src/demos/Extensions/FloatingMenu/Vue/index.vue
index 4954ea36..8d249bf4 100644
--- a/docs/src/demos/Extensions/FloatingMenu/Vue/index.vue
+++ b/docs/src/demos/Extensions/FloatingMenu/Vue/index.vue
@@ -41,7 +41,7 @@ export default {
       ],
       content: `
         <p>
-          Hey, try to select some text here. There will popup a menu for selecting some inline styles. Remember: you have full control about content and styling of this menu.
+          This is an example of a medium-like editor. Enter a new line and some buttons will appear.
         </p>
       `,
     })
diff --git a/docs/src/docPages/api/extensions/floating-menu.md b/docs/src/docPages/api/extensions/floating-menu.md
new file mode 100644
index 00000000..ead688e0
--- /dev/null
+++ b/docs/src/docPages/api/extensions/floating-menu.md
@@ -0,0 +1,41 @@
+# Floating Menu
+[![Version](https://img.shields.io/npm/v/@tiptap/extension-floating-menu.svg?label=version)](https://www.npmjs.com/package/@tiptap/extension-floating-menu)
+[![Downloads](https://img.shields.io/npm/dm/@tiptap/extension-floating-menu.svg)](https://npmcharts.com/compare/@tiptap/extension-floating-menu?minimal=true)
+
+This extension will make a contextual menu appear near a selection of text.
+
+## Installation
+```bash
+# with npm
+npm install @tiptap/extension-floating-menu
+# with Yarn
+yarn add @tiptap/extension-floating-menu
+```
+
+## Settings
+| Option       | Type          | Default   | Description                   |
+| ------------ | ------------- | --------- | ----------------------------- |
+| element      | `HTMLElement` | `null`    | The DOM element of your menu. |
+
+## Source code
+[packages/extension-floating-menu/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-floating-menu/)
+
+## Using Vanilla JavaScript
+```js
+import { Editor } from '@tiptap/core'
+import FloatingMenu from '@tiptap/extension-floating-menu'
+
+new Editor({
+  extensions: [
+    FloatingMenu.configure({
+      element: document.querySelector('.menu'),
+    }),
+  ],
+})
+```
+
+## Using a framework
+<demos :items="{
+  Vue: 'Extensions/FloatingMenu/Vue',
+  React: 'Extensions/FloatingMenu/React',
+}" />
diff --git a/docs/src/links.yaml b/docs/src/links.yaml
index 1bc8ef06..11d266ee 100644
--- a/docs/src/links.yaml
+++ b/docs/src/links.yaml
@@ -207,6 +207,8 @@
           # type: pro
         - title: Dropcursor
           link: /api/extensions/dropcursor
+        - title: FloatingMenu
+          link: /api/extensions/floating-menu
         - title: Focus
           link: /api/extensions/focus
         - title: FontFamily