chore(react/type_widget): set up background color for code notes

apps/client/src/widgets/NoteDetail.tsx

@@ -2,7 +2,7 @@ import { NoteType } from "@triliumnext/commons";
 import { useNoteContext } from "./react/hooks"
 import FNote from "../entities/fnote";
 import protected_session_holder from "../services/protected_session_holder";
-import { useEffect, useMemo, useState } from "preact/hooks";
+import { useContext, useEffect, useMemo, useState } from "preact/hooks";
 import NoteContext from "../components/note_context";
 import Empty from "./type_widgets/Empty";
 import { VNode } from "preact";
@@ -27,8 +27,8 @@ type ExtendedNoteType = Exclude<NoteType, "launcher" | "text" | "code"> | "empty
  * The note detail is in charge of rendering the content of a note, by determining its type (e.g. text, code) and using the appropriate view widget.
  */
 export default function NoteDetail() {
-    const { note, type, noteContext } = useNoteInfo();
+    const { note, type, noteContext, parentComponent } = useNoteInfo();
-    const { ntxId, viewScope, parent } = noteContext ?? {};
+    const { ntxId, viewScope } = noteContext ?? {};
     const [ correspondingWidget, setCorrespondingWidget ] = useState<VNode>();
     const isFullHeight = checkFullHeight(noteContext, type);
 
@@ -36,7 +36,7 @@ export default function NoteDetail() {
         note: note!,
         viewScope,
         ntxId,
-        parentComponent: parent
+        parentComponent
     };
     useEffect(() => setCorrespondingWidget(getCorrespondingWidget(type, props)), [ note, viewScope, type ]);
 
@@ -49,7 +49,7 @@ export default function NoteDetail() {
 
 /** Manages both note changes and changes to the widget type, which are asynchronous. */
 function useNoteInfo() {
-    const { note: actualNote, noteContext } = useNoteContext();
+    const { note: actualNote, noteContext, parentComponent } = useNoteContext();
     const [ note, setNote ] = useState<FNote | null | undefined>();
     const [ type, setType ] = useState<ExtendedNoteType>();
 
@@ -60,7 +60,7 @@ function useNoteInfo() {
         });
     }, [ actualNote, noteContext ]);
 
-    return { note, type, noteContext };
+    return { note, type, noteContext, parentComponent };
 }
 
 function getCorrespondingWidget(noteType: ExtendedNoteType | undefined, props: TypeWidgetProps) {

apps/client/src/widgets/type_widgets/code/Code.tsx

@@ -53,11 +53,22 @@ export function EditableCode({ note, ntxId, debounceUpdate, parentComponent }: T
         }
     });
 
+    // Set up keyboard shortcuts.
     useEffect(() => {
         if (!parentComponent) return;
         keyboard_actions.setupActionsForElement("code-detail", refToJQuerySelector(containerRef), parentComponent);
     }, []);
 
+    // React to background color.
+    const [ backgroundColor, setBackgroundColor ] = useState<string>();
+    useEffect(() => {
+        if (!backgroundColor) return;
+        parentComponent?.$widget.closest(".scrolling-container").css("background-color", backgroundColor);
+        return () => {
+            parentComponent?.$widget.closest(".scrolling-container").css("background-color", "unset");
+        };
+    }, [ backgroundColor ]);
+
     return (
         <div className="note-detail-code note-detail-printable">
             <CodeMirror
@@ -73,6 +84,12 @@ export function EditableCode({ note, ntxId, debounceUpdate, parentComponent }: T
                     }
                     spacedUpdate.scheduleUpdate();
                 }}
+                onThemeChange={note?.mime !== "text/x-sqlite;schema=trilium" ? () => {
+                    const editor = containerRef.current?.querySelector(".cm-editor");
+                    if (!editor) return;
+                    const style = window.getComputedStyle(editor);
+                    setBackgroundColor(style.backgroundColor);
+                } : undefined}
             />
 
             <TouchBar>

apps/client/src/widgets/type_widgets/code/CodeMirror.tsx

@@ -12,9 +12,10 @@ interface CodeMirrorProps extends Omit<EditorConfig, "parent"> {
     ntxId: string | null | undefined;
     editorRef?: RefObject<VanillaCodeMirror>;
     containerRef?: RefObject<HTMLPreElement>;
+    onThemeChange?: () => void;
 }
 
-export default function CodeMirror({ className, content, mime, ntxId, editorRef: externalEditorRef, containerRef: externalContainerRef, ...extraOpts }: CodeMirrorProps) {
+export default function CodeMirror({ className, content, mime, ntxId, editorRef: externalEditorRef, containerRef: externalContainerRef, onThemeChange, ...extraOpts }: CodeMirrorProps) {
     const parentRef = useSyncedRef(externalContainerRef);
     const codeEditorRef = useRef<VanillaCodeMirror>();
     const [ codeLineWrapEnabled ] = useTriliumOptionBool("codeLineWrapEnabled");
@@ -57,7 +58,9 @@ export default function CodeMirror({ className, content, mime, ntxId, editorRef:
         if (codeEditorRef.current && codeNoteTheme.startsWith(DEFAULT_PREFIX)) {
             const theme = getThemeById(codeNoteTheme.substring(DEFAULT_PREFIX.length));
             if (theme) {
-                codeEditorRef.current.setTheme(theme);
+                codeEditorRef.current.setTheme(theme).then(() => {
+                    onThemeChange?.();
+                });
             }
         }
     }, [ codeEditorRef, codeNoteTheme ]);

apps/client/src/widgets/type_widgets_old/abstract_code_type_widget.ts

@@ -67,15 +67,6 @@ export default class AbstractCodeTypeWidget extends TypeWidget {
         this.codeEditor.focus();
     }
 
-    cleanup() {
-        if (this.codeEditor) {
-            this.spacedUpdate.allowUpdateWithoutChange(() => {
-                this.codeEditor.setText("");
-            });
-        }
-        this.updateBackgroundColor("unset");
-    }
-
     async entitiesReloadedEvent({ loadResults }: EventData<"entitiesReloaded">) {
         if (loadResults.isOptionReloaded("codeNoteTheme")) {
             const themeId = options.get("codeNoteTheme");
@@ -93,14 +84,4 @@ export default class AbstractCodeTypeWidget extends TypeWidget {
         }
     }
 
-    updateBackgroundColor(color?: string) {
-        if (this.note?.mime === "text/x-sqlite;schema=trilium") {
-            // Don't apply a background color for SQL console notes.
-            return;
-        }
-
-        const $editorEl = $(this.codeEditor.dom);
-        this.$widget.closest(".scrolling-container").css("background-color", color ?? $editorEl.css("background-color"));
-    }
-
 }