fix: various issues with conflict display

* only import prosemirror css once.
* disconnect after receiving a 409 response in polling backend.
* clean up remains of `RichtextOptions`.
* use the `isRichEditor` prop in Reader.
* add cypress test for conflict display.

Signed-off-by: Max <[email protected]>

cypress/e2e/conflict.spec.js

@@ -0,0 +1,58 @@
+/**
+ * @copyright Copyright (c) 2019 John Molakvoæ <[email protected]>
+ *
+ * @author John Molakvoæ <[email protected]>
+ *
+ * @license GNU AGPL version 3 or any later version
+ *
+ * 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 { randHash } from '../utils/'
+const randUser = randHash()
+
+describe('Open test.md in viewer', function() {
+	before(function() {
+		// Init user
+		cy.nextcloudCreateUser(randUser, 'password')
+		cy.login(randUser, 'password')
+
+		// Upload test files
+		cy.uploadFile('test.md', 'text/markdown')
+	})
+
+	beforeEach(function() {
+		cy.login(randUser, 'password')
+	})
+
+	it('displays conflicts', function() {
+		cy.openFile('test.md')
+
+		cy.log('Inspect editor')
+		const viewer = cy.get('#viewer')
+		const editor = viewer.get('#editor .ProseMirror')
+		editor.type('Hello you cruel conflicting world')
+		cy.uploadFile('test.md', 'text/markdown')
+
+		cy.get('#viewer .modal-header button.header-close').click()
+		cy.get('#viewer').should('not.exist')
+		cy.openFile('test.md')
+		cy.get('#editor-container .document-status .icon-error')
+		const wrapper = cy.get('#editor-wrapper.has-conflicts.is-rich-editor ')
+		wrapper.get('#read-only-editor h2').should('contain', 'Hello world')
+		wrapper.get('#editor h2').should('contain', 'Hello world')
+		cy.screenshot()
+	})
+})

src/components/EditorWrapper.vue

@@ -77,7 +77,6 @@
 			</EditorMidiaHandler>
 			<Reader v-if="hasSyncCollission"
 				:content="syncError.data.outsideChange"
-				:rich-text-options="richTextOptions"
 				:is-rich-editor="isRichEditor" />
 		</div>
 
@@ -563,7 +562,6 @@ export default {
 							}),
 						],
 						enableRichEditing: this.isRichEditor,
-						...this.richTextOptions,
 					})
 					this.$editor.on('focus', () => {
 						this.$emit('focus')

src/components/Reader.vue

@@ -21,7 +21,7 @@
   -->
 
 <template>
-	<RichTextReader v-if="isRichText"
+	<RichTextReader v-if="isRichEditor"
 		:content="content" />
 	<PlainTextReader v-else
 		:content="content" />
@@ -65,6 +65,3 @@ export default {
 	}
 
 </style>
-<style lang="scss">
-	@import './../../css/prosemirror';
-</style>

src/components/RichTextReader.vue

@@ -55,7 +55,3 @@ export default {
 
 }
 </script>
-
-<style lang="scss">
-	@import './../../css/prosemirror';
-</style>

src/services/PollingBackend.js

@@ -190,6 +190,7 @@ class PollingBackend {
 					outsideChange: e.response.data.outsideChange,
 				},
 			})
+			this.disconnect()
 		} else if (e.response.status === 403) {
 			this._authority.emit('error', { type: ERROR_TYPE.SOURCE_NOT_FOUND, data: {} })
 			this.disconnect()