From 0bd164642e947dfffa3d8aeaed71456b210ecefe Mon Sep 17 00:00:00 2001
From: Henry Heino <46334387+personalizedrefrigerator@users.noreply.github.com>
Date: Sun, 17 Dec 2023 12:57:12 -0800
Subject: [PATCH] Desktop: Fixes #9528: Fix maximum width setting not respected
 by beta editor (#9529)

---
 .../NoteBody/CodeMirror/utils/useStyles.ts           |  7 +++++--
 packages/editor/CodeMirror/theme.ts                  | 12 +++++++++++-
 packages/editor/types.ts                             | 11 ++++++++++-
 3 files changed, 26 insertions(+), 4 deletions(-)

diff --git a/packages/app-desktop/gui/NoteEditor/NoteBody/CodeMirror/utils/useStyles.ts b/packages/app-desktop/gui/NoteEditor/NoteBody/CodeMirror/utils/useStyles.ts
index bc6c6bfadb..a46a5625b7 100644
--- a/packages/app-desktop/gui/NoteEditor/NoteBody/CodeMirror/utils/useStyles.ts
+++ b/packages/app-desktop/gui/NoteEditor/NoteBody/CodeMirror/utils/useStyles.ts
@@ -7,7 +7,9 @@ import { useMemo } from 'react';
 
 const useStyles = (props: NoteBodyEditorProps) => {
 	return useMemo(() => {
-		return buildStyle(['CodeMirror', props.fontSize], props.themeId, (theme: Theme) => {
+		return buildStyle([
+			'CodeMirror', props.fontSize, props.contentMaxWidth,
+		], props.themeId, (theme: Theme) => {
 			return {
 				root: {
 					position: 'relative',
@@ -70,6 +72,7 @@ const useStyles = (props: NoteBodyEditorProps) => {
 				// CM6 only
 				globalTheme: {
 					...theme,
+					contentMaxWidth: props.contentMaxWidth ? `${props.contentMaxWidth}px` : undefined,
 					fontFamily: 'inherit',
 					fontSize: props.fontSize,
 					fontSizeUnits: 'px',
@@ -77,6 +80,6 @@ const useStyles = (props: NoteBodyEditorProps) => {
 				},
 			};
 		});
-	}, [props.style, props.themeId, props.fontSize]);
+	}, [props.style, props.themeId, props.fontSize, props.contentMaxWidth]);
 };
 export default useStyles;
diff --git a/packages/editor/CodeMirror/theme.ts b/packages/editor/CodeMirror/theme.ts
index 73c65bae8f..30dbcadf5b 100644
--- a/packages/editor/CodeMirror/theme.ts
+++ b/packages/editor/CodeMirror/theme.ts
@@ -9,6 +9,7 @@ import { EditorView } from '@codemirror/view';
 import { Extension } from '@codemirror/state';
 
 import { inlineMathTag, mathTag } from './markdown/markdownMathParser';
+import { EditorTheme } from '../types';
 
 // For an example on how to customize the theme, see:
 //
@@ -24,7 +25,7 @@ import { inlineMathTag, mathTag } from './markdown/markdownMathParser';
 // use '&.cm-focused' in the theme.
 //
 // [theme] should be a joplin theme (see @joplin/lib/theme)
-const createTheme = (theme: any): Extension[] => {
+const createTheme = (theme: EditorTheme): Extension[] => {
 	// If the theme hasn't loaded yet, return nothing.
 	// (createTheme should be called again after the theme has loaded).
 	if (!theme) {
@@ -166,6 +167,15 @@ const createTheme = (theme: any): Extension[] => {
 		'& .cm-tableHeader, & .cm-tableRow, & .cm-tableDelimiter': monospaceStyle,
 		'& .cm-taskMarker': monospaceStyle,
 
+		// Applies maximum width styles to individual lines.
+		'& .cm-line': theme.contentMaxWidth ? {
+			maxWidth: theme.contentMaxWidth,
+
+			// Center
+			marginLeft: 'auto',
+			marginRight: 'auto',
+		} : undefined,
+
 		// Override the default URL style when the URL is within a link
 		'& .tok-url.tok-link, & .tok-link.tok-meta, & .tok-link.tok-string': {
 			opacity: theme.isDesktop ? 0.6 : 1,
diff --git a/packages/editor/types.ts b/packages/editor/types.ts
index 58b8e6a7b8..49be2fc45a 100644
--- a/packages/editor/types.ts
+++ b/packages/editor/types.ts
@@ -108,11 +108,20 @@ export enum EditorKeymap {
 	Emacs = 'emacs',
 }
 
+export interface EditorTheme extends Theme {
+	fontFamily: string;
+	fontSize?: number;
+	fontSizeUnits?: number;
+	isDesktop?: boolean;
+	monospaceFont?: string;
+	contentMaxWidth?: number;
+}
+
 export interface EditorSettings {
 	// EditorSettings objects are deserialized within WebViews, where
 	// [themeStyle(themeId: number)] doesn't work. As such, we need both
 	// a Theme must be provided.
-	themeData: Theme;
+	themeData: EditorTheme;
 
 	// True if the search panel is implemented outside of the editor (e.g. with
 	// React Native).