Merge pull request #7824 from nocodb/nc-fix/long-text-field-ui-changes

Nc fix(nc-gui): long text field UI changes

packages/nc-gui/components/cell/RichText.vue

@@ -9,7 +9,7 @@ import Underline from '@tiptap/extension-underline'
 import Placeholder from '@tiptap/extension-placeholder'
 import { TaskItem } from '@/helpers/dbTiptapExtensions/task-item'
 import { Link } from '@/helpers/dbTiptapExtensions/links'
-import { IsExpandedFormOpenInj, IsFormInj, ReadonlyInj, RowHeightInj } from '#imports'
+import { IsExpandedFormOpenInj, IsFormInj, IsGridInj, ReadonlyInj, RowHeightInj } from '#imports'
 
 const props = defineProps<{
   value?: string | null
@@ -33,6 +33,8 @@ const readOnlyCell = inject(ReadonlyInj, ref(false))
 
 const isForm = inject(IsFormInj, ref(false))
 
+const isGrid = inject(IsGridInj, ref(false))
+
 const isFocused = ref(false)
 
 const turndownService = new TurndownService({})
@@ -222,6 +224,7 @@ useEventListener(
       'nc-rich-text-embed flex flex-col pl-1 w-full': !fullMode,
       'readonly': readOnly,
       'nc-form-rich-text-field !p-0': isFormField,
+      'nc-rich-text-grid': isGrid,
     }"
     :tabindex="readOnlyCell || isFormField ? -1 : 0"
   >
@@ -285,11 +288,12 @@ useEventListener(
   .ProseMirror {
     @apply !border-transparent max-h-full;
   }
-  &:not(.nc-form-rich-text-field) {
+  &:not(.nc-form-rich-text-field):not(.nc-rich-text-grid) {
     .ProseMirror {
       min-height: 8rem;
     }
   }
+
   &.nc-form-rich-text-field {
     .ProseMirror {
       padding: 0;
@@ -346,7 +350,7 @@ useEventListener(
     pointer-events: none;
   }
   .ProseMirror {
-    @apply flex-grow pt-1 border-1 border-gray-200 rounded-lg;
+    @apply flex-grow pt-1.5 border-1 border-gray-200 rounded-lg;
 
     > * {
       @apply ml-1;

packages/nc-gui/components/cell/TextArea.vue

@@ -203,7 +203,7 @@ watch(inputWrapperRef, () => {
 <template>
   <div>
     <div
-      class="flex flex-row pt-0.5 w-full long-text-wrapper"
+      class="flex flex-row w-full long-text-wrapper"
       :class="{
         'min-h-10': rowHeight !== 1 || isExpandedFormOpen,
         'min-h-9': rowHeight === 1 && !isExpandedFormOpen,
@@ -213,6 +213,10 @@ watch(inputWrapperRef, () => {
       <div
         v-if="isRichMode"
         class="w-full cursor-pointer nc-readonly-rich-text-wrapper"
+        :class="{
+          'nc-readonly-rich-text-grid ': !isExpandedFormOpen && !isForm,
+          'nc-readonly-rich-text-sort-height': rowHeight === 1 && !isExpandedFormOpen && !isForm,
+        }"
         :style="{
           maxHeight: isForm ? undefined : isExpandedFormOpen ? `${height}px` : `${25 * (rowHeight || 1)}px`,
           minHeight: isForm ? undefined : isExpandedFormOpen ? `${height}px` : `${25 * (rowHeight || 1)}px`,
@@ -256,10 +260,9 @@ watch(inputWrapperRef, () => {
         v-else-if="rowHeight"
         :value="vModel"
         :lines="rowHeight"
-        class="mr-7 nc-text-area-clamped-text"
+        class="nc-text-area-clamped-text my-auto"
         :style="{
           'word-break': 'break-word',
-          'white-space': 'pre-line',
           'max-height': `${25 * (rowHeight || 1)}px`,
         }"
         @click="onTextClick"
@@ -350,6 +353,17 @@ textarea:focus {
 .nc-longtext-scrollbar {
   @apply scrollbar-thin scrollbar-thumb-gray-200 hover:scrollbar-thumb-gray-300 scrollbar-track-transparent;
 }
+
+.nc-readonly-rich-text-wrapper {
+  &.nc-readonly-rich-text-grid {
+    :deep(.ProseMirror) {
+      @apply !pt-0;
+    }
+    &.nc-readonly-rich-text-sort-height {
+      @apply mt-2;
+    }
+  }
+}
 </style>
 
 <style lang="scss">

packages/nc-gui/components/nc/ErrorBoundary.vue

@@ -66,7 +66,14 @@ export default {
 <template>
   <slot :key="key"></slot>
   <slot name="error">
-    <NcModal v-if="error" v-model:visible="errModal" :class="{ active: errModal }" :centered="true" :closable="false" :footer="null">
+    <NcModal
+      v-if="error"
+      v-model:visible="errModal"
+      :class="{ active: errModal }"
+      :centered="true"
+      :closable="false"
+      :footer="null"
+    >
       <div class="w-full flex flex-col gap-1">
         <h2 class="text-xl font-semibold">Oops! Something unexpected happened :/</h2>
 

packages/nc-gui/nuxt.config.ts

@@ -234,4 +234,4 @@ export default defineNuxtConfig({
       { name: 'storeToRefs', from: 'pinia' },
     ],
   },
-})
+})