From cce77eb712796f4deec631b62553f43aba1ac238 Mon Sep 17 00:00:00 2001
From: Vanessa <lly219@gmail.com>
Date: Mon, 18 Nov 2024 15:21:23 +0800
Subject: [PATCH] :art: https://github.com/siyuan-note/siyuan/issues/11053

---
 app/src/protyle/render/av/col.ts | 58 +++++++++++++++++++++++++++++---
 1 file changed, 54 insertions(+), 4 deletions(-)

diff --git a/app/src/protyle/render/av/col.ts b/app/src/protyle/render/av/col.ts
index 14bece66c..f46dd2d51 100644
--- a/app/src/protyle/render/av/col.ts
+++ b/app/src/protyle/render/av/col.ts
@@ -15,7 +15,7 @@ import * as dayjs from "dayjs";
 import {setPosition} from "../../../util/setPosition";
 import {duplicateNameAddOne} from "../../../util/functions";
 import {Dialog} from "../../../dialog";
-import {escapeAttr} from "../../../util/escape";
+import {escapeAriaLabel, escapeAttr} from "../../../util/escape";
 
 export const duplicateCol = (options: {
     protyle: IProtyle,
@@ -88,8 +88,20 @@ export const getEditHTML = (options: {
 </button>
 <button class="b3-menu__separator"></button>
 <button class="b3-menu__item" data-type="nobg">
-    <span class="b3-menu__avemoji" data-col-type="${colData.type}" data-icon="${colData.icon}" data-type="update-icon">${colData.icon ? unicode2Emoji(colData.icon) : `<svg style="width: 14px;height: 14px"><use xlink:href="#${getColIconByType(colData.type)}"></use></svg>`}</span>
-    <input data-type="name" class="b3-text-field fn__block" type="text" value="${colData.name}" style="margin: 4px 0">
+    <div>
+        <div class="fn__flex">
+            <span class="b3-menu__avemoji" data-col-type="${colData.type}" data-icon="${colData.icon}" data-type="update-icon">${colData.icon ? unicode2Emoji(colData.icon) : `<svg style="width: 14px;height: 14px"><use xlink:href="#${getColIconByType(colData.type)}"></use></svg>`}</span>
+            <div class="b3-form__icona fn__size200">
+                <input data-type="name" class="b3-text-field b3-form__icona-input" type="text" value="${colData.name}">
+                <svg data-position="top" class="b3-form__icona-icon ariaLabel" aria-label="${colData.desc ? escapeAriaLabel(colData.desc) : window.siyuan.languages.addDesc}"><use xlink:href="#iconInfo"></use></svg>
+            </div>
+        </div>
+        <div class="fn__none">
+            <div class="fn__hr--small"></div>
+            <textarea style="margin-left: 22px" rows="1" data-type="desc" class="b3-text-field fn__size200" type="text" data-value="${escapeAttr(colData.desc)}">${colData.desc}</textarea>
+            <div class="fn__hr--small"></div>
+        </div>
+    </div>
 </button>
 <button class="b3-menu__item" data-type="goUpdateColType" ${colData.type === "block" ? "disabled" : ""}>
     <span class="b3-menu__label">${window.siyuan.languages.type}</span>
@@ -264,6 +276,44 @@ export const bindEditEvent = (options: {
         }
     });
     nameElement.select();
+    const descElement = options.menuElement.querySelector('.b3-text-field[data-type="desc"]') as HTMLTextAreaElement;
+    nameElement.nextElementSibling.addEventListener("click", () => {
+        const descPanelElement = descElement.parentElement
+        descPanelElement.classList.toggle("fn__none");
+        if (!descPanelElement.classList.contains("fn__none")) {
+            descElement.focus();
+        }
+    })
+    descElement.addEventListener("blur", () => {
+        const newValue = descElement.value;
+        if (newValue === colData.desc) {
+            return;
+        }
+        transaction(options.protyle, [{
+            action: "setAttrViewColDesc",
+            id: colId,
+            avID,
+            data: newValue,
+        }], [{
+            action: "setAttrViewColDesc",
+            id: colId,
+            avID,
+            data: colData.desc,
+        }]);
+        colData.desc = newValue;
+    });
+    descElement.addEventListener("keydown", (event: KeyboardEvent) => {
+        if (event.isComposing) {
+            return;
+        }
+        if (event.key === "Escape") {
+            options.menuElement.parentElement.remove();
+        } else if (event.key === "Enter") {
+            descElement.dispatchEvent(new CustomEvent("blur"));
+            options.menuElement.parentElement.remove();
+        }
+    });
+
     const tplElement = options.menuElement.querySelector('[data-type="updateTemplate"]') as HTMLTextAreaElement;
     if (tplElement) {
         tplElement.addEventListener("blur", () => {
@@ -620,7 +670,7 @@ export const showColMenu = (protyle: IProtyle, blockElement: Element, cellElemen
         <span class="b3-menu__avemoji">${cellElement.dataset.icon ? unicode2Emoji(cellElement.dataset.icon) : `<svg style="height: 14px;width: 14px;"><use xlink:href="#${getColIconByType(type)}"></use></svg>`}</span>
         <div class="b3-form__icona fn__size200">
             <input class="b3-text-field b3-form__icona-input" type="text" value="${oldValue}">
-            <svg data-position="top" class="b3-form__icona-icon ariaLabel" aria-label="${oldDesc ? oldDesc : window.siyuan.languages.addDesc}"><use xlink:href="#iconInfo"></use></svg>
+            <svg data-position="top" class="b3-form__icona-icon ariaLabel" aria-label="${oldDesc ? escapeAriaLabel(oldDesc) : window.siyuan.languages.addDesc}"><use xlink:href="#iconInfo"></use></svg>
         </div>
     </div>
     <div class="fn__none">