diff --git a/cypress/e2e/SmartPicker.spec.js b/cypress/e2e/SmartPicker.spec.js
index 8a9fbab8355..2f7671b96c0 100644
--- a/cypress/e2e/SmartPicker.spec.js
+++ b/cypress/e2e/SmartPicker.spec.js
@@ -37,8 +37,8 @@ describe('Smart picker', () => {
 			.type('Heading{enter}Hello World{enter}')
 
 		cy.getContent()
-			.find('h1 [data-node-view-content]')
-			.should('have.text', 'Hello World')
+			.find('h1')
+			.should('contain.text', 'Hello World')
 	})
 
 	it('Insert a link with the smart picker', () => {
diff --git a/cypress/e2e/conflict.spec.js b/cypress/e2e/conflict.spec.js
index cf1e7484a05..dace4d00cf2 100644
--- a/cypress/e2e/conflict.spec.js
+++ b/cypress/e2e/conflict.spec.js
@@ -125,6 +125,10 @@ variants.forEach(function({ fixture, mime }) {
 	})
 })
 
+/**
+ * @param {string} fileName - filename
+ * @param {string} mime - mimetype
+ */
 function createConflict(fileName, mime) {
 	cy.visit('/apps/files')
 	cy.openFile(fileName)
diff --git a/cypress/e2e/initial.spec.js b/cypress/e2e/initial.spec.js
index c9372c22ff7..c8bb0038688 100644
--- a/cypress/e2e/initial.spec.js
+++ b/cypress/e2e/initial.spec.js
@@ -39,122 +39,110 @@ describe('Test state loading of documents', function() {
 
 	it('Initial content can not be undone', function() {
 		cy.shareFile('/test.md', { edit: true })
-			.then((token) => {
-				cy.visit(`/s/${token}`)
-			})
-			.then(() => {
-				cy.getEditor().should('be.visible')
-				cy.getContent()
-					.should('contain', 'Hello world')
-					.find('h2').should('contain', 'Hello world')
-
-				cy.getMenu().should('be.visible')
-				cy.getActionEntry('undo').should('be.visible').click()
-				cy.getContent()
-					.should('contain', 'Hello world')
-					.find('h2').should('contain', 'Hello world')
-			})
+			.then(token => cy.visit(`/s/${token}`))
+		cy.getEditor().should('be.visible')
+		cy.getContent()
+			.should('contain', 'Hello world')
+			.find('h2').should('contain', 'Hello world')
+
+		cy.getMenu().should('be.visible')
+		cy.getActionEntry('undo').should('be.disabled')
+
+		cy.getContent()
+			.type('New content')
+		cy.getActionEntry('undo').should('not.be.disabled')
 	})
 
 	it('Consecutive sessions work properly', function() {
-		let readToken = null
-		let writeToken = null
 		cy.interceptCreate()
 		cy.shareFile('/test2.md')
-			.then((token) => {
-				readToken = token
-				cy.logout()
-				cy.visit(`/s/${readToken}`)
-				cy.wait('@create')
-			})
-			.then(() => {
-				// Open read only for the first time
-				cy.getEditor().should('be.visible')
-				cy.getContent()
-					.should('contain', 'Hello world')
-					.find('h2').should('contain', 'Hello world')
-				cy.closeInterceptedSession(readToken)
-
-				// Open read only for the second time
-				cy.reload()
-				cy.getEditor().should('be.visible')
-				cy.getContent()
-					.should('contain', 'Hello world')
-					.find('h2').should('contain', 'Hello world')
-				cy.closeInterceptedSession(readToken)
-
-				cy.login(user)
-				cy.shareFile('/test2.md', { edit: true })
-					.then((token) => {
-						writeToken = token
-						// Open write link and edit something
-						cy.visit(`/s/${writeToken}`)
-						cy.getEditor().should('be.visible')
-						cy.getContent()
-							.should('contain', 'Hello world')
-							.find('h2').should('contain', 'Hello world')
-						cy.getContent()
-							.type('Something new {end}')
-						cy.intercept({ method: 'POST', url: '**/session/*/push' }).as('push')
-						cy.intercept({ method: 'POST', url: '**/session/*/sync' }).as('sync')
-						cy.wait('@push')
-						cy.wait('@sync')
-						cy.closeInterceptedSession(writeToken)
-
-						// Reopen read only link and check if changes are there
-						cy.visit(`/s/${readToken}`)
-						cy.getEditor().should('be.visible')
-						cy.getContent()
-							.find('h2').should('contain', 'Something new Hello world')
-					})
-			})
+			.as('readToken')
+		cy.logout()
+		cy.get('@readToken')
+			.then(token => cy.visit(`/s/${token}`))
+		cy.wait('@create')
+		// Open read only for the first time
+		cy.getEditor().should('be.visible')
+		cy.getContent()
+			.should('contain', 'Hello world')
+			.find('h2').should('contain', 'Hello world')
+		cy.get('@readToken')
+			.then(cy.closeInterceptedSession)
+
+		// Open read only for the second time
+		cy.reload()
+		cy.getEditor().should('be.visible')
+		cy.getContent()
+			.should('contain', 'Hello world')
+			.find('h2').should('contain', 'Hello world')
+		cy.get('@readToken')
+			.then(cy.closeInterceptedSession)
+
+		cy.login(user)
+		cy.shareFile('/test2.md', { edit: true })
+			.as('writeToken')
+		// Open write link and edit something
+		cy.get('@writeToken')
+			.then(token => cy.visit(`/s/${token}`))
+		cy.getEditor().should('be.visible')
+		cy.getContent()
+			.should('contain', 'Hello world')
+			.find('h2').should('contain', 'Hello world')
+		cy.getContent()
+			.type('Something new {end}')
+		cy.intercept({ method: 'POST', url: '**/session/*/sync' }).as('sync')
+		cy.wait('@sync')
+		cy.get('@writeToken')
+			.then(cy.closeInterceptedSession)
+
+		// Reopen read only link and check if changes are there
+		cy.get('@readToken')
+			.then(token => cy.visit(`/s/${token}`))
+		cy.getEditor().should('be.visible')
+		cy.getContent()
+			.find('h2').should('contain', 'Something new Hello world')
 	})
 
 	it('Load after state has been saved', function() {
-		let readToken = null
-		let writeToken = null
 		cy.interceptCreate()
 		cy.shareFile('/test3.md', { edit: true })
-			.then((token) => {
-				writeToken = token
-				cy.logout()
-				cy.visit(`/s/${writeToken}`)
-			})
-			.then(() => {
-				// Open a file, write and save
-				cy.getEditor().should('be.visible')
-				cy.getContent()
-					.should('contain', 'Hello world')
-					.find('h2').should('contain', 'Hello world')
-				cy.getContent()
-					.type('Something new {end}')
-				cy.intercept({ method: 'POST', url: '**/session/*/save' }).as('save')
-				cy.get('.save-status button').click()
-				cy.wait('@save', { timeout: 10000 })
-				cy.closeInterceptedSession(writeToken)
-
-				// Open writable file again and assert the content
-				cy.reload()
-				cy.getEditor().should('be.visible')
-				cy.getContent()
-					.should('contain', 'Hello world')
-					.find('h2').should('contain', 'Something new Hello world')
-
-				cy.login(user)
-				cy.shareFile('/test3.md')
-					.then((token) => {
-						readToken = token
-						cy.logout()
-						cy.visit(`/s/${readToken}`)
-					})
-					.then(() => {
-						// Open read only file again and assert the content
-						cy.getEditor().should('be.visible')
-						cy.getContent()
-							.should('contain', 'Hello world')
-							.find('h2').should('contain', 'Something new Hello world')
-					})
-			})
+			.as('writeToken')
+		cy.logout()
+		cy.get('@writeToken')
+			.then(token => cy.visit(`/s/${token}`))
+
+		// Open a file, write and save
+		cy.getEditor().should('be.visible')
+		cy.getContent()
+			.should('contain', 'Hello world')
+			.find('h2').should('contain', 'Hello world')
+		cy.getContent()
+			.type('Something new {end}')
+		cy.intercept({ method: 'POST', url: '**/session/*/save' }).as('save')
+		cy.get('.save-status button').click()
+		cy.wait('@save', { timeout: 10000 })
+		cy.get('@writeToken')
+			.then(cy.closeInterceptedSession)
+
+		// Open writable file again and assert the content
+		cy.reload()
+		cy.getEditor().should('be.visible')
+		cy.getContent()
+			.should('contain', 'Hello world')
+			.find('h2').should('contain', 'Something new Hello world')
+
+		cy.login(user)
+		cy.shareFile('/test3.md')
+			.as('readToken')
+		cy.logout()
+		cy.get('@readToken')
+			.then(token => cy.visit(`/s/${token}`))
+
+		// Open read only file again and assert the content
+		cy.getEditor().should('be.visible')
+		cy.getContent()
+			.should('contain', 'Hello world')
+			.find('h2').should('contain', 'Something new Hello world')
 	})
 
 })
diff --git a/cypress/e2e/sections.spec.js b/cypress/e2e/sections.spec.js
index e4c4f48321a..0571b10952f 100644
--- a/cypress/e2e/sections.spec.js
+++ b/cypress/e2e/sections.spec.js
@@ -46,7 +46,7 @@ describe('Content Sections', () => {
 			cy.openFile(fileName, { force: true })
 			cy.getContent().type('# Heading 1{enter}')
 			cy.getContent()
-				.find('h1')
+				.find('h1 > a')
 				.should('have.attr', 'id')
 				.and('equal', 'h-heading-1')
 			cy.getContent()
@@ -55,7 +55,7 @@ describe('Content Sections', () => {
 				.and('equal', '#h-heading-1')
 			cy.getContent().type('{backspace}{backspace}2{enter}')
 			cy.getContent()
-				.find('h1')
+				.find('h1 > a')
 				.should('have.attr', 'id')
 				.and('equal', 'h-heading-2')
 			cy.getContent()
@@ -69,13 +69,13 @@ describe('Content Sections', () => {
 			cy.visitTestFolder()
 			cy.openFile('anchors.md')
 			cy.getContent()
-				.get('h2[id="h-bottom"]')
+				.get('h2 > a[id="h-bottom"]')
 				.should('not.be.inViewport')
 			cy.getContent()
 				.find('a[href="#h-bottom"]:not(.heading-anchor)')
 				.click()
 			cy.getContent()
-				.get('h2[id="h-bottom"]')
+				.get('h2 > a[id="h-bottom"]')
 				.should('be.inViewport')
 		})
 
@@ -86,15 +86,15 @@ describe('Content Sections', () => {
 			cy.getContent()
 				.type('# Heading 1{enter}')
 			cy.getContent()
-				.find('h1')
+				.find('h1 > a')
 				.should('have.attr', 'id')
 				.and('equal', 'h-heading-1')
 			cy.getContent()
-				.find('h1 [data-node-view-content]')
+				.find('h1')
 				.click({ force: true, position: 'center' })
 			cy.getActionEntry('headings').click()
 			cy.get('.v-popper__wrapper .open').getActionEntry('headings-h3').click()
-			cy.getContent().find('h3')
+			cy.getContent().find('h3 > a')
 				.should('have.attr', 'id')
 				.and('equal', 'h-heading-1')
 		})
diff --git a/cypress/e2e/versions.spec.js b/cypress/e2e/versions.spec.js
index 5da12bc6358..5241761d0f2 100644
--- a/cypress/e2e/versions.spec.js
+++ b/cypress/e2e/versions.spec.js
@@ -30,18 +30,18 @@ describe('Versions', () => {
 
 			cy.get('[data-files-versions-versions-list] li a').eq(1).click()
 			cy.get('.viewer__content #read-only-editor')
-				.find('h1 [data-node-view-content]')
-				.should('have.text', 'V2')
+				.find('h1')
+				.should('contain.text', 'V2')
 
 			cy.get('[data-files-versions-versions-list] li a').eq(2).click()
 			cy.get('.viewer__content #read-only-editor')
-				.find('h1 [data-node-view-content]')
-				.should('have.text', 'V1')
+				.find('h1')
+				.should('contain.text', 'V1')
 
 			cy.get('[data-files-versions-versions-list] li a').eq(0).click()
 			cy.getContent()
-				.find('h1 [data-node-view-content]')
-				.should('have.text', 'V3')
+				.find('h1')
+				.should('contain.text', 'V3')
 		})
 	})
 
@@ -64,18 +64,18 @@ describe('Versions', () => {
 
 			cy.get('[data-files-versions-versions-list] li a').eq(1).click()
 			cy.get('.viewer__content #read-only-editor')
-				.find('h1 [data-node-view-content]')
-				.should('have.text', 'V2')
+				.find('h1')
+				.should('contain.text', 'V2')
 
 			cy.get('[data-files-versions-versions-list] li a').eq(2).click()
 			cy.get('.viewer__content #read-only-editor')
-				.find('h1 [data-node-view-content]')
-				.should('have.text', 'V1')
+				.find('h1')
+				.should('contain.text', 'V1')
 
 			cy.get('[data-files-versions-versions-list] li a').eq(0).click()
 			cy.getContent()
-				.find('h1 [data-node-view-content]')
-				.should('have.text', 'V3')
+				.find('h1')
+				.should('contain.text', 'V3')
 
 			cy.getContent()
 				.type('Hello')
@@ -109,11 +109,11 @@ describe('Versions', () => {
 				.click()
 
 			cy.get('.viewer__content #read-only-editor')
-				.find('h1 [data-node-view-content]')
-				.should('have.text', 'V1')
+				.find('h1')
+				.should('contain.text', '#V1')
 
 			cy.get('.viewer__content .viewer__file--active .ProseMirror')
-				.find('h1 [data-node-view-content]')
+				.find('h1')
 				.should('contain.text', 'V3')
 		})
 	})
diff --git a/src/components/Editor.vue b/src/components/Editor.vue
index 5157ddde4e6..db83ddf172c 100644
--- a/src/components/Editor.vue
+++ b/src/components/Editor.vue
@@ -558,7 +558,10 @@ export default {
 			this.document = document
 
 			this.syncError = null
-			this.$editor.setEditable(!this.readOnly)
+			const editable = !this.readOnly
+			if (this.$editor.isEditable !== editable) {
+				this.$editor.setEditable(editable)
+			}
 		},
 
 		onSync({ steps, document }) {
diff --git a/src/components/Editor/MarkdownContentEditor.vue b/src/components/Editor/MarkdownContentEditor.vue
index d44ce37f77e..50750ca2edf 100644
--- a/src/components/Editor/MarkdownContentEditor.vue
+++ b/src/components/Editor/MarkdownContentEditor.vue
@@ -163,7 +163,7 @@ export default {
 				onCreate: ({ editor }) => {
 					this.$emit('ready')
 					this.$parent.$emit('ready')
-				}
+				},
 			})
 		},
 
diff --git a/src/components/Editor/TableOfContents.vue b/src/components/Editor/TableOfContents.vue
index 306ef67526a..61d681beb1e 100644
--- a/src/components/Editor/TableOfContents.vue
+++ b/src/components/Editor/TableOfContents.vue
@@ -2,7 +2,7 @@
 	<div data-text-el="editor-table-of-contents" :class="{ '--initial-render': initialRender }" class="editor--toc">
 		<ul class="editor--toc__list">
 			<li v-for="(heading) in headings"
-				:key="heading.uuid"
+				:key="heading.id"
 				:data-toc-level="heading.level"
 				class="editor--toc__item"
 				:class="{
@@ -40,12 +40,7 @@ export default {
 	},
 	methods: {
 		goto(heading) {
-			this.$editor
-				.chain()
-				.focus()
-				.setTextSelection(heading.position)
-				.scrollIntoView()
-				.run()
+			document.getElementById(heading.id).scrollIntoView()
 
 			this.$nextTick(() => {
 				window.location.hash = heading.id
diff --git a/src/css/prosemirror.scss b/src/css/prosemirror.scss
index cd0f05ee362..68b21ad246a 100644
--- a/src/css/prosemirror.scss
+++ b/src/css/prosemirror.scss
@@ -87,9 +87,34 @@ div.ProseMirror {
 	}
 
 	> h1,h2,h3,h4,h5,h6 {
+		position: relative;
+
 		&:first-child {
 			margin-top: 0;
 		}
+
+		.heading-anchor[contenteditable='false'] {
+			// Shrink clickable area of anchor permalinks to not overlay the heading
+			width: 1em;
+			opacity: 0;
+			padding: 0;
+			left: -1em;
+			top: 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;
+		}
+
+		&:focus-visible {
+			outline: none;
+		}
 	}
 
 	a {
diff --git a/src/extensions/RichText.js b/src/extensions/RichText.js
index 24bccbcb80b..549712ecb9e 100644
--- a/src/extensions/RichText.js
+++ b/src/extensions/RichText.js
@@ -38,7 +38,7 @@ import EmojiSuggestion from './../components/Suggestion/Emoji/suggestions.js'
 import FrontMatter from './../nodes/FrontMatter.js'
 import Gapcursor from '@tiptap/extension-gapcursor'
 import HardBreak from './../nodes/HardBreak.js'
-import Heading from '../nodes/Heading/index.js'
+import Heading from '../nodes/Heading.js'
 import HorizontalRule from '@tiptap/extension-horizontal-rule'
 import Image from './../nodes/Image.js'
 import ImageInline from './../nodes/ImageInline.js'
diff --git a/src/nodes/Heading.js b/src/nodes/Heading.js
new file mode 100644
index 00000000000..7ad309ec145
--- /dev/null
+++ b/src/nodes/Heading.js
@@ -0,0 +1,34 @@
+/**
+ * SPDX-FileCopyrightText: 2022 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import TipTapHeading from '@tiptap/extension-heading'
+import headingAnchor, { headingAnchorPluginKey } from '../plugins/headingAnchor.js'
+import store from '../store/index.js'
+
+const setHeadings = (val) => store.dispatch('text/setHeadings', val)
+
+const Heading = TipTapHeading.extend({
+
+	addKeyboardShortcuts() {
+		return this.options.levels.reduce((items, level) => ({
+			...items,
+			[`Mod-Shift-${level}`]: () => this.editor.commands.toggleHeading({ level }),
+		}), {})
+	},
+
+	// sync heading data structure to the vuex store
+	onUpdate({ editor }) {
+		const headings = headingAnchorPluginKey
+			.getState(editor.state)?.headings ?? []
+		setHeadings(headings)
+	},
+
+	addProseMirrorPlugins() {
+		return [headingAnchor()]
+	},
+
+})
+
+export default Heading
diff --git a/src/nodes/Heading/HeadingView.vue b/src/nodes/Heading/HeadingView.vue
deleted file mode 100644
index d47c7d21a8e..00000000000
--- a/src/nodes/Heading/HeadingView.vue
+++ /dev/null
@@ -1,114 +0,0 @@
-<!--
-  - @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">
-		<a aria-hidden="true"
-			class="heading-anchor"
-			:href="href"
-			:title="t('text', 'Link to this section')"
-			:contenteditable="false"
-			@click.stop="click">{{ linkSymbol }}</a>
-		<NodeViewContent as="span" />
-	</NodeViewWrapper>
-</template>
-
-<script>
-import { NodeViewWrapper, NodeViewContent } from '@tiptap/vue-2'
-import { useEditorMixin } from '../../components/Editor.provider.js'
-
-export default {
-	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
-		},
-	},
-
-	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"] {
-			// Shrink clickable area of anchor permalinks to not overlay the heading
-			width: 1em;
-			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;
-		}
-
-		&:focus-visible {
-			outline: none;
-		}
-	}
-}
-</style>
diff --git a/src/nodes/Heading/extractor.js b/src/nodes/Heading/extractor.js
deleted file mode 100644
index 63247dbdd32..00000000000
--- a/src/nodes/Heading/extractor.js
+++ /dev/null
@@ -1,67 +0,0 @@
-import store from '../../store/index.js'
-import { slugify } from './slug.js'
-import { v4 as uuidv4 } from 'uuid'
-
-const setHeadings = (val) => store.dispatch('text/setHeadings', val)
-
-const extractHeadings = (editor) => {
-	const counter = new Map()
-	const headings = []
-	const tr = editor.state.tr
-
-	const getId = text => {
-		const id = slugify(text)
-
-		if (counter.has(id)) {
-			const next = counter.get(id)
-
-			// increment counter
-			counter.set(id, next + 1)
-
-			return `h-${id}--${next}`
-		}
-
-		// define counter
-		counter.set(id, 1)
-
-		return 'h-' + id
-	}
-
-	editor.state.doc.descendants((node, position) => {
-		if (node.type.name === 'heading') {
-			const text = node.textContent
-			const id = getId(text)
-			const uuid = node.attrs.uuid ?? uuidv4()
-
-			if (node.attrs.id !== id || !node.attrs.uuid) {
-				const attrs = {
-					...node.attrs,
-					uuid,
-					id,
-				}
-
-				tr.setNodeMarkup(position, undefined, attrs)
-			}
-
-			headings.push(Object.freeze({
-				level: node.attrs.level,
-				position,
-				text,
-				id,
-				uuid,
-			}))
-		}
-	})
-
-	tr.setMeta('addToHistory', false)
-	tr.setMeta('preventUpdate', true)
-
-	editor.view.dispatch(tr)
-
-	setHeadings(headings)
-}
-
-export {
-	extractHeadings,
-	setHeadings,
-}
diff --git a/src/nodes/Heading/index.js b/src/nodes/Heading/index.js
deleted file mode 100644
index 1bb2b16b1d1..00000000000
--- a/src/nodes/Heading/index.js
+++ /dev/null
@@ -1,65 +0,0 @@
-import TipTapHeading from '@tiptap/extension-heading'
-import { VueNodeViewRenderer } from '@tiptap/vue-2'
-import debounce from 'debounce'
-import { extractHeadings } from './extractor.js'
-import HeaderViewVue from './HeadingView.vue'
-
-const Heading = TipTapHeading.extend({
-	addAttributes() {
-		return {
-			...this.parent(),
-			id: {
-				default: undefined,
-				rendered: true,
-			},
-			uuid: {
-				default: undefined,
-				rendered: false,
-			},
-		}
-	},
-
-	addOptions() {
-		return {
-			...this.parent?.(),
-			linkSymbol: '#',
-		}
-	},
-
-	addKeyboardShortcuts() {
-		return this.options.levels.reduce((items, level) => ({
-			...items,
-			[`Mod-Shift-${level}`]: () => this.editor.commands.toggleHeading({ level }),
-		}), {})
-	},
-
-	addNodeView() {
-		return VueNodeViewRenderer(HeaderViewVue, {
-			update: ({ oldNode, newNode, updateProps }) => {
-				if (newNode.type.name !== this.name) return false
-				// Make sure to redraw node as the vue renderer will not show the updated children
-				if (newNode.attrs !== oldNode.attrs) return false
-				updateProps()
-				return true
-			},
-		})
-	},
-
-	onCreate() {
-		extractHeadings(this.editor)
-
-		if (this.parent) {
-			this.parent()
-		}
-	},
-
-	onUpdate: debounce(({ editor }) => {
-		if (editor.view && editor.state && !editor.isDestroyed) {
-			// Only run if editor still exists (prevent dangling debounced extractHeadings function)
-			extractHeadings(editor)
-		}
-	}, 900),
-
-})
-
-export default Heading
diff --git a/src/plugins/extractHeadings.js b/src/plugins/extractHeadings.js
new file mode 100644
index 00000000000..a59f9277869
--- /dev/null
+++ b/src/plugins/extractHeadings.js
@@ -0,0 +1,48 @@
+/**
+ * SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import { slugify } from './slug.js'
+
+/**
+ * Extract heading data structure from doc
+ *
+ * @param {Document} doc - the prosemirror doc
+ * @return {Array} headings found in the doc
+ */
+export default function extractHeadings(doc) {
+	const counter = new Map()
+	const headings = []
+
+	const getId = text => {
+		const id = slugify(text)
+		if (counter.has(id)) {
+			const next = counter.get(id)
+			// increment counter
+			counter.set(id, next + 1)
+			return `h-${id}--${next}`
+		}
+		// define counter
+		counter.set(id, 1)
+		return 'h-' + id
+	}
+
+	doc.descendants((node, offset) => {
+		if (node.type.name !== 'heading') {
+			return
+		}
+		const text = node.textContent
+		// ignore empty headings
+		if (!text) return
+		const id = getId(text)
+		headings.push(Object.freeze({
+			level: node.attrs.level,
+			text,
+			id,
+			offset,
+		}))
+	})
+
+	return headings
+}
diff --git a/src/plugins/headingAnchor.js b/src/plugins/headingAnchor.js
new file mode 100644
index 00000000000..000b4c4ad20
--- /dev/null
+++ b/src/plugins/headingAnchor.js
@@ -0,0 +1,151 @@
+/**
+ * SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import { Plugin, PluginKey } from '@tiptap/pm/state'
+import { Decoration, DecorationSet } from '@tiptap/pm/view'
+import extractHeadings from './extractHeadings.js'
+
+export const headingAnchorPluginKey = new PluginKey('headingAnchor')
+
+/**
+ * Heading anchor decorations ProseMirror plugin
+ * Add anchor tags with a unique id to all headings.
+ *
+ * @return {Plugin<DecorationSet>}
+ */
+export default function headingAnchor() {
+	return new Plugin({
+
+		key: headingAnchorPluginKey,
+
+		state: {
+			init(_, { doc }) {
+				console.debug('headingAnchor init')
+				const headings = extractHeadings(doc)
+				return {
+					headings,
+					decorations: anchorDecorations(doc, headings),
+				}
+			},
+			apply(tr, value, _oldState, newState) {
+				if (!tr.docChanged) {
+					return value
+				}
+				const headings = extractHeadings(newState.doc)
+				const decorations = mapDecorations(value, tr, headings) || anchorDecorations(newState.doc, headings)
+				return { headings, decorations }
+			},
+		},
+
+		props: {
+			decorations(state) {
+				return this.getState(state).decorations
+			},
+		},
+	})
+}
+
+/**
+ * Map the previous decorations to current document state.
+ *
+ * Return false if headings changed or decorations would get removed.
+ * The latter prevents lost decorations in case of replacements.
+ *
+ * @param {object} value - previous plugin state
+ * @param {object} tr - current transaction
+ * @param {Array} headings - array of headings
+ *
+ * @return {false|DecorationSet}
+ */
+function mapDecorations(value, tr, headings) {
+	if (headingsChanged(headings, value.headings)) {
+		return false
+	}
+	let removedDecorations = false
+	const decorations = value.decorations.map(tr.mapping, tr.doc, { onRemove: () => { removedDecorations = true } })
+	return removedDecorations
+		? false
+		: decorations
+}
+
+/**
+ * Check if the headings provided are equivalent.
+ *
+ * @param {Array} current - array of headings
+ * @param {Array} prev - headings to compare against
+ *
+ * @return {boolean}
+ */
+function headingsChanged(current, prev) {
+	return (current.length !== prev.length)
+		|| current.some(isDifferentFrom(prev))
+}
+
+/**
+ * Check if headings are different - i.e. have different id or level
+ *
+ * @param {Array} other - headings to compare against
+ *
+ * Returns a function to be used in a call to Array#some.
+ * The returned function takes a heading and an index (as provided by iterators)
+ * and compares the id and level of the heading to the one in `other` with the same index.
+ */
+const isDifferentFrom = (other) => (heading, i) => {
+	return heading.id !== other[i].id
+		|| heading.level !== other[i].level
+}
+
+/**
+ * Create anchor decorations for the given headings
+ * @param {Document} doc - prosemirror doc
+ * @param {Array} headings - headings structure in the doc
+ * @return {DecorationSet}
+ */
+function anchorDecorations(doc, headings) {
+	const decorations = headings.map(decorationForHeading)
+	return DecorationSet.create(doc, decorations)
+}
+
+/**
+ * Create a decoration for the given heading
+ * @param {object} heading to decorate
+ * @return {Decoration}
+ */
+function decorationForHeading(heading) {
+	return Decoration.widget(
+		heading.offset + 1,
+		anchorForHeading(heading),
+		{ side: -1 },
+	)
+}
+
+/**
+ * Create an anchor element for the given heading
+ * @param {object} heading to generate anchor for
+ * @return {HTMLElement}
+ */
+function anchorForHeading(heading) {
+	const el = document.createElement('a')
+	const symbol = document.createTextNode('#')
+	el.appendChild(symbol)
+	el.setAttribute('id', heading.id)
+	el.setAttribute('aria-hidden', 'true')
+	el.className = 'heading-anchor'
+	el.setAttribute('href', `#${heading.id}`)
+	el.setAttribute('title', window.t('text', 'Link to this section'))
+	el.setAttribute('contenteditable', 'false')
+	el.addEventListener('click', handleClick)
+	return el
+}
+
+/**
+ * Handle click on an anchor - scroll into view and change location hash.
+ * @param {PointerEvent} event click that triggered the function
+ */
+function handleClick(event) {
+	event.stopPropagation()
+	event.target.scrollIntoView()
+	window.location.hash = event.target.getAttribute('href')
+}
diff --git a/src/nodes/Heading/slug.js b/src/plugins/slug.js
similarity index 100%
rename from src/nodes/Heading/slug.js
rename to src/plugins/slug.js
diff --git a/src/tests/plugins/extractHeadings.spec.js b/src/tests/plugins/extractHeadings.spec.js
new file mode 100644
index 00000000000..a5b61aab48c
--- /dev/null
+++ b/src/tests/plugins/extractHeadings.spec.js
@@ -0,0 +1,55 @@
+/**
+ * SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import extractHeadings from '../../plugins/extractHeadings.js'
+import Heading from '../../nodes/Heading.js'
+import { createCustomEditor } from '../helpers.js'
+
+describe('extractHeadings', () => {
+
+	it('returns an empty array for an empty doc', () => {
+		const doc = prepareDoc('')
+		const headings = extractHeadings(doc)
+		expect(headings).toEqual([])
+	})
+
+	it('returns headings', () => {
+		const content = '<h1>Level 1 heading</h1>'
+		const doc = prepareDoc(content)
+		const headings = extractHeadings(doc)
+		expect(headings).toEqual([{
+			id: 'h-level-1-heading',
+			level: 1,
+			offset: 0,
+			text: 'Level 1 heading',
+		}])
+	})
+
+	it('ignores an empty heading', () => {
+		const content = '<h1></h1>'
+		const doc = prepareDoc(content)
+		const headings = extractHeadings(doc)
+		expect(headings).toEqual([])
+	})
+
+	it('creates unique ids with a counter', () => {
+		const content = `
+			<h1>Level 1 heading</h1>
+			<h1>Level 1 heading</h1>
+			`
+		const doc = prepareDoc(content)
+		const headings = extractHeadings(doc)
+		expect(headings[1].id).toEqual('h-level-1-heading--1')
+	})
+
+})
+
+function prepareDoc(content) {
+	const editor = createCustomEditor({
+		content,
+		extensions: [ Heading ]
+	})
+	return editor.state.doc
+}