feat: add key option and shouldShow option to menus (fix #1480, fix #1043, fix #1268, fix #1503)

* add key option to bubble menu

* ignore react for now

* add shouldShow option to bubble menu extension

* improve types

* remove BubbleMenuPluginKey

* add key and shouldShow option to floating menu extension

* fix: don’t show floating menu within code block

* docs: add new menu options
This commit is contained in:
Philipp Kühn
2021-08-11 14:37:58 +02:00
committed by GitHub
parent bcc1309cd9
commit 9ba61c1582
12 changed files with 312 additions and 60 deletions

View File

@@ -1,15 +1,22 @@
import Vue, { Component, PropType } from 'vue'
import { BubbleMenuPlugin, BubbleMenuPluginKey, BubbleMenuPluginProps } from '@tiptap/extension-bubble-menu'
import { BubbleMenuPlugin, BubbleMenuPluginProps } from '@tiptap/extension-bubble-menu'
export interface BubbleMenuInterface extends Vue {
tippyOptions: BubbleMenuPluginProps['tippyOptions'],
pluginKey: BubbleMenuPluginProps['key'],
editor: BubbleMenuPluginProps['editor'],
tippyOptions: BubbleMenuPluginProps['tippyOptions'],
shouldShow: BubbleMenuPluginProps['shouldShow'],
}
export const BubbleMenu: Component = {
name: 'BubbleMenu',
props: {
pluginKey: {
type: [String, Object as PropType<Exclude<BubbleMenuPluginProps['key'], string>>],
default: 'bubbleMenu',
},
editor: {
type: Object as PropType<BubbleMenuPluginProps['editor']>,
required: true,
@@ -19,6 +26,11 @@ export const BubbleMenu: Component = {
type: Object as PropType<BubbleMenuPluginProps['tippyOptions']>,
default: () => ({}),
},
shouldShow: {
type: Function as PropType<Exclude<BubbleMenuPluginProps['shouldShow'], null>>,
default: null,
},
},
watch: {
@@ -31,9 +43,11 @@ export const BubbleMenu: Component = {
this.$nextTick(() => {
editor.registerPlugin(BubbleMenuPlugin({
key: this.pluginKey,
editor,
element: this.$el as HTMLElement,
tippyOptions: this.tippyOptions,
shouldShow: this.shouldShow,
}))
})
},
@@ -45,6 +59,6 @@ export const BubbleMenu: Component = {
},
beforeDestroy(this: BubbleMenuInterface) {
this.editor.unregisterPlugin(BubbleMenuPluginKey)
this.editor.unregisterPlugin(this.pluginKey)
},
}

View File

@@ -1,15 +1,22 @@
import Vue, { Component, PropType } from 'vue'
import { FloatingMenuPlugin, FloatingMenuPluginKey, FloatingMenuPluginProps } from '@tiptap/extension-floating-menu'
import { FloatingMenuPlugin, FloatingMenuPluginProps } from '@tiptap/extension-floating-menu'
export interface FloatingMenuInterface extends Vue {
pluginKey: FloatingMenuPluginProps['key'],
tippyOptions: FloatingMenuPluginProps['tippyOptions'],
editor: FloatingMenuPluginProps['editor'],
shouldShow: FloatingMenuPluginProps['shouldShow'],
}
export const FloatingMenu: Component = {
name: 'FloatingMenu',
props: {
pluginKey: {
type: [String, Object as PropType<Exclude<FloatingMenuPluginProps['key'], string>>],
default: 'floatingMenu',
},
editor: {
type: Object as PropType<FloatingMenuPluginProps['editor']>,
required: true,
@@ -19,6 +26,11 @@ export const FloatingMenu: Component = {
type: Object as PropType<FloatingMenuPluginProps['tippyOptions']>,
default: () => ({}),
},
shouldShow: {
type: Function as PropType<Exclude<FloatingMenuPluginProps['shouldShow'], null>>,
default: null,
},
},
watch: {
@@ -31,9 +43,11 @@ export const FloatingMenu: Component = {
this.$nextTick(() => {
editor.registerPlugin(FloatingMenuPlugin({
key: this.pluginKey,
editor,
element: this.$el as HTMLElement,
tippyOptions: this.tippyOptions,
shouldShow: this.shouldShow,
}))
})
},
@@ -45,6 +59,6 @@ export const FloatingMenu: Component = {
},
beforeDestroy(this: FloatingMenuInterface) {
this.editor.unregisterPlugin(FloatingMenuPluginKey)
this.editor.unregisterPlugin(this.pluginKey)
},
}