add doc page for bubble menu

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'