diff --git a/cypress/e2e/MenuBar.spec.js b/cypress/e2e/MenuBar.spec.js
index 01a4206150b..76c885a9be4 100644
--- a/cypress/e2e/MenuBar.spec.js
+++ b/cypress/e2e/MenuBar.spec.js
@@ -3,23 +3,18 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
-import { initUserAndFiles, randUser } from '../utils/index.js'
+import { randUser } from '../utils/index.js'
 
 const user = randUser()
-const fileName = 'empty.md'
 
 describe('Test the rich text editor menu bar', function () {
-	before(() => initUserAndFiles(user, fileName))
+	before(function () {
+		cy.createUser(user)
+	})
 
 	beforeEach(function () {
 		cy.login(user)
-		cy.visit('/apps/files', {
-			onBeforeLoad(win) {
-				cy.stub(win, 'open').as('winOpen')
-			},
-		})
-
-		cy.openFile(fileName)
+		cy.uploadTestFile()
 	})
 
 	describe('word count', function () {
@@ -32,30 +27,78 @@ describe('Test the rich text editor menu bar', function () {
 				.get('[data-text-action-entry="character-count"]')
 		}
 
-		beforeEach(cy.clearContent)
+		beforeEach(function () {
+			cy.visit('/apps/files')
+			cy.openTestFile()
+		})
+
 		it('empty file', () => {
-			cy.getFile(fileName).then(($el) => {
-				cy.getActionEntry('remain').click()
-				getWordCount().should('include.text', '0 words, 0 chars')
-			})
+			cy.getContent()
+			cy.getActionEntry('remain').click()
+			getWordCount().should('include.text', '0 words, 0 chars')
 		})
 
 		it('single word', () => {
-			cy.getFile(fileName).then(($el) => {
-				cy.clearContent()
-				cy.getContent().type('  Hello  ')
-				cy.getActionEntry('remain').click()
-				getWordCount().should('include.text', '1 word, 9 chars')
-			})
+			cy.getContent().type('  Hello  ')
+			cy.getActionEntry('remain').click()
+			getWordCount().should('include.text', '1 word, 9 chars')
 		})
 
 		it('multiple words', () => {
-			cy.getFile(fileName).then(($el) => {
-				cy.clearContent()
-				cy.getContent().type('Hello \nworld')
-				cy.getActionEntry('remain').click()
-				getWordCount().should('include.text', '2 words, 11 chars')
-			})
+			cy.getContent().type('Hello \nworld')
+			cy.getActionEntry('remain').click()
+			getWordCount().should('include.text', '2 words, 11 chars')
+		})
+	})
+
+	describe('text width toggle', function () {
+		beforeEach(() => {
+			cy.configureText('is_full_width_editor', 0)
+			cy.visit('/apps/files')
+			cy.window()
+				.its('document.documentElement.style')
+				.invoke('getPropertyValue', '--text-editor-max-width')
+				.as('maxWidth')
+		})
+
+		it('applys default', function () {
+			cy.openTestFile()
+			cy.get('@maxWidth').should('equal', '80ch')
+		})
+
+		it('toggles value', function () {
+			cy.openTestFile()
+			cy.getActionEntry('remain').click()
+			cy.contains('Full width editor').click()
+			cy.get('@maxWidth').should('equal', '100%')
+		})
+
+		it('preserves on reopen', function () {
+			cy.openTestFile()
+			cy.getActionEntry('remain').click()
+			cy.contains('Full width editor').click()
+			cy.closeFile()
+			cy.openTestFile()
+			cy.get('@maxWidth').should('equal', '100%')
+		})
+
+		it('preserves on reload', function () {
+			cy.openTestFile()
+			cy.getActionEntry('remain').click()
+			cy.contains('Full width editor').click()
+			cy.visit('/apps/files')
+			cy.openTestFile()
+			cy.get('@maxWidth').should('equal', '100%')
+		})
+
+		it('does not interfere if width is already set', function () {
+			cy.window()
+				.its('document.body.style')
+				.invoke('setProperty', '--text-editor-max-width', '987px')
+			cy.openTestFile()
+			cy.getActionEntry('remain').click()
+			cy.contains('Full width editor').should('not.exist')
+			cy.get('@maxWidth').should('equal', '')
 		})
 	})
 })
diff --git a/src/components/Editor.vue b/src/components/Editor.vue
index 099141f2597..a4e9840260e 100644
--- a/src/components/Editor.vue
+++ b/src/components/Editor.vue
@@ -50,8 +50,7 @@
 							:dirty="dirty"
 							:sessions="filteredSessions"
 							:sync-error="syncError"
-							:has-connection-issue="requireReconnect"
-							@editor-width-change="handleEditorWidthChange" />
+							:has-connection-issue="requireReconnect" />
 						<slot name="header" />
 					</MenuBar>
 					<div v-else class="menubar-placeholder" />
@@ -84,7 +83,6 @@
 import { getCurrentUser } from '@nextcloud/auth'
 import { emit, subscribe, unsubscribe } from '@nextcloud/event-bus'
 import { File } from '@nextcloud/files'
-import { loadState } from '@nextcloud/initial-state'
 import { Collaboration } from '@tiptap/extension-collaboration'
 import { useElementSize } from '@vueuse/core'
 import Vue, { defineComponent, ref, set, shallowRef, watch } from 'vue'
@@ -101,6 +99,7 @@ import { generateRemoteUrl } from '@nextcloud/router'
 import { Awareness } from 'y-protocols/awareness.js'
 import { provideConnection } from '../composables/useConnection.ts'
 import { useEditorMethods } from '../composables/useEditorMethods.ts'
+import { provideEditorWidth } from '../composables/useEditorWidth.ts'
 import { provideSaveService } from '../composables/useSaveService.ts'
 import { provideSyncService } from '../composables/useSyncService.ts'
 import { useSyntaxHighlighting } from '../composables/useSyntaxHighlighting.ts'
@@ -257,6 +256,9 @@ export default defineComponent({
 			: createPlainEditor({ language, extensions })
 		provideEditor(editor)
 
+		const { applyEditorWidth } = provideEditorWidth()
+		applyEditorWidth()
+
 		const { setEditable } = useEditorMethods(editor)
 
 		const serialize = isRichEditor
@@ -371,9 +373,6 @@ export default defineComponent({
 				},
 			}
 		},
-		editorMaxWidth() {
-			return loadState('text', 'is_full_width_editor', false) ? '100%' : '80ch'
-		},
 	},
 	watch: {
 		displayed() {
@@ -381,12 +380,6 @@ export default defineComponent({
 				this.contentWrapper = this.$refs.contentWrapper
 			})
 		},
-		editorMaxWidth: {
-			immediate: true,
-			handler(newWidth) {
-				this.updateEditorWidth(newWidth)
-			},
-		},
 		dirty(val) {
 			if (val) {
 				window.addEventListener('beforeunload', this.saveBeforeUnload)
@@ -875,20 +868,6 @@ export default defineComponent({
 			this.translateModal = false
 		},
 
-		handleEditorWidthChange(newWidth) {
-			this.updateEditorWidth(newWidth)
-			this.$nextTick(() => {
-				this.editor.view.updateState(this.editor.view.state)
-				this.editor.commands.focus()
-			})
-		},
-		updateEditorWidth(newWidth) {
-			document.documentElement.style.setProperty(
-				'--text-editor-max-width',
-				newWidth,
-			)
-		},
-
 		saveBeforeUnload() {
 			this.saveService.saveViaSendBeacon()
 		},
@@ -976,7 +955,6 @@ export default defineComponent({
 </style>
 
 <style lang="scss">
-@import './../css/variables';
 @import './../css/style';
 @import './../css/print';
 
diff --git a/src/components/Editor/SessionList.vue b/src/components/Editor/SessionList.vue
index 8ecc32f5db9..1793d570494 100644
--- a/src/components/Editor/SessionList.vue
+++ b/src/components/Editor/SessionList.vue
@@ -4,7 +4,10 @@
 -->
 
 <template>
-	<NcPopover class="session-list" placement="bottom">
+	<NcPopover
+		:no-focus-trap="!$slots.default"
+		class="session-list"
+		placement="bottom">
 		<template #trigger="{ attrs }">
 			<div>
 				<NcButton
@@ -47,13 +50,6 @@
 							>({{ t('text', 'guest') }})</span
 						>
 					</li>
-					<li>
-						<NcCheckboxRadioSwitch
-							:checked="isFullWidth"
-							@update:checked="onWidthToggle">
-							{{ t('text', 'Full width editor') }}
-						</NcCheckboxRadioSwitch>
-					</li>
 				</ul>
 			</div>
 		</template>
@@ -61,12 +57,8 @@
 </template>
 
 <script>
-import axios from '@nextcloud/axios'
-import { loadState } from '@nextcloud/initial-state'
 import { t } from '@nextcloud/l10n'
-import { generateUrl } from '@nextcloud/router'
 import NcButton from '@nextcloud/vue/components/NcButton'
-import NcCheckboxRadioSwitch from '@nextcloud/vue/components/NcCheckboxRadioSwitch'
 import NcPopover from '@nextcloud/vue/components/NcPopover'
 import AccountMultipleOutlineIcon from 'vue-material-design-icons/AccountMultipleOutline.vue'
 import {
@@ -82,7 +74,6 @@ export default {
 		AvatarWrapper,
 		NcButton,
 		NcPopover,
-		NcCheckboxRadioSwitch,
 	},
 	props: {
 		sessions: {
@@ -93,10 +84,8 @@ export default {
 		},
 	},
 	data() {
-		const isFullWidth = loadState('text', 'is_full_width_editor', false)
 		return {
 			myName: '',
-			isFullWidth,
 		}
 	},
 	computed: {
@@ -141,15 +130,6 @@ export default {
 		},
 	},
 	methods: {
-		onWidthToggle(checked) {
-			this.isFullWidth = checked
-			this.$emit('editor-width-change', checked ? '100%' : '80ch')
-
-			axios.post(generateUrl('/apps/text/settings'), {
-				key: 'is_full_width_editor',
-				value: checked ? '1' : '0',
-			})
-		},
 		t,
 	},
 }
diff --git a/src/components/Editor/Status.vue b/src/components/Editor/Status.vue
index 2d280cb7683..a92503c87b4 100644
--- a/src/components/Editor/Status.vue
+++ b/src/components/Editor/Status.vue
@@ -20,7 +20,7 @@
 				</template>
 			</NcButton>
 		</div>
-		<SessionList :sessions="sessions" @editor-width-change="onEditorWidthChange">
+		<SessionList :sessions="sessions">
 			<p slot="lastSaved" class="last-saved">
 				{{ t('text', 'Last saved') }}: {{ lastSavedString }}
 			</p>
@@ -145,9 +145,6 @@ export default {
 				this.saveService.forceSave()
 			}
 		},
-		onEditorWidthChange(newWidth) {
-			this.$emit('editor-width-change', newWidth)
-		},
 		t,
 	},
 }
diff --git a/src/components/Menu/MenuBar.vue b/src/components/Menu/MenuBar.vue
index aa1c2396cae..76f35ca71aa 100644
--- a/src/components/Menu/MenuBar.vue
+++ b/src/components/Menu/MenuBar.vue
@@ -51,15 +51,8 @@
 				:force-enabled="true"
 				@click="activeMenuEntry = 'remain'">
 				<template #lastAction="{ visible }">
-					<NcActionButton
-						v-if="canTranslate"
-						close-after-click
-						@click="showTranslate">
-						<template #icon>
-							<TranslateVariant />
-						</template>
-						{{ t('text', 'Translate') }}
-					</NcActionButton>
+					<TranslateButton />
+					<WidthToggle />
 					<ActionFormattingHelp @click="showHelp" />
 					<NcActionSeparator />
 					<CharacterCount v-bind="{ visible }" />
@@ -73,9 +66,6 @@
 </template>
 
 <script>
-import { emit } from '@nextcloud/event-bus'
-import { loadState } from '@nextcloud/initial-state'
-import NcActionButton from '@nextcloud/vue/components/NcActionButton'
 import NcActionSeparator from '@nextcloud/vue/components/NcActionSeparator'
 import { useElementSize } from '@vueuse/core'
 import { ref } from 'vue'
@@ -85,7 +75,7 @@ import { useEditor } from '../../composables/useEditor.ts'
 import { useEditorFlags } from '../../composables/useEditorFlags.ts'
 import { useIsMobileMixin } from '../Editor.provider.ts'
 import HelpModal from '../HelpModal.vue'
-import { DotsHorizontal, TranslateVariant } from '../icons.js'
+import { DotsHorizontal } from '../icons.js'
 import ActionFormattingHelp from './ActionFormattingHelp.vue'
 import ActionList from './ActionList.vue'
 import ActionSingle from './ActionSingle.vue'
@@ -93,6 +83,8 @@ import CharacterCount from './CharacterCount.vue'
 import { MenuEntries, ReadOnlyDoneEntries } from './entries.js'
 import { MENU_ID } from './MenuBar.provider.js'
 import ToolBarLogic from './ToolBarLogic.js'
+import TranslateButton from './TranslateButton.vue'
+import WidthToggle from './WidthToggle.vue'
 
 export default {
 	name: 'MenuBar',
@@ -102,9 +94,9 @@ export default {
 		ActionSingle,
 		HelpModal,
 		NcActionSeparator,
-		NcActionButton,
 		CharacterCount,
-		TranslateVariant,
+		TranslateButton,
+		WidthToggle,
 	},
 	extends: ToolBarLogic,
 	mixins: [useIsMobileMixin],
@@ -146,8 +138,6 @@ export default {
 			randomID: `menu-bar-${Math.ceil(Math.random() * 10000 + 500).toString(16)}`,
 			displayHelp: false,
 			isReady: false,
-			canTranslate:
-				loadState('text', 'translation_languages', []).from?.length > 0,
 			resize: null,
 		}
 	},
@@ -230,22 +220,6 @@ export default {
 		hideHelp() {
 			this.displayHelp = false
 		},
-		showTranslate() {
-			const {
-				commands,
-				view: { state },
-			} = this.editor
-			const { from, to } = state.selection
-			let selectedText = state.doc.textBetween(from, to, ' ')
-
-			if (!selectedText.trim().length) {
-				commands.selectAll()
-				selectedText = state.doc.textContent
-			}
-
-			console.debug('translation click', state.selection, selectedText)
-			emit('text:translate-modal:show', { content: selectedText })
-		},
 		t,
 	},
 }
diff --git a/src/components/Menu/TranslateButton.vue b/src/components/Menu/TranslateButton.vue
new file mode 100644
index 00000000000..85a0dc90444
--- /dev/null
+++ b/src/components/Menu/TranslateButton.vue
@@ -0,0 +1,41 @@
+<!--
+  - SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+
+<template>
+	<NcActionButton v-if="canTranslate" close-after-click @click="showTranslate">
+		<template #icon>
+			<TranslateVariant />
+		</template>
+		{{ t('text', 'Translate') }}
+	</NcActionButton>
+</template>
+
+<script setup>
+import { emit } from '@nextcloud/event-bus'
+import { loadState } from '@nextcloud/initial-state'
+import { t } from '@nextcloud/l10n'
+import NcActionButton from '@nextcloud/vue/components/NcActionButton'
+import { useEditor } from '../../composables/useEditor.ts'
+import { TranslateVariant } from '../icons.js'
+
+const { editor } = useEditor()
+const languages = loadState('text', 'translation_languages', {})
+console.debug(languages)
+const canTranslate = Boolean(languages.from?.length)
+
+const showTranslate = () => {
+	const {
+		commands,
+		view: { state },
+	} = editor.value
+	const { from, to } = state.selection
+	let selectedText = state.doc.textBetween(from, to, ' ')
+	if (!selectedText.trim().length) {
+		commands.selectAll()
+		selectedText = state.doc.textContent
+	}
+	emit('text:translate-modal:show', { content: selectedText })
+}
+</script>
diff --git a/src/components/Menu/WidthToggle.vue b/src/components/Menu/WidthToggle.vue
new file mode 100644
index 00000000000..530ab70f974
--- /dev/null
+++ b/src/components/Menu/WidthToggle.vue
@@ -0,0 +1,21 @@
+<!--
+  - SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+
+<template>
+	<NcActionCheckbox
+		v-if="canToggleWidth"
+		:checked="isFullWidth"
+		@update:checked="setFullWidth">
+		{{ t('text', 'Full width editor') }}
+	</NcActionCheckbox>
+</template>
+
+<script setup>
+import { t } from '@nextcloud/l10n'
+import NcActionCheckbox from '@nextcloud/vue/components/NcActionCheckbox'
+import { useEditorWidth } from '../../composables/useEditorWidth.ts'
+
+const { canToggleWidth, isFullWidth, setFullWidth } = useEditorWidth()
+</script>
diff --git a/src/components/ViewerComponent.vue b/src/components/ViewerComponent.vue
index 6e25ae48d3e..d7a9837d185 100644
--- a/src/components/ViewerComponent.vue
+++ b/src/components/ViewerComponent.vue
@@ -220,7 +220,6 @@ export default {
 }
 </style>
 <style lang="scss">
-@import './../css/variables';
 @media only screen and (max-width: 512px) {
 	// on mobile, modal-container has top: 50px
 	.text-editor {
diff --git a/src/composables/useEditorWidth.ts b/src/composables/useEditorWidth.ts
new file mode 100644
index 00000000000..ee0dac3a4a0
--- /dev/null
+++ b/src/composables/useEditorWidth.ts
@@ -0,0 +1,99 @@
+/**
+ * SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+/*
+ * Handle the state of the full editor width toggle.
+ *
+ * If the css variable `--text-editor-max-width` is already set
+ * for `document.body` it will be left as is and
+ * no toggle will be shown in the text ui.
+ * This way the collectives app handles it's per document width setting.
+ *
+ * Otherwise this composable handles the `is_full_width_editor` initial state.
+ * It sets the css variable on the document accordingly.
+ * The state is stored in a singleton to preserve and reuse it on the next mount.
+ * It is persisted in the user settings across page reloads.
+ *
+ */
+
+import axios from '@nextcloud/axios'
+import { emit, subscribe } from '@nextcloud/event-bus'
+import { loadState } from '@nextcloud/initial-state'
+import { generateUrl } from '@nextcloud/router'
+import {
+	computed,
+	inject,
+	provide,
+	readonly,
+	ref,
+	watch,
+	type InjectionKey,
+	type Ref,
+} from 'vue'
+
+// Keep the current value around when leaving the editor and reopening
+let valueSingleton = loadState('text', 'is_full_width_editor', false)
+
+// This is either the reactive value of the editor width toggle
+// or null if the width has already been set outside of text.
+export const editorWidthKey = Symbol('text:editor:width') as InjectionKey<
+	Readonly<Ref<boolean> | null>
+>
+
+/**
+ * Detect if other apps (such as collectives) already configured texts max width.
+ *
+ * Check if document.body has a css variable `--text-editor-max-width` (either set or inherited).
+ * Get the value set by text in the documentElement style.
+ * If both values are set and match we assume text is handling the width.
+ */
+function maxWidthSetOutsideOfText() {
+	const alreadySet = getComputedStyle(document.body).getPropertyValue(
+		'--text-editor-max-width',
+	)
+	const setByText = document.documentElement.style.getPropertyValue(
+		'--text-editor-max-width',
+	)
+	return Boolean(alreadySet) && alreadySet !== setByText
+}
+
+export const provideEditorWidth = () => {
+	// keep style that is already set - for example by collectives
+	if (maxWidthSetOutsideOfText()) {
+		provide(editorWidthKey, null)
+		return { applyEditorWidth: () => {} }
+	}
+	const isFullWidth = ref(valueSingleton)
+	provide(editorWidthKey, readonly(isFullWidth))
+	subscribe('text:editor:full-width', ({ value }) => {
+		valueSingleton = value
+		isFullWidth.value = value
+	})
+	const width = computed(() => (isFullWidth.value ? '100%' : '80ch'))
+	const applyEditorWidth = () => {
+		document.documentElement.style.setProperty(
+			'--text-editor-max-width',
+			width.value,
+		)
+	}
+	watch(width, applyEditorWidth)
+	return { applyEditorWidth }
+}
+
+export const useEditorWidth = () => {
+	// This will be null if the width is already configured outside of text.
+	const isFullWidth = inject(editorWidthKey)
+	if (isFullWidth === null) {
+		return { canToggleWidth: false }
+	}
+	const setFullWidth = (checked: boolean) => {
+		axios.post(generateUrl('/apps/text/settings'), {
+			key: 'is_full_width_editor',
+			value: checked ? '1' : '0',
+		})
+		emit('text:editor:full-width', { value: checked })
+	}
+	return { canToggleWidth: true, isFullWidth, setFullWidth }
+}
diff --git a/src/css/style.scss b/src/css/style.scss
index bde2e2d9ddb..cc6674f38e0 100644
--- a/src/css/style.scss
+++ b/src/css/style.scss
@@ -5,8 +5,6 @@
 
 @use 'sass:math';
 
-@import './variables';
-
 .ProseMirror-hideselection {
 	caret-color: transparent;
 	color: var(--color-main-text);
diff --git a/src/css/variables.scss b/src/css/variables.scss
deleted file mode 100644
index 67cee0ec994..00000000000
--- a/src/css/variables.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-/**
- * SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors
- * SPDX-License-Identifier: AGPL-3.0-or-later
- */
-
-:root {
-	--text-editor-max-width: 80ch;
-}
diff --git a/src/event-bus.d.ts b/src/event-bus.d.ts
new file mode 100644
index 00000000000..29533339c09
--- /dev/null
+++ b/src/event-bus.d.ts
@@ -0,0 +1,12 @@
+/**
+ * SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+declare module '@nextcloud/event-bus' {
+	interface NextcloudEvents {
+		'text:editor:full-width': { value: boolean }
+	}
+}
+
+export {}
diff --git a/src/helpers/files.js b/src/helpers/files.js
index 8ece2900f8d..218abea3e08 100644
--- a/src/helpers/files.js
+++ b/src/helpers/files.js
@@ -192,7 +192,7 @@ let FilesHeaderRichWorkspaceView
 let FilesHeaderRichWorkspaceInstance
 let latestFolder
 
-function enabled(_, view) {
+const enabled = (_, view) => {
 	return ['files', 'favorites', 'public-share'].includes(view.id)
 }
 
diff --git a/src/tests/components/Editor/TableOfContents.spec.js b/src/tests/components/Editor/TableOfContents.spec.ts
similarity index 67%
rename from src/tests/components/Editor/TableOfContents.spec.js
rename to src/tests/components/Editor/TableOfContents.spec.ts
index 23de6e98b0a..c8a0f9bca10 100644
--- a/src/tests/components/Editor/TableOfContents.spec.js
+++ b/src/tests/components/Editor/TableOfContents.spec.ts
@@ -3,22 +3,25 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
+import type { Editor } from '@tiptap/core'
 import { mount } from '@vue/test-utils'
-import { test, vi } from 'vitest'
+import { expect, test, vi } from 'vitest'
 import { nextTick, shallowRef } from 'vue'
 import TableOfContents from '../../../components/Editor/TableOfContents.vue'
-import { editorKey } from '../../../composables/useEditor.ts'
+import { editorKey } from '../../../composables/useEditor'
 import Heading from '../../../nodes/Heading.js'
-import createCustomEditor from '../../testHelpers/createCustomEditor.ts'
+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 }]
 
 const createEditor = (content = '') => createCustomEditor(content, [Heading])
-const mountWithEditor = (editor) => {
+const mountWithEditor = (editor: Editor) => {
 	return mount(TableOfContents, {
-		provide: { [editorKey]: shallowRef(editor) },
+		provide: {
+			[editorKey as symbol]: shallowRef(editor),
+		},
 	})
 }
 
@@ -26,7 +29,7 @@ test('renders nothing for editor without headings', () => {
 	const editor = createEditor('no heading here')
 	const wrapper = mountWithEditor(editor)
 	expect(wrapper.text()).toEqual('')
-	expect(wrapper.vm.headings).toEqual([])
+	expect(wrapper.vm.$data.headings).toEqual([])
 })
 
 test('renders initial heading', async () => {
@@ -34,7 +37,7 @@ test('renders initial heading', async () => {
 	const wrapper = mountWithEditor(editor)
 	await nextTick()
 	expect(wrapper.text()).toEqual(text)
-	expect(wrapper.vm.headings).toEqual(headingsForContent)
+	expect(wrapper.vm.$data.headings).toEqual(headingsForContent)
 })
 
 test('updates according to editor changes', async () => {
@@ -44,13 +47,15 @@ test('updates according to editor changes', async () => {
 	editor.commands.insertContent(content)
 	await nextTick()
 	expect(wrapper.text()).toEqual(text)
-	expect(wrapper.vm.headings).toEqual(headingsForContent)
+	expect(wrapper.vm.$data.headings).toEqual(headingsForContent)
 })
 
 test('disconnects on destroy', async () => {
-	const editor = { on: vi.fn(), off: vi.fn(), state: {} }
+	const editor = createEditor()
+	const on = vi.spyOn(editor, 'on')
+	const off = vi.spyOn(editor, 'off')
 	const wrapper = mountWithEditor(editor)
-	expect(editor.on).toHaveBeenCalledWith('update', expect.any(Function))
+	expect(on).toHaveBeenCalledWith('update', expect.any(Function))
 	wrapper.destroy()
-	expect(editor.off).toHaveBeenCalledWith('update', expect.any(Function))
+	expect(off).toHaveBeenCalledWith('update', expect.any(Function))
 })
diff --git a/src/tests/components/Menu/TranslateButton.spec.ts b/src/tests/components/Menu/TranslateButton.spec.ts
new file mode 100644
index 00000000000..fda320599b7
--- /dev/null
+++ b/src/tests/components/Menu/TranslateButton.spec.ts
@@ -0,0 +1,59 @@
+/**
+ * SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import { subscribe } from '@nextcloud/event-bus'
+import { loadState } from '@nextcloud/initial-state'
+import type { Editor } from '@tiptap/core'
+import { mount } from '@vue/test-utils'
+import { beforeEach, expect, test, vi } from 'vitest'
+import { nextTick, shallowRef } from 'vue'
+import TranslateButton from '../../../components/Menu/TranslateButton.vue'
+import { editorKey } from '../../../composables/useEditor'
+import Heading from '../../../nodes/Heading.js'
+import createCustomEditor from '../../testHelpers/createCustomEditor'
+
+const text = 'Level 1 heading'
+const content = `<h1>${text}</h1>`
+
+const createEditor = (content = '') => createCustomEditor(content, [Heading])
+const mountWithEditor = (editor: Editor) => {
+	return mount(TranslateButton, {
+		provide: {
+			[editorKey as symbol]: shallowRef(editor),
+		},
+	})
+}
+
+beforeEach(() => {
+	vi.mock('@nextcloud/initial-state')
+})
+
+test('does not render without state', async () => {
+	vi.mocked(loadState).mockReturnValue({ from: [], to: [] })
+	const editor = createEditor(content)
+	const wrapper = mountWithEditor(editor)
+	await nextTick()
+	expect(wrapper.find('button').exists()).toBe(false)
+})
+
+test('does render with translations', async () => {
+	vi.mocked(loadState).mockReturnValue({ from: ['en'], to: ['fr'] })
+	const editor = createEditor(content)
+	const wrapper = mountWithEditor(editor)
+	await nextTick()
+	expect(wrapper.find('button').exists()).toBe(true)
+})
+
+test('emits the full content when clicked', async () => {
+	vi.mocked(loadState).mockReturnValue({ from: ['en'], to: ['fr'] })
+	const listen = vi.fn()
+	subscribe('text:translate-modal:show', listen)
+	const editor = createEditor(content)
+	const wrapper = mountWithEditor(editor)
+	await nextTick()
+	wrapper.find('button').trigger('click')
+	await nextTick()
+	expect(listen).toHaveBeenCalledWith({ content: text })
+})