chore(migrate): useEditorMixin to useEditor composable

Signed-off-by: Max <max@nextcloud.com>

Author: max-nextcloud

src/components/Assistant.vue

@@ -5,9 +5,9 @@
 <template>
 	<div v-if="showAssistant" class="text-assistant">
 		<FloatingMenu
-			v-if="$editor"
+			v-if="editor"
 			plugin-key="assistantMenu"
-			:editor="$editor"
+			:editor="editor"
 			:tippy-options="floatingOptions()"
 			:should-show="floatingShow"
 			class="floating-menu"
@@ -163,11 +163,11 @@ import NcActionSeparator from '@nextcloud/vue/components/NcActionSeparator'
 import NcListItem from '@nextcloud/vue/components/NcListItem'
 import NcModal from '@nextcloud/vue/components/NcModal'
 import {
-	useEditorMixin,
+	useEditor,
 	useIsRichWorkspaceMixin,
 	useFileMixin,
 	useIsPublicMixin,
-} from './Editor.provider.js'
+} from './Editor.provider.ts'
 import { FloatingMenu } from '@tiptap/vue-2'
 import { emit, subscribe, unsubscribe } from '@nextcloud/event-bus'
 import markdownit from '../markdownit/index.js'
@@ -206,12 +206,11 @@ export default {
 		NcListItem,
 		NcModal,
 	},
