🎨 https://github.com/siyuan-note/siyuan/issues/14511

app/src/assets/scss/business/_av.scss

@@ -605,7 +605,7 @@
       white-space: nowrap;
     }
 
-    &[data-block-id] > .block__icon[data-type="copy"] {
+    &[data-dtype="block"] > .block__icon[data-type="copy"] {
       display: none;
     }
 

app/src/assets/scss/protyle/_wysiwyg.scss

@@ -823,7 +823,7 @@
       }
     }
 
-    .av__row .av__cell[data-block-id] > .block__icon[data-type="copy"] {
+    .av__row .av__cell[data-dtype="block"] > .block__icon[data-type="copy"] {
       display: flex;
     }
   }

app/src/protyle/hint/index.ts

@@ -439,7 +439,7 @@ ${genHintItemHTML(item)}
             if (!rowElement) {
                 return;
             }
-            const previousID = cellElement.dataset.blockId;
+            const previousID = rowElement.dataset.id;
             const avID = nodeElement.getAttribute("data-av-id");
             let tempElement = document.createElement("div");
             tempElement.innerHTML = value.replace(/<mark>/g, "").replace(/<\/mark>/g, "");

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

@@ -355,7 +355,7 @@ export const avContextmenu = (protyle: IProtyle, rowElement: HTMLElement, positi
     }
     const menu = new Menu();
     const rowElements = blockElement.querySelectorAll(".av__row--select:not(.av__row--header), .av__gallery-item--select");
