diff --git a/docs/src/docPages/api/extensions/bubble-menu.md b/docs/src/docPages/api/extensions/bubble-menu.md index 6c1822c7..6b54d5b5 100644 --- a/docs/src/docPages/api/extensions/bubble-menu.md +++ b/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'), }), ], diff --git a/docs/src/docPages/api/extensions/floating-menu.md b/docs/src/docPages/api/extensions/floating-menu.md index 838ffe92..cdc6dec5 100644 --- a/docs/src/docPages/api/extensions/floating-menu.md +++ b/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'), }), ], diff --git a/packages/extension-bubble-menu/src/bubble-menu-plugin.ts b/packages/extension-bubble-menu/src/bubble-menu-plugin.ts index 2eb9f171..90c320be 100644 --- a/packages/extension-bubble-menu/src/bubble-menu-plugin.ts +++ b/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, @@ -191,9 +191,9 @@ export class BubbleMenuView { export const BubbleMenuPlugin = (options: BubbleMenuPluginProps) => { return new Plugin({ - key: typeof options.key === 'string' - ? new PluginKey(options.key) - : options.key, + key: typeof options.pluginKey === 'string' + ? new PluginKey(options.pluginKey) + : options.pluginKey, view: view => new BubbleMenuView({ view, ...options }), }) } diff --git a/packages/extension-bubble-menu/src/bubble-menu.ts b/packages/extension-bubble-menu/src/bubble-menu.ts index cb745864..46094ab0 100644 --- a/packages/extension-bubble-menu/src/bubble-menu.ts +++ b/packages/extension-bubble-menu/src/bubble-menu.ts @@ -11,7 +11,7 @@ export const BubbleMenu = Extension.create({ defaultOptions: { element: null, tippyOptions: {}, - key: 'bubbleMenu', + pluginKey: 'bubbleMenu', shouldShow: null, }, @@ -22,7 +22,7 @@ export const BubbleMenu = Extension.create({ return [ BubbleMenuPlugin({ - key: this.options.key, + pluginKey: this.options.pluginKey, editor: this.editor, element: this.options.element, tippyOptions: this.options.tippyOptions, diff --git a/packages/extension-floating-menu/src/floating-menu-plugin.ts b/packages/extension-floating-menu/src/floating-menu-plugin.ts index 56c200e6..fe014214 100644 --- a/packages/extension-floating-menu/src/floating-menu-plugin.ts +++ b/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, @@ -160,9 +160,9 @@ export class FloatingMenuView { export const FloatingMenuPlugin = (options: FloatingMenuPluginProps) => { return new Plugin({ - key: typeof options.key === 'string' - ? new PluginKey(options.key) - : options.key, + key: typeof options.pluginKey === 'string' + ? new PluginKey(options.pluginKey) + : options.pluginKey, view: view => new FloatingMenuView({ view, ...options }), }) } diff --git a/packages/extension-floating-menu/src/floating-menu.ts b/packages/extension-floating-menu/src/floating-menu.ts index 4e014170..3e4fd57a 100644 --- a/packages/extension-floating-menu/src/floating-menu.ts +++ b/packages/extension-floating-menu/src/floating-menu.ts @@ -11,7 +11,7 @@ export const FloatingMenu = Extension.create({ defaultOptions: { element: null, tippyOptions: {}, - key: 'floatingMenu', + pluginKey: 'floatingMenu', shouldShow: null, }, @@ -22,7 +22,7 @@ export const FloatingMenu = Extension.create({ return [ FloatingMenuPlugin({ - key: this.options.key, + pluginKey: this.options.pluginKey, editor: this.editor, element: this.options.element, tippyOptions: this.options.tippyOptions, diff --git a/packages/react/src/BubbleMenu.tsx b/packages/react/src/BubbleMenu.tsx index 415bb702..96a8dc39 100644 --- a/packages/react/src/BubbleMenu.tsx +++ b/packages/react/src/BubbleMenu.tsx @@ -10,14 +10,14 @@ export const BubbleMenu: React.FC = 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 = props => { })) return () => { - editor.unregisterPlugin(key) + editor.unregisterPlugin(pluginKey) } }, []) diff --git a/packages/react/src/FloatingMenu.tsx b/packages/react/src/FloatingMenu.tsx index d1b5d34c..c5a20e0a 100644 --- a/packages/react/src/FloatingMenu.tsx +++ b/packages/react/src/FloatingMenu.tsx @@ -10,14 +10,14 @@ export const FloatingMenu: React.FC = 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 = props => { })) return () => { - editor.unregisterPlugin(key) + editor.unregisterPlugin(pluginKey) } }, []) diff --git a/packages/vue-2/src/BubbleMenu.ts b/packages/vue-2/src/BubbleMenu.ts index cc71785b..906e78cd 100644 --- a/packages/vue-2/src/BubbleMenu.ts +++ b/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>], + type: [String, Object as PropType>], 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, diff --git a/packages/vue-2/src/FloatingMenu.ts b/packages/vue-2/src/FloatingMenu.ts index 78868dcf..37042c3f 100644 --- a/packages/vue-2/src/FloatingMenu.ts +++ b/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>], + type: [String, Object as PropType>], 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, diff --git a/packages/vue-3/src/BubbleMenu.ts b/packages/vue-3/src/BubbleMenu.ts index 419fe150..47a7719e 100644 --- a/packages/vue-3/src/BubbleMenu.ts +++ b/packages/vue-3/src/BubbleMenu.ts @@ -14,7 +14,7 @@ export const BubbleMenu = defineComponent({ props: { pluginKey: { // TODO: TypeScript breaks :( - // type: [String, Object as PropType>], + // type: [String, Object as PropType>], 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, diff --git a/packages/vue-3/src/FloatingMenu.ts b/packages/vue-3/src/FloatingMenu.ts index 13874c35..c193c492 100644 --- a/packages/vue-3/src/FloatingMenu.ts +++ b/packages/vue-3/src/FloatingMenu.ts @@ -14,7 +14,7 @@ export const FloatingMenu = defineComponent({ props: { pluginKey: { // TODO: TypeScript breaks :( - // type: [String, Object as PropType>], + // type: [String, Object as PropType>], 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,