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

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

@@ -340,6 +340,7 @@ export const popTextCell = (protyle: IProtyle, cellElements: HTMLElement[], type
         }
         if (!hasClosestByClassName(cellElements[0], "custom-attr")) {
             cellElements[0].classList.add("av__cell--select");
+            addDragFill(cellElements[0]);
         }
         return;
     }
@@ -379,6 +380,7 @@ export const popTextCell = (protyle: IProtyle, cellElements: HTMLElement[], type
                     protyle.toolbar.range.selectNodeContents(cellElements[0].lastChild);
                     focusByRange(protyle.toolbar.range);
                     cellElements[0].classList.add("av__cell--select");
+                    addDragFill(cellElements[0]);
                     hintRef(inputElement.value.substring(2), protyle, "av");
                     avMaskElement?.remove();
                     event.preventDefault();
@@ -453,6 +455,7 @@ const updateCellValueByInput = (protyle: IProtyle, type: TAVCol, blockElement: H
     if (cellElements[0] // 兼容新增行后台隐藏
         && !hasClosestByClassName(cellElements[0], "custom-attr")) {
         cellElements[0].classList.add("av__cell--select");
+        addDragFill(cellElements[0]);
     }
     //  单元格编辑中 ctrl+p 光标定位
     if (!document.querySelector(".b3-dialog")) {
@@ -819,3 +822,11 @@ export const dragFillCellsValue = (protyle: IProtyle, nodeElement: HTMLElement,
         transaction(protyle, doOperations, undoOperations);
     }
 };
+
+export const addDragFill = (cellElement: Element) => {
+    if (!cellElement) {
+        return;
+    }
+    cellElement.classList.add("av__cell--active");
+    cellElement.insertAdjacentHTML("beforeend", `<div aria-label="${window.siyuan.languages.dragFill}" class="av__drag-fill ariaLabel"></div>`);
+}

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

@@ -1,6 +1,6 @@
 import {matchHotKey} from "../../util/hotKey";
 import {deleteRow, selectRow} from "./row";
-import {cellScrollIntoView, popTextCell, updateCellsValue} from "./cell";
+import {addDragFill, cellScrollIntoView, popTextCell, updateCellsValue} from "./cell";
 import {avContextmenu} from "./action";
 import {hasClosestByClassName} from "../../util/hasClosest";
 import {Constants} from "../../../constants";
@@ -62,6 +62,7 @@ export const avKeydown = (event: KeyboardEvent, nodeElement: HTMLElement, protyl
             if (newCellElement) {
                 selectCellElement.classList.remove("av__cell--select");
                 newCellElement.classList.add("av__cell--select");
+                addDragFill(newCellElement);
                 cellScrollIntoView(nodeElement, newCellElement, false);
             }
             event.preventDefault();
@@ -79,6 +80,7 @@ export const avKeydown = (event: KeyboardEvent, nodeElement: HTMLElement, protyl
             if (newCellElement) {
                 selectCellElement.classList.remove("av__cell--select");
                 newCellElement.classList.add("av__cell--select");
+                addDragFill(newCellElement);
                 cellScrollIntoView(nodeElement, newCellElement, false);
             }
             event.preventDefault();
@@ -92,6 +94,7 @@ export const avKeydown = (event: KeyboardEvent, nodeElement: HTMLElement, protyl
             if (newCellElement) {
                 selectCellElement.classList.remove("av__cell--select");
                 newCellElement.classList.add("av__cell--select");
+                addDragFill(newCellElement);
                 cellScrollIntoView(nodeElement, newCellElement);
             }
             event.preventDefault();
@@ -105,6 +108,7 @@ export const avKeydown = (event: KeyboardEvent, nodeElement: HTMLElement, protyl
             if (newCellElement) {
                 selectCellElement.classList.remove("av__cell--select");
                 newCellElement.classList.add("av__cell--select");
+                addDragFill(newCellElement);
                 cellScrollIntoView(nodeElement, newCellElement);
             }
             event.preventDefault();

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

@@ -1,7 +1,7 @@
 import {fetchPost} from "../../../util/fetch";
 import {getColIconByType} from "./col";
 import {Constants} from "../../../constants";
-import {renderCell} from "./cell";
+import {addDragFill, renderCell} from "./cell";
 import {unicode2Emoji} from "../../../emoji";
 import {focusBlock} from "../../util/selection";
 import {hasClosestBlock, hasClosestByClassName} from "../../util/hasClosest";
@@ -50,6 +50,15 @@ export const avRender = (element: Element, protyle: IProtyle, cb?: () => void, v
             if (selectCellElement) {
                 selectCellId = (hasClosestByClassName(selectCellElement, "av__row") as HTMLElement).dataset.id + Constants.ZWSP + selectCellElement.getAttribute("data-col-id");
             }
+            let dragFillId = ""
+            const dragFillElement = e.querySelector(".av__drag-fill") as HTMLElement;
+            if (dragFillElement) {
+                dragFillId = (hasClosestByClassName(dragFillElement, "av__row") as HTMLElement).dataset.id + Constants.ZWSP + dragFillElement.parentElement.getAttribute("data-col-id");
+            }
+            const activeIds: string[] = [];
+            e.querySelectorAll(".av__cell--active").forEach((item: HTMLElement) => {
+                activeIds.push((hasClosestByClassName(item, "av__row") as HTMLElement).dataset.id + Constants.ZWSP + item.getAttribute("data-col-id"));
+            })
             const created = protyle.options.history?.created;
             const snapshot = protyle.options.history?.snapshot;
             let newViewID = e.getAttribute(Constants.CUSTOM_SY_AV_VIEW) || "";
@@ -278,6 +287,12 @@ ${cell.color ? `color:${cell.color};` : ""}">${renderCell(cell.value)}</div>`;
                         focusBlock(e);
                     }
                 }
+                if (dragFillId) {
+                    addDragFill(e.querySelector(`.av__row[data-id="${dragFillId.split(Constants.ZWSP)[0]}"] .av__cell[data-col-id="${dragFillId.split(Constants.ZWSP)[1]}"]`))
+                }
+                activeIds.forEach(activeId => {
+                    e.querySelector(`.av__row[data-id="${activeId.split(Constants.ZWSP)[0]}"] .av__cell[data-col-id="${activeId.split(Constants.ZWSP)[1]}"]`)?.classList.add("av__cell--active")
+                })
                 if (getSelection().rangeCount > 0) {
                     // 修改表头后光标重新定位
                     const range = getSelection().getRangeAt(0);

app/src/protyle/wysiwyg/index.ts

@@ -82,6 +82,7 @@ import {openViewMenu} from "../render/av/view";
 import {avRender} from "../render/av/render";
 import {checkFold} from "../../util/noRelyPCFunction";
 import {
+    addDragFill,
     dragFillCellsValue,
     genCellValueByElement,
     getCellText,
@@ -517,7 +518,7 @@ export class WYSIWYG {
                     documentSelf.onselect = null;
                     if (lastCellElement) {
                         dragFillCellsValue(protyle, nodeElement, originData, originCellIds);
-                        lastCellElement.insertAdjacentHTML("beforeend", `<div aria-label="${window.siyuan.languages.dragFill}" class="av__drag-fill ariaLabel"></div>`);
+                        addDragFill(lastCellElement);
                     }
                     return false;
                 };
@@ -589,7 +590,7 @@ export class WYSIWYG {
                     if (lastCellElement) {
                         selectRow(nodeElement.querySelector(".av__firstcol"), "unselectAll");
                         focusBlock(nodeElement);
-                        lastCellElement.insertAdjacentHTML("beforeend", `<div aria-label="${window.siyuan.languages.dragFill}" class="av__drag-fill ariaLabel"></div>`);
+                        addDragFill(lastCellElement);
                         this.preventClick = true;
                     }
                     return false;