:art: https://github.com/siyuan-note/siyuan/issues/9888

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

@@ -57,7 +57,7 @@ export const genAVValueHTML = (value: IAVCellValue) => {
 <a href="tel:${value.phone.content}" target="_blank" aria-label="${window.siyuan.languages.openBy}" class="block__icon block__icon--show fn__flex-center b3-tooltips__w b3-tooltips"><svg><use xlink:href="#iconPhone"></use></svg></a>`;
             break;
         case "checkbox":
-            html = `<svg class="av__checkbox" style="height: 17px;"><use xlink:href="#icon${value.checkbox.checked?"Check":"Uncheck"}"></use></svg>`;
+            html = `<svg class="av__checkbox" style="height: 17px;"><use xlink:href="#icon${value.checkbox.checked ? "Check" : "Uncheck"}"></use></svg>`;
             break;
         case "template":
             html = `<div class="fn__flex-1">${value.template.content}</div>`;
@@ -67,6 +67,11 @@ export const genAVValueHTML = (value: IAVCellValue) => {
 <span class="fn__space"></span>
 <a href="mailto:${value.email.content}" target="_blank" aria-label="${window.siyuan.languages.openBy}" class="block__icon block__icon--show fn__flex-center b3-tooltips__w b3-tooltips"><svg><use xlink:href="#iconEmail"></use></svg></a>`;
             break;
+        case "relation":
+            value.relation?.blockIDs.forEach((item, index) => {
+                html += `<span class="av__celltext--url" style="margin-right: 8px" data-id="${item}">${value.relation?.contents[index]}</span>`;
+            });
+            break;
     }
     return html;
 };
