Fix: Multiple elements with the same html id

css/style.scss

@@ -4,7 +4,7 @@
 	--text-editor-max-width: 670px
 }
 
-.modal-container #editor-container {
+.modal-container .text-editor {
   position: absolute;
 }
 
@@ -31,7 +31,7 @@ li.ProseMirror-selectednode:after {
 }
 
 .has-conflicts,
-#editor-wrapper.icon-loading {
+.text-editor__wrapper.icon-loading {
   .ProseMirror-menubar {
     display: none;
   }

cypress/e2e/attachments.spec.js

@@ -83,7 +83,7 @@ const checkAttachment = (documentId, fileName, fileId, index, isImage = true) =>
 
 	cy.log('Check the attachment is visible and well formed', documentId, fileName, fileId, index, encodedName)
 	return new Cypress.Promise((resolve, reject) => {
-		cy.get(`#editor [data-component="image-view"][data-src="${src}"]`)
+		cy.get(`.text-editor__main [data-component="image-view"][data-src="${src}"]`)
 			.find('.image__view') // wait for load finish
 			.within(($el) => {
 				// keep track that we have created this attachment in the attachment dir

cypress/e2e/conflict.spec.js

@@ -26,7 +26,7 @@ const randUser = randHash()
 const fileName = 'test.md'
 
 describe('Open test.md in viewer', function() {
-	const getWrapper = () => cy.get('#editor-wrapper.has-conflicts.is-rich-editor')
+	const getWrapper = () => cy.get('.text-editor__wrapper.has-conflicts.is-rich-editor')
 
 	before(() => {
 		initUserAndFiles(randUser, fileName)
@@ -47,12 +47,12 @@ describe('Open test.md in viewer', function() {
 		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')
+		cy.get('.text-editor .document-status .icon-error')
 		getWrapper()
 			.get('#read-only-editor h2')
 			.should('contain', 'Hello world')
 		getWrapper()
-			.get('#editor h2')
+			.get('.text-editor__main h2')
 			.should('contain', 'Hello world')
 		cy.screenshot()
 	})

src/components/Editor.vue

@@ -21,7 +21,7 @@
   -->
 
 <template>
-	<div id="editor-container" data-text-el="editor-container" class="text-editor">
+	<div data-text-el="editor-container" class="text-editor">
 		<DocumentStatus v-if="displayed"
 			:idle="idle"
 			:lock="lock"

src/components/Editor/MainContainer.vue

@@ -21,8 +21,7 @@
   -->
 
 <template>
-	<MediaHandler id="editor"
-		class="text-editor__main">
+	<MediaHandler class="text-editor__main">
 		<slot />
 	</MediaHandler>
 </template>

src/components/Editor/Wrapper.vue

@@ -21,8 +21,7 @@
   -->
 
 <template>
-	<div id="editor-wrapper"
-		class="text-editor__wrapper"
+	<div class="text-editor__wrapper"
 		:class="{
 			'has-conflicts': hasSyncCollission,
 			'icon-loading': !contentLoaded && !hasConnectionIssue,

src/views/RichWorkspace.vue

@@ -100,7 +100,7 @@ export default {
 		},
 		focus(newValue) {
 			if (!newValue) {
-				document.querySelector('#editor').scrollTo(0, 0)
+				document.querySelector('#rich-workspace .text-editor__main').scrollTo(0, 0)
 			}
 		},
 	},