Merge pull request #5849 from nocodb/feat/render-newline

feat: render new lines for LongText

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

@@ -13,6 +13,7 @@ const props = defineProps<{
       '-webkit-line-clamp': props.lines || 1,
       '-webkit-box-orient': 'vertical',
       'overflow': 'hidden',
+      'white-space': 'pre',
     }"
   >
     {{ props.value || '' }}

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

@@ -10,6 +10,7 @@ import {
   ColumnInj,
   IsKanbanInj,
   ReadonlyInj,
+  RowHeightInj,
   computed,
   enumColor,
   extractSdkResponseErrorMsg,
@@ -52,6 +53,8 @@ const isPublic = inject(IsPublicInj, ref(false))
 
 const isForm = inject(IsFormInj, ref(false))
 
+const rowHeight = inject(RowHeightInj, ref(undefined))
+
 const selectedIds = ref<string[]>([])
 
 const aselect = ref<typeof AntSelect>()
@@ -327,7 +330,17 @@ const selectedOpts = computed(() => {
 
 <template>
   <div class="nc-multi-select h-full w-full flex items-center" :class="{ 'read-only': readOnly }" @click="toggleMenu">
-    <div v-if="!editable && !active" class="flex flex-nowrap">
+    <div
+      v-if="!editable && !active"
+      class="flex flex-wrap"
+      :style="{
+        'display': '-webkit-box',
+        'max-width': '100%',
+        '-webkit-line-clamp': rowHeight || 1,
+        '-webkit-box-orient': 'vertical',
+        'overflow': 'hidden',
+      }"
+    >
       <template v-for="selectedOpt of selectedOpts" :key="selectedOpt.value">
         <a-tag class="rounded-tag" :color="selectedOpt.color" :style="{ order: selectedOpt.index }">
           <span

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

@@ -326,7 +326,7 @@ const selectedOpt = computed(() => {
 }
 
 :deep(.ant-tag) {
-  @apply "rounded-tag";
+  @apply "rounded-tag" my-[2px];
 }
 
 :deep(.ant-select-clear) {

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

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { VNodeRef } from '@vue/runtime-core'
-import { EditModeInj, IsExpandedFormOpenInj, ReadonlyInj, inject, ref, useVModel } from '#imports'
+import { EditModeInj, IsExpandedFormOpenInj, ReadonlyInj, RowHeightInj, inject, ref, useVModel } from '#imports'
 
 interface Props {
   modelValue?: string | null
@@ -14,10 +14,7 @@ const { showNull } = useGlobal()
 
 const editEnabled = inject(EditModeInj)
 
-const rowHeight = inject(
-  RowHeightInj,
-  computed(() => undefined),
-)
+const rowHeight = inject(RowHeightInj, ref(undefined))
 
 const readonly = inject(ReadonlyInj, ref(false))
 

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

@@ -10,10 +10,7 @@ const emits = defineEmits(['update:modelValue'])
 
 const editEnabled = inject(EditModeInj)
 
-const rowHeight = inject(
-  RowHeightInj,
-  computed(() => undefined),
-)
+const rowHeight = inject(RowHeightInj, ref(undefined))
 
 const { showNull } = useGlobal()
 

packages/nc-gui/components/smartsheet/Grid.vue

@@ -922,7 +922,7 @@ function addEmptyRow(row?: number) {
               <template #default="{ state }">
                 <tr
                   class="nc-grid-row"
-                  :style="{ height: rowHeight ? `${rowHeight * 1.5}rem` : `1.5rem` }"
+                  :style="{ height: rowHeight ? `${rowHeight * 1.8}rem` : `1.8rem` }"
                   :data-testid="`grid-row-${rowIndex}`"
                 >
                   <td key="row-index" class="caption nc-grid-cell pl-5 pr-1" :data-testid="`cell-Id-${rowIndex}`">

packages/nc-gui/components/virtual-cell/QrCode.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useQRCode } from '@vueuse/integrations/useQRCode'
 import type QRCode from 'qrcode'
-import { RowHeightInj } from '#imports'
+import { RowHeightInj, computed, inject, ref } from '#imports'
 
 const maxNumberOfAllowedCharsForQrValue = 2000
 
@@ -22,10 +22,7 @@ const qrCodeOptions: QRCode.QRCodeToDataURLOptions = {
   },
 }
 
-const rowHeight = inject(
-  RowHeightInj,
-  computed(() => undefined),
-)
+const rowHeight = inject(RowHeightInj, ref(undefined))
 
 const qrCode = useQRCode(qrValue, {
   ...qrCodeOptions,

packages/nc-gui/components/virtual-cell/barcode/Barcode.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { ComputedRef } from 'vue'
 import JsBarcodeWrapper from './JsBarcodeWrapper.vue'
-import { RowHeightInj } from '#imports'
+import { RowHeightInj, computed, inject, ref } from '#imports'
 
 const maxNumberOfAllowedCharsForBarcodeValue = 100
 
@@ -32,10 +32,7 @@ const showBarcode = computed(() => barcodeValue?.value.length > 0 && !tooManyCha
 
 const { showEditNonEditableFieldWarning, showClearNonEditableFieldWarning } = useShowNotEditableWarning()
 
-const rowHeight = inject(
-  RowHeightInj,
-  computed(() => undefined),
-)
+const rowHeight = inject(RowHeightInj, ref(undefined))
 </script>
 
 <template>

packages/nc-gui/context/index.ts

@@ -23,7 +23,7 @@ export const IsExpandedFormOpenInj: InjectionKey<Ref<boolean>> = Symbol('is-expa
 export const CellValueInj: InjectionKey<Ref<any>> = Symbol('cell-value-injection')
 export const ActiveViewInj: InjectionKey<Ref<ViewType>> = Symbol('active-view-injection')
 export const ReadonlyInj: InjectionKey<Ref<boolean>> = Symbol('readonly-injection')
-export const RowHeightInj: InjectionKey<ComputedRef<1 | 2 | 4 | 6 | undefined>> = Symbol('row-height-injection')
+export const RowHeightInj: InjectionKey<Ref<1 | 2 | 4 | 6 | undefined>> = Symbol('row-height-injection')
 /** when bool is passed, it indicates if a loading spinner should be visible while reloading */
 export const ReloadViewDataHookInj: InjectionKey<EventHook<boolean | void>> = Symbol('reload-view-data-injection')
 export const ReloadViewMetaHookInj: InjectionKey<EventHook<boolean | void>> = Symbol('reload-view-meta-injection')

tests/playwright/tests/db/toolbarOperations.spec.ts

@@ -77,10 +77,10 @@ test.describe('Toolbar operations (GRID)', () => {
   test('row height', async () => {
     // define an array of row heights
     const rowHeight = [
-      { title: 'Short', height: '1.5rem' },
-      { title: 'Medium', height: '3rem' },
-      { title: 'Tall', height: '6rem' },
-      { title: 'Extra', height: '9rem' },
+      { title: 'Short', height: '1.8rem' },
+      { title: 'Medium', height: '3.6rem' },
+      { title: 'Tall', height: '7.2rem' },
+      { title: 'Extra', height: '10.8rem' },
     ];
 
     // close 'Team & Auth' tab

tests/playwright/tests/db/undo-redo.spec.ts

@@ -307,26 +307,26 @@ test.describe('Undo Redo', () => {
 
     const timeOut = 200;
 
-    await verifyRowHeight({ height: '1.5rem' });
+    await verifyRowHeight({ height: '1.8rem' });
 
     // set row height & verify
     await toolbar.clickRowHeight();
     await toolbar.rowHeight.click({ title: 'Tall' });
     await new Promise(resolve => setTimeout(resolve, timeOut));
-    await verifyRowHeight({ height: '6rem' });
+    await verifyRowHeight({ height: '7.2rem' });
 
     await toolbar.clickRowHeight();
     await toolbar.rowHeight.click({ title: 'Medium' });
     await new Promise(resolve => setTimeout(resolve, timeOut));
-    await verifyRowHeight({ height: '3rem' });
+    await verifyRowHeight({ height: '3.6rem' });
 
     await undo({ page });
     await new Promise(resolve => setTimeout(resolve, timeOut));
-    await verifyRowHeight({ height: '6rem' });
+    await verifyRowHeight({ height: '7.2rem' });
 
     await undo({ page });
     await new Promise(resolve => setTimeout(resolve, timeOut));
-    await verifyRowHeight({ height: '1.5rem' });
+    await verifyRowHeight({ height: '1.8rem' });
   });
 
   test('Column width', async ({ page }) => {