fix(nc-gui): clicking outside does not close the expanded JSON cell

packages/nc-gui/components/cell/Json.vue

@@ -143,6 +143,13 @@ useSelectedCellKeyupListener(active, (e) => {
   }
 })
 
+const inputWrapperRef = ref<HTMLElement | null>(null)
+
+onClickOutside(inputWrapperRef, (e) => {
+  if ((e.target as HTMLElement)?.closest('.nc-json-action')) return
+  editEnabled.value = false
+})
+
 watch(isExpanded, () => {
   _isExpanded.value = isExpanded.value
 })
@@ -151,7 +158,7 @@ watch(isExpanded, () => {
 <template>
   <component :is="isExpanded ? NcModal : 'div'" v-model:visible="isExpanded" :closable="false" centered :footer="null">
     <div v-if="editEnabled && !readonly" class="flex flex-col w-full" @mousedown.stop @mouseup.stop @click.stop>
-      <div class="flex flex-row justify-between pt-1 pb-2" @mousedown.stop>
+      <div class="flex flex-row justify-between pt-1 pb-2 nc-json-action" @mousedown.stop>
         <a-button type="text" size="small" @click="isExpanded = !isExpanded">
           <CilFullscreenExit v-if="isExpanded" class="h-2.5" />
 
@@ -170,6 +177,7 @@ watch(isExpanded, () => {
       </div>
 
       <LazyMonacoEditor
+        ref="inputWrapperRef"
         :model-value="localValue || ''"
         class="min-w-full w-80"
         :class="{ 'expanded-editor': isExpanded, 'editor': !isExpanded }"