From 3738657755f8adcf44ccbd272f2d8006db1022a5 Mon Sep 17 00:00:00 2001
From: Vanessa <lly219@gmail.com>
Date: Tue, 19 Nov 2024 00:29:41 +0800
Subject: [PATCH] :art: https://github.com/siyuan-note/siyuan/issues/11053

---
 app/src/protyle/render/av/col.ts    | 34 +++++++++++++++++------------
 app/src/protyle/render/av/select.ts | 19 ++++++++--------
 app/src/protyle/render/av/view.ts   | 13 ++++++-----
 3 files changed, 38 insertions(+), 28 deletions(-)

diff --git a/app/src/protyle/render/av/col.ts b/app/src/protyle/render/av/col.ts
index 1225863dc..dd739ac21 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 {escapeAriaLabel, escapeAttr} from "../../../util/escape";
+import {escapeAriaLabel, escapeAttr, escapeHtml} from "../../../util/escape";
 
 export const duplicateCol = (options: {
     protyle: IProtyle,
@@ -88,19 +88,19 @@ export const getEditHTML = (options: {
 </button>
 <button class="b3-menu__separator"></button>
 <button class="b3-menu__item" data-type="nobg">
-    <div>
+    <div class="fn__block">
         <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">
+            <div class="b3-form__icona fn__block">
                 <input data-type="name" class="b3-text-field b3-form__icona-input" type="text">
                 <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 class="fn__hr"></div>
+            <textarea style="margin-left: 22px;width: calc(100% - 22px);" rows="1" data-type="desc" class="b3-text-field fn__size200" type="text" data-value="${escapeAttr(colData.desc)}">${colData.desc}</textarea>
         </div>
+        <div class="fn__hr--small"></div>
     </div>
 </button>
 <button class="b3-menu__item" data-type="goUpdateColType" ${colData.type === "block" ? "disabled" : ""}>
@@ -120,11 +120,11 @@ export const getEditHTML = (options: {
             colData.options = [];
         }
         colData.options.forEach(item => {
-            html += `<button class="b3-menu__item${html ? "" : " b3-menu__item--current"}" draggable="true" data-name="${item.name}" data-color="${item.color}">
+            html += `<button class="b3-menu__item${html ? "" : " b3-menu__item--current"}" draggable="true" data-name="${escapeAttr(item.name)}" data-desc="${escapeAttr(item.desc)}" data-color="${item.color}">
     <svg class="b3-menu__icon fn__grab"><use xlink:href="#iconDrag"></use></svg>
     <div class="fn__flex-1">
-        <span class="b3-chip" style="background-color:var(--b3-font-background${item.color});color:var(--b3-font-color${item.color})">
-            <span class="fn__ellipsis">${item.name}</span>
+        <span class="b3-chip ariaLabel" data-position="2parentW" aria-label="${escapeAriaLabel(item.name)}<div class='ft__on-surface'>${escapeAriaLabel(item.desc)}</div>" style="background-color:var(--b3-font-background${item.color});color:var(--b3-font-color${item.color})">
+            <span class="fn__ellipsis">${escapeHtml(item.name)}</span>
         </span>
     </div>
     <svg class="b3-menu__action" data-type="setColOption"><use xlink:href="#iconEdit"></use></svg>
@@ -314,7 +314,9 @@ export const bindEditEvent = (options: {
             options.menuElement.parentElement.remove();
         }
     });
-
+    descElement.addEventListener("input", () => {
+        nameElement.nextElementSibling.setAttribute("aria-label", descElement.value ? escapeHtml(descElement.value) : window.siyuan.languages.addDesc);
+    });
     const tplElement = options.menuElement.querySelector('[data-type="updateTemplate"]') as HTMLTextAreaElement;
     if (tplElement) {
         tplElement.addEventListener("blur", () => {
@@ -666,18 +668,19 @@ export const showColMenu = (protyle: IProtyle, blockElement: Element, cellElemen
     menu.addItem({
         iconHTML: '',
         type: "readonly",
-        label: `<div>
+        label: `<div class="fn__block">
     <div class="fn__flex">
         <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">
+        <div class="b3-form__icona fn__block">
             <input class="b3-text-field b3-form__icona-input" type="text">
             <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">
-        <div class="fn__hr--small"></div>
-        <textarea style="margin-left: 22px" rows="1" class="b3-text-field fn__size200" type="text" data-value="${escapeAttr(oldDesc)}">${oldDesc}</textarea>
+        <div class="fn__hr"></div>
+        <textarea style="margin-left: 22px;width: calc(100% - 22px);" rows="1" class="b3-text-field fn__size200" type="text" data-value="${escapeAttr(oldDesc)}">${oldDesc}</textarea>
     </div>
+    <div class="fn__hr--small"></div>
 </div>`,
         bind(element) {
             const iconElement = element.querySelector(".b3-menu__avemoji") as HTMLElement;
@@ -734,6 +737,9 @@ export const showColMenu = (protyle: IProtyle, blockElement: Element, cellElemen
                     event.preventDefault();
                 }
             });
+            descElement.addEventListener("input", () => {
+                inputElement.nextElementSibling.setAttribute("aria-label", descElement.value ? escapeHtml(descElement.value) : window.siyuan.languages.addDesc);
+            });
         }
     });
     menu.addItem({
diff --git a/app/src/protyle/render/av/select.ts b/app/src/protyle/render/av/select.ts
index f20ee55b5..7ac352d61 100644
--- a/app/src/protyle/render/av/select.ts
+++ b/app/src/protyle/render/av/select.ts
@@ -31,7 +31,7 @@ const filterSelectHTML = (key: string, options: {
                 html += `<button data-type="addColOptionOrCell" class="b3-menu__item" data-name="${escapeAttr(item.name)}" data-desc="${escapeAttr(item.desc || "")}" draggable="true" data-color="${item.color}">
     <svg class="b3-menu__icon fn__grab"><use xlink:href="#iconDrag"></use></svg>
     <div class="fn__flex-1">
-        <span class="b3-chip ariaLabel" data-position="2parentW" aria-label="${escapeAriaLabel(item.name)}<div class='ft__on-surface'>${escapeAriaLabel(item.desc)}</div>" style="background-color:var(--b3-font-background${item.color});color:var(--b3-font-color${item.color})">
+        <span class="b3-chip ariaLabel" data-position="2parentW" aria-label="${escapeAriaLabel(item.name)}<div class='ft__on-surface'>${escapeAriaLabel(item.desc || "")}</div>" style="background-color:var(--b3-font-background${item.color});color:var(--b3-font-color${item.color})">
             <span class="fn__ellipsis">${escapeHtml(item.name)}</span>
         </span>
     </div>
@@ -211,16 +211,15 @@ export const setColOption = (protyle: IProtyle, data: IAV, target: HTMLElement,
         iconHTML: "",
         type: "readonly",
         label: `<div>
-    <div class="fn__flex">
-        <div class="b3-form__icona fn__size200">
-            <input class="b3-text-field b3-form__icona-input" type="text">
-            <svg data-position="top" class="b3-form__icona-icon ariaLabel" aria-label="${desc ? escapeAriaLabel(desc) : window.siyuan.languages.addDesc}"><use xlink:href="#iconInfo"></use></svg>
-        </div>
+    <div class="b3-form__icona fn__block">
+        <input class="b3-text-field b3-form__icona-input" type="text">
+        <svg data-position="top" class="b3-form__icona-icon ariaLabel" aria-label="${desc ? escapeAriaLabel(desc) : window.siyuan.languages.addDesc}"><use xlink:href="#iconInfo"></use></svg>
     </div>
     <div class="fn__none">
-        <div class="fn__hr--small"></div>
-        <textarea rows="1" class="b3-text-field fn__size200" type="text" data-value="${escapeAttr(desc)}">${desc}</textarea>
+        <div class="fn__hr"></div>
+        <textarea rows="1" class="b3-text-field fn__block" type="text" data-value="${escapeAttr(desc)}">${desc}</textarea>
     </div>
+    <div class="fn__hr--small"></div>
 </div>`,
         bind(element) {
             const inputElement = element.querySelector("input")
@@ -242,7 +241,6 @@ export const setColOption = (protyle: IProtyle, data: IAV, target: HTMLElement,
                 }
             })
             descElement.addEventListener("keydown", (event: KeyboardEvent) => {
-                inputElement.nextElementSibling.setAttribute("aria-label", descElement.value ? escapeAriaLabel(descElement.value) : window.siyuan.languages.addDesc);
                 if (event.isComposing) {
                     return;
                 }
@@ -250,6 +248,9 @@ export const setColOption = (protyle: IProtyle, data: IAV, target: HTMLElement,
                     menu.close();
                 }
             });
+            descElement.addEventListener("input", () => {
+                inputElement.nextElementSibling.setAttribute("aria-label", descElement.value ? escapeHtml(descElement.value) : window.siyuan.languages.addDesc);
+            });
         }
     });
     menu.addItem({
diff --git a/app/src/protyle/render/av/view.ts b/app/src/protyle/render/av/view.ts
index b2fc7b399..0b87c853d 100644
--- a/app/src/protyle/render/av/view.ts
+++ b/app/src/protyle/render/av/view.ts
@@ -6,7 +6,7 @@ import {focusBlock} from "../../util/selection";
 import {Constants} from "../../../constants";
 import {upDownHint} from "../../../util/upDownHint";
 import {avRender} from "./render";
-import {escapeAriaLabel, escapeAttr} from "../../../util/escape";
+import {escapeAriaLabel, escapeAttr, escapeHtml} from "../../../util/escape";
 
 export const openViewMenu = (options: { protyle: IProtyle, blockElement: HTMLElement, element: HTMLElement }) => {
     if (options.protyle.disabled) {
@@ -156,6 +156,9 @@ export const bindViewEvent = (options: {
             options.menuElement.parentElement.remove();
         }
     });
+    descElement.addEventListener("input", () => {
+        inputElement.nextElementSibling.setAttribute("aria-label", descElement.value ? escapeHtml(descElement.value) : window.siyuan.languages.addDesc);
+    });
     const toggleTitleElement = options.menuElement.querySelector('.b3-switch[data-type="toggle-view-title"]') as HTMLInputElement;
     toggleTitleElement.addEventListener("change", () => {
         const avID = options.blockElement.getAttribute("data-av-id");
@@ -199,17 +202,17 @@ export const getViewHTML = (data: IAV) => {
 </button>
 <button class="b3-menu__separator"></button>
 <button class="b3-menu__item" data-type="nobg">
-    <div>
+    <div class="fn__block">
         <div class="fn__flex">
             <span class="b3-menu__avemoji" data-type="update-view-icon">${view.icon ? unicode2Emoji(view.icon) : '<svg style="height: 14px;width: 14px"><use xlink:href="#iconTable"></use></svg>'}</span>
-            <div class="b3-form__icona fn__size200">
+            <div class="b3-form__icona fn__block">
                 <input data-type="name" class="b3-text-field b3-form__icona-input" type="text" data-value="${escapeAttr(view.name)}">
                 <svg data-position="top" class="b3-form__icona-icon ariaLabel" aria-label="${view.desc ? escapeAriaLabel(view.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(view.desc)}">${view.desc}</textarea>
+            <div class="fn__hr"></div>
+            <textarea style="margin-left: 22px;width: calc(100% - 22px);" rows="1" data-type="desc" class="b3-text-field fn__size200" type="text" data-value="${escapeAttr(view.desc)}">${view.desc}</textarea>
         </div>
     </div>
 </button>