From 9480227b6914005bf126eb1493268fc075bd57d6 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Sat, 20 Sep 2025 09:59:49 +0300
Subject: [PATCH] chore(react/type_widget): add more options to editable code

---
 .../src/widgets/type_widgets/code/Code.tsx    | 15 ++++++++--
 .../widgets/type_widgets_old/editable_code.ts | 28 -------------------
 2 files changed, 13 insertions(+), 30 deletions(-)

diff --git a/apps/client/src/widgets/type_widgets/code/Code.tsx b/apps/client/src/widgets/type_widgets/code/Code.tsx
index a910bab1e..cdc0391cb 100644
--- a/apps/client/src/widgets/type_widgets/code/Code.tsx
+++ b/apps/client/src/widgets/type_widgets/code/Code.tsx
@@ -4,7 +4,8 @@ import { TypeWidgetProps } from "../type_widget";
 import "./code.css";
 import CodeMirror from "./CodeMirror";
 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) {
     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 [ vimKeymapEnabled ] = useTriliumOptionBool("vimKeymapEnabled");
     const spacedUpdate = useEditorSpacedUpdate({
         note,
         getData: () => ({ content: editorRef.current?.getText() }),
@@ -49,7 +54,13 @@ export function EditableCode({ note, ntxId }: TypeWidgetProps) {
                 editorRef={editorRef}
                 className="note-detail-code-editor"
                 ntxId={ntxId}
+                placeholder={t("editable_code.placeholder")}
+                vimKeybindings={vimKeymapEnabled}
+                tabIndex={300}
                 onContentChanged={() => {
+                    if (debounceUpdate) {
+                        spacedUpdate.resetUpdateTimer();
+                    }
                     spacedUpdate.scheduleUpdate();
                 }}
             />
diff --git a/apps/client/src/widgets/type_widgets_old/editable_code.ts b/apps/client/src/widgets/type_widgets_old/editable_code.ts
index 9290c8492..deb5acbf2 100644
--- a/apps/client/src/widgets/type_widgets_old/editable_code.ts
+++ b/apps/client/src/widgets/type_widgets_old/editable_code.ts
@@ -14,15 +14,6 @@ const TPL = /*html*/`
 
 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() {
         return "editableCode";
@@ -38,28 +29,9 @@ export default class EditableCodeTypeWidget extends AbstractCodeTypeWidget {
         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) {
         const blob = await this.note?.getBlob();
 
-        await this.spacedUpdate.allowUpdateWithoutChange(() => {
-        this._update(note, blob?.content ?? "");
-        });
-
-        this.show();
-
         if (this.parent && hasTouchBar) {
             this.triggerCommand("refreshTouchBar");
         }