⚡️ (#2323): inject SyncService instance

Vinicius Reis <vinicius.reis@nextcloud.com>

src/components/EditorWrapper.provider.js

@@ -1,6 +1,13 @@
 export const EDITOR = Symbol('tiptap:editor')
+export const SYNC_SERVICE = Symbol('sync:service')
+
 export const useEditorMixin = {
 	inject: {
 		$editor: { from: EDITOR, default: null },
 	},
 }
+export const useSyncServiceMixin = {
+	inject: {
+		$syncService: { from: SYNC_SERVICE, default: null },
+	},
+}

src/components/EditorWrapper.vue

@@ -46,7 +46,6 @@
 				@image-drop="onEditorDrop">
 				<MenuBar v-if="renderMenus"
 					ref="menubar"
-					:sync-service="$syncService"
 					:file-path="relativePath"
 					:file-id="fileId"
 					:is-rich-editor="isRichEditor"
@@ -62,7 +61,7 @@
 							{{ lastSavedStatus }}
 						</div>
 						<SessionList :sessions="filteredSessions">
-							<GuestNameDialog v-if="isPublic && currentSession.guestName" :sync-service="$syncService" />
+							<GuestNameDialog v-if="isPublic && currentSession.guestName" />
 						</SessionList>
 					</div>
 					<slot name="header" />
@@ -93,7 +92,7 @@ import escapeHtml from 'escape-html'
 import moment from '@nextcloud/moment'
 import { showError } from '@nextcloud/dialogs'
 
-import { EDITOR } from './EditorWrapper.provider'
+import { EDITOR, SYNC_SERVICE } from './EditorWrapper.provider'
 
 import { SyncService, ERROR_TYPE, IDLE_TIMEOUT } from './../services/SyncService'
 import { endpointUrl, getRandomGuestName } from './../helpers'
@@ -157,6 +156,12 @@ export default {
 			},
 		})
 
+		Object.defineProperty(val, SYNC_SERVICE, {
+			get: () => {
+				return this.$syncService
+			},
+		})
+
 		return val
 	},
 	props: {
@@ -200,8 +205,6 @@ export default {
 	data() {
 		return {
 			IDLE_TIMEOUT,
-			/** @type {SyncService} */
-			syncService: null,
 
 			document: null,
 			sessions: [],

src/components/GuestNameDialog.vue

@@ -35,6 +35,7 @@
 import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip'
 import Avatar from '@nextcloud/vue/dist/Components/Avatar'
 import { generateUrl } from '@nextcloud/router'
+import { useSyncServiceMixin } from './EditorWrapper.provider'
 
 export default {
 	name: 'GuestNameDialog',
@@ -44,12 +45,7 @@ export default {
 	directives: {
 		tooltip: Tooltip,
 	},
-	props: {
-		syncService: {
-			type: Object,
-			default: null,
-		},
-	},
+	mixins: [useSyncServiceMixin],
 	data() {
 		return {
 			guestName: '',
@@ -69,13 +65,13 @@ export default {
 		},
 	},
 	beforeMount() {
-		this.guestName = this.syncService.session.guestName
+		this.guestName = this.$syncService.session.guestName
 		this.updateBufferedGuestName()
 	},
 	methods: {
 		setGuestName() {
-			const previousGuestName = this.syncService.session.guestName
-			this.syncService.updateSession(this.guestName).then(() => {
+			const previousGuestName = this.$syncService.session.guestName
+			this.$syncService.updateSession(this.guestName).then(() => {
 				localStorage.setItem('nick', this.guestName)
 				this.updateBufferedGuestName()
 			}).catch((e) => {

src/components/MenuBar.vue

@@ -149,11 +149,6 @@ export default {
 		useEditorMixin,
 	],
 	props: {
-		syncService: {
-			type: Object,
-			required: false,
-			default: null,
-		},
 		isRichEditor: {
 			type: Boolean,
 			default: true,