Minimal yjs based collaboration

appinfo/routes.php

@@ -35,15 +35,13 @@
 		['name' => 'Attachment#getMediaFileMetadata', 'url' => '/mediaMetadata', 'verb' => 'GET'],
 
 		['name' => 'Session#create', 'url' => '/session/create', 'verb' => 'PUT'],
-		['name' => 'Session#fetch', 'url' => '/session/fetch', 'verb' => 'POST'],
 		['name' => 'Session#sync', 'url' => '/session/sync', 'verb' => 'POST'],
 		['name' => 'Session#push', 'url' => '/session/push', 'verb' => 'POST'],
 		['name' => 'Session#close', 'url' => '/session/close', 'verb' => 'POST'],
 		['name' => 'Session#mention', 'url' => '/session/mention', 'verb' => 'PUT'],
 
 		['name' => 'PublicSession#create', 'url' => '/public/session/create', 'verb' => 'PUT'],
 		['name' => 'PublicSession#updateSession', 'url' => '/public/session', 'verb' => 'POST'],
-		['name' => 'PublicSession#fetch', 'url' => '/public/session/fetch', 'verb' => 'POST'],
 		['name' => 'PublicSession#sync', 'url' => '/public/session/sync', 'verb' => 'POST'],
 		['name' => 'PublicSession#push', 'url' => '/public/session/push', 'verb' => 'POST'],
 

css/prosemirror.scss

