fix: bring back vue2 support

Author: MattTheCuber

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__ = [
@@ -21,8 +23,9 @@ class Editor(HtmlElement):
 
     Properties:
 
-    :param v_model:
     :param options:
+    :param value:
+    :param model_value:
     :param theme:
     :param language:
     :param textmate:
@@ -40,6 +43,8 @@ def __init__(self, **kwargs):
         )
         self._attr_names += [
             "options",
+            "value",
+            ("model_value", "modelValue"),
             "theme",
             "language",
             "textmate",

vue-components/src/components/Editor.js

@@ -11,7 +11,9 @@ export default {
   props: {
     modelValue: {
       type: String,
-      default: "",
+    },
+    value: {
+      type: String,
     },
     options: {
       type: Object,
@@ -35,7 +37,12 @@ export default {
   },
   watch: {
     modelValue(v) {
-      if (this.editor && this.editor.getValue() !== v) {
+      if (this.editor && v !== undefined && this.editor.getValue() !== v) {
+        this.editor.setValue(v);
+      }
+    },
+    value(v) {
+      if (this.editor && v !== undefined && this.editor.getValue() !== v) {
         this.editor.setValue(v);
       }
     },
@@ -112,9 +119,16 @@ export default {
       provider.injectCSS();
     }
 
+    this.lastValue = this.editor.getValue();
+
     this.editor.onDidChangeModelContent(() => {
-      this.$emit("update:modelValue", this.editor.getValue());
-      this.$emit("input", this.editor.getValue());
+      const newValue = this.editor.getValue();
+      if (this.lastValue === newValue) {
+        return;
+      }
+      this.lastValue = newValue;
+      this.$emit("update:modelValue", newValue);
+      this.$emit("input", newValue);
     });
   },
   beforeUnmount() {