diff --git a/cypress/e2e/MenuBar.spec.js b/cypress/e2e/MenuBar.spec.js
index 76c885a9be4..14876db599c 100644
--- a/cypress/e2e/MenuBar.spec.js
+++ b/cypress/e2e/MenuBar.spec.js
@@ -63,14 +63,14 @@ describe('Test the rich text editor menu bar', function () {
 
 		it('applys default', function () {
 			cy.openTestFile()
-			cy.get('@maxWidth').should('equal', '80ch')
+			cy.get('@maxWidth').should('equal', 'min(80ch, (100% - 2 * 40px))')
 		})
 
 		it('toggles value', function () {
 			cy.openTestFile()
 			cy.getActionEntry('remain').click()
 			cy.contains('Full width editor').click()
-			cy.get('@maxWidth').should('equal', '100%')
+			cy.get('@maxWidth').should('equal', 'calc(100% - 2 * 40px)')
 		})
 
 		it('preserves on reopen', function () {
@@ -79,7 +79,7 @@ describe('Test the rich text editor menu bar', function () {
 			cy.contains('Full width editor').click()
 			cy.closeFile()
 			cy.openTestFile()
-			cy.get('@maxWidth').should('equal', '100%')
+			cy.get('@maxWidth').should('equal', 'calc(100% - 2 * 40px)')
 		})
 
 		it('preserves on reload', function () {
@@ -88,7 +88,7 @@ describe('Test the rich text editor menu bar', function () {
 			cy.contains('Full width editor').click()
 			cy.visit('/apps/files')
 			cy.openTestFile()
-			cy.get('@maxWidth').should('equal', '100%')
+			cy.get('@maxWidth').should('equal', 'calc(100% - 2 * 40px)')
 		})
 
 		it('does not interfere if width is already set', function () {
diff --git a/cypress/e2e/sections.spec.js b/cypress/e2e/sections.spec.js
index e1269c2c395..46c6fdfceb4 100644
--- a/cypress/e2e/sections.spec.js
+++ b/cypress/e2e/sections.spec.js
@@ -8,7 +8,7 @@ import { randUser } from '../utils/index.js'
 const user = randUser()
 const fileName = 'empty.md'
 
-const clickOutline = () => {
+const clickMenubarTableOfContents = () => {
 	cy.getActionEntry('headings').click()
 
 	cy.get('.v-popper__wrapper .open').getActionEntry('outline').click()
@@ -107,7 +107,7 @@ describe('Content Sections', () => {
 	})
 
 	describe('Table of Contents', () => {
-		it('sidebar toc', () => {
+		it('toc via sidebar', () => {
 			cy.visitTestFolder()
 			cy.openFile(fileName, { force: true })
 			cy.getContent().type(
@@ -115,9 +115,9 @@ describe('Content Sections', () => {
 			)
 			cy.closeFile()
 				.then(() => cy.openFile(fileName, { force: true }))
-				.then(clickOutline)
+				.then(clickMenubarTableOfContents)
 
-			cy.getOutline().find('header').should('exist')
+			cy.getTOC().find('.editor__toc-header').should('exist')
 
 			cy.getTOC().find('ul li').should('have.length', 6)
 			cy.getTOC()
@@ -134,11 +134,30 @@ describe('Content Sections', () => {
 				})
 		})
 
+		it('outline', () => {
+			cy.visitTestFolder()
+			cy.openFile(fileName, { force: true })
+			cy.getContent().type('# T1 \n')
+
+			// No outline with one heading
+			cy.getOutline().should('not.exist')
+
+			cy.getContent().type('## T2 \n### T3 \n#### T4 \n##### T5 \n###### T6\n')
+
+			// Open table of contents via outline
+			cy.getOutline().should('exist').click()
+
+			cy.getTOC().find('.editor__toc-header').should('exist')
+			cy.getTOC().find('ul li').should('have.length', 6)
+		})
+
 		it('empty toc', () => {
 			cy.visitTestFolder()
-			cy.openFile(fileName, { force: true }).then(clickOutline)
+			cy.openFile(fileName, { force: true })
+			// No outline without headings
+			cy.getOutline().should('not.exist').then(clickMenubarTableOfContents)
 
-			cy.getOutline().find('ul').should('be.empty')
+			cy.getTOC().find('ul').should('be.empty')
 		})
 	})
 })
diff --git a/cypress/e2e/share.spec.js b/cypress/e2e/share.spec.js
index e5a1526ed33..ca901fe63aa 100644
--- a/cypress/e2e/share.spec.js
+++ b/cypress/e2e/share.spec.js
@@ -45,7 +45,7 @@ describe('Open test.md in viewer', function () {
 					.getActionEntry('outline')
 					.click()
 
-				cy.getOutline().find('header').should('exist')
+				cy.getTOC().find('.editor__toc-header').should('exist')
 			})
 	})
 
diff --git a/cypress/e2e/shareWithAttachments.spec.js b/cypress/e2e/shareWithAttachments.spec.js
index 5d5b13127cf..1bae56c9fae 100644
--- a/cypress/e2e/shareWithAttachments.spec.js
+++ b/cypress/e2e/shareWithAttachments.spec.js
@@ -92,8 +92,8 @@ describe('Public Share with attachments', () => {
 
 	it('open attached files in folder description', function () {
 		cy.visit(`/s/${this.token}`)
-		cy.get('.content-wrapper').should('exist')
-		cy.get('.content-wrapper .name', { timeout: 10_000 }).click()
+		cy.get('.editor__content-wrapper').should('exist')
+		cy.get('.editor__content-wrapper .name', { timeout: 10_000 }).click()
 		cy.get('.viewer').should('exist')
 		cy.get('.language-plaintext').should('contain', 'multiple lines')
 	})
diff --git a/src/components/BaseReader.vue b/src/components/BaseReader.vue
index e081af8d933..2c6ee92618e 100644
--- a/src/components/BaseReader.vue
+++ b/src/components/BaseReader.vue
@@ -4,20 +4,12 @@
 -->
 
 <template>
-	<div
-		data-text-el="editor-content-wrapper"
-		class="content-wrapper text-editor__content-wrapper"
-		:class="{
-			'--show-outline': showOutline,
-		}">
-		<div v-if="showOutline" class="text-editor__content-wrapper__left">
-			<EditorOutline />
-		</div>
+	<div data-text-el="editor-content-wrapper" class="editor__content-wrapper">
 		<EditorContent
 			id="read-only-editor"
 			class="editor__content text-editor__content"
 			:editor="editor" />
-		<div class="text-editor__content-wrapper__right" />
+		<TocContainer v-if="useTableOfContents" />
 	</div>
 </template>
 
@@ -26,22 +18,17 @@ import { Editor } from '@tiptap/core'
 import { EditorContent } from '@tiptap/vue-2'
 import { inject, watch } from 'vue'
 import { provideEditor } from '../composables/useEditor.ts'
+import { useEditorFlags } from '../composables/useEditorFlags.ts'
 import { useEditorMethods } from '../composables/useEditorMethods.ts'
-import EditorOutline from './Editor/EditorOutline.vue'
-import {
-	useOutlineActions,
-	useOutlineStateMixin,
-} from './Editor/Wrapper.provider.js'
+import TocContainer from './Editor/TableOfContents/TocContainer.vue'
 
 export default {
 	name: 'BaseReader',
 	components: {
 		EditorContent,
-		EditorOutline,
+		TocContainer,
 	},
 
-	mixins: [useOutlineStateMixin, useOutlineActions],
-
 	props: {
 		content: {
 			type: String,
@@ -55,6 +42,7 @@ export default {
 		const editor = new Editor({ extensions: extensions() })
 		provideEditor(editor)
 
+		const { useTableOfContents } = useEditorFlags()
 		const { setContent, setEditable } = useEditorMethods(editor)
 		watch(
 			() => props.content,
@@ -68,13 +56,7 @@ export default {
 		// Render the initial content last as it may render Vue components
 		// that break the vue context of this setup function.
 		setContent(props.content, { addToHistory: false })
-		return { editor }
-	},
-
-	computed: {
-		showOutline() {
-			return this.$outlineState.visible
-		},
+		return { editor, useTableOfContents }
 	},
 
 	beforeDestroy() {
@@ -86,22 +68,7 @@ export default {
 <style scoped lang="scss">
 .editor__content {
 	max-width: var(--text-editor-max-width);
-	margin: auto;
+	margin: 0 auto;
 	position: relative;
-	width: 100%;
-}
-
-.text-editor__content-wrapper {
-	--side-width: calc((100% - var(--text-editor-max-width)) / 2);
-	display: grid;
-	grid-template-columns: 1fr auto;
-	&.--show-outline {
-		grid-template-columns: var(--side-width) auto var(--side-width);
-	}
-	.text-editor__content-wrapper__left,
-	.text-editor__content-wrapper__right {
-		height: 100%;
-		position: relative;
-	}
 }
 </style>
diff --git a/src/components/Editor.vue b/src/components/Editor.vue
index afa472f7db6..acda7c30893 100644
--- a/src/components/Editor.vue
+++ b/src/components/Editor.vue
@@ -18,9 +18,7 @@
 			:is-resolving-conflict="isResolvingConflict"
 			:has-connection-issue="requireReconnect"
 			:content-loaded="contentLoaded"
-			:show-outline-outside="showOutlineOutside"
-			@read-only-toggled="readOnlyToggled"
-			@outline-toggled="outlineToggled">
+			@read-only-toggled="readOnlyToggled">
 			<MainContainer v-if="contentLoaded">
 				<!-- Readonly -->
 				<template v-if="readOnly || (openReadOnlyEnabled && !editMode)">
@@ -99,6 +97,7 @@ import { generateRemoteUrl } from '@nextcloud/router'
 import { Awareness } from 'y-protocols/awareness.js'
 import { provideConnection } from '../composables/useConnection.ts'
 import { useDelayedFlag } from '../composables/useDelayedFlag.ts'
+import { provideEditorHeadings } from '../composables/useEditorHeadings.ts'
 import { useEditorMethods } from '../composables/useEditorMethods.ts'
 import { provideEditorWidth } from '../composables/useEditorWidth.ts'
 import { provideSaveService } from '../composables/useSaveService.ts'
@@ -213,10 +212,6 @@ export default defineComponent({
 			type: Boolean,
 			default: false,
 		},
-		showOutlineOutside: {
-			type: Boolean,
-			default: false,
-		},
 	},
 
 	setup(props) {
@@ -230,7 +225,8 @@ export default defineComponent({
 		const awareness = new Awareness(ydoc)
 		const hasConnectionIssue = ref(false)
 		const { delayed: requireReconnect } = useDelayedFlag(hasConnectionIssue)
-		const { isPublic, isRichEditor, isRichWorkspace } = provideEditorFlags(props)
+		const { isPublic, isRichEditor, isRichWorkspace, useTableOfContents } =
+			provideEditorFlags(props)
 		const { language, lowlightLoaded } = useSyntaxHighlighting(
 			isRichEditor,
 			props,
@@ -252,9 +248,11 @@ export default defineComponent({
 			: createPlainEditor({ language, extensions })
 		provideEditor(editor)
 
-		const { applyEditorWidth } = provideEditorWidth()
+		const { applyEditorWidth } = provideEditorWidth(useTableOfContents)
 		applyEditorWidth()
 
+		provideEditorHeadings(editor)
+
 		const { setEditable, updateUser } = useEditorMethods(editor)
 
 		const serialize = isRichEditor
@@ -759,10 +757,6 @@ export default defineComponent({
 			return yjsData
 		},
 
-		outlineToggled(visible) {
-			this.emit('outline-toggled', visible)
-		},
-
 		readOnlyToggled() {
 			if (this.editMode) {
 				this.saveService.save()
@@ -894,10 +888,6 @@ export default defineComponent({
 		&.draggedOver {
 			background-color: var(--color-primary-element-light);
 		}
-
-		.text-editor__content-wrapper {
-			position: relative;
-		}
 	}
 }
 
@@ -905,11 +895,11 @@ export default defineComponent({
 	width: 50%;
 }
 
-.text-editor__wrapper.has-conflicts > .content-wrapper {
+.text-editor__wrapper.has-conflicts > .editor__content-wrapper {
 	width: 50%;
 
 	#read-only-editor {
-		margin: 0px auto;
+		margin: 0 auto;
 		// Add height of the menubar as padding-top
 		padding-top: calc(
 			var(--default-clickable-area) + 2 * var(--default-grid-baseline)
diff --git a/src/components/Editor/ContentContainer.vue b/src/components/Editor/ContentContainer.vue
index efbc083308a..7ee6b8e972d 100644
--- a/src/components/Editor/ContentContainer.vue
+++ b/src/components/Editor/ContentContainer.vue
@@ -4,22 +4,14 @@
 -->
 
 <template>
-	<div
-		data-text-el="editor-content-wrapper"
-		class="content-wrapper text-editor__content-wrapper"
-		:class="{
-			'--show-outline': showOutline,
-		}">
-		<div v-if="showOutline" class="text-editor__content-wrapper__left">
-			<EditorOutline />
-		</div>
+	<div data-text-el="editor-content-wrapper" class="editor__content-wrapper">
 		<slot />
 		<FloatingButtons v-if="showFloatingButtons" />
 		<EditorContent
 			role="document"
 			class="editor__content text-editor__content"
 			:editor="editor" />
-		<div class="text-editor__content-wrapper__right" />
+		<TocContainer v-if="useTableOfContents" />
 	</div>
 </template>
 
@@ -28,19 +20,16 @@ import { useIsMobile } from '@nextcloud/vue/composables/useIsMobile'
 import { EditorContent } from '@tiptap/vue-2'
 import { useEditor } from '../../composables/useEditor.ts'
 import { useEditorFlags } from '../../composables/useEditorFlags.ts'
-import { useEditorWidth } from '../../composables/useEditorWidth.ts'
-import EditorOutline from './EditorOutline.vue'
 import FloatingButtons from './FloatingButtons.vue'
-import { useOutlineStateMixin } from './Wrapper.provider.js'
+import TocContainer from './TableOfContents/TocContainer.vue'
 
 export default {
 	name: 'ContentContainer',
 	components: {
 		EditorContent,
-		EditorOutline,
 		FloatingButtons,
+		TocContainer,
 	},
-	mixins: [useOutlineStateMixin],
 	props: {
 		readOnly: {
 			type: Boolean,
@@ -50,19 +39,21 @@ export default {
 	setup() {
 		const isMobile = useIsMobile()
 		const { editor } = useEditor()
-		const { isRichEditor, isRichWorkspace } = useEditorFlags()
-		const { isFullWidth } = useEditorWidth()
-		return { editor, isMobile, isFullWidth, isRichEditor, isRichWorkspace }
+		const { isRichEditor, isRichWorkspace, useTableOfContents } =
+			useEditorFlags()
+		return {
+			editor,
+			isMobile,
+			isRichEditor,
+			isRichWorkspace,
+			useTableOfContents,
+		}
 	},
 	computed: {
-		showOutline() {
-			return this.$outlineState.visible
-		},
 		showFloatingButtons() {
 			return (
 				!this.readOnly
 				&& !this.isMobile
-				&& !this.isFullWidth
 				&& this.isRichEditor
 				&& !this.isRichWorkspace
 			)
@@ -73,40 +64,12 @@ export default {
 
 <style scoped lang="scss">
 .editor__content {
-	max-width: min(var(--text-editor-max-width), calc(100vw - 16px));
+	max-width: var(--text-editor-max-width);
 	margin: 0 auto;
 	position: relative;
-	width: 100%;
 	:deep([contenteditable]) {
 		// drop off obsolete server styles
 		margin: 0 !important;
 	}
 }
-
-.text-editor__content-wrapper {
-	--side-width: calc((100% - var(--text-editor-max-width)) / 2);
-	display: grid;
-	grid-template-columns: 1fr auto;
-	overflow: auto;
-	flex: 1;
-	&.--show-outline {
-		grid-template-columns: var(--side-width) auto var(--side-width);
-	}
-	.text-editor__content-wrapper__left,
-	.text-editor__content-wrapper__right {
-		height: 100%;
-		position: relative;
-	}
-}
-
-.is-rich-workspace {
-	.text-editor__content-wrapper {
-		--side-width: var(--text-editor-max-width);
-		grid-template-columns: var(--side-width) auto;
-		.text-editor__content-wrapper__left,
-		.text-editor__content-wrapper__right {
-			display: none;
-		}
-	}
-}
 </style>
diff --git a/src/components/Editor/EditorOutline.vue b/src/components/Editor/EditorOutline.vue
deleted file mode 100644
index 251feb507f0..00000000000
--- a/src/components/Editor/EditorOutline.vue
+++ /dev/null
@@ -1,84 +0,0 @@
-<!--
-  - SPDX-FileCopyrightText: 2022 Nextcloud GmbH and Nextcloud contributors
-  - SPDX-License-Identifier: AGPL-3.0-or-later
--->
-
-<template>
-	<div
-		data-text-el="editor-outline"
-		class="editor--outline"
-		:class="{ 'editor--outline-mobile': $isMobile }">
-		<header class="editor--outline__header">
-			<NcButton
-				class="editor--outline__btn-close"
-				variant="tertiary"
-				:aria-label="t('text', 'Close outline view')"
-				@click="$outlineActions.toggle">
-				<template #icon>
-					<Close />
-				</template>
-			</NcButton>
-			<h2>{{ t('text', 'Outline') }}</h2>
-		</header>
-		<TableOfContents />
-	</div>
-</template>
-
-<script>
-import { t } from '@nextcloud/l10n'
-import NcButton from '@nextcloud/vue/components/NcButton'
-import { useIsMobileMixin } from '../Editor.provider.ts'
-import { Close } from './../icons.js'
-import TableOfContents from './TableOfContents.vue'
-import { useOutlineActions, useOutlineStateMixin } from './Wrapper.provider.js'
-
-export default {
-	name: 'EditorOutline',
-	components: {
-		Close,
-		NcButton,
-		TableOfContents,
-	},
-	mixins: [useIsMobileMixin, useOutlineStateMixin, useOutlineActions],
-	methods: {
-		t,
-	},
-}
-</script>
-
-<style lang="scss" scoped>
-.editor--outline {
-	width: 300px;
-	padding: 0 10px 10px 10px;
-	position: fixed;
-	overflow: auto;
-	// 204px = 50px nc header + 60px collectives titlebar + 44px menubar + 50px bottom margin
-	max-height: calc(100% - 204px);
-
-	&-mobile {
-		border-radius: var(--border-radius-large);
-		box-shadow: 0 1px 10px var(--color-box-shadow);
-		background-color: var(--color-main-background-translucent);
-		z-index: 1;
-	}
-
-	&__header {
-		margin: 0;
-		position: sticky;
-		top: 0;
-		z-index: 1;
-		background-color: var(--color-main-background);
-		padding: 0.6em 0.6em 0.6em 0;
-		display: flex;
-		align-items: center;
-
-		h2 {
-			font-size: 1rem;
-			line-height: 1.1rem;
-			flex-grow: 1;
-			padding: 0;
-			margin: 0;
-		}
-	}
-}
-</style>
diff --git a/src/components/Editor/MarkdownContentEditor.vue b/src/components/Editor/MarkdownContentEditor.vue
index bc77b62d763..c40eb454693 100644
--- a/src/components/Editor/MarkdownContentEditor.vue
+++ b/src/components/Editor/MarkdownContentEditor.vue
@@ -4,10 +4,7 @@
 -->
 
 <template>
-	<Wrapper
-		:content-loaded="true"
-		:show-outline-outside="showOutlineOutside"
-		@outline-toggled="outlineToggled">
+	<Wrapper :content-loaded="true">
 		<MainContainer>
 			<template v-if="showMenuBar">
 				<MenuBar v-if="!readOnly" :autohide="false" />
@@ -31,7 +28,9 @@ import { UndoRedo } from '@tiptap/extensions'
 import { provide, watch } from 'vue'
 import { provideEditor } from '../../composables/useEditor.ts'
 import { editorFlagsKey } from '../../composables/useEditorFlags.ts'
+import { provideEditorHeadings } from '../../composables/useEditorHeadings.ts'
 import { useEditorMethods } from '../../composables/useEditorMethods.ts'
+import { provideEditorWidth } from '../../composables/useEditorWidth.ts'
 import { FocusTrap, RichText } from '../../extensions/index.js'
 import { createMarkdownSerializer } from '../../extensions/Markdown.js'
 import AttachmentResolver from '../../services/AttachmentResolver.js'
@@ -79,10 +78,6 @@ export default {
 			type: Boolean,
 			default: true,
 		},
-		showOutlineOutside: {
-			type: Boolean,
-			default: false,
-		},
 	},
 	emits: ['update:content'],
 
@@ -96,6 +91,7 @@ export default {
 		const editor = new Editor({ extensions })
 
 		const { setEditable, setContent } = useEditorMethods(editor)
+		const { updateHeadings } = provideEditorHeadings(editor)
 		watch(
 			() => props.content,
 			(content) => {
@@ -111,13 +107,18 @@ export default {
 			},
 		)
 
-		provideEditor(editor)
 		provide(editorFlagsKey, {
 			isPublic: false,
 			isRichEditor: true,
 			isRichWorkspace: false,
+			useTableOfContents: true,
 		})
-		return { editor, setContent }
+		provideEditor(editor)
+
+		const { applyEditorWidth } = provideEditorWidth(true)
+		applyEditorWidth()
+
+		return { editor, setContent, updateHeadings }
 	},
 
 	created() {
@@ -125,6 +126,7 @@ export default {
 		// as it may render other vue components such as preview toggle
 		// which breaks the context of the setup function.
 		this.setContent(this.content, { addToHistory: false })
+		this.updateHeadings()
 		this.editor.on('create', () => {
 			this.$emit('ready')
 			this.$parent.$emit('ready')
@@ -153,10 +155,6 @@ export default {
 	},
 
 	methods: {
-		outlineToggled(visible) {
-			this.emit('outline-toggled', visible)
-		},
-
 		/**
 		 * Wrapper to emit events on our own and the parent component
 		 *
diff --git a/src/components/Editor/PlainTableContentEditor.vue b/src/components/Editor/PlainTableContentEditor.vue
index 520376d5893..7f51a827046 100644
--- a/src/components/Editor/PlainTableContentEditor.vue
+++ b/src/components/Editor/PlainTableContentEditor.vue
@@ -4,7 +4,7 @@
 -->
 
 <template>
-	<Wrapper :content-loaded="true" :show-outline-outside="false">
+	<Wrapper :content-loaded="true">
 		<MainContainer>
 			<ContentContainer :read-only="readOnly" />
 		</MainContainer>
@@ -68,6 +68,7 @@ export default {
 			isPublic: false,
 			isRichEditor: true,
 			isRichWorkspace: false,
+			useTableOfContents: false,
 		})
 		provide(editorWidthKey, null)
 		provide(EDITOR_UPLOAD, false)
diff --git a/src/components/Editor/TableOfContents.vue b/src/components/Editor/TableOfContents.vue
deleted file mode 100644
index 21901b40b26..00000000000
--- a/src/components/Editor/TableOfContents.vue
+++ /dev/null
@@ -1,187 +0,0 @@
-<!--
-  - SPDX-FileCopyrightText: 2022 Nextcloud GmbH and Nextcloud contributors
-  - SPDX-License-Identifier: AGPL-3.0-or-later
--->
-
-<template>
-	<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.id"
-				:data-toc-level="heading.level"
-				class="editor--toc__item"
-				:class="{
-					[`editor--toc__item--${heading.level}`]: true,
-					[`editor--toc__item--previous-${heading.previous}`]:
-						heading.previous > 0,
-				}">
-				<a
-					:href="`#${heading.id}`"
-					class="editor--toc__item-link"
-					@click.prevent="goto(heading)">
-					{{ heading.text }}
-				</a>
-			</li>
-		</ul>
-	</div>
-</template>
-
-<script>
-import { useEditor } from '../../composables/useEditor.ts'
-import { headingAnchorPluginKey } from '../../plugins/headingAnchor.js'
-
-export default {
-	name: 'TableOfContents',
-	setup() {
-		const { editor } = useEditor()
-		return { editor }
-	},
-	data: () => ({
-		initialRender: true,
-		headings: [],
-	}),
-	mounted() {
-		this.editor.on('update', this.updateHeadings)
-		this.updateHeadings()
-		setTimeout(() => {
-			this.initialRender = false
-		}, 1000)
-	},
-	beforeDestroy() {
-		this.editor.off('update', this.updateHeadings)
-	},
-	methods: {
-		goto(heading) {
-			const element = this.$root.$el.querySelector(`#${heading.id}`)
-			element.scrollIntoView({ block: 'start', behavior: 'smooth' })
-			this.$nextTick(() => {
-				window.history.replaceState(
-					window.history.state,
-					'',
-					`#${heading.id}`,
-				)
-			})
-		},
-		updateHeadings() {
-			this.headings =
-				headingAnchorPluginKey.getState(this.editor.state)?.headings ?? []
-		},
-	},
-}
-</script>
-
-<style lang="scss">
-.--initial-render {
-	.editor--toc {
-		&__item {
-			--initial-padding-left: 0;
-			animation: initialPadding 1.5s;
-		}
-	}
-}
-
-.editor--toc {
-	padding: 0 10px;
-	color: var(--color-main-text-maxcontrast);
-	--animation-duration: 0.8s;
-
-	h3 {
-		padding-left: 0.75rem;
-	}
-
-	&__list {
-		width: 100%;
-		list-style: none;
-		font-size: 0.9rem;
-		padding: 0;
-
-		animation-name: fadeInLeft;
-		animation-duration: var(--animation-duration);
-	}
-
-	&__item {
-		transform: translateX(var(--padding-left, 0rem));
-		text-overflow: ellipsis;
-		overflow: hidden;
-		white-space: nowrap;
-		animation: initialPadding calc(var(--animation-duration) * 2);
-		width: calc(100% - var(--padding-left));
-
-		a:hover {
-			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;
-			&:not(:nth-child(1)) {
-				margin-top: 0.5rem;
-			}
-		}
-
-		&--2 {
-			--padding-left: 1rem;
-		}
-
-		&--3 {
-			--padding-left: 2rem;
-		}
-
-		&--4 {
-			--padding-left: 3rem;
-		}
-
-		&--5 {
-			--padding-left: 4rem;
-		}
-
-		&--6 {
-			--padding-left: 5rem;
-		}
-
-		&--previous-1 {
-			--initial-padding-left: 0rem;
-		}
-
-		&--previous-2 {
-			--initial-padding-left: 1rem;
-		}
-
-		&--previous-3 {
-			--initial-padding-left: 2rem;
-		}
-
-		&--previous-4 {
-			--initial-padding-left: 3rem;
-		}
-
-		&--previous-5 {
-			--initial-padding-left: 4rem;
-		}
-
-		&--previous-6 {
-			--initial-padding-left: 5rem;
-		}
-	}
-}
-
-@keyframes initialPadding {
-	from {
-		transform: translateX(var(--initial-padding-left, initial));
-	}
-
-	to {
-		transform: translateX(var(--padding-left, 0rem));
-	}
-}
-</style>
diff --git a/src/components/Editor/TableOfContents/TableOfContents.vue b/src/components/Editor/TableOfContents/TableOfContents.vue
new file mode 100644
index 00000000000..a569770460f
--- /dev/null
+++ b/src/components/Editor/TableOfContents/TableOfContents.vue
@@ -0,0 +1,107 @@
+<!--
+  - SPDX-FileCopyrightText: 2022 Nextcloud GmbH and Nextcloud contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+
+<template>
+	<ul class="toc-list">
+		<li
+			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>
+	</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>
+
+<style lang="scss" scoped>
+.toc-list {
+	width: 100%;
+	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/TocContainer.vue b/src/components/Editor/TableOfContents/TocContainer.vue
new file mode 100644
index 00000000000..aedf361e8cf
--- /dev/null
+++ b/src/components/Editor/TableOfContents/TocContainer.vue
@@ -0,0 +1,148 @@
+<!--
+  - SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+
+<template>
+	<div class="editor__toc-container">
+		<!-- desktop -->
+		<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" />
+			</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">
+import { emit } from '@nextcloud/event-bus'
+import { useIsMobile } from '@nextcloud/vue/composables/useIsMobile'
+import { defineComponent } from 'vue'
+import { useEditorHeadings } from '../../../composables/useEditorHeadings.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 })
+		},
+	},
+})
+</script>
+
+<style lang="scss" scoped>
+.editor__toc-container {
+	position: absolute;
+	top: 0;
+	inset-inline-end: 0;
+	max-width: 40px;
+	width: 40px;
+	height: 100%;
+	display: flex;
+	flex-direction: column;
+	align-items: flex-end;
+}
+
+.editor__toc-content {
+	position: sticky;
+	// Toolbar height + 34px
+	top: calc(var(--default-clickable-area) + 9px + 34px);
+	margin-top: calc(var(--default-clickable-area) + 9px + 34px);
+	margin-inline-end: 12px;
+}
+</style>
diff --git a/src/components/Editor/TableOfContents/TocDesktop.vue b/src/components/Editor/TableOfContents/TocDesktop.vue
new file mode 100644
index 00000000000..11cd8e9c42f
--- /dev/null
+++ b/src/components/Editor/TableOfContents/TocDesktop.vue
@@ -0,0 +1,119 @@
+<!--
+  - SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+
+<template>
+	<div
+		data-text-el="editor-table-of-contents"
+		class="editor__toc"
+		:class="{ 'editor__toc-closing': isClosing }"
+		@mouseleave="onMouseleave"
+		@animationend="onAnimationend">
+		<div class="editor__toc-header">
+			<NcButton
+				variant="tertiary"
+				size="small"
+				:title="buttonTitle"
+				:aria-label="buttonTitle"
+				@click="onButtonClick">
+				<template #icon>
+					<CloseIcon v-if="keep" :size="20" />
+					<PinOutlineIcon v-else :size="20" />
+				</template>
+			</NcButton>
+		</div>
+		<slot />
+	</div>
+</template>
+
+<script lang="ts">
+import { emit } from '@nextcloud/event-bus'
+import { t } from '@nextcloud/l10n'
+import NcButton from '@nextcloud/vue/components/NcButton'
+import { defineComponent } from 'vue'
+import CloseIcon from 'vue-material-design-icons/Close.vue'
+import PinOutlineIcon from 'vue-material-design-icons/PinOutline.vue'
+
+export default defineComponent({
+	name: 'TocDesktop',
+	components: {
+		CloseIcon,
+		PinOutlineIcon,
+		NcButton,
+	},
+	data() {
+		return {
+			keep: false,
+			isClosing: false,
+		}
+	},
+	computed: {
+		buttonTitle() {
+			return this.keep
+				? t('text', 'Close table of contents')
+				: t('text', 'Pin table of contents')
+		},
+	},
+	methods: {
+		onMouseleave() {
+			if (!this.keep) {
+				this.close()
+			}
+		},
+		onAnimationend(event) {
+			if (event.animationName === 'fadeOutRight' && this.isClosing) {
+				this.isClosing = false
+				this.$emit('close')
+			}
+		},
+		onButtonClick() {
+			if (this.keep) {
+				this.keep = false
+				this.close()
+			} else {
+				this.keep = true
+			}
+
+			if (this.$file?.fileId) {
+				emit('text:toc:pin', { fileId: this.$file.fileId, keep: this.keep })
+			}
+		},
+		close() {
+			this.isClosing = true
+		},
+		t,
+	},
+})
+</script>
+
+<style lang="scss" scoped>
+.editor__toc {
+	display: flex;
+	flex-direction: column;
+	overflow-y: auto;
+	animation-name: fadeInRight;
+	animation-duration: var(--animation-slow);
+
+	padding: 12px;
+	padding-bottom: 24px;
+	width: 200px;
+	// TODO: better max height
+	max-height: calc(100vh * 0.66);
+	background-color: var(--color-main-background);
+	border: 2px solid var(--color-border);
+	border-radius: var(--border-radius-large);
+
+	&-closing {
+		animation-name: fadeOutRight;
+	}
+
+	&-header {
+		position: sticky;
+		top: 0;
+		width: 100%;
+		display: flex;
+		justify-content: end;
+	}
+}
+</style>
diff --git a/src/components/Editor/TableOfContents/TocMobile.vue b/src/components/Editor/TableOfContents/TocMobile.vue
new file mode 100644
index 00000000000..f69f710a224
--- /dev/null
+++ b/src/components/Editor/TableOfContents/TocMobile.vue
@@ -0,0 +1,36 @@
+<!--
+  - SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+
+<template>
+	<NcModal
+		size="full"
+		:name="t('collectives', 'Table of contents')"
+		@close="$emit('close')">
+		<slot />
+	</NcModal>
+</template>
+
+<script lang="ts">
+import { t } from '@nextcloud/l10n'
+import NcModal from '@nextcloud/vue/components/NcModal'
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+	name: 'TocMobile',
+	components: {
+		NcModal,
+	},
+	methods: {
+		t,
+	},
+})
+</script>
+
+<style lang="scss" scoped>
+:deep(.modal-container__content) {
+	padding-block: 12px 0;
+	padding-inline: 12px 0;
+}
+</style>
diff --git a/src/components/Editor/TableOfContents/TocOutline.vue b/src/components/Editor/TableOfContents/TocOutline.vue
new file mode 100644
index 00000000000..44f9bf8d3df
--- /dev/null
+++ b/src/components/Editor/TableOfContents/TocOutline.vue
@@ -0,0 +1,86 @@
+<!--
+  - SPDX-FileCopyrightText: 2022 Nextcloud GmbH and Nextcloud contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+
+<template>
+	<a
+		data-text-el="editor-outline"
+		class="editor__toc-outline"
+		@mouseenter="$emit('show-toc')"
+		@click="$emit('show-toc')"
+		@keydown.enter="$emit('show-toc')">
+		<div
+			v-for="heading in headings"
+			:key="heading.id"
+			class="outline-line"
+			:class="[
+				`level${heading.level}`,
+				{ active: heading.id === activeHeadingId },
+			]" />
+	</a>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+	name: 'TocOutline',
+	props: {
+		activeHeadingId: {
+			type: String,
+			default: null,
+		},
+		headings: {
+			type: Array,
+			required: true,
+		},
+	},
+})
+</script>
+
+<style lang="scss" scoped>
+.editor__toc-outline {
+	display: flex;
+	flex-direction: column;
+	gap: 12px;
+	padding-bottom: 12px;
+}
+
+.outline-line {
+	background-color: var(--color-text-lighter);
+	height: 2px;
+	width: 24px;
+	border-radius: 2px;
+	margin-inline-start: 0;
+	transition:
+		background 0.2s,
+		box-shadow 0.2s;
+
+	&.active {
+		background-color: var(--color-main-text);
+		box-shadow: 0 0 3px var(--color-box-shadow);
+	}
+
+	&.level2 {
+		width: 20px;
+		margin-inline-start: 4px;
+	}
+	&.level3 {
+		width: 16px;
+		margin-inline-start: 8px;
+	}
+	&.level4 {
+		width: 12px;
+		margin-inline-start: 12px;
+	}
+	&.level5 {
+		width: 8px;
+		margin-inline-start: 16px;
+	}
+	&.level6 {
+		width: 4px;
+		margin-inline-start: 20px;
+	}
+}
+</style>
diff --git a/src/components/Editor/Wrapper.provider.js b/src/components/Editor/Wrapper.provider.js
index 56a231bf490..e2b27f5ae65 100644
--- a/src/components/Editor/Wrapper.provider.js
+++ b/src/components/Editor/Wrapper.provider.js
@@ -3,33 +3,8 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
-export const OUTLINE_STATE = Symbol('wrapper:outline-state')
-export const OUTLINE_ACTIONS = Symbol('wrapper:outline-actions')
 export const READ_ONLY_ACTIONS = Symbol('wrapper:read-only-actions')
 
-export const useOutlineStateMixin = {
-	inject: {
-		$outlineState: {
-			from: OUTLINE_STATE,
-			default: {
-				visible: false,
-				enable: false,
-			},
-		},
-	},
-}
-
-export const useOutlineActions = {
-	inject: {
-		$outlineActions: {
-			from: OUTLINE_ACTIONS,
-			default: {
-				toggle: () => {},
-			},
-		},
-	},
-}
-
 export const useReadOnlyActions = {
 	inject: {
 		$readOnlyActions: {
diff --git a/src/components/Editor/Wrapper.vue b/src/components/Editor/Wrapper.vue
index 381ee0f7830..a3a02a32749 100644
--- a/src/components/Editor/Wrapper.vue
+++ b/src/components/Editor/Wrapper.vue
@@ -16,13 +16,8 @@
 </template>
 
 <script>
-import { subscribe, unsubscribe } from '@nextcloud/event-bus'
 import { useEditorFlags } from '../../composables/useEditorFlags.ts'
-import {
-	OUTLINE_ACTIONS,
-	OUTLINE_STATE,
-	READ_ONLY_ACTIONS,
-} from './Wrapper.provider.js'
+import { READ_ONLY_ACTIONS } from './Wrapper.provider.js'
 
 export default {
 	name: 'Wrapper',
@@ -30,14 +25,6 @@ export default {
 		const val = {}
 
 		Object.defineProperties(val, {
-			[OUTLINE_STATE]: {
-				get: () => this.outline,
-			},
-			[OUTLINE_ACTIONS]: {
-				get: () => ({
-					toggle: this.outlineToggle,
-				}),
-			},
 			[READ_ONLY_ACTIONS]: {
 				get: () => ({
 					toggle: this.readOnlyToggle,
@@ -61,10 +48,6 @@ export default {
 			type: Boolean,
 			default: true,
 		},
-		showOutlineOutside: {
-			type: Boolean,
-			default: false,
-		},
 	},
 
 	setup() {
@@ -72,54 +55,7 @@ export default {
 		return { isRichEditor, isRichWorkspace }
 	},
 
-	data: () => ({
-		outline: {
-			visible: false,
-			enable: false,
-		},
-	}),
-
-	computed: {
-		showOutline() {
-			return this.isAbleToShowOutline ? this.outline.visible : false
-		},
-		isAbleToShowOutline() {
-			if (this.isRichWorkspace) {
-				return false
-			}
-
-			return true
-		},
-	},
-
-	watch: {
-		showOutlineOutside() {
-			this.outline.visible = this.showOutlineOutside
-		},
-	},
-
-	mounted() {
-		subscribe('text:keyboard:outline', this.outlineToggle)
-		this.outline.enable = this.isAbleToShowOutline
-
-		this.$watch(
-			() => this.isAbleToShowOutline,
-			(enable) => {
-				// make outline state reactive through the provider
-				Object.assign(this.outline, { enable })
-			},
-		)
-	},
-
-	beforeDestroy() {
-		unsubscribe('text:keyboard:outline', this.outlineToggle)
-	},
-
 	methods: {
-		outlineToggle() {
-			this.outline.visible = !this.outline.visible
-			this.$emit('outline-toggled', this.outline.visible)
-		},
 		readOnlyToggle() {
 			this.$emit('read-only-toggled')
 		},
diff --git a/src/components/Menu/ActionList.vue b/src/components/Menu/ActionList.vue
index e662cbb660e..e7820e60883 100644
--- a/src/components/Menu/ActionList.vue
+++ b/src/components/Menu/ActionList.vue
@@ -41,7 +41,6 @@ import { t } from '@nextcloud/l10n'
 import NcActions from '@nextcloud/vue/components/NcActions'
 import NcActionSeparator from '@nextcloud/vue/components/NcActionSeparator'
 import debounce from 'debounce'
-import { useOutlineStateMixin } from '../Editor/Wrapper.provider.js'
 import ActionListItem from './ActionListItem.vue'
 import { BaseActionEntry } from './BaseActionEntry.js'
 import { useMenuIDMixin } from './MenuBar.provider.js'
@@ -55,7 +54,7 @@ export default {
 		ActionListItem,
 	},
 	extends: BaseActionEntry,
-	mixins: [useOutlineStateMixin, useMenuIDMixin],
+	mixins: [useMenuIDMixin],
 	props: {
 		forceEnabled: {
 			type: Boolean,
diff --git a/src/components/Menu/BaseActionEntry.js b/src/components/Menu/BaseActionEntry.js
index d2637803712..2c225968657 100644
--- a/src/components/Menu/BaseActionEntry.js
+++ b/src/components/Menu/BaseActionEntry.js
@@ -7,13 +7,10 @@
 
 import debounce from 'debounce'
 
+import { useIsMobile } from '@nextcloud/vue/composables/useIsMobile'
 import { useEditor } from '../../composables/useEditor.ts'
-import { useIsMobileMixin } from '../Editor.provider.ts'
-import {
-	useOutlineActions,
-	useOutlineStateMixin,
-	useReadOnlyActions,
-} from '../Editor/Wrapper.provider.js'
+import { useEditorHeadings } from '../../composables/useEditorHeadings.ts'
+import { useReadOnlyActions } from '../Editor/Wrapper.provider.js'
 import { getActionState, getActionType, getKeys, getKeyshortcuts } from './utils.js'
 
 import './ActionEntry.scss'
@@ -22,15 +19,12 @@ import './ActionEntry.scss'
  * @type {import("vue").ComponentOptions} BaseActionEntry
  */
 const BaseActionEntry = {
-	mixins: [
-		useIsMobileMixin,
-		useOutlineActions,
-		useOutlineStateMixin,
-		useReadOnlyActions,
-	],
+	mixins: [useReadOnlyActions],
 	setup() {
+		const isMobile = useIsMobile()
 		const { editor } = useEditor()
-		return { editor }
+		const { displayToc } = useEditorHeadings()
+		return { displayToc, editor, isMobile }
 	},
 	props: {
 		actionEntry: {
@@ -52,7 +46,9 @@ const BaseActionEntry = {
 		label() {
 			const { label } = this.actionEntry
 
-			return typeof label === 'function' ? label(this) : label
+			return typeof label === 'function'
+				? label({ displayToc: this.displayToc })
+				: label
 		},
 		icon() {
 			return this.actionEntry.icon
@@ -61,10 +57,10 @@ const BaseActionEntry = {
 			return getKeyshortcuts(this.actionEntry)
 		},
 		tooltip() {
-			return [this.label, getKeys(this.$isMobile, this.actionEntry)].join(' ')
+			return [this.label, getKeys(this.isMobile, this.actionEntry)].join(' ')
 		},
 		listItemTooltip() {
-			return [getKeys(this.$isMobile, this.actionEntry)].join(' ')
+			return [getKeys(this.isMobile, this.actionEntry)].join(' ')
 		},
 	},
 	watch: {
diff --git a/src/components/Menu/MenuBar.vue b/src/components/Menu/MenuBar.vue
index 3fd154084e3..4068dd49ddb 100644
--- a/src/components/Menu/MenuBar.vue
+++ b/src/components/Menu/MenuBar.vue
@@ -72,6 +72,7 @@ import { ref } from 'vue'
 import { t } from '@nextcloud/l10n'
 import { useEditor } from '../../composables/useEditor.ts'
 import { useEditorFlags } from '../../composables/useEditorFlags.ts'
+import { useMenuEntries } from '../../composables/useMenuEntries.ts'
 import { useIsMobileMixin } from '../Editor.provider.ts'
 import HelpModal from '../HelpModal.vue'
 import { DotsHorizontal } from '../icons.js'
@@ -79,7 +80,6 @@ import ActionFormattingHelp from './ActionFormattingHelp.vue'
 import ActionList from './ActionList.vue'
 import ActionSingle from './ActionSingle.vue'
 import CharacterCount from './CharacterCount.vue'
-import { AssistantMenuEntries, MenuEntries, ReadOnlyDoneEntries } from './entries.js'
 import { MENU_ID } from './MenuBar.provider.js'
 import ToolBarLogic from './ToolBarLogic.js'
 import WidthToggle from './WidthToggle.vue'
@@ -122,18 +122,30 @@ export default {
 	setup() {
 		const editor = useEditor()
 		const { isPublic, isRichEditor, isRichWorkspace } = useEditorFlags()
+		const { assistantMenuEntries, menuEntries, readOnlyDoneEntries } =
+			useMenuEntries()
 		const menubar = ref()
 		const { width } = useElementSize(menubar)
-		return { editor, isPublic, isRichEditor, isRichWorkspace, menubar, width }
+		return {
+			assistantMenuEntries,
+			editor,
+			isPublic,
+			isRichEditor,
+			isRichWorkspace,
+			menubar,
+			menuEntries,
+			readOnlyDoneEntries,
+			width,
+		}
 	},
 
 	data() {
 		return {
 			entries: (this.openReadOnly
-				? [...ReadOnlyDoneEntries, ...MenuEntries]
+				? [...this.readOnlyDoneEntries, ...this.menuEntries]
 				: this.isPublic || this.isRichWorkspace
-					? [...MenuEntries]
-					: [...MenuEntries, ...AssistantMenuEntries]
+					? [...this.menuEntries]
+					: [...this.menuEntries, ...this.assistantMenuEntries]
 			).filter((entry) => !!entry),
 			randomID: `menu-bar-${Math.ceil(Math.random() * 10000 + 500).toString(16)}`,
 			displayHelp: false,
@@ -259,7 +271,7 @@ export default {
 
 	&.text-menubar--ready:not(.text-menubar--hide) {
 		visibility: visible;
-		animation-name: fadeInDown;
+		animation-name: fadeInRight;
 		animation-duration: 0.3s;
 	}
 
diff --git a/src/components/Menu/ReadonlyBar.vue b/src/components/Menu/ReadonlyBar.vue
index ae4716ca2b4..517ebb4af8d 100644
--- a/src/components/Menu/ReadonlyBar.vue
+++ b/src/components/Menu/ReadonlyBar.vue
@@ -41,10 +41,10 @@
 
 <script>
 import { defineComponent } from 'vue'
-import { OutlineEntries, ReadOnlyEditEntries } from './entries.js'
 
 import { t } from '@nextcloud/l10n'
 import { useEditorFlags } from '../../composables/useEditorFlags.ts'
+import { useMenuEntries } from '../../composables/useMenuEntries.ts'
 import { useIsMobileMixin } from '../Editor.provider.ts'
 import ActionList from './ActionList.vue'
 import ActionSingle from './ActionSingle.vue'
@@ -77,16 +77,19 @@ export default defineComponent({
 
 	setup() {
 		const { isRichWorkspace } = useEditorFlags()
+		const { outlineEntries, readOnlyEditEntries } = useMenuEntries()
 		return {
 			isRichWorkspace,
+			outlineEntries,
+			readOnlyEditEntries,
 		}
 	},
 
 	data() {
 		return {
 			entries: this.openReadOnly
-				? [...ReadOnlyEditEntries, ...OutlineEntries]
-				: [...OutlineEntries],
+				? [...this.readOnlyEditEntries, ...this.outlineEntries]
+				: [...this.outlineEntries],
 			isReady: false,
 		}
 	},
diff --git a/src/components/Menu/entries.js b/src/components/Menu/entries.js
deleted file mode 100644
index c0dd46872f6..00000000000
--- a/src/components/Menu/entries.js
+++ /dev/null
@@ -1,488 +0,0 @@
-/**
- * SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors
- * SPDX-License-Identifier: AGPL-3.0-or-later
- */
-
-import {
-	CodeBrackets,
-	CodeTags,
-	Danger,
-	Emoticon,
-	FormatBold,
-	FormatHeader1,
-	FormatHeader2,
-	FormatHeader3,
-	FormatHeader4,
-	FormatHeader5,
-	FormatHeader6,
-	FormatIndentDecrease,
-	FormatIndentIncrease,
-	FormatItalic,
-	FormatListBulleted,
-	FormatListCheckbox,
-	FormatListNumbered,
-	FormatQuote,
-	FormatSize,
-	FormatStrikethrough,
-	FormatUnderline,
-	Info,
-	LinkIcon,
-	Paperclip,
-	Pencil,
-	PencilOff,
-	Positive,
-	Redo,
-	Sigma,
-	Table,
-	Undo,
-	UnfoldMoreHorizontal,
-	Warn,
-} from '../icons.js'
-import ActionAttachmentUpload from './ActionAttachmentUpload.vue'
-import ActionInsertLink from './ActionInsertLink.vue'
-import AssistantAction from './AssistantAction.vue'
-import EmojiPickerAction from './EmojiPickerAction.vue'
-
-import { loadState } from '@nextcloud/initial-state'
-import { t } from '@nextcloud/l10n'
-import { isMobileDevice } from '../../helpers/isMobileDevice.js'
-import { MODIFIERS } from './keys.js'
-
-export const OutlineEntries = [
-	{
-		key: 'outline',
-		forceLabel: true,
-		icon: FormatListBulleted,
-		click: ({ $outlineActions }) => $outlineActions.toggle(),
-		label: ({ $outlineState }) => {
-			return $outlineState.visible
-				? t('text', 'Hide outline')
-				: t('text', 'Show outline')
-		},
-	},
-]
-
-export const ReadOnlyEditEntries = [
-	{
-		key: 'edit',
-		label: t('text', 'Edit'),
-		forceLabel: true,
-		icon: Pencil,
-		click: ({ $readOnlyActions }) => $readOnlyActions.toggle(),
-	},
-]
-
-export const ReadOnlyDoneEntries = [
-	{
-		key: 'done',
-		label: t('text', 'Done'),
-		icon: PencilOff,
-		click: ({ $readOnlyActions }) => $readOnlyActions.toggle(),
-	},
-]
-
-export const MenuEntries = [
-	{
-		key: 'undo',
-		label: t('text', 'Undo'),
-		keyChar: 'z',
-		keyModifiers: [MODIFIERS.Mod],
-		icon: Undo,
-		action: (command) => command.undo(),
-		priority: 8,
-	},
-	{
-		key: 'redo',
-		label: t('text', 'Redo'),
-		keyChar: 'y',
-		keyModifiers: [MODIFIERS.Mod],
-		icon: Redo,
-		action: (command) => command.redo(),
-		priority: 11,
-	},
-	{
-		key: 'headings',
-		label: t('text', 'Headings'),
-		keyChar: '1…6',
-		keyModifiers: [MODIFIERS.Mod, MODIFIERS.Shift],
-		icon: FormatSize,
-		isActive: 'heading',
-		children: [
-			{
-				key: 'headings-h1',
-				label: t('text', 'Heading 1'),
-				keyChar: '1',
-				keyModifiers: [MODIFIERS.Mod, MODIFIERS.Shift],
-				icon: FormatHeader1,
-				isActive: { name: 'heading', attributes: { level: 1 } },
-				action: (command) => {
-					return command.toggleHeading({ level: 1 })
-				},
-			},
-			{
-				key: 'headings-h2',
-				label: t('text', 'Heading 2'),
-				keyChar: '2',
-				keyModifiers: [MODIFIERS.Mod, MODIFIERS.Shift],
-				icon: FormatHeader2,
-				isActive: { name: 'heading', attributes: { level: 2 } },
-				action: (command) => {
-					return command.toggleHeading({ level: 2 })
-				},
-			},
-			{
-				key: 'headings-h3',
-				label: t('text', 'Heading 3'),
-				keyChar: '3',
-				keyModifiers: [MODIFIERS.Mod, MODIFIERS.Shift],
-				icon: FormatHeader3,
-				isActive: { name: 'heading', attributes: { level: 3 } },
-				action: (command) => {
-					return command.toggleHeading({ level: 3 })
-				},
-			},
-			{
-				key: 'headings-h4',
-				label: t('text', 'Heading 4'),
-				keyChar: '4',
-				keyModifiers: [MODIFIERS.Mod, MODIFIERS.Shift],
-				isActive: { name: 'heading', attributes: { level: 4 } },
-				icon: FormatHeader4,
-				action: (command) => {
-					return command.toggleHeading({ level: 4 })
-				},
-			},
-			{
-				key: 'headings-h5',
-				label: t('text', 'Heading 5'),
-				keyChar: '5',
-				keyModifiers: [MODIFIERS.Mod, MODIFIERS.Shift],
-				isActive: { name: 'heading', attributes: { level: 5 } },
-				icon: FormatHeader5,
-				action: (command) => {
-					return command.toggleHeading({ level: 5 })
-				},
-			},
-			{
-				key: 'headings-h6',
-				label: t('text', 'Heading 6'),
-				keyChar: '6',
-				keyModifiers: [MODIFIERS.Mod, MODIFIERS.Shift],
-				isActive: { name: 'heading', attributes: { level: 6 } },
-				icon: FormatHeader6,
-				action: (command) => {
-					return command.toggleHeading({ level: 6 })
-				},
-			},
-			{
-				key: 'headings-separator',
-				isSeparator: true,
-				visible: ({ $outlineState }) => {
-					return $outlineState.enable
-				},
-			},
-			{
-				key: 'outline',
-				icon: FormatListBulleted,
-				click: ({ $outlineActions }) => $outlineActions.toggle(),
-				visible: ({ $outlineState }) => {
-					return $outlineState.enable
-				},
-				label: ({ $outlineState }) => {
-					return $outlineState.visible
-						? t('text', 'Hide outline')
-						: t('text', 'Show outline')
-				},
-			},
-		],
-		priority: 1,
-	},
-	{
-		key: 'bold',
-		label: t('text', 'Bold'),
-		keyChar: 'b',
-		keyModifiers: [MODIFIERS.Mod],
-		icon: FormatBold,
-		isActive: 'strong',
-		action: (command) => {
-			return command.toggleBold()
-		},
-		priority: 9,
-	},
-	{
-		key: 'italic',
-		label: t('text', 'Italic'),
-		keyChar: 'i',
-		keyModifiers: [MODIFIERS.Mod],
-		icon: FormatItalic,
-		isActive: 'em',
-		action: (command) => {
-			return command.toggleItalic()
-		},
-		priority: 10,
-	},
-	{
-		key: 'underline',
-		label: t('text', 'Underline'),
-		keyChar: 'u',
-		keyModifiers: [MODIFIERS.Mod],
-		icon: FormatUnderline,
-		isActive: 'underline',
-		action: (command) => {
-			return command.toggleUnderline()
-		},
-		priority: 12,
-	},
-	{
-		key: 'strikethrough',
-		label: t('text', 'Strikethrough'),
-		keyChar: 's',
-		keyModifiers: [MODIFIERS.Mod, MODIFIERS.Shift],
-		icon: FormatStrikethrough,
-		isActive: 'strike',
-		action: (command) => {
-			return command.toggleStrike()
-		},
-		priority: 13,
-	},
-	{
-		key: 'lists',
-		label: t('text', 'Lists'),
-		keyChar: '7…9',
-		keyModifiers: [MODIFIERS.Mod, MODIFIERS.Shift],
-		isActive: ['bulletList', 'orderedList', 'taskList'],
-		icon: FormatListBulleted,
-		children: [
-			{
-				key: 'unordered-list',
-				label: t('text', 'Unordered list'),
-				keyChar: '8',
-				keyModifiers: [MODIFIERS.Mod, MODIFIERS.Shift],
-				isActive: 'bulletList',
-				icon: FormatListBulleted,
-				action: (command) => {
-					return command.toggleBulletList()
-				},
-			},
-			{
-				key: 'ordered-list',
-				label: t('text', 'Ordered list'),
-				keyChar: '7',
-				keyModifiers: [MODIFIERS.Mod, MODIFIERS.Shift],
-				isActive: 'orderedList',
-				icon: FormatListNumbered,
-				action: (command) => {
-					return command.toggleOrderedList()
-				},
-			},
-			{
-				key: 'task-list',
-				label: t('text', 'To-Do list'),
-				keyChar: '9',
-				keyModifiers: [MODIFIERS.Mod, MODIFIERS.Shift],
-				isActive: 'taskList',
-				icon: FormatListCheckbox,
-				action: (command) => command.toggleTaskList(),
-			},
-			{
-				key: 'lists-separator',
-				isSeparator: true,
-			},
-			{
-				key: 'list-indent-increase',
-				label: t('text', 'Increase indentation'),
-				keyChar: 'Tab',
-				icon: FormatIndentIncrease,
-				action: (command, editor = null) => {
-					if (editor && editor.isActive('taskItem')) {
-						return command.sinkListItem('taskItem')
-					}
-					return command.sinkListItem('listItem')
-				},
-			},
-			{
-				key: 'list-indent-decrease',
-				label: t('text', 'Decrease indentation'),
-				keyChar: 'Tab',
-				keyModifiers: [MODIFIERS.Shift],
-				icon: FormatIndentDecrease,
-				action: (command, editor = null) => {
-					if (editor && editor.isActive('taskItem')) {
-						return command.liftListItem('taskItem')
-					}
-					return command.liftListItem('listItem')
-				},
-			},
-		],
-		priority: 2,
-	},
-	{
-		key: 'blocks',
-		label: t('text', 'Blocks'),
-		visible: false,
-		icon: CodeBrackets,
-		isActive: ['blockquote', 'codeBlock', 'callout', 'inlineMath', 'blockMath'],
-		children: [
-			{
-				key: 'blockquote',
-				label: t('text', 'Blockquote'),
-				keyChar: 'b',
-				keyModifiers: [MODIFIERS.Mod, MODIFIERS.Shift],
-				isActive: 'blockquote',
-				icon: FormatQuote,
-				action: (command) => {
-					return command.toggleBlockquote()
-				},
-			},
-			{
-				key: 'code-block',
-				label: t('text', 'Code block'),
-				keyChar: 'c',
-				keyModifiers: [MODIFIERS.Mod, MODIFIERS.Alt],
-				isActive: 'codeBlock',
-				icon: CodeTags,
-				action: (command) => {
-					return command.toggleCodeBlock()
-				},
-			},
-			{
-				key: 'blocks-separator',
-				isSeparator: true,
-			},
-			{
-				key: 'math-inline',
-				// TRANSLATORS Inline level math/science formula menu item, eg "something [the formula] something"
-				label: t('text', 'Inline math'),
-				icon: Sigma,
-				isActive: 'inlineMath',
-				action: (command, editor = null) => {
-					let latex = ''
-					if (editor) {
-						const { from, to, empty } = editor.state.selection
-						latex = empty ? '' : editor.state.doc.textBetween(from, to)
-					}
-					return command.insertInlineMath({ latex })
-				},
-			},
-			{
-				key: 'math-block',
-				// TRANSLATORS Block level math/science formula menu item, appears on its own, akin to a paragraph
-				label: t('text', 'Block math'),
-				icon: Sigma,
-				isActive: 'blockMath',
-				action: (command, editor = null) => {
-					let latex = ''
-					if (editor) {
-						const { from, to, empty } = editor.state.selection
-						latex = empty ? '' : editor.state.doc.textBetween(from, to)
-					}
-					return command.insertBlockMath({ latex })
-				},
-			},
-			{
-				key: 'math-separator',
-				isSeparator: true,
-			},
-			{
-				key: 'callout-info',
-				label: t('text', 'Info callout'),
-				isActive: { name: 'callout', attributes: { type: 'info' } },
-				icon: Info,
-				action: (command) => {
-					return command.toggleCallout({ type: 'info' })
-				},
-			},
-			{
-				key: 'callout-success',
-				label: t('text', 'Success callout'),
-				isActive: { name: 'callout', attributes: { type: 'success' } },
-				icon: Positive,
-				action: (command) => {
-					return command.toggleCallout({ type: 'success' })
-				},
-			},
-			{
-				key: 'callout-warn',
-				label: t('text', 'Warning callout'),
-				isActive: { name: 'callout', attributes: { type: 'warn' } },
-				icon: Warn,
-				action: (command) => {
-					return command.toggleCallout({ type: 'warn' })
-				},
-			},
-			{
-				key: 'callout-error',
-				label: t('text', 'Danger callout'),
-				isActive: { name: 'callout', attributes: { type: 'error' } },
-				icon: Danger,
-				action: (command) => {
-					return command.toggleCallout({ type: 'error' })
-				},
-			},
-		],
-		priority: 3,
-	},
-	{
-		key: 'table',
-		label: t('text', 'Table'),
-		isActive: 'table',
-		icon: Table,
-		action: (command) => {
-			return command.insertTable()
-		},
-		priority: 14,
-	},
-	{
-		key: 'details',
-		label: t('text', 'Details'),
-		isActive: 'details',
-		icon: UnfoldMoreHorizontal,
-		action: (command) => {
-			return command.toggleDetails()
-		},
-		priority: 15,
-	},
-	{
-		key: 'insert-link',
-		label: t('text', 'Insert link'),
-		keyChar: 'k',
-		keyModifiers: [MODIFIERS.Mod],
-		isActive: 'link',
-		icon: LinkIcon,
-		component: ActionInsertLink,
-		priority: 4,
-	},
-	{
-		key: 'insert-attachment',
-		label: t('text', 'Insert attachment'),
-		icon: Paperclip,
-		component: ActionAttachmentUpload,
-		priority: 5,
-	},
-]
-
-if (!isMobileDevice) {
-	MenuEntries.push({
-		key: 'emoji-picker',
-		label: t('text', 'Insert emoji'),
-		icon: Emoticon,
-		component: EmojiPickerAction,
-		action: (command, emojiObject = {}) => {
-			return command.emoji(emojiObject)
-		},
-		priority: 6,
-	})
-}
-
-const hasAssistantTaskTypes = loadState('text', 'taskprocessing', []).length > 0
-
-export const AssistantMenuEntries = [
-	hasAssistantTaskTypes
-		? {
-				key: 'assistant',
-				label: t('text', 'Nextcloud Assistant'),
-				component: AssistantAction,
-				priority: 7,
-			}
-		: undefined,
-]
diff --git a/src/components/Menu/entries.ts b/src/components/Menu/entries.ts
new file mode 100644
index 00000000000..38aed1e0073
--- /dev/null
+++ b/src/components/Menu/entries.ts
@@ -0,0 +1,526 @@
+/**
+ * SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import {
+	CodeBrackets,
+	CodeTags,
+	Danger,
+	Emoticon,
+	FormatBold,
+	FormatHeader1,
+	FormatHeader2,
+	FormatHeader3,
+	FormatHeader4,
+	FormatHeader5,
+	FormatHeader6,
+	FormatIndentDecrease,
+	FormatIndentIncrease,
+	FormatItalic,
+	FormatListBulleted,
+	FormatListCheckbox,
+	FormatListNumbered,
+	FormatQuote,
+	FormatSize,
+	FormatStrikethrough,
+	FormatUnderline,
+	Info,
+	LinkIcon,
+	Paperclip,
+	Pencil,
+	PencilOff,
+	Positive,
+	Redo,
+	Sigma,
+	Table,
+	Undo,
+	UnfoldMoreHorizontal,
+	Warn,
+} from '../icons.js'
+import ActionAttachmentUpload from './ActionAttachmentUpload.vue'
+import ActionInsertLink from './ActionInsertLink.vue'
+import AssistantAction from './AssistantAction.vue'
+import EmojiPickerAction from './EmojiPickerAction.vue'
+
+import { emit } from '@nextcloud/event-bus'
+import { loadState } from '@nextcloud/initial-state'
+import { t } from '@nextcloud/l10n'
+import { type AnyCommands, type Editor } from '@tiptap/core'
+import { isMobileDevice } from '../../helpers/isMobileDevice.js'
+import { MODIFIERS } from './keys.js'
+
+type ClickContext = {
+	$readOnlyActions?: {
+		toggle: () => void
+	}
+}
+
+type LabelContext = {
+	displayToc: boolean
+}
+
+type MenuEntry =
+	| {
+			key: string
+			label?: string | ((context: LabelContext) => string)
+			icon?: object
+			forceLabel?: boolean
+			keyChar?: string
+			keyModifiers?: string[]
+			action?: (command: AnyCommands, editor?: Editor | null) => void
+			isActive?: string | string[] | object
+			component?: object
+			click?: (context?: ClickContext) => void
+			priority?: number
+			visible?: boolean
+			children?: MenuEntry[]
+			isSeparator?: boolean
+	  }
+	| undefined
+
+export const outlineEntries: MenuEntry[] = [
+	{
+		key: 'outline',
+		forceLabel: true,
+		icon: FormatListBulleted,
+		click: () => emit('text:toc:toggle'),
+		label: ({ displayToc }) => {
+			return displayToc ? t('text', 'Hide outline') : t('text', 'Show outline')
+		},
+	},
+]
+
+export const readOnlyEditEntries: MenuEntry[] = [
+	{
+		key: 'edit',
+		label: t('text', 'Edit'),
+		forceLabel: true,
+		icon: Pencil,
+		click: ({ $readOnlyActions } = {}) => $readOnlyActions?.toggle(),
+	},
+]
+
+export const readOnlyDoneEntries: MenuEntry[] = [
+	{
+		key: 'done',
+		label: t('text', 'Done'),
+		icon: PencilOff,
+		click: ({ $readOnlyActions } = {}) => $readOnlyActions?.toggle(),
+	},
+]
+
+export const getAssistantMenuEntries = (): MenuEntry[] => {
+	const assistantMenuEntry: MenuEntry = {
+		key: 'assistant',
+		label: t('text', 'Nextcloud Assistant'),
+		component: AssistantAction,
+		priority: 7,
+	}
+	const hasAssistantTaskTypes = loadState('text', 'taskprocessing', []).length > 0
+	return hasAssistantTaskTypes ? [assistantMenuEntry] : []
+}
+
+export const getMenuEntries = (isRichWorkspace: boolean): MenuEntry[] => {
+	const menuEntries: MenuEntry[] = [
+		{
+			key: 'undo',
+			label: t('text', 'Undo'),
+			keyChar: 'z',
+			keyModifiers: [MODIFIERS.Mod],
+			icon: Undo,
+			action: (command) => command.undo(),
+			priority: 8,
+		},
+		{
+			key: 'redo',
+			label: t('text', 'Redo'),
+			keyChar: 'y',
+			keyModifiers: [MODIFIERS.Mod],
+			icon: Redo,
+			action: (command) => command.redo(),
+			priority: 11,
+		},
+		{
+			key: 'headings',
+			label: t('text', 'Headings'),
+			keyChar: '1…6',
+			keyModifiers: [MODIFIERS.Mod, MODIFIERS.Shift],
+			icon: FormatSize,
+			isActive: 'heading',
+			children: [
+				{
+					key: 'headings-h1',
+					label: t('text', 'Heading 1'),
+					keyChar: '1',
+					keyModifiers: [MODIFIERS.Mod, MODIFIERS.Shift],
+					icon: FormatHeader1,
+					isActive: { name: 'heading', attributes: { level: 1 } },
+					action: (command) => {
+						return command.toggleHeading({ level: 1 })
+					},
+				},
+				{
+					key: 'headings-h2',
+					label: t('text', 'Heading 2'),
+					keyChar: '2',
+					keyModifiers: [MODIFIERS.Mod, MODIFIERS.Shift],
+					icon: FormatHeader2,
+					isActive: { name: 'heading', attributes: { level: 2 } },
+					action: (command) => {
+						return command.toggleHeading({ level: 2 })
+					},
+				},
+				{
+					key: 'headings-h3',
+					label: t('text', 'Heading 3'),
+					keyChar: '3',
+					keyModifiers: [MODIFIERS.Mod, MODIFIERS.Shift],
+					icon: FormatHeader3,
+					isActive: { name: 'heading', attributes: { level: 3 } },
+					action: (command) => {
+						return command.toggleHeading({ level: 3 })
+					},
+				},
+				{
+					key: 'headings-h4',
+					label: t('text', 'Heading 4'),
+					keyChar: '4',
+					keyModifiers: [MODIFIERS.Mod, MODIFIERS.Shift],
+					isActive: { name: 'heading', attributes: { level: 4 } },
+					icon: FormatHeader4,
+					action: (command) => {
+						return command.toggleHeading({ level: 4 })
+					},
+				},
+				{
+					key: 'headings-h5',
+					label: t('text', 'Heading 5'),
+					keyChar: '5',
+					keyModifiers: [MODIFIERS.Mod, MODIFIERS.Shift],
+					isActive: { name: 'heading', attributes: { level: 5 } },
+					icon: FormatHeader5,
+					action: (command) => {
+						return command.toggleHeading({ level: 5 })
+					},
+				},
+				{
+					key: 'headings-h6',
+					label: t('text', 'Heading 6'),
+					keyChar: '6',
+					keyModifiers: [MODIFIERS.Mod, MODIFIERS.Shift],
+					isActive: { name: 'heading', attributes: { level: 6 } },
+					icon: FormatHeader6,
+					action: (command) => {
+						return command.toggleHeading({ level: 6 })
+					},
+				},
+				{
+					key: 'headings-separator',
+					isSeparator: true,
+					visible: !isRichWorkspace,
+				},
+				{
+					key: 'outline',
+					icon: FormatListBulleted,
+					click: () => emit('text:toc:toggle'),
+					visible: !isRichWorkspace,
+					label: ({ displayToc }) => {
+						return displayToc
+							? t('text', 'Hide outline')
+							: t('text', 'Show outline')
+					},
+				},
+			],
+			priority: 1,
+		},
+		{
+			key: 'bold',
+			label: t('text', 'Bold'),
+			keyChar: 'b',
+			keyModifiers: [MODIFIERS.Mod],
+			icon: FormatBold,
+			isActive: 'strong',
+			action: (command) => {
+				return command.toggleBold()
+			},
+			priority: 9,
+		},
+		{
+			key: 'italic',
+			label: t('text', 'Italic'),
+			keyChar: 'i',
+			keyModifiers: [MODIFIERS.Mod],
+			icon: FormatItalic,
+			isActive: 'em',
+			action: (command) => {
+				return command.toggleItalic()
+			},
+			priority: 10,
+		},
+		{
+			key: 'underline',
+			label: t('text', 'Underline'),
+			keyChar: 'u',
+			keyModifiers: [MODIFIERS.Mod],
+			icon: FormatUnderline,
+			isActive: 'underline',
+			action: (command) => {
+				return command.toggleUnderline()
+			},
+			priority: 12,
+		},
+		{
+			key: 'strikethrough',
+			label: t('text', 'Strikethrough'),
+			keyChar: 's',
+			keyModifiers: [MODIFIERS.Mod, MODIFIERS.Shift],
+			icon: FormatStrikethrough,
+			isActive: 'strike',
+			action: (command) => {
+				return command.toggleStrike()
+			},
+			priority: 13,
+		},
+		{
+			key: 'lists',
+			label: t('text', 'Lists'),
+			keyChar: '7…9',
+			keyModifiers: [MODIFIERS.Mod, MODIFIERS.Shift],
+			isActive: ['bulletList', 'orderedList', 'taskList'],
+			icon: FormatListBulleted,
+			children: [
+				{
+					key: 'unordered-list',
+					label: t('text', 'Unordered list'),
+					keyChar: '8',
+					keyModifiers: [MODIFIERS.Mod, MODIFIERS.Shift],
+					isActive: 'bulletList',
+					icon: FormatListBulleted,
+					action: (command) => {
+						return command.toggleBulletList()
+					},
+				},
+				{
+					key: 'ordered-list',
+					label: t('text', 'Ordered list'),
+					keyChar: '7',
+					keyModifiers: [MODIFIERS.Mod, MODIFIERS.Shift],
+					isActive: 'orderedList',
+					icon: FormatListNumbered,
+					action: (command) => {
+						return command.toggleOrderedList()
+					},
+				},
+				{
+					key: 'task-list',
+					label: t('text', 'To-Do list'),
+					keyChar: '9',
+					keyModifiers: [MODIFIERS.Mod, MODIFIERS.Shift],
+					isActive: 'taskList',
+					icon: FormatListCheckbox,
+					action: (command) => command.toggleTaskList(),
+				},
+				{
+					key: 'lists-separator',
+					isSeparator: true,
+				},
+				{
+					key: 'list-indent-increase',
+					label: t('text', 'Increase indentation'),
+					keyChar: 'Tab',
+					icon: FormatIndentIncrease,
+					action: (command, editor) => {
+						if (editor && editor.isActive('taskItem')) {
+							return command.sinkListItem('taskItem')
+						}
+						return command.sinkListItem('listItem')
+					},
+				},
+				{
+					key: 'list-indent-decrease',
+					label: t('text', 'Decrease indentation'),
+					keyChar: 'Tab',
+					keyModifiers: [MODIFIERS.Shift],
+					icon: FormatIndentDecrease,
+					action: (command, editor) => {
+						if (editor && editor.isActive('taskItem')) {
+							return command.liftListItem('taskItem')
+						}
+						return command.liftListItem('listItem')
+					},
+				},
+			],
+			priority: 2,
+		},
+		{
+			key: 'blocks',
+			label: t('text', 'Blocks'),
+			visible: false,
+			icon: CodeBrackets,
+			isActive: [
+				'blockquote',
+				'codeBlock',
+				'callout',
+				'inlineMath',
+				'blockMath',
+			],
+			children: [
+				{
+					key: 'blockquote',
+					label: t('text', 'Blockquote'),
+					keyChar: 'b',
+					keyModifiers: [MODIFIERS.Mod, MODIFIERS.Shift],
+					isActive: 'blockquote',
+					icon: FormatQuote,
+					action: (command) => {
+						return command.toggleBlockquote()
+					},
+				},
+				{
+					key: 'code-block',
+					label: t('text', 'Code block'),
+					keyChar: 'c',
+					keyModifiers: [MODIFIERS.Mod, MODIFIERS.Alt],
+					isActive: 'codeBlock',
+					icon: CodeTags,
+					action: (command) => {
+						return command.toggleCodeBlock()
+					},
+				},
+				{
+					key: 'blocks-separator',
+					isSeparator: true,
+				},
+				{
+					key: 'math-inline',
+					// TRANSLATORS Inline level math/science formula menu item, eg "something [the formula] something"
+					label: t('text', 'Inline math'),
+					icon: Sigma,
+					isActive: 'inlineMath',
+					action: (command, editor) => {
+						let latex = ''
+						if (editor) {
+							const { from, to, empty } = editor.state.selection
+							latex = empty
+								? ''
+								: editor.state.doc.textBetween(from, to)
+						}
+						return command.insertInlineMath({ latex })
+					},
+				},
+				{
+					key: 'math-block',
+					// TRANSLATORS Block level math/science formula menu item, appears on its own, akin to a paragraph
+					label: t('text', 'Block math'),
+					icon: Sigma,
+					isActive: 'blockMath',
+					action: (command, editor) => {
+						let latex = ''
+						if (editor) {
+							const { from, to, empty } = editor.state.selection
+							latex = empty
+								? ''
+								: editor.state.doc.textBetween(from, to)
+						}
+						return command.insertBlockMath({ latex })
+					},
+				},
+				{
+					key: 'math-separator',
+					isSeparator: true,
+				},
+				{
+					key: 'callout-info',
+					label: t('text', 'Info callout'),
+					isActive: { name: 'callout', attributes: { type: 'info' } },
+					icon: Info,
+					action: (command) => {
+						return command.toggleCallout({ type: 'info' })
+					},
+				},
+				{
+					key: 'callout-success',
+					label: t('text', 'Success callout'),
+					isActive: { name: 'callout', attributes: { type: 'success' } },
+					icon: Positive,
+					action: (command) => {
+						return command.toggleCallout({ type: 'success' })
+					},
+				},
+				{
+					key: 'callout-warn',
+					label: t('text', 'Warning callout'),
+					isActive: { name: 'callout', attributes: { type: 'warn' } },
+					icon: Warn,
+					action: (command) => {
+						return command.toggleCallout({ type: 'warn' })
+					},
+				},
+				{
+					key: 'callout-error',
+					label: t('text', 'Danger callout'),
+					isActive: { name: 'callout', attributes: { type: 'error' } },
+					icon: Danger,
+					action: (command) => {
+						return command.toggleCallout({ type: 'error' })
+					},
+				},
+			],
+			priority: 3,
+		},
+		{
+			key: 'table',
+			label: t('text', 'Table'),
+			isActive: 'table',
+			icon: Table,
+			action: (command) => {
+				return command.insertTable()
+			},
+			priority: 14,
+		},
+		{
+			key: 'details',
+			label: t('text', 'Details'),
+			isActive: 'details',
+			icon: UnfoldMoreHorizontal,
+			action: (command) => {
+				return command.toggleDetails()
+			},
+			priority: 15,
+		},
+		{
+			key: 'insert-link',
+			label: t('text', 'Insert link'),
+			keyChar: 'k',
+			keyModifiers: [MODIFIERS.Mod],
+			isActive: 'link',
+			icon: LinkIcon,
+			component: ActionInsertLink,
+			priority: 4,
+		},
+		{
+			key: 'insert-attachment',
+			label: t('text', 'Insert attachment'),
+			icon: Paperclip,
+			component: ActionAttachmentUpload,
+			priority: 5,
+		},
+	]
+
+	if (!isMobileDevice) {
+		menuEntries.push({
+			key: 'emoji-picker',
+			label: t('text', 'Insert emoji'),
+			icon: Emoticon,
+			component: EmojiPickerAction,
+			// @ts-expect-error emoji action expects object instead of editor as second argument
+			action: (command, emojiObject = {}) => {
+				return command.emoji(emojiObject)
+			},
+			priority: 6,
+		})
+	}
+
+	return menuEntries
+}
diff --git a/src/components/Suggestion/LinkPicker/suggestions.js b/src/components/Suggestion/LinkPicker/suggestions.js
index d39cf5f7373..88ff8feea9c 100644
--- a/src/components/Suggestion/LinkPicker/suggestions.js
+++ b/src/components/Suggestion/LinkPicker/suggestions.js
@@ -12,7 +12,7 @@ import markdownit from '../../../markdownit/index.js'
 import shouldInterpretAsMarkdown from '../../../markdownit/shouldInterpretAsMarkdown.js'
 import { getIsActive } from '../../Menu/utils.js'
 import createSuggestions from '../suggestions.js'
-import { MenuEntries } from './../../Menu/entries.js'
+import { getMenuEntries } from './../../Menu/entries.ts'
 import LinkPickerList from './LinkPickerList.vue'
 
 const suggestGroupFormat = t('text', 'Formatting')
@@ -40,14 +40,15 @@ const sortImportantFirst = (list) => {
 }
 
 const formattingSuggestions = (query) => {
+	const menuEntries = getMenuEntries(false, false)
 	return sortImportantFirst(
 		[
-			...MenuEntries.find((e) => e.key === 'headings').children,
-			...MenuEntries.find((e) => e.key === 'lists').children,
-			...MenuEntries.filter((e) => e.action && !filterOut(e)),
-			...MenuEntries.find((e) => e.key === 'blocks').children,
+			...menuEntries.find((e) => e.key === 'headings').children,
+			...menuEntries.find((e) => e.key === 'lists').children,
+			...menuEntries.filter((e) => e.action && !filterOut(e)),
+			...menuEntries.find((e) => e.key === 'blocks').children,
 			{
-				...MenuEntries.find((e) => e.key === 'emoji-picker'),
+				...menuEntries.find((e) => e.key === 'emoji-picker'),
 				action: (command) => command.insertContent(':'),
 			},
 		]
diff --git a/src/components/ViewerComponent.vue b/src/components/ViewerComponent.vue
index d7a9837d185..57925e1be80 100644
--- a/src/components/ViewerComponent.vue
+++ b/src/components/ViewerComponent.vue
@@ -12,8 +12,7 @@
 		:autofocus="autofocus"
 		:share-token="shareToken"
 		:class="{ 'text-editor--embedding': isEmbedded }"
-		:mime="mime"
-		:show-outline-outside="showOutlineOutside" />
+		:mime="mime" />
 	<div
 		v-else
 		id="editor-container"
@@ -86,10 +85,6 @@ export default {
 			type: String,
 			default: null,
 		},
-		showOutlineOutside: {
-			type: Boolean,
-			default: false,
-		},
 		permissions: {
 			type: String,
 			default: '',
@@ -200,7 +195,7 @@ export default {
 	&.source-viewer {
 		display: block;
 
-		.text-editor__content-wrapper {
+		.editor__content-wrapper {
 			margin-top: var(--header-height);
 		}
 
diff --git a/src/composables/useEditorFlags.ts b/src/composables/useEditorFlags.ts
index ca080b344c6..e5fb1a4f076 100644
--- a/src/composables/useEditorFlags.ts
+++ b/src/composables/useEditorFlags.ts
@@ -11,6 +11,7 @@ export interface EditorFlags {
 	isPublic: boolean
 	isRichEditor: boolean
 	isRichWorkspace: boolean
+	useTableOfContents: boolean
 }
 interface Props {
 	isDirectEditing: boolean
@@ -24,14 +25,24 @@ export const provideEditorFlags = (props: Props) => {
 	const isRichEditor =
 		loadState('text', 'rich_editing_enabled', true)
 		&& props.mime === 'text/markdown'
-	provide(editorFlagsKey, { isPublic, isRichEditor, isRichWorkspace })
-	return { isPublic, isRichEditor, isRichWorkspace }
+	const useTableOfContents = isRichEditor && !isRichWorkspace
+	provide(editorFlagsKey, {
+		isPublic,
+		isRichEditor,
+		isRichWorkspace,
+		useTableOfContents,
+	})
+	return { isPublic, isRichEditor, isRichWorkspace, useTableOfContents }
 }
 export const useEditorFlags = () => {
-	const { isPublic, isRichEditor, isRichWorkspace } = inject(editorFlagsKey, {
-		isPublic: false,
-		isRichEditor: false,
-		isRichWorkspace: false,
-	})
-	return { isPublic, isRichEditor, isRichWorkspace }
+	const { isPublic, isRichEditor, isRichWorkspace, useTableOfContents } = inject(
+		editorFlagsKey,
+		{
+			isPublic: false,
+			isRichEditor: false,
+			isRichWorkspace: false,
+			useTableOfContents: false,
+		},
+	)
+	return { isPublic, isRichEditor, isRichWorkspace, useTableOfContents }
 }
diff --git a/src/composables/useEditorHeadings.ts b/src/composables/useEditorHeadings.ts
new file mode 100644
index 00000000000..c17c2b7bb88
--- /dev/null
+++ b/src/composables/useEditorHeadings.ts
@@ -0,0 +1,88 @@
+/**
+ * SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import { emit, subscribe } from '@nextcloud/event-bus'
+import type { Editor } from '@tiptap/core'
+import {
+	inject,
+	provide,
+	ref,
+	shallowRef,
+	type InjectionKey,
+	type Ref,
+	type ShallowRef,
+} from 'vue'
+import { headingAnchorPluginKey } from '../plugins/headingAnchor.js'
+
+declare module '@nextcloud/event-bus' {
+	export interface NextcloudEvents {
+		'text:toc:toggle': { visible: boolean } | void
+	}
+}
+
+export type Heading = {
+	id: string
+	level: number
+	offset: number
+	text: string
+	previous?: number
+}
+
+export const headingsKey = Symbol('text:headings') as InjectionKey<
+	ShallowRef<Heading[]>
+>
+export const displayTocKey = Symbol('text:displaytoc') as InjectionKey<Ref<boolean>>
+
+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 ?? [])
+	}
+	updateHeadings() // Initial sync on setup
+	editor.on('update', ({ transaction }) => {
+		if (transaction.docChanged) {
+			updateHeadings()
+		}
+	})
+
+	provide(headingsKey, headings)
+	provide(displayTocKey, displayToc)
+	subscribe('text:toc:toggle', (event) => {
+		if (event?.visible !== undefined) {
+			displayToc.value = event.visible
+		} else {
+			displayToc.value = !displayToc.value
+		}
+		emit('text:toc:toggled', displayToc.value)
+	})
+
+	return { displayToc, headings, updateHeadings }
+}
+
+export const useEditorHeadings = () => {
+	const headings = inject(headingsKey)
+	const displayToc = inject(displayTocKey)
+	return { displayToc, headings }
+}
diff --git a/src/composables/useEditorWidth.ts b/src/composables/useEditorWidth.ts
index 1d6f3d2f6e8..1dc27d27f5b 100644
--- a/src/composables/useEditorWidth.ts
+++ b/src/composables/useEditorWidth.ts
@@ -44,6 +44,15 @@ export const editorWidthKey = Symbol('text:editor:width') as InjectionKey<
 	Readonly<Ref<boolean> | null>
 >
 
+// desktop: leave space for floating buttons and outline (2 * 40px) if necessary
+// wide screen: 80ch content, narrow screen: full width
+const editorWidthDesktop = 'min(80ch, 100%)'
+const editorWidthDesktopEnhanced = 'min(80ch, (100% - 2 * 40px))'
+const fullEditorWidthDesktop = '100%'
+const fullEditorWidthDesktopEnhanced = 'calc(100% - 2 * 40px)'
+const editorWidthMobile = 'min(80ch, 100%)'
+const fullEditorWidthMobile = '100%'
+
 /**
  * Detect if other apps (such as collectives) already configured texts max width.
  *
@@ -61,7 +70,8 @@ function maxWidthSetOutsideOfText() {
 	return Boolean(alreadySet) && alreadySet !== setByText
 }
 
-export const provideEditorWidth = () => {
+export const provideEditorWidth = (useTableOfContents = true) => {
+	const isMobile = useIsMobile()
 	// keep style that is already set - for example by collectives
 	if (maxWidthSetOutsideOfText()) {
 		provide(editorWidthKey, null)
@@ -73,7 +83,21 @@ export const provideEditorWidth = () => {
 		valueSingleton = value
 		isFullWidth.value = value
 	})
-	const width = computed(() => (isFullWidth.value ? '100%' : '80ch'))
+	const defaultEditorWidthDesktop = useTableOfContents
+		? editorWidthDesktopEnhanced
+		: editorWidthDesktop
+	const defaultFullEditorWidthDesktop = useTableOfContents
+		? fullEditorWidthDesktopEnhanced
+		: fullEditorWidthDesktop
+	const defaultEditorWidth = computed(() =>
+		isMobile.value ? editorWidthMobile : defaultEditorWidthDesktop,
+	)
+	const fullEditorWidth = computed(() =>
+		isMobile.value ? fullEditorWidthMobile : defaultFullEditorWidthDesktop,
+	)
+	const width = computed(() =>
+		isFullWidth.value ? fullEditorWidth.value : defaultEditorWidth.value,
+	)
 	const applyEditorWidth = () => {
 		document.documentElement.style.setProperty(
 			'--text-editor-max-width',
diff --git a/src/composables/useMenuEntries.ts b/src/composables/useMenuEntries.ts
new file mode 100644
index 00000000000..eb018c31753
--- /dev/null
+++ b/src/composables/useMenuEntries.ts
@@ -0,0 +1,28 @@
+/**
+ * SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import {
+	getAssistantMenuEntries,
+	getMenuEntries,
+	outlineEntries,
+	readOnlyDoneEntries,
+	readOnlyEditEntries,
+} from '../components/Menu/entries'
+import { useEditorFlags } from './useEditorFlags'
+
+export const useMenuEntries = () => {
+	const { isRichWorkspace } = useEditorFlags()
+
+	const assistantMenuEntries = getAssistantMenuEntries()
+	const menuEntries = getMenuEntries(isRichWorkspace)
+
+	return {
+		assistantMenuEntries,
+		menuEntries,
+		outlineEntries,
+		readOnlyDoneEntries,
+		readOnlyEditEntries,
+	}
+}
diff --git a/src/css/print.scss b/src/css/print.scss
index 3bc92a2b8e5..bfa19213427 100644
--- a/src/css/print.scss
+++ b/src/css/print.scss
@@ -61,12 +61,18 @@
 			// Hide table buttons
 			display: none !important;
 		}
-		.content-wrapper .editor__content {
-			// Prevent cut lines (due to `display: grid`)
-			display: block;
+		.editor__content-wrapper .editor__content {
 			// Margins set by page rule
 			max-width: 100%;
 		}
+		.floating-buttons {
+			// Hide floating buttons
+			display: none !important;
+		}
+		.editor__toc-container {
+			// Hide outline + table of contents
+			display: none !important;
+		}
 		.text-editor__wrapper {
 			height: fit-content;
 			position: unset;
@@ -121,22 +127,6 @@
 		display: none;
 	}
 
-	.text-editor__content-wrapper {
-		&.--show-outline {
-			display: block;
-		}
-
-		.editor--outline {
-			width: auto;
-			height: auto;
-			overflow: unset;
-			position: relative;
-		}
-		.editor--outline__btn-close {
-			display: none;
-		}
-	}
-
 	.collaboration-carets__caret,
 	.collaboration-carets__label {
 		display: none;
diff --git a/src/css/style.scss b/src/css/style.scss
index 953f4b77bc4..21034346df4 100644
--- a/src/css/style.scss
+++ b/src/css/style.scss
@@ -106,6 +106,26 @@ li.ProseMirror-selectednode {
 	}
 }
 
-.fadeInLeft {
-	animation-name: fadeInLeft;
+// from https://github.com/animate-css/animate.css/blob/main/source/fading_entrances/fadeInRight.css
+@keyframes fadeInRight {
+	from {
+		opacity: 0;
+		transform: translate3d(100%, 0, 0);
+	}
+
+	to {
+		opacity: 1;
+		transform: translate3d(0, 0, 0);
+	}
+}
+@keyframes fadeOutRight {
+	from {
+		opacity: 1;
+		transform: translate3d(0, 0, 0);
+	}
+
+	to {
+		opacity: 0;
+		transform: translate3d(100%, 0, 0);
+	}
 }
diff --git a/src/editor.js b/src/editor.js
index 4c5506377ad..f1e93e1f779 100644
--- a/src/editor.js
+++ b/src/editor.js
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
-import { subscribe } from '@nextcloud/event-bus'
+import { emit, subscribe } from '@nextcloud/event-bus'
 import Vue from 'vue'
 import {
 	ATTACHMENT_RESOLVER,
@@ -17,7 +17,7 @@ import { openLink } from './helpers/links.js'
 // eslint-disable-next-line import/no-unresolved, n/no-missing-import
 import 'vite/modulepreload-polyfill'
 
-const apiVersion = '1.2'
+const apiVersion = '1.3'
 
 window.OCA.Text = {
 	...window.OCA.Text,
@@ -58,15 +58,18 @@ class TextEditorEmbed {
 		return this
 	}
 
-	onOutlineToggle(onOutlineToggleCallback = () => {}) {
-		this.#vm.$on('outline-toggled', (visible) => {
-			onOutlineToggleCallback(visible)
-		})
+	onSearch(onSearchCallback = () => {}) {
+		subscribe('text:editor:search-results', onSearchCallback)
 		return this
 	}
 
-	onSearch(onSearchCallback = () => {}) {
-		subscribe('text:editor:search-results', onSearchCallback)
+	onTocToggle(onTocToggleCallback = () => {}) {
+		subscribe('text:toc:toggled', onTocToggleCallback)
+		return this
+	}
+
+	onTocPin(onTocPinCallback = () => {}) {
+		subscribe('text:toc:pin', onTocPinCallback)
 		return this
 	}
 
@@ -111,7 +114,7 @@ class TextEditorEmbed {
 	}
 
 	setShowOutline(value) {
-		this.#vm.$set(this.#data, 'showOutlineOutside', value)
+		emit('text:toc:toggle', { visible: value })
 		return this
 	}
 
@@ -190,7 +193,9 @@ window.OCA.Text.createEditor = async function ({
 	onCreate = ({ markdown }) => {},
 	onLoaded = () => {},
 	onUpdate = ({ markdown }) => {},
-	onOutlineToggle = (visible) => {},
+	onTocToggle = (visible) => {},
+	onOutlineToggle = (visible) => {}, // deprecated, use `onTocToggle`
+	onTocPin = (fileId, keep) => {},
 	onFileInsert = undefined,
 	onMentionSearch = undefined,
 	onMentionInsert = undefined,
@@ -203,7 +208,6 @@ window.OCA.Text.createEditor = async function ({
 	const { default: Editor } = await import('./components/Editor.vue')
 
 	const data = Vue.observable({
-		showOutlineOutside: false,
 		readonlyBarProps: readonlyBar.props,
 		readOnly,
 		content,
@@ -256,7 +260,6 @@ window.OCA.Text.createEditor = async function ({
 							mime: 'text/markdown',
 							active: true,
 							autofocus,
-							showOutlineOutside: data.showOutlineOutside,
 						},
 						scopedSlots,
 					})
@@ -267,18 +270,20 @@ window.OCA.Text.createEditor = async function ({
 							relativePath: filePath,
 							shareToken,
 							readOnly: data.readOnly,
-							showOutlineOutside: data.showOutlineOutside,
 						},
 						scopedSlots,
 					})
 		},
 	})
+
 	return new TextEditorEmbed(vm, data)
 		.onCreate(onCreate)
 		.onLoaded(onLoaded)
 		.onUpdate(onUpdate)
-		.onOutlineToggle(onOutlineToggle)
 		.onSearch(onSearch)
+		.onTocToggle(onOutlineToggle)
+		.onTocToggle(onTocToggle)
+		.onTocPin(onTocPin)
 		.render(el)
 }
 
@@ -313,7 +318,6 @@ window.OCA.Text.createTable = async function ({
 				props: {
 					content: data.content,
 					readOnly: data.readOnly,
-					showOutlineOutside: false,
 				},
 			})
 		},
diff --git a/src/extensions/Keymap.js b/src/extensions/Keymap.js
index 14ba6b49495..9a34725ca95 100644
--- a/src/extensions/Keymap.js
+++ b/src/extensions/Keymap.js
@@ -17,7 +17,7 @@ const Keymap = Extension.create({
 			 * Toggle editor outline
 			 */
 			'Mod-Alt-h': () => {
-				emit('text:keyboard:outline')
+				emit('text:toc:toggle')
 				return true
 			},
 			/**
diff --git a/src/files.js b/src/files.ts
similarity index 86%
rename from src/files.js
rename to src/files.ts
index ebb08156b64..c85c0d8d79f 100644
--- a/src/files.js
+++ b/src/files.ts
@@ -2,6 +2,7 @@
  * SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
+
 import { loadState } from '@nextcloud/initial-state'
 
 // eslint-disable-next-line import/no-unresolved, n/no-missing-import
@@ -12,7 +13,7 @@ const workspaceEnabled = loadState('text', 'workspace_enabled')
 const openReadOnlyEnabled = loadState('text', 'open_read_only_enabled')
 
 document.addEventListener('DOMContentLoaded', async () => {
-	if (workspaceAvailable && OCA && OCA?.Files?.Settings) {
+	if (workspaceAvailable && window.OCA.Files?.Settings) {
 		const { default: Vue } = await import('vue')
 		const { default: FilesSettings } = await import('./views/FilesSettings.vue')
 
@@ -20,8 +21,8 @@ document.addEventListener('DOMContentLoaded', async () => {
 			render: (h) => h(FilesSettings, {}),
 		})
 		const el = vm.$mount().$el
-		OCA.Files.Settings.register(
-			new OCA.Files.Settings.Setting('text', {
+		window.OCA.Files.Settings.register(
+			new window.OCA.Files.Settings.Setting('text', {
 				el: () => {
 					return el
 				},
diff --git a/src/tests/components/Editor/TableOfContents.spec.ts b/src/tests/components/Editor/TableOfContents.spec.ts
index 76ec54592c3..791de3f3b8a 100644
--- a/src/tests/components/Editor/TableOfContents.spec.ts
+++ b/src/tests/components/Editor/TableOfContents.spec.ts
@@ -5,22 +5,45 @@
 
 import type { Editor } from '@tiptap/core'
 import { mount } from '@vue/test-utils'
-import { expect, test, vi } from 'vitest'
-import { nextTick, shallowRef } from 'vue'
-import TableOfContents from '../../../components/Editor/TableOfContents.vue'
+import { expect, test } from 'vitest'
+import { shallowRef, type ShallowRef } from 'vue'
+import TocContainer from '../../../components/Editor/TableOfContents/TocContainer.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'
 
-const text = 'Level 1 heading'
-const content = `<h1>${text}</h1>`
-const headingsForContent = [{ id: 'h-level-1-heading', level: 1, offset: 0, text }]
+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) => {
-	return mount(TableOfContents, {
+const mountWithEditor = (editor: Editor, displayToc = false) => {
+	const { headings, displayToc: displayTocRef } = provideEditorHeadings(editor)
+	displayTocRef.value = displayToc
+
+	return mount(TocContainer, {
 		provide: {
 			[editorKey as symbol]: shallowRef(editor),
+			[displayTocKey as symbol]: displayTocRef,
+			[headingsKey as symbol]: headings,
 		},
 	})
 }
@@ -29,37 +52,46 @@ test('renders nothing for editor without headings', () => {
 	const editor = createEditor('no heading here')
 	const wrapper = mountWithEditor(editor)
 	expect(wrapper.text()).toEqual('')
-	expect(wrapper.vm.$data.headings).toEqual([])
+	expect((wrapper.vm as unknown as TocContainerInstance).headings).toEqual([])
 	editor.destroy()
 })
 
-test('renders initial heading', async () => {
-	const editor = createEditor(content)
+test('renders nothing for editor with just one heading', () => {
+	const editor = createEditor('# Heading 1')
 	const wrapper = mountWithEditor(editor)
-	await nextTick()
-	expect(wrapper.text()).toEqual(text)
-	expect(wrapper.vm.$data.headings).toEqual(headingsForContent)
+	expect(wrapper.find('[data-text-el="editor-outline"]').exists()).toBe(false)
+	expect(wrapper.text()).toEqual('')
 	editor.destroy()
 })
 
-test('updates according to editor changes', async () => {
-	const editor = createEditor()
+test('renders outline with two headings', async () => {
+	const editor = createEditor(content)
 	const wrapper = mountWithEditor(editor)
-	await nextTick()
-	editor.commands.insertContent(content)
-	await nextTick()
-	expect(wrapper.text()).toEqual(text)
-	expect(wrapper.vm.$data.headings).toEqual(headingsForContent)
+	expect(wrapper.find('[data-text-el="editor-outline"]').exists()).toBe(true)
+	expect((wrapper.vm as unknown as TocContainerInstance).headings).toEqual(
+		headingsForContent,
+	)
 	editor.destroy()
 })
 
-test('disconnects on destroy', async () => {
+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,
+	)
+	editor.destroy()
+})
+
+test('updates according to editor changes', async () => {
 	const editor = createEditor()
-	const on = vi.spyOn(editor, 'on')
-	const off = vi.spyOn(editor, 'off')
 	const wrapper = mountWithEditor(editor)
-	expect(on).toHaveBeenCalledWith('update', expect.any(Function))
-	wrapper.destroy()
-	expect(off).toHaveBeenCalledWith('update', expect.any(Function))
+	expect((wrapper.vm as unknown as TocContainerInstance).headings).toEqual([])
+	editor.commands.insertContent(content)
+	expect((wrapper.vm as unknown as TocContainerInstance).headings).toEqual(
+		headingsForContent,
+	)
 	editor.destroy()
 })
diff --git a/src/tests/testHelpers/jsdomMocks.js b/src/tests/testHelpers/jsdomMocks.js
index de5c72ecc74..667028dc785 100644
--- a/src/tests/testHelpers/jsdomMocks.js
+++ b/src/tests/testHelpers/jsdomMocks.js
@@ -48,3 +48,10 @@ Range.prototype.getClientRects = () => ({
 	length: 0,
 	[Symbol.iterator]: vi.fn(),
 })
+
+// Mock IntersectionObserver
+global.IntersectionObserver = class IntersectionObserver {
+	observe() {}
+	unobserve() {}
+	disconnect() {}
+}
diff --git a/src/tests/testHelpers/vueMocks.js b/src/tests/testHelpers/vueMocks.js
index 67ab1ed6653..8907ac2a8e6 100644
--- a/src/tests/testHelpers/vueMocks.js
+++ b/src/tests/testHelpers/vueMocks.js
@@ -4,6 +4,7 @@
  */
 
 import { vi } from 'vitest'
+import { ref } from 'vue'
 
 vi.mock('vue', async () => {
 	const Vue = await vi.importActual('vue')
@@ -11,3 +12,8 @@ vi.mock('vue', async () => {
 	Vue.default.config.devtools = false
 	return Vue
 })
+
+// Mock useIsMobile composable from @nextcloud/vue
+vi.mock('@nextcloud/vue/composables/useIsMobile', () => ({
+	useIsMobile: () => ref(false),
+}))
diff --git a/src/views/RichWorkspace.vue b/src/views/RichWorkspace.vue
index 8053187caac..ad55a7f5753 100644
--- a/src/views/RichWorkspace.vue
+++ b/src/views/RichWorkspace.vue
@@ -292,7 +292,7 @@ export default {
 	overflow: visible !important;
 }
 
-#rich-workspace:deep(.content-wrapper) {
+#rich-workspace:deep(.editor__content-wrapper) {
 	overflow: scroll !important;
 	max-height: calc(40vh - 50px);
 	padding-left: 10px;
diff --git a/vite.config.ts b/vite.config.ts
index 6ea4f59dba5..362b67e5065 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -32,7 +32,7 @@ const rewriteMiddlewarePlugin = {
 const config = createAppConfig(
 	{
 		text: path.join(__dirname, 'src', 'main.js'),
-		files: path.join(__dirname, 'src', 'files.js'),
+		files: path.join(__dirname, 'src', 'files.ts'),
 		public: path.join(__dirname, 'src', 'public.js'),
 		viewer: path.join(__dirname, 'src', 'viewer.js'),
 		editor: path.join(__dirname, 'src', 'editor.js'),