Fix: Multiple elements with the same html id

Remove IDs on elements which might be present multiple times in the DOM.
This might happen because they are used in the rich workspace but also
in the editor viewer.
Replaced the ID usage with the class name.

Signed-off-by: Ferdinand Thiessen <[email protected]>

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)
 			}
 		},
 	},