Merge pull request #6977 from nocodb/nc-fix/text-area-lookup-issue

fix: Added click to preview text area lookup and show new line in tex…

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

@@ -16,6 +16,7 @@ import {
 const props = defineProps<{
   modelValue?: string | number
   isFocus?: boolean
+  virtual?: boolean
 }>()
 
 const emits = defineEmits(['update:modelValue'])
@@ -65,6 +66,13 @@ onClickOutside(inputWrapperRef, (e) => {
 
   isVisible.value = false
 })
+
+const onDblClick = () => {
+  if (!props.virtual) return
+
+  isVisible.value = true
+  editEnabled.value = true
+}
 </script>
 
 <template>
@@ -113,7 +121,9 @@ onClickOutside(inputWrapperRef, (e) => {
         class="mr-7 nc-text-area-clamped-text"
         :style="{
           'word-break': 'break-word',
+          'white-space': 'pre-line',
         }"
+        @click="onDblClick"
       />
 
       <span v-else>{{ vModel }}</span>
@@ -148,7 +158,7 @@ onClickOutside(inputWrapperRef, (e) => {
         <a-textarea
           ref="inputRef"
           v-model:value="vModel"
-          class="p-1 !pt-1 !pr-3 !border-0 !border-r-0 !focus:outline-transparent nc-scrollbar-md !text-black"
+          class="p-1 !pt-1 !pr-3 !border-0 !border-r-0 !focus:outline-transparent nc-scrollbar-md !text-black !cursor-text"
           :placeholder="$t('activity.enterText')"
           :bordered="false"
           :auto-size="{ minRows: 20, maxRows: 20 }"

packages/nc-gui/components/smartsheet/Cell.vue

@@ -216,7 +216,7 @@ onUnmounted(() => {
   >
     <template v-if="column">
       <template v-if="intersected">
-        <LazyCellTextArea v-if="isTextArea(column)" v-model="vModel" />
+        <LazyCellTextArea v-if="isTextArea(column)" v-model="vModel" :virtual="props.virtual" />
         <LazyCellGeoData v-else-if="isGeoData(column)" v-model="vModel" />
         <LazyCellCheckbox v-else-if="isBoolean(column, abstractType)" v-model="vModel" />
         <LazyCellAttachment v-else-if="isAttachment(column)" v-model="vModel" :row-index="props.rowIndex" />

packages/nc-gui/components/virtual-cell/Lookup.vue

@@ -98,7 +98,7 @@ const { showEditNonEditableFieldWarning, showClearNonEditableFieldWarning, activ
 
 <template>
   <div
-    class="h-full w-full"
+    class="h-full w-full nc-lookup-cell"
     :style="{ height: rowHeight && rowHeight !== 1 ? `${rowHeight * 2}rem` : `2.85rem` }"
     @dblclick="activateShowEditNonEditableFieldWarning"
   >
@@ -206,4 +206,8 @@ const { showEditNonEditableFieldWarning, showClearNonEditableFieldWarning, activ
     @apply bg-gray-200;
   }
 }
+
+.nc-lookup-cell .nc-text-area-clamped-text {
+  @apply !mr-1;
+}
 </style>