fix: the contents inside pre tag will not be wrapped (tiny-craft#263)

fansenhua · Jun 28, 2024 · e2093a8 · e2093a8
1 parent 908d4c7
commit e2093a8
Show file tree

Hide file tree

Showing 6 changed files with 9 additions and 5 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -177,6 +177,10 @@ body {
     animation: rotate 2s linear infinite;
 }
 
+.pre-wrap {
+    white-space: pre-wrap;
+}
+
 @keyframes rotate {
     100% {
         transform: rotate(360deg);