@@ -22,7 +22,6 @@ div.ProseMirror {
 	&[contenteditable=false],
 	[contenteditable=true],
 	[contenteditable=false] {
-		border: none !important;
 		width: 100%;
 		background-color: transparent;
 		color: var(--color-main-text);
@@ -31,6 +30,10 @@ div.ProseMirror {
 		user-select: text;
 		font-size: 14px;
 
+		&:not(.collaboration-cursor__caret) {
+			border: none !important;
+		}
+
 		&:focus, &:focus-visible {
 			box-shadow: none !important;
 		}

cypress/e2e/SessionApi.spec.js

@@ -0,0 +1,278 @@
+/*
+ * @copyright Copyright (c) 2022 Max <max@nextcloud.com>
+ *
+ * @author Max <max@nextcloud.com>
+ *
+ * @license AGPL-3.0-or-later
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+
+import { randUser } from '../utils/index.js'
+
+const user = randUser()
+const messages = {
+	awareness: 'AQoBw9LM0gwAAnt9',
+	update: 'AAIKAAHYidydCwEEAQ==',
+	query: 'AAABAA==',
+	response: 'AAECAAA=',
+}
+
+describe('The session Api', function() {
+
+	before(function() {
+		cy.createUser(user)
+		window.OC = {
+			config: { modRewriteWorking: false },
+			webroot: '',
+		}
+	})
+
+	beforeEach(function() {
+		cy.login(user)
+		cy.prepareSessionApi()
+	})
+
+	describe('open the session', function() {
+		let fileId
+		let filePath
+
+		beforeEach(function() {
+			cy.uploadTestFile('test.md')
+				.then(id => {
+					fileId = id
+				})
+			cy.testName().then(name => {
+				filePath = `/${name}.md`
+			})
+		})
+
+		it('returns connection', function() {
+			cy.createTextSession(fileId).then(connection => {
+				cy.wrap(connection)
+					.its('document.id')
+					.should('equal', fileId)
+				connection.close()
+			})
+		})
+
+		it('provides initial content', function() {
+			cy.createTextSession(fileId, { filePath }).then(connection => {
+				cy.wrap(connection)
+					.its('state.documentSource')
+					.should('eql', '## Hello world\n')
+				connection.close()
+			})
+		})
+
+		it('handles invalid file id', function() {
+			cy.failToCreateTextSession(123)
+				.its('status')
+				.should('equal', 404)
+		})
+
+		it('handles missing file id', function() {
+			cy.failToCreateTextSession()
+				.its('status')
+				.should('equal', 412)
+		})
+
+	})
+
+	describe('step types', function() {
+		let connection
+
+		beforeEach(function() {
+			cy.uploadTestFile()
+				.then(cy.createTextSession)
+				.then(con => {
+					connection = con
+				})
+		})
+
+		afterEach(function() {
+			connection.close()
+		})
+
+		// Echoes all message types but queries
+		Object.entries(messages)
+			.filter(([key, _value]) => key !== 'query')
+			.forEach(([type, sample]) => {
+				it(`echos ${type} messages`, function() {
+					const steps = [sample]
+					const version = 0
+					cy.pushSteps({ connection, steps, version })
+						.its('version')
+						.should('eql', 1)
+					cy.syncSteps(connection)
+						.its('steps[0].data')
+						.should('eql', steps)
+				})
+			})
+
+		it('responds to queries', function() {
+			const version = 0
+			Object.entries(messages)
+				.forEach(([type, sample]) => {
+					cy.pushSteps({ connection, steps: [sample], version })
+				})
+			cy.pushSteps({ connection, steps: [messages.query], version })
+				.then(response => {
+					cy.wrap(response)
+						.its('version')
+						.should('eql', 0)
+					cy.wrap(response)
+						.its('steps.length')
+						.should('eql', 0)
+				})
+		})
+	})
+
+	describe('sync', function() {
+		const version = 0
+		let connection
+		let fileId
+		let filePath
+		let joining
+
+		beforeEach(function() {
+			cy.testName().then(name => {
+				filePath = `/${name}.md`
+			})
+			cy.uploadTestFile()
+				.then(id => {
+					fileId = id
+					return cy.createTextSession(fileId, { filePath })
+				})
+				.then(con => {
+					connection = con
+				})
+		})
+
+		it('starts empty', function() {
+			cy.syncSteps(connection)
+				.its('steps')
+				.should('eql', [])
+		})
+
+		it('saves', function() {
+			cy.pushSteps({ connection, steps: [messages.update], version })
+				.its('version')
+				.should('eql', 1)
+			cy.syncSteps(connection, { version: 1, autosaveContent: '# Heading 1', manualSave: true })
+			cy.downloadFile(filePath)
+				.its('data')
+				.should('eql', '# Heading 1')
+		})
+
+		it('saves yjs document state', function() {
+			const documentState = 'Base64 encoded string'
+			cy.pushSteps({ connection, steps: [messages.update], version })
+				.its('version')
+				.should('eql', 1)
+			cy.syncSteps(connection, {
+				version: 1,
+				autosaveContent: '# Heading 1',
+				documentState,
+				manualSave: true,
+			})
+			cy.createTextSession(fileId, { filePath })
+				.then(con => {
+					joining = con
+					return joining
+				})
+				.its('state.documentState')
+				.should('eql', documentState)
+				.then(() => joining.close())
+		})
+
+		afterEach(function() {
+			connection.close()
+		})
+	})
+
+	describe('public sync', function() {
+		const version = 0
+		let connection
+		let filePath
+		let shareToken
+		let joining
+
+		beforeEach(function() {
+			cy.testName().then(name => {
+				filePath = `/${name}.md`
+			})
+			cy.uploadTestFile()
+				.then(_id => {
+					return cy.shareFile(filePath, { edit: true })
+				})
+				.then(token => {
+					shareToken = token
+				})
+				.then(() => cy.logout())
+				.then(() => {
+					cy.prepareSessionApi()
+					return cy.createTextSession(undefined, { filePath: '', shareToken })
+						.then(con => {
+							connection = con
+						})
+				})
+		})
+
+		it('starts empty public', function() {
+			cy.syncSteps(connection)
+				.its('steps')
+				.should('eql', [])
+		})
+
+		it('saves public', function() {
+			cy.pushSteps({ connection, steps: [messages.update], version })
+				.its('version')
+				.should('eql', 1)
+			cy.syncSteps(connection, { version: 1, autosaveContent: '# Heading 1', manualSave: true })
+			cy.login(user)
+			cy.prepareSessionApi()
+			cy.downloadFile('saves.md')
+				.its('data')
+				.should('eql', '# Heading 1')
+		})
+
+		it('saves yjs document state public', function() {
+			const documentState = 'Base64 encoded string'
+			cy.pushSteps({ connection, steps: [messages.update], version })
+				.its('version')
+				.should('eql', 1)
+			cy.syncSteps(connection, {
+				version: 1,
+				autosaveContent: '# Heading 1',
+				documentState,
+				manualSave: true,
+			})
+			cy.createTextSession(undefined, { filePath: '', shareToken })
+				.then(con => {
+					joining = con
+					return con
+				})
+				.its('state.documentState')
+				.should('eql', documentState)
+				.then(() => joining.close())
+		})
+
+		afterEach(function() {
+			connection.close()
+		})
+	})
+
+})

cypress/e2e/sections.spec.js

@@ -108,7 +108,7 @@ describe('Content Sections', () => {
 				})
 			cy.then(() => {
 				cy.getContent()
-					.find('h1 [data-node-view-content] span')
+					.find('h1 [data-node-view-content]')
 					.click({ force: true, position: 'center' })
 					.then(() => {
 						cy.getActionEntry('headings')

cypress/e2e/sync.spec.js

@@ -0,0 +1,75 @@
+/**
+ * @copyright Copyright (c) 2023 Max <max@nextcloud.com>
+ *
+ * @author Max <max@nextcloud.com>
+ *
+ * @license AGPL-3.0-or-later
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+
+import { randUser } from '../utils/index.js'
+
+const user = randUser()
+
+describe('yjs document state', () => {
+	before(() => {
+		cy.createUser(user)
+	})
+
+	beforeEach(() => {
+		cy.login(user)
+		cy.uploadTestFile('test.md')
+		cy.visit('/apps/files')
+		cy.intercept({ method: 'POST', url: '**/apps/text/session/sync' }).as('sync')
+		cy.openTestFile()
+		cy.getContent().find('h2').should('contain', 'Hello world')
+		cy.wait('@sync', { timeout: 7000 })
+		cy.getContent().type('* Saving the doc saves the doc state{enter}')
+		cy.wait('@sync', { timeout: 7000 })
+	})
+
+	it('saves the actual file and document state', () => {
+		cy.getContent().type('{ctrl+s}')
+		cy.wait('@sync').its('request.body')
+			.should('have.property', 'autosaveContent')
+			.should('not.be.empty')
+		cy.closeFile()
+		cy.testName()
+			.then(name => cy.downloadFile(`/${name}.md`))
+			.its('data')
+			.should('include', 'saves the doc state')
+	})
+
+	it('passes the doc state from one session to the next', () => {
+		cy.getContent().type('{ctrl+s}')
+		cy.wait('@sync').its('request.body')
+			.should('have.property', 'documentState')
+			.should('not.be.empty')
+		cy.closeFile()
+		cy.intercept({ method: 'PUT', url: '**/apps/text/session/create' })
+			.as('create')
+		cy.openTestFile()
+		cy.wait('@create', { timeout: 10000 })
+			.its('response.body')
+			.should('have.property', 'documentState')
+			.should('not.be.empty')
+		cy.wait('@sync').its('request.body').should('have.property', 'version')
+		cy.getContent().find('h2').should('contain', 'Hello world')
+		cy.getContent().find('li').should('contain', 'Saving the doc saves the doc state')
+		cy.getContent().type('recovered')
+		cy.closeFile()
+	})
+})