mirror of
https://github.com/zadam/trilium.git
synced 2025-12-23 08:39:57 +01:00
chore(react/type_widget): react to code theme
This commit is contained in:
@@ -1,8 +1,9 @@
|
|||||||
import { useEffect, useRef } from "preact/hooks";
|
import { useEffect, useRef } from "preact/hooks";
|
||||||
import { EditorConfig, default as VanillaCodeMirror } from "@triliumnext/codemirror";
|
import { EditorConfig, getThemeById, default as VanillaCodeMirror } from "@triliumnext/codemirror";
|
||||||
import { useSyncedRef, useTriliumEvent, useTriliumOptionBool } from "../../react/hooks";
|
import { useSyncedRef, useTriliumEvent, useTriliumOption, useTriliumOptionBool } from "../../react/hooks";
|
||||||
import { refToJQuerySelector } from "../../react/react_utils";
|
import { refToJQuerySelector } from "../../react/react_utils";
|
||||||
import { RefObject } from "preact";
|
import { RefObject } from "preact";
|
||||||
|
import { CODE_THEME_DEFAULT_PREFIX as DEFAULT_PREFIX } from "../constants";
|
||||||
|
|
||||||
interface CodeMirrorProps extends Omit<EditorConfig, "parent"> {
|
interface CodeMirrorProps extends Omit<EditorConfig, "parent"> {
|
||||||
content: string;
|
content: string;
|
||||||
@@ -17,6 +18,7 @@ export default function CodeMirror({ className, content, mime, ntxId, editorRef:
|
|||||||
const parentRef = useSyncedRef(externalContainerRef);
|
const parentRef = useSyncedRef(externalContainerRef);
|
||||||
const codeEditorRef = useRef<VanillaCodeMirror>();
|
const codeEditorRef = useRef<VanillaCodeMirror>();
|
||||||
const [ codeLineWrapEnabled ] = useTriliumOptionBool("codeLineWrapEnabled");
|
const [ codeLineWrapEnabled ] = useTriliumOptionBool("codeLineWrapEnabled");
|
||||||
|
const [ codeNoteTheme ] = useTriliumOption("codeNoteTheme");
|
||||||
const initialized = $.Deferred();
|
const initialized = $.Deferred();
|
||||||
|
|
||||||
// Integration within Trilium's event system.
|
// Integration within Trilium's event system.
|
||||||
@@ -50,6 +52,16 @@ export default function CodeMirror({ className, content, mime, ntxId, editorRef:
|
|||||||
return () => codeEditor.destroy();
|
return () => codeEditor.destroy();
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
|
// React to theme changes.
|
||||||
|
useEffect(() => {
|
||||||
|
if (codeEditorRef.current && codeNoteTheme.startsWith(DEFAULT_PREFIX)) {
|
||||||
|
const theme = getThemeById(codeNoteTheme.substring(DEFAULT_PREFIX.length));
|
||||||
|
if (theme) {
|
||||||
|
codeEditorRef.current.setTheme(theme);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, [ codeEditorRef, codeNoteTheme ]);
|
||||||
|
|
||||||
// React to text changes.
|
// React to text changes.
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const codeEditor = codeEditorRef.current;
|
const codeEditor = codeEditorRef.current;
|
||||||
|
|||||||
@@ -30,13 +30,7 @@ export default class AbstractCodeTypeWidget extends TypeWidget {
|
|||||||
|
|
||||||
async #initEditor() {
|
async #initEditor() {
|
||||||
// Load the theme.
|
// Load the theme.
|
||||||
const themeId = options.get("codeNoteTheme");
|
|
||||||
if (themeId?.startsWith(DEFAULT_PREFIX)) {
|
|
||||||
const theme = getThemeById(themeId.substring(DEFAULT_PREFIX.length));
|
|
||||||
if (theme) {
|
|
||||||
await this.codeEditor.setTheme(theme);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|||||||
Reference in New Issue
Block a user