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

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

@@ -63,15 +63,35 @@ export const avClick = (protyle: IProtyle, event: MouseEvent & { target: HTMLEle
         return true;
     }
 
-    const gutterElement = hasClosestByClassName(event.target, "av__gutters");
+    const gutterElement = hasClosestByClassName(event.target, "ariaLabel");
-    if (gutterElement) {
+    if (gutterElement && gutterElement.parentElement.classList.contains("av__gutters")) {
-        const gutterRect = gutterElement.getBoundingClientRect();
+        const rowElement = gutterElement.parentElement.parentElement;
-        avContextmenu(protyle, gutterElement.parentElement, {
+        if (gutterElement.dataset.action === "add") {
-            x: gutterRect.left,
+            const avID = blockElement.getAttribute("data-av-id");
-            y: gutterRect.bottom,
+            const srcIDs = [Lute.NewNodeID()];
-            w: gutterRect.width,
+            const previousID = event.altKey ? (rowElement.previousElementSibling.getAttribute("data-id") || "") : rowElement.getAttribute("data-id");
-            h: gutterRect.height
+            transaction(protyle, [{
-        });
+                action: "insertAttrViewBlock",
+                avID,
+                previousID,
+                srcIDs,
+                isDetached: true,
+            }], [{
+                action: "removeAttrViewBlock",
+                srcIDs,
+                avID,
+            }]);
+            insertAttrViewBlockAnimation(blockElement, 1, previousID, avID);
+            popTextCell(protyle, [rowElement[event.altKey ? "previousElementSibling" : "nextElementSibling"].querySelector('[data-detached="true"]')], "block");
+        } else {
+            const gutterRect = gutterElement.getBoundingClientRect();
+            avContextmenu(protyle, rowElement, {
+                x: gutterRect.left,
+                y: gutterRect.bottom,
+                w: gutterRect.width,
+                h: gutterRect.height
+            });
+        }
         event.preventDefault();
         event.stopPropagation();
         return true;
@@ -373,7 +393,7 @@ export const updateAVName = (protyle: IProtyle, blockElement: Element) => {
 
     // 当前页面不能进行推送，否则光标会乱跳
     Array.from(protyle.wysiwyg.element.querySelectorAll(`[data-av-id="${avId}"]`)).forEach((item: HTMLElement) => {
-        if(blockElement.isSameNode(item)) {
+        if (blockElement.isSameNode(item)) {
             return;
         }
         const titleElement = item.querySelector(".av__title") as HTMLElement;

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

@@ -464,7 +464,8 @@ const updateCellValue = (protyle: IProtyle, type: TAVCol, cellElements: HTMLElem
         const avid = cellElements[0].parentElement.dataset.avid;
         if (avid) {
             // 新增行后弹出的输入框
-            cellElements[0] = protyle.wysiwyg.element.querySelector(`[data-av-id="${avid}"] .av__row--add`).previousElementSibling.querySelector('[data-detached="true"]');
+            const previousId = cellElements[0].parentElement.dataset.previousId;
+            cellElements[0] = protyle.wysiwyg.element.querySelector(previousId ? `[data-av-id="${avid}"] .av__row[data-id="${previousId}"]` : `[data-av-id="${avid}"] .av__row--header`).nextElementSibling.querySelector('[data-detached="true"]');
         } else {
             // 修改单元格后立即修改其他单元格
             cellElements[0] = protyle.wysiwyg.element.querySelector(`.av__cell[data-id="${cellElements[0].dataset.id}"]`);

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

@@ -81,7 +81,7 @@ style="width: ${column.width || "200px"}">${getCalcValue(column) || '<svg><use x
                 data.rows.forEach((row: IAVRow) => {
                     tableHTML += `<div class="av__row" data-id="${row.id}">
 <div class="av__gutters">
-    <button class="ariaLabel" data-position="right" aria-label="${isMac() ? window.siyuan.languages.addBelowAbove : window.siyuan.languages.addBelowAbove.replace("⌥", "Alt+")}"><svg><use xlink:href="#iconAdd"></use></svg></button>
+    <button class="ariaLabel" data-action="add" data-position="right" aria-label="${isMac() ? window.siyuan.languages.addBelowAbove : window.siyuan.languages.addBelowAbove.replace("⌥", "Alt+")}"><svg><use xlink:href="#iconAdd"></use></svg></button>
     <button class="ariaLabel" draggable="true" data-position="right" aria-label="${window.siyuan.languages.rowTip}"><svg><use xlink:href="#iconDrag"></use></svg></button>
 </div>
 <div class="av__firstcol"><svg><use xlink:href="#iconUncheck"></use></svg></div>`;

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

@@ -67,7 +67,7 @@ export const insertAttrViewBlockAnimation = (blockElement: Element, size: number
 
     let html = "";
     new Array(size).fill(1).forEach(() => {
-        html += `<div class="av__row" data-avid="${avId}">
+        html += `<div class="av__row" data-avid="${avId}" data-previous-id="${previousId}">
     <div style="width: 24px"></div>
     ${colHTML}
 </div>`;

app/src/protyle/util/editorCommonEvent.ts

@@ -726,12 +726,12 @@ export const dropEvent = (protyle: IProtyle, editorElement: HTMLElement) => {
                 event.dataTransfer.setData(`${Constants.SIYUAN_DROP_GUTTER}NodeAttributeView${Constants.ZWSP}Col${Constants.ZWSP}${[target.parentElement.getAttribute("data-col-id")]}`,
                     target.innerHTML);
                 return;
-            } else if (target.classList.contains("av__gutters")) {
+            } else if (target.classList.contains("ariaLabel")) {
                 const blockElement = hasClosestBlock(target);
                 if (!blockElement) {
                     return;
                 }
-                const rowElement = target.parentElement;
+                const rowElement = target.parentElement.parentElement;
                 const selectIds = [];
                 if (rowElement.classList.contains("av__row--select")) {
                     rowElement.parentElement.querySelectorAll(".av__row--select:not(.av__row--header)").forEach((item) => {