From 8cdcc98424fe15b2b6f2b1d14fb1f375eed5d3d2 Mon Sep 17 00:00:00 2001
From: Vanessa <lly219@gmail.com>
Date: Fri, 12 Apr 2024 10:18:45 +0800
Subject: [PATCH] :art: fix https://github.com/siyuan-note/siyuan/issues/10768

---
 app/src/protyle/render/av/asset.ts         | 101 ++++++++++-----------
 app/src/protyle/render/av/cell.ts          |   4 +-
 app/src/protyle/render/av/openMenuPanel.ts |   4 +-
 3 files changed, 49 insertions(+), 60 deletions(-)

diff --git a/app/src/protyle/render/av/asset.ts b/app/src/protyle/render/av/asset.ts
index 4ba0ca5be..583e2d301 100644
--- a/app/src/protyle/render/av/asset.ts
+++ b/app/src/protyle/render/av/asset.ts
@@ -43,8 +43,7 @@ export const bindAssetEvent = (options: {
                 protyle: options.protyle,
                 data: options.data,
                 cellElements: options.cellElements,
-                type: "addUpdate",
-                addUpdateValue: value,
+                addValue: value,
                 blockElement: options.blockElement
             });
         });
@@ -53,20 +52,20 @@ export const bindAssetEvent = (options: {
 
 export const getAssetHTML = (cellElements: HTMLElement[]) => {
     let html = "";
-    genCellValueByElement("mAsset", cellElements[0]).mAsset.forEach(item => {
+    genCellValueByElement("mAsset", cellElements[0]).mAsset.forEach((item, index) => {
         if (!item.content) {
             return;
         }
         let contentHTML;
         if (item.type === "image") {
-            contentHTML = `<span data-type="openAssetItem" class="fn__flex-1">
+            contentHTML = `<span data-type="openAssetItem" class="fn__flex-1 ariaLabel" aria-label="${item.content}">
     <img style="max-height: 180px;max-width: 360px;border-radius: var(--b3-border-radius);margin: 4px 0;" src="${item.content}"/>
 </span>`;
         } else {
-            contentHTML = `<span data-type="openAssetItem" class="fn__ellipsis b3-menu__label" style="max-width: 360px">${item.name}</span>`;
+            contentHTML = `<span data-type="openAssetItem" class="fn__ellipsis b3-menu__label ariaLabel" aria-label="${item.content}" style="max-width: 360px">${item.name}</span>`;
         }
 
-        html += `<button class="b3-menu__item" draggable="true" data-name="${item.name}" data-type="${item.type}" data-content="${item.content}">
+        html += `<button class="b3-menu__item" draggable="true" data-index="${index}" data-name="${item.name}" data-type="${item.type}" data-content="${item.content}">
 <svg class="b3-menu__icon fn__grab"><use xlink:href="#iconDrag"></use></svg>
 ${contentHTML}
 <svg class="b3-menu__action" data-type="editAssetItem"><use xlink:href="#iconEdit"></use></svg>
@@ -94,10 +93,10 @@ export const updateAssetCell = (options: {
     protyle: IProtyle,
     data: IAV,
     cellElements: HTMLElement[],
-    type: "replace" | "addUpdate" | "remove",
     replaceValue?: IAVCellAssetValue[],
-    addUpdateValue?: IAVCellAssetValue[],
-    removeContent?: string,
+    addValue?: IAVCellAssetValue[],
+    updateValue?: { index: number, value: IAVCellAssetValue }
+    removeIndex?: number,
     blockElement: Element
 }) => {
     const colId = options.cellElements[0].dataset.colId;
@@ -115,33 +114,20 @@ export const updateAssetCell = (options: {
         const rowID = (hasClosestByClassName(item, "av__row") as HTMLElement).dataset.id;
         const oldValue = JSON.parse(JSON.stringify(cellValue));
         if (elementIndex === 0) {
-            if (options.type === "remove") {
-                cellValue.mAsset.find((oldItem, index) => {
-                    if (oldItem.content === options.removeContent) {
-                        cellValue.mAsset.splice(index, 1);
+            if (typeof options.removeIndex === "number") {
+                cellValue.mAsset.splice(options.removeIndex, 1);
+            } else if (options.addValue?.length > 0) {
+                cellValue.mAsset = cellValue.mAsset.concat(options.addValue);
+            } else if (options.updateValue) {
+                cellValue.mAsset.find((assetItem, index) => {
+                    if (index === options.updateValue.index) {
+                        assetItem.content = options.updateValue.value.content;
+                        assetItem.type = options.updateValue.value.type;
+                        assetItem.name = options.updateValue.value.name;
                         return true;
                     }
                 });
-            } else if (options.type === "addUpdate") {
-                options.addUpdateValue.forEach(newitem => {
-                    if (!newitem.content) {
-                        return;
-                    }
-                    const hasMatch = cellValue.mAsset.find(oldItem => {
-                        if (oldItem.content === newitem.content) {
-                            oldItem.name = newitem.name;
-                            oldItem.type = newitem.type;
-                            return true;
-                        }
-                    });
-                    if (!hasMatch) {
-                        if (newitem.type === "file" && !newitem.name) {
-                            newitem.name = newitem.content;
-                        }
-                        cellValue.mAsset.push(newitem);
-                    }
-                });
-            } else {
+            } else if (options.replaceValue?.length > 0) {
                 cellValue.mAsset = options.replaceValue;
             }
             mAssetValue = cellValue.mAsset;
@@ -203,20 +189,23 @@ export const editAssetItem = (protyle: IProtyle, data: IAV, cellElements: HTMLEl
     const linkAddress = target.dataset.content;
     const type = target.dataset.type as "image" | "file";
     const menu = new Menu("av-asset-edit", () => {
-        if (!textElement || !textElement.value || textElement.value === target.dataset.name) {
+        if (textElements.length < 2 || !textElements[0].value ||
+            (textElements[0].value === linkAddress && textElements[1].value === target.dataset.name)) {
             return;
         }
         updateAssetCell({
             protyle,
             data,
             cellElements,
-            type: "addUpdate",
             blockElement,
-            addUpdateValue: [{
-                content: linkAddress,
-                name: textElement.value,
-                type
-            }]
+            updateValue: {
+                index: parseInt(target.dataset.index),
+                value: {
+                    content: textElements[0].value,
+                    name: textElements[1].value,
+                    type
+                }
+            }
         });
     });
     if (menu.isOpen) {
@@ -226,7 +215,11 @@ export const editAssetItem = (protyle: IProtyle, data: IAV, cellElements: HTMLEl
         menu.addItem({
             iconHTML: "",
             type: "readonly",
-            label: `${window.siyuan.languages.title}<textarea rows="1" style="margin:4px 0;width: ${isMobile() ? "200" : "360"}px" class="b3-text-field"></textarea>`,
+            label: `${window.siyuan.languages.link}
+<textarea rows="1" style="margin:4px 0;width: ${isMobile() ? "200" : "360"}px;resize: vertical;" class="b3-text-field"></textarea>
+<div class="fn__hr"></div>
+${window.siyuan.languages.title}
+<textarea style="width: ${isMobile() ? "200" : "360"}px;margin: 4px 0;resize: vertical;" rows="1" class="b3-text-field"></textarea>`,
         });
     } else {
         menu.addItem({
@@ -246,8 +239,7 @@ export const editAssetItem = (protyle: IProtyle, data: IAV, cellElements: HTMLEl
                 data,
                 cellElements,
                 blockElement,
-                type: "remove",
-                removeContent: linkAddress
+                removeIndex: parseInt(target.dataset.index)
             });
         }
     });
@@ -257,9 +249,10 @@ export const editAssetItem = (protyle: IProtyle, data: IAV, cellElements: HTMLEl
         window.siyuan.menus.menu.append(new MenuItem(exportAsset(linkAddress)).element);
     }
     /// #endif
-    const textElement = menu.element.querySelector("textarea");
-    if (textElement) {
-        textElement.value = target.dataset.name;
+    const textElements = menu.element.querySelectorAll("textarea");
+    if (textElements.length > 1) {
+        textElements[1].value = target.dataset.name;
+        textElements[0].value = linkAddress;
     }
     const rect = target.getBoundingClientRect();
     menu.open({
@@ -281,8 +274,7 @@ export const addAssetLink = (protyle: IProtyle, data: IAV, cellElements: HTMLEle
             data,
             cellElements,
             blockElement,
-            type: "addUpdate",
-            addUpdateValue: [{
+            addValue: [{
                 type: "file",
                 name: textElements[1].value,
                 content: textElements[0].value,
@@ -296,10 +288,10 @@ export const addAssetLink = (protyle: IProtyle, data: IAV, cellElements: HTMLEle
         iconHTML: "",
         type: "readonly",
         label: `${window.siyuan.languages.link}
-<textarea rows="1" style="margin:4px 0;width: ${isMobile() ? "200" : "360"}px" class="b3-text-field"></textarea>
+<textarea rows="1" style="margin:4px 0;width: ${isMobile() ? "200" : "360"}px;resize: vertical;" class="b3-text-field"></textarea>
 <div class="fn__hr"></div>
 ${window.siyuan.languages.title}
-<textarea style="width: ${isMobile() ? "200" : "360"}px;margin: 4px 0;" rows="1" class="b3-text-field"></textarea>`,
+<textarea style="width: ${isMobile() ? "200" : "360"}px;margin: 4px 0;resize: vertical;" rows="1" class="b3-text-field"></textarea>`,
     });
     const rect = target.getBoundingClientRect();
     menu.open({
@@ -320,18 +312,18 @@ export const dragUpload = (files: string[], protyle: IProtyle, cellElement: HTML
         const blockElement = hasClosestBlock(cellElement);
         if (blockElement) {
             hideMessage(msgId);
-            const addUpdateValue: IAVCellAssetValue[] = [];
+            const addValue: IAVCellAssetValue[] = [];
             Object.keys(response.data.succMap).forEach(key => {
                 const type = pathPosix().extname(key).toLowerCase();
                 const name = key.substring(0, key.length - type.length);
                 if (Constants.SIYUAN_ASSETS_IMAGE.includes(type)) {
-                    addUpdateValue.push({
+                    addValue.push({
                         type: "image",
                         name,
                         content: response.data.succMap[key],
                     });
                 } else {
-                    addUpdateValue.push({
+                    addValue.push({
                         type: "file",
                         name,
                         content: response.data.succMap[key],
@@ -348,8 +340,7 @@ export const dragUpload = (files: string[], protyle: IProtyle, cellElement: HTML
                     blockElement,
                     data: response.data as IAV,
                     cellElements: [cellElement],
-                    type: "addUpdate",
-                    addUpdateValue
+                    addValue
                 });
             });
         }
diff --git a/app/src/protyle/render/av/cell.ts b/app/src/protyle/render/av/cell.ts
index 7663017c6..1214edfef 100644
--- a/app/src/protyle/render/av/cell.ts
+++ b/app/src/protyle/render/av/cell.ts
@@ -675,9 +675,9 @@ export const renderCell = (cellValue: IAVCellValue) => {
     } else if (cellValue.type === "mAsset") {
         cellValue?.mAsset?.forEach((item) => {
             if (item.type === "image") {
-                text += `<img class="av__cellassetimg" src="${item.content}">`;
+                text += `<img class="av__cellassetimg ariaLabel" aria-label="${item.content}" src="${item.content}">`;
             } else {
-                text += `<span class="b3-chip av__celltext--url" data-url="${item.content}">${item.name}</span>`;
+                text += `<span class="b3-chip av__celltext--url ariaLabel" aria-label="${item.content}" data-url="${item.content}">${item.name}</span>`;
             }
         });
     } else if (cellValue.type === "checkbox") {
diff --git a/app/src/protyle/render/av/openMenuPanel.ts b/app/src/protyle/render/av/openMenuPanel.ts
index 50034dd9e..fd02eac68 100644
--- a/app/src/protyle/render/av/openMenuPanel.ts
+++ b/app/src/protyle/render/av/openMenuPanel.ts
@@ -310,7 +310,6 @@ export const openMenuPanel = (options: {
                     protyle: options.protyle,
                     data,
                     cellElements: options.cellElements,
-                    type: "replace",
                     replaceValue,
                     blockElement: options.blockElement
                 });
@@ -1103,8 +1102,7 @@ export const openMenuPanel = (options: {
                             protyle: options.protyle,
                             data,
                             cellElements: options.cellElements,
-                            type: "addUpdate",
-                            addUpdateValue: [value],
+                            addValue: [value],
                             blockElement: options.blockElement
                         });
                         window.siyuan.menus.menu.remove();