diff --git a/src/components/Editor.vue b/src/components/Editor.vue index 8392adb9891..a22e1c58e92 100644 --- a/src/components/Editor.vue +++ b/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) }, diff --git a/src/editor.js b/src/editor.js index 885455a2a3c..d06264e05cc 100644 --- a/src/editor.js +++ b/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