diff --git a/lib/Controller/SettingsController.php b/lib/Controller/SettingsController.php
index 2a031a4b808..5651ce13315 100644
--- a/lib/Controller/SettingsController.php
+++ b/lib/Controller/SettingsController.php
@@ -16,7 +16,8 @@
 
 class SettingsController extends Controller {
 	public const ACCEPTED_KEYS = [
-		'workspace_enabled'
+		'workspace_enabled',
+		'is_full_width_editor'
 	];
 
 	public function __construct(
@@ -31,7 +32,7 @@ public function __construct(
 	/**
 	 * @throws \OCP\PreConditionNotMetException
 	 *
-	 * @psalm-return DataResponse<200|400, array{workspace_enabled?: mixed, message?: 'Invalid config key'}, array<never, never>>
+	 * @psalm-return DataResponse<200|400, array{workspace_enabled?: mixed, is_full_width_editor?: mixed, message?: 'Invalid config key'}, array<never, never>>
 	 */
 	#[NoAdminRequired]
 	public function updateConfig(string $key, int|string $value): DataResponse {
diff --git a/lib/Service/ConfigService.php b/lib/Service/ConfigService.php
index 0fd85cb8f80..da3af31a768 100644
--- a/lib/Service/ConfigService.php
+++ b/lib/Service/ConfigService.php
@@ -44,4 +44,8 @@ public function isNotifyPushSyncEnabled(): bool {
 		return $this->appConfig->getValueBool(Application::APP_NAME, 'notify_push');
 
 	}
+
+	public function isFullWidthEditor(?string $userId): bool {
+		return $this->config->getUserValue($userId, Application::APP_NAME, 'is_full_width_editor', '0') === '1';
+	}
 }
diff --git a/lib/Service/InitialStateProvider.php b/lib/Service/InitialStateProvider.php
index c88ea4a1958..f8138f03574 100644
--- a/lib/Service/InitialStateProvider.php
+++ b/lib/Service/InitialStateProvider.php
@@ -77,6 +77,11 @@ public function provideState(): void {
 			'notify_push',
 			$this->configService->isNotifyPushSyncEnabled(),
 		);
+
+		$this->initialState->provideInitialState(
+			'is_full_width_editor',
+			$this->configService->isFullWidthEditor($this->userId),
+		);
 	}
 
 	public function provideFileId(int $fileId): void {
diff --git a/src/components/Editor.vue b/src/components/Editor.vue
index fc81550499e..2df18ff259b 100644
--- a/src/components/Editor.vue
+++ b/src/components/Editor.vue
@@ -5,67 +5,68 @@
 
 <template>
 	<div id="editor-container"
-		ref="el"
-		data-text-el="editor-container"
-		class="text-editor"
-		tabindex="-1"
-		@keydown.stop="onKeyDown">
+		 ref="el"
+		 data-text-el="editor-container"
+		 class="text-editor"
+		 tabindex="-1"
+		 @keydown.stop="onKeyDown">
 		<DocumentStatus v-if="displayedStatus"
-			:idle="idle"
-			:lock="lock"
-			:is-resolving-conflict="isResolvingConflict"
-			:sync-error="syncError"
-			:has-connection-issue="hasConnectionIssue"
-			@reconnect="reconnect" />
+						:idle="idle"
+						:lock="lock"
+						:is-resolving-conflict="isResolvingConflict"
+						:sync-error="syncError"
+						:has-connection-issue="hasConnectionIssue"
+						@reconnect="reconnect" />
 
 		<SkeletonLoading v-if="showLoadingSkeleton" />
 		<Wrapper v-if="displayed"
-			:is-resolving-conflict="isResolvingConflict"
-			:has-connection-issue="hasConnectionIssue"
-			:content-loaded="contentLoaded"
-			:show-outline-outside="showOutlineOutside"
-			@outline-toggled="outlineToggled">
+				 :is-resolving-conflict="isResolvingConflict"
+				 :has-connection-issue="hasConnectionIssue"
+				 :content-loaded="contentLoaded"
+				 :show-outline-outside="showOutlineOutside"
+				 @outline-toggled="outlineToggled">
 			<MainContainer v-if="hasEditor">
 				<!-- Readonly -->
 				<div v-if="readOnly" class="text-editor--readonly-bar">
 					<slot name="readonlyBar">
 						<ReadonlyBar>
 							<Status :document="document"
-								:dirty="dirty"
-								:sessions="filteredSessions"
-								:sync-error="syncError"
-								:has-connection-issue="hasConnectionIssue" />
+									:dirty="dirty"
+									:sessions="filteredSessions"
+									:sync-error="syncError"
+									:has-connection-issue="hasConnectionIssue" />
 						</ReadonlyBar>
 					</slot>
 				</div>
 				<!-- Rich Menu -->
 				<template v-else>
 					<MenuBar v-if="renderMenus"
-						ref="menubar"
-						:is-hidden="hideMenu"
-						:loaded.sync="menubarLoaded">
+							 ref="menubar"
+							 :is-hidden="hideMenu"
+							 :loaded.sync="menubarLoaded">
 						<Status :document="document"
-							:dirty="dirty"
-							:sessions="filteredSessions"
-							:sync-error="syncError"
-							:has-connection-issue="hasConnectionIssue" />
+								:dirty="dirty"
+								:sessions="filteredSessions"
+								:sync-error="syncError"
+								:has-connection-issue="hasConnectionIssue"
+								@editor-width-change="handleEditorWidthChange" />
 						<slot name="header" />
 					</MenuBar>
 					<div v-else class="menubar-placeholder" />
 				</template>
 				<ContentContainer v-show="contentLoaded"
-					ref="contentWrapper" />
+								  ref="contentWrapper" />
 			</MainContainer>
 			<Reader v-if="isResolvingConflict"
-				:content="syncError.data.outsideChange"
-				:is-rich-editor="isRichEditor" />
+					:content="syncError.data.outsideChange"
+					:is-rich-editor="isRichEditor" />
 		</Wrapper>
 		<Assistant v-if="hasEditor" />
 		<Translate :show="translateModal"
-			:content="translateContent"
-			@insert-content="translateInsert"
-			@replace-content="translateReplace"
-			@close="hideTranslate" />
+				   :content="translateContent"
+				   @insert-content="translateInsert"
+				   @replace-content="translateReplace"
+				   @close="hideTranslate" />
 	</div>
 </template>
 
@@ -321,6 +322,9 @@ export default {
 				},
 			}
 		},
+		editorMaxWidth() {
+			return loadState('text', 'is_full_width_editor', false) ? '100%' : '80ch'
+		},
 	},
 	watch: {
 		displayed() {
@@ -328,6 +332,12 @@ export default {
 				this.contentWrapper = this.$refs.contentWrapper
 			})
 		},
