From 1350e1ab1ea1639d51262e6c5e3545875765a935 Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Sun, 22 Jan 2023 16:14:34 +0300
Subject: [PATCH] feat: visual distinction between NULL and empty string

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 packages/nc-gui/components/cell/Text.vue     | 2 ++
 packages/nc-gui/components/cell/TextArea.vue | 2 ++
 2 files changed, 4 insertions(+)

diff --git a/packages/nc-gui/components/cell/Text.vue b/packages/nc-gui/components/cell/Text.vue
index 7e0ad4279c..f1d1b1b33a 100644
--- a/packages/nc-gui/components/cell/Text.vue
+++ b/packages/nc-gui/components/cell/Text.vue
@@ -38,5 +38,7 @@ const focus: VNodeRef = (el) => {
     @mousedown.stop
   />
 
+  <span v-else-if="vModel === null" class="text-gray-300 italic">NULL</span>
+
   <LazyCellClampedText v-else :value="vModel" :lines="1" />
 </template>
diff --git a/packages/nc-gui/components/cell/TextArea.vue b/packages/nc-gui/components/cell/TextArea.vue
index ad2fd14546..254a0d7044 100644
--- a/packages/nc-gui/components/cell/TextArea.vue
+++ b/packages/nc-gui/components/cell/TextArea.vue
@@ -55,6 +55,8 @@ const rowHeight = computed(() => {
     @mousedown.stop
   />
 
+  <span v-else-if="vModel === null" class="text-gray-300 italic">NULL</span>
+
   <LazyCellClampedText v-else-if="rowHeight" :value="vModel" :lines="rowHeight" />
 
   <span v-else>{{ vModel }}</span>