@@ -117,34 +122,36 @@ class="fn__flex-1 fn__flex${["url", "text", "number", "email", "phone"].includes
         });
         element.innerHTML = html;
         element.addEventListener("click", (event) => {
-            const target = event.target as HTMLElement;
-            const dateElement = hasClosestByAttribute(target, "data-type", "date");
-            if (dateElement) {
-                popTextCell(protyle, [dateElement], "date");
-                event.stopPropagation();
-                event.preventDefault();
-                return;
-            }
-            const mSelectElement = hasClosestByAttribute(target, "data-type", "select") || hasClosestByAttribute(target, "data-type", "mSelect");
-            if (mSelectElement) {
-                popTextCell(protyle, [mSelectElement], mSelectElement.getAttribute("data-type") as TAVCol);
-                event.stopPropagation();
-                event.preventDefault();
-                return;
-            }
-            const mAssetElement = hasClosestByAttribute(target, "data-type", "mAsset");
-            if (mAssetElement) {
-                popTextCell(protyle, [mAssetElement], "mAsset");
-                event.stopPropagation();
-                event.preventDefault();
-                return;
-            }
-            const checkboxElement = hasClosestByAttribute(target, "data-type", "checkbox");
-            if (checkboxElement) {
-                popTextCell(protyle, [checkboxElement], "checkbox");
-                event.stopPropagation();
-                event.preventDefault();
-                return;
+            let target = event.target as HTMLElement;
+            while (target && !element.isSameNode(target)) {
+                const type = target.getAttribute("data-type");
+                if (type === "date") {
+                    popTextCell(protyle, [target], "date");
+                    event.stopPropagation();
+                    event.preventDefault();
+                    break
+                } else if (type === "select" || type === "mSelect") {
+                    popTextCell(protyle, [target], target.getAttribute("data-type") as TAVCol);
+                    event.stopPropagation();
+                    event.preventDefault();
+                    break
+                } else if (type === "mAsset") {
+                    popTextCell(protyle, [target], "mAsset");
+                    event.stopPropagation();
+                    event.preventDefault();
+                    break
+                } else if (type === "checkbox") {
+                    popTextCell(protyle, [target], "checkbox");
+                    event.stopPropagation();
+                    event.preventDefault();
+                    break
+                } else if (type === "relation") {
+                    popTextCell(protyle, [target], "relation");
+                    event.stopPropagation();
+                    event.preventDefault();
+                    break
+                }
+                target = target.parentElement;
             }
         });
         element.querySelectorAll(".b3-text-field--text").forEach((item: HTMLInputElement) => {

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

@@ -9,6 +9,7 @@ import {focusBlock} from "../../util/selection";
 import * as dayjs from "dayjs";
 import {unicode2Emoji} from "../../../emoji";
 import {getColIconByType} from "./col";
+import {genAVValueHTML} from "./blockAttr";
 
 export const getCellText = (cellElement: HTMLElement | false) => {
     if (!cellElement) {
@@ -479,27 +480,33 @@ const updateCellValueByInput = (protyle: IProtyle, type: TAVCol, cellElements: H
     });
 };
 
-export const updateCellsValue = (protyle: IProtyle, nodeElement: HTMLElement, value: string | any = "") => {
+export const updateCellsValue = (protyle: IProtyle, nodeElement: HTMLElement, value: string | any = "", cElements?: HTMLElement[]) => {
     const doOperations: IOperation[] = [];
     const undoOperations: IOperation[] = [];
 
     const avID = nodeElement.dataset.avId;
     const id = nodeElement.dataset.nodeId;
     let text = "";
-    const cellElements: Element[] = Array.from(nodeElement.querySelectorAll(".av__cell--select")) || [];
-    if (cellElements.length === 0) {
-        nodeElement.querySelectorAll(".av__row--select:not(.av__row--header)").forEach(rowElement => {
-            rowElement.querySelectorAll(".av__cell").forEach(cellElement => {
-                cellElements.push(cellElement);
+    let cellElements: Element[];
+    if (cElements?.length > 0) {
+        cellElements = cElements;
+    } else {
+        cellElements = Array.from(nodeElement.querySelectorAll(".av__cell--select"));
+        if (cellElements.length === 0) {
+            nodeElement.querySelectorAll(".av__row--select:not(.av__row--header)").forEach(rowElement => {
+                rowElement.querySelectorAll(".av__cell").forEach(cellElement => {
+                    cellElements.push(cellElement);
+                });
             });
-        });
+        }
     }
+
     cellElements.forEach((item: HTMLElement) => {
         const rowElement = hasClosestByClassName(item, "av__row");
         if (!rowElement) {
             return;
         }
-        const type = getTypeByCellElement(item);
+        const type = getTypeByCellElement(item) || item.dataset.type;
         if (["created", "updated", "template"].includes(type)) {
             return;
         }
@@ -527,6 +534,8 @@ export const updateCellsValue = (protyle: IProtyle, nodeElement: HTMLElement, va
         });
         if (!hasClosestByClassName(cellElements[0], "custom-attr")) {
             updateAttrViewCellAnimation(item, cellValue);
+        } else {
+           item.innerHTML = genAVValueHTML(cellValue)
         }
     });
     if (doOperations.length > 0) {

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

@@ -35,7 +35,7 @@ export const avKeydown = (event: KeyboardEvent, nodeElement: HTMLElement, protyl
             return true;
         }
         if (event.key === "Backspace") {
-            updateCellsValue(protyle, nodeElement);
+            updateCellsValue(protyle, nodeElement, undefined, [selectCellElement]);
             event.preventDefault();
             return true;
         }

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

@@ -313,7 +313,7 @@ export const openMenuPanel = (options: {
                     targetElement.after(sourceElement);
                 }
                 targetElement.classList.remove("dragover__bottom", "dragover__top");
-                setRelationCell(options.protyle, options.blockElement as HTMLElement, sourceElement.parentElement);
+                setRelationCell(options.protyle, options.blockElement as HTMLElement, sourceElement.parentElement, options.cellElements);
                 return;
             }
 
@@ -879,7 +879,7 @@ export const openMenuPanel = (options: {
                     event.stopPropagation();
                     break;
                 } else if (type === "setRelationCell") {
-                    setRelationCell(options.protyle, options.blockElement as HTMLElement, target);
+                    setRelationCell(options.protyle, options.blockElement as HTMLElement, target, options.cellElements);
                     event.preventDefault();
                     event.stopPropagation();
                     break;

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

@@ -255,7 +255,7 @@ export const getRelationHTML = (data: IAV, cellElements?: HTMLElement[]) => {
     }
 }
 
-export const setRelationCell = (protyle: IProtyle, nodeElement: HTMLElement, target: HTMLElement) => {
+export const setRelationCell = (protyle: IProtyle, nodeElement: HTMLElement, target: HTMLElement, cellElements: HTMLElement[]) => {
     const menuElement = hasClosestByClassName(target, "b3-menu__items");
     if (!menuElement) {
         return
@@ -302,6 +302,5 @@ export const setRelationCell = (protyle: IProtyle, nodeElement: HTMLElement, tar
             }
         }
     }
-
-    updateCellsValue(protyle, nodeElement, newValue);
+    updateCellsValue(protyle, nodeElement, newValue, cellElements);
 };