Chore: Desktop: Markdown editor panes: Migrate from style properties to SCSS

packages/app-desktop/gui/NoteEditor/NoteBody/CodeMirror/utils/useStyles.ts

@@ -23,29 +23,6 @@ const useStyles = (props: NoteBodyEditorProps) => {
 					display: 'flex',
 					flexDirection: 'row',
 				},
-				rowEditorViewer: {
-					position: 'relative',
-					display: 'flex',
-					flexDirection: 'row',
-					flex: 1,
-					paddingTop: 10,
-
-					// Allow the editor container to shrink (allowing the editor to scroll)
-					minHeight: 0,
-				},
-				cellEditor: {
-					position: 'relative',
-					display: 'flex',
-					flex: 1,
-				},
-				cellViewer: {
-					position: 'relative',
-					display: 'flex',
-					flex: 1,
-					borderLeftWidth: 1,
-					borderLeftColor: theme.dividerColor,
-					borderLeftStyle: 'solid',
-				},
 				viewer: {
 					display: 'flex',
 					overflow: 'hidden',

packages/app-desktop/gui/NoteEditor/NoteBody/CodeMirror/v5/CodeMirror.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useState, useEffect, useRef, forwardRef, useCallback, useImperativeHandle, useMemo, ForwardedRef, useContext } from 'react';
+import { useState, useEffect, useRef, forwardRef, useCallback, useImperativeHandle, ForwardedRef, useContext } from 'react';
 
 // eslint-disable-next-line no-unused-vars
 import { EditorCommand, MarkupToHtmlOptions, NoteBodyEditorProps, NoteBodyEditorRef } from '../../../utils/types';
@@ -694,25 +694,6 @@ function CodeMirror(props: NoteBodyEditorProps, ref: ForwardedRef<NoteBodyEditor
 		showEditorMarkers: true,
 	});
 
