From d78e019b3f6e6f70296a4c43287be47e9acadeaf Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa@nocodb.com>
Date: Wed, 15 Nov 2023 07:31:06 +0000
Subject: [PATCH] fix: Added click to preview text area lookup and show new
 line in text area

---
 packages/nc-gui/components/cell/TextArea.vue       | 12 +++++++++++-
 packages/nc-gui/components/smartsheet/Cell.vue     |  2 +-
 packages/nc-gui/components/virtual-cell/Lookup.vue |  6 +++++-
 3 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/packages/nc-gui/components/cell/TextArea.vue b/packages/nc-gui/components/cell/TextArea.vue
index 826e76a7a1..90581d7e85 100644
--- a/packages/nc-gui/components/cell/TextArea.vue
+++ b/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 }"
diff --git a/packages/nc-gui/components/smartsheet/Cell.vue b/packages/nc-gui/components/smartsheet/Cell.vue
index a7fbfe7b11..70dbbfdcc9 100644
--- a/packages/nc-gui/components/smartsheet/Cell.vue
+++ b/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" />
diff --git a/packages/nc-gui/components/virtual-cell/Lookup.vue b/packages/nc-gui/components/virtual-cell/Lookup.vue
index 87dd4080be..6a2728fbef 100644
--- a/packages/nc-gui/components/virtual-cell/Lookup.vue
+++ b/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>