-	mixins: [
-		useEditorMixin,
-		useIsPublicMixin,
-		useIsRichWorkspaceMixin,
-		useFileMixin,
-	],
+	mixins: [useIsPublicMixin, useIsRichWorkspaceMixin, useFileMixin],
+	setup() {
+		const { editor } = useEditor()
+		return { editor }
+	},
 	data() {
 		return {
 			taskTypes: OCP.InitialState.loadState('text', 'taskprocessing'),
@@ -271,7 +270,7 @@ export default {
 			return
 		}
 
-		this.$editor.on('selectionUpdate', this.onSelection)
+		this.editor?.on('selectionUpdate', this.onSelection)
 		this.fetchTasks()
 		subscribe('notifications:notification:received', this.checkNotification)
 	},
@@ -280,7 +279,7 @@ export default {
 			return
 		}
 
-		this.$editor.off('selectionUpdate', this.onSelection)
+		this.editor?.off('selectionUpdate', this.onSelection)
 		unsubscribe('notifications:notification:received', this.checkNotification)
 	},
 	methods: {
@@ -313,7 +312,10 @@ export default {
 			await this.fetchTasks()
 		},
 		onSelection() {
-			const { state } = this.$editor
+			const { state } = this.editor ?? {}
+			if (!state) {
+				return
+			}
 			const { from, to } = state.selection
 			this.selection = state.doc.textBetween(from, to, ' ')
 		},
@@ -343,7 +345,7 @@ export default {
 		},
 		openTranslateDialog() {
 			if (!this.selection.trim().length) {
-				this.$editor.commands.selectAll()
+				this.editor?.commands.selectAll()
 			}
 			emit('text:translate-modal:show', { content: this.selection || '' })
 		},
@@ -367,7 +369,7 @@ export default {
 			const content = isMarkdown
 				? markdownit.render(task.output.output)
 				: task.output.output
-			this.$editor.commands.insertContent(content)
+			this.editor?.commands.insertContent(content)
 			this.showTaskList = false
 		},
 		async copyResult(task) {
@@ -402,9 +404,9 @@ export default {
 						.querySelector('.ProseMirror')
 						.getBoundingClientRect()
 					const pos = posToDOMRect(
-						this.$editor.view,
-						this.$editor.state.selection.from,
-						this.$editor.state.selection.to,
+						this.editor?.view,
+						this.editor?.state.selection.from,
+						this.editor?.state.selection.to,
 					)
 					let rightSpacing = 0
 

src/components/BaseReader.vue

@@ -25,7 +25,7 @@
 <script>
 import { Editor } from '@tiptap/core'
 import { EditorContent } from '@tiptap/vue-2'
-import { EDITOR } from './Editor.provider.js'
+import { provideEditor } from './Editor.provider.ts'
 import {
 	useOutlineStateMixin,
 	useOutlineActions,
@@ -41,18 +41,6 @@ export default {
 
 	mixins: [useOutlineStateMixin, useOutlineActions],
 
-	provide() {
-		const val = {}
-
-		Object.defineProperties(val, {
-			[EDITOR]: {
-				get: () => this.$editor,
-			},
-		})
-
-		return val
-	},
-
 	// extensions is a factory building a list of extensions for the editor
 	inject: ['renderHtml', 'extensions'],
 
@@ -63,6 +51,11 @@ export default {
 		},
 	},
 
+	setup() {
+		const { editor, setEditable } = provideEditor()
+		return { editor, setEditable }
+	},
+
 	computed: {
 		htmlContent() {
 			return this.renderHtml(this.content)
@@ -79,12 +72,12 @@ export default {
 	},
 
 	created() {
-		this.$editor = this.createEditor()
-		this.$editor.setEditable(false)
+		this.editor = this.createEditor()
+		this.setEditable(false)
 	},
 
 	beforeDestroy() {
-		this.$editor.destroy()
+		this.editor.destroy()
 	},
 
 	methods: {
@@ -96,7 +89,7 @@ export default {
 		},
 
 		updateContent() {
-			this.$editor.commands.setContent(this.htmlContent, true)
+			this.editor.commands.setContent(this.htmlContent, true)
 		},
 	},
 }

src/components/CollisionResolveDialog.vue

@@ -30,24 +30,28 @@
 
 <script>
 import {
-	useEditorMixin,
+	useEditor,
 	useIsRichEditorMixin,
 	useSyncServiceMixin,
-} from './Editor.provider.js'
+} from './Editor.provider.ts'
 import NcButton from '@nextcloud/vue/components/NcButton'
 import setContent from './../mixins/setContent.js'
 export default {
 	name: 'CollisionResolveDialog',
 	components: {
 		NcButton,
 	},
-	mixins: [useEditorMixin, useIsRichEditorMixin, setContent, useSyncServiceMixin],
+	mixins: [useIsRichEditorMixin, setContent, useSyncServiceMixin],
 	props: {
 		syncError: {
 			type: Object,
 			default: null,
 		},
 	},
+	setup() {
+		const { setEditable } = useEditor()
+		return { setEditable }
+	},
 	data() {
 		return {
 			clicked: false,
@@ -57,12 +61,12 @@ export default {
 		resolveThisVersion() {
 			this.clicked = true
 			this.$syncService.forceSave().then(() => this.$syncService.syncUp())
-			this.$editor.setEditable(!this.readOnly)
+			this.setEditable(!this.readOnly)
 		},
 		resolveServerVersion() {
 			const { outsideChange } = this.syncError.data
 			this.clicked = true
-			this.$editor.setEditable(!this.readOnly)
+			this.setEditable(!this.readOnly)
 			this.setContent(outsideChange, { isRichEditor: this.$isRichEditor })
 			this.$syncService.forceSave().then(() => this.$syncService.syncUp())
 		},

src/components/Editor.provider.js renamed to src/components/Editor.provider.ts

@@ -3,9 +3,28 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
+import type { Editor } from '@tiptap/core'
 import { logger } from '../helpers/logger.js'
+import { provide, inject, shallowRef } from 'vue'
+import type { InjectionKey, ShallowRef } from 'vue'
+
+export const editorKey = Symbol('tiptap:editor') as InjectionKey<
+	ShallowRef<Editor | undefined>
+>
+export const provideEditor = () => {
+	const editor: ShallowRef<Editor | undefined> = shallowRef(undefined)
+	provide(editorKey, editor)
+	const setEditable = (val: boolean) => {
+		if (editor.value && editor.value.isEditable !== val) {
+			editor.value.setEditable(val)
+		}
+	}
+	return { editor, setEditable }
+}
+export const useEditor = () => ({
+	editor: inject(editorKey, shallowRef(undefined)),
+})
 
-export const EDITOR = Symbol('tiptap:editor')
 export const FILE = Symbol('editor:file')
 export const ATTACHMENT_RESOLVER = Symbol('attachment:resolver')
 export const IS_MOBILE = Symbol('editor:is-mobile')
@@ -17,12 +36,6 @@ export const EDITOR_UPLOAD = Symbol('editor:upload')
 export const HOOK_MENTION_SEARCH = Symbol('hook:mention-search')
 export const HOOK_MENTION_INSERT = Symbol('hook:mention-insert')
 
-export const useEditorMixin = {
-	inject: {
-		$editor: { from: EDITOR, default: null },
-	},
-}
-
 export const useSyncServiceMixin = {
 	inject: {
 		$syncService: { from: SYNC_SERVICE, default: null },
@@ -71,7 +84,7 @@ export const useAttachmentResolver = {
 		$attachmentResolver: {
 			from: ATTACHMENT_RESOLVER,
 			default: {
-				resolve(src) {
+				resolve(src: string) {
 					logger.warn(
 						'No attachment resolver provided. Some attachment sources cannot be resolved.',
 					)