diff --git a/playwright/support/fixtures/Node.ts b/playwright/support/fixtures/Node.ts
index 02ea83cf48d..10c1d880e18 100644
--- a/playwright/support/fixtures/Node.ts
+++ b/playwright/support/fixtures/Node.ts
@@ -77,9 +77,11 @@ export class Node {
 	}
 
 	async open() {
+		// loading the file list may take a while
+		const timeout = 10_000
 		await this.page.goto(`f/${this.id}`)
 		await expect(this.page.getByLabel(this.name, { exact: true }))
-			.toBeVisible()
+			.toBeVisible({ timeout })
 	}
 
 	async move(newName: string) {
diff --git a/src/components/Editor/TableOfContents/TableOfContents.vue b/src/components/Editor/TableOfContents/TableOfContents.vue
index a569770460f..3415603126d 100644
--- a/src/components/Editor/TableOfContents/TableOfContents.vue
+++ b/src/components/Editor/TableOfContents/TableOfContents.vue
@@ -5,54 +5,20 @@
 
 <template>
 	<ul class="toc-list">
-		<li
+		<TableOfContentsEntry
 			v-for="heading in headings"
 			:key="heading.id"
-			:data-toc-level="heading.level"
-			class="toc-list__item"
-			:class="{
-				active: heading.id === activeHeadingId,
-				[`level${heading.level}`]: true,
-				[`previous${heading.previous}`]: heading.previous > 0,
-			}">
-			<a
-				:href="`#${heading.id}`"
-				class="toc-list__item-link"
-				@click.prevent="goto(heading)">
-				{{ heading.text }}
-			</a>
-		</li>
+			:heading="heading"
+			@clicked="emit('heading-clicked')" />
 	</ul>
 </template>
 
-<script>
-export default {
-	name: 'TableOfContents',
-	props: {
-		activeHeadingId: {
-			type: String,
-			default: null,
-		},
-		headings: {
-			type: Array,
-			required: true,
-		},
-	},
-	methods: {
-		goto(heading) {
-			const el = this.$root.$el.querySelector(`#${heading.id}`)
-			el?.scrollIntoView({ block: 'start', behavior: 'smooth' })
-			this.$nextTick(() => {
-				window.history.replaceState(
-					window.history.state,
-					'',
-					`#${heading.id}`,
-				)
-			})
-			this.$emit('heading-clicked')
-		},
-	},
-}
+<script setup>
+import { useEditorHeadings } from '../../../composables/useEditorHeadings.ts'
+import TableOfContentsEntry from './TableOfContentsEntry.vue'
+
+const { headings } = useEditorHeadings()
+const emit = defineEmits(['heading-clicked'])
 </script>
 
 <style lang="scss" scoped>
@@ -61,47 +27,6 @@ export default {
 	list-style: none;
 	font-size: 0.9rem;
 	padding: 0;
-
 	--level-padding: 12px;
-
-	&__item {
-		color: var(--color-text-lighter);
-		overflow: hidden;
-		text-overflow: ellipsis;
-		white-space: nowrap;
-		padding-inline-start: var(--padding-inline-start);
-
-		a {
-			color: var(--color-text-lighter);
-		}
-
-		&.active a {
-			color: var(--color-main-text);
-		}
-
-		a:hover {
-			color: var(--color-primary-element-hover);
-		}
-
-		&-link {
-			scroll-margin-top: calc(
-				var(--default-clickable-area) + 4 * var(--default-grid-baseline)
-			);
-		}
-
-		&.level1 {
-			--padding-inline-start: calc(0 * var(--level-padding));
-			font-weight: 600;
-			&:not(:nth-child(1)) {
-				margin-top: 0.5rem;
-			}
-		}
-
-		@for $i from 2 through 6 {
-			&.level#{$i} {
-				--padding-inline-start: calc(#{$i - 1} * var(--level-padding));
-			}
-		}
-	}
 }
 </style>
