From 3bf96a2559d0e6456254b89ef782b7de0f200bf4 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa@nocodb.com>
Date: Thu, 23 Nov 2023 11:20:38 +0000
Subject: [PATCH] fix: Added click on text area to open expanded long text view
 and text area can be expanded on expanded form

---
 packages/nc-gui/components/cell/TextArea.vue | 21 ++++++++++----------
 1 file changed, 11 insertions(+), 10 deletions(-)

diff --git a/packages/nc-gui/components/cell/TextArea.vue b/packages/nc-gui/components/cell/TextArea.vue
index 76d9d1d08e..dd2e4e9cb4 100644
--- a/packages/nc-gui/components/cell/TextArea.vue
+++ b/packages/nc-gui/components/cell/TextArea.vue
@@ -84,12 +84,6 @@ const isRichMode = computed(() => {
 
   return meta?.richMode
 })
-
-watch(editEnabled, () => {
-  if (editEnabled.value && isRichMode.value) {
-    isVisible.value = true
-  }
-})
 </script>
 
 <template>
@@ -104,11 +98,12 @@ watch(editEnabled, () => {
     >
       <div
         v-if="isRichMode"
-        class="w-full"
+        class="w-full cursor-pointer"
         :style="{
           maxHeight: `${height}px !important`,
           minHeight: `${height}px !important`,
         }"
+        @click="isVisible = true"
       >
         <LazyCellRichText v-model:value="vModel" sync-value-change readonly class="!pointer-events-none" />
       </div>
@@ -156,10 +151,9 @@ watch(editEnabled, () => {
       <span v-else>{{ vModel }}</span>
 
       <NcTooltip
-        v-if="active && !isExpandedFormOpen"
         placement="bottom"
-        class="!absolute right-0 bottom-1"
-        :class="{ 'right-2 bottom-2': editEnabled }"
+        class="!absolute right-0 bottom-1 !hidden nc-text-area-expand-btn"
+        :class="{ 'right-0 bottom-2': editEnabled }"
       >
         <template #title>{{ $t('title.expand') }}</template>
         <NcButton
@@ -212,6 +206,7 @@ watch(editEnabled, () => {
           }"
           show-menu
           full-mode
+          :read-only="readOnly"
         />
       </div>
     </template>
@@ -222,4 +217,10 @@ watch(editEnabled, () => {
 textarea:focus {
   box-shadow: none;
 }
+
+.nc-grid-cell:hover {
+  .nc-text-area-expand-btn {
+    @apply !block;
+  }
+}
 </style>