Dockery/Trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-11-13 16:55:50 +01:00
Code Issues Packages Projects Releases Activity

chore(react/type_widget): apply background color for read-only code notes

Browse Source
This commit is contained in:
Elian Doran
2025-09-20 11:11:00 +03:00
parent 2c014fb071
commit 43dcdf8925
2 changed files with 33 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -2,16 +2,16 @@ import { useEffect, useRef, useState } from "preact/hooks";
import { default as VanillaCodeMirror } from "@triliumnext/codemirror"; import { default as VanillaCodeMirror } from "@triliumnext/codemirror";
import { TypeWidgetProps } from "../type_widget"; import { TypeWidgetProps } from "../type_widget";
import "./code.css"; import "./code.css";
import CodeMirror from "./CodeMirror"; import CodeMirror, { CodeMirrorProps } from "./CodeMirror";
import utils from "../../../services/utils"; import utils from "../../../services/utils";
import { useEditorSpacedUpdate, useNoteBlob, useTriliumOptionBool } from "../../react/hooks"; import { useEditorSpacedUpdate, useNoteBlob, useSyncedRef, useTriliumOptionBool } from "../../react/hooks";
import { t } from "../../../services/i18n"; import { t } from "../../../services/i18n";
import appContext from "../../../components/app_context"; import appContext from "../../../components/app_context";
import TouchBar, { TouchBarButton } from "../../react/TouchBar"; import TouchBar, { TouchBarButton } from "../../react/TouchBar";
import keyboard_actions from "../../../services/keyboard_actions"; import keyboard_actions from "../../../services/keyboard_actions";
import { refToJQuerySelector } from "../../react/react_utils"; import { refToJQuerySelector } from "../../react/react_utils";
export function ReadOnlyCode({ note, viewScope, ntxId }: TypeWidgetProps) { export function ReadOnlyCode({ note, viewScope, ntxId, parentComponent }: TypeWidgetProps) {
const [ content, setContent ] = useState(""); const [ content, setContent ] = useState("");
const blob = useNoteBlob(note); const blob = useNoteBlob(note);
@@ -23,7 +23,8 @@ export function ReadOnlyCode({ note, viewScope, ntxId }: TypeWidgetProps) {
return ( return (
<div className="note-detail-readonly-code note-detail-printable"> <div className="note-detail-readonly-code note-detail-printable">
<CodeMirror <CodeEditor
note={note} parentComponent={parentComponent}
className="note-detail-readonly-code-content" className="note-detail-readonly-code-content"
content={content} content={content}
mime={note.mime} mime={note.mime}
@@ -59,19 +60,10 @@ export function EditableCode({ note, ntxId, debounceUpdate, parentComponent }: T
keyboard_actions.setupActionsForElement("code-detail", refToJQuerySelector(containerRef), parentComponent); 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 ( return (
<div className="note-detail-code note-detail-printable"> <div className="note-detail-code note-detail-printable">
<CodeMirror <CodeEditor
note={note} parentComponent={parentComponent}
editorRef={editorRef} containerRef={containerRef} editorRef={editorRef} containerRef={containerRef}
className="note-detail-code-editor" className="note-detail-code-editor"
ntxId={ntxId} ntxId={ntxId}
@@ -84,12 +76,6 @@ export function EditableCode({ note, ntxId, debounceUpdate, parentComponent }: T
} }
spacedUpdate.scheduleUpdate(); 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> <TouchBar>
@@ -100,3 +86,28 @@ export function EditableCode({ note, ntxId, debounceUpdate, parentComponent }: T
</div> </div>
) )
} }
function CodeEditor({ note, parentComponent, containerRef: externalContainerRef, ...editorProps }: Omit<CodeMirrorProps, "onThemeChange"> & Pick<TypeWidgetProps, "note" | "parentComponent">) {
const containerRef = useSyncedRef(externalContainerRef);
// 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 <CodeMirror
{...editorProps}
containerRef={containerRef}
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}
/>
}

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

@@ -5,7 +5,7 @@ import { refToJQuerySelector } from "../../react/react_utils";
import { RefObject } from "preact"; import { RefObject } from "preact";
import { CODE_THEME_DEFAULT_PREFIX as DEFAULT_PREFIX } from "../constants"; import { CODE_THEME_DEFAULT_PREFIX as DEFAULT_PREFIX } from "../constants";
interface CodeMirrorProps extends Omit<EditorConfig, "parent"> { export interface CodeMirrorProps extends Omit<EditorConfig, "parent"> {
content: string; content: string;
mime: string; mime: string;
className?: string; className?: string;