From 9379dfab0f18875685b2d98fbb7e9b79fd7d3fe2 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa@nocodb.com>
Date: Thu, 23 Nov 2023 11:20:35 +0000
Subject: [PATCH] fix: Fixed rich cell value sync when rich modal is open and
 show scrollbar in rich cell only when on hover

---
 packages/nc-gui/components/cell/RichText.vue | 20 +++++++++++++++++++-
 packages/nc-gui/components/cell/TextArea.vue | 13 ++++++++++---
 2 files changed, 29 insertions(+), 4 deletions(-)

diff --git a/packages/nc-gui/components/cell/RichText.vue b/packages/nc-gui/components/cell/RichText.vue
index 866b422fe7..fdaa5e9a0a 100644
--- a/packages/nc-gui/components/cell/RichText.vue
+++ b/packages/nc-gui/components/cell/RichText.vue
@@ -12,6 +12,7 @@ import { Link } from '@/helpers/dbTiptapExtensions/links'
 const props = defineProps<{
   value?: string | null
   readonly?: boolean
+  syncValueChange?: boolean
 }>()
 
 const emits = defineEmits(['update:value'])
@@ -54,6 +55,12 @@ const setEditorContent = (contentMd: any) => {
   editor.value.chain().setContent(content).setTextSelection(selection.to).run()
 }
 
+if (props.syncValueChange) {
+  watch(vModel, () => {
+    setEditorContent(vModel.value)
+  })
+}
+
 onMounted(() => {
   setTimeout(() => {
     setEditorContent(vModel.value)
@@ -65,11 +72,22 @@ onMounted(() => {
   <div class="h-full">
     <CellRichTextSelectedBubbleMenu v-if="editor" :editor="editor" />
     <CellRichTextLinkOptions v-if="editor" :editor="editor" />
-    <EditorContent :editor="editor" class="nc-textarea-rich w-full h-full nc-scrollbar-md" />
+    <EditorContent :editor="editor" class="nc-textarea-rich w-full h-full nc-text-rich-scroll nc-scrollbar-md" />
   </div>
 </template>
 
 <style lang="scss">
+.nc-text-rich-scroll {
+  &::-webkit-scrollbar-thumb {
+    @apply bg-transparent;
+  }
+}
+.nc-text-rich-scroll:hover {
+  &::-webkit-scrollbar-thumb {
+    @apply bg-gray-200;
+  }
+}
+
 .nc-textarea-rich {
   .ProseMirror-focused {
     // remove all border
diff --git a/packages/nc-gui/components/cell/TextArea.vue b/packages/nc-gui/components/cell/TextArea.vue
index 9530db1b19..e08e0a79cd 100644
--- a/packages/nc-gui/components/cell/TextArea.vue
+++ b/packages/nc-gui/components/cell/TextArea.vue
@@ -109,7 +109,7 @@ watch(editEnabled, () => {
           maxHeight: `${height}px !important`,
         }"
       >
-        <CellRichText v-model:value="vModel" read-only />
+        <CellRichText v-model:value="vModel" sync-value-change readonly />
       </div>
       <textarea
         v-else-if="editEnabled && !isVisible"
@@ -194,13 +194,20 @@ watch(editEnabled, () => {
           @keydown.escape="isVisible = false"
         />
 
-        <CellRichText v-else v-model:value="vModel" class="ml-2 mt-2 max-h-70vh nc-scrollbar-md" />
+        <CellRichText
+          v-else
+          v-model:value="vModel"
+          class="ml-2 mt-2 nc-scrollbar-md"
+          :style="{
+            'max-height': 'calc(min(60vh, 100rem))',
+          }"
+        />
       </div>
     </template>
   </NcDropdown>
 </template>
 
-<style>
+<style lang="scss">
 textarea:focus {
   box-shadow: none;
 }