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

chore(react/type_widget): add more options to editable code

Browse Source
This commit is contained in:
Elian Doran 2025-09-20 09:59:49 +03:00
parent 79be13e6c7
commit 9480227b69
No known key found for this signature in database
2 changed files with 13 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -4,7 +4,8 @@ import { TypeWidgetProps } from "../type_widget";
import "./code.css"; import "./code.css";
import CodeMirror from "./CodeMirror"; import CodeMirror from "./CodeMirror";
import utils from "../../../services/utils"; import utils from "../../../services/utils";
import { useEditorSpacedUpdate, useNoteBlob } from "../../react/hooks"; import { useEditorSpacedUpdate, useNoteBlob, useTriliumOptionBool } from "../../react/hooks";
import { t } from "../../../services/i18n";
export function ReadOnlyCode({ note, viewScope, ntxId }: TypeWidgetProps) { export function ReadOnlyCode({ note, viewScope, ntxId }: TypeWidgetProps) {
const [ content, setContent ] = useState(""); const [ content, setContent ] = useState("");
@ -29,8 +30,12 @@ export function ReadOnlyCode({ note, viewScope, ntxId }: TypeWidgetProps) {
) )
} }
export function EditableCode({ note, ntxId }: TypeWidgetProps) { export function EditableCode({ note, ntxId, debounceUpdate }: TypeWidgetProps & {
// if true, the update will be debounced to prevent excessive updates. Especially useful if the editor is linked to a live preview.
debounceUpdate?: boolean;
}) {
const editorRef = useRef<VanillaCodeMirror>(null); const editorRef = useRef<VanillaCodeMirror>(null);
const [ vimKeymapEnabled ] = useTriliumOptionBool("vimKeymapEnabled");
const spacedUpdate = useEditorSpacedUpdate({ const spacedUpdate = useEditorSpacedUpdate({
note, note,
getData: () => ({ content: editorRef.current?.getText() }), getData: () => ({ content: editorRef.current?.getText() }),
@ -49,7 +54,13 @@ export function EditableCode({ note, ntxId }: TypeWidgetProps) {
editorRef={editorRef} editorRef={editorRef}
className="note-detail-code-editor" className="note-detail-code-editor"
ntxId={ntxId} ntxId={ntxId}
placeholder={t("editable_code.placeholder")}
vimKeybindings={vimKeymapEnabled}
tabIndex={300}
onContentChanged={() => { onContentChanged={() => {
if (debounceUpdate) {
spacedUpdate.resetUpdateTimer();
}
spacedUpdate.scheduleUpdate(); spacedUpdate.scheduleUpdate();
}} }}
/> />

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

@ -14,15 +14,6 @@ const TPL = /*html*/`
export default class EditableCodeTypeWidget extends AbstractCodeTypeWidget { export default class EditableCodeTypeWidget extends AbstractCodeTypeWidget {
private debounceUpdate: boolean;
/**
* @param debounceUpdate if true, the update will be debounced to prevent excessive updates. Especially useful if the editor is linked to a live preview.
*/
constructor(debounceUpdate: boolean = false) {
super();
this.debounceUpdate = debounceUpdate;
}
static getType() { static getType() {
return "editableCode"; return "editableCode";
@ -38,28 +29,9 @@ export default class EditableCodeTypeWidget extends AbstractCodeTypeWidget {
super.doRender(); super.doRender();
} }
getExtraOpts(): Partial<EditorConfig> {
return {
placeholder: t("editable_code.placeholder"),
vimKeybindings: options.is("vimKeymapEnabled"),
onContentChanged: () => {
if (this.debounceUpdate) {
this.spacedUpdate.resetUpdateTimer();
}
},
tabIndex: 300
}
}
async doRefresh(note: FNote) { async doRefresh(note: FNote) {
const blob = await this.note?.getBlob(); const blob = await this.note?.getBlob();
await this.spacedUpdate.allowUpdateWithoutChange(() => {
this._update(note, blob?.content ?? "");
});
this.show();
if (this.parent && hasTouchBar) { if (this.parent && hasTouchBar) {
this.triggerCommand("refreshTouchBar"); this.triggerCommand("refreshTouchBar");
} }