Add per user setting for text editor max width

Signed-off-by: Azri Adam <azriadam.cs@gmail.com>
nextcloud · Nov 16, 2024 · fb0938c · fb0938c
1 parent 3948a67
commit fb0938c
Show file tree

Hide file tree

Showing 6 changed files with 320 additions and 253 deletions.
diff --git 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
@@ -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
@@ -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
@@ -48,7 +48,8 @@
 							:dirty="dirty"
 							:sessions="filteredSessions"
 							:sync-error="syncError"
-							:has-connection-issue="hasConnectionIssue" />
+							:has-connection-issue="hasConnectionIssue"
+							@editor-width-change="handleEditorWidthChange" />
 						<slot name="header" />
 					</MenuBar>
 					<div v-else class="menubar-placeholder" />
@@ -321,13 +322,22 @@ export default {
 				},
 			}
 		},
+		editorMaxWidth() {
+			return loadState('text', 'is_full_width_editor', false) ? '100%' : '80ch'
+		},
 	},
 	watch: {
 		displayed() {
 			this.$nextTick(() => {
 				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>