From a90c2437e71f806f6f29bf499d352fd1d5c5710d Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Wed, 17 Jan 2024 07:24:59 +0000
Subject: [PATCH] fix(nc-gui): review changes PR #2122

---
 packages/nc-gui/components/cell/RichText.vue | 23 ++++++++++----------
 packages/nc-gui/components/cell/TextArea.vue |  8 +++----
 2 files changed, 15 insertions(+), 16 deletions(-)

diff --git a/packages/nc-gui/components/cell/RichText.vue b/packages/nc-gui/components/cell/RichText.vue
index 581517c2a9..413e01302a 100644
--- a/packages/nc-gui/components/cell/RichText.vue
+++ b/packages/nc-gui/components/cell/RichText.vue
@@ -12,7 +12,7 @@ import { RowHeightInj, IsExpandedFormOpenInj } from '#imports'
 
 const props = defineProps<{
   value?: string | null
-  readonly?: boolean
+  readOnly?: boolean
   syncValueChange?: boolean
   showMenu?: boolean
   fullMode?: boolean
@@ -119,7 +119,7 @@ const editor = useEditor({
 
     vModel.value = markdown
   },
-  editable: !props.readonly,
+  editable: !props.readOnly,
 })
 
 const setEditorContent = (contentMd: any, focusEndOfDoc?: boolean) => {
@@ -170,17 +170,17 @@ watch(editorDom, () => {
   <div
     class="h-full focus:outline-none"
     :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,
+      'flex flex-col flex-grow nc-rich-text-full': fullMode,
+      'nc-rich-text-embed flex flex-col pl-1 w-full': !fullMode,
+      'readonly': readOnly,
     }"
     tabindex="0"
   >
     <div
-      v-if="props.showMenu && !props.readonly"
+      v-if="showMenu && !readOnly"
       class="absolute top-0 right-0.5 xs:hidden"
       :class="{
-        'max-w-[calc(100%_-_198px)] flex justify-end rounded-tr-2xl overflow-hidden': props.fullMode,
+        'max-w-[calc(100%_-_198px)] flex justify-end rounded-tr-2xl overflow-hidden': fullMode,
       }"
     >
       <div class="nc-scrollbar-x-md">
@@ -194,11 +194,10 @@ watch(editorDom, () => {
       :editor="editor"
       class="flex flex-col nc-textarea-rich-editor w-full"
       :class="{
-        'mt-2.5 flex-grow': props.fullMode,
-        'nc-scrollbar-md': (!props.fullMode && !props.readonly) || isExpandedFormOpen,
+        'mt-2.5 flex-grow': fullMode,
+        'nc-scrollbar-md': !fullMode || (!fullMode && isExpandedFormOpen),
         'flex-grow': isExpandedFormOpen,
-        [`!overflow-hidden children:line-clamp-${rowHeight}`]:
-          !props.fullMode && props.readonly && rowHeight && !isExpandedFormOpen,
+        [`!overflow-hidden children:line-clamp-${rowHeight}`]: !fullMode && readOnly && rowHeight && !isExpandedFormOpen,
       }"
     />
   </div>
@@ -242,7 +241,7 @@ watch(editorDom, () => {
     min-height: 215px;
     max-height: min(797px, calc(100vh - 170px));
     min-width: 256px;
-    max-width: min(1256px, 100vw - 124px);
+    max-width: min(1256px, 100vw - 126px);
   }
   &.readonly {
     .ProseMirror {
diff --git a/packages/nc-gui/components/cell/TextArea.vue b/packages/nc-gui/components/cell/TextArea.vue
index 9c9a7d9f04..250ede61ff 100644
--- a/packages/nc-gui/components/cell/TextArea.vue
+++ b/packages/nc-gui/components/cell/TextArea.vue
@@ -220,7 +220,7 @@ watch(inputWrapperRef, () => {
         @dblclick="onExpand"
         @keydown.enter="onExpand"
       >
-        <LazyCellRichText v-model:value="vModel" sync-value-change readonly />
+        <LazyCellRichText v-model:value="vModel" sync-value-change read-only />
       </div>
       <textarea
         v-else-if="editEnabled && !isVisible"
@@ -270,7 +270,7 @@ watch(inputWrapperRef, () => {
       <NcTooltip
         v-if="!isVisible"
         placement="bottom"
-        class="!absolute right-0 hidden nc-text-area-expand-btn group-hover:block"
+        class="!absolute right-0 hidden nc-text-area-expand-btn group-hover:block z-3"
         :class="isExpandedFormOpen || isForm || isRichMode ? 'top-1' : 'bottom-1'"
       >
         <template #title>{{ $t('title.expand') }}</template>
@@ -325,7 +325,7 @@ watch(inputWrapperRef, () => {
           />
         </div>
 
-        <LazyCellRichText v-else v-model:value="vModel" show-menu full-mode :readonly="readOnly" />
+        <LazyCellRichText v-else v-model:value="vModel" show-menu full-mode :read-only="readOnly" />
       </div>
     </a-modal>
   </div>
@@ -340,7 +340,7 @@ textarea:focus {
 
   max-height: min(795px, 100vh - 170px);
   min-width: 256px;
-  max-width: min(1256px, 100vw - 124px);
+  max-width: min(1256px, 100vw - 126px);
   scrollbar-width: thin !important;
   &::-webkit-scrollbar-thumb {
     @apply rounded-lg;