update source when model changes

src/components/main/trace-frame/code-col/__tests__/model.spec.ts

@@ -31,4 +31,16 @@ describe("useModel()", () => {
     await nextTick();
     expect(model.getValue()).toBe("# New source");
   });
+
+  it('edit model', async () => {
+    const source = ref("# Hello, world!");
+    const { model } = useModel(source);
+    expect(model.getValue()).toBe("# Hello, world!");
+    model.setValue("# New source");
+    await new Promise((resolve) => setTimeout(resolve, 110));
+    expect(source.value).toBe("# New source");
+    model.setValue("# New source 2");
+    await new Promise((resolve) => setTimeout(resolve, 110));
+    expect(source.value).toBe("# New source 2");
+  });
 });

src/components/main/trace-frame/code-col/monaco-editor.ts

@@ -7,15 +7,15 @@ import {
   watchEffect,
   onMounted,
 } from "vue";
-import type { Ref, MaybeRefOrGetter, MaybeRef } from "vue";
+import type { MaybeRefOrGetter, MaybeRef } from "vue";
+import { useDebounceFn } from "@vueuse/core";
 import * as monaco from "monaco-editor";
 
 export function useMonacoEditor(
   element: MaybeRef<HTMLElement | undefined>,
   source?: MaybeRef<string>,
   language = "python"
 ) {
-
   const { model, source: source_ } = useModel(source, language);
   source = source_;
 
@@ -51,12 +51,30 @@ export function useMonacoEditor(
   return { editor, model, source };
 }
 
-export function useModel(source?: MaybeRef<string>, language = "python") {
+export function useModel(
+  source?: MaybeRef<string>,
+  language = "python",
+  sourceUpdateDelayMilliseconds = 50,
+  sourceUpdateMaxWaitMilliseconds = 100
+) {
   const _source = source === undefined ? ref("") : ref(source);
   const model = monaco.editor.createModel(_source.value, language);
+
+  // Update model when source changes.
   watchEffect(() => {
     model.setValue(_source.value);
   });
+
+  // Update source when model changes (debounced).
+  const updateSource = useDebounceFn(
+    () => {
+      _source.value = model.getValue();
+    },
+    sourceUpdateDelayMilliseconds,
+    { maxWait: sourceUpdateMaxWaitMilliseconds }
+  );
+  model.onDidChangeContent(updateSource);
+
   return { model, source: _source };
 }