From 2072bd61d13519c2ea7775ebb3c3c2aaf4cd2f1c Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Wed, 23 Jul 2025 22:28:15 +0300
Subject: [PATCH] fix(mermaid): lag during editing (closes #6443)

---
 apps/client/src/services/spaced_update.ts      |  8 ++++++++
 .../type_widgets/abstract_split_type_widget.ts |  5 ++++-
 .../src/widgets/type_widgets/editable_code.ts  | 18 +++++++++++++++++-
 3 files changed, 29 insertions(+), 2 deletions(-)

diff --git a/apps/client/src/services/spaced_update.ts b/apps/client/src/services/spaced_update.ts
index 9b09a2fd3..938fceb00 100644
--- a/apps/client/src/services/spaced_update.ts
+++ b/apps/client/src/services/spaced_update.ts
@@ -51,6 +51,14 @@ export default class SpacedUpdate {
         this.lastUpdated = Date.now();
     }
 
+    /**
+     * Sets the update interval for the spaced update.
+     * @param interval The update interval in milliseconds.
+     */
+    setUpdateInterval(interval: number) {
+        this.updateInterval = interval;
+    }
+
     triggerUpdate() {
         if (!this.changed) {
             return;
diff --git a/apps/client/src/widgets/type_widgets/abstract_split_type_widget.ts b/apps/client/src/widgets/type_widgets/abstract_split_type_widget.ts
index 23a4da942..343ed57ac 100644
--- a/apps/client/src/widgets/type_widgets/abstract_split_type_widget.ts
+++ b/apps/client/src/widgets/type_widgets/abstract_split_type_widget.ts
@@ -130,7 +130,8 @@ export default abstract class AbstractSplitTypeWidget extends TypeWidget {
 
     constructor() {
         super();
-        this.editorTypeWidget = new EditableCodeTypeWidget();
+
+        this.editorTypeWidget = new EditableCodeTypeWidget(true);
         this.editorTypeWidget.updateBackgroundColor = () => {};
         this.editorTypeWidget.isEnabled = () => true;
 
@@ -146,6 +147,8 @@ export default abstract class AbstractSplitTypeWidget extends TypeWidget {
     doRender(): void {
         this.$widget = $(TPL);
 
+        this.spacedUpdate.setUpdateInterval(750);
+
         // Preview pane
         this.$previewCol = this.$widget.find(".note-detail-split-preview-col");
         this.$preview = this.$widget.find(".note-detail-split-preview");
diff --git a/apps/client/src/widgets/type_widgets/editable_code.ts b/apps/client/src/widgets/type_widgets/editable_code.ts
index 9f4ff53cb..cdf4b912e 100644
--- a/apps/client/src/widgets/type_widgets/editable_code.ts
+++ b/apps/client/src/widgets/type_widgets/editable_code.ts
@@ -28,6 +28,16 @@ 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";
     }
@@ -46,7 +56,13 @@ export default class EditableCodeTypeWidget extends AbstractCodeTypeWidget {
         return {
             placeholder: t("editable_code.placeholder"),
             vimKeybindings: options.is("vimKeymapEnabled"),
-            onContentChanged: () => this.spacedUpdate.scheduleUpdate(),
+            onContentChanged: () => {
+                if (this.debounceUpdate) {
+                    this.spacedUpdate.resetUpdateTimer();
+                }
+
+                this.spacedUpdate.scheduleUpdate();
+            },
             tabIndex: 300
         }
     }