fix: rename key to pluginKey for menus

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

@@ -19,7 +19,7 @@ yarn add @tiptap/extension-bubble-menu
 | ------------ | -------------------- | -------------- | ----------------------------------------------------------------------- |
 | element      | `HTMLElement`        | `null`         | The DOM element that contains your menu.                                |
 | tippyOptions | `Object`             | `{}`           | [Options for tippy.js](https://atomiks.github.io/tippyjs/v6/all-props/) |
-| key          | `string | PluginKey` | `'bubbleMenu'` | The key for the underlying ProseMirror plugin.                          |
+| pluginKey    | `string | PluginKey` | `'bubbleMenu'` | The key for the underlying ProseMirror plugin.                          |
 | shouldShow   | `(props) => boolean` |                | Controls whether the menu should be shown or not.                       |
 
 ## Source code
@@ -60,7 +60,7 @@ BubbleMenu.configure({
 ```
 
 ### Multiple menus
-Use multiple menus by setting an unique `key`.
+Use multiple menus by setting an unique `pluginKey`.
 
 ```js
 import { Editor } from '@tiptap/core'
@@ -69,11 +69,11 @@ import BubbleMenu from '@tiptap/extension-bubble-menu'
 new Editor({
   extensions: [
     BubbleMenu.configure({
-      key: 'bubbleMenuOne',
+      pluginKey: 'bubbleMenuOne',
       element: document.querySelector('.menu-one'),
     }),
     BubbleMenu.configure({
-      key: 'bubbleMenuTwo',
+      pluginKey: 'bubbleMenuTwo',
       element: document.querySelector('.menu-two'),
     }),
   ],
@@ -90,11 +90,11 @@ import { PluginKey } from 'prosemirror-state'
 new Editor({
   extensions: [
     BubbleMenu.configure({
-      key: new PluginKey('bubbleMenuOne'),
+      pluginKey: new PluginKey('bubbleMenuOne'),
       element: document.querySelector('.menu-one'),
     }),
     BubbleMenu.configure({
-      key: new PluginKey('bubbleMenuTwo'),
+      pluginKey: new PluginKey('bubbleMenuTwo'),
       element: document.querySelector('.menu-two'),
     }),
   ],

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

@@ -17,7 +17,7 @@ yarn add @tiptap/extension-floating-menu
 | ------------ | -------------------- | ---------------- | ----------------------------------------------------------------------- |
 | element      | `HTMLElement`        | `null`           | The DOM element of your menu.                                           |
 | tippyOptions | `Object`             | `{}`             | [Options for tippy.js](https://atomiks.github.io/tippyjs/v6/all-props/) |
-| key          | `string | PluginKey` | `'floatingMenu'` | The key for the underlying ProseMirror plugin.                          |
+| pluginKey    | `string | PluginKey` | `'floatingMenu'` | The key for the underlying ProseMirror plugin.                          |
 | shouldShow   | `(props) => boolean` |                  | Controls whether the menu should be shown or not.                       |
 
 ## Source code
@@ -56,7 +56,7 @@ FloatingMenu.configure({
 ```
 
 ### Multiple menus
-Use multiple menus by setting an unique `key`.
+Use multiple menus by setting an unique `pluginKey`.
 
 ```js
 import { Editor } from '@tiptap/core'
@@ -65,11 +65,11 @@ import FloatingMenu from '@tiptap/extension-floating-menu'
 new Editor({
   extensions: [
     FloatingMenu.configure({
-      key: 'floatingMenuOne',
+      pluginKey: 'floatingMenuOne',
       element: document.querySelector('.menu-one'),
     }),
     FloatingMenu.configure({
-      key: 'floatingMenuTwo',
+      pluginKey: 'floatingMenuTwo',
       element: document.querySelector('.menu-two'),
     }),
   ],
@@ -86,11 +86,11 @@ import { PluginKey } from 'prosemirror-state'
 new Editor({
   extensions: [
     FloatingMenu.configure({
-      key: new PluginKey('floatingMenuOne'),
+      pluginKey: new PluginKey('floatingMenuOne'),
       element: document.querySelector('.menu-one'),
     }),
     FloatingMenu.configure({
-      key: new PluginKey('floatingMenuOne'),
+      pluginKey: new PluginKey('floatingMenuOne'),
       element: document.querySelector('.menu-two'),
     }),
   ],

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

@@ -9,7 +9,7 @@ import { EditorView } from 'prosemirror-view'
 import tippy, { Instance, Props } from 'tippy.js'
 
 export interface BubbleMenuPluginProps {
-  key: PluginKey | string,
+  pluginKey: PluginKey | string,
   editor: Editor,
   element: HTMLElement,
   tippyOptions?: Partial<Props>,
@@ -191,9 +191,9 @@ export class BubbleMenuView {
 
 export const BubbleMenuPlugin = (options: BubbleMenuPluginProps) => {
   return new Plugin({
-    key: typeof options.key === 'string'
+    key: typeof options.pluginKey === 'string'
-      ? new PluginKey(options.key)
+      ? new PluginKey(options.pluginKey)
-      : options.key,
+      : options.pluginKey,
     view: view => new BubbleMenuView({ view, ...options }),
   })
 }

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

@@ -11,7 +11,7 @@ export const BubbleMenu = Extension.create<BubbleMenuOptions>({
   defaultOptions: {
     element: null,
     tippyOptions: {},
-    key: 'bubbleMenu',
+    pluginKey: 'bubbleMenu',
     shouldShow: null,
   },
 
@@ -22,7 +22,7 @@ export const BubbleMenu = Extension.create<BubbleMenuOptions>({
 
     return [
       BubbleMenuPlugin({
-        key: this.options.key,
+        pluginKey: this.options.pluginKey,
         editor: this.editor,
         element: this.options.element,
         tippyOptions: this.options.tippyOptions,

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

@@ -4,7 +4,7 @@ import { EditorView } from 'prosemirror-view'
 import tippy, { Instance, Props } from 'tippy.js'
 
 export interface FloatingMenuPluginProps {
-  key: PluginKey | string,
+  pluginKey: PluginKey | string,
   editor: Editor,
   element: HTMLElement,
   tippyOptions?: Partial<Props>,
@@ -160,9 +160,9 @@ export class FloatingMenuView {
 
 export const FloatingMenuPlugin = (options: FloatingMenuPluginProps) => {
   return new Plugin({
-    key: typeof options.key === 'string'
+    key: typeof options.pluginKey === 'string'
-      ? new PluginKey(options.key)
+      ? new PluginKey(options.pluginKey)
-      : options.key,
+      : options.pluginKey,
     view: view => new FloatingMenuView({ view, ...options }),
   })
 }

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

@@ -11,7 +11,7 @@ export const FloatingMenu = Extension.create<FloatingMenuOptions>({
   defaultOptions: {
     element: null,
     tippyOptions: {},
-    key: 'floatingMenu',
+    pluginKey: 'floatingMenu',
     shouldShow: null,
   },
 
@@ -22,7 +22,7 @@ export const FloatingMenu = Extension.create<FloatingMenuOptions>({
 
     return [
       FloatingMenuPlugin({
-        key: this.options.key,
+        pluginKey: this.options.pluginKey,
         editor: this.editor,
         element: this.options.element,
         tippyOptions: this.options.tippyOptions,

packages/react/src/BubbleMenu.tsx

@@ -10,14 +10,14 @@ export const BubbleMenu: React.FC<BubbleMenuProps> = props => {
 
   useEffect(() => {
     const {
-      key,
+      pluginKey,
       editor,
       tippyOptions,
       shouldShow,
     } = props
 
     editor.registerPlugin(BubbleMenuPlugin({
-      key,
+      pluginKey,
       editor,
       element: element.current as HTMLElement,
       tippyOptions,
@@ -25,7 +25,7 @@ export const BubbleMenu: React.FC<BubbleMenuProps> = props => {
     }))
 
     return () => {
-      editor.unregisterPlugin(key)
+      editor.unregisterPlugin(pluginKey)
     }
   }, [])
 

packages/react/src/FloatingMenu.tsx

@@ -10,14 +10,14 @@ export const FloatingMenu: React.FC<FloatingMenuProps> = props => {
 
   useEffect(() => {
     const {
-      key,
+      pluginKey,
       editor,
       tippyOptions,
       shouldShow,
     } = props
 
     editor.registerPlugin(FloatingMenuPlugin({
-      key,
+      pluginKey,
       editor,
       element: element.current as HTMLElement,
       tippyOptions,
@@ -25,7 +25,7 @@ export const FloatingMenu: React.FC<FloatingMenuProps> = props => {
     }))
 
     return () => {
-      editor.unregisterPlugin(key)
+      editor.unregisterPlugin(pluginKey)
     }
   }, [])
 

packages/vue-2/src/BubbleMenu.ts

@@ -2,7 +2,7 @@ import Vue, { Component, PropType } from 'vue'
 import { BubbleMenuPlugin, BubbleMenuPluginProps } from '@tiptap/extension-bubble-menu'
 
 export interface BubbleMenuInterface extends Vue {
-  pluginKey: BubbleMenuPluginProps['key'],
+  pluginKey: BubbleMenuPluginProps['pluginKey'],
   editor: BubbleMenuPluginProps['editor'],
   tippyOptions: BubbleMenuPluginProps['tippyOptions'],
   shouldShow: BubbleMenuPluginProps['shouldShow'],
@@ -13,7 +13,7 @@ export const BubbleMenu: Component = {
 
   props: {
     pluginKey: {
-      type: [String, Object as PropType<Exclude<BubbleMenuPluginProps['key'], string>>],
+      type: [String, Object as PropType<Exclude<BubbleMenuPluginProps['pluginKey'], string>>],
       default: 'bubbleMenu',
     },
 
@@ -43,7 +43,7 @@ export const BubbleMenu: Component = {
 
         this.$nextTick(() => {
           editor.registerPlugin(BubbleMenuPlugin({
-            key: this.pluginKey,
+            pluginKey: this.pluginKey,
             editor,
             element: this.$el as HTMLElement,
             tippyOptions: this.tippyOptions,

packages/vue-2/src/FloatingMenu.ts

@@ -2,7 +2,7 @@ import Vue, { Component, PropType } from 'vue'
 import { FloatingMenuPlugin, FloatingMenuPluginProps } from '@tiptap/extension-floating-menu'
 
 export interface FloatingMenuInterface extends Vue {
-  pluginKey: FloatingMenuPluginProps['key'],
+  pluginKey: FloatingMenuPluginProps['pluginKey'],
   tippyOptions: FloatingMenuPluginProps['tippyOptions'],
   editor: FloatingMenuPluginProps['editor'],
   shouldShow: FloatingMenuPluginProps['shouldShow'],
@@ -13,7 +13,7 @@ export const FloatingMenu: Component = {
 
   props: {
     pluginKey: {
-      type: [String, Object as PropType<Exclude<FloatingMenuPluginProps['key'], string>>],
+      type: [String, Object as PropType<Exclude<FloatingMenuPluginProps['pluginKey'], string>>],
       default: 'floatingMenu',
     },
 
@@ -43,7 +43,7 @@ export const FloatingMenu: Component = {
 
         this.$nextTick(() => {
           editor.registerPlugin(FloatingMenuPlugin({
-            key: this.pluginKey,
+            pluginKey: this.pluginKey,
             editor,
             element: this.$el as HTMLElement,
             tippyOptions: this.tippyOptions,

packages/vue-3/src/BubbleMenu.ts

@@ -14,7 +14,7 @@ export const BubbleMenu = defineComponent({
   props: {
     pluginKey: {
       // TODO: TypeScript breaks :(
-      // type: [String, Object as PropType<Exclude<BubbleMenuPluginProps['key'], string>>],
+      // type: [String, Object as PropType<Exclude<BubbleMenuPluginProps['pluginKey'], string>>],
       type: [String, Object],
       default: 'bubbleMenu',
     },
@@ -47,7 +47,7 @@ export const BubbleMenu = defineComponent({
       } = props
 
       editor.registerPlugin(BubbleMenuPlugin({
-        key: pluginKey,
+        pluginKey,
         editor,
         element: root.value as HTMLElement,
         tippyOptions,

packages/vue-3/src/FloatingMenu.ts

@@ -14,7 +14,7 @@ export const FloatingMenu = defineComponent({
   props: {
     pluginKey: {
       // TODO: TypeScript breaks :(
-      // type: [String, Object as PropType<Exclude<FloatingMenuPluginProps['key'], string>>],
+      // type: [String, Object as PropType<Exclude<FloatingMenuPluginProps['pluginKey'], string>>],
       type: [String, Object],
       default: 'floatingMenu',
     },
@@ -47,7 +47,7 @@ export const FloatingMenu = defineComponent({
       } = props
 
       editor.registerPlugin(FloatingMenuPlugin({
-        key: pluginKey,
+        pluginKey,
         editor,
         element: root.value as HTMLElement,
         tippyOptions,