diff --git a/src/components/Editor/TableOfContents/TableOfContentsEntry.vue b/src/components/Editor/TableOfContents/TableOfContentsEntry.vue
new file mode 100644
index 00000000000..f376a61d3d4
--- /dev/null
+++ b/src/components/Editor/TableOfContents/TableOfContentsEntry.vue
@@ -0,0 +1,90 @@
+<!--
+  - SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+
+<template>
+	<li
+		:data-toc-level="heading.level"
+		class="toc-list__item"
+		:class="{
+			visible,
+			[`level${heading.level}`]: true,
+		}">
+		<a
+			:href="`#${heading.id}`"
+			class="toc-list__item-link"
+			@click.prevent="goto(heading.id)">
+			{{ heading.text }}
+		</a>
+	</li>
+</template>
+
+<script setup>
+import { nextTick, toRefs } from 'vue'
+import { useEditor } from '../../../composables/useEditor.ts'
+import { useVisibility } from '../../../composables/useVisibility.ts'
+const props = defineProps({ heading: { type: Object, required: true } })
+const { heading } = toRefs(props)
+const { visible } = useVisibility(heading.value.id)
+const { editor } = useEditor()
+
+const emit = defineEmits(['clicked'])
+
+const goto = (id) => {
+	const el = editor.view.dom.querySelector(`#${id}`)
+	el?.scrollIntoView({ block: 'start', behavior: 'smooth' })
+	nextTick(() => {
+		window.history.replaceState(window.history.state, '', `#${id}`)
+	})
+	emit('clicked')
+}
+</script>
+
+<style lang="scss" scoped>
+.toc-list__item {
+	color: var(--color-text-lighter);
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	padding-inline-start: var(--padding-inline-start);
+
+	a {
+		color: var(--color-text-lighter);
+	}
+
+	// Only effective on the first visible line - see next selector.
+	&.visible a {
+		color: var(--color-main-text);
+	}
+
+	// All following visible lines use the default style.
+	.visible ~ &.visible a {
+		color: var(--color-text-lighter);
+	}
+
+	a:hover {
+		color: var(--color-primary-element-hover);
+	}
+
+	&-link {
+		scroll-margin-top: calc(
+			var(--default-clickable-area) + 4 * var(--default-grid-baseline)
+		);
+	}
+
+	&.level1 {
+		--padding-inline-start: calc(0 * var(--level-padding));
+		font-weight: 600;
+		&:not(:nth-child(1)) {
+			margin-top: 0.5rem;
+		}
+	}
+
+	@for $i from 2 through 6 {
+		&.level#{$i} {
+			--padding-inline-start: calc(#{$i - 1} * var(--level-padding));
+		}
+	}
+}
+</style>
diff --git a/src/components/Editor/TableOfContents/TocContainer.vue b/src/components/Editor/TableOfContents/TocContainer.vue
index aedf361e8cf..32fe45ce85a 100644
--- a/src/components/Editor/TableOfContents/TocContainer.vue
+++ b/src/components/Editor/TableOfContents/TocContainer.vue
@@ -9,120 +9,37 @@
 		<div v-if="!isMobile" class="editor__toc-content">
 			<TocOutline
 				v-if="!displayToc && headings.length > 1"
-				:active-heading-id="activeHeadingId"
-				:headings="headings"
 				@show-toc="setDisplayToc(true)" />
 			<TocDesktop v-else-if="displayToc" @close="setDisplayToc(false)">
-				<TableOfContents
-					:active-heading-id="activeHeadingId"
-					:headings="headings" />
+				<TableOfContents />
 			</TocDesktop>
 		</div>
 
 		<!-- mobile -->
 		<TocMobile v-else-if="isMobile && displayToc" @close="setDisplayToc(false)">
 			<TableOfContents
-				:active-heading-id="activeHeadingId"
-				:headings="headings"
 				:show-close="false"
 				@heading-clicked="setDisplayToc(false)" />
 		</TocMobile>
 	</div>
 </template>
 
-<script lang="ts">
+<script setup>
 import { emit } from '@nextcloud/event-bus'
 import { useIsMobile } from '@nextcloud/vue/composables/useIsMobile'
-import { defineComponent } from 'vue'
 import { useEditorHeadings } from '../../../composables/useEditorHeadings.ts'
+import { provideIntersectionObserver } from '../../../composables/useVisibility.ts'
 import TableOfContents from './TableOfContents.vue'
 import TocDesktop from './TocDesktop.vue'
 import TocMobile from './TocMobile.vue'
 import TocOutline from './TocOutline.vue'
 
