✨ https://github.com/siyuan-note/siyuan/issues/8895 block attr

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

@@ -136,77 +136,6 @@ const popDateMenu = (dateElement: HTMLElement) => {
     });
 }
 
-const popSelectMenu = (mSelectElement: HTMLElement) => {
-    const mSelectMenu = new Menu("custom-attr-av-select", () => {
-        const mSelect: { content: string, color: string }[] = [];
-        let mSelectHTML = "";
-        window.siyuan.menus.menu.element.querySelectorAll(".svg").forEach(item => {
-            const chipElement = item.parentElement.previousElementSibling.firstElementChild as HTMLElement;
-            const content = chipElement.textContent.trim();
-            const color = chipElement.dataset.color;
-            mSelect.push({
-                content,
-                color
-            });
-            mSelectHTML += `<span class="b3-chip b3-chip--middle" style="background-color:var(--b3-font-background${color});color:var(--b3-font-color${color})">${content}</span>`;
-        });
-        fetchPost("/api/av/setAttributeViewBlockAttr", {
-            avID: mSelectElement.dataset.avId,
-            keyID: mSelectElement.dataset.colId,
-            rowID: mSelectElement.dataset.blockId,
-            cellID: mSelectElement.dataset.id,
-            value: {
-                mSelect
-            }
-        });
-        mSelectElement.innerHTML = mSelectHTML;
-    });
-    if (mSelectMenu.isOpen) {
-        return;
-    }
-    const names: string[] = [];
-    mSelectElement.querySelectorAll(".b3-chip").forEach(item => {
-        names.push(item.textContent.trim());
-    });
-    JSON.parse(mSelectElement.dataset.options || "").forEach((item: { name: string, color: string }) => {
-        mSelectMenu.addItem({
-            iconHTML: "",
-            label: `<span class="b3-chip" data-color="${item.color}" style="height:24px;background-color:var(--b3-font-background${item.color});color:var(--b3-font-color${item.color})">
-    <span class="fn__ellipsis">${item.name}</span>
-</span>`,
-            accelerator: names.includes(item.name) ? '<svg class="svg" style="height: 30px; float: left;"><use xlink:href="#iconSelect"></use></svg>' : Constants.ZWSP,
-            click(element) {
-                const acceleratorElement = element.querySelector(".b3-menu__accelerator");
-                if (mSelectElement.dataset.type === "select") {
-                    window.siyuan.menus.menu.element.querySelectorAll(".b3-menu__accelerator").forEach(itemElement => {
-                        if (itemElement.isSameNode(acceleratorElement)) {
-                            if (acceleratorElement.querySelector("svg")) {
-                                acceleratorElement.innerHTML = "";
-                            } else {
-                                acceleratorElement.innerHTML = '<svg class="svg" style="height: 30px; float: left;"><use xlink:href="#iconSelect"></use></svg>';
-                            }
-                        } else {
-                            itemElement.innerHTML = "";
-                        }
-                    });
-                    return false;
-                }
-                if (acceleratorElement.querySelector("svg")) {
-                    acceleratorElement.innerHTML = "";
-                } else {
-                    acceleratorElement.innerHTML = '<svg class="svg" style="height: 30px; float: left;"><use xlink:href="#iconSelect"></use></svg>';
-                }
-                return true;
-            }
-        });
-    });
-    const mSelecttRect = mSelectElement.getBoundingClientRect();
-    mSelectMenu.open({
-        x: mSelecttRect.left,
-        y: mSelecttRect.bottom
-    });
-}
-
 export const renderAVAttribute = (element: HTMLElement, id: string, protyle?: IProtyle) => {
     fetchPost("/api/av/getAttributeViewKeys", {id}, (response) => {
         let html = "";
@@ -252,7 +181,7 @@ class="fn__flex-1 fn__flex${["url", "text", "number", "email", "phone"].includes
             }
             const mSelectElement = hasClosestByAttribute(target, "data-type", "select") || hasClosestByAttribute(target, "data-type", "mSelect");
             if (mSelectElement) {
-                popSelectMenu(mSelectElement);
+                popTextCell(protyle, [mSelectElement], mSelectElement.getAttribute("data-type") as TAVCol);
                 event.stopPropagation();
                 event.preventDefault();
                 return;

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

@@ -5,6 +5,7 @@ import {confirmDialog} from "../../../dialog/confirmDialog";
 import {upDownHint} from "../../../util/upDownHint";
 import {bindEditEvent, getEditHTML} from "./col";
 import {updateAttrViewCellAnimation} from "./action";
+import {genAVValueHTML} from "./blockAttr";
 
 const filterSelectHTML = (key: string, options: { name: string, color: string }[]) => {
     let html = "";
@@ -98,7 +99,11 @@ export const removeCellOption = (protyle: IProtyle, data: IAV, cellElements: HTM
                 mSelect: oldValue
             }
         });
+        if (item.classList.contains("custom-attr__avvalue")) {
+            item.innerHTML = genAVValueHTML(cellData.value);
+        } else {
             updateAttrViewCellAnimation(item);
+        }
     });
     transaction(protyle, doOperations, undoOperations);
     target.remove();
