Feat/page anchors

cypress/e2e/sections.spec.js

@@ -0,0 +1,179 @@
+import { initUserAndFiles, randHash } from '../utils/index.js'
+
+const currentUser = randHash()
+const fileName = 'test.md'
+
+const refresh = () => cy.get('.files-controls .crumb:not(.hidden) a')
+	.last()
+	.click({ force: true })
+
+const clickOutline = () => {
+	cy.getActionEntry('headings')
+		.click()
+
+	cy.get('.v-popper__wrapper .open').getActionEntry('outline')
+		.click()
+}
+
+describe('Content Sections', () => {
+	before(function() {
+		initUserAndFiles(currentUser, fileName)
+	})
+
+	beforeEach(function() {
+		cy.login(currentUser, 'password', {
+			onBeforeLoad(win) {
+				cy.stub(win, 'open')
+					.as('winOpen')
+			},
+		})
+
+		cy.openFile(fileName)
+			.then(() => cy.clearContent())
+	})
+
+	describe('Heading anchors', () => {
+		beforeEach(() => cy.clearContent())
+
+		it('Anchor exists', () => {
+			cy.getContent()
+				.type('# Heading\nText\n## Heading 2\nText\n## Heading 2')
+				.then(() => {
+					cy.getContent()
+						.find('a.heading-anchor')
+						.should(($anchor) => {
+							expect($anchor).to.have.length(3)
+							expect($anchor.eq(0)).to.have.attr('href').and.equal('#heading')
+							expect($anchor.eq(1)).to.have.attr('href').and.equal('#heading-2')
+							expect($anchor.eq(2)).to.have.attr('href').and.equal('#heading-2--1')
+						})
+				})
+		})
+
+		it('Anchor ID is updated', () => {
+			cy.clearContent()
+				.type('# Heading 1{enter}')
+				.then(() => {
+					cy.getContent()
+						.find('h1')
+						.should('have.attr', 'id')
+						.and('equal', 'heading-1')
+					cy.getContent()
+						.find('a.heading-anchor')
+						.should('have.attr', 'href')
+						.and('equal', '#heading-1')
+				})
+			cy.then(() => {
+				cy.getContent()
+					.type('{backspace}{backspace}2{enter}')
+					.then(() => {
+						cy.getContent()
+							.find('h1')
+							.should('have.attr', 'id')
+							.and('equal', 'heading-2')
+						cy.getContent()
+							.find('a.heading-anchor')
+							.should('have.attr', 'href')
+							.and('equal', '#heading-2')
+					})
+			})
+		})
+
+		it('Anchor scrolls into view', () => {
+			// Create link to top heading
+			cy.clearContent()
+				.type('{selectAll}{backspace}move top\n{selectAll}')
+				.get('.menububble button[data-text-bubble-action="add-link"]')
+				.click({ force: true })
+				.then(() => {
+					cy.get('.menububble .menububble__input')
+						.type('{shift}')
+						.type('#top{enter}', { force: true })
+				})
+			// Insert content above link
+			cy.getContent()
+				.type('{moveToStart}\n{moveToStart}# top \n')
+				.type('lorem ipsum \n'.repeat(25))
+				.type('{moveToEnd}\n')
+				.find('h1#top')
+				.should('not.be.inViewport')
+			// Click link and test view moved to anchor
+			cy.getContent()
+				.find('a:not(.heading-anchor)')
+				.click()
+				.then(() => {
+					cy.getContent()
+						.get('h1[id="top"]')
+						.should('be.inViewport')
+				})
+		})
+
+		it('Can change heading level', () => {
+			// Issue #2868
+			cy.getContent()
+				.type('# Heading 1{enter}')
+				.then(() => {
+					cy.getContent()
+						.find('h1')
+						.should('have.attr', 'id')
+						.and('equal', 'heading-1')
+				})
+			cy.then(() => {
+				cy.getContent()
+					.type('{selectAll}')
+					.then(() => {
+						cy.getActionEntry('headings')
+							.click()
+						cy.get('.v-popper__wrapper .open').getActionEntry('headings-h3')
+							.click()
+						cy.getContent()
+							.find('h3')
+							.should('have.attr', 'id')
+							.and('equal', 'heading-1')
+					})
+			})
+		})
+	})
+
+	describe('Table of Contents', () => {
+		beforeEach(() => cy.clearContent())
+
+		it('sidebar toc', () => {
+			cy.getContent()
+				.type('# T1 \n## T2 \n### T3 \n#### T4 \n##### T5 \n###### T6\n')
+				.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', () => {
+			refresh()
+				.then(() => cy.openFile(fileName, { force: true }))
+				.then(clickOutline)
+
+			cy.getOutline()
+				.find('ul')
+				.should('be.empty')
+		})
+	})
+})

src/nodes/Heading/HeadingView.vue

@@ -0,0 +1,120 @@
+<!--
+  - @copyright Copyright (c) 2022
+  -
+  - @license AGPL-3.0-or-later
+  -
+  - 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/>.
+  -
+  -->
+
+<template>
+	<NodeViewWrapper :id="node.attrs.id"
+		ref="container"
+		:as="domElement"
+		tabindex="-1">
+		<a aria-hidden="true"
+			class="heading-anchor"
+			:href="href"
+			:title="t('text', 'Link to this section')"
+			:contenteditable="false"
+			@click.stop="click">{{ linkSymbol }}</a>
+		<NodeViewContent />
+	</NodeViewWrapper>
+</template>
+
+<script>
+import Vue from 'vue'
+import { NodeViewWrapper, NodeViewContent } from '@tiptap/vue-2'
+import { useEditorMixin } from '../../components/Editor.provider.js'
+
+export default Vue.extend({
+	name: 'HeadingView',
+	components: {
+		NodeViewWrapper,
+		NodeViewContent,
+	},
+	mixins: [useEditorMixin],
+	props: {
+		node: {
+			type: Object,
+			required: true,
+		},
+		extension: {
+			type: Object,
+			required: true,
+		},
+	},
+	data() {
+		return {
+			content: null,
+		}
+	},
+
+	computed: {
+		href() {
+			return `#${this.node.attrs.id}`
+		},
+		domElement() {
+			const hasLevel = this.extension.options.levels.includes(this.node.attrs.level)
+			const level = hasLevel ? this.node.attrs.level : this.extension.options.levels[0]
+			return `h${level}`
+		},
+		linkSymbol() {
+			return this.extension.options.linkSymbol
+		},
+		t: () => window.t,
+	},
+
+	methods: {
+		click() {
+			this.$refs.container.$el.scrollIntoView()
+			window.location.hash = this.href
+		},
+	},
+})
+</script>
+
+<style lang="scss">
+div.ProseMirror {
+	/* Anchor links */
+	h1,h2,h3,h4,h5,h6 {
+		position: relative;
+		.heading-anchor[contenteditable="false"] {
+			opacity: 0;
+			padding: 0;
+			left: -1em;
+			bottom: 0;
+			font-size: max(1em, 16px);
+			position: absolute;
+			text-decoration: none;
+			transition-duration: .15s;
+			transition-property: opacity;
+			transition-timing-function: cubic-bezier(.4,0,.2,1);
+		}
+
+		&:hover .heading-anchor {
+			opacity: 0.5!important;
+		}
+	}
+
+	// Shrink clickable area of anchor permalinks while editing
+	&[contenteditable="true"] {
+		h1,h2,h3,h4,h5,h6 {
+			.heading-anchor {
+				width: 1em;
+			}
+		}
+	}
+}
+</style>