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

chore(react/type_widget): finalize readonly code

Browse Source
This commit is contained in:
Elian Doran 2025-09-20 09:06:55 +03:00
parent f72087acc3
commit 6517dd1190
No known key found for this signature in database
4 changed files with 23 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,18 +1,35 @@
import { useEffect, useRef } from "preact/hooks"; import { useEffect, useRef } from "preact/hooks";
import { EditorConfig, default as VanillaCodeMirror } from "@triliumnext/codemirror"; import { EditorConfig, default as VanillaCodeMirror } from "@triliumnext/codemirror";
import { useTriliumOptionBool } from "../../react/hooks"; import { useTriliumEvent, useTriliumOptionBool } from "../../react/hooks";
import { refToJQuerySelector } from "../../react/react_utils";
interface CodeMirrorProps extends Omit<EditorConfig, "parent"> { interface CodeMirrorProps extends Omit<EditorConfig, "parent"> {
content: string; content: string;
mime: string; mime: string;
className?: string; className?: string;
ntxId: string | null | undefined;
} }
export default function CodeMirror({ className, content, mime, ...extraOpts }: CodeMirrorProps) { export default function CodeMirror({ className, content, mime, ntxId, ...extraOpts }: CodeMirrorProps) {
const parentRef = useRef<HTMLPreElement>(null); const parentRef = useRef<HTMLPreElement>(null);
const codeEditorRef = useRef<VanillaCodeMirror>(null); const codeEditorRef = useRef<VanillaCodeMirror>(null);
const [ codeLineWrapEnabled ] = useTriliumOptionBool("codeLineWrapEnabled"); const [ codeLineWrapEnabled ] = useTriliumOptionBool("codeLineWrapEnabled");
const initialized = $.Deferred();
// Integration within Trilium's event system.
useTriliumEvent("executeWithCodeEditor", async ({ resolve, ntxId: eventNtxId }) => {
if (eventNtxId !== ntxId) return;
await initialized.promise();
resolve(codeEditorRef.current!);
});
useTriliumEvent("executeWithContentElement", async ({ resolve, ntxId: eventNtxId}) => {
if (eventNtxId !== ntxId) return;
await initialized.promise();
resolve(refToJQuerySelector(parentRef));
});
// Create CodeMirror instance.
useEffect(() => { useEffect(() => {
if (!parentRef.current) return; if (!parentRef.current) return;
@ -22,10 +39,12 @@ export default function CodeMirror({ className, content, mime, ...extraOpts }: C
...extraOpts ...extraOpts
}); });
codeEditorRef.current = codeEditor; codeEditorRef.current = codeEditor;
initialized.resolve();
return () => codeEditor.destroy(); return () => codeEditor.destroy();
}, []); }, []);
// React to text changes.
useEffect(() => { useEffect(() => {
const codeEditor = codeEditorRef.current; const codeEditor = codeEditorRef.current;
codeEditor?.setText(content ?? ""); codeEditor?.setText(content ?? "");

3
apps/client/src/widgets/type_widgets/code/ReadOnlyCode.tsx
View File

@ -5,7 +5,7 @@ import CodeMirror from "./CodeMirror";
import utils from "../../../services/utils"; import utils from "../../../services/utils";
import { useNoteBlob } from "../../react/hooks"; import { useNoteBlob } from "../../react/hooks";
export default function ReadOnlyCode({ note, viewScope }: TypeWidgetProps) { export default function ReadOnlyCode({ note, viewScope, ntxId }: TypeWidgetProps) {
const [ content, setContent ] = useState(""); const [ content, setContent ] = useState("");
const blob = useNoteBlob(note); const blob = useNoteBlob(note);
@ -22,6 +22,7 @@ export default function ReadOnlyCode({ note, viewScope }: TypeWidgetProps) {
content={content} content={content}
mime={note.mime} mime={note.mime}
readOnly readOnly
ntxId={ntxId}
/> />
</div> </div>
) )

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

@ -82,16 +82,6 @@ export default class AbstractCodeTypeWidget extends TypeWidget {
this.updateBackgroundColor("unset"); this.updateBackgroundColor("unset");
} }
async executeWithCodeEditorEvent({ resolve, ntxId }: EventData<"executeWithCodeEditor">) {
if (!this.isNoteContext(ntxId)) {
return;
}
await this.initialized;
resolve(this.codeEditor);
}
async entitiesReloadedEvent({ loadResults }: EventData<"entitiesReloaded">) { async entitiesReloadedEvent({ loadResults }: EventData<"entitiesReloaded">) {
if (loadResults.isOptionReloaded("codeNoteTheme")) { if (loadResults.isOptionReloaded("codeNoteTheme")) {
const themeId = options.get("codeNoteTheme"); const themeId = options.get("codeNoteTheme");

28
apps/client/src/widgets/type_widgets_old/read_only_code.ts
View File

@ -1,28 +0,0 @@
import type { EventData } from "../../components/app_context.js";
import type FNote from "../../entities/fnote.js";
import AbstractCodeTypeWidget from "./abstract_code_type_widget.js";
import utils from "../../services/utils.js";
const TPL = /*html*/`
`;
export default class ReadOnlyCodeTypeWidget extends AbstractCodeTypeWidget {
async doRefresh(note: FNote) {
const blob = await this.note?.getBlob();
if (!blob) return;
this._update(note, content);
this.show();
}
async executeWithContentElementEvent({ resolve, ntxId }: EventData<"executeWithContentElement">) {
if (!this.isNoteContext(ntxId)) {
return;
}
await this.initialized;
resolve(this.$editor);
}
}