fix: should not trigger UI re-render on user actions

Author: cloydlau

src/Component.ts

@@ -58,8 +58,10 @@ export default defineComponent({
   setup(props, { attrs, emit, expose }) {
     const currentInstance = getCurrentInstance()?.proxy
     const jsonEditor = ref()
+    const preventUpdatingContent = ref(false)
 
     const onChange = debounce((updatedContent: Content) => {
+      preventUpdatingContent.value = true
       emit(
         updateModelValue,
         (updatedContent as TextContent).text === undefined
@@ -124,14 +126,21 @@ export default defineComponent({
       watch(
         () => props[modelValueProp],
         (newModelValue: any) => {
-          jsonEditor.value?.set(
-            [undefined, ''].includes(newModelValue)
-            // `undefined` is not accepted by vanilla-jsoneditor
-            // The default value is `{ text: '' }`
-            // Only default value can clear the editor
-              ? { text: '' }
-              : { json: newModelValue },
-          )
+          if (preventUpdatingContent.value) {
+            preventUpdatingContent.value = false
+            return
+          }
+          if (jsonEditor.value) {
+            // jsonEditor.value.update cannot render new props in json
+            jsonEditor.value.set(
+              [undefined, ''].includes(newModelValue)
+                // `undefined` is not accepted by vanilla-jsoneditor
+                // The default value is `{ text: '' }`
+                // Only default value can clear the editor
+                ? { text: '' }
+                : { json: newModelValue },
+            )
+          }
         },
         {
           deep: true,