From 8d07caf5412018a5a84be4d665b88f2fd7cf4468 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Wed, 17 Jan 2024 07:24:58 +0000
Subject: [PATCH] fix(nc-gui): show truncated text in readonly rich text cell

---
 packages/nc-gui/components/cell/RichText.vue  | 35 +++++++++++++------
 packages/nc-gui/components/cell/TextArea.vue  |  9 ++---
 .../virtual-cell/components/ListItem.vue      | 11 ++++++
 3 files changed, 40 insertions(+), 15 deletions(-)

diff --git a/packages/nc-gui/components/cell/RichText.vue b/packages/nc-gui/components/cell/RichText.vue
index de8ea395f7..3a4d7051de 100644
--- a/packages/nc-gui/components/cell/RichText.vue
+++ b/packages/nc-gui/components/cell/RichText.vue
@@ -8,6 +8,7 @@ import { generateJSON } from '@tiptap/html'
 import Underline from '@tiptap/extension-underline'
 import { TaskItem } from '@/helpers/dbTiptapExtensions/task-item'
 import { Link } from '@/helpers/dbTiptapExtensions/links'
+import { RowHeightInj, IsExpandedFormOpenInj } from '#imports'
 
 const props = defineProps<{
   value?: string | null
@@ -21,6 +22,8 @@ const emits = defineEmits(['update:value'])
 
 const isExpandedFormOpen = inject(IsExpandedFormOpenInj, ref(false))!
 
+const rowHeight = inject(RowHeightInj, ref(1 as const))
+
 const turndownService = new TurndownService({})
 
 turndownService.addRule('lineBreak', {
@@ -169,6 +172,7 @@ watch(editorDom, () => {
     :class="{
       'flex flex-col flex-grow nc-rich-text-full': props.fullMode,
       'nc-rich-text-embed flex flex-col pl-1 w-full': !props.fullMode,
+      'readonly': props.readonly,
     }"
     tabindex="0"
   >
@@ -180,11 +184,13 @@ watch(editorDom, () => {
     <EditorContent
       ref="editorDom"
       :editor="editor"
-      class="flex flex-col nc-textarea-rich-editor w-full overflow-hidden"
+      class="flex flex-col nc-textarea-rich-editor w-full"
       :class="{
         'ml-1 mt-2.5 flex-grow': props.fullMode,
         'nc-scrollbar-md': (!props.fullMode && !props.readonly) || isExpandedFormOpen,
         'flex-grow': isExpandedFormOpen,
+        [`!overflow-hidden children:line-clamp-${rowHeight}`]:
+          !props.fullMode && props.readonly && rowHeight && !isExpandedFormOpen,
       }"
     />
   </div>
@@ -207,16 +213,31 @@ watch(editorDom, () => {
     @apply !border-transparent max-h-full;
     min-height: 8rem;
   }
+  &.readonly {
+    .nc-textarea-rich-editor {
+      .ProseMirror {
+        resize: none;
+        white-space: pre-line;
+      }
+    }
+  }
 }
 
 .nc-rich-text-full {
   @apply px-1.75;
   .ProseMirror {
-    @apply !p-2;
-
+    @apply !p-2 h-[215px];
+    overflow-y: auto;
+    overflow-x: hidden;
+    scrollbar-width: thin !important;
     max-height: min(794px, calc(100vh - 170px));
     min-height: 215px;
   }
+  &.readonly {
+    .ProseMirror {
+      @apply bg-gray-50;
+    }
+  }
 }
 
 .nc-textarea-rich-editor {
@@ -333,12 +354,4 @@ watch(editorDom, () => {
     height: fit-content;
   }
 }
-
-.nc-rich-text-full {
-  .ProseMirror {
-    overflow-y: auto;
-    overflow-x: hidden;
-    scrollbar-width: thin !important;
-  }
-}
 </style>
diff --git a/packages/nc-gui/components/cell/TextArea.vue b/packages/nc-gui/components/cell/TextArea.vue
index 384039e1cf..c0dd0165a7 100644
--- a/packages/nc-gui/components/cell/TextArea.vue
+++ b/packages/nc-gui/components/cell/TextArea.vue
@@ -210,10 +210,10 @@ watch(inputWrapperRef, () => {
     >
       <div
         v-if="isRichMode"
-        class="w-full cursor-pointer"
+        class="w-full cursor-pointer nc-readonly-rich-text-wrapper"
         :style="{
-          maxHeight: isExpandedFormOpen ? `${height}px !important` : `${25 * (rowHeight || 1)}px !important`,
-          minHeight: isExpandedFormOpen ? `${height}px !important` : `${25 * (rowHeight || 1)}px !important`,
+          maxHeight: isExpandedFormOpen ? `${height}px` : `${25 * (rowHeight || 1)}px`,
+          minHeight: isExpandedFormOpen ? `${height}px` : `${25 * (rowHeight || 1)}px`,
         }"
         @dblclick="onExpand"
         @keydown.enter="onExpand"
@@ -235,6 +235,7 @@ watch(inputWrapperRef, () => {
           minHeight: `${height}px`,
         }"
         :placeholder="isEditColumn ? $t('labels.optional') : ''"
+        :disabled="readOnly"
         @blur="editEnabled = false"
         @keydown.alt.enter.stop
         @keydown.shift.enter.stop
@@ -315,7 +316,7 @@ watch(inputWrapperRef, () => {
           <a-textarea
             ref="inputRef"
             v-model:value="vModel"
-            class="nc-text-area-expanded !py-1 !px-3 !text-black !cursor-text !min-h-[210px] !rounded-lg focus:border-brand-500"
+            class="nc-text-area-expanded !py-1 !px-3 !text-black !cursor-text !min-h-[210px] !rounded-lg focus:border-brand-500 disabled:!bg-gray-50"
             :placeholder="$t('activity.enterText')"
             :style="{ resize: 'vertical' }"
             :disabled="readOnly"
diff --git a/packages/nc-gui/components/virtual-cell/components/ListItem.vue b/packages/nc-gui/components/virtual-cell/components/ListItem.vue
index ff0aaee562..76edd4a209 100644
--- a/packages/nc-gui/components/virtual-cell/components/ListItem.vue
+++ b/packages/nc-gui/components/virtual-cell/components/ListItem.vue
@@ -202,5 +202,16 @@ const displayValue = computed(() => {
       @apply !hidden;
     }
   }
+  .long-text-wrapper {
+    @apply select-none pointer-events-none;
+    .nc-readonly-rich-text-wrapper {
+      @apply !min-h-6 !max-h-6;
+    }
+    .nc-rich-text-embed {
+      .ProseMirror {
+        @apply !overflow-hidden line-clamp-1;
+      }
+    }
+  }
 }
 </style>