From 25e1d42aae5dabfd7b81c6b7c0529d37b1edae00 Mon Sep 17 00:00:00 2001 From: Gordon Myers Date: Tue, 21 Jul 2026 22:24:49 -0500 Subject: [PATCH] feat: add per-user raw Markdown editing (#3570) Add an "Edit Markdown source" toggle that switches the current user into a detached plain-text editor showing the document's raw Markdown. Other collaborators are unaffected: the collaborative rich editor stays mounted and connected in the background, so the shared document never sees the plain-text schema. On return, the edited source is applied to the live document. If the document drifted in the meantime (concurrent edits from other users), the existing CollisionResolveDialog is reused so the user can keep their raw version or the remote one instead of silently clobbering either. - useRawEditing: enter/exit state machine with drift detection - RawMarkdownEditor: detached plain editor (no Collaboration extension) - RawEditingToggle: overflow-menu entry, gated to rich Markdown editing (hidden when rich_editing_enabled is off, i.e. the whole instance is raw) - suppress autosave while detached; warn on unload with unsaved raw edits - unit tests for the state machine and Cypress e2e covering the round-trip, discard, and both conflict-resolution branches Signed-off-by: Gordon Myers Co-Authored-By: Claude Opus 4.8 (1M context) --- cypress/e2e/RawEditing.spec.js | 99 ++++++++++++ src/components/CollaborativeEditor.vue | 85 +++++++++- src/components/Editor/RawMarkdownEditor.vue | 144 +++++++++++++++++ src/components/Menu/MenuBar.vue | 8 +- src/components/Menu/RawEditingToggle.vue | 32 ++++ src/composables/useRawEditing.ts | 169 ++++++++++++++++++++ src/tests/composables/useRawEditing.spec.ts | 121 ++++++++++++++ 7 files changed, 649 insertions(+), 9 deletions(-) create mode 100644 cypress/e2e/RawEditing.spec.js create mode 100644 src/components/Editor/RawMarkdownEditor.vue create mode 100644 src/components/Menu/RawEditingToggle.vue create mode 100644 src/composables/useRawEditing.ts create mode 100644 src/tests/composables/useRawEditing.spec.ts diff --git a/cypress/e2e/RawEditing.spec.js b/cypress/e2e/RawEditing.spec.js new file mode 100644 index 00000000000..1839d936811 --- /dev/null +++ b/cypress/e2e/RawEditing.spec.js @@ -0,0 +1,99 @@ +/** + * SPDX-FileCopyrightText: 2026 Nextcloud GmbH and Nextcloud contributors + * SPDX-License-Identifier: AGPL-3.0-or-later + */ + +import { randUser } from '../utils/index.js' + +const user = randUser() + +describe('Raw Markdown editing', function() { + before(function() { + cy.createUser(user) + }) + + beforeEach(function() { + cy.login(user) + cy.uploadTestFile() + cy.visit('/apps/files') + cy.openTestFile() + // Seed some rich content to round-trip. + cy.getContent().type('# Hello{enter}World') + cy.getContent().find('h1').should('contain.text', 'Hello') + }) + + const openRawEditor = function() { + cy.getActionEntry('remain').click() + cy.contains('Edit Markdown source').click() + return cy.get('[data-text-el="raw-markdown-editor"]').should('exist') + } + + const rawContent = function() { + return cy.get('[data-text-el="raw-markdown-editor"] .ProseMirror') + } + + it('shows the Markdown source when toggled on', function() { + openRawEditor() + rawContent().should('contain.text', '# Hello') + // The rich formatting toolbar is hidden while editing raw. + cy.get('div[data-text-el="menubar"] .text-menubar__entries').should('not.exist') + }) + + it('applies raw edits back into the rich editor', function() { + openRawEditor() + rawContent().type('{selectall}{del}## Changed heading{enter}{enter}body text') + cy.get('[data-cy="exitRawEditing"]').click() + cy.get('[data-text-el="raw-markdown-editor"]').should('not.exist') + cy.getContent().find('h2').should('contain.text', 'Changed heading') + cy.getContent().should('contain.text', 'body text') + cy.getContent().find('h1').should('not.exist') + }) + + it('discards raw edits when requested', function() { + openRawEditor() + rawContent().type('{selectall}{del}throwaway content') + cy.get('[data-cy="discardRawEditing"]').click() + cy.get('[data-text-el="raw-markdown-editor"]').should('not.exist') + cy.getContent().find('h1').should('contain.text', 'Hello') + cy.getContent().should('not.contain.text', 'throwaway content') + }) + + describe('concurrent changes', function() { + // Mimic a remote collaborator editing the live document while we are + // detached in raw mode by mutating the still-connected rich editor + // directly — the same effect a remote yjs update would have. + const simulateConcurrentEdit = function(text) { + return cy.window().then((win) => { + const component = [...win.OCA.Text.editorComponents].find((c) => c.rawEditing) + expect(component, 'component in raw editing mode').to.exist + component.editor.commands.insertContentAt(1, text) + }) + } + + const forkAndDiverge = function() { + openRawEditor() + simulateConcurrentEdit('CONCURRENT ') + rawContent().type('{selectall}{del}mine rewrite') + cy.get('[data-cy="exitRawEditing"]').click() + // Drift detected: the collision resolver is shown instead of + // silently overwriting the concurrent change. + cy.get('#resolve-conflicts', { timeout: 10000 }).should('exist') + } + + it('keeps the raw edits when choosing the local version', function() { + forkAndDiverge() + cy.get('[data-cy="useReaderVersion"]').click() + cy.get('#resolve-conflicts').should('not.exist') + cy.getContent().should('contain.text', 'mine rewrite') + cy.getContent().should('not.contain.text', 'CONCURRENT') + }) + + it('keeps the concurrent version when discarding the raw edits', function() { + forkAndDiverge() + cy.get('[data-cy="useEditorVersion"]').click() + cy.get('#resolve-conflicts').should('not.exist') + cy.getContent().should('contain.text', 'CONCURRENT') + cy.getContent().should('not.contain.text', 'mine rewrite') + }) + }) +}) diff --git a/src/components/CollaborativeEditor.vue b/src/components/CollaborativeEditor.vue index b4d9fcfbe21..35aeafbf035 100644 --- a/src/components/CollaborativeEditor.vue +++ b/src/components/CollaborativeEditor.vue @@ -15,7 +15,7 @@
+ + v-if="isRichEditor && contentLoaded && !isRichWorkspace && !rawEditing" /> import('./RichTextReader.vue')), PlainTextReader: defineAsyncComponent(() => import('./PlainTextReader.vue')), @@ -312,7 +319,7 @@ export default defineComponent({ provideEditorHeadings(editor) - const { setEditable, updateUser } = useEditorMethods(editor) + const { setContent, setEditable, updateUser } = useEditorMethods(editor) const serialize = isRichEditor ? () => createMarkdownSerializer(editor.schema).serialize(editor.state.doc) @@ -325,6 +332,24 @@ export default defineComponent({ ydoc, ) + // Per-user raw Markdown editing. Only meaningful when the rich editor is + // in use — when `rich_editing_enabled` is off the whole instance is + // already raw (isRichEditor === false), so the toggle stays hidden. + const canRawEdit = computed(() => isRichEditor && !isRichWorkspace && !isPublic) + const { + rawEditing, + rawInitialMarkdown, + rawMarkdown, + rawConflict, + resolveRawConflict, + } = provideRawEditing({ + serialize, + setContent, + setEditable, + save: () => saveService.save(), + canRawEdit, + }) + const syncProvider = shallowRef(null) const editorReady = new Promise((resolve) => { @@ -354,6 +379,11 @@ export default defineComponent({ language, lowlightLoaded, displayConnectionIssue, + rawEditing, + rawInitialMarkdown, + rawMarkdown, + rawConflict, + resolveRawConflict, saveService, serialize, setDirty, @@ -395,14 +425,32 @@ export default defineComponent({ hasSyncCollision() { return ( - Boolean(this.indexedDbConflictContent) + Boolean(this.rawConflict) + || Boolean(this.indexedDbConflictContent) || (this.syncError && this.syncError.type === ERROR_TYPE.SAVE_COLLISION) ) }, otherVersion() { - return this.indexedDbConflictContent || this.syncError.data.outsideChange + // For a raw-editing conflict the editor still holds the live + // (remote) document, and `rawConflict` holds the user's raw edits — + // so it maps to the "local" reader source in CollisionResolveDialog. + return ( + this.rawConflict + || this.indexedDbConflictContent + || this.syncError.data.outsideChange + ) + }, + + conflictReaderSource() { + return this.rawConflict || this.indexedDbConflictContent + ? 'local' + : 'server' + }, + + rawUnsaved() { + return this.rawEditing && this.rawMarkdown !== this.rawInitialMarkdown }, hasDocumentParameters() { @@ -468,6 +516,14 @@ export default defineComponent({ } }, + rawUnsaved(val) { + if (val) { + window.addEventListener('beforeunload', this.warnBeforeUnload) + } else { + window.removeEventListener('beforeunload', this.warnBeforeUnload) + } + }, + displayConnectionIssue(val) { if (val) { this.$emit('syncService:error') @@ -547,6 +603,7 @@ export default defineComponent({ window.removeEventListener('afterprint', this.preparePrinting) } unsubscribe('text:keyboard:save', this.onKeyboardSave) + window.removeEventListener('beforeunload', this.warnBeforeUnload) const timeout = new Promise((resolve) => setTimeout(resolve, 2000)) await Promise.any([timeout, this.saveWhenDirty()]) await this.close() @@ -763,7 +820,11 @@ export default defineComponent({ // ignore initial loading and other automated changes before first user change if (this.editor.can().undo() || this.editor.can().redo()) { this.setDirty(state.dirty) - this.saveService.autosave() + // While raw editing, the rich editor is detached and only + // absorbs remote changes — never autosave/push from it. + if (!this.rawEditing) { + this.saveService.autosave() + } } } else { this.setDirty(state.dirty) @@ -923,6 +984,13 @@ export default defineComponent({ this.saveService.saveViaSendBeacon() }, + warnBeforeUnload(event) { + // Raw edits live in a detached buffer that cannot be flushed safely + // on unload, so prompt the user instead of losing them silently. + event.preventDefault() + event.returnValue = '' + }, + checkIndexedDbConflict() { // Only check if we're not already showing a conflict (e.g. when server API reported one) if (this.hasSyncCollision) { @@ -947,6 +1015,7 @@ export default defineComponent({ resolved() { localStorage.removeItem(this.indexedDbConflictKey) this.indexedDbConflictContent = '' + this.resolveRawConflict() }, }, }) diff --git a/src/components/Editor/RawMarkdownEditor.vue b/src/components/Editor/RawMarkdownEditor.vue new file mode 100644 index 00000000000..35cbfde702f --- /dev/null +++ b/src/components/Editor/RawMarkdownEditor.vue @@ -0,0 +1,144 @@ + + + + + + + diff --git a/src/components/Menu/MenuBar.vue b/src/components/Menu/MenuBar.vue index 7aebf7be5f1..f95382b5616 100644 --- a/src/components/Menu/MenuBar.vue +++ b/src/components/Menu/MenuBar.vue @@ -19,7 +19,7 @@