-	const cellEditorStyle = useMemo(() => {
-		const output = { ...styles.cellEditor };
-		if (!props.visiblePanes.includes('editor')) {
-			output.display = 'none'; // Seems to work fine since the refactoring
-		}
-
-		return output;
-	}, [styles.cellEditor, props.visiblePanes]);
-
-	const cellViewerStyle = useMemo(() => {
-		const output = { ...styles.cellViewer };
-		if (!props.visiblePanes.includes('viewer')) {
-			output.display = 'none';
-		} else if (!props.visiblePanes.includes('editor')) {
-			output.borderLeftStyle = 'none';
-		}
-		return output;
-	}, [styles.cellViewer, props.visiblePanes]);
-
 	useEffect(() => {
 		if (!editorRef.current) return;
 
@@ -741,7 +722,7 @@ function CodeMirror(props: NoteBodyEditorProps, ref: ForwardedRef<NoteBodyEditor
 		const matchBracesOptions = Setting.value('editor.autoMatchingBraces') ? { override: true, pairs: '``()[]{}\'\'""‘’“”（）《》「」『』【】〔〕〖〗〘〙〚〛' } : false;
 
 		return (
-			<div style={cellEditorStyle}>
+			<div className='editor'>
 				<Editor
 					value={props.content}
 					searchMarkers={props.searchMarkers}
@@ -766,7 +747,7 @@ function CodeMirror(props: NoteBodyEditorProps, ref: ForwardedRef<NoteBodyEditor
 
 	function renderViewer() {
 		return (
-			<div style={cellViewerStyle}>
+			<div className='viewer'>
 				<NoteTextViewer
 					ref={webviewRef}
 					themeId={props.themeId}
@@ -779,19 +760,26 @@ function CodeMirror(props: NoteBodyEditorProps, ref: ForwardedRef<NoteBodyEditor
 		);
 	}
 
-	const windowId = useContext(WindowIdContext);
+	const editorViewerRow = (
+		<div className={[
+			'note-editor-viewer-row',
+			props.visiblePanes.includes('editor') ? '-show-editor' : '',
+			props.visiblePanes.includes('viewer') ? '-show-viewer' : '',
+		].join(' ')}>
+			{renderEditor()}
+			{renderViewer()}
+		</div>
+	);
 
+	const windowId = useContext(WindowIdContext);
 	return (
 		<ErrorBoundary message="The text editor encountered a fatal error and could not continue. The error might be due to a plugin, so please try to disable some of them and try again.">
 			<div style={styles.root} ref={rootRef}>
 				<div style={styles.rowToolbar}>
 					<Toolbar themeId={props.themeId} windowId={windowId}/>
 					{props.noteToolbar}
 				</div>
-				<div style={styles.rowEditorViewer}>
-					{renderEditor()}
-					{renderViewer()}
-				</div>
+				{editorViewerRow}
 			</div>
 		</ErrorBoundary>
 	);

packages/app-desktop/gui/NoteEditor/NoteBody/CodeMirror/v6/CodeMirror.tsx

@@ -301,25 +301,6 @@ const CodeMirror = (props: NoteBodyEditorProps, ref: ForwardedRef<NoteBodyEditor
 		}
 	}, [renderedBody, webviewReady, getLineScrollPercent, setEditorPercentScroll]);
 
-	const cellEditorStyle = useMemo(() => {
-		const output = { ...styles.cellEditor };
-		if (!props.visiblePanes.includes('editor')) {
-			output.display = 'none'; // Seems to work fine since the refactoring
-		}
-
-		return output;
-	}, [styles.cellEditor, props.visiblePanes]);
-
-	const cellViewerStyle = useMemo(() => {
-		const output = { ...styles.cellViewer };
-		if (!props.visiblePanes.includes('viewer')) {
-			output.display = 'none';
-		} else if (!props.visiblePanes.includes('editor')) {
-			output.borderLeftStyle = 'none';
-		}
-		return output;
-	}, [styles.cellViewer, props.visiblePanes]);
-
 	useRefocusOnVisiblePaneChange({ editorRef, webviewRef, visiblePanes: props.visiblePanes });
 
 	useEditorSearchHandler({
@@ -406,7 +387,7 @@ const CodeMirror = (props: NoteBodyEditorProps, ref: ForwardedRef<NoteBodyEditor
 
 	const renderEditor = () => {
 		return (
-			<div style={cellEditorStyle}>
+			<div className='editor'>
 				<Editor
 					style={styles.editor}
 					initialText={props.content}
@@ -427,7 +408,7 @@ const CodeMirror = (props: NoteBodyEditorProps, ref: ForwardedRef<NoteBodyEditor
 
 	const renderViewer = () => {
 		return (
-			<div style={cellViewerStyle}>
+			<div className='viewer'>
 				<NoteTextViewer
 					ref={webviewRef}
 					themeId={props.themeId}
@@ -440,19 +421,26 @@ const CodeMirror = (props: NoteBodyEditorProps, ref: ForwardedRef<NoteBodyEditor
 		);
 	};
 
-	const windowId = useContext(WindowIdContext);
+	const editorViewerRow = (
+		<div className={[
+			'note-editor-viewer-row',
+			props.visiblePanes.includes('editor') ? '-show-editor' : '',
+			props.visiblePanes.includes('viewer') ? '-show-viewer' : '',
+		].join(' ')}>
+			{renderEditor()}
+			{renderViewer()}
+		</div>
+	);
 
+	const windowId = useContext(WindowIdContext);
 	return (
 		<ErrorBoundary message="The text editor encountered a fatal error and could not continue. The error might be due to a plugin, so please try to disable some of them and try again.">
 			<div style={styles.root} ref={rootRef}>
 				<div style={styles.rowToolbar}>
 					<Toolbar themeId={props.themeId} windowId={windowId}/>
 					{props.noteToolbar}
 				</div>
-				<div style={styles.rowEditorViewer}>
-					{renderEditor()}
-					{renderViewer()}
-				</div>
+				{editorViewerRow}
 			</div>
 		</ErrorBoundary>
 	);

packages/app-desktop/gui/NoteEditor/style.scss

@@ -4,3 +4,4 @@
 @use "./styles/note-title-info-group.scss";
 @use "./styles/note-title-wrapper.scss";
 @use "./styles/note-editor-wrapper.scss";
+@use "./styles/note-editor-viewer-row.scss";

packages/app-desktop/gui/NoteEditor/styles/note-editor-viewer-row.scss

@@ -0,0 +1,37 @@
+
+.note-editor-viewer-row {
+	position: relative;
+	display: flex;
+	flex-direction: row;
+	flex: 1;
+	padding-top: 10px;
+
+	// Allow the editor container to shrink (allowing the editor to scroll)
+	min-height: 0;
+
+	> .editor, > .viewer {
+		position: relative;
+		display: flex;
+		flex: 1;
+	}
+
+	> .viewer {
+		border-left-width: 1px;
+		border-left-color: var(--joplin-divider-color);
+		border-left-style: solid;
+	}
+
+	&:not(.-show-viewer) > .viewer {
+		display: none;
+	}
+
+	&:not(.-show-editor) {
+		> .editor {
+			display: none;
+		}
+
+		> .viewer {
+			border-left: none;
+		}
+	}
+}