fix(client): hide state field display on edit (#507)

Co-authored-by: Loot Nurakhmetov <[email protected]>

Author: Lootjs

packages/applet/src/components/state/StateFieldViewer.vue

@@ -204,14 +204,16 @@ async function submitDrafting() {
       </span>
       <span mx1>:</span>
       <StateFieldInputEditor v-if="editing" v-model="editingText" :custom-type="raw.customType" @cancel="toggleEditing" @submit="submit" />
-      <span :class="stateFormatClass" class="flex whitespace-nowrap">
-        <span class="flex" v-html="normalizedDisplayedValue" />
-      </span>
-      <StateFieldEditor
-        :hovering="isHovering" :disable-edit="state.disableEdit"
-        :data="data" :depth="depth" @enable-edit-input="toggleEditing"
-        @add-new-prop="addNewProp"
-      />
+      <template v-if="!editing">
+        <span :class="stateFormatClass" class="flex whitespace-nowrap">
+          <span class="flex" v-html="normalizedDisplayedValue" />
+        </span>
+        <StateFieldEditor
+          :hovering="isHovering" :disable-edit="state.disableEdit"
+          :data="data" :depth="depth" @enable-edit-input="toggleEditing"
+          @add-new-prop="addNewProp"
+        />
+      </template>
     </div>
     <div v-if="hasChildren && expanded.includes(`${depth}-${index}`)">
       <ChildStateViewer :data="normalizedDisplayedChildren" :depth="depth" :index="index" />