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

app/src/block/popover.ts

@@ -22,7 +22,7 @@ export const initBlockPopover = (app: App) => {
         if (aElement) {
             let tip = aElement.getAttribute("aria-label") || aElement.getAttribute("data-inline-memo-content");
             if (aElement.classList.contains("av__celltext")) {
-                if (aElement.offsetWidth > aElement.parentElement.clientWidth - 11) {
+                if (aElement.offsetWidth > aElement.parentElement.clientWidth - 5) {    // 只能减左边 padding，换行时字体会穿透到右侧 padding
                     if (aElement.querySelector(".av__cellicon")) {
                         tip = `${aElement.firstChild.textContent} → ${aElement.lastChild.textContent}`;
                     } else {

app/src/menus/index.ts

@@ -22,7 +22,8 @@ export class Menus {
                 return;
             }
             let target = event.target as HTMLElement;
-            while (target && !target.parentElement.isEqualNode(document.querySelector("body"))) {
+            while (target && target.parentElement   // ⌃⇥ 后点击会为空
+            && !target.parentElement.isEqualNode(document.querySelector("body"))) {
                 event.preventDefault();
                 const dataType = target.getAttribute("data-type");
                 if (dataType === "tab-header") {

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

@@ -7,6 +7,7 @@ import {unicode2Emoji} from "../../../emoji";
 import {focusBlock} from "../../util/selection";
 import {isMac} from "../../util/compatibility";
 import {hasClosestByClassName} from "../../util/hasClosest";
+import {stickyRow} from "./row";
 
 export const avRender = (element: Element, protyle: IProtyle, cb?: () => void) => {
     let avElements: Element[] = [];
@@ -240,12 +241,19 @@ ${cell.color ? `color:${cell.color};` : ""}">${text}</div>`;
                     if (left) {
                         e.querySelector(".av__scroll").scrollLeft = left;
                     }
+
+                    const editRect = protyle.contentElement.getBoundingClientRect();
                     if (headerTransform) {
                         (e.querySelector(".av__row--header") as HTMLElement).style.transform = headerTransform;
+                    } else {
+                        stickyRow(e, editRect, "top");
                     }
                     if (footerTransform) {
                         (e.querySelector(".av__row--footer") as HTMLElement).style.transform = footerTransform;
+                    } else {
+                        stickyRow(e, editRect, "bottom");
                     }
+
                     if (selectCellId) {
                         const newCellElement = e.querySelector(`.av__row[data-id="${selectCellId.split(Constants.ZWSP)[0]}"] .av__cell[data-col-id="${selectCellId.split(Constants.ZWSP)[1]}"]`);
                         if (newCellElement) {

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

@@ -89,3 +89,30 @@ export const insertAttrViewBlockAnimation = (blockElement: Element, size: number
     });
     previousElement.insertAdjacentHTML("afterend", html);
 };
+
+export const stickyRow = (blockElement: HTMLElement, elementRect: DOMRect, status: "top" | "bottom" | "all") => {
+    const scrollRect = blockElement.querySelector(".av__scroll").getBoundingClientRect();
+    const headerElement = blockElement.querySelector(".av__row--header") as HTMLElement;
+    if (headerElement && (status === "top" || status === "all")) {
+        const distance = Math.floor(elementRect.top - scrollRect.top);
+        if (distance > 0 && distance < scrollRect.height) {
+            headerElement.style.transform = `translateY(${distance}px)`;
+        } else {
+            headerElement.style.transform = "";
+        }
+    }
+
+    const footerElement = blockElement.querySelector(".av__row--footer") as HTMLElement;
+    if (footerElement && (status === "bottom" || status === "all")) {
+        if (footerElement.querySelector(".av__calc--ashow")) {
+            const distance = Math.ceil(elementRect.bottom - footerElement.parentElement.getBoundingClientRect().bottom);
+            if (distance < 0 && -distance < scrollRect.height) {
+                footerElement.style.transform = `translateY(${distance}px)`;
+            } else {
+                footerElement.style.transform = "";
+            }
+        } else {
+            footerElement.style.transform = "";
+        }
+    }
+}

app/src/protyle/scroll/event.ts

@@ -4,6 +4,7 @@ import {fetchPost} from "../../util/fetch";
 import {onGet} from "../util/onGet";
 import {isMobile} from "../../util/functions";
 import {hasClosestBlock, hasClosestByClassName} from "../util/hasClosest";
+import {stickyRow} from "../render/av/row";
 
 let getIndexTimeout: number;
 export const scrollEvent = (protyle: IProtyle, element: HTMLElement) => {
@@ -24,29 +25,7 @@ export const scrollEvent = (protyle: IProtyle, element: HTMLElement) => {
             if (item.dataset.render !== "true") {
                 return;
             }
-            const scrollRect = item.querySelector(".av__scroll").getBoundingClientRect();
+            stickyRow(item, elementRect, "all");
-            const headerElement = item.querySelector(".av__row--header") as HTMLElement;
-            if (headerElement) {
-                const distance = Math.floor(elementRect.top - scrollRect.top);
-                if (distance > 0 && distance < scrollRect.height) {
-                    headerElement.style.transform = `translateY(${distance}px)`;
-                } else {
-                    headerElement.style.transform = "";
-                }
-            }
-            const footerElement = item.querySelector(".av__row--footer") as HTMLElement;
-            if (footerElement) {
-                if (footerElement.querySelector(".av__calc--ashow")) {
-                    const distance = Math.ceil(elementRect.bottom - footerElement.parentElement.getBoundingClientRect().bottom);
-                    if (distance < 0 && -distance < scrollRect.height) {
-                        footerElement.style.transform = `translateY(${distance}px)`;
-                    } else {
-                        footerElement.style.transform = "";
-                    }
-                } else {
-                    footerElement.style.transform = "";
-                }
-            }
         });
 
         if (!protyle.element.classList.contains("block__edit") && !isMobile()) {

app/src/protyle/wysiwyg/index.ts

@@ -76,7 +76,7 @@ import {removeSearchMark} from "../toolbar/util";
 import {activeBlur, hideKeyboardToolbar} from "../../mobile/util/keyboardToolbar";
 import {commonClick} from "./commonClick";
 import {avClick, avContextmenu, updateAVName} from "../render/av/action";
-import {updateHeader} from "../render/av/row";
+import {stickyRow, updateHeader} from "../render/av/row";
 
 export class WYSIWYG {
     public lastHTMLs: { [key: string]: string } = {};
@@ -382,14 +382,14 @@ export class WYSIWYG {
                 const oldWidth = dragElement.clientWidth;
                 const dragColId = dragElement.getAttribute("data-col-id");
                 let newWidth: string;
+                const scrollElement = nodeElement.querySelector(".av__scroll");
+                const contentRect = protyle.contentElement.getBoundingClientRect()
                 documentSelf.onmousemove = (moveEvent: MouseEvent) => {
                     newWidth = Math.max(oldWidth + (moveEvent.clientX - event.clientX), 58) + "px";
-                    const scrollElement = hasClosestByClassName(dragElement, "av__scroll");
+                    scrollElement.querySelectorAll(".av__row, .av__row--footer").forEach(item => {
-                    if (scrollElement) {
+                        (item.querySelector(`[data-col-id="${dragColId}"]`) as HTMLElement).style.width = newWidth;
-                        scrollElement.querySelectorAll(".av__row, .av__row--footer").forEach(item => {
+                    });
-                            (item.querySelector(`[data-col-id="${dragColId}"]`) as HTMLElement).style.width = newWidth;
+                    stickyRow(nodeElement, contentRect, "bottom");
-                        });
-                    }
                 };
 
                 documentSelf.onmouseup = () => {