fix(editor): Fix outline visibility

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

cypress/e2e/pages.spec.js

@@ -283,28 +283,40 @@ describe('Page', function() {
 		it('Allows to toggle persistent full-width view', function() {
 			cy.openPage('Day 2')
 			cy.get('#titleform').should('have.css', 'max-width', '100%')
-			cy.getReadOnlyEditor().invoke('outerWidth').should('eq', 670)
+			cy.getReadOnlyEditor()
+				.find('.editor__content')
+				.invoke('outerWidth')
+				.should('eq', 670)
 
 			// Set full width mode
 			cy.get('#titleform .action-item__menutoggle')
 				.click()
 			cy.contains('li.action', 'Full width')
 				.click()
 			cy.get('#titleform').should('have.css', 'max-width', 'none')
-			cy.getReadOnlyEditor().invoke('outerWidth').should('be.greaterThan', 700)
+			cy.getReadOnlyEditor()
+				.find('.editor__content')
+				.invoke('outerWidth')
+				.should('be.greaterThan', 700)
 
 			// Reload to check persistence with browser storage
 			cy.reload()
 			cy.get('#titleform').should('have.css', 'max-width', 'none')
-			cy.getReadOnlyEditor().invoke('outerWidth').should('be.greaterThan', 700)
+			cy.getReadOnlyEditor()
+				.find('.editor__content')
+				.invoke('outerWidth')
+				.should('be.greaterThan', 700)
 
 			// Unset full width mode
 			cy.get('#titleform .action-item__menutoggle')
 				.click()
 			cy.contains('li.action', 'Full width')
 				.click()
 			cy.get('#titleform').should('have.css', 'max-width', '100%')
-			cy.getReadOnlyEditor().invoke('outerWidth').should('eq', 670)
+			cy.getReadOnlyEditor()
+				.find('.editor__content')
+				.invoke('outerWidth')
+				.should('eq', 670)
 		})
 	})
 

src/css/editor.scss

@@ -12,6 +12,11 @@
 	max-width: var(--text-editor-max-width);
 	margin: auto;
 
+	&[data-collectives-el='editor'],
+	&[data-collectives-el='reader'] {
+		max-width: unset;
+	}
+
 	&.page-title {
 		max-width: 100%;
 		margin: 0 0 0 max(0px, calc(50% - (var(--text-editor-max-width) / 2)));
@@ -24,3 +29,11 @@
 		margin: auto;
 	}
 }
+
+/* TODO: remove once https://github.com/nextcloud/text/pull/4945 got released */
+.editor--outline {
+	border-radius: var(--border-radius-large);
+	box-shadow: 0 1px 10px var(--color-box-shadow);
+	background-color: var(--color-main-background);
+	z-index: 10021;
+}