fix(files): Add smooth animation via clicking on heading

Signed-off-by: julia.kirschenheuter <[email protected]>

src/components/Editor/TableOfContents.vue

@@ -14,7 +14,7 @@
 					[`editor--toc__item--${heading.level}`]: true,
 					[`editor--toc__item--previous-${heading.previous}`]: heading.previous > 0,
 				}">
-				<a :href="`#${heading.id}`" @click.prevent="goto(heading)">
+				<a :href="`#${heading.id}`" class="editor--toc__item-link" @click.prevent="goto(heading)">
 					{{ heading.text }}
 				</a>
 			</li>
@@ -45,10 +45,10 @@
 	},
 	methods: {
 		goto(heading) {
-			document.getElementById(heading.id).scrollIntoView()
-
+			const element = this.$root.$el.querySelector(`#${heading.id}`)
+			element.scrollIntoView({ block: 'start', behavior: 'smooth' })
 			this.$nextTick(() => {
-				window.location.hash = heading.id
+				window.history.replaceState(window.history.state, '', `#${heading.id}`)
 			})
 		},
 	},
@@ -96,6 +96,10 @@
 			color: var(--color-primary-element-hover);
 		}
 
+		&-link {
+			scroll-margin-top: calc(var(--default-clickable-area) + 4 * var(--default-grid-baseline));
+		}
+
 		&--1 {
 			--padding-left: 0rem;
 			font-weight: 600;

src/css/prosemirror.scss

@@ -110,6 +110,9 @@ div.ProseMirror {
 			transition-duration: .15s;
 			transition-property: opacity;
 			transition-timing-function: cubic-bezier(.4,0,.2,1);
+			scroll-margin-top: calc(
+				var(--default-clickable-area) + 4 * var(--default-grid-baseline)
+			);
 		}
 
 		&:hover .heading-anchor {

src/plugins/headingAnchor.js

@@ -145,6 +145,7 @@
  */
 function handleClick(event) {
 	event.stopPropagation()
-	event.target.scrollIntoView()
-	window.location.hash = event.target.getAttribute('href')
+	event.preventDefault()
+	event.target.scrollIntoView({ block: 'start', behavior: 'smooth' })
+	window.history.replaceState({}, '', event.target.getAttribute('href'))
 }