From 1b89dc0ee2e130d4fa407a147a76ec6ad877bcc6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Yingyi=20/=20=E9=A2=96=E9=80=B8?=
 <49649786+Zuoqiu-Yingyi@users.noreply.github.com>
Date: Tue, 5 Dec 2023 22:41:12 +0800
Subject: [PATCH] :art: Use HTML attributes `data-wrap` to set the cell
 wrapping style (#9814)

---
 app/src/assets/scss/business/_av.scss | 12 ++++++++++++
 app/src/protyle/render/av/col.ts      |  4 ++--
 app/src/protyle/render/av/render.ts   | 10 ++++------
 3 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/app/src/assets/scss/business/_av.scss b/app/src/assets/scss/business/_av.scss
index c5f66eca3..e439bde22 100644
--- a/app/src/assets/scss/business/_av.scss
+++ b/app/src/assets/scss/business/_av.scss
@@ -95,6 +95,10 @@
     cursor: pointer;
   }
 
+  &__body {
+    float: left;
+  }
+
   &__row {
     display: flex;
     border-bottom: 1px solid var(--b3-theme-surface-lighter);
@@ -244,6 +248,14 @@
       top: 5.5px;
     }
 
+    &[data-wrap="true"] {
+      white-space: pre-wrap;
+    }
+
+    &[data-wrap="false"] {
+      white-space: nowrap;
+    }
+
     &.dragover__right {
       border-right-color: var(--b3-theme-primary-lighter);
     }
diff --git a/app/src/protyle/render/av/col.ts b/app/src/protyle/render/av/col.ts
index ff5d6cffc..9003d00db 100644
--- a/app/src/protyle/render/av/col.ts
+++ b/app/src/protyle/render/av/col.ts
@@ -386,7 +386,7 @@ export const addAttrViewColAnimation = (options: {
         }
         let html = "";
         if (index === 0) {
-            html = `<div class="av__cell" data-icon="${options.icon || ""}" data-col-id="${options.id}" data-dtype="${options.type}" style="width: 200px;white-space: nowrap;">
+            html = `<div class="av__cell" data-icon="${options.icon || ""}" data-col-id="${options.id}" data-dtype="${options.type}" data-wrap="false" style="width: 200px;">
     <div draggable="true" class="av__cellheader">
         ${options.icon ? unicode2Emoji(options.icon, "av__cellheadericon", true) : `<svg class="av__cellheadericon"><use xlink:href="#${getColIconByType(options.type)}"></use></svg>`}
         <span class="av__celltext">${options.name}</span>
@@ -642,7 +642,7 @@ export const showColMenu = (protyle: IProtyle, blockElement: Element, cellElemen
     }
     menu.addItem({
         label: `<label class="fn__flex" style="margin: 4px 0"><span>${window.siyuan.languages.wrap}</span><span class="fn__space fn__flex-1"></span>
-<input type="checkbox" class="b3-switch fn__flex-center"${cellElement.style.whiteSpace === "nowrap" ? "" : " checked"}></label>`,
+<input type="checkbox" class="b3-switch fn__flex-center"${cellElement.dataset.wrap === "true" ? " checked" : ""}></label>`,
         bind(element) {
             const inputElement = element.querySelector("input") as HTMLInputElement;
             inputElement.addEventListener("change", () => {
diff --git a/app/src/protyle/render/av/render.ts b/app/src/protyle/render/av/render.ts
index 4a51a3adc..351a7ce26 100644
--- a/app/src/protyle/render/av/render.ts
+++ b/app/src/protyle/render/av/render.ts
@@ -93,9 +93,8 @@ export const avRender = (element: Element, protyle: IProtyle, cb?: () => void, v
                         return;
                     }
                     tableHTML += `<div class="av__cell" data-col-id="${column.id}" 
-data-icon="${column.icon}" data-dtype="${column.type}"  data-pin="${column.pin}" 
-style="width: ${column.width || "200px"};
-${column.wrap ? "" : "white-space: nowrap;"}">
+data-icon="${column.icon}" data-dtype="${column.type}" data-wrap="${column.wrap}" data-pin="${column.pin}" 
+style="width: ${column.width || "200px"};">
     <div draggable="true" class="av__cellheader">
         ${column.icon ? unicode2Emoji(column.icon, "av__cellheadericon", true) : `<svg class="av__cellheadericon"><use xlink:href="#${getColIconByType(column.type)}"></use></svg>`}
         <span class="av__celltext">${column.name}</span>
@@ -192,11 +191,10 @@ style="width: ${column.width || "200px"}">${getCalcValue(column) || '<svg><use x
                             text += `<span ${cell.valueType !== "number" ? "" : 'style="right:auto;left:5px"'} data-type="copy" class="block__icon"><svg><use xlink:href="#iconCopy"></use></svg></span>`;
                         }
                         tableHTML += `<div class="av__cell" data-id="${cell.id}" data-col-id="${data.columns[index].id}"
-${cell.valueType === "block" ? 'data-block-id="' + (cell.value.block.id || "") + '"' : ""}  
+${cell.valueType === "block" ? 'data-block-id="' + (cell.value.block.id || "") + '"' : ""} data-wrap="${data.columns[index].wrap}" 
 ${cell.value?.isDetached ? ' data-detached="true"' : ""} 
 style="width: ${data.columns[index].width || "200px"};
 ${cell.bgColor ? `background-color:${cell.bgColor};` : ""}
-white-space: ${data.columns[index].wrap ? "pre-wrap" : "nowrap"};
 ${cell.color ? `color:${cell.color};` : ""}">${text}</div>`;
 
                         if (pinIndex === index) {
@@ -248,7 +246,7 @@ ${cell.color ? `color:${cell.color};` : ""}">${text}</div>`;
         <div class="av__counter fn__none"></div>
     </div>
     <div class="av__scroll">
-        <div style="float: left;">
+        <div class="av__body">
             ${tableHTML}
             <div class="av__row--add">
                 <div class="av__colsticky">