enh(OCA.text): accept context in CreateCollaborativeEditor

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

Author: max-nextcloud

src/components/CollaborativeEditor.vue

@@ -188,9 +188,11 @@ export default defineComponent({
 			default: '',
 		},
 
-		fileId: {
-			type: Number,
-			default: null,
+		// used in provideConnection
+		// eslint-disable-next-line vue/no-unused-properties
+		context: {
+			type: Object,
+			required: true,
 		},
 
 		active: {

src/components/ViewerComponent.vue

@@ -6,7 +6,7 @@
 <template>
 	<EditorReloader
 		v-if="!useSourceView"
-		:fileId="fileid"
+		:context="{ id: fileid, type: 'file' }"
 		:relativePath="filename"
 		:active="active || isEmbedded"
 		:autofocus

src/composables/useConnection.ts

@@ -10,6 +10,11 @@ import type { Document, Session } from '../services/SyncService.ts'
 import { inject, provide, shallowRef } from 'vue'
 import * as api from '../apis/connect.ts'
 
+export interface Context {
+	type: string
+	id: number
+}
+
 export interface Connection {
 	documentId: number
 	sessionId: number
@@ -41,7 +46,7 @@ export const openDataKey = Symbol('text:opendata') as InjectionKey<
  * Handle the connection to the text api and provide it to child components
  *
  * @param props Props of the editor component.
- * @param props.fileId Fileid of the file.
+ * @param props.context of the document (i.e. type 'file' and id of the file)
  * @param props.relativePath Relative path to the file.
  * @param props.initialSession Initial session handed to the editor in direct editing
  * @param props.shareToken Share token of the file.
@@ -50,7 +55,7 @@ export const openDataKey = Symbol('text:opendata') as InjectionKey<
  */
 export function provideConnection(
 	props: {
-		fileId: number
+		context: Context
 		relativePath: string
 		initialSession?: InitialData
 		shareToken?: string
@@ -136,13 +141,13 @@ function openInitialSession(
  * @param props Props of the editor component
  * @param props.relativePath Relative path to the file.
  * @param props.shareToken Share token of the file.
- * @param props.fileId id of the file
+ * @param props.context of the document (i.e. type 'file' and id of the file)
  * @param baseVersionEtag Etag from the last editing session.
  * @param guestName to be shown to other participants.
  */
 async function openShare(
 	props: {
-		fileId: number
+		context: Context
 		relativePath: string
 		shareToken?: string
 	},
@@ -154,7 +159,7 @@ async function openShare(
 			guestName,
 			token: props.shareToken,
 			filePath: props.relativePath,
-			fileId: props.fileId,
+			fileId: props.context.id,
 			baseVersionEtag,
 		})
 	}
@@ -164,20 +169,19 @@ async function openShare(
  * Get the connection and additional data from the initial session if available.
  *
  * @param props Props of the editor component
- * @param props.fileId id of the file
+ * @param props.context of the document (i.e. type 'file' and id of the file)
  * @param props.relativePath Relative path to the file.
  * @param baseVersionEtag Etag from the last editing session.
  */
 async function openFile(
 	props: {
-		fileId: number
+		context: Context
 		relativePath: string
 	},
 	baseVersionEtag: string | undefined,
 ) {
 	return api.openContext({
-		type: 'file',
-		id: props.fileId,
+		...props.context,
 		filePath: props.relativePath,
 		baseVersionEtag,
 	})

src/createEditor.ts

@@ -5,6 +5,7 @@
 
 import type { EventHandler } from '@nextcloud/event-bus'
 import type { App } from 'vue'
+import type { Context } from './composables/useConnection.ts'
 import type { TextEditorEmbed } from './TextEditorEmbed.ts'
 
 import { createApp, reactive, shallowRef } from 'vue'
@@ -30,7 +31,7 @@ interface CollaborativeEditorOptions {
 	 * Element to render the editor to
 	 */
 	el: HTMLElement
-	fileId: number
+	context: Context
 	filePath?: string
 	shareToken?: string
 	content?: string
@@ -53,6 +54,8 @@ interface CollaborativeEditorOptions {
 	onAttachmentsUpdated?: (event: { attachmentSrcs: string[] }) => void
 }
 
+type DeprecatedCollaborativeEditorOptions = Omit<CollaborativeEditorOptions, 'context'> & { fileId: number }
+
 interface MarkdownContentEditorOptions {
 	/**
 	 * Element to render the editor to
@@ -81,15 +84,15 @@ interface MarkdownContentEditorOptions {
 	onAttachmentsUpdated?: (event: { attachmentSrcs: string[] }) => void
 }
 
-type EditorOptions = (CollaborativeEditorOptions & { useSession?: true })
+type EditorOptions = (DeprecatedCollaborativeEditorOptions & { useSession?: true })
 	| (MarkdownContentEditorOptions & { useSession?: false })
 
 /**
  * Type guard to choose which editor to create based on the options passed to createEditor
  *
  * @param options for the editor in question
  */
-function optionsForCollaboration(options: EditorOptions): options is CollaborativeEditorOptions {
+function optionsForCollaboration(options: EditorOptions): options is DeprecatedCollaborativeEditorOptions {
 	return Boolean(options.fileId) && (options.useSession ?? true)
 }
 
@@ -101,7 +104,10 @@ function optionsForCollaboration(options: EditorOptions): options is Collaborati
  */
 export async function createEditor(options: EditorOptions) {
 	if (optionsForCollaboration(options)) {
-		return createCollaborativeEditor(options)
+		return createCollaborativeEditor({
+			context: { type: 'file', id: options.fileId },
+			...options,
+		})
 	} else {
 		return createMarkdownContentEditor(options)
 	}
@@ -120,7 +126,7 @@ export async function createCollaborativeEditor(options: CollaborativeEditorOpti
 		{
 			...data,
 			active: true,
-			fileId: options.fileId,
+			context: options.context,
 			mime: 'text/markdown',
 			autofocus: options.autofocus ?? true,
 			noLazyImages: options.noLazyImages ?? false,

src/tests/services/SyncService.spec.ts

@@ -47,7 +47,7 @@ describe('Sync service', () => {
 		const setBaseVersionEtag = vi.fn()
 		const { connection, openConnection, openData } = provideConnection(
 			{
-				fileId: 123,
+				context: { type: 'file', id: 123 },
 				relativePath: './',
 			},
 			getBaseVersionEtag,

src/views/CollaborativeEditorApp.vue

@@ -6,7 +6,7 @@
 <template>
 	<EditorReloader
 		ref="editor-container"
-		:fileId
+		:context
 		:noLazyImages
 		:relativePath="filePath"
 		:shareToken
@@ -17,27 +17,20 @@
 		@create:content="(c: { markdown: string }) => emit('create:content', c)"
 		@update:content="(c: { markdown: string }) => emit('update:content', c)">
 		<template v-if="readonlyBarComponent" #readonlyBar>
-			<component :is="readonlyBarComponent" v-bind="readonlyBarProps" />
+			<component :is="readonlyBarComponent" v-bind="readonlyBarProps || {}" />
 		</template>
 	</EditorReloader>
 </template>
 
 <script setup lang='ts'>
 import type { ComponentInstance, ShallowRef } from 'vue'
+import type { Context } from '../composables/useConnection.ts'
 
 import { useTemplateRef } from 'vue'
 import EditorReloader from '../components/EditorReloader.vue'
 
-const {
-	fileId = undefined,
-	filePath = undefined,
-	autofocus = false,
-	noLazyImages = false,
-	readonlyBarComponent = undefined,
-	readonlyBarProps = {},
-	shareToken = undefined,
-} = defineProps<{
-	fileId?: number
+defineProps<{
+	context: Context
 	filePath?: string
 	autofocus?: boolean
 	noLazyImages?: boolean

src/views/DirectEditing.vue

@@ -8,7 +8,7 @@
 		<EditorReloader
 			ref="editor"
 			:initialSession
-			:fileId="initial.fileId"
+			:context
 			active
 			autofocus
 			:mime="initial.mimetype"
@@ -109,6 +109,13 @@ export default {
 					&& window.webkit.messageHandlers.DirectEditingMobileInterface)
 			)
 		},
+
+		context() {
+			return {
+				id: this.initial.fileId,
+				type: 'file',
+			}
+		},
 	},
 
 	beforeMount() {

src/views/RichWorkspace.vue

@@ -16,7 +16,7 @@
 			v-if="file"
 			v-show="ready"
 			:key="file.path"
-			:fileId="file.id"
+			:context="{id: file.id, type: 'file'}"
 			:relativePath="file.path"
 			:shareToken
 			:mime="file.mimetype"