-export default defineComponent({
-	name: 'TocContainer',
-	components: {
-		TableOfContents,
-		TocDesktop,
-		TocMobile,
-		TocOutline,
-	},
-	setup() {
-		const { displayToc, headings } = useEditorHeadings()
-		const isMobile = useIsMobile()
-		return { displayToc, headings, isMobile }
-	},
-	data() {
-		return {
-			intersectionObserver: null,
-			visibleHeadingIds: new Set(),
-			activeHeadingId: null,
-		}
-	},
-	watch: {
-		headings() {
-			this.$nextTick(() => {
-				this.setupIntersectionObserver()
-			})
-		},
-	},
-	mounted() {
-		this.$nextTick(() => {
-			this.setupIntersectionObserver()
-		})
-	},
-	beforeUnmount() {
-		this.disconnectIntersectionObserver()
-	},
-	methods: {
-		disconnectIntersectionObserver() {
-			if (this.intersectionObserver) {
-				this.intersectionObserver.disconnect()
-				this.intersectionObserver = null
-			}
-			this.visibleHeadingIds.clear()
-		},
-		setupIntersectionObserver() {
-			this.disconnectIntersectionObserver()
-
-			const options = {
-				root: null,
-				rootMargin: '0px 0px -50% 0px',
-				threshold: 0,
-			}
-			this.intersectionObserver = new IntersectionObserver(
-				this.setActiveHeading,
-				options,
-			)
-
-			this.headings.forEach((heading) => {
-				const el = this.$root.$el.querySelector(`#${heading.id}`)
-				if (el) {
-					this.intersectionObserver.observe(el)
-				}
-			})
-		},
-		setActiveHeading(entries) {
-			entries.forEach((entry) => {
-				if (entry.isIntersecting) {
-					this.visibleHeadingIds.add(entry.target.id)
-				} else {
-					this.visibleHeadingIds.delete(entry.target.id)
-				}
-			})
-			const firstVisible = this.headings.find((heading) =>
-				this.visibleHeadingIds.has(heading.id),
-			)
-			if (firstVisible) {
-				this.activeHeadingId = firstVisible.id
-			}
-		},
-		setDisplayToc(visible) {
-			emit('text:toc:toggle', { visible })
-		},
-	},
-})
+provideIntersectionObserver()
+const { displayToc, headings } = useEditorHeadings()
+const isMobile = useIsMobile()
+const setDisplayToc = (visible) => {
+	emit('text:toc:toggle', { visible })
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/Editor/TableOfContents/TocOutline.vue b/src/components/Editor/TableOfContents/TocOutline.vue
index 44f9bf8d3df..7ce534ea1f2 100644
--- a/src/components/Editor/TableOfContents/TocOutline.vue
+++ b/src/components/Editor/TableOfContents/TocOutline.vue
@@ -10,33 +10,18 @@
 		@mouseenter="$emit('show-toc')"
 		@click="$emit('show-toc')"
 		@keydown.enter="$emit('show-toc')">
-		<div
+		<TocOutlineEntry
 			v-for="heading in headings"
 			:key="heading.id"
-			class="outline-line"
-			:class="[
-				`level${heading.level}`,
-				{ active: heading.id === activeHeadingId },
-			]" />
+			:heading="heading" />
 	</a>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue'
+<script setup>
+import { useEditorHeadings } from '../../../composables/useEditorHeadings.ts'
+import TocOutlineEntry from './TocOutlineEntry.vue'
 
-export default defineComponent({
-	name: 'TocOutline',
-	props: {
-		activeHeadingId: {
-			type: String,
-			default: null,
-		},
-		headings: {
-			type: Array,
-			required: true,
-		},
-	},
-})
+const { headings } = useEditorHeadings()
 </script>
 
 <style lang="scss" scoped>
