From 2b65d2af2242959d6759592b5774c6509d0f0d30 Mon Sep 17 00:00:00 2001
From: Vanessa <lly219@gmail.com>
Date: Sun, 7 Apr 2024 11:25:52 +0800
Subject: [PATCH] :art: https://github.com/siyuan-note/siyuan/issues/10882

---
 app/src/protyle/render/av/col.ts           | 39 +++++++++++++++++++---
 app/src/protyle/render/av/openMenuPanel.ts | 10 +++---
 app/src/protyle/render/av/select.ts        |  7 ++--
 3 files changed, 43 insertions(+), 13 deletions(-)

diff --git a/app/src/protyle/render/av/col.ts b/app/src/protyle/render/av/col.ts
index d883b7e37..e3ef7f864 100644
--- a/app/src/protyle/render/av/col.ts
+++ b/app/src/protyle/render/av/col.ts
@@ -201,7 +201,7 @@ export const getEditHTML = (options: {
 </label>`;
     }
     if (colData.type !== "block") {
-        html += ` <button class="b3-menu__separator"></button>
+        html += `<button class="b3-menu__separator"></button>
 <button class="b3-menu__item" data-type="${colData.hidden ? "showCol" : "hideCol"}">
     <svg class="b3-menu__icon" style=""><use xlink:href="#icon${colData.hidden ? "Eye" : "Eyeoff"}"></use></svg>
     <span class="b3-menu__label">${colData.hidden ? window.siyuan.languages.showCol : window.siyuan.languages.hideCol}</span>
@@ -215,7 +215,15 @@ export const getEditHTML = (options: {
     <span class="b3-menu__label">${window.siyuan.languages.delete}</span>
 </button>`
     }
-    return `<div class="b3-menu__items">${html}</div>
+    return `<div class="b3-menu__items">
+    ${html}
+    <button class="b3-menu__separator"></button>
+    <label class="b3-menu__item">
+        <span class="fn__flex-center">${window.siyuan.languages.wrap}</span>
+        <span class="fn__space fn__flex-1"></span>
+        <input data-type="wrap" type="checkbox" class="b3-switch b3-switch--menu" ${colData.wrap ? " checked" : ""}>
+    </label>
+</div>
 <div class="b3-menu__items fn__none">
     <button class="b3-menu__item" data-type="nobg" data-col-id="${colData.id}">
         <span class="block__icon" style="padding: 8px;margin-left: -4px;" data-type="goEditCol">
@@ -245,6 +253,7 @@ export const getEditHTML = (options: {
 export const bindEditEvent = (options: {
     protyle: IProtyle,
     data: IAV,
+    blockID: string,
     menuElement: HTMLElement,
     isCustomAttr: boolean
 }) => {
@@ -320,6 +329,24 @@ export const bindEditEvent = (options: {
         });
     }
 
+    const wrapElement = options.menuElement.querySelector('.b3-switch[data-type="wrap"]') as HTMLInputElement;
+    if (wrapElement) {
+        wrapElement.addEventListener("change", () => {
+            transaction(options.protyle, [{
+                action: "setAttrViewColWrap",
+                id: colId,
+                avID,
+                data: wrapElement.checked,
+                blockID: options.blockID
+            }], [{
+                action: "setAttrViewColWrap",
+                id: colId,
+                avID,
+                data: !wrapElement.checked,
+                blockID: options.blockID
+            }]);
+        })
+    }
     const addOptionElement = options.menuElement.querySelector('[data-type="addOption"]') as HTMLInputElement;
     if (addOptionElement) {
         addOptionElement.addEventListener("keydown", (event: KeyboardEvent) => {
@@ -365,12 +392,14 @@ export const bindEditEvent = (options: {
                     protyle: options.protyle,
                     menuElement: options.menuElement,
                     data: options.data,
-                    isCustomAttr: options.isCustomAttr
+                    isCustomAttr: options.isCustomAttr,
+                    blockID: options.blockID
                 });
                 (options.menuElement.querySelector('[data-type="addOption"]') as HTMLInputElement).focus();
             }
         });
     }
+
     const fillCreatedElement = options.menuElement.querySelector('[data-type="fillCreated"]') as HTMLInputElement;
     if (fillCreatedElement) {
         fillCreatedElement.addEventListener("change", () => {
@@ -840,8 +869,8 @@ export const showColMenu = (protyle: IProtyle, blockElement: Element, cellElemen
         menu.addSeparator();
     }
     menu.addItem({
-        label: `<label class="fn__flex" style="margin: 4px 0;padding-right: 6px"><span>${window.siyuan.languages.wrap}</span><span class="fn__space fn__flex-1"></span>
-<input type="checkbox" class="b3-switch fn__flex-center"${cellElement.dataset.wrap === "true" ? " checked" : ""}></label>`,
+        label: `<label class="fn__flex"><span class="fn__flex-center">${window.siyuan.languages.wrap}</span><span class="fn__space fn__flex-1"></span>
+<input type="checkbox" class="b3-switch b3-switch--menu"${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/openMenuPanel.ts b/app/src/protyle/render/av/openMenuPanel.ts
index ba9dee329..6f1c48032 100644
--- a/app/src/protyle/render/av/openMenuPanel.ts
+++ b/app/src/protyle/render/av/openMenuPanel.ts
@@ -162,7 +162,7 @@ export const openMenuPanel = (options: {
             if (options.type === "sorts") {
                 bindSortsEvent(options.protyle, menuElement, data, blockID);
             } else if (options.type === "edit") {
-                bindEditEvent({protyle: options.protyle, data, menuElement, isCustomAttr});
+                bindEditEvent({protyle: options.protyle, data, menuElement, isCustomAttr, blockID});
             } else if (options.type === "config") {
                 bindViewEvent({protyle: options.protyle, data, menuElement, blockElement: options.blockElement});
             }
@@ -358,7 +358,7 @@ export const openMenuPanel = (options: {
                         colId,
                         isCustomAttr
                     });
-                    bindEditEvent({protyle: options.protyle, data, menuElement, isCustomAttr});
+                    bindEditEvent({protyle: options.protyle, data, menuElement, isCustomAttr, blockID});
                 }
                 return;
             }
@@ -823,7 +823,7 @@ export const openMenuPanel = (options: {
                         colId: target.dataset.id,
                         isCustomAttr
                     });
-                    bindEditEvent({protyle: options.protyle, data, menuElement, isCustomAttr});
+                    bindEditEvent({protyle: options.protyle, data, menuElement, isCustomAttr, blockID});
                     setPosition(menuElement, tabRect.right - menuElement.clientWidth, tabRect.bottom, tabRect.height);
                     event.preventDefault();
                     event.stopPropagation();
@@ -940,7 +940,7 @@ export const openMenuPanel = (options: {
                             colId,
                             isCustomAttr
                         });
-                        bindEditEvent({protyle: options.protyle, data, menuElement, isCustomAttr});
+                        bindEditEvent({protyle: options.protyle, data, menuElement, isCustomAttr, blockID});
                     } else {
                         menuElement.innerHTML = getPropertiesHTML(data.view);
                     }
@@ -972,7 +972,7 @@ export const openMenuPanel = (options: {
                             colId,
                             isCustomAttr
                         });
-                        bindEditEvent({protyle: options.protyle, data, menuElement, isCustomAttr});
+                        bindEditEvent({protyle: options.protyle, data, menuElement, isCustomAttr, blockID});
                     } else {
                         menuElement.innerHTML = getPropertiesHTML(data.view);
                     }
diff --git a/app/src/protyle/render/av/select.ts b/app/src/protyle/render/av/select.ts
index c4ca82982..7742fa8ca 100644
--- a/app/src/protyle/render/av/select.ts
+++ b/app/src/protyle/render/av/select.ts
@@ -135,6 +135,7 @@ export const setColOption = (protyle: IProtyle, data: IAV, target: HTMLElement,
     if (!menuElement) {
         return;
     }
+    const blockID = blockElement.getAttribute("data-node-id");
     const colId = cellElements ? cellElements[0].dataset.colId : menuElement.querySelector(".b3-menu__item").getAttribute("data-col-id");
     let name = target.parentElement.dataset.name;
     let color = target.parentElement.dataset.color;
@@ -189,7 +190,7 @@ export const setColOption = (protyle: IProtyle, data: IAV, target: HTMLElement,
         });
         if (!cellElements) {
             menuElement.innerHTML = getEditHTML({protyle, data, colId, isCustomAttr});
-            bindEditEvent({protyle, data, menuElement, isCustomAttr});
+            bindEditEvent({protyle, data, menuElement, isCustomAttr, blockID});
         } else {
             cellElements.forEach((cellElement: HTMLMediaElement) => {
                 data.view.rows.find(row => {
@@ -267,7 +268,7 @@ export const setColOption = (protyle: IProtyle, data: IAV, target: HTMLElement,
                 });
                 if (!cellElements) {
                     menuElement.innerHTML = getEditHTML({protyle, data, colId, isCustomAttr});
-                    bindEditEvent({protyle, data, menuElement, isCustomAttr});
+                    bindEditEvent({protyle, data, menuElement, isCustomAttr, blockID});
                 } else {
                     cellElements.forEach((cellElement: HTMLElement) => {
                         data.view.rows.find(row => {
@@ -346,7 +347,7 @@ export const setColOption = (protyle: IProtyle, data: IAV, target: HTMLElement,
                 });
                 if (!cellElements) {
                     menuElement.innerHTML = getEditHTML({protyle, data, colId, isCustomAttr});
-                    bindEditEvent({protyle, data, menuElement, isCustomAttr});
+                    bindEditEvent({protyle, data, menuElement, isCustomAttr, blockID});
                 } else {
                     cellElements.forEach((cellElement: HTMLElement) => {
                         data.view.rows.find(row => {