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

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

@@ -3,7 +3,7 @@ import {hasClosestBlock, hasClosestByAttribute, hasClosestByClassName} from "../
 import {transaction} from "../../wysiwyg/transaction";
 import {openEditorTab} from "../../../menus/util";
 import {copySubMenu} from "../../../menus/commonMenuItem";
-import {getTypeByCellElement, popTextCell} from "./cell";
+import {getCellText, getTypeByCellElement, popTextCell} from "./cell";
 import {getColIconByType, showColMenu} from "./col";
 import {insertAttrViewBlockAnimation, setPageSize, stickyRow, updateHeader} from "./row";
 import {emitOpenMenu} from "../../../plugin/EventBus";
@@ -11,7 +11,6 @@ import {addCol} from "./col";
 import {openMenuPanel} from "./openMenuPanel";
 import {hintRef} from "../../hint/extend";
 import {focusByRange} from "../../util/selection";
-import {writeText} from "../../util/compatibility";
 import {showMessage} from "../../../dialog/message";
 import {previewImage} from "../../preview/image";
 import {isLocalPath, pathPosix} from "../../../util/pathName";
@@ -42,12 +41,7 @@ export const avClick = (protyle: IProtyle, event: MouseEvent & { target: HTMLEle
 
     const copyElement = hasClosestByAttribute(event.target, "data-type", "copy");
     if (copyElement) {
-        const textElement = copyElement.previousElementSibling;
+        getCellText(hasClosestByClassName(copyElement, "av__cell"));
-        if (textElement.querySelector(".av__cellicon")) {
-            writeText(`${textElement.firstChild.textContent} → ${textElement.lastChild.textContent}`);
-        } else {
-            writeText(textElement.textContent);
-        }
         showMessage(window.siyuan.languages.copied);
         event.preventDefault();
         event.stopPropagation();

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

@@ -2,12 +2,68 @@ import {transaction} from "../../wysiwyg/transaction";
 import {hasClosestBlock, hasClosestByClassName} from "../../util/hasClosest";
 import {openMenuPanel} from "./openMenuPanel";
 import {updateAttrViewCellAnimation} from "./action";
-import {isNotCtrl} from "../../util/compatibility";
+import {isNotCtrl, writeText} from "../../util/compatibility";
 import {objEquals} from "../../../util/functions";
 import {fetchPost} from "../../../util/fetch";
 import {focusBlock} from "../../util/selection";
 import * as dayjs from "dayjs";
 
+export const getCellText = (cellElement: HTMLElement | false) => {
+    if (!cellElement) {
+        return
+    }
+    const textElement = cellElement.querySelector(".av__celltext");
+    if (textElement) {
+        if (textElement.querySelector(".av__cellicon")) {
+            writeText(`${textElement.firstChild.textContent} → ${textElement.lastChild.textContent}`);
+        } else {
+            writeText(textElement.textContent);
+        }
+    } else {
+        writeText(cellElement.textContent);
+    }
+}
+
+const genCellValueByElement = (colType: TAVCol, cellElement: HTMLElement) => {
+    let cellValue: IAVCellValue;
+    if (colType === "number") {
+        const value = cellElement.querySelector(".av__celltext").getAttribute("data-content")
+        cellValue = {
+            type: colType,
+            number: {
+                content: parseFloat(value) || 0,
+                isNotEmpty: !!value
+            }
+        };
+    } else if (["text", "block", "url", "phone", "email", "template"].includes(colType)) {
+        cellValue = {
+            type: colType,
+            [colType]: {
+                content: cellElement.querySelector(".av__celltext").textContent.trim()
+            }
+        };
+    } else if (colType === "mSelect" || colType === "select") {
+        const mSelect: IAVCellSelectValue[] = []
+        cellElement.querySelectorAll(".b3-chip").forEach((item: HTMLElement) => {
+            mSelect.push({
+                content: item.textContent.trim(),
+                color: item.style.color.replace("var(--b3-font-color", "").replace(")", "")
+            })
+        })
+        cellValue = {
+            type: colType,
+            mSelect
+        };
+    } else if (["date", "created", "updated"].includes(colType)) {
+        debugger;
+        cellValue = {
+            type: colType,
+            [colType]: JSON.parse(cellElement.querySelector(".av__celltext").getAttribute("data-value"))
+        };
+    }
+    return cellValue;
+}
+
 export const genCellValue = (colType: TAVCol, value: string | any) => {
     let cellValue: IAVCellValue;
     if (typeof value === "string") {
@@ -24,6 +80,7 @@ export const genCellValue = (colType: TAVCol, value: string | any) => {
                 cellValue = {
                     type: colType,
                     number: {
+                        content: 0,
                         isNotEmpty: false
                     }
                 };
@@ -177,7 +234,7 @@ export const popTextCell = (protyle: IProtyle, cellElements: HTMLElement[], type
         } else if (type === "date") {
             openMenuPanel({protyle, blockElement, type: "date", cellElements});
         } else if (type === "checkbox") {
-            updateCellValue(protyle, type, cellElements);
+            updateCellValueByInput(protyle, type, cellElements);
         }
         if (!hasClosestByClassName(cellElements[0], "custom-attr")) {
             cellElements[0].classList.add("av__cell--select");
@@ -210,7 +267,7 @@ export const popTextCell = (protyle: IProtyle, cellElements: HTMLElement[], type
             }
             if (event.key === "Escape" || event.key === "Tab" ||
                 (event.key === "Enter" && !event.shiftKey && isNotCtrl(event))) {
-                updateCellValue(protyle, type, cellElements);
+                updateCellValueByInput(protyle, type, cellElements);
                 if (event.key === "Tab") {
                     protyle.wysiwyg.element.dispatchEvent(new KeyboardEvent("keydown", {
                         shiftKey: event.shiftKey,
@@ -228,13 +285,13 @@ export const popTextCell = (protyle: IProtyle, cellElements: HTMLElement[], type
     }
     avMaskElement.addEventListener("click", (event) => {
         if ((event.target as HTMLElement).classList.contains("av__mask")) {
-            updateCellValue(protyle, type, cellElements);
+            updateCellValueByInput(protyle, type, cellElements);
             avMaskElement?.remove();
         }
     });
 };
 
-const updateCellValue = (protyle: IProtyle, type: TAVCol, cellElements: HTMLElement[]) => {
+const updateCellValueByInput = (protyle: IProtyle, type: TAVCol, cellElements: HTMLElement[]) => {
     const rowElement = hasClosestByClassName(cellElements[0], "av__row");
     if (!rowElement) {
         return;
@@ -377,3 +434,69 @@ const updateCellValue = (protyle: IProtyle, type: TAVCol, cellElements: HTMLElem
         item.remove();
     });
 };
+
+export const updateCellsValue = (protyle: IProtyle, nodeElement: HTMLElement) => {
+    const doOperations: IOperation[] = []
+    const undoOperations: IOperation[] = []
+
+    const avID = nodeElement.dataset.avId
+    const id = nodeElement.dataset.nodeId
+    let text = ''
+    const cellElements: Element[] = Array.from(nodeElement.querySelectorAll(".av__cell--select")) || [];
+    if (cellElements.length === 0) {
+        nodeElement.querySelectorAll(".av__row--select:not(.av__row--header)").forEach(rowElement => {
+            rowElement.querySelectorAll(".av__cell").forEach(cellElement => {
+                cellElements.push(cellElement)
+            })
+        });
+    }
+    cellElements.forEach((item: HTMLElement) => {
+        const rowElement = hasClosestByClassName(item, "av__row");
+        if (!rowElement) {
+            return;
+        }
+        const type = getTypeByCellElement(item);
+        if (["created", "updated", "template"].includes(type)) {
+            return;
+        }
+        const rowID = rowElement.getAttribute("data-id");
+        const cellId = item.getAttribute("data-id");
+        const colId = item.getAttribute("data-col-id");
+
+        text += getCellText(item);
+
+        doOperations.push({
+            action: "updateAttrViewCell",
+            id: cellId,
+            avID,
+            keyID: colId,
+            rowID,
+            data: genCellValue(type, "")
+        });
+        undoOperations.push({
+            action: "updateAttrViewCell",
+            id: cellId,
+            avID,
+            keyID: colId,
+            rowID,
+            data: genCellValueByElement(type, item)
+        });
+        if (!hasClosestByClassName(cellElements[0], "custom-attr")) {
+            updateAttrViewCellAnimation(item);
+        }
+    })
+    if (doOperations.length > 0) {
+        doOperations.push({
+            action: "doUpdateUpdated",
+            id,
+            data: dayjs().format("YYYYMMDDHHmmss"),
+        })
+        undoOperations.push({
+            action: "doUpdateUpdated",
+            id,
+            data: nodeElement.getAttribute("updated"),
+        })
+        transaction(protyle, doOperations, undoOperations);
+    }
+    return text;
+}

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

@@ -161,8 +161,8 @@ style="width: ${column.width || "200px"}">${getCalcValue(column) || '<svg><use x
                                 text += `<span class="b3-chip" style="background-color:var(--b3-font-background${item.color});color:var(--b3-font-color${item.color})">${item.content}</span>`;
                             });
                         } else if (cell.valueType === "date") {
-                            text = '<span class="av__celltext">';
                             const dataValue = cell.value ? cell.value.date : null;
+                            text = `<span class="av__celltext" data-value='${JSON.stringify(dataValue)}'>`;
                             if (dataValue && dataValue.isNotEmpty) {
                                 text += dayjs(dataValue.content).format(dataValue.isNotTime ? "YYYY-MM-DD" : "YYYY-MM-DD HH:mm");
                             }
@@ -171,8 +171,8 @@ style="width: ${column.width || "200px"}">${getCalcValue(column) || '<svg><use x
                             }
                             text += "</span>";
                         } else if (["created", "updated"].includes(cell.valueType)) {
-                            text = '<span class="av__celltext">';
                             const dataValue = cell.value ? cell.value[cell.valueType as "date"] : null;
+                            text = `<span class="av__celltext" data-value='${JSON.stringify(dataValue)}'>`;
                             if (dataValue && dataValue.isNotEmpty) {
                                 text += dayjs(dataValue.content).format("YYYY-MM-DD HH:mm");
                             }

app/src/protyle/wysiwyg/index.ts

@@ -81,6 +81,7 @@ import {showColMenu} from "../render/av/col";
 import {openViewMenu} from "../render/av/view";
 import {avRender} from "../render/av/render";
 import {checkFold} from "../../util/noRelyPCFunction";
+import {getCellText, updateCellsValue} from "../render/av/cell";
 
 export class WYSIWYG {
     public lastHTMLs: { [key: string]: string } = {};
@@ -241,9 +242,10 @@ export class WYSIWYG {
                 return;
             }
             const selectImgElement = nodeElement.querySelector(".img--select");
+            const selectAVElement = nodeElement.querySelector(".av__row--select, .av__cell--select");
             let selectElements = Array.from(protyle.wysiwyg.element.querySelectorAll(".protyle-wysiwyg--select"));
             if (selectElements.length === 0 && range.toString() === "" && !range.cloneContents().querySelector("img") &&
-                !selectImgElement) {
+                !selectImgElement && !selectAVElement) {
                 nodeElement.classList.add("protyle-wysiwyg--select");
                 countBlockWord([nodeElement.getAttribute("data-node-id")]);
                 selectElements = [nodeElement];
@@ -282,6 +284,20 @@ export class WYSIWYG {
                         }
                     });
                 }
+            } else if (selectAVElement) {
+                const cellElements: Element[] = Array.from(nodeElement.querySelectorAll(".av__cell--select")) || [];
+                if (cellElements.length === 0) {
+                    nodeElement.querySelectorAll(".av__row--select:not(.av__row--header)").forEach(rowElement => {
+                        rowElement.querySelectorAll(".av__cell").forEach(cellElement => {
+                            cellElements.push(cellElement)
+                        })
+                    });
+                }
+                cellElements.forEach((item: HTMLElement) => {
+                    const cellText = getCellText(item);
+                    html += cellText;
+                    textPlain += cellText;
+                });
             } else {
                 const tempElement = document.createElement("div");
                 // https://github.com/siyuan-note/siyuan/issues/5540
@@ -1091,18 +1107,14 @@ export class WYSIWYG {
                 event.preventDefault();
                 return;
             }
-            if (nodeElement.classList.contains("av")) {
-                updateAVName(protyle, nodeElement);
-                event.stopPropagation();
-                return;
-            }
 
             event.stopPropagation();
             event.preventDefault();
             const selectImgElement = nodeElement.querySelector(".img--select");
+            const selectAVElement = nodeElement.querySelector(".av__row--select, .av__cell--select");
             let selectElements = Array.from(protyle.wysiwyg.element.querySelectorAll(".protyle-wysiwyg--select"));
             if (selectElements.length === 0 && range.toString() === "" && !range.cloneContents().querySelector("img") &&
-                !selectImgElement) {
+                !selectImgElement && !selectAVElement) {
                 nodeElement.classList.add("protyle-wysiwyg--select");
                 selectElements = [nodeElement];
             }
@@ -1131,6 +1143,8 @@ export class WYSIWYG {
                     // Ctrl+X 剪切后光标应跳到下一行行首 https://github.com/siyuan-note/siyuan/issues/5485
                     focusBlock(nextElement);
                 }
+            } else if (selectAVElement) {
+                html = updateCellsValue(protyle, nodeElement);
             } else {
                 const id = nodeElement.getAttribute("data-node-id");
                 const oldHTML = nodeElement.outerHTML;
@@ -1234,7 +1248,9 @@ export class WYSIWYG {
                             tempElement.append(range.extractContents());
                             let parentElement: Element | false;
                             // https://ld246.com/article/1647689760545
-                            if (nodeElement.classList.contains("table")) {
+                            if (nodeElement.classList.contains("av")) {
+                                updateAVName(protyle, nodeElement);
+                            } else if (nodeElement.classList.contains("table")) {
                                 parentElement = hasClosestByMatchTag(range.startContainer, "TD") || hasClosestByMatchTag(range.startContainer, "TH");
                             } else {
                                 parentElement = getContenteditableElement(nodeElement);
@@ -1267,7 +1283,7 @@ export class WYSIWYG {
                     getContenteditableElement(nodeElement).removeAttribute("data-render");
                     highlightRender(nodeElement);
                 }
-                if (nodeElement.parentElement.parentElement && !isFoldHeading) {
+                if (nodeElement.parentElement.parentElement && !isFoldHeading && !nodeElement.classList.contains("av")) {
                     // 选中 heading 时，使用删除的 transaction
                     updateTransaction(protyle, id, nodeElement.outerHTML, oldHTML);
                 }

app/src/protyle/wysiwyg/keydown.ts

@@ -1398,19 +1398,6 @@ export const keydown = (protyle: IProtyle, editorElement: HTMLElement) => {
             return;
         }
 
-        // 支持非编辑块复制 https://ld246.com/article/1695353747104
-        if ((matchHotKey("⌘X", event) || matchHotKey("⌘C", event)) &&
-            selectText === "" &&
-            !nodeElement.querySelector(".img--select")) {
-            if (protyle.wysiwyg.element.querySelectorAll(".protyle-wysiwyg--select").length === 0) {
-                if (nodeElement.dataset.type !== "NodeHTMLBlock") {
-                    // html 块不需要选中 https://github.com/siyuan-note/siyuan/issues/8706
-                    nodeElement.classList.add("protyle-wysiwyg--select");
-                }
-            }
-            // 复制块不能单纯的 BlockDOM2StdMd，否则 https://github.com/siyuan-note/siyuan/issues/9362
-        }
-
         if (matchHotKey(window.siyuan.config.keymap.editor.general.vLayout.custom, event)) {
             event.preventDefault();
             event.stopPropagation();