chore(migrate): useEditorMixin to useEditor composable

src/EditorFactory.js

@@ -37,7 +37,7 @@ const editorProps = {
 	scrollThreshold: 50,
 }
 
-const createRichEditor = ({ extensions = [], session, relativePath, isEmbedded = false } = {}) => {
+const createRichEditor = ({ extensions = [], connection, relativePath, isEmbedded = false } = {}) => {
 	return new Editor({
 		editorProps,
 		extensions: [
@@ -48,7 +48,7 @@ const createRichEditor = ({ extensions = [], session, relativePath, isEmbedded =
 				extensions: [
 					Mention.configure({
 						suggestion: MentionSuggestion({
-							session,
+							connection,
 						}),
 					}),
 				],

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"
@@ -162,12 +162,9 @@ import NcActionButton from '@nextcloud/vue/components/NcActionButton'
 import NcActionSeparator from '@nextcloud/vue/components/NcActionSeparator'
 import NcListItem from '@nextcloud/vue/components/NcListItem'
 import NcModal from '@nextcloud/vue/components/NcModal'
-import {
-	useEditorMixin,
-	useIsRichWorkspaceMixin,
-	useFileMixin,
-	useIsPublicMixin,
-} from './Editor.provider.js'
+import { useFileMixin } from './Editor.provider.ts'
+import { useEditorFlags } from '../composables/useEditorFlags.ts'
+import { useEditor } from '../composables/useEditor.ts'
 import { FloatingMenu } from '@tiptap/vue-2'
 import { emit, subscribe, unsubscribe } from '@nextcloud/event-bus'
 import markdownit from '../markdownit/index.js'
@@ -206,12 +203,12 @@ export default {
 		NcListItem,
 		NcModal,
 	},
-	mixins: [
-		useEditorMixin,
-		useIsPublicMixin,
-		useIsRichWorkspaceMixin,
-		useFileMixin,
-	],
+	mixins: [useFileMixin],
+	setup() {
+		const { editor } = useEditor()
+		const { isPublic, isRichWorkspace } = useEditorFlags()
+		return { editor, isPublic, isRichWorkspace }
+	},
 	data() {
 		return {
 			taskTypes: OCP.InitialState.loadState('text', 'taskprocessing'),
@@ -232,8 +229,8 @@ export default {
 	computed: {
 		showAssistant() {
 			return (
-				!this.$isRichWorkspace
-				&& !this.$isPublic
+				!this.isRichWorkspace
+				&& !this.isPublic
 				&& window.OCA.Assistant?.openAssistantForm
 			)
 		},
@@ -271,7 +268,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 +277,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 +310,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 +343,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 +367,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 +402,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

@@ -14,23 +14,24 @@
 			<EditorOutline />
 		</div>
 		<EditorContent
-			v-if="$editor"
+			v-if="editor"
 			id="read-only-editor"
 			class="editor__content text-editor__content"
-			:editor="$editor" />
+			:editor="editor" />
 		<div class="text-editor__content-wrapper__right" />
 	</div>
 </template>
 
 <script>
 import { Editor } from '@tiptap/core'
 import { EditorContent } from '@tiptap/vue-2'
-import { EDITOR } from './Editor.provider.js'
+import { provideEditor } from '../composables/useEditor.ts'
 import {
 	useOutlineStateMixin,
 	useOutlineActions,
 } from './Editor/Wrapper.provider.js'
 import EditorOutline from './Editor/EditorOutline.vue'
+import { useEditorMethods } from '../composables/useEditorMethods.ts'
 
 export default {
 	name: 'BaseReader',
@@ -41,18 +42,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 +52,12 @@ export default {
 		},
 	},
 
+	setup() {
+		const { editor } = provideEditor()
+		const { setEditable } = useEditorMethods(editor)
+		return { editor, setEditable }
+	},
+
 	computed: {
 		htmlContent() {
 			return this.renderHtml(this.content)
@@ -79,12 +74,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 +91,7 @@ export default {
 		},
 
 		updateContent() {
-			this.$editor.commands.setContent(this.htmlContent, true)
+			this.editor?.commands.setContent(this.htmlContent, true)
 		},
 	},
 }

src/components/CollisionResolveDialog.vue

@@ -29,25 +29,29 @@
 </template>
 
 <script>
-import {
-	useEditorMixin,
-	useIsRichEditorMixin,
-	useSyncServiceMixin,
-} from './Editor.provider.js'
+import { useSyncServiceMixin } from './Editor.provider.ts'
+import { useEditorFlags } from '../composables/useEditorFlags.ts'
+import { useEditor } from '../composables/useEditor.ts'
 import NcButton from '@nextcloud/vue/components/NcButton'
-import setContent from './../mixins/setContent.js'
+import { useEditorMethods } from '../composables/useEditorMethods.ts'
 export default {
 	name: 'CollisionResolveDialog',
 	components: {
 		NcButton,
 	},
-	mixins: [useEditorMixin, useIsRichEditorMixin, setContent, useSyncServiceMixin],
+	mixins: [useSyncServiceMixin],
 	props: {
 		syncError: {
 			type: Object,
 			default: null,
 		},
 	},
+	setup() {
+		const { editor } = useEditor()
+		const { setContent, setEditable } = useEditorMethods(editor)
+		const { isRichEditor } = useEditorFlags()
+		return { editor, isRichEditor, setContent, setEditable }
+	},
 	data() {
 		return {
 			clicked: false,
@@ -57,13 +61,13 @@ 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.setContent(outsideChange, { isRichEditor: this.$isRichEditor })
+			this.setEditable(!this.readOnly)
+			this.setContent(outsideChange, { isRichEditor: this.isRichEditor })
 			this.$syncService.forceSave().then(() => this.$syncService.syncUp())
 		},
 	},

src/components/Editor.provider.js → src/components/Editor.provider.ts

@@ -5,48 +5,20 @@
 
 import { logger } from '../helpers/logger.js'
 
-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')
-export const IS_PUBLIC = Symbol('editor:is-public')
-export const IS_RICH_EDITOR = Symbol('editor:is-rich-editor')
-export const IS_RICH_WORKSPACE = Symbol('editor:is-rich-woskapace')
 export const SYNC_SERVICE = Symbol('sync:service')
 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 },
 	},
 }
 
-export const useIsPublicMixin = {
-	inject: {
-		$isPublic: { from: IS_PUBLIC, default: false },
-	},
-}
-
-export const useIsRichWorkspaceMixin = {
-	inject: {
-		$isRichWorkspace: { from: IS_RICH_WORKSPACE, default: false },
-	},
-}
-
-export const useIsRichEditorMixin = {
-	inject: {
-		$isRichEditor: { from: IS_RICH_EDITOR, default: false },
-	},
-}
-
 export const useIsMobileMixin = {
 	inject: {
 		$isMobile: { from: IS_MOBILE, default: false },
@@ -71,7 +43,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.',
 					)