From 0eedae1f628883c9f86b8e52cbbcb7de6dcbddde Mon Sep 17 00:00:00 2001
From: Caleb John <calebjohn4@gmail.com>
Date: Sat, 8 Aug 2020 03:15:01 -0600
Subject: [PATCH] Desktop: Fixed vim mode issue where status bar was not
 visible (#3606)

---
 .../NoteBody/CodeMirror/CodeMirror.tsx        | 86 +++++++++++++++++++
 ElectronClient/index.html                     |  6 --
 2 files changed, 86 insertions(+), 6 deletions(-)

diff --git a/ElectronClient/gui/NoteEditor/NoteBody/CodeMirror/CodeMirror.tsx b/ElectronClient/gui/NoteEditor/NoteBody/CodeMirror/CodeMirror.tsx
index ee6dd8b135..1a0b5efb94 100644
--- a/ElectronClient/gui/NoteEditor/NoteBody/CodeMirror/CodeMirror.tsx
+++ b/ElectronClient/gui/NoteEditor/NoteBody/CodeMirror/CodeMirror.tsx
@@ -276,6 +276,85 @@ function CodeMirror(props: NoteBodyEditorProps, ref: any) {
 		menu.popup(bridge().window());
 	}, [props.content, editorCutText, editorPasteText, editorCopyText, onEditorPaste]);
 
+	const loadScript = async (script:any) => {
+		return new Promise((resolve) => {
+			let element:any = document.createElement('script');
+			if (script.src.indexOf('.css') >= 0) {
+				element = document.createElement('link');
+				element.rel = 'stylesheet';
+				element.href = script.src;
+			} else {
+				element.src = script.src;
+
+				if (script.attrs) {
+					for (const attr in script.attrs) {
+						element[attr] = script.attrs[attr];
+					}
+				}
+			}
+
+			element.id = script.id;
+
+			element.onload = () => {
+				resolve();
+			};
+
+			document.getElementsByTagName('head')[0].appendChild(element);
+		});
+	};
+
+	useEffect(() => {
+		let cancelled = false;
+
+		async function loadScripts() {
+			const scriptsToLoad:{src: string, id:string, loaded: boolean}[] = [
+				{
+					src: 'node_modules/codemirror/lib/codemirror.css',
+					id: 'codemirrorBaseStyle',
+					loaded: false,
+				},
+				{
+					src: 'node_modules/codemirror/addon/dialog/dialog.css',
+					id: 'codemirrorDialogStyle',
+					loaded: false,
+				},
+			];
+
+			// The default codemirror theme is defined in codemirror.css
+			// and doesn't have an extra css file
+			if (styles.editor.codeMirrorTheme !== 'default') {
+				// Solarized light and solarized dark are loaded by the single
+				// solarized.css file
+				let theme = styles.editor.codeMirrorTheme;
+				if (theme.indexOf('solarized') >= 0) theme = 'solarized';
+
+				scriptsToLoad.push({
+					src: `node_modules/codemirror/theme/${theme}.css`,
+					id: `codemirrorTheme${theme}`,
+					loaded: false,
+				});
+			}
+
+			for (const s of scriptsToLoad) {
+				if (document.getElementById(s.id)) {
+					s.loaded = true;
+					continue;
+				}
+
+				await loadScript(s);
+				if (cancelled) return;
+
+				s.loaded = true;
+			}
+		}
+
+		loadScripts();
+
+		return () => {
+			cancelled = true;
+		};
+	}, [styles.editor.codeMirrorTheme]);
+
 	useEffect(() => {
 		const element = document.createElement('style');
 		element.setAttribute('id', 'codemirrorStyle');
@@ -334,6 +413,13 @@ function CodeMirror(props: NoteBodyEditorProps, ref: any) {
 				box-sizing: border-box;
 				opacity: .5;
 			}
+
+			/* We need to use important to override theme specific values */
+			.cm-error {
+				color: inherit !important;
+				background-color: inherit !important;
+				border-bottom: 1px dotted #dc322f;
+			}
 		`));
 
 		return () => {
diff --git a/ElectronClient/index.html b/ElectronClient/index.html
index 3529b6882d..577ae3eca4 100644
--- a/ElectronClient/index.html
+++ b/ElectronClient/index.html
@@ -12,12 +12,6 @@
 		<link rel="stylesheet" href="node_modules/@fortawesome/fontawesome-free/css/all.min.css">
 		<link rel="stylesheet" href="node_modules/react-datetime/css/react-datetime.css">
 		<link rel="stylesheet" href="node_modules/smalltalk/css/smalltalk.css">
-		<link rel="stylesheet" href="node_modules/codemirror/lib/codemirror.css">
-		<link rel="stylesheet" href="node_modules/codemirror/theme/dracula.css">
-		<link rel="stylesheet" href="node_modules/codemirror/theme/monokai.css">
-		<link rel="stylesheet" href="node_modules/codemirror/theme/solarized.css">
-		<link rel="stylesheet" href="node_modules/codemirror/theme/nord.css">
-		<link rel="stylesheet" href="node_modules/codemirror/theme/material-darker.css">
 
 		<style>
 			.smalltalk {