From 84f3da2ae8478424f33939585c0ea3e61256dc94 Mon Sep 17 00:00:00 2001
From: Vanessa <lly219@gmail.com>
Date: Tue, 2 Jan 2024 23:04:25 +0800
Subject: [PATCH] :bug: fix https://github.com/siyuan-note/siyuan/issues/10052

---
 app/src/protyle/render/av/asset.ts         | 57 ++++++++++------------
 app/src/protyle/render/av/openMenuPanel.ts |  2 +-
 2 files changed, 27 insertions(+), 32 deletions(-)

diff --git a/app/src/protyle/render/av/asset.ts b/app/src/protyle/render/av/asset.ts
index 51d39cb04..d9a9eddf5 100644
--- a/app/src/protyle/render/av/asset.ts
+++ b/app/src/protyle/render/av/asset.ts
@@ -51,43 +51,27 @@ export const bindAssetEvent = (options: {
     });
 };
 
-export const getAssetHTML = (data: IAVTable, cellElements: HTMLElement[]) => {
-    const cellId = cellElements[0].dataset.id;
-    const rowId = (hasClosestByClassName(cellElements[0], "av__row") as HTMLElement).dataset.id;
-    let cellData: IAVCell;
-    data.rows.find(row => {
-        if (row.id === rowId) {
-            row.cells.find(cell => {
-                if (cell.id === cellId) {
-                    cellData = cell;
-                    return true;
-                }
-            });
-            return true;
-        }
-    });
+export const getAssetHTML = (cellElements: HTMLElement[]) => {
     let html = "";
-    if (cellData?.value?.mAsset) {
-        cellData.value.mAsset.forEach(item => {
-            if (!item.content) {
-                return;
-            }
-            let contentHTML;
-            if (item.type === "image") {
-                contentHTML = `<span data-type="openAssetItem" class="fn__flex-1">
+    genCellValueByElement(getTypeByCellElement(cellElements[0]), cellElements[0]).mAsset.forEach(item => {
+        if (!item.content) {
+            return;
+        }
+        let contentHTML;
+        if (item.type === "image") {
+            contentHTML = `<span data-type="openAssetItem" class="fn__flex-1">
     <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>`;
-            }
+        } else {
+            contentHTML = `<span data-type="openAssetItem" class="fn__ellipsis b3-menu__label" 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-name="${item.name}" data-type="${item.type}" data-content="${item.content}">
 <svg class="b3-menu__icon"><use xlink:href="#iconDrag"></use></svg>
 ${contentHTML}
 <svg class="b3-menu__action" data-type="editAssetItem"><use xlink:href="#iconEdit"></use></svg>
 </button>`;
-        });
-    }
+    });
     return `<div class="b3-menu__items">
     ${html}
     <button data-type="addAssetExist" class="b3-menu__item">
@@ -121,7 +105,18 @@ export const updateAssetCell = (options: {
     const cellUndoOperations: IOperation[] = [];
     options.cellElements.forEach((item, elementIndex) => {
         if (!options.blockElement.contains(item)) {
-            item = options.cellElements[elementIndex] = options.blockElement.querySelector(`.av__cell[data-id="${item.dataset.id}"]`) as HTMLElement;
+            const rowElement = hasClosestByClassName(item, "av__row");
+            if (rowElement) {
+                let cellIndex: number;
+                rowElement.querySelectorAll(".av__cell").forEach((cellElement: HTMLElement, ghostIndex) => {
+                    if (cellElement.dataset.id === item.dataset.id) {
+                        cellIndex = ghostIndex
+                    }
+                });
+                if (typeof cellIndex === "number") {
+                    item = options.cellElements[elementIndex] = options.blockElement.querySelectorAll(`.av__row[data-id="${rowElement.dataset.id}"] .av__cell`)[cellIndex] as HTMLElement;
+                }
+            }
         }
         const cellValue = genCellValueByElement(getTypeByCellElement(item) || item.dataset.type as TAVCol, item);
         const rowID = (hasClosestByClassName(item, "av__row") as HTMLElement).dataset.id;
@@ -193,7 +188,7 @@ export const updateAssetCell = (options: {
     transaction(options.protyle, cellDoOperations, cellUndoOperations);
     const menuElement = document.querySelector(".av__panel > .b3-menu") as HTMLElement;
     if (menuElement) {
-        menuElement.innerHTML = getAssetHTML(options.data.view, options.cellElements);
+        menuElement.innerHTML = getAssetHTML(options.cellElements);
         bindAssetEvent({
             protyle: options.protyle,
             data: options.data,
diff --git a/app/src/protyle/render/av/openMenuPanel.ts b/app/src/protyle/render/av/openMenuPanel.ts
index 7c0504f94..9fe4b0eaa 100644
--- a/app/src/protyle/render/av/openMenuPanel.ts
+++ b/app/src/protyle/render/av/openMenuPanel.ts
@@ -65,7 +65,7 @@ export const openMenuPanel = (options: {
         } else if (options.type === "select") {
             html = getSelectHTML(data.view, options.cellElements);
         } else if (options.type === "asset") {
-            html = getAssetHTML(data.view, options.cellElements);
+            html = getAssetHTML(options.cellElements);
         } else if (options.type === "edit") {
             html = getEditHTML({protyle: options.protyle, data, colId: options.colId});
         } else if (options.type === "date") {