diff --git a/src/components/Editor.vue b/src/components/Editor.vue index df0eae7fe2a..1cd17602fa9 100644 --- a/src/components/Editor.vue +++ b/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) diff --git a/src/helpers/debug.js b/src/helpers/debug.js new file mode 100644 index 00000000000..f4d973edb94 --- /dev/null +++ b/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) +}