Fix(debug): remove component in beforeDestroy hook

* Use a set so components can only be in there once.
* Debug data can be written even if syncService is undefined.

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

src/components/Editor.vue

@@ -101,7 +101,7 @@ import { extensionHighlight } from '../helpers/mappings.js'
 import { createEditor, serializePlainText, loadSyntaxHighlight } from './../EditorFactory.js'
 import { createMarkdownSerializer } from './../extensions/Markdown.js'
 import markdownit from './../markdownit/index.js'
-
+import { exposeForDebugging, removeFromDebugging } from '../helpers/debug.js'
 import { CollaborationCursor } from '../extensions/index.js'
 import DocumentStatus from './Editor/DocumentStatus.vue'
 import isMobile from './../mixins/isMobile.js'
@@ -338,7 +338,7 @@ export default {
 		subscribe('text:image-node:delete', this.onDeleteImageNode)
 		this.emit('update:loaded', true)
 		subscribe('text:translate-modal:show', this.showTranslateModal)
-		this.setupEditorDebug()
+		exposeForDebugging(this)
 	},
 	created() {
 		this.$ydoc = new Doc()
@@ -365,7 +365,8 @@ export default {
 			const timeout = new Promise((resolve) => setTimeout(resolve, 2000))
 			await Promise.any([timeout, this.$syncService.save()])
 		}
-		this.close()
+		await this.close()
+		removeFromDebugging(this)
 	},
 	methods: {
 		initSession() {
@@ -750,46 +751,17 @@ export default {
 			console.debug(editor.getHTML())
 		},
 
-		/**
-		 * Setup OCA.Text.debugYjs() and expose editor component in OCA.Text.editorComponents
-		 */
-		setupEditorDebug() {
-			if (!window.OCA.Text) {
-				window.OCA.Text = {}
-			}
-			if (!window.OCA.Text.editorComponents) {
-				window.OCA.Text.editorComponents = []
-			}
-			window.OCA.Text.editorComponents.push(this)
-
-			if (!window.OCA.Text.debugYjs) {
-				window.OCA.Text.debugYjs = () => {
-					const intro = 'Editor Yjs debug data. Copy the objects above that start with "fileId".'
-					const introChrome = '- In Chrome, select "Copy" at the end of the line.'
-					const introFirefox = '- In Firefox, right-click on the object and select "Copy object".'
-					const styleBold = 'font-weight: bold;'
-					const styleItalic = 'font-weight: normal; font-style: italic;'
-
-					for (const editorComponent of window.OCA.Text.editorComponents) {
-						console.warn(JSON.stringify(editorComponent.debugYjsData(), null, ' '))
-					}
-
-					console.warn('%c%s\n%c%s\n%s', styleBold, intro, styleItalic, introChrome, introFirefox)
-				}
-			}
-		},
-
 		/**
 		 * Helper method to debug yjs issues
 		 */
-		debugYjsData() {
+		debugData() {
 			const yjsData = {
 				fileId: this.fileId,
 				filePath: this.relativePath,
 				clientId: this.$ydoc.clientID,
 				pendingStructs: this.$ydoc.store.pendingStructs,
 				clientVectors: [],
-				documentState: this.$syncService.getDocumentState(),
+				documentState: this.$syncService?.getDocumentState(),
 			}
 			for (const client of this.$ydoc.store.clients.values()) {
 				yjsData.clientVectors.push(client.at(-1).id)

src/helpers/debug.js

@@ -0,0 +1,52 @@
+/**
+ * SPDX-FileCopyrightText: 2022 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+/**
+ * Setup OCA.Text.debugYjs() and expose editor component in OCA.Text.editorComponents
+ */
+
+if (!window.OCA.Text) {
+	window.OCA.Text = {}
+}
+
+const editorComponents = window.OCA.Text.editorComponents ?? new Set()
+window.OCA.Text.editorComponents = editorComponents
+
+/**
+ * Print debug info for all editor components as a warning.
+ */
+export function debugYjs() {
+	const intro = 'Editor Yjs debug data. Copy the objects above that start with "fileId".'
+	const introChrome = '- In Chrome, select "Copy" at the end of the line.'
+	const introFirefox = '- In Firefox, right-click on the object and select "Copy object".'
+	const styleBold = 'font-weight: bold;'
+	const styleItalic = 'font-weight: normal; font-style: italic;'
+
+	for (const editorComponent of editorComponents.values()) {
+		console.warn(JSON.stringify(editorComponent.debugData(), null, ' '))
+	}
+
+	console.warn('%c%s\n%c%s\n%s', styleBold, intro, styleItalic, introChrome, introFirefox)
+}
+
+if (!window.OCA.Text.debugYjs) {
+	window.OCA.Text.debugYjs = debugYjs
+}
+
+/**
+ * Expose editor component in OCA.Text.editorComponents
+ * @param {object} component - the editor component to include in debug output
+ */
+export function exposeForDebugging(component) {
+	editorComponents.add(component)
+}
+
+/**
+ * Drop editor component from OCA.Text.editorComponents
+ * @param {object} component - the editor component to remove from debug output
+ */
+export function removeFromDebugging(component) {
+	editorComponents.delete(component)
+}