+		editorMaxWidth: {
+			immediate: true,
+			handler(newWidth) {
+				this.updateEditorWidth(newWidth)
+			},
+		},
 	},
 	mounted() {
 		if (this.active && (this.hasDocumentParameters)) {
@@ -860,6 +870,19 @@ export default {
 			})
 			this.translateModal = false
 		},
+
+		handleEditorWidthChange(newWidth) {
+			this.updateEditorWidth(newWidth)
+			this.$nextTick(() => {
+				if (this.$editor) {
+					this.$editor.view.updateState(this.$editor.view.state)
+					this.$editor.commands.focus()
+				}
+			})
+		},
+		updateEditorWidth(newWidth) {
+			document.documentElement.style.setProperty('--text-editor-max-width', newWidth)
+		},
 	},
 }
 </script>
@@ -931,75 +954,75 @@ export default {
 </style>
 
 <style lang="scss">
-	@import './../css/variables';
-	@import './../css/style';
-	@import './../css/print';
+@import './../css/variables';
+@import './../css/style';
+@import './../css/print';
 
-	.text-editor__wrapper {
-		@import './../css/prosemirror';
+.text-editor__wrapper {
+	@import './../css/prosemirror';
 
-		// relative position for the alignment of the menububble
-		.text-editor__main {
-			&.draggedOver {
-				background-color: var(--color-primary-element-light);
-			}
-			.text-editor__content-wrapper {
-				position: relative;
-			}
+	// relative position for the alignment of the menububble
+	.text-editor__main {
+		&.draggedOver {
+			background-color: var(--color-primary-element-light);
+		}
+		.text-editor__content-wrapper {
+			position: relative;
 		}
 	}
+}
 
-	.text-editor__wrapper.has-conflicts > .editor {
-		width: 50%;
-	}
+.text-editor__wrapper.has-conflicts > .editor {
+	width: 50%;
+}
 
-	.text-editor__wrapper.has-conflicts > .content-wrapper {
-		width: 50%;
-		#read-only-editor {
-			margin: 0px auto;
-			padding-top: 50px;
-			overflow: initial;
-		}
+.text-editor__wrapper.has-conflicts > .content-wrapper {
+	width: 50%;
+	#read-only-editor {
+		margin: 0px auto;
+		padding-top: 50px;
+		overflow: initial;
 	}
+}
 
-	@keyframes spin {
-		0% { transform: rotate(0deg); }
-		100% { transform: rotate(360deg); }
-	}
+@keyframes spin {
+	0% { transform: rotate(0deg); }
+	100% { transform: rotate(360deg); }
+}
 
-	/* Give a remote user a caret */
-	.collaboration-cursor__caret {
-		position: relative;
-		margin-left: -1px;
-		margin-right: -1px;
-		border-left: 1px solid #0D0D0D;
-		border-right: 1px solid #0D0D0D;
-		word-break: normal;
-		pointer-events: none;
-	}
+/* Give a remote user a caret */
+.collaboration-cursor__caret {
+	position: relative;
+	margin-left: -1px;
+	margin-right: -1px;
+	border-left: 1px solid #0D0D0D;
+	border-right: 1px solid #0D0D0D;
+	word-break: normal;
+	pointer-events: none;
+}
 
-	/* Render the username above the caret */
-	.collaboration-cursor__label {
-		position: absolute;
-		top: -1.4em;
-		left: -1px;
-		font-size: 12px;
-		font-style: normal;
-		font-weight: 600;
-		line-height: normal;
-		user-select: none;
-		color: #0D0D0D;
-		padding: 0.1rem 0.3rem;
-		border-radius: 3px 3px 3px 0;
-		white-space: nowrap;
-		opacity: 0;
-
-		&.collaboration-cursor__label__active {
-			opacity: 1;
-		}
+/* Render the username above the caret */
+.collaboration-cursor__label {
+	position: absolute;
+	top: -1.4em;
+	left: -1px;
+	font-size: 12px;
+	font-style: normal;
+	font-weight: 600;
+	line-height: normal;
+	user-select: none;
+	color: #0D0D0D;
+	padding: 0.1rem 0.3rem;
+	border-radius: 3px 3px 3px 0;
+	white-space: nowrap;
+	opacity: 0;
 
-		&:not(.collaboration-cursor__label__active) {
-			transition: opacity 0.2s 5s;
-		}
+	&.collaboration-cursor__label__active {
+		opacity: 1;
+	}
+
+	&:not(.collaboration-cursor__label__active) {
+		transition: opacity 0.2s 5s;
 	}
+}
 </style>
diff --git a/src/components/Editor/SessionList.vue b/src/components/Editor/SessionList.vue
index d99cdf29376..296ea908529 100644
--- a/src/components/Editor/SessionList.vue
+++ b/src/components/Editor/SessionList.vue
@@ -1,169 +1,197 @@
-<!--
-  - SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors
-  - SPDX-License-Identifier: AGPL-3.0-or-later
--->
-
-<template>
-	<NcPopover class="session-list" placement="bottom">
-		<template #trigger="{ attrs }">
-			<div>
-				<button :title="label"
-					:aria-label="label"
-					class="avatar-list"
-					v-bind="attrs">
-					<div class="avatardiv icon-group" />
-					<AvatarWrapper v-for="session in sessionsVisible"
-						:key="session.id"
-						:session="session"
-						:size="30" />
-				</button>
-			</div>
-		</template>
-		<template #default>
-			<div class="session-menu">
-				<slot name="lastSaved" />
-				<ul>
-					<slot />
-					<li v-for="session in participantsPopover"
-						:key="session.id"
-						:style="avatarStyle(session)">
-						<AvatarWrapper :session="session" :size="36" />
-						<span class="session-label">
-							{{ session.userId ? session.displayName : (session.guestName ? session.guestName : t('text', 'Guest')) }}
-						</span>
-						<span v-if="session.userId === null" class="guest-label">({{ t('text', 'guest') }})</span>
-					</li>
-				</ul>
-			</div>
-		</template>
-	</NcPopover>
-</template>
-
-<script>
-import { NcPopover } from '@nextcloud/vue'
-import AvatarWrapper from './AvatarWrapper.vue'
-import { COLLABORATOR_IDLE_TIME, COLLABORATOR_DISCONNECT_TIME } from '../../services/SyncService.js'
-
-export default {
-	name: 'SessionList',
-	components: {
-		AvatarWrapper,
-		NcPopover,
-	},
-	props: {
-		sessions: {
-			type: Object,
-			default: () => { return {} },
-		},
-	},
-	data() {
-		return {
-			myName: '',
-		}
-	},
-	computed: {
-		label() {
-			return t('text', 'Active people')
-		},
-		participantsPopover() {
-			if (this.currentSession?.guestName) {
-				return this.participantsWithoutCurrent
-			}
-			return this.participants
-		},
-		participantsWithoutCurrent() {
-			return this.participants.filter((session) => !session.isCurrent)
-		},
-		participants() {
-			return Object.values(this.sessions).filter((session) =>
-				session.lastContact > Date.now() / 1000 - COLLABORATOR_DISCONNECT_TIME
-					&& (session.userId !== null || session.guestName !== null),
-			).sort((a, b) => a.lastContact < b.lastContact)
-		},
-		currentSession() {
-			return Object.values(this.sessions).find((session) => session.isCurrent)
-		},
-		avatarStyle() {
-			return (session) => {
-				return {
-					opacity: session.lastContact > Date.now() / 1000 - COLLABORATOR_IDLE_TIME ? 1 : 0.5,
-				}
-			}
-		},
-		sessionsVisible() {
-			return this.participantsWithoutCurrent.slice(0, 3)
-		},
-	},
-}
-</script>
-
-<style scoped lang="scss">
-	.session-list {
-		height: var(--default-clickable-area);
-	}
-	.avatar-list {
-		border: none;
-		background-color: var(--color-main-background);
-		padding: 0;
-		margin: 0;
-		padding-left: 3px;
-		display: inline-flex;
-		flex-direction: row-reverse;
-
-		.avatar-wrapper {
-			margin: 0 -12px 0 0;
-			z-index: 1;
-			border-radius: 50%;
-			overflow: hidden;
-			box-sizing: content-box !important;
-			height: calc(var(--default-clickable-area) - 4px);
-			width: calc(var(--default-clickable-area) - 4px);
-		}
-
-		.icon-more, .icon-group, .icon-settings-dark {
-			width: var(--default-clickable-area);
-			height: var(--default-clickable-area);
-			margin: 0 3px 0 0;
-
-			&:hover {
-				background-color: var(--color-background-hover);
-			}
-		}
-	}
-
-	.session-menu {
-		max-width: 280px;
-		padding-top: 6px;
-		padding-bottom: 6px;
-
-		ul li {
-			align-items: center;
-			display: flex;
-			padding: 6px;
-
-			.avatar-wrapper {
-				height: 36px;
-				width: 36px;
-				margin-right: 6px;
-			}
-
-			.session-label {
-				padding-right: 3px;
-			}
-			.guest-label {
-				padding-left: 3px;
-				color: var(--color-text-maxcontrast);
-			}
-		}
-	}
-
-	label {
-		display: block;
-		margin: 8px;
-	}
-
-	.hint {
-		margin: 8px;
-		color: var(--color-text-maxcontrast);
-	}
-</style>
+<!--
+  - SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+
+<template>
+	<NcPopover class="session-list" placement="bottom">
+		<template #trigger="{ attrs }">
+			<div>
+				<button :title="label"
+					:aria-label="label"
+					class="avatar-list"
+					v-bind="attrs">
+					<div class="avatardiv icon-group" />
+					<AvatarWrapper v-for="session in sessionsVisible"
+						:key="session.id"
+						:session="session"
+						:size="30" />
+				</button>
+			</div>
+		</template>
+		<template #default>
+			<div class="session-menu">
+				<slot name="lastSaved" />
+				<ul>
+					<slot />
+					<li v-for="session in participantsPopover"
+						:key="session.id"
+						:style="avatarStyle(session)">
+						<AvatarWrapper :session="session" :size="36" />
+						<span class="session-label">
+							{{
+								session.userId ? session.displayName : (session.guestName ? session.guestName : t('text', 'Guest'))
+							}}
+						</span>
+						<span v-if="session.userId === null" class="guest-label">({{ t('text', 'guest') }})</span>
+					</li>
+					<li>
+						<NcCheckboxRadioSwitch :checked="isFullWidth" @update:checked="onWidthToggle">
+							{{ t('text', 'Full width editor') }}
+						</NcCheckboxRadioSwitch>
+					</li>
+				</ul>
+			</div>
+		</template>
+	</NcPopover>
+</template>
+
+<script>
+import { NcCheckboxRadioSwitch, NcPopover } from '@nextcloud/vue'
+import AvatarWrapper from './AvatarWrapper.vue'
+import { COLLABORATOR_DISCONNECT_TIME, COLLABORATOR_IDLE_TIME } from '../../services/SyncService.js'
+import { loadState } from '@nextcloud/initial-state'
+import axios from '@nextcloud/axios'
+import { generateUrl } from '@nextcloud/router'
+
+export default {
+	name: 'SessionList',
+	components: {
+		AvatarWrapper,
+		NcPopover,
+		NcCheckboxRadioSwitch,
+	},
+	props: {
+		sessions: {
+			type: Object,
+			default: () => {
+				return {}
+			},
+		},
+	},
+	data() {
+		const isFullWidth = loadState('text', 'is_full_width_editor', false)
+		return {
+			myName: '',
+			isFullWidth,
+		}
+	},
+	computed: {
+		label() {
+			return t('text', 'Active people')
+		},
+		participantsPopover() {
+			if (this.currentSession?.guestName) {
+				return this.participantsWithoutCurrent
+			}
+			return this.participants
+		},
+		participantsWithoutCurrent() {
+			return this.participants.filter((session) => !session.isCurrent)
+		},
+		participants() {
+			return Object.values(this.sessions).filter((session) =>
+				session.lastContact > Date.now() / 1000 - COLLABORATOR_DISCONNECT_TIME
+				&& (session.userId !== null || session.guestName !== null),
+			).sort((a, b) => a.lastContact < b.lastContact)
+		},
+		currentSession() {
+			return Object.values(this.sessions).find((session) => session.isCurrent)
+		},
+		avatarStyle() {
+			return (session) => {
+				return {
+					opacity: session.lastContact > Date.now() / 1000 - COLLABORATOR_IDLE_TIME ? 1 : 0.5,
+				}
+			}
+		},
+		sessionsVisible() {
+			return this.participantsWithoutCurrent.slice(0, 3)
+		},
+	},
+	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',
+			})
+		},
+	},
+}
+</script>
+
+<style scoped lang="scss">
+.session-list {
+	height: var(--default-clickable-area);
+}
+
+.avatar-list {
+	border: none;
+	background-color: var(--color-main-background);
+	padding: 0;
+	margin: 0;
+	padding-left: 3px;
+	display: inline-flex;
+	flex-direction: row-reverse;
+
+	.avatar-wrapper {
+		margin: 0 -12px 0 0;
+		z-index: 1;
+		border-radius: 50%;
+		overflow: hidden;
+		box-sizing: content-box !important;
+		height: calc(var(--default-clickable-area) - 4px);
+		width: calc(var(--default-clickable-area) - 4px);
+	}
+
+	.icon-more, .icon-group, .icon-settings-dark {
+		width: var(--default-clickable-area);
+		height: var(--default-clickable-area);
+		margin: 0 3px 0 0;
+
+		&:hover {
+			background-color: var(--color-background-hover);
+		}
+	}
+}
+
+.session-menu {
+	max-width: 280px;
+	padding-top: 6px;
+	padding-bottom: 6px;
+
+	ul li {
+		align-items: center;
+		display: flex;
+		padding: 6px;
+
+		.avatar-wrapper {
+			height: 36px;
+			width: 36px;
+			margin-right: 6px;
+		}
+
+		.session-label {
+			padding-right: 3px;
+		}
+
+		.guest-label {
+			padding-left: 3px;
+			color: var(--color-text-maxcontrast);
+		}
+	}
+}
+
+label {
+	display: block;
+	margin: 8px;
+}
+
+.hint {
+	margin: 8px;
+	color: var(--color-text-maxcontrast);
+}
+</style>
diff --git a/src/components/Editor/Status.vue b/src/components/Editor/Status.vue
index e211192edcb..72113249ef9 100644
--- a/src/components/Editor/Status.vue
+++ b/src/components/Editor/Status.vue
@@ -15,7 +15,8 @@
 				</template>
 			</NcButton>
 		</div>