@@ -161,6 +166,11 @@ export const setColOption = (protyle: IProtyle, data: IAV, target: HTMLElement,
                                         return true;
                                     }
                                 });
+                                if (cellElement.classList.contains("custom-attr__avvalue")) {
+                                    cellElement.innerHTML = genAVValueHTML(cell.value);
+                                } else {
+                                    updateAttrViewCellAnimation(cellElement);
+                                }
                                 return true;
                             }
                         });
@@ -234,6 +244,11 @@ export const setColOption = (protyle: IProtyle, data: IAV, target: HTMLElement,
                                                 return true;
                                             }
                                         });
+                                        if (cellElement.classList.contains("custom-attr__avvalue")) {
+                                            cellElement.innerHTML = genAVValueHTML(cell.value);
+                                        } else {
+                                            updateAttrViewCellAnimation(cellElement);
+                                        }
                                         return true;
                                     }
                                 });
@@ -309,6 +324,11 @@ export const setColOption = (protyle: IProtyle, data: IAV, target: HTMLElement,
                                                 return true;
                                             }
                                         });
+                                        if (cellElement.classList.contains("custom-attr__avvalue")) {
+                                            cellElement.innerHTML = genAVValueHTML(cell.value);
+                                        } else {
+                                            updateAttrViewCellAnimation(cellElement);
+                                        }
                                         return true;
                                     }
                                 });
@@ -394,7 +414,7 @@ export const addColOptionOrCell = (protyle: IProtyle, data: IAV, cellElements: H
     }
 
     const colId = cellElements[0].dataset.colId;
-    let cellIndex = 0;
+    let cellIndex: number;
     Array.from(cellElements[0].parentElement.querySelectorAll(".av__cell")).find((item: HTMLElement, index) => {
         if (item.dataset.id === cellElements[0].dataset.id) {
             cellIndex = index;
@@ -420,12 +440,20 @@ export const addColOptionOrCell = (protyle: IProtyle, data: IAV, cellElements: H
         const rowID = item.parentElement.dataset.id;
         data.view.rows.find(row => {
             if (row.id === rowID) {
+                if (typeof cellIndex === "number") {
                     cellData = row.cells[cellIndex];
                     // 为空时 cellId 每次请求都不一致
                     cellData.id = item.dataset.id;
                     if (!cellData.value || !cellData.value.mSelect) {
                         cellData.value = {mSelect: []} as IAVCellValue;
                     }
+                } else {
+                    cellData = row.cells.find(cellItem => {
+                        if (cellItem.id === item.dataset.id) {
+                            return true;
+                        }
+                    });
+                }
                 return true;
             }
         });
@@ -479,7 +507,11 @@ export const addColOptionOrCell = (protyle: IProtyle, data: IAV, cellElements: H
                 [colData.type]: oldValue
             }
         });
+        if (item.classList.contains("custom-attr__avvalue")) {
+            item.innerHTML = genAVValueHTML(cellData.value);
+        } else {
             updateAttrViewCellAnimation(item);
+        }
     });
 
     if (currentElement.querySelector(".b3-menu__accelerator")) {