-    const keyCellElement = rowElements[0].querySelector(".av__cell[data-block-id]") as HTMLElement;
+    const keyCellElement = rowElements[0].querySelector('.av__cell[data-dtype="block"]') as HTMLElement;
     const ids = Array.from(rowElements).map(item => item.getAttribute("data-id"));
     if (rowElements.length === 1 && keyCellElement.getAttribute("data-detached") !== "true") {
         /// #if !MOBILE
@@ -569,7 +569,7 @@ export const avContextmenu = (protyle: IProtyle, rowElement: HTMLElement, positi
                     const sourceIds: string[] = [];
                     rowElements.forEach(item => {
                         const rowId = item.getAttribute("data-id");
-                        const blockValue = genCellValueByElement("block", item.querySelector(".av__cell[data-block-id]"));
+                        const blockValue = genCellValueByElement("block", item.querySelector('.av__cell[data-dtype="block"]'));
                         srcs.push({
                             content: blockValue.block.content,
                             id: rowId,

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

@@ -23,9 +23,9 @@ const genAVRollupHTML = (value: IAVCellValue) => {
     switch (value.type) {
         case "block":
             if (value?.isDetached) {
-                html = `<span data-id="${value.block?.id}">${value.block?.content || window.siyuan.languages.untitled}</span>`;
+                html = `<span>${value.block?.content || window.siyuan.languages.untitled}</span>`;
             } else {
-                html = `<span data-type="block-ref" data-id="${value.block?.id}" data-subtype="s" class="av__celltext--ref">${value.block?.content || window.siyuan.languages.untitled}</span>`;
+                html = `<span data-type="block-ref" data-id="${value.block.id}" data-subtype="s" class="av__celltext--ref">${value.block?.content || window.siyuan.languages.untitled}</span>`;
             }
             break;
         case "text":
@@ -62,7 +62,7 @@ export const genAVValueHTML = (value: IAVCellValue) => {
     let html = "";
     switch (value.type) {
         case "block":
-            html = `<input value="${escapeAttr(value.block.content)}" type="text" class="b3-text-field b3-text-field--text fn__flex-1" placeholder="${window.siyuan.languages.empty}">`;
+            html = `<input data-id="${value.block.id}" value="${escapeAttr(value.block.content)}" type="text" class="b3-text-field b3-text-field--text fn__flex-1" placeholder="${window.siyuan.languages.empty}">`;
             break;
         case "text":
             html = `<textarea style="resize: vertical" rows="${(value.text?.content || "").split("\n").length}" class="b3-text-field b3-text-field--text fn__flex-1" placeholder="${window.siyuan.languages.empty}">${value.text?.content || ""}</textarea>`;
@@ -130,7 +130,7 @@ export const genAVValueHTML = (value: IAVCellValue) => {
             value?.relation?.contents?.forEach((item) => {
                 if (item && item.block) {
                     if (item?.isDetached) {
-                        html += `<span class="av__cell--relation"><span>➖ </span><span class="av__celltext" data-id="${item.block?.id}">${Lute.EscapeHTMLStr(item.block.content || window.siyuan.languages.untitled)}</span></span>`;
+                        html += `<span class="av__cell--relation"><span>➖ </span><span class="av__celltext">${Lute.EscapeHTMLStr(item.block.content || window.siyuan.languages.untitled)}</span></span>`;
                     } else {
                         // data-block-id 用于更新 emoji
                         html += `<span class="av__cell--relation" data-block-id="${item.block.id}"><span class="b3-menu__avemoji" data-unicode="${item.block.icon || ""}">${unicode2Emoji(item.block.icon || window.siyuan.storage[Constants.LOCAL_IMAGES].file)}</span><span data-type="block-ref" data-id="${item.block.id}" data-subtype="s" class="av__celltext av__celltext--ref">${Lute.EscapeHTMLStr(item.block.content || window.siyuan.languages.untitled)}</span></span>`;
@@ -198,7 +198,7 @@ export const renderAVAttribute = (element: HTMLElement, id: string, protyle: IPr
         ${item.key.icon ? unicode2Emoji(item.key.icon, "block__logoicon", true) : `<svg class="block__logoicon"><use xlink:href="#${getColIconByType(item.key.type)}"></use></svg>`}
         <span>${escapeHtml(item.key.name)}</span>
     </div>
-    <div data-av-id="${table.avID}" data-col-id="${item.values[0].keyID}" data-block-id="${item.values[0].blockID}" data-id="${item.values[0].id}" data-type="${item.values[0].type}" 
+    <div data-av-id="${table.avID}" data-col-id="${item.values[0].keyID}" data-row-id="${item.values[0].blockID}" data-id="${item.values[0].id}" data-type="${item.values[0].type}" 
 data-options="${item.key?.options ? escapeAttr(JSON.stringify(item.key.options)) : "[]"}" 
 ${["text", "number", "date", "url", "phone", "template", "email"].includes(item.values[0].type) ? "" : `placeholder="${window.siyuan.languages.empty}"`}  
 class="fn__flex-1 fn__flex${["url", "text", "number", "email", "phone", "block"].includes(item.values[0].type) ? "" : " custom-attr__avvalue"}${["created", "updated"].includes(item.values[0].type) ? " custom-attr__avvalue--readonly" : ""}">${genAVValueHTML(item.values[0])}</div>
@@ -424,7 +424,7 @@ class="fn__flex-1 fn__flex${["url", "text", "number", "email", "phone", "block"]
                     value = {
                         block: {
                             content: item.value,
-                            id: item.parentElement.dataset.blockId,
+                            id: item.dataset.id,
                         },
                         isDetached: false
                     };
@@ -432,7 +432,7 @@ class="fn__flex-1 fn__flex${["url", "text", "number", "email", "phone", "block"]
                 fetchPost("/api/av/setAttributeViewBlockAttr", {
                     avID: item.parentElement.dataset.avId,
                     keyID: item.parentElement.dataset.colId,
-                    rowID: item.parentElement.dataset.blockId,
+                    rowID: item.parentElement.dataset.rowId,
                     value
                 }, (setResponse) => {
                     if (type === "number") {

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

@@ -909,13 +909,10 @@ export const renderCellAttr = (cellElement: Element, value: IAVCellValue) => {
             cellElement.classList.add("av__cell-uncheck");
         }
     } else if (value.type === "block") {
-        if (value.block.id) {
-            // 不能设置为空，否则编辑后会临时无 id
-            cellElement.setAttribute("data-block-id", value.block.id);
-        }
         if (value.isDetached) {
             cellElement.setAttribute("data-detached", "true");
         } else {
+            cellElement.querySelector(".av__celltext").setAttribute("data-id", value.block.id);
             cellElement.removeAttribute("data-detached");
         }
     }
@@ -1032,7 +1029,7 @@ const renderRollup = (cellValue: IAVCellValue) => {
         }
     } else if (cellValue.type === "block") {
         if (cellValue?.isDetached) {
-            text = `<span class="av__celltext" data-id="${cellValue.block?.id}">${Lute.EscapeHTMLStr(cellValue.block?.content || window.siyuan.languages.untitled)}</span>`;
+            text = `<span class="av__celltext">${Lute.EscapeHTMLStr(cellValue.block?.content || window.siyuan.languages.untitled)}</span>`;
         } else {
             text = `<span data-type="block-ref" data-id="${cellValue.block?.id}" data-subtype="s" class="av__celltext av__celltext--ref">${Lute.EscapeHTMLStr(cellValue.block?.content || window.siyuan.languages.untitled)}</span>`;
         }

app/src/protyle/render/av/gallery/item.ts

@@ -4,7 +4,6 @@ import {fetchPost} from "../../../../util/fetch";
 import {setPage} from "../row";
 import {Constants} from "../../../../constants";
 import {clearSelect} from "../../../util/clearSelect";
-import {hasClosestByClassName} from "../../../util/hasClosest";
 
 export const insertGalleryItemAnimation = (options: {
     blockElement: HTMLElement;
@@ -39,19 +38,11 @@ ${fieldType === "block" ? ' data-detached="true"' : ""}>${renderCell(genCellValu
     clearSelect(["galleryItem"], options.blockElement);
     let html = "";
     const coverClass = sideItemElement?.querySelector(".av__gallery-cover")?.className || "fn__none";
-    options.srcIDs.forEach((id) => {
+    options.srcIDs.forEach(() => {
-        const blockCellElement = options.blockElement.querySelector(`[data-block-id="${id}"]`);
-        if (!blockCellElement) {
             html += `<div class="av__gallery-item" data-type="ghost">
     <div class="${coverClass}"><span style="width: 100%;height: 100%;border-radius: var(--b3-border-radius) var(--b3-border-radius) 0 0;" class="av__pulse"></span></div>
     <div class="av__gallery-fields">${cellsHTML}</div>
 </div>`;
-        } else {
-            const galleryItemElement = hasClosestByClassName(blockCellElement, "av__gallery-item");
-            if (galleryItemElement) {
-                galleryItemElement.classList.add("av__gallery-item--select");
-            }
-        }
     });
     if (sideItemElement) {
         sideItemElement.insertAdjacentHTML("afterend", html);

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

@@ -72,8 +72,7 @@ data-empty="${isEmpty}"
 aria-label="${ariaLabel}" 
 data-position="5west"
 data-id="${cell.id}" 
-data-field-id="${data.fields[fieldsIndex].id}"
+data-field-id="${data.fields[fieldsIndex].id}" 
-${cell.valueType === "block" ? 'data-block-id="' + (cell.value.block.id || "") + '"' : ""} 
 data-dtype="${cell.valueType}" 
 ${cell.value?.isDetached ? ' data-detached="true"' : ""} 
 style="${cell.bgColor ? `background-color:${cell.bgColor};` : ""}

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

@@ -192,8 +192,8 @@ style="width: ${column.width || "200px"}">${getCalcValue(column) || `<svg><use x
             if (cell.valueType === "checkbox") {
                 checkClass = cell.value?.checkbox?.checked ? " av__cell-check" : " av__cell-uncheck";
             }
-            contentHTML += `<div class="av__cell${checkClass}" data-id="${cell.id}" data-col-id="${data.columns[index].id}"
+            contentHTML += `<div class="av__cell${checkClass}" data-id="${cell.id}" data-col-id="${data.columns[index].id}" 
-${cell.valueType === "block" ? 'data-block-id="' + (cell.value.block.id || "") + '"' : ""} data-wrap="${data.columns[index].wrap}" 
+data-wrap="${data.columns[index].wrap}" 
 data-dtype="${data.columns[index].type}" 
 ${cell.value?.isDetached ? ' data-detached="true"' : ""} 
 style="width: ${data.columns[index].width || "200px"};
@@ -725,7 +725,7 @@ export const refreshAV = (protyle: IProtyle, operation: IOperation) => {
                             });
                         }
                         if (operation.srcs.length === 1) {
-                            const popCellElement = item.querySelector(`.av__body${groupQuery} .av__cell[data-block-id="${operation.srcs[0].id}"]`) as HTMLElement;
+                            const popCellElement = item.querySelector(`.av__body${groupQuery} [data-id="${operation.srcs[0].id}"] .av__cell[data-dtype="block"]`) as HTMLElement;
                             if (popCellElement) {
                                 popTextCell(protyle, [popCellElement], "block");
                             }

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

@@ -154,16 +154,10 @@ ${colType === "block" ? ' data-detached="true"' : ""}>${renderCell(genCellValue(
     });
     let html = "";
     clearSelect(["cell", "row"], options.blockElement);
-    options.srcIDs.forEach((id) => {
+    options.srcIDs.forEach(() => {
-        const blockCellElement = options.blockElement.querySelector(`[data-block-id="${id}"]`);
+        html += `<div class="av__row" data-type="ghost">
-        if (!blockCellElement) {
-            html += `<div class="av__row" data-type="ghost">
     ${cellsHTML}
 </div>`;
-        } else {
-            addDragFill(blockCellElement);
-            blockCellElement.classList.add("av__cell--select");
-        }
     });
     previousElement.insertAdjacentHTML("afterend", html);
     fetchPost("/api/av/getAttributeViewAddingBlockDefaultValues", {
@@ -357,10 +351,10 @@ export const deleteRow = (blockElement: HTMLElement, protyle: IProtyle) => {
     const undoOperations: IOperation[] = [];
     const blockIds: string[] = [];
     rowElements.forEach(item => {
-        blockIds.push(item.querySelector(".av__cell[data-block-id]").getAttribute("data-block-id"));
+        blockIds.push(item.getAttribute("data-id"));
     });
     rowElements.forEach(item => {
-        const blockValue = genCellValueByElement("block", item.querySelector(".av__cell[data-block-id]"));
+        const blockValue = genCellValueByElement("block", item.querySelector('.av__cell[data-dtype="block"]'));
         undoOperations.push({
             action: "insertAttrViewBlock",
             avID,

app/src/protyle/util/insertHTML.ts

@@ -19,6 +19,7 @@ import {updateCellsValue} from "../render/av/cell";
 import {input} from "../wysiwyg/input";
 import {fetchPost} from "../../util/fetch";
 import {isIncludeCell} from "./table";
+import {getFieldIdByCellElement} from "../render/av/row";
 
 const processAV = (range: Range, html: string, protyle: IProtyle, blockElement: HTMLElement) => {
     const tempElement = document.createElement("template");
@@ -111,7 +112,7 @@ const processAV = (range: Range, html: string, protyle: IProtyle, blockElement:
             const selectCellElement = blockElement.querySelector(".av__cell--select") as HTMLElement;
             if (selectCellElement) {
                 const sourceId = contenteditableElement.firstElementChild.getAttribute("data-id");
-                const previousID = selectCellElement.dataset.blockId;
+                const previousID = getFieldIdByCellElement(selectCellElement, blockElement.getAttribute("data-av-type") as TAVView);
                 transaction(protyle, [{
                     action: "replaceAttrViewBlock",
                     avID,