🚧 (#107): Add outline view

Signed-off-by: Vinicius Reis <[email protected]>

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('header')
+			.should('not.exist')
+	})
+})

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

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>

src/components/Editor/Content.vue

@@ -22,25 +22,42 @@
 
 <template>
 	<div data-text-el="editor-content-wrapper"
-		class="content-wrapper text-editor__content-wrapper">
+		class="content-wrapper text-editor__content-wrapper"
+		:class="{
+			'--show-outline': showOutline
+		}">
+		<div v-if="showOutline" class="text-editor__content-wrapper__left">
+			<EditorOutline />
+		</div>
 		<slot />
 		<EditorContent tabindex="0"
 			role="document"
 			class="editor__content text-editor__content"
 			:editor="$editor" />
+		<div class="text-editor__content-wrapper__right" />
 	</div>
 </template>
 
 <script>
 import { EditorContent } from '@tiptap/vue-2'
 import { useEditorMixin } from './../Editor.provider.js'
+import { useOutlineStateMixin } from './Wrapper.provider.js'
+import EditorOutline from './EditorOutline.vue'
 
 export default {
 	name: 'Content',
 	components: {
 		EditorContent,
+		EditorOutline,
+	},
+	mixins: [useEditorMixin, useOutlineStateMixin],
+	computed: {
+		showOutline() {
+			const { visible, enable } = this.$outlineState
+
+			return visible && enable
+		},
 	},
-	mixins: [useEditorMixin],
 }
 </script>
 
@@ -49,6 +66,7 @@ export default {
 		max-width: var(--text-editor-max-width);
 		margin: auto;
 		position: relative;
+		width: 100%;
 	}
 
 	.ie {
@@ -57,4 +75,28 @@ export default {
 		}
 	}
 
+	.text-editor__content-wrapper {
+		--side-width: calc((100% - var(--text-editor-max-width)) / 2);
+		display: grid;
+		grid-template-columns: 1fr auto;
+		&.--show-outline {
+			grid-template-columns: var(--side-width) auto var(--side-width);
+		}
+		.text-editor__content-wrapper__left,
+		.text-editor__content-wrapper__right {
+			height: 100%;
+			position: relative;
+		}
+	}
+
+	.is-rich-workspace {
+		.text-editor__content-wrapper {
+			--side-width: var(--text-editor-max-width);
+			grid-template-columns: var(--side-width) auto;
+			.text-editor__content-wrapper__left,
+			.text-editor__content-wrapper__right {
+				display: none;
+			}
+		}
+	}
 </style>

src/components/Editor/EditorOutline.vue

@@ -0,0 +1,61 @@
+<template>
+	<div data-text-el="editor-outline" class="editor--outline">
+		<header v-if="enabled && visible" class="editor--outline__header">
+			<h2>{{ t('text', 'Outline') }}</h2>
+		</header>
+		<TableOfContents v-if="enabled" @has-headings="setVisible" />
+	</div>
+</template>
+
+<script>
+import debounce from 'debounce'
+import TableOfContents from './TableOfContents.vue'
+
+export default {
+	name: 'EditorOutline',
+	components: {
+		TableOfContents,
+	},
+	data: () => ({
+		visible: false,
+		enabled: true,
+	}),
+	mounted() {
+		this.$onResize = debounce(() => {
+			this.enabled = this.$el.clientWidth >= 275
+		}, 500)
+
+		this.$resizeObserver = new ResizeObserver(this.$onResize)
+		this.$resizeObserver.observe(this.$el)
+
+		this.$onResize()
+	},
+	beforeDestroy() {
+		this.$resizeObserver.unobserve(this.$el)
+		this.$resizeObserver = null
+		this.$onResize = null
+	},
+	methods: {
+		setVisible(val) {
+			this.visible = val
+		},
+	},
+}
+</script>
+
+<style lang="scss" scoped>
+.editor--outline {
+	max-width: var(--text-editor-outline-max-width, 380px);
+	margin: 0 0.75rem;
+	position: sticky;
+	top: 44px; // menu bar
+}
+
+.editor--outline__header {
+	margin: 0rem;
+	h2 {
+		font-size: 1rem;
+		margin-top: 13px;
+	}
+}
+</style>