Outline view

css/prosemirror.scss

@@ -2,7 +2,6 @@
 
 /* Document rendering styles */
 div.ProseMirror {
-	margin-top: 44px;
 	height: 100%;
 	position: relative;
 	word-wrap: break-word;

css/style.scss

@@ -61,6 +61,14 @@ li.ProseMirror-selectednode:after {
 	animation: rotate var(--animation-duration, 0.8s) linear infinite;
 }
 
+[data-handler="text"] {
+  background-color: var(--color-main-background);
+  border-top: 3px solid var(--color-primary-element);
+  .modal-title {
+    font-weight: bold;
+  }
+}
+
 // from https://github.com/animate-css/animate.css/blob/main/source/fading_entrances/fadeInDown.css
 @keyframes fadeInDown {
   from {
@@ -74,10 +82,20 @@ li.ProseMirror-selectednode:after {
   }
 }
 
-[data-handler="text"] {
-  background-color: var(--color-main-background);
-  border-top: 3px solid var(--color-primary-element);
-  .modal-title {
-    font-weight: bold;
+
+// from https://github.com/animate-css/animate.css/blob/main/source/fading_entrances/fadeInLeft.css
+@keyframes fadeInLeft {
+  from {
+    opacity: 0;
+    transform: translate3d(-100%, 0, 0);
   }
+
+  to {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+.fadeInLeft {
+  animation-name: fadeInLeft;
 }

cypress/e2e/outline.spec.js

@@ -0,0 +1,74 @@
+import { randHash } from '../utils/index.js'
+
+const currentUser = randHash()
+
+const refresh = () => cy.get('.files-controls .crumb:not(.hidden) a')
+	.last()
+	.click({ force: true })
+
+const clickOutline = () => {
+	cy.getActionEntry('headings')
+		.click()
+
+	cy.get('.popover.open').getActionEntry('outline')
+		.click()
+}
+
+const createMarkdown = (fileName, content) => {
+	return cy.createFile(fileName, content, 'text/markdown')
+		.then(refresh)
+}
+
+describe('Table of Contents', () => {
+	before(() => {
+		// Init user
+		cy.nextcloudCreateUser(currentUser, 'password')
+		cy.login(currentUser, 'password')
+	})
+
+	beforeEach(() => {
+		cy.login(currentUser, 'password')
+	})
+
+	it('sidebar toc', () => {
+		const fileName = 'toc.md'
+
+		createMarkdown(fileName, '# T1 \n ## T2 \n ### T3 \n #### T4 \n ##### T5 \n ###### T6')
+			.then(refresh)
+			.then(() => cy.openFile(fileName, { force: true }))
+			.then(clickOutline)
+
+		cy.getOutline()
+			.find('header')
+			.should('exist')
+
+		cy.getTOC()
+			.find('ul li')
+			.should('have.length', 6)
+		cy.getTOC()
+			.find('ul li')
+			.each((el, index) => {
+				cy.wrap(el)
+					.should('have.attr', 'data-toc-level')
+					.and('equal', String(index + 1))
+
+				cy.wrap(el)
+					.find('a')
+					.should('have.attr', 'href')
+					.and('equal', `#t${index + 1}`)
+			})
+	})
+
+	it('empty toc', () => {
+		const fileName = 'empty.md'
+
+		createMarkdown(fileName, '')
+			.then(refresh)
+			.then(() => cy.openFile(fileName, { force: true }))
+			.then(clickOutline)
+
+		cy.getOutline()
+			.find('ul')
+			.should('be.empty')
+	})
+})

cypress/support/commands.js

@@ -248,6 +248,14 @@ Cypress.Commands.add('getContent', () => {
 	return cy.getEditor().find('.ProseMirror')
 })
 
+Cypress.Commands.add('getOutline', () => {
+	return cy.getEditor().find('[data-text-el="editor-outline"]')
+})
+
+Cypress.Commands.add('getTOC', () => {
+	return cy.getEditor().find('[data-text-el="editor-table-of-contents"]')
+})
+
 Cypress.Commands.add('clearContent', () => {
 	return cy.getContent()
 		.type('{selectall}')

js/text-files.js.LICENSE.txt

@@ -42,6 +42,28 @@
  *
  */
 
+/*
+ * @copyright Copyright (c) 2020 Julius Härtl <[email protected]>
+ *
+ * @author Julius Härtl <[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/>.
+ *
+ */
+
 /*
 object-assign
 (c) Sindre Sorhus

js/text-public.js.LICENSE.txt

@@ -20,6 +20,28 @@
  *
  */
 
+/*
+ * @copyright Copyright (c) 2020 Julius Härtl <[email protected]>
+ *
+ * @author Julius Härtl <[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/>.
+ *
+ */
+
 /*
 object-assign
 (c) Sindre Sorhus

js/text-text.js.LICENSE.txt

@@ -1,3 +1,25 @@
+/*
+ * @copyright Copyright (c) 2020 Julius Härtl <[email protected]>
+ *
+ * @author Julius Härtl <[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/>.
+ *
+ */
+
 /*
 object-assign
 (c) Sindre Sorhus

package.json

@@ -93,6 +93,7 @@
     "prosemirror-view": "^1.26.5",
     "proxy-polyfill": "^0.3.2",
     "tippy.js": "^6.3.7",
+    "uuid": "^8.3.2",
     "vue": "^2.7.8",
     "vue-click-outside": "^1.1.0",
     "vue-material-design-icons": "^5.1.1",
@@ -110,6 +111,7 @@
     "@nextcloud/eslint-config": "^8.0.0",
     "@nextcloud/stylelint-config": "^2.1.2",
     "@nextcloud/webpack-vue-config": "^5.2.1",
+    "@vitejs/plugin-vue2": "^1.1.2",
     "@vue/test-utils": "^1.3.0",
     "@vue/vue2-jest": "^28.0.1",
     "cypress": "^10.3.0",
@@ -125,7 +127,6 @@
     "mitt": "^3.0.0",
     "vite": "^3.0.2",
     "vite-plugin-commonjs": "^0.5.0",
-    "@vitejs/plugin-vue2": "^1.1.2",
     "vue-demi": "^0.13.5",
     "vue-template-compiler": "^2.7.8"
   },
@@ -158,7 +159,7 @@
       "<rootDir>/src/tests/setup.js"
     ],
     "transformIgnorePatterns": [
-      "/node_modules/(?!vue-material-design-icons)"
+      "/node_modules/(?!vue-material-design-icons|uuid)"
     ]
   }
 }

src/EditorFactory.js

@@ -125,6 +125,10 @@ const createEditor = ({ content, onCreate, onUpdate, extensions, enableRichEditi
 		content,
 		onCreate,
 		onUpdate,
+		editorProps: {
+			scrollMargin: 50,
+			scrollThreshold: 50,
+		},
 		extensions: [
 			History,
 			...richEditingExtensions,

src/components/Editor.vue

@@ -47,8 +47,7 @@
 					<slot name="header" />
 				</MenuBar>
 				<div v-if="!menubarLoaded" class="menubar-placeholder" />
-				<Content v-show="contentLoaded"
-					ref="contentWrapper">
+				<Content v-show="contentLoaded" ref="contentWrapper">
 					<MenuBubble v-if="renderMenus"
 						:content-wrapper="contentWrapper"
 						:file-path="relativePath" />
@@ -233,7 +232,6 @@ export default {
 		showAuthorAnnotations() {
 			return this.$store.state.showAuthorAnnotations
 		},
-
 		hasSyncCollission() {
 			return this.syncError && this.syncError.type === ERROR_TYPE.SAVE_COLLISSION
 		},
@@ -810,5 +808,4 @@ export default {
 		0% { transform: rotate(0deg); }
 		100% { transform: rotate(360deg); }
 	}
-
 </style>