gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-11-10 16:39:02 +01:00
Code Issues Actions 17 Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Elian Doran 2025-09-20 11:02:43 +03:00
parent 2273507ef4
commit 2c014fb071
No known key found for this signature in database
4 changed files with 28 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
apps/client/src/widgets/NoteDetail.tsx
View File

@ -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 { ntxId, viewScope, parent } = noteContext ?? {};
const { note, type, noteContext, parentComponent } = useNoteInfo();
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) {

17
apps/client/src/widgets/type_widgets/code/Code.tsx
View File

@ -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>

7
apps/client/src/widgets/type_widgets/code/CodeMirror.tsx
View File

@ -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 ]);

19
apps/client/src/widgets/type_widgets_old/abstract_code_type_widget.ts
View File

@ -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"));
}
}