feat(debug): Expose yjs debug function in editor API

Should make it easier to debug sync issues.

Signed-off-by: Jonas <[email protected]>

src/components/Editor.vue

@@ -350,6 +350,7 @@ export default {
 		subscribe('text:image-node:add', this.onAddImageNode)
 		subscribe('text:image-node:delete', this.onDeleteImageNode)
 		this.emit('update:loaded', true)
+		this.setupEditorDebug()
 	},
 	created() {
 		this.$ydoc = new Doc()
@@ -761,6 +762,54 @@ 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() {
+			const yjsData = {
+				fileId: this.fileId,
+				filePath: this.relativePath,
+				clientId: this.$ydoc.clientID,
+				pendingStructs: this.$ydoc.store.pendingStructs,
+				clientVectors: [],
+				documentState: this.$syncService.getDocumentState(),
+			}
+			for (const client of this.$ydoc.store.clients.values()) {
+				yjsData.clientVectors.push(client.at(-1).id)
+			}
+
+			return yjsData
+		},
+
 		outlineToggled(visible) {
 			this.emit('outline-toggled', visible)
 		},

src/editor.js

@@ -128,6 +128,18 @@ class TextEditorEmbed {
 		this.#getEditorComponent().$editor.commands.focus()
 	}
 
+	debugYjs() {
+		const yjsData = this.#getEditorComponent().debugYjsData()
+
+		const intro = 'Editor Yjs debug data. Copy the object below that starts with "clientId".'
+		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;'
+		console.warn(JSON.stringify(yjsData, null, ' '))
+		console.warn('%c%s\n%c%s\n%s', styleBold, intro, styleItalic, introChrome, introFirefox)
+	}
+
 	#registerDebug() {
 		if (window?._oc_debug) {
 			this.vm = this.#vm