From e2093a89bf3400d4b5fb71915bda44c5c43f89b8 Mon Sep 17 00:00:00 2001
From: Lykin <137850705+tiny-craft@users.noreply.github.com>
Date: Fri, 28 Jun 2024 16:23:51 +0800
Subject: [PATCH] fix: the contents inside `pre` tag will not be wrapped (#263)

---
 frontend/src/components/content_value/ContentValueHash.vue   | 2 +-
 frontend/src/components/content_value/ContentValueList.vue   | 2 +-
 frontend/src/components/content_value/ContentValueSet.vue    | 2 +-
 frontend/src/components/content_value/ContentValueStream.vue | 2 +-
 frontend/src/components/content_value/ContentValueZSet.vue   | 2 +-
 frontend/src/styles/style.scss                               | 4 ++++
 6 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/content_value/ContentValueHash.vue b/frontend/src/components/content_value/ContentValueHash.vue
index dad78f9..7d815bf 100644
--- a/frontend/src/components/content_value/ContentValueHash.vue
+++ b/frontend/src/components/content_value/ContentValueHash.vue
@@ -136,7 +136,7 @@ const valueColumn = computed(() => ({
     // },
     render: (row) => {
         if (isCode.value) {
-            return h('pre', {}, row.dv || row.v)
+            return h('pre', { class: 'pre-wrap' }, row.dv || row.v)
         }
         if (row.rm === true) {
             return h('s', {}, row.dv || row.v)
diff --git a/frontend/src/components/content_value/ContentValueList.vue b/frontend/src/components/content_value/ContentValueList.vue
index 91acbdd..93e2f38 100644
--- a/frontend/src/components/content_value/ContentValueList.vue
+++ b/frontend/src/components/content_value/ContentValueList.vue
@@ -108,7 +108,7 @@ const valueColumn = computed(() => ({
     },
     render: (row) => {
         if (isCode.value) {
-            return h('pre', {}, row.dv || row.v)
+            return h('pre', { class: 'pre-wrap' }, row.dv || row.v)
         }
         return row.dv || row.v
     },
diff --git a/frontend/src/components/content_value/ContentValueSet.vue b/frontend/src/components/content_value/ContentValueSet.vue
index 3cefce7..7d5d289 100644
--- a/frontend/src/components/content_value/ContentValueSet.vue
+++ b/frontend/src/components/content_value/ContentValueSet.vue
@@ -107,7 +107,7 @@ const valueColumn = computed(() => ({
     },
     render: (row) => {
         if (isCode.value) {
-            return h('pre', {}, row.dv || row.v)
+            return h('pre', { class: 'pre-wrap' }, row.dv || row.v)
         }
         return row.dv || row.v
     },
diff --git a/frontend/src/components/content_value/ContentValueStream.vue b/frontend/src/components/content_value/ContentValueStream.vue
index 9e1e3ba..53d78ac 100644
--- a/frontend/src/components/content_value/ContentValueStream.vue
+++ b/frontend/src/components/content_value/ContentValueStream.vue
@@ -93,7 +93,7 @@ const valueColumn = computed(() => ({
     },
     // sorter: (row1, row2) => row1.value - row2.value,
     render: (row) => {
-        return h('pre', {}, row.dv)
+        return h('pre', { class: 'pre-wrap' }, row.dv)
     },
 }))
 const actionColumn = {
diff --git a/frontend/src/components/content_value/ContentValueZSet.vue b/frontend/src/components/content_value/ContentValueZSet.vue
index 1c8ee86..6aec6db 100644
--- a/frontend/src/components/content_value/ContentValueZSet.vue
+++ b/frontend/src/components/content_value/ContentValueZSet.vue
@@ -157,7 +157,7 @@ const valueColumn = computed(() => ({
     // sorter: (row1, row2) => row1.value - row2.value,
     render: (row) => {
         if (isCode.value) {
-            return h('pre', {}, row.dv || row.v)
+            return h('pre', { class: 'pre-wrap' }, row.dv || row.v)
         }
         return row.dv || row.v
     },
diff --git a/frontend/src/styles/style.scss b/frontend/src/styles/style.scss
index 5ce4d9d..3f0bcc2 100644
--- a/frontend/src/styles/style.scss
+++ b/frontend/src/styles/style.scss
@@ -177,6 +177,10 @@ body {
     animation: rotate 2s linear infinite;
 }
 
+.pre-wrap {
+    white-space: pre-wrap;
+}
+
 @keyframes rotate {
     100% {
         transform: rotate(360deg);