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

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

@@ -24,6 +24,7 @@ import {unicode2Emoji} from "../../../emoji";
 import {selectRow} from "./row";
 import * as dayjs from "dayjs";
 import {openCalcMenu} from "./calc";
+import {avRender} from "./render";
 
 export const avClick = (protyle: IProtyle, event: MouseEvent & { target: HTMLElement }) => {
     const blockElement = hasClosestBlock(event.target);
@@ -51,14 +52,17 @@ export const avClick = (protyle: IProtyle, event: MouseEvent & { target: HTMLEle
         event.stopPropagation();
         return true;
     }
+
     if (protyle.disabled) {
         return false;
     }
 
-    const addElement = hasClosestByAttribute(event.target, "data-type", "av-header-add");
+    let target = event.target
-    if (addElement) {
+    while (target && !target.isEqualNode(blockElement)) {
+        const type = target.getAttribute("data-type")
+        if (type === "av-header-add") {
             const addMenu = addCol(protyle, blockElement);
-        const addRect = addElement.getBoundingClientRect();
+            const addRect = target.getBoundingClientRect();
             addMenu.open({
                 x: addRect.left,
                 y: addRect.bottom,
@@ -67,15 +71,55 @@ export const avClick = (protyle: IProtyle, event: MouseEvent & { target: HTMLEle
             event.preventDefault();
             event.stopPropagation();
             return true;
-    }
+        } else if (type === "av-header-more") {
-
+            openMenuPanel({protyle, blockElement, type: "properties"});
-    const gutterElement = hasClosestByClassName(event.target, "av__gutter");
+            event.preventDefault();
-    if (gutterElement) {
+            event.stopPropagation();
-        const rowElement = hasClosestByClassName(gutterElement, "av__row");
+            return true;
+        } else if (type === "av-more") {
+            openMenuPanel({protyle, blockElement, type: "config"});
+            event.preventDefault();
+            event.stopPropagation();
+            return true;
+        } else if (type === "av-sort") {
+            openMenuPanel({protyle, blockElement, type: "sorts"});
+            event.preventDefault();
+            event.stopPropagation();
+            return true;
+        } else if (type === "av-filter") {
+            openMenuPanel({protyle, blockElement, type: "filters"});
+            event.preventDefault();
+            event.stopPropagation();
+            return true;
+        } else if (type === "av-add") {
+            const id = Lute.NewNodeID();
+            const avID = blockElement.getAttribute("data-av-id");
+            transaction(protyle, [{
+                action: "addAttrViewView",
+                avID,
+                id
+            }], [{
+                action: "removeAttrViewView",
+                avID,
+                id
+            }]);
+            event.preventDefault();
+            event.stopPropagation();
+            return true;
+        } else if (type === "block-more") {
+            protyle.toolbar.range = document.createRange();
+            protyle.toolbar.range.selectNodeContents(target);
+            focusByRange(protyle.toolbar.range);
+            hintRef(target.previousElementSibling.textContent.trim(), protyle, "av");
+            event.preventDefault();
+            event.stopPropagation();
+            return true;
+        } else if (target.classList.contains("av__gutter")) {
+            const rowElement = hasClosestByClassName(target, "av__row");
             if (!rowElement) {
                 return;
             }
-        if (gutterElement.dataset.action === "add") {
+            if (target.dataset.action === "add") {
                 const avID = blockElement.getAttribute("data-av-id");
                 const srcIDs = [Lute.NewNodeID()];
                 const previousID = event.altKey ? (rowElement.previousElementSibling.getAttribute("data-id") || "") : rowElement.getAttribute("data-id");
@@ -92,7 +136,7 @@ export const avClick = (protyle: IProtyle, event: MouseEvent & { target: HTMLEle
                 }]);
                 insertAttrViewBlockAnimation(blockElement, 1, previousID, avID);
             } else {
-            const gutterRect = gutterElement.getBoundingClientRect();
+                const gutterRect = target.getBoundingClientRect();
                 avContextmenu(protyle, rowElement, {
                     x: gutterRect.left,
                     y: gutterRect.bottom,
@@ -103,76 +147,20 @@ export const avClick = (protyle: IProtyle, event: MouseEvent & { target: HTMLEle
             event.preventDefault();
             event.stopPropagation();
             return true;
-    }
+        } else if (target.classList.contains("av__firstcol")) {
-
-    const checkElement = hasClosestByClassName(event.target, "av__firstcol");
-    if (checkElement) {
             window.siyuan.menus.menu.remove();
-        selectRow(checkElement, "toggle");
+            selectRow(target, "toggle");
             event.preventDefault();
             event.stopPropagation();
             return true;
-    }
+        } else if (target.classList.contains("av__celltext--url")) {
-
+            let linkAddress = target.textContent.trim();
-    const headerMoreElement = hasClosestByAttribute(event.target, "data-type", "av-header-more");
+            if (target.dataset.type === "phone") {
-    if (headerMoreElement) {
-        openMenuPanel({protyle, blockElement, type: "properties"});
-        event.preventDefault();
-        event.stopPropagation();
-        return true;
-    }
-
-    const moreElement = hasClosestByAttribute(event.target, "data-type", "av-more");
-    if (moreElement) {
-        openMenuPanel({protyle, blockElement, type: "config"});
-        event.preventDefault();
-        event.stopPropagation();
-        return true;
-    }
-
-    const sortsElement = hasClosestByAttribute(event.target, "data-type", "av-sort");
-    if (sortsElement) {
-        openMenuPanel({protyle, blockElement, type: "sorts"});
-        event.preventDefault();
-        event.stopPropagation();
-        return true;
-    }
-
-    const filtersElement = hasClosestByAttribute(event.target, "data-type", "av-filter");
-    if (filtersElement) {
-        openMenuPanel({protyle, blockElement, type: "filters"});
-        event.preventDefault();
-        event.stopPropagation();
-        return true;
-    }
-
-    const addTabElement = hasClosestByAttribute(event.target, "data-type", "av-add");
-    if (addTabElement) {
-        const id = Lute.NewNodeID();
-        const avID = blockElement.getAttribute("data-av-id");
-        transaction(protyle, [{
-            action: "addAttrViewView",
-            avID,
-            id
-        }], [{
-            action: "removeAttrViewView",
-            avID,
-            id
-        }]);
-        event.preventDefault();
-        event.stopPropagation();
-        return true;
-    }
-
-    const linkElement = hasClosestByClassName(event.target, "av__celltext--url");
-    if (linkElement) {
-        let linkAddress = linkElement.textContent.trim();
-        if (linkElement.dataset.type === "phone") {
                 linkAddress = "tel:" + linkAddress;
-        } else if (linkElement.dataset.type === "email") {
+            } else if (target.dataset.type === "email") {
                 linkAddress = "mailto:" + linkAddress;
-        } else if (linkElement.classList.contains("b3-chip")) {
+            } else if (target.classList.contains("b3-chip")) {
-            linkAddress = linkElement.dataset.url;
+                linkAddress = target.dataset.url;
             }
             /// #if !MOBILE
             const suffix = pathPosix().extname(linkAddress);
@@ -192,47 +180,28 @@ export const avClick = (protyle: IProtyle, event: MouseEvent & { target: HTMLEle
             event.preventDefault();
             event.stopPropagation();
             return true;
-    }
+        } else if (target.classList.contains("av__cellassetimg")) {
-
+            previewImage((target as HTMLImageElement).src);
-    const imgElement = hasClosestByClassName(event.target, "av__cellassetimg") as HTMLImageElement;
-    if (imgElement) {
-        previewImage(imgElement.src);
             event.preventDefault();
             event.stopPropagation();
             return true;
-    }
+        } else if (target.classList.contains("av__cellheader")) {
-
+            showColMenu(protyle, blockElement, target.parentElement);
-    const cellHeaderElement = hasClosestByClassName(event.target, "av__cellheader");
-    if (cellHeaderElement) {
-        showColMenu(protyle, blockElement, cellHeaderElement.parentElement);
             event.preventDefault();
             event.stopPropagation();
             return true;
-    }
+        } else if (target.classList.contains("av__cell")) {
-
+            if (!hasClosestByClassName(target, "av__row--header")) {
-    const blockMoreElement = hasClosestByAttribute(event.target, "data-type", "block-more");
+                const scrollElement = hasClosestByClassName(target, "av__scroll");
-    if (blockMoreElement) {
-        protyle.toolbar.range = document.createRange();
-        protyle.toolbar.range.selectNodeContents(blockMoreElement);
-        focusByRange(protyle.toolbar.range);
-        hintRef(blockMoreElement.previousElementSibling.textContent.trim(), protyle, "av");
-        event.preventDefault();
-        event.stopPropagation();
-        return true;
-    }
-
-    const cellElement = hasClosestByClassName(event.target, "av__cell");
-    if (cellElement && !hasClosestByClassName(cellElement, "av__row--header")) {
-        const scrollElement = hasClosestByClassName(cellElement, "av__scroll");
                 if (!scrollElement) {
                     return;
                 }
-        const rowElement = hasClosestByClassName(cellElement, "av__row");
+                const rowElement = hasClosestByClassName(target, "av__row");
                 if (!rowElement) {
                     return;
                 }
-        const type = getTypeByCellElement(cellElement);
+                const type = getTypeByCellElement(target);
-        if (type === "updated" || type === "created" || (type === "block" && !cellElement.getAttribute("data-detached"))) {
+                if (type === "updated" || type === "created" || (type === "block" && !target.getAttribute("data-detached"))) {
                     selectRow(rowElement.querySelector(".av__firstcol"), "toggle");
                 } else {
                     scrollElement.querySelectorAll(".av__row--select").forEach(item => {
@@ -240,26 +209,21 @@ export const avClick = (protyle: IProtyle, event: MouseEvent & { target: HTMLEle
                         item.classList.remove("av__row--select");
                     });
                     updateHeader(rowElement);
-            popTextCell(protyle, [cellElement]);
+                    popTextCell(protyle, [target]);
+                }
             }
             event.preventDefault();
             event.stopPropagation();
             return true;
-    }
+        } else if (target.classList.contains("av__calc")) {
-
+            openCalcMenu(protyle, target);
-    const calcElement = hasClosestByClassName(event.target, "av__calc");
-    if (calcElement) {
-        openCalcMenu(protyle, calcElement);
             event.preventDefault();
             event.stopPropagation();
             return true;
-    }
+        } else if (target.classList.contains("av__row--add")) {
-
-    const addRowElement = hasClosestByClassName(event.target, "av__row--add");
-    if (addRowElement) {
             const avID = blockElement.getAttribute("data-av-id");
             const srcIDs = [Lute.NewNodeID()];
-        const previousID = addRowElement.previousElementSibling.getAttribute("data-id") || "";
+            const previousID = target.previousElementSibling.getAttribute("data-id") || "";
             transaction(protyle, [{
                 action: "insertAttrViewBlock",
                 avID,
@@ -275,8 +239,16 @@ export const avClick = (protyle: IProtyle, event: MouseEvent & { target: HTMLEle
             event.preventDefault();
             event.stopPropagation();
             return true;
+        } else if (target.classList.contains("item") && target.parentElement.classList.contains("layout-tab-bar")) {
+            if (!target.classList.contains("item--focus")) {
+                avRender(blockElement, protyle, undefined, target.dataset.id);
+            }
+            event.preventDefault();
+            event.stopPropagation();
+            return true;
+        }
+        target = target.parentElement;
     }
-
     return false;
 };
 

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

@@ -10,7 +10,7 @@ import {hasClosestByClassName} from "../../util/hasClosest";
 import {stickyRow} from "./row";
 import {getCalcValue} from "./calc";
 
-export const avRender = (element: Element, protyle: IProtyle, cb?: () => void) => {
+export const avRender = (element: Element, protyle: IProtyle, cb?: () => void, viewID?: string) => {
     let avElements: Element[] = [];
     if (element.getAttribute("data-type") === "NodeAttributeView") {
         // 编辑器内代码块编辑渲染
@@ -56,7 +56,7 @@ export const avRender = (element: Element, protyle: IProtyle, cb?: () => void) =
                 id: e.getAttribute("data-av-id"),
                 created,
                 snapshot,
-                viewID: e.querySelector(".av__header .item--focus")?.getAttribute("data-id")
+                viewID: viewID || e.querySelector(".av__header .item--focus")?.getAttribute("data-id")
             }, (response) => {
                 const data = response.data.view as IAVTable;
                 // header