ianhitchman/tiptap
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

fix: rename key to pluginKey for menus

Browse Source
This commit is contained in:
Philipp Kühn
2021-08-13 12:33:06 +02:00
parent 8fd75bc4b6
commit 89d26f7cba
12 changed files with 40 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
docs/src/docPages/api/extensions/bubble-menu.md
View File

@@ -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'),
}),
],

12
docs/src/docPages/api/extensions/floating-menu.md
View File

@@ -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'),
}),
],

8
packages/extension-bubble-menu/src/bubble-menu-plugin.ts
View File

@@ -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'
? new PluginKey(options.key)
: options.key,
key: typeof options.pluginKey === 'string'
? new PluginKey(options.pluginKey)
: options.pluginKey,
view: view => new BubbleMenuView({ view, ...options }),
})
}

4
packages/extension-bubble-menu/src/bubble-menu.ts
View File

@@ -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,

8
packages/extension-floating-menu/src/floating-menu-plugin.ts
View File

@@ -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'
? new PluginKey(options.key)
: options.key,
key: typeof options.pluginKey === 'string'
? new PluginKey(options.pluginKey)
: options.pluginKey,
view: view => new FloatingMenuView({ view, ...options }),
})
}

4
packages/extension-floating-menu/src/floating-menu.ts
View File

@@ -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,

6
packages/react/src/BubbleMenu.tsx
View File

@@ -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)
}
}, [])

6
packages/react/src/FloatingMenu.tsx
View File

@@ -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)
}
}, [])

6
packages/vue-2/src/BubbleMenu.ts
View File

@@ -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,

6
packages/vue-2/src/FloatingMenu.ts
View File

@@ -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,

4
packages/vue-3/src/BubbleMenu.ts
View File

@@ -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,

4
packages/vue-3/src/FloatingMenu.ts
View File

@@ -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,