Fix intersection observer life cycle

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) {

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>

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>

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>