🎨 fix https://github.com/siyuan-note/siyuan/issues/9420

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

@@ -17,6 +17,7 @@ import {isLocalPath, pathPosix} from "../../../util/pathName";
 import {Constants} from "../../../constants";
 import {openAsset} from "../../../editor/util";
 import {getSearch, isMobile} from "../../../util/functions";
+import {unicode2Emoji} from "../../../emoji";
 
 export const avClick = (protyle: IProtyle, event: MouseEvent & { target: HTMLElement }) => {
     const blockElement = hasClosestBlock(event.target);
@@ -301,10 +302,12 @@ export const avContextmenu = (protyle: IProtyle, event: MouseEvent & { detail: a
                 }
             });
         }
-        if (!hideBlock) {
+        const type = cellElement.getAttribute("data-dtype") as TAVCol;
+        if (!hideBlock && !["updated", "created", "template"].includes(type)) {
+            const icon = cellElement.dataset.icon;
             editAttrSubmenu.push({
-                icon: getColIconByType(cellElement.getAttribute("data-dtype") as TAVCol),
+                iconHTML: icon ? unicode2Emoji(icon, "b3-menu__icon", true) : `<svg class="b3-menu__icon"><use xlink:href="#${getColIconByType(type)}"></use></svg>`,
-                label: cellElement.textContent.trim(),
+                label: cellElement.querySelector(".av__celltext").textContent.trim(),
                 click() {
                     popTextCell(protyle, selectElements);
                 }
@@ -338,19 +341,20 @@ export const avContextmenu = (protyle: IProtyle, event: MouseEvent & { detail: a
 export const updateAVName = (protyle: IProtyle, blockElement: Element) => {
     const avId = blockElement.getAttribute("data-av-id");
     const nameElement = blockElement.querySelector(".av__title") as HTMLElement;
-    if (nameElement.textContent.trim() === nameElement.dataset.title.trim()) {
+    const newData = nameElement.textContent.trim();
+    if (newData === nameElement.dataset.title.trim()) {
         return;
     }
     transaction(protyle, [{
         action: "setAttrViewName",
         id: avId,
-        data: nameElement.textContent.trim(),
+        data: newData,
     }], [{
         action: "setAttrViewName",
         id: avId,
         name: nameElement.dataset.title,
     }]);
-    nameElement.dataset.title = nameElement.textContent.trim();
+    nameElement.dataset.title = newData;
 };
 
 export const updateAttrViewCellAnimation = (cellElement: HTMLElement) => {

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

@@ -352,10 +352,24 @@ export const popTextCell = (protyle: IProtyle, cellElements: HTMLElement[], type
     if (type === "block" && (cellElements.length > 1 || !cellElements[0].getAttribute("data-detached"))) {
         return;
     }
-    const cellRect = cellElements[0].getBoundingClientRect();
+    const blockElement = hasClosestBlock(cellElements[0]);
+    let cellRect = cellElements[0].getBoundingClientRect();
+    if (blockElement) {
+        const avScrollElement = blockElement.querySelector(".av__scroll");
+        const avScrollRect = avScrollElement.getBoundingClientRect();
+        if (avScrollRect.left > cellRect.left) {
+            avScrollElement.scrollLeft = avScrollElement.scrollLeft + cellRect.left - avScrollRect.left;
+        } else if (avScrollRect.right < cellRect.right) {
+            avScrollElement.scrollLeft = avScrollElement.scrollLeft + cellRect.right - avScrollRect.right;
+        }
+        const avHeaderRect = blockElement.querySelector(".av__header").getBoundingClientRect()
+        if (avHeaderRect.bottom > cellRect.top) {
+            protyle.contentElement.scrollTop = protyle.contentElement.scrollTop + cellRect.top - avHeaderRect.bottom;
+        }
+    }
+    cellRect = cellElements[0].getBoundingClientRect();
     let html = "";
     const style = `style="position:absolute;left: ${cellRect.left}px;top: ${cellRect.top}px;width:${Math.max(cellRect.width, 100)}px;height: ${cellRect.height}px"`;
-    const blockElement = hasClosestBlock(cellElements[0]);
     if (["text", "url", "email", "phone", "block"].includes(type)) {
         html = `<textarea ${style} class="b3-text-field">${cellElements[0].firstElementChild.textContent}</textarea>`;
     } else if (type === "number") {

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

@@ -322,7 +322,7 @@ export const addFilter = (options: {
         if (!hasFilter && column.type !== "mAsset") {
             menu.addItem({
                 label: column.name,
-                iconHTML: `<span style="align-self: center;margin-right: 8px;width: 14px;" class="block__icon block__icon--show">${column.icon ? unicode2Emoji(column.icon) : `<svg><use xlink:href="#${getColIconByType(column.type)}"></use></svg>`}</span>`,
+                iconHTML: column.icon ? unicode2Emoji(column.icon, "b3-menu__icon", true) : `<svg class="b3-menu__icon"><use xlink:href="#${getColIconByType(column.type)}"></use></svg>`,
                 click: () => {
                     const oldFilters = Object.assign([], options.data.view.filters);
                     const cellValue = genCellValue(column.type, "");

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

@@ -24,7 +24,7 @@ export const addSort = (options: {
         if (!hasSort) {
             menu.addItem({
                 label: column.name,
-                iconHTML: `<span style="align-self: center;margin-right: 8px;width: 14px;" class="block__icon block__icon--show">${column.icon ? unicode2Emoji(column.icon) : `<svg><use xlink:href="#${getColIconByType(column.type)}"></use></svg>`}</span>`,
+                iconHTML: column.icon ? unicode2Emoji(column.icon, "b3-menu__icon", true) : `<svg class="b3-menu__icon"><use xlink:href="#${getColIconByType(column.type)}"></use></svg>`,
                 click: () => {
                     const oldSorts = Object.assign([], options.data.view.sorts);
                     options.data.view.sorts.push({