⚡️ (#2323): use editor as provider

inject editor into MenuBar

Signed-off-by: Vinicius Reis <vinicius.reis@nextcloud.com>

3 files changed, 32 insertions, 11 deletions

diff --git a/src/components/EditorWrapper.provider.js b/src/components/EditorWrapper.provider.js
new file mode 100644
index 000000000..e711b5352
--- /dev/null
+++ b/src/components/EditorWrapper.provider.js
@@ -0,0 +1,6 @@
+export const EDITOR = Symbol('tiptap:editor')
+export const useEditorMixin = {
+	inject: {
+		$editor: { from: EDITOR, default: null },
+	},
+}
diff --git a/src/components/EditorWrapper.vue b/src/components/EditorWrapper.vue
index 920da16af..894449249 100644
--- a/src/components/EditorWrapper.vue
+++ b/src/components/EditorWrapper.vue
@@ -46,7 +46,6 @@
 				@image-drop="onEditorDrop">
 				<MenuBar v-if="renderMenus"
 					ref="menubar"
-					:editor="$editor"
 					:sync-service="syncService"
 					:file-path="relativePath"
 					:file-id="fileId"
@@ -95,6 +94,8 @@ import escapeHtml from 'escape-html'
 import moment from '@nextcloud/moment'
 import { showError } from '@nextcloud/dialogs'
 
+import { EDITOR } from './EditorWrapper.provider'
+
 import { SyncService, ERROR_TYPE, IDLE_TIMEOUT } from './../services/SyncService'
 import { endpointUrl, getRandomGuestName } from './../helpers'
 import { extensionHighlight } from '../helpers/mappings'
@@ -144,6 +145,21 @@ export default {
 		isMobile,
 		store,
 	],
+	provide() {
+		const val = {}
+
+		// providers aren't naturally reactive
+		// and $editor will start as null
+		// using getters we can always provide the
+		// actual $editor without being reactive
+		Object.defineProperty(val, EDITOR, {
+			get: () => {
+				return this.$editor
+			},
+		})
+
+		return val
+	},
 	props: {
 		initialSession: {
 			type: Object,
diff --git a/src/components/MenuBar.vue b/src/components/MenuBar.vue
index 5e572b0df..368fd3a05 100644
--- a/src/components/MenuBar.vue
+++ b/src/components/MenuBar.vue
@@ -123,6 +123,8 @@ import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip'
 import menuBarIcons from './../mixins/menubar'
 import isMobile from './../mixins/isMobile'
 
+import { useEditorMixin } from './EditorWrapper.provider'
+
 import Actions from '@nextcloud/vue/dist/Components/Actions'
 import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'
 import PopoverMenu from '@nextcloud/vue/dist/Components/PopoverMenu'
@@ -144,12 +146,9 @@ export default {
 	},
 	mixins: [
 		isMobile,
+		useEditorMixin,
 	],
 	props: {
-		editor: {
-			type: Object,
-			required: true,
-		},
 		syncService: {
 			type: Object,
 			required: false,
@@ -210,16 +209,16 @@ export default {
 					return false
 				}
 				const args = Array.isArray(isActive) ? isActive : [isActive]
-				return this.editor.isActive(...args)
+				return this.$editor.isActive(...args)
 			}
 		},
 		isVisible() {
-			return this.editor.isFocused
+			return this.$editor.isFocused
 				|| Object.values(this.submenuVisibility).find((v) => v)
 		},
 		disabled() {
 			return (menuItem) => {
-				return menuItem.action && !menuItem.action(this.editor.can())
+				return menuItem.action && !menuItem.action(this.$editor.can())
 			}
 		},
 		isChildMenuVisible() {
@@ -293,7 +292,7 @@ export default {
 			})
 		},
 		refocus() {
-			this.editor.chain().focus().run()
+			this.$editor.chain().focus().run()
 		},
 		clickIcon(icon) {
 			if (icon.click) {
@@ -301,7 +300,7 @@ export default {
 			}
 			// Some actions run themselves.
 			// others still need to have .run() called upon them.
-			const action = icon.action(this.editor.chain().focus())
+			const action = icon.action(this.$editor.chain().focus())
 			action && action.run()
 		},
 		getWindowWidth(event) {
@@ -360,7 +359,7 @@ export default {
 			return current.fill('..').concat(target).join('/')
 		},
 		addEmoji(icon, emojiObject) {
-			return icon.action(this.editor.chain(), { id: emojiObject.id, native: emojiObject.native })
+			return icon.action(this.$editor.chain(), { id: emojiObject.id, native: emojiObject.native })
 				.focus()
 				.run()
 		},