* 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:
@@ -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)
|
||||
},
|
||||
}
|
||||
|
||||
@@ -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)
|
||||
},
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user