diff options
author | Vinicius Reis <vinicius.reis@nextcloud.com> | 2022-04-26 15:36:01 +0300 |
---|---|---|
committer | Vinicius Reis <vinicius.reis@nextcloud.com> | 2022-04-26 21:20:31 +0300 |
commit | 9a089f06f7f15ff17672fe6c340d75caf582b902 (patch) | |
tree | 22423600341d55c880bdc382c2c6e41df30a1097 /src/components | |
parent | 0814726764b08c2edae99178fbac4d7fe619b235 (diff) |
⚡️ (#2323): use editor as provider
inject editor into MenuBar
Signed-off-by: Vinicius Reis <vinicius.reis@nextcloud.com>
Diffstat (limited to 'src/components')
-rw-r--r-- | src/components/EditorWrapper.provider.js | 6 | ||||
-rw-r--r-- | src/components/EditorWrapper.vue | 18 | ||||
-rw-r--r-- | src/components/MenuBar.vue | 19 |
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() }, |