Merge branch 'feature/extension-bubble-menu'

docs/src/components/Demo/index.vue

@@ -24,7 +24,10 @@
           </div>
         </div>
         <div class="demo__meta">
-          <div class="demo__name">
+          <g-link class="demo__name" :to="`/demos/${name}`" v-if="isDevelopment">
+            Demo/{{ name }}
+          </g-link>
+          <div class="demo__name" v-else>
             Demo/{{ name }}
           </div>
           <a class="demo__link" :href="githubUrl" target="_blank">
@@ -67,8 +70,12 @@ export default {
       return this.files[this.currentIndex]
     },
 
+    isDevelopment() {
+      return process.env.NODE_ENV === 'development'
+    },
+
     githubUrl() {
-      if (process.env.NODE_ENV === 'development') {
+      if (this.isDevelopment) {
         return `vscode://file${this.cwd}/src/demos/${this.name}/${this.files[0].name}`
       }
 

docs/src/demos/Extensions/BubbleMenu/React/index.jsx

@@ -0,0 +1,43 @@
+import React from 'react'
+import { useEditor, EditorContent, BubbleMenu } from '@tiptap/react'
+import { defaultExtensions } from '@tiptap/starter-kit'
+import './styles.scss'
+
+export default () => {
+  const editor = useEditor({
+    extensions: [
+      ...defaultExtensions(),
+    ],
+    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.
+      </p>
+    `,
+  })
+
+  return (
+    <div style={{ position: 'relative' }}>
+      {editor && <BubbleMenu editor={editor}>
+        <button
+          onClick={() => editor.chain().focus().toggleBold().run()}
+          className={editor.isActive('bold') ? 'is-active' : ''}
+        >
+          bold
+        </button>
+        <button
+          onClick={() => editor.chain().focus().toggleItalic().run()}
+          className={editor.isActive('italic') ? 'is-active' : ''}
+        >
+          italic
+        </button>
+        <button
+          onClick={() => editor.chain().focus().toggleCode().run()}
+          className={editor.isActive('code') ? 'is-active' : ''}
+        >
+          code
+        </button>
+      </BubbleMenu>}
+      <EditorContent editor={editor} />
+    </div>
+  )
+}

docs/src/demos/Extensions/BubbleMenu/React/styles.scss

@@ -0,0 +1,5 @@
+.ProseMirror {
+  > * + * {
+    margin-top: 0.75em;
+  }
+}

docs/src/demos/Extensions/BubbleMenu/Vue/index.vue

@@ -0,0 +1,60 @@
+<template>
+  <div style="position: relative">
+    <bubble-menu :editor="editor" v-if="editor">
+      <button @click="editor.chain().focus().toggleBold().run()" :class="{ 'is-active': editor.isActive('bold') }">
+        bold
+      </button>
+      <button @click="editor.chain().focus().toggleItalic().run()" :class="{ 'is-active': editor.isActive('italic') }">
+        italic
+      </button>
+      <button @click="editor.chain().focus().toggleCode().run()" :class="{ 'is-active': editor.isActive('code') }">
+        code
+      </button>
+    </bubble-menu>
+    <editor-content :editor="editor" />
+  </div>
+</template>
+
+<script>
+import { Editor, EditorContent, BubbleMenu } from '@tiptap/vue-2'
+import { defaultExtensions } from '@tiptap/starter-kit'
+
+export default {
+  components: {
+    EditorContent,
+    BubbleMenu,
+  },
+
+  data() {
+    return {
+      editor: null,
+    }
+  },
+
+  mounted() {
+    this.editor = new Editor({
+      extensions: [
+        ...defaultExtensions(),
+      ],
+      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.
+        </p>
+      `,
+    })
+  },
+
+  beforeDestroy() {
+    this.editor.destroy()
+  },
+}
+</script>
+
+<style lang="scss">
+/* Basic editor styles */
+.ProseMirror {
+  > * + * {
+    margin-top: 0.75em;
+  }
+}
+</style>

docs/src/docPages/api/extensions/bubble-menu.md

@@ -0,0 +1,42 @@
+# Bubble Menu
+[![Version](https://img.shields.io/npm/v/@tiptap/extension-bubble-menu.svg?label=version)](https://www.npmjs.com/package/@tiptap/extension-bubble-menu)
+[![Downloads](https://img.shields.io/npm/dm/@tiptap/extension-bubble-menu.svg)](https://npmcharts.com/compare/@tiptap/extension-bubble-menu?minimal=true)
+
+This extension will make a contextual menu appear near a selection of text.
+
+## Installation
+```bash
+# with npm
+npm install @tiptap/extension-bubble-menu
+# with Yarn
+yarn add @tiptap/extension-bubble-menu
+```
+
+## Settings
+| Option       | Type          | Default   | Description |
+| ------------ | ------------- | --------- | ----------- |
+| element      | `HTMLElement` | `null`    |             |
+| keepInBounds | `Boolean`     | `true`    |             |
+
+## Source code
+[packages/extension-bubble-menu/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-bubble-menu/)
+
+## Vanilla JavaScript
+```js
+import { Editor } from '@tiptap/core'
+import BubbleMenu from '@tiptap/extension-bubble-menu'
+
+new Editor({
+  extensions: [
+    BubbleMenu.configure({
+      element: document.querySelector('.menu'),
+    }),
+  ],
+})
+```
+
+## Using a framework
+<demos :items="{
+  Vue: 'Extensions/BubbleMenu/Vue',
+  React: 'Extensions/BubbleMenu/React',
+}" />

docs/src/links.yaml

@@ -195,6 +195,8 @@
         # - title: Annotation
         #   link: /api/extensions/annotation
         #   type: draft
+        - title: BubbleMenu
+          link: /api/extensions/bubble-menu
         - title: CharacterCount
           link: /api/extensions/character-count
         - title: Collaboration