diff --git a/packages/tiptap/src/Components/EditorMenuBar.js b/packages/tiptap/src/Components/EditorMenuBar.js index ad9e0407b..c5c4b9cc7 100644 --- a/packages/tiptap/src/Components/EditorMenuBar.js +++ b/packages/tiptap/src/Components/EditorMenuBar.js @@ -1,3 +1,5 @@ +import MenuBar from '../Plugins/MenuBar' + export default { props: { @@ -7,6 +9,22 @@ export default { }, }, + watch: { + editor: { + immediate: true, + handler(editor) { + if (editor) { + this.$nextTick(() => { + editor.registerPlugin(MenuBar({ + editor, + element: this.$el, + })) + }) + } + }, + }, + }, + render() { if (!this.editor) { return null diff --git a/packages/tiptap/src/Plugins/MenuBar.js b/packages/tiptap/src/Plugins/MenuBar.js new file mode 100644 index 000000000..52fc9b7a0 --- /dev/null +++ b/packages/tiptap/src/Plugins/MenuBar.js @@ -0,0 +1,29 @@ +import { Plugin, PluginKey } from 'prosemirror-state' + +class Menu { + + constructor({ options }) { + this.options = options + + // the mousedown event is fired before blur so we can prevent it + this.options.element.addEventListener('mousedown', this.handleClick) + } + + handleClick(event) { + event.preventDefault() + } + + destroy() { + this.options.element.removeEventListener('mousedown', this.handleClick) + } + +} + +export default function (options) { + return new Plugin({ + key: new PluginKey('menu_bar'), + view(editorView) { + return new Menu({ editorView, options }) + }, + }) +}