Merge pull request #2920 from nextcloud/2904-table-of-contents-add-button-to-close-outline-from-itself

Able to show outiline in readonly mode

Author: mejo-

css/print.scss

@@ -1,7 +1,7 @@
 @media print {
 	@page {
 		size: A4;
-		margin: 2.5cm 2cm 2cm 2.5cm; 
+		margin: 2.5cm 2cm 2cm 2.5cm;
 	}
 
 	body {
@@ -81,4 +81,24 @@
 			}
 		}
 	}
-}
+
+	.menubar-placeholder, .text-editor--readonly-bar {
+		display: none;
+	}
+
+	.text-editor__content-wrapper {
+		&.--show-outline {
+			display: block;
+		}
+
+		.editor--outline {
+			width: auto;
+			height: auto;
+			overflow: unset;
+			position: relative;
+		}
+		.editor--outline__btn-close {
+			display: none;
+		}
+	}
+}

css/prosemirror.scss

@@ -88,6 +88,12 @@ div.ProseMirror {
 		margin-top: 10px;
 	}
 
+	> h1,h2,h3,h4,h5,h6 {
+		&:first-child {
+			margin-top: 0;
+		}
+	}
+
 	a {
 		color: var(--color-primary-element);
 		text-decoration: underline;

cypress/e2e/share.spec.js

@@ -55,6 +55,14 @@ describe('Open test.md in viewer', function() {
 				cy.getContent()
 					.should('contain', 'Hello world')
 					.find('h2').should('contain', 'Hello world')
+
+				cy.get('.text-editor--readonly-bar')
+					.getActionEntry('outline')
+					.click()
+
+				cy.getOutline()
+					.find('header')
+					.should('exist')
 			})
 	})