add doc page for bubble menu

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

@@ -1,24 +1,28 @@
 <template>
   <div style="position: relative">
-    <div ref="menu">
-      <div v-if="editor">
-        <button @click="editor.chain().focus().toggleBold().run()" :class="{ 'is-active': editor.isActive('bold') }">
-          bold
-        </button>
-      </div>
-    </div>
+    <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 } from '@tiptap/vue-2'
+import { Editor, EditorContent, BubbleMenu } from '@tiptap/vue-2'
 import { defaultExtensions } from '@tiptap/starter-kit'
-import BubbleMenu from '@tiptap/extension-bubble-menu'
 
 export default {
   components: {
     EditorContent,
+    BubbleMenu,
   },
 
   data() {
@@ -31,19 +35,10 @@ export default {
     this.editor = new Editor({
       extensions: [
         ...defaultExtensions(),
-        BubbleMenu.configure({
-          element: this.$refs.menu,
-        }),
       ],
       content: `
         <p>
-          paragraph
-        </p>
-        <p>
-          paragraph
-        </p>
-        <p>
-          paragraph
+          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>
       `,
     })
@@ -56,30 +51,10 @@ export default {
 </script>
 
 <style lang="scss">
-.has-focus {
-  border-radius: 3px;
-  box-shadow: 0 0 0 3px #68CEF8;
-}
-
 /* Basic editor styles */
 .ProseMirror {
   > * + * {
     margin-top: 0.75em;
   }
-
-  ul,
-  ol {
-    padding: 0 1rem;
-  }
-
-  blockquote {
-    padding-left: 1rem;
-    border-left: 2px solid rgba(#0D0D0D, 0.1);
-  }
-
-  code {
-    background-color: rgba(#616161, 0.1);
-    color: #616161;
-  }
 }
 </style>

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

@@ -0,0 +1,39 @@
+# 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'),
+    }),
+  ],
+})
+```
+
+## Vue
+<demo name="Extensions/BubbleMenu" />

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

packages/core/src/Editor.ts

@@ -1,4 +1,6 @@
-import { EditorState, Plugin, Transaction } from 'prosemirror-state'
+import {
+  EditorState, Plugin, PluginKey, Transaction,
+} from 'prosemirror-state'
 import { EditorView } from 'prosemirror-view'
 import { Schema, DOMParser, Node } from 'prosemirror-model'
 import elementFromString from './utilities/elementFromString'
@@ -172,10 +174,19 @@ export class Editor extends EventEmitter {
    *
    * @param name The plugins name
    */
-  public unregisterPlugin(name: string): void {
+  public unregisterPlugin(nameOrPluginKey: string | PluginKey): void {
+    if (this.isDestroyed) {
+      return
+    }
+
+    const name = typeof nameOrPluginKey === 'string'
+      ? `${nameOrPluginKey}$`
+      // @ts-ignore
+      : nameOrPluginKey.key
+
     const state = this.state.reconfigure({
       // @ts-ignore
-      plugins: this.state.plugins.filter(plugin => !plugin.key.startsWith(`${name}$`)),
+      plugins: this.state.plugins.filter(plugin => !plugin.key.startsWith(name)),
     })
 
     this.view.updateState(state)

packages/extension-bubble-menu/src/bubble-menu-plugin.ts

@@ -3,13 +3,13 @@ import { EditorState, Plugin, PluginKey } from 'prosemirror-state'
 import { EditorView } from 'prosemirror-view'
 import { coordsAtPos } from './helpers'
 
-export interface BubbleMenuPluginOptions {
+export interface BubbleMenuPluginProps {
   editor: Editor,
   element: HTMLElement,
   keepInBounds: boolean,
 }
 
-export type BubbleMenuViewOptions = BubbleMenuPluginOptions & {
+export type BubbleMenuViewOptions = BubbleMenuPluginProps & {
   view: EditorView,
 }
 
@@ -137,7 +137,7 @@ export class BubbleMenuView {
 
 export const BubbleMenuPluginKey = new PluginKey('menuBubble')
 
-export const BubbleMenuPlugin = (options: BubbleMenuPluginOptions) => {
+export const BubbleMenuPlugin = (options: BubbleMenuPluginProps) => {
   return new Plugin({
     key: BubbleMenuPluginKey,
     view: view => new BubbleMenuView({ view, ...options }),

packages/extension-bubble-menu/src/bubble-menu.ts

@@ -1,7 +1,7 @@
 import { Extension } from '@tiptap/core'
-import { BubbleMenuPlugin, BubbleMenuPluginOptions } from './bubble-menu-plugin'
+import { BubbleMenuPlugin, BubbleMenuPluginProps } from './bubble-menu-plugin'
 
-export type BubbleMenuOptions = Omit<BubbleMenuPluginOptions, 'editor'>
+export type BubbleMenuOptions = Omit<BubbleMenuPluginProps, 'editor'>
 
 export const BubbleMenu = Extension.create<BubbleMenuOptions>({
   name: 'bubbleMenu',

packages/extension-bubble-menu/src/index.ts

@@ -1,5 +1,6 @@
 import { BubbleMenu } from './bubble-menu'
 
 export * from './bubble-menu'
+export * from './bubble-menu-plugin'
 
 export default BubbleMenu

packages/vue-2/package.json

@@ -26,6 +26,7 @@
     "vue": "^2.6.12"
   },
   "dependencies": {
+    "@tiptap/extension-bubble-menu": "^2.0.0-beta.1",
     "prosemirror-view": "^1.18.2"
   }
 }

packages/vue-2/src/BubbleMenu.ts

@@ -0,0 +1,45 @@
+import Vue, { PropType } from 'vue'
+import { BubbleMenuPlugin, BubbleMenuPluginKey, BubbleMenuPluginProps } from '@tiptap/extension-bubble-menu'
+
+export const BubbleMenu = Vue.extend({
+  name: 'BubbleMenu',
+
+  props: {
+    editor: {
+      type: Object as PropType<BubbleMenuPluginProps['editor']>,
+      required: true,
+    },
+
+    keepInBounds: {
+      type: Boolean as PropType<BubbleMenuPluginProps['keepInBounds']>,
+      default: true,
+    },
+  },
+
+  watch: {
+    editor: {
+      immediate: true,
+      handler(editor: BubbleMenuPluginProps['editor']) {
+        if (!editor) {
+          return
+        }
+
+        this.$nextTick(() => {
+          editor.registerPlugin(BubbleMenuPlugin({
+            editor,
+            element: this.$el as HTMLElement,
+            keepInBounds: this.keepInBounds,
+          }))
+        })
+      },
+    },
+  },
+
+  render(createElement) {
+    return createElement('div', {}, this.$slots.default)
+  },
+
+  beforeDestroy() {
+    this.editor.unregisterPlugin(BubbleMenuPluginKey)
+  },
+})

packages/vue-2/src/index.ts

@@ -1,4 +1,5 @@
 export * from '@tiptap/core'
+export * from './BubbleMenu'
 export { Editor } from './Editor'
 export * from './EditorContent'
 export * from './VueRenderer'