From 3c100a865a5f2958f8d7e74c3fe5343c95c95444 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa@nocodb.com>
Date: Thu, 23 Nov 2023 11:20:39 +0000
Subject: [PATCH] fix: Made rich text modal more inline with design

---
 packages/nc-gui/components/cell/RichText.vue  | 70 ++++++++++++++-----
 packages/nc-gui/components/cell/TextArea.vue  | 14 +---
 .../smartsheet/column/EditOrAdd.vue           |  2 +-
 .../column/RichLongTextDefaultValue.vue       |  4 +-
 4 files changed, 57 insertions(+), 33 deletions(-)

diff --git a/packages/nc-gui/components/cell/RichText.vue b/packages/nc-gui/components/cell/RichText.vue
index ac30a2e4da..5fa48eb10f 100644
--- a/packages/nc-gui/components/cell/RichText.vue
+++ b/packages/nc-gui/components/cell/RichText.vue
@@ -138,26 +138,14 @@ watch(editorDom, () => {
     editor.value?.chain().focus().run()
   }, 50)
 })
-
-const focusEditorEnd = () => {
-  setTimeout(() => {
-    if (!editor.value) return
-    const docSize = editor.value.state.doc.content.size
-
-    editor.value
-      ?.chain()
-      .setTextSelection(docSize - 2)
-      .focus()
-      .run()
-  }, 50)
-}
 </script>
 
 <template>
   <div
     class="h-full"
     :class="{
-      'flex flex-col flex-grow': props.fullMode,
+      'flex flex-col flex-grow nc-rich-text-full': props.fullMode,
+      'nc-rich-text-embed': !props.fullMode,
     }"
   >
     <div v-if="props.showMenu" class="absolute top-0 right-0.5">
@@ -168,12 +156,11 @@ const focusEditorEnd = () => {
     <EditorContent
       ref="editorDom"
       :editor="editor"
-      class="nc-textarea-rich w-full h-full nc-text-rich-scroll nc-scrollbar-md"
+      class="flex flex-col nc-textarea-rich w-full flex-grow"
       :class="{
-        'ml-1.5 mt-0.5': props.fullMode,
+        'ml-1 mt-2.5': props.fullMode,
       }"
     />
-    <div v-if="props.fullMode" class="flex flex-grow" @click="focusEditorEnd"></div>
   </div>
 </template>
 
@@ -189,9 +176,55 @@ const focusEditorEnd = () => {
   }
 }
 
