diff --git a/packages/nc-gui/components/cell/RichText.vue b/packages/nc-gui/components/cell/RichText.vue
index de8ea395f7..3a4d7051de 100644
--- a/packages/nc-gui/components/cell/RichText.vue
+++ b/packages/nc-gui/components/cell/RichText.vue
@@ -8,6 +8,7 @@ import { generateJSON } from '@tiptap/html'
import Underline from '@tiptap/extension-underline'
import { TaskItem } from '@/helpers/dbTiptapExtensions/task-item'
import { Link } from '@/helpers/dbTiptapExtensions/links'
+import { RowHeightInj, IsExpandedFormOpenInj } from '#imports'
const props = defineProps<{
value?: string | null
@@ -21,6 +22,8 @@ const emits = defineEmits(['update:value'])
const isExpandedFormOpen = inject(IsExpandedFormOpenInj, ref(false))!
+const rowHeight = inject(RowHeightInj, ref(1 as const))
+
const turndownService = new TurndownService({})
turndownService.addRule('lineBreak', {
@@ -169,6 +172,7 @@ watch(editorDom, () => {
: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,
}"
tabindex="0"
>
@@ -180,11 +184,13 @@ watch(editorDom, () => {
@@ -207,16 +213,31 @@ watch(editorDom, () => {
@apply !border-transparent max-h-full;
min-height: 8rem;
}
+ &.readonly {
+ .nc-textarea-rich-editor {
+ .ProseMirror {
+ resize: none;
+ white-space: pre-line;
+ }
+ }
+ }
}
.nc-rich-text-full {
@apply px-1.75;
.ProseMirror {
- @apply !p-2;
-
+ @apply !p-2 h-[215px];
+ overflow-y: auto;
+ overflow-x: hidden;
+ scrollbar-width: thin !important;
max-height: min(794px, calc(100vh - 170px));
min-height: 215px;
}
+ &.readonly {
+ .ProseMirror {
+ @apply bg-gray-50;
+ }
+ }
}
.nc-textarea-rich-editor {
@@ -333,12 +354,4 @@ watch(editorDom, () => {
height: fit-content;
}
}
-
-.nc-rich-text-full {
- .ProseMirror {
- overflow-y: auto;
- overflow-x: hidden;
- scrollbar-width: thin !important;
- }
-}
diff --git a/packages/nc-gui/components/cell/TextArea.vue b/packages/nc-gui/components/cell/TextArea.vue
index 384039e1cf..c0dd0165a7 100644
--- a/packages/nc-gui/components/cell/TextArea.vue
+++ b/packages/nc-gui/components/cell/TextArea.vue
@@ -210,10 +210,10 @@ watch(inputWrapperRef, () => {
>
{
minHeight: `${height}px`,
}"
:placeholder="isEditColumn ? $t('labels.optional') : ''"
+ :disabled="readOnly"
@blur="editEnabled = false"
@keydown.alt.enter.stop
@keydown.shift.enter.stop
@@ -315,7 +316,7 @@ watch(inputWrapperRef, () => {
{
@apply !hidden;
}
}
+ .long-text-wrapper {
+ @apply select-none pointer-events-none;
+ .nc-readonly-rich-text-wrapper {
+ @apply !min-h-6 !max-h-6;
+ }
+ .nc-rich-text-embed {
+ .ProseMirror {
+ @apply !overflow-hidden line-clamp-1;
+ }
+ }
+ }
}