Update editor to use modelValue for Vue 3

example/read-only/viewer.py

@@ -8,7 +8,7 @@
 # Trame setup
 # -----------------------------------------------------------------------------
 
-server = get_server()
+server = get_server(client_type="vue2")
 state, ctrl = server.state, server.controller
 
 

trame_code/widgets/code.py

@@ -1,5 +1,7 @@
 """Module compatible with vue2 and vue3. To use it, you need to install **trame-code**"""
+
 from trame_client.widgets.core import AbstractElement
+
 from .. import module
 
 __all__ = [
@@ -23,6 +25,7 @@ class Editor(HtmlElement):
 
     :param options:
     :param value:
+    :param model_value:
     :param theme:
     :param language:
     :param textmate:
@@ -41,6 +44,7 @@ def __init__(self, **kwargs):
         self._attr_names += [
             "options",
             "value",
+            ("model_value", "modelValue"),
             "theme",
             "language",
             "textmate",

vue-components/src/components/Editor.js

@@ -9,9 +9,11 @@ import * as monaco from "monaco-editor";
 export default {
   name: "VSEditor",
   props: {
+    modelValue: {
+      type: String,
+    },
     value: {
       type: String,
-      default: "",
     },
     options: {
       type: Object,
@@ -34,8 +36,13 @@ export default {
     },
   },
   watch: {
+    modelValue(v) {
+      if (this.editor && v !== undefined && this.editor.getValue() !== v) {
+        this.editor.setValue(v);
+      }
+    },
     value(v) {
-      if (this.editor) {
+      if (this.editor && v !== undefined && this.editor.getValue() !== v) {
         this.editor.setValue(v);
       }
     },
@@ -102,7 +109,7 @@ export default {
     }
 
     this.editor = monaco.editor.create(this.$el, {
-      value: this.value,
+      value: this.modelValue || this.value,
       language: this.language,
       theme: this.theme,
       ...this.options,
@@ -112,9 +119,17 @@ export default {
       provider.injectCSS();
     }
 
-    this.editor.onDidChangeModelContent(() =>
-      this.$emit("input", this.editor.getValue())
-    );
+    this.lastValue = this.editor.getValue();
+
+    this.editor.onDidChangeModelContent(() => {
+      const newValue = this.editor.getValue();
+      if (this.lastValue === newValue) {
+        return;
+      }
+      this.lastValue = newValue;
+      this.$emit("update:modelValue", newValue);
+      this.$emit("input", newValue);
+    });
   },
   beforeUnmount() {
     this.editor.dispose();