diff --git a/src/components/Editor.vue b/src/components/Editor.vue index 4c59ba8ba7f..fc81550499e 100644 --- a/src/components/Editor.vue +++ b/src/components/Editor.vue @@ -343,6 +343,7 @@ export default { subscribe('text:image-node:delete', this.onDeleteImageNode) this.emit('update:loaded', true) subscribe('text:translate-modal:show', this.showTranslateModal) + this.setupEditorDebug() }, created() { this.$ydoc = new Doc() @@ -763,6 +764,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) }, diff --git a/src/editor.js b/src/editor.js index f60479277e4..7649201a84f 100644 --- a/src/editor.js +++ b/src/editor.js @@ -132,6 +132,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