Desktop: Improved handling of dark and light theme auto-switch

ElectronClient/gui/NoteEditor/NoteBody/AceEditor/AceEditor.tsx

@@ -515,7 +515,7 @@ function AceEditor(props: NoteBodyEditorProps, ref: any) {
 			cancelled = true;
 			clearTimeout(timeoutId);
 		};
-	}, [props.content, props.contentMarkupLanguage, props.visiblePanes, props.resourceInfos]);
+	}, [props.content, props.contentMarkupLanguage, props.visiblePanes, props.resourceInfos, props.markupToHtml]);
 
 	useEffect(() => {
 		if (!webviewReady) return;

ElectronClient/gui/NoteEditor/NoteBody/TinyMCE/TinyMCE.tsx

@@ -136,7 +136,8 @@ function styles_(props:NoteBodyEditorProps) {
 	});
 }
 
-let loadedAssetFiles_:string[] = [];
+let loadedCssFiles_:string[] = [];
+let loadedJsFiles_:string[] = [];
 let dispatchDidUpdateIID_:any = null;
 let changeId_:number = 1;
 
@@ -442,7 +443,7 @@ const TinyMCE = (props:NoteBodyEditorProps, ref:any) => {
 		return () => {
 			document.head.removeChild(element);
 		};
-	}, [editorReady]);
+	}, [editorReady, props.theme]);
 
 	// -----------------------------------------------------------------------------------------
 	// Enable or disable the editor
@@ -460,7 +461,8 @@ const TinyMCE = (props:NoteBodyEditorProps, ref:any) => {
 	useEffect(() => {
 		if (!scriptLoaded) return;
 
-		loadedAssetFiles_ = [];
+		loadedCssFiles_ = [];
+		loadedJsFiles_ = [];
 
 		function contextMenuItemNameWithNamespace(name:string) {
 			// For unknown reasons, TinyMCE converts all context menu names to
@@ -681,6 +683,25 @@ const TinyMCE = (props:NoteBodyEditorProps, ref:any) => {
 	// -----------------------------------------------------------------------------------------
 
 	const loadDocumentAssets = (editor:any, pluginAssets:any[]) => {
+		// Note: The way files are cached is not correct because it assumes there's only one version
+		// of each file. However, when the theme change, a new CSS file, specific to the theme, is
+		// created. That file should not be loaded on top of the previous one, but as a replacement.
+		// Otherwise it would do this:
+		// - Try to load CSS for theme 1 => OK
+		// - Try to load CSS for theme 2 => OK
+		// - Try to load CSS for theme 1 => Skip because the file is in cache. As a result, theme 2
+		//                                  incorrectly stay.
+		// The fix would be to make allAssets() return a name and a version for each asset. Then the loading
+		// code would check this and either append the CSS or replace.
+
+		let docHead_ = null;
+
+		function docHead() {
+			if (docHead_) return docHead_;
+			docHead_ = editor.getDoc().getElementsByTagName('head')[0];
+			return docHead_;
+		}
+
 		const cssFiles = [
 			'node_modules/@fortawesome/fontawesome-free/css/all.min.css',
 			`gui/note-viewer/pluginAssets/highlight.js/${theme.codeThemeCss}`,
@@ -688,20 +709,31 @@ const TinyMCE = (props:NoteBodyEditorProps, ref:any) => {
 			pluginAssets
 				.filter((a:any) => a.mime === 'text/css')
 				.map((a:any) => a.path)
-		).filter((path:string) => !loadedAssetFiles_.includes(path));
+		).filter((path:string) => !loadedCssFiles_.includes(path));
 
 		const jsFiles = [].concat(
 			pluginAssets
 				.filter((a:any) => a.mime === 'application/javascript')
 				.map((a:any) => a.path)
-		).filter((path:string) => !loadedAssetFiles_.includes(path));
+		).filter((path:string) => !loadedJsFiles_.includes(path));
 
-		for (const cssFile of cssFiles) loadedAssetFiles_.push(cssFile);
+		for (const cssFile of cssFiles) loadedCssFiles_.push(cssFile);
-		for (const jsFile of jsFiles) loadedAssetFiles_.push(jsFile);
+		for (const jsFile of jsFiles) loadedJsFiles_.push(jsFile);
 
 		console.info('loadDocumentAssets: files to load', cssFiles, jsFiles);
 
-		if (cssFiles.length) editor.dom.loadCSS(cssFiles.join(','));
+		if (cssFiles.length) {
+			for (const cssFile of cssFiles) {
+				const script = editor.dom.create('link', {
+					rel: 'stylesheet',
+					type: 'text/css',
+					href: cssFile,
+					class: 'jop-tinymce-css',
+				});
+
+				docHead().appendChild(script);
+			}
+		}
 
 		if (jsFiles.length) {
 			const editorElementId = editor.dom.uniqueId();
@@ -713,7 +745,7 @@ const TinyMCE = (props:NoteBodyEditorProps, ref:any) => {
 					src: jsFile,
 				});
 
-				editor.getDoc().getElementsByTagName('head')[0].appendChild(script);
+				docHead().appendChild(script);
 			}
 		}
 	};