chore(react/type_widget): disable code background change in split

This commit is contained in:
Elian Doran 2025-09-20 14:16:34 +03:00
parent bde7b753a0
commit 3dd757a857
No known key found for this signature in database
3 changed files with 9 additions and 23 deletions

View File

@ -12,7 +12,12 @@ import keyboard_actions from "../../../services/keyboard_actions";
import { refToJQuerySelector } from "../../react/react_utils";
import { CODE_THEME_DEFAULT_PREFIX as DEFAULT_PREFIX } from "../constants";
export interface EditableCodeProps extends TypeWidgetProps {
interface CodeEditorProps {
/** By default, the code editor will try to match the color of the scrolling container to match the one from the theme for a full-screen experience. If the editor is embedded, it makes sense not to have this behaviour. */
noBackgroundChange?: boolean;
}
export interface EditableCodeProps extends TypeWidgetProps, Omit<CodeEditorProps, "onContentChanged"> {
// if true, the update will be debounced to prevent excessive updates. Especially useful if the editor is linked to a live preview.
debounceUpdate?: boolean;
lineWrapping?: boolean;
@ -101,7 +106,7 @@ export function EditableCode({ note, ntxId, debounceUpdate, parentComponent, upd
)
}
export function CodeEditor({ parentComponent, ntxId, containerRef: externalContainerRef, editorRef: externalEditorRef, mime, onInitialized, lineWrapping, ...editorProps }: Omit<CodeMirrorProps, "onThemeChange"> & Pick<TypeWidgetProps, "parentComponent" | "ntxId">) {
export function CodeEditor({ parentComponent, ntxId, containerRef: externalContainerRef, editorRef: externalEditorRef, mime, onInitialized, lineWrapping, noBackgroundChange, ...editorProps }: CodeEditorProps & CodeMirrorProps & Pick<TypeWidgetProps, "parentComponent" | "ntxId">) {
const codeEditorRef = useRef<VanillaCodeMirror>(null);
const containerRef = useSyncedRef(externalContainerRef);
const initialized = useRef($.Deferred());
@ -111,7 +116,7 @@ export function CodeEditor({ parentComponent, ntxId, containerRef: externalConta
// React to background color.
const [ backgroundColor, setBackgroundColor ] = useState<string>();
useEffect(() => {
if (!backgroundColor) return;
if (!backgroundColor || noBackgroundChange) return;
parentComponent?.$widget.closest(".scrolling-container").css("background-color", backgroundColor);
return () => {
parentComponent?.$widget.closest(".scrolling-container").css("background-color", "unset");

View File

@ -37,6 +37,7 @@ export default function SplitEditor({ note, error, splitOptions, previewContent,
note={note}
lineWrapping={false}
updateInterval={750} debounceUpdate
noBackgroundChange
{...editorProps}
/>
</div>

View File

@ -1,20 +0,0 @@
import type { EditorConfig } from "@triliumnext/codemirror";
import { getMermaidConfig, loadElkIfNeeded, postprocessMermaidSvg } from "../../services/mermaid.js";
import AbstractSvgSplitTypeWidget from "./abstract_svg_split_type_widget.js";
export class MermaidTypeWidget extends AbstractSvgSplitTypeWidget {
static getType() {
return "mermaid";
}
get attachmentName(): string {
return "mermaid-export";
}
async renderSvg(content: string) {
}
}