+.nc-rich-text-embed {
+  .ProseMirror {
+    @apply !border-transparent;
+  }
+}
+
+.nc-rich-text-full {
+  @apply px-1.75;
+  .ProseMirror {
+    @apply pl-1 mt-0.75;
+
+    max-height: calc(min(60vh, 100rem));
+
+    overflow-y: scroll;
+    overflow-x: hidden;
+    scrollbar-width: thin !important;
+
+    &::-webkit-scrollbar {
+      width: 4px;
+      height: 4px;
+    }
+    &::-webkit-scrollbar-track {
+      -webkit-border-radius: 10px;
+      border-radius: 10px;
+      margin-top: 4px;
+      margin-bottom: 4px;
+    }
+    &::-webkit-scrollbar-track-piece {
+      width: 0px;
+    }
+    &::-webkit-scrollbar {
+      @apply bg-transparent;
+    }
+    &::-webkit-scrollbar-thumb {
+      -webkit-border-radius: 10px;
+      border-radius: 10px;
+
+      width: 4px;
+      @apply bg-gray-300;
+    }
+    &::-webkit-scrollbar-thumb:hover {
+      @apply bg-gray-400;
+    }
+  }
+}
+
 .nc-textarea-rich {
   .ProseMirror {
-    @apply pt-1;
+    @apply flex flex-col flex-grow pt-1 border-1 border-gray-200 rounded-lg mr-2;
 
     > * {
       @apply ml-1;
@@ -200,6 +233,7 @@ const focusEditorEnd = () => {
   .ProseMirror-focused {
     // remove all border
     outline: none;
+    @apply border-brand-500;
   }
 
   p {
diff --git a/packages/nc-gui/components/cell/TextArea.vue b/packages/nc-gui/components/cell/TextArea.vue
index dd38a755fa..d6503bbeee 100644
--- a/packages/nc-gui/components/cell/TextArea.vue
+++ b/packages/nc-gui/components/cell/TextArea.vue
@@ -256,7 +256,7 @@ watch(editEnabled, () => {
       >
         <div
           v-if="column"
-          class="flex flex-row gap-x-1 items-center font-medium pl-3 pb-2.5 mb-1 border-b-1 border-gray-100 cursor-move"
+          class="flex flex-row gap-x-1 items-center font-medium pl-3 pb-2.5 border-b-1 border-gray-100 cursor-move"
           :class="{
             'select-none': isDragging,
           }"
@@ -282,17 +282,7 @@ watch(editEnabled, () => {
           @keydown.escape="isVisible = false"
         />
 
-        <LazyCellRichText
-          v-else-if="isVisible"
-          v-model:value="vModel"
-          class="ml-2 nc-scrollbar-md"
-          :style="{
-            'max-height': 'calc(min(60vh, 100rem))',
-          }"
-          show-menu
-          full-mode
-          :read-only="readOnly"
-        />
+        <LazyCellRichText v-else-if="isVisible" v-model:value="vModel" show-menu full-mode :read-only="readOnly" />
       </div>
     </template>
   </NcDropdown>
diff --git a/packages/nc-gui/components/smartsheet/column/EditOrAdd.vue b/packages/nc-gui/components/smartsheet/column/EditOrAdd.vue
index 8cd00ff1f2..506cf59843 100644
--- a/packages/nc-gui/components/smartsheet/column/EditOrAdd.vue
+++ b/packages/nc-gui/components/smartsheet/column/EditOrAdd.vue
@@ -220,7 +220,7 @@ if (props.fromTableExplorer) {
     :class="{
       'bg-white': !props.fromTableExplorer,
       'w-[400px]': !props.embedMode,
-      '!w-150': isTextArea(formState) && formState.meta.richMode,
+      '!w-146': isTextArea(formState) && formState.meta.richMode,
       '!w-[600px]': formState.uidt === UITypes.Formula && !props.embedMode,
       '!w-[500px]': formState.uidt === UITypes.Attachment && !props.embedMode && !appInfo.ee,
       'shadow-lg border-1 border-gray-50 shadow-gray-100 rounded-md p-6': !embedMode,
diff --git a/packages/nc-gui/components/smartsheet/column/RichLongTextDefaultValue.vue b/packages/nc-gui/components/smartsheet/column/RichLongTextDefaultValue.vue
index 8e28ca50dd..b8d665b270 100644
--- a/packages/nc-gui/components/smartsheet/column/RichLongTextDefaultValue.vue
+++ b/packages/nc-gui/components/smartsheet/column/RichLongTextDefaultValue.vue
@@ -18,8 +18,8 @@ const cdfValue = computed({
   <div>
     <div class="!my-3 text-xs">{{ $t('placeholder.defaultValue') }}</div>
     <div class="flex flex-row gap-2">
-      <div class="border-1 relative pt-12 flex items-center w-full px-0 my-[-4px] border-gray-300 rounded-md !max-h-70">
-        <LazyCellRichText v-model:value="cdfValue" class="ml-3 my-2" show-menu full-mode />
+      <div class="border-1 relative pt-11 flex items-center w-full px-0 my-[-4px] border-gray-300 rounded-md !max-h-70 !pb-2.5">
+        <LazyCellRichText v-model:value="cdfValue" class="border-t-1 border-gray-100" show-menu full-mode />
       </div>
     </div>
   </div>