@@ -57,11 +42,18 @@ export default defineComponent({
 		background 0.2s,
 		box-shadow 0.2s;
 
-	&.active {
+	// only effective on the first line - see next selector
+	&.visible {
 		background-color: var(--color-main-text);
 		box-shadow: 0 0 3px var(--color-box-shadow);
 	}
 
+	// all following lines have the default style
+	.visible ~ &.visible {
+		background-color: var(--color-text-lighter);
+		box-shadow: none;
+	}
+
 	&.level2 {
 		width: 20px;
 		margin-inline-start: 4px;
diff --git a/src/components/Editor/TableOfContents/TocOutlineEntry.vue b/src/components/Editor/TableOfContents/TocOutlineEntry.vue
new file mode 100644
index 00000000000..5ad4d8f888b
--- /dev/null
+++ b/src/components/Editor/TableOfContents/TocOutlineEntry.vue
@@ -0,0 +1,16 @@
+<!--
+  - SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+
+<template>
+	<div class="outline-line" :class="[`level${heading.level}`, { visible }]" />
+</template>
+
+<script setup>
+import { toRefs } from 'vue'
+import { useVisibility } from '../../../composables/useVisibility.ts'
+const props = defineProps({ heading: { type: Object, required: true } })
+const { heading } = toRefs(props)
+const { visible } = useVisibility(heading.value.id)
+</script>
diff --git a/src/composables/useEditor.ts b/src/composables/useEditor.ts
index e9d3fe439bd..7e81e72eca7 100644
--- a/src/composables/useEditor.ts
+++ b/src/composables/useEditor.ts
@@ -15,5 +15,5 @@ export const useEditor = () => {
 	if (!editor) {
 		throw new Error('Failed to inject Editor')
 	}
-	return { editor: editor as Editor }
+	return { editor }
 }
diff --git a/src/composables/useEditorHeadings.ts b/src/composables/useEditorHeadings.ts
index c17c2b7bb88..90d0f0c3ddb 100644
--- a/src/composables/useEditorHeadings.ts
+++ b/src/composables/useEditorHeadings.ts
@@ -38,27 +38,10 @@ export const displayTocKey = Symbol('text:displaytoc') as InjectionKey<Ref<boole
 export const provideEditorHeadings = (editor: Editor) => {
 	const headings = shallowRef<Heading[]>([])
 	const displayToc = ref<boolean>(false)
-	const syncHeadings = (newHeadings: Heading[]) => {
-		// Check length first (performant)
-		if (headings.value.length !== newHeadings.length) {
-			headings.value = newHeadings
-			return
-		}
-
-		// Deep comparison if length match
-		const hasChanged = newHeadings.some((heading, index) => {
-			const current = headings.value[index]
-			const keys = Object.keys(heading) as (keyof Heading)[]
-			return keys.some((key) => heading[key] !== current[key])
-		})
-
-		if (hasChanged) {
-			headings.value = newHeadings
-		}
-	}
 
 	const updateHeadings = () => {
-		syncHeadings(headingAnchorPluginKey.getState(editor.state)?.headings ?? [])
+		headings.value =
+			headingAnchorPluginKey.getState(editor.state)?.headings ?? []
 	}
 	updateHeadings() // Initial sync on setup
 	editor.on('update', ({ transaction }) => {
diff --git a/src/composables/useVisibility.ts b/src/composables/useVisibility.ts
new file mode 100644
index 00000000000..c489c8865d9
--- /dev/null
+++ b/src/composables/useVisibility.ts
@@ -0,0 +1,88 @@
+/**
+ * SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import {
+	computed,
+	inject,
+	nextTick,
+	onMounted,
+	onUnmounted,
+	provide,
+	readonly,
+	shallowRef,
+	type InjectionKey,
+	type Ref,
+} from 'vue'
+import { logger } from '../helpers/logger'
+import { useEditor } from './useEditor'
+
+export const intersectionObserverKey = Symbol(
+	'text:intersection_observer',
+) as InjectionKey<IntersectionObserver>
+export const visibleIdsKey = Symbol('text:visibile_ids') as InjectionKey<
+	Ref<Set<string>>
+>
+
+const intersectionObserverOptions = {
+	root: null,
+	rootMargin: '0px 0px -50% 0px',
+	threshold: 0,
+}
+
+export const provideIntersectionObserver = () => {
+	// Vue2 does not support reactive sets.
+	// So the shallow ref needs to be explicitely written every time the set changes.
+	const visibleIds = shallowRef<Set<string>>(new Set())
+	const update: IntersectionObserverCallback = (entries) => {
+		const ids = new Set(visibleIds.value)
+		entries.forEach((entry) => {
+			if (entry.isIntersecting) {
+				ids.add(entry.target.id)
+			} else {
+				ids.delete(entry.target.id)
+			}
+		})
+		visibleIds.value = ids
+	}
+
+	const intersectionObserver = new IntersectionObserver(
+		update,
+		intersectionObserverOptions,
+	)
+
+	onUnmounted(() => {
+		intersectionObserver.disconnect()
+	})
+	provide(intersectionObserverKey, intersectionObserver)
+	provide(visibleIdsKey, visibleIds)
+}
+
+export const useVisibility = (id: string) => {
+	const { editor } = useEditor()
+	const intersectionObserver = inject(intersectionObserverKey)!
+	const visibleIds = inject(visibleIdsKey)!
+
+	onMounted(() => {
+		nextTick(() => {
+			const el = editor.view.dom.querySelector(`#${id}`)
+			if (el) {
+				intersectionObserver.observe(el)
+			} else {
+				logger.warn(`Could not find element with id ${id}`)
+			}
+		})
+	})
+
+	onUnmounted(() => {
+		visibleIds.value.delete(id)
+		visibleIds.value = new Set(visibleIds.value) // trigger reactivity
+		const el = editor.view.dom.querySelector(`#${id}`)
+		if (el) {
+			intersectionObserver.unobserve(el)
+		}
+	})
+	const visible = computed(() => visibleIds.value.has(id))
+	return { visible: readonly(visible) }
+}
diff --git a/src/nodes/Heading.js b/src/nodes/Heading.js
index dfd78799286..144a379d371 100644
--- a/src/nodes/Heading.js
+++ b/src/nodes/Heading.js
@@ -4,7 +4,7 @@
  */
 
 import TipTapHeading from '@tiptap/extension-heading'
-import headingAnchor from '../plugins/headingAnchor.js'
+import headingAnchor from '../plugins/headingAnchor.ts'
 
 const Heading = TipTapHeading.extend({
 	addKeyboardShortcuts() {
diff --git a/src/plugins/extractHeadings.js b/src/plugins/extractHeadings.ts
similarity index 65%
rename from src/plugins/extractHeadings.js
rename to src/plugins/extractHeadings.ts
index 04cd8d86451..6da1e5df8d7 100644
--- a/src/plugins/extractHeadings.js
+++ b/src/plugins/extractHeadings.ts
@@ -3,20 +3,21 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
+import type { Node } from '@tiptap/pm/model'
+import type { Heading } from '../composables/useEditorHeadings'
 import { slugify } from './slug.js'
 
 /**
  * Extract heading data structure from doc
  *
- * @param {Document} doc - the prosemirror doc
- * @param {Array} oldVal - the previous headings
- * @return {Array} headings found in the doc
+ * @param doc - the prosemirror doc
+ * @return headings found in the doc
  */
-export default function extractHeadings(doc, oldVal = []) {
+export default function extractHeadings(doc: Node) {
 	const counter = new Map()
-	const headings = []
+	const headings: Heading[] = []
 
-	const getId = (text) => {
+	const getId = (text: string) => {
 		const id = slugify(text)
 		if (counter.has(id)) {
 			const next = counter.get(id)
@@ -29,7 +30,7 @@ export default function extractHeadings(doc, oldVal = []) {
 		return 'h-' + id
 	}
 
-	doc.descendants((node, offset, _parent, index) => {
+	doc.descendants((node, offset) => {
 		if (node.type.name !== 'heading') {
 			return
 		}
@@ -37,14 +38,11 @@ export default function extractHeadings(doc, oldVal = []) {
 		// ignore empty headings
 		if (!text) return
 		const id = getId(text)
-		const old = oldVal.at(index)
-		const prev = old?.id === id ? { previous: old.level } : {}
 		const heading = Object.freeze({
 			level: node.attrs.level,
 			text,
 			id,
 			offset,
-			...prev,
 		})
 		headings.push(heading)
 	})
diff --git a/src/plugins/headingAnchor.js b/src/plugins/headingAnchor.ts
similarity index 56%
rename from src/plugins/headingAnchor.js
rename to src/plugins/headingAnchor.ts
index ff687675e0e..9d7f8f7e4ce 100644
--- a/src/plugins/headingAnchor.js
+++ b/src/plugins/headingAnchor.ts
@@ -4,12 +4,19 @@
  */
 
 import { t } from '@nextcloud/l10n'
-import { Plugin, PluginKey } from '@tiptap/pm/state'
-import { Decoration, DecorationSet } from '@tiptap/pm/view'
-import extractHeadings from './extractHeadings.js'
+import type { Node } from '@tiptap/pm/model'
+import { Plugin, PluginKey, Transaction } from '@tiptap/pm/state'
+import { Decoration, DecorationSet, EditorView } from '@tiptap/pm/view'
+import type { Heading } from '../composables/useEditorHeadings'
+import extractHeadings from './extractHeadings'
 
 export const headingAnchorPluginKey = new PluginKey('headingAnchor')
 
+interface HeadingAnchorState {
+	headings: Heading[]
+	decorations: DecorationSet
+}
+
 /**
  * Heading anchor decorations ProseMirror plugin
  * Add anchor tags with a unique id to all headings.
@@ -42,7 +49,7 @@ export default function headingAnchor() {
 
 		props: {
 			decorations(state) {
-				return this.getState(state).decorations
+				return this.getState(state)!.decorations
 			},
 		},
 	})
@@ -54,13 +61,17 @@ export default function headingAnchor() {
  * 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
+ * @param value - previous plugin state
+ * @param tr - current transaction
+ * @param headings - array of headings
  *
  * @return {false|DecorationSet}
  */
-function mapDecorations(value, tr, headings) {
+function mapDecorations(
+	value: HeadingAnchorState,
+	tr: Transaction,
+	headings: Heading[],
+) {
 	if (headingsChanged(headings, value.headings)) {
 		return false
 	}
@@ -78,10 +89,8 @@ function mapDecorations(value, tr, headings) {
  *
  * @param {Array} current - array of headings
  * @param {Array} prev - headings to compare against
- *
- * @return {boolean}
  */
-function headingsChanged(current, prev) {
+function headingsChanged(current: Heading[], prev: Heading[]) {
 	return current.length !== prev.length || current.some(isDifferentFrom(prev))
 }
 
@@ -94,58 +103,62 @@ function headingsChanged(current, prev) {
  * 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) => {
+const isDifferentFrom = (other: Heading[]) => (heading: Heading, i: number) => {
 	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}
+ * @param doc - prosemirror doc
+ * @param headings - headings structure in the doc
  */
-function anchorDecorations(doc, headings) {
+function anchorDecorations(doc: Node, headings: Heading[]) {
 	const decorations = headings.map(decorationForHeading)
 	return DecorationSet.create(doc, decorations)
 }
 
 /**
  * Create a decoration for the given heading
- * @param {object} heading to decorate
- * @return {Decoration}
+ * @param heading to decorate
  */
-function decorationForHeading(heading) {
-	return Decoration.widget(heading.offset + 1, anchorForHeading(heading), {
+function decorationForHeading(heading: Heading) {
+	return Decoration.widget(heading.offset + 1, headingToDom(heading), {
 		side: -1,
 	})
 }
 
 /**
- * Create an anchor element for the given heading
- * @param {object} heading to generate anchor for
- * @return {HTMLElement}
+ * Returns a toDom function that creates an anchor element for the given heading
+ * @param heading to generate anchor for
  */
-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', t('text', 'Link to this section'))
-	el.setAttribute('contenteditable', 'false')
-	el.addEventListener('click', handleClick)
-	return el
+function headingToDom(heading: Heading) {
+	return (view: EditorView) => {
+		const existing = view.dom.querySelector(`#${heading.id}`)
+		if (existing) {
+			return existing
+		}
+		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', 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) {
+function handleClick(event: PointerEvent) {
 	event.stopPropagation()
 	event.preventDefault()
-	event.target.scrollIntoView({ block: 'start', behavior: 'smooth' })
-	window.history.replaceState({}, '', event.target.getAttribute('href'))
+	const el = event.target as Element
+	el.scrollIntoView({ block: 'start', behavior: 'smooth' })
+	window.history.replaceState({}, '', el.getAttribute('href'))
 }
diff --git a/src/tests/components/Editor/TableOfContents.spec.ts b/src/tests/components/Editor/TableOfContents.spec.ts
index 791de3f3b8a..2fd94a1ab53 100644
--- a/src/tests/components/Editor/TableOfContents.spec.ts
+++ b/src/tests/components/Editor/TableOfContents.spec.ts
@@ -4,42 +4,31 @@
  */
 
 import type { Editor } from '@tiptap/core'
-import { mount } from '@vue/test-utils'
+import { shallowMount } from '@vue/test-utils'
 import { expect, test } from 'vitest'
-import { shallowRef, type ShallowRef } from 'vue'
+import { nextTick, shallowRef } from 'vue'
+import TableOfContents from '../../../components/Editor/TableOfContents/TableOfContents.vue'
 import TocContainer from '../../../components/Editor/TableOfContents/TocContainer.vue'
+import TocOutline from '../../../components/Editor/TableOfContents/TocOutline.vue'
 import { editorKey } from '../../../composables/useEditor'
 import {
 	displayTocKey,
 	headingsKey,
 	provideEditorHeadings,
-	type Heading as HeadingType,
 } from '../../../composables/useEditorHeadings'
 import Heading from '../../../nodes/Heading.js'
 import createCustomEditor from '../../testHelpers/createCustomEditor'
 
-interface TocContainerInstance {
-	headings: ShallowRef<HeadingType[]>
-	displayToc: ShallowRef<boolean>
-	isMobile: ShallowRef<boolean>
-	intersectionObserver: IntersectionObserver | null
-	disconnectIntersectionObserver: () => void
-}
-
 const text1 = 'Level 1 heading'
 const text2 = 'Level 2 heading'
 const content = `<h1>${text1}</h1>\n<h2>${text2}</h2>`
-const headingsForContent = [
-	{ id: 'h-level-1-heading', level: 1, offset: 0, text: text1 },
-	{ id: 'h-level-2-heading', level: 2, offset: 17, text: text2 },
-]
 
 const createEditor = (content = '') => createCustomEditor(content, [Heading])
 const mountWithEditor = (editor: Editor, displayToc = false) => {
 	const { headings, displayToc: displayTocRef } = provideEditorHeadings(editor)
 	displayTocRef.value = displayToc
 
-	return mount(TocContainer, {
+	return shallowMount(TocContainer, {
 		provide: {
 			[editorKey as symbol]: shallowRef(editor),
 			[displayTocKey as symbol]: displayTocRef,
@@ -51,15 +40,15 @@ const mountWithEditor = (editor: Editor, displayToc = false) => {
 test('renders nothing for editor without headings', () => {
 	const editor = createEditor('no heading here')
 	const wrapper = mountWithEditor(editor)
+	expect(wrapper.findComponent(TocOutline).exists()).toBe(false)
 	expect(wrapper.text()).toEqual('')
-	expect((wrapper.vm as unknown as TocContainerInstance).headings).toEqual([])
 	editor.destroy()
 })
 
 test('renders nothing for editor with just one heading', () => {
 	const editor = createEditor('# Heading 1')
 	const wrapper = mountWithEditor(editor)
-	expect(wrapper.find('[data-text-el="editor-outline"]').exists()).toBe(false)
+	expect(wrapper.findComponent(TocOutline).exists()).toBe(false)
 	expect(wrapper.text()).toEqual('')
 	editor.destroy()
 })
@@ -67,31 +56,24 @@ test('renders nothing for editor with just one heading', () => {
 test('renders outline with two headings', async () => {
 	const editor = createEditor(content)
 	const wrapper = mountWithEditor(editor)
-	expect(wrapper.find('[data-text-el="editor-outline"]').exists()).toBe(true)
-	expect((wrapper.vm as unknown as TocContainerInstance).headings).toEqual(
-		headingsForContent,
-	)
+	expect(wrapper.findComponent(TocOutline).exists()).toBe(true)
+	expect(wrapper.text()).toEqual('')
 	editor.destroy()
 })
 
 test('displays table of contents when displayToc is true', async () => {
 	const editor = createEditor(content)
 	const wrapper = mountWithEditor(editor, true)
-	expect(wrapper.text()).toContain(text1)
-	expect(wrapper.text()).toContain(text2)
-	expect((wrapper.vm as unknown as TocContainerInstance).headings).toEqual(
-		headingsForContent,
-	)
+	expect(wrapper.findComponent(TocOutline).exists()).toBe(false)
+	expect(wrapper.findComponent(TableOfContents).exists()).toBe(true)
 	editor.destroy()
 })
 
 test('updates according to editor changes', async () => {
 	const editor = createEditor()
 	const wrapper = mountWithEditor(editor)
-	expect((wrapper.vm as unknown as TocContainerInstance).headings).toEqual([])
 	editor.commands.insertContent(content)
-	expect((wrapper.vm as unknown as TocContainerInstance).headings).toEqual(
-		headingsForContent,
-	)
+	await nextTick()
+	expect(wrapper.findComponent(TocOutline).exists()).toBe(true)
 	editor.destroy()
 })
diff --git a/src/tests/composables/useEditorHeadings.spec.js b/src/tests/composables/useEditorHeadings.spec.js
new file mode 100644
index 00000000000..239e4b2f41b
--- /dev/null
+++ b/src/tests/composables/useEditorHeadings.spec.js
@@ -0,0 +1,65 @@
+/**
+ * SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import { mount } from '@vue/test-utils'
+import { expect, test } from 'vitest'
+import { defineComponent, nextTick } from 'vue'
+import {
+	provideEditorHeadings,
+	useEditorHeadings,
+} from '../../composables/useEditorHeadings.ts'
+import Heading from '../../nodes/Heading.js'
+import createCustomEditor from '../testHelpers/createCustomEditor.ts'
+
+const ChildComponent = defineComponent({
+	template: '<span id="child">{{ { headings, displayToc } }}</span>',
+	setup() {
+		const { headings, displayToc } = useEditorHeadings()
+		return { headings, displayToc }
+	},
+})
+
+const ParentComponent = defineComponent({
+	template: '<div><slot /></div>',
+	props: ['editor'],
+	setup(props) {
+		const { headings, displayToc } = provideEditorHeadings(props.editor)
+		return { headings, displayToc }
+	},
+})
+
+const createWrapper = (editor) =>
+	mount(ParentComponent, {
+		propsData: { editor },
+		slots: { default: ChildComponent },
+	})
+
+const text1 = 'Level 1 heading'
+const text2 = 'Level 2 heading'
+const content = `<h1>${text1}</h1>\n<h2>${text2}</h2>`
+const headingsForContent = [
+	{ id: 'h-level-1-heading', level: 1, offset: 0, text: text1 },
+	{ id: 'h-level-2-heading', level: 2, offset: 17, text: text2 },
+]
+
+test('provides and injects empty headings', async () => {
+	const editor = createCustomEditor('', [Heading])
+	const wrapper = createWrapper(editor)
+	expect(wrapper.vm.headings).toEqual([])
+	const injected = JSON.parse(wrapper.get('#child').text())
+	expect(injected.headings).toEqual([])
+	editor.destroy()
+})
+
+test('updates headings', async () => {
+	const editor = createCustomEditor('', [Heading])
+	const wrapper = createWrapper(editor)
+	editor.commands.insertContent(content)
+	await nextTick()
+	const injected = JSON.parse(wrapper.get('#child').text())
+	expect(wrapper.vm.headings).toEqual(headingsForContent)
+	expect(injected.headings).toEqual(headingsForContent)
+	editor.destroy()
+})
diff --git a/src/tests/plugins/extractHeadings.spec.js b/src/tests/plugins/extractHeadings.spec.js
index fede77c1007..5adaf5cbb74 100644
--- a/src/tests/plugins/extractHeadings.spec.js
+++ b/src/tests/plugins/extractHeadings.spec.js
@@ -4,7 +4,7 @@
  */
 
 import Heading from '../../nodes/Heading.js'
-import extractHeadings from '../../plugins/extractHeadings.js'
+import extractHeadings from '../../plugins/extractHeadings.ts'
 import createCustomEditor from '../testHelpers/createCustomEditor.ts'
 
 describe('extractHeadings', () => {
@@ -44,22 +44,6 @@ describe('extractHeadings', () => {
 		const headings = extractHeadings(doc)
 		expect(headings[1].id).toEqual('h-level-1-heading--1')
 	})
-
-	it('includes previous level', () => {
-		const before = prepareDoc('<h1>heading 1->3</h1>')
-		const previousHeadings = extractHeadings(before)
-		const after = prepareDoc('<h3>heading 1->3</h3>')
-		const headings = extractHeadings(after, previousHeadings)
-		expect(headings).toEqual([
-			{
-				id: 'h-heading-1-3',
-				level: 3,
-				offset: 0,
-				previous: 1,
-				text: 'heading 1->3',
-			},
-		])
-	})
 })
 
 const prepareDoc = (content) => {