fix(sync): push local changes on reconnect

.github/workflows/cypress-component.yml

@@ -0,0 +1,56 @@
+name: Cypress Component Tests
+
+on: pull_request
+
+env:
+  # Adjust APP_NAME if your repository name is different
+  APP_NAME: ${{ github.event.repository.name }}
+
+  # This represents the server branch to checkout.
+  # Usually it's the base branch of the PR, but for pushes it's the branch itself.
+  # e.g. 'main', 'stable27' or 'feature/my-feature
+  # n.b. server will use head_ref, as we want to test the PR branch.
+  BRANCH: ${{ github.base_ref || github.ref_name }}
+
+jobs:
+  cypress-component:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout app
+        uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 # v4.1.1
+
+      - name: Read package.json node and npm engines version
+        uses: skjnldsv/read-package-engines-version-actions@8205673bab74a63eb9b8093402fd9e0e018663a1 # v2.2
+        id: versions
+        with:
+          fallbackNode: "^20"
+          fallbackNpm: "^9"
+
+      - name: Set up node ${{ steps.versions.outputs.nodeVersion }}
+        uses: actions/setup-node@8f152de45cc393bb48ce5d89d36b731f54556e65 # v4.0.0
+        with:
+          node-version: ${{ steps.versions.outputs.nodeVersion }}
+
+      - name: Set up npm ${{ steps.versions.outputs.npmVersion }}
+        run: npm i -g npm@"${{ steps.versions.outputs.npmVersion }}"
+
+      - name: Install node dependencies
+        run: |
+          npm ci
+
+      - name: Cypress component tests
+        uses: cypress-io/github-action@ebe8b24c4428922d0f793a5c4c96853a633180e3 # v6.6.0
+        with:
+          component: true
+        env:
+          # Needs to be prefixed with CYPRESS_
+          CYPRESS_BRANCH: ${{ env.BRANCH }}
+          # https://github.com/cypress-io/github-action/issues/124
+          COMMIT_INFO_MESSAGE: ${{ github.event.pull_request.title }}
+          # Needed for some specific code workarounds
+          TESTING: true
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          CYPRESS_BUILD_ID: ${{ github.sha }}-${{ github.run_number }}
+          CYPRESS_GROUP: Run component
+          npm_package_name: ${{ env.APP_NAME }}

cypress.config.js

@@ -2,15 +2,6 @@ const { defineConfig } = require('cypress')
 const cypressSplit = require('cypress-split')
 const getCompareSnapshotsPlugin = require('cypress-visual-regression/dist/plugin.js')
 
-module.exports = defineConfig({
-	e2e: {
-		setupNodeEvents(on, config) {
-			// IMPORTANT: return the config object
-			return config
-		},
-	},
-})
-
 module.exports = defineConfig({
 	projectId: 'hx9gqy',
 	viewportWidth: 1280,
@@ -43,6 +34,12 @@ module.exports = defineConfig({
 		baseUrl: 'http://localhost:8081/index.php/',
 		specPattern: 'cypress/e2e/**/*.{js,jsx,ts,tsx}',
 	},
+	component: {
+		devServer: {
+			framework: "vue",
+			bundler: "webpack",
+		},
+	},
 	retries: {
 		runMode: 2,
 		// do not retry in `cypress open`

cypress/component/helpers/yjs.cy.js

@@ -0,0 +1,77 @@
+/*
+ * @copyright Copyright (c) 2023 Jonas <[email protected]>
+ *
+ * @author Jonas <[email protected]>
+ *
+ * @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 * as Y from 'yjs'
+import { getDocumentState, getUpdateMessage, applyUpdateMessage } from '../../../src/helpers/yjs.js'
+
+describe('Yjs base64 wrapped with our helpers', function() {
+	it('applies step in wrong order', function() {
+		const source = new Y.Doc()
+		const target = new Y.Doc()
+		const sourceMap = source.getMap()
+		const targetMap = target.getMap()
+
+		target.on('afterTransaction', (tr, doc) => {
+			// console.log('afterTransaction', tr)
+		})
+
+		const state0 = getDocumentState(source)
+
+		// Add keyA to source and apply to target
+		sourceMap.set('keyA', 'valueA')
+
+		const stateA = getDocumentState(source)
+		const update0A = getUpdateMessage(source, state0)
+		applyUpdateMessage(target, update0A)
+		expect(targetMap.get('keyA')).to.be.eq('valueA')
+
+		// Add keyB to source, don't apply to target yet
+		sourceMap.set('keyB', 'valueB')
+		const stateB = getDocumentState(source)
+		const updateAB = getUpdateMessage(source, stateA)
+
+		// Add keyC to source, apply to target
+		sourceMap.set('keyC', 'valueC')
+		const updateBC = getUpdateMessage(source, stateB)
+		applyUpdateMessage(target, updateBC)
+		expect(targetMap.get('keyB')).to.be.eq(undefined)
+		expect(targetMap.get('keyC')).to.be.eq(undefined)
+
+		// Apply keyB to target
+		applyUpdateMessage(target, updateAB)
+		expect(targetMap.get('keyB')).to.be.eq('valueB')
+		expect(targetMap.get('keyC')).to.be.eq('valueC')
+	})
+
+	it('update message is empty if no additional state exists', function() {
+		const source = new Y.Doc()
+		const sourceMap = source.getMap()
+		const state0 = getDocumentState(source)
+		sourceMap.set('keyA', 'valueA')
+		const stateA = getDocumentState(source)
+		const update0A = getUpdateMessage(source, state0)
+		const updateAA = getUpdateMessage(source, stateA)
+		expect(update0A.length).to.be.eq(29)
+		expect(updateAA).to.be.eq(undefined)
+	})
+
+})

cypress/support/component-index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <title>Components App</title>
+  </head>
+  <body>
+    <div data-cy-root></div>
+  </body>
+</html>

cypress/support/component.js

@@ -0,0 +1,27 @@
+// ***********************************************************
+// This example support/component.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands.js'
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')
+
+import { mount } from 'cypress/vue2'
+
+Cypress.Commands.add('mount', mount)
+
+// Example use:
+// cy.mount(MyComponent)

lib/Service/DocumentService.php

@@ -420,7 +420,9 @@ public function resetDocument(int $documentId, bool $force = false): void {
 			$this->sessionMapper->deleteByDocumentId($documentId);
 			$this->documentMapper->delete($document);
 
-			$this->getStateFile($documentId)->delete();
+			if ($force) {
+				$this->getStateFile($documentId)->delete();
+			}
 			$this->logger->debug('document reset for ' . $documentId);
 		} catch (DoesNotExistException|NotFoundException $e) {
 			// Ignore if document not found or state file not found

package.json

@@ -108,6 +108,7 @@
     "vue-click-outside": "^1.1.0",
     "vue-material-design-icons": "^5.2.0",
     "vuex": "^3.6.2",
+    "y-protocols": "^1.0.6",
     "y-websocket": "^1.5.1",
     "yjs": "^13.6.10"
   },

src/components/Editor.vue

@@ -103,7 +103,7 @@ import {
 import ReadonlyBar from './Menu/ReadonlyBar.vue'
 
 import { logger } from '../helpers/logger.js'
-import { getDocumentState, applyDocumentState } from '../helpers/yjs.js'
+import { getDocumentState, applyDocumentState, getUpdateMessage } from '../helpers/yjs.js'
 import { SyncService, ERROR_TYPE, IDLE_TIMEOUT } from './../services/SyncService.js'
 import createSyncServiceProvider from './../services/SyncServiceProvider.js'
 import AttachmentResolver from './../services/AttachmentResolver.js'
@@ -487,6 +487,12 @@ export default {
 		onLoaded({ documentSource, documentState }) {
 			if (documentState) {
 				applyDocumentState(this.$ydoc, documentState, this.$providers[0])
+				// distribute additional state that may exist locally
+				const updateMessage = getUpdateMessage(this.$ydoc, documentState)
+				if (updateMessage) {
+					logger.debug('onLoaded: Pushing local changes to server')
+					this.$queue.push(updateMessage)
+				}
 			}
 
 			this.hasConnectionIssue = false