-		<SessionList :sessions="sessions">
+		<SessionList :sessions="sessions"
+			@editor-width-change="onEditorWidthChange">
 			<p slot="lastSaved" class="last-saved">
 				{{ t('text', 'Last saved') }}: {{ lastSavedString }}
 			</p>
@@ -72,7 +73,9 @@ export default {
 		},
 		sessions: {
 			type: Object,
-			default: () => { return {} },
+			default: () => {
+				return {}
+			},
 		},
 	},
 
@@ -128,35 +131,38 @@ export default {
 				this.$syncService.forceSave()
 			}
 		},
+		onEditorWidthChange(newWidth) {
+			this.$emit('editor-width-change', newWidth)
+		},
 	},
 }
 </script>
 
 <style scoped lang="scss">
-	.text-editor__session-list {
-		display: flex;
+.text-editor__session-list {
+	display: flex;
 
-		input, div {
-			vertical-align: middle;
-			margin-left: 3px;
-		}
+	input, div {
+		vertical-align: middle;
+		margin-left: 3px;
 	}
+}
 
-	.save-status {
-		border-radius: 50%;
-		color: var(--color-text-lighter);
-		display: inline-flex;
-		justify-content: center;
-		padding: 0;
-		height: var(--default-clickable-area);
-		width: var(--default-clickable-area);
+.save-status {
+	border-radius: 50%;
+	color: var(--color-text-lighter);
+	display: inline-flex;
+	justify-content: center;
+	padding: 0;
+	height: var(--default-clickable-area);
+	width: var(--default-clickable-area);
 
-		&:hover {
-			background-color: var(--color-background-hover);
-		}
+	&:hover {
+		background-color: var(--color-background-hover);
 	}
+}
 
-	.last-saved {
-		padding: 6px;
-	}
+.last-saved {
+	padding: 6px;
+}
 </style>