:art: fix https://github.com/siyuan-note/siyuan/issues/10523

app/src/protyle/render/av/cell.ts

@@ -69,9 +69,22 @@ export const genCellValueByElement = (colType: TAVCol, cellElement: HTMLElement)
             checked: cellElement.querySelector("use").getAttribute("xlink:href") === "#iconCheck" ? true : false
         };
     } else if (colType === "relation") {
+        const blockIDs: string[] = [];
+        const contents: IAVCellValue[] = [];
+        Array.from(cellElement.querySelectorAll("span")).forEach((item: HTMLElement) => {
+            blockIDs.push(item.dataset.id);
+            contents.push({
+                isDetached: !item.classList.contains("av__celltext--ref"),
+                block: {
+                    content: item.textContent,
+                    id: item.dataset.id,
+                },
+                type:"block"
+            });
+        });
         cellValue.relation = {
-            blockIDs: Array.from(cellElement.querySelectorAll("span")).map((item: HTMLElement) => item.getAttribute("data-id")),
-            contents: Array.from(cellElement.querySelectorAll("span")).map((item: HTMLElement) => item.textContent),
+            blockIDs,
+            contents
         };
     } else if (colType === "mAsset") {
         const mAsset: IAVCellAssetValue[] = [];
@@ -145,7 +158,7 @@ export const genCellValue = (colType: TAVCol, value: string | any) => {
         } else if (colType === "relation") {
             cellValue = {
                 type: colType,
-                relation: {blockIDs: [], contents: [value]}
+                relation: {blockIDs: [value], contents: []}
             };
         }
     } else if (typeof value === "undefined" || !value) {
@@ -641,9 +654,18 @@ export const renderCell = (cellValue: IAVCellValue) => {
             text = text.substring(0, text.length - 2);
         }
     } else if (cellValue.type === "relation") {
-        cellValue?.relation?.contents?.forEach((item, index) => {
-            text += `<span class="av__celltext--ref" style="margin-right: 8px" data-id="${cellValue?.relation?.blockIDs[index]}">${item || "Untitled"}</span>`;
+        cellValue?.relation?.contents?.forEach((item) => {
+            if (item && item.block) {
+                if (item.isDetached) {
+                    text += `<span class="av__celltext" data-id="${item.block.id}">${item.block.content || ""}</span>, `;
+                } else {
+                    text += `<span data-type="block-ref" data-id="${item.block.id}" data-subtype="s" class="av__celltext av__celltext--ref">${item.block.content || "Untitled"}</span>, `;
+                }
+            }
         });
+        if (text && text.endsWith(", ")) {
+            text = text.substring(0, text.length - 2);
+        }
     }
     if (["text", "template", "url", "email", "phone", "number", "date", "created", "updated"].includes(cellValue.type) &&
         cellValue && cellValue[cellValue.type as "url"].content) {

app/src/protyle/render/av/relation.ts

@@ -231,8 +231,7 @@ const genSelectItemHTML = (type: "selected" | "empty" | "unselect", id?: string,
     }
 };
 
-const filterItem = (menuElement: Element, keyword: string) => {
-    const hasIds = menuElement.firstElementChild.getAttribute("data-cell-ids").split(",");
+const filterItem = (menuElement: Element, cellElement: HTMLElement, keyword: string) => {
     fetchPost("/api/av/getAttributeViewPrimaryKeyValues", {
         id: menuElement.firstElementChild.getAttribute("data-av-id"),
         keyword,
@@ -240,16 +239,13 @@ const filterItem = (menuElement: Element, keyword: string) => {
         const cells = response.data.rows.values as IAVCellValue[] || [];
         let html = "";
         let selectHTML = "";
-        hasIds.forEach(hasId => {
-            if (hasId) {
-                cells.find((item) => {
-                    if (item.block.id === hasId) {
-                        selectHTML += genSelectItemHTML("selected", item.block.id, item.isDetached, item.block.content || "Untitled");
-                        return true;
-                    }
-                });
+        const hasIds: string[] = []
+        cellElement.querySelectorAll("span").forEach((item) => {
+            if (item.textContent.indexOf(keyword) > -1) {
+                hasIds.push(item.dataset.id);
+                selectHTML += genSelectItemHTML("selected", item.dataset.id, !item.classList.contains("av__celltext--ref"), item.textContent || "Untitled");
             }
-        });
+        })
         cells.forEach((item) => {
             if (!hasIds.includes(item.block.id)) {
                 html += genSelectItemHTML("unselect", item.block.id, item.isDetached, item.block.content || "Untitled");
@@ -267,7 +263,6 @@ export const bindRelationEvent = (options: {
     blockElement: Element,
     cellElements: HTMLElement[]
 }) => {
-    const hasIds = options.menuElement.firstElementChild.getAttribute("data-cell-ids").split(",");
     fetchPost("/api/av/getAttributeViewPrimaryKeyValues", {
         id: options.menuElement.firstElementChild.getAttribute("data-av-id"),
         keyword: "",
@@ -275,16 +270,11 @@ export const bindRelationEvent = (options: {
         const cells = response.data.rows.values as IAVCellValue[] || [];
         let html = "";
         let selectHTML = "";
-        hasIds.forEach(hasId => {
-            if (hasId) {
-                cells.find((item) => {
-                    if (item.block.id === hasId) {
-                        selectHTML += genSelectItemHTML("selected", item.block.id, item.isDetached, item.block.content || "Untitled");
-                        return true;
-                    }
-                });
-            }
-        });
+        const hasIds: string[] = []
+        options.cellElements[0].querySelectorAll("span").forEach((item) => {
+            hasIds.push(item.dataset.id);
+            selectHTML += genSelectItemHTML("selected", item.dataset.id, !item.classList.contains("av__celltext--ref"), item.textContent || "Untitled");
+        })
         cells.forEach((item) => {
             if (!hasIds.includes(item.block.id)) {
                 html += genSelectItemHTML("unselect", item.block.id, item.isDetached, item.block.content || "Untitled");
@@ -321,12 +311,12 @@ ${html || genSelectItemHTML("empty")}`;
             if (event.isComposing) {
                 return;
             }
-            filterItem(options.menuElement, inputElement.value);
+            filterItem(options.menuElement, options.cellElements[0], inputElement.value);
             event.stopPropagation();
         });
         inputElement.addEventListener("compositionend", (event) => {
             event.stopPropagation();
-            filterItem(options.menuElement, inputElement.value);
+            filterItem(options.menuElement, options.cellElements[0], inputElement.value);
         });
     });
 };
@@ -340,11 +330,7 @@ export const getRelationHTML = (data: IAV, cellElements?: HTMLElement[]) => {
         }
     });
     if (colRelationData && colRelationData.avID) {
-        let ids = "";
-        cellElements[0].querySelectorAll("span").forEach((item) => {
-            ids += `${item.getAttribute("data-id")},`;
-        });
-        return `<div data-av-id="${colRelationData.avID}" data-cell-ids="${ids}" class="fn__flex-column">
+        return `<div data-av-id="${colRelationData.avID}" class="fn__flex-column">
 <div class="b3-menu__item fn__flex-column" data-type="nobg">
     <div class="b3-menu__label">&nbsp;</div>
     <input class="b3-text-field fn__flex-shrink"/>
@@ -363,6 +349,13 @@ export const setRelationCell = (protyle: IProtyle, nodeElement: HTMLElement, tar
     if (!menuElement) {
         return;
     }
+    const rowElement = hasClosestByClassName(cellElements[0], "av__row");
+    if (!rowElement) {
+        return;
+    }
+    if (!nodeElement.contains(cellElements[0])) {
+        cellElements[0] = nodeElement.querySelector(`.av__row[data-id="${rowElement.dataset.id}"] .av__cell[data-col-id="${cellElements[0].dataset.colId}"]`) as HTMLElement;
+    }
     const newValue = genCellValueByElement("relation", cellElements[0]).relation;
     if (target.classList.contains("b3-menu__item")) {
         const targetId = target.getAttribute("data-id");
@@ -384,7 +377,14 @@ export const setRelationCell = (protyle: IProtyle, nodeElement: HTMLElement, tar
                 separatorElement.previousElementSibling.remove();
             }
             newValue.blockIDs.push(targetId);
-            newValue.contents.push(target.textContent.trim());
+            newValue.contents.push({
+                type: "block",
+                block: {
+                    id: targetId,
+                    content: target.firstElementChild.textContent
+                },
+                isDetached: !target.firstElementChild.getAttribute("style")
+            });
             separatorElement.before(target);
             target.outerHTML = genSelectItemHTML("selected", targetId, !target.querySelector(".popover__block"), target.querySelector(".b3-menu__label").textContent);
             if (!separatorElement.nextElementSibling) {
@@ -393,6 +393,5 @@ export const setRelationCell = (protyle: IProtyle, nodeElement: HTMLElement, tar
         }
         menuElement.firstElementChild.classList.add("b3-menu__item--current");
     }
-    menuElement.parentElement.setAttribute("data-cell-ids", newValue.blockIDs.join(","));
     updateCellsValue(protyle, nodeElement, newValue, cellElements);
 };

app/src/types/index.d.ts

@@ -1168,7 +1168,7 @@ interface IAVCellValue {
     }
     relation?: {
         blockIDs: string[]
-        contents?: string[]
+        contents?: IAVCellValue[]
     }
     rollup?: {
         contents?: IAVCellValue[]