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

app/src/protyle/util/editorCommonEvent.ts

@@ -11,7 +11,7 @@ import {Constants} from "../../constants";
 import {paste} from "./paste";
 import {cancelSB, genEmptyElement, genSBElement, insertEmptyBlock} from "../../block/util";
 import {transaction, turnsIntoOneTransaction} from "../wysiwyg/transaction";
-import {getTopAloneElement} from "../wysiwyg/getBlock";
+import {getParentBlock, getTopAloneElement} from "../wysiwyg/getBlock";
 import {updateListOrder} from "../wysiwyg/list";
 import {fetchPost, fetchSyncPost} from "../../util/fetch";
 import {onGet} from "./onGet";
@@ -71,7 +71,7 @@ const moveTo = async (protyle: IProtyle, sourceElements: Element[], targetElemen
                 data: newListElement.outerHTML,
                 id: newListId,
                 previousID: position === "afterbegin" ? null : (position === "afterend" ? targetId : tempTargetElement.previousElementSibling?.getAttribute("data-node-id")),
-                parentID: position === "afterbegin" ? targetId : (tempTargetElement.parentElement?.getAttribute("data-node-id") || protyle.block.parentID || protyle.block.rootID),
+                parentID: position === "afterbegin" ? targetId : (getParentBlock(tempTargetElement)?.getAttribute("data-node-id") || protyle.block.parentID || protyle.block.rootID),
             });
             undoOperations.push({
                 action: "delete",
@@ -132,7 +132,7 @@ const moveTo = async (protyle: IProtyle, sourceElements: Element[], targetElemen
                     id: copyNewId,
                     data: copyElement.outerHTML,
                     previousID: position === "afterbegin" ? null : (position === "afterend" ? targetId : copyElement.previousElementSibling?.getAttribute("data-node-id")), // 不能使用常量，移动后会被修改
-                    parentID: position === "afterbegin" ? targetId : (copyElement.parentElement?.getAttribute("data-node-id") || protyle.block.parentID || protyle.block.rootID),
+                    parentID: position === "afterbegin" ? targetId : (getParentBlock(copyElement)?.getAttribute("data-node-id") || protyle.block.parentID || protyle.block.rootID),
                 });
                 newSourceElements.push(copyElement);
             }
@@ -155,7 +155,7 @@ const moveTo = async (protyle: IProtyle, sourceElements: Element[], targetElemen
                     action: "move",
                     id,
                     previousID: position === "afterbegin" ? null : (position === "afterend" ? targetId : item.previousElementSibling?.getAttribute("data-node-id")), // 不能使用常量，移动后会被修改
-                    parentID: position === "afterbegin" ? targetId : (item.parentElement?.getAttribute("data-node-id") || protyle.block.parentID || protyle.block.rootID),
+                    parentID: position === "afterbegin" ? targetId : (getParentBlock(item)?.getAttribute("data-node-id") || protyle.block.parentID || protyle.block.rootID),
                 });
                 newSourceElements.push(item);
             }
@@ -171,7 +171,7 @@ const moveTo = async (protyle: IProtyle, sourceElements: Element[], targetElemen
                     data: topSourceElement.outerHTML,
                     id: topSourceElement.getAttribute("data-node-id"),
                     previousID: topSourceElement.previousElementSibling?.getAttribute("data-node-id"),
-                    parentID: topSourceElement.parentElement?.getAttribute("data-node-id") || protyle.block.parentID || protyle.block.rootID
+                    parentID: getParentBlock(topSourceElement)?.getAttribute("data-node-id") || protyle.block.parentID || protyle.block.rootID
                 });
                 const topSourceParentElement = topSourceElement.parentElement;
                 topSourceElement.remove();
@@ -348,7 +348,7 @@ const dragSb = async (protyle: IProtyle, sourceElements: Element[], targetElemen
         action: "move",
         id: targetElement.getAttribute("data-node-id"),
         previousID: targetElement.previousElementSibling?.getAttribute("data-node-id"),
-        parentID: targetElement.parentElement?.getAttribute("data-node-id") || protyle.block.parentID || protyle.block.rootID
+        parentID: getParentBlock(targetElement)?.getAttribute("data-node-id") || protyle.block.parentID || protyle.block.rootID
     };
     const sbElement = genSBElement(direct);
     targetElement.parentElement.replaceChild(sbElement, targetElement);
@@ -358,7 +358,7 @@ const dragSb = async (protyle: IProtyle, sourceElements: Element[], targetElemen
         id: sbElement.getAttribute("data-node-id"),
         nextID: sbElement.nextElementSibling?.getAttribute("data-node-id"),
         previousID: sbElement.previousElementSibling?.getAttribute("data-node-id"),
-        parentID: sbElement.parentElement.getAttribute("data-node-id") || protyle.block.parentID || protyle.block.rootID
+        parentID: getParentBlock(sbElement)?.getAttribute("data-node-id") || protyle.block.parentID || protyle.block.rootID
     }];
     // 临时插入，防止后面计算错误，最终再移动矫正
     sbElement.lastElementChild.before(targetElement);

app/src/protyle/util/insertHTML.ts

@@ -1,7 +1,7 @@
 import {hasClosestBlock, hasClosestByAttribute, hasClosestByClassName, hasClosestByTag} from "./hasClosest";
 import * as dayjs from "dayjs";
 import {transaction, updateTransaction} from "../wysiwyg/transaction";
-import {getContenteditableElement} from "../wysiwyg/getBlock";
+import {getContenteditableElement, getParentBlock} from "../wysiwyg/getBlock";
 import {
     fixTableRange,
     focusBlock,
@@ -545,7 +545,7 @@ export const insertHTML = (html: string, protyle: IProtyle, isBlock = false,
             data: oldHTML,
             id,
             previousID: blockElement.previousElementSibling ? blockElement.previousElementSibling.getAttribute("data-node-id") : "",
-            parentID: blockElement.parentElement.getAttribute("data-node-id") || protyle.block.parentID
+            parentID: getParentBlock(blockElement).getAttribute("data-node-id") || protyle.block.parentID
         });
         blockElement.remove();
     }

app/src/protyle/wysiwyg/getBlock.ts

@@ -1,6 +1,13 @@
 import {hasClosestBlock, hasClosestByAttribute, isInEmbedBlock} from "../util/hasClosest";
 import {Constants} from "../../constants";
 
+export const getParentBlock = (element: Element) => {
+    if (element.parentElement.classList.contains("callout-content")) {
+        return element.parentElement.parentElement;
+    }
+    return element.parentElement;
+};
+
 export const getCalloutInfo = (element: Element) => {
     const icon = element.querySelector(".callout-icon").textContent;
     return (icon ? icon + " " : "") + element.querySelector(".callout-title").textContent;

app/src/protyle/wysiwyg/keydown.ts

@@ -25,7 +25,7 @@ import {
     getContenteditableElement,
     getFirstBlock,
     getLastBlock,
-    getNextBlock,
+    getNextBlock, getParentBlock,
     getPreviousBlock,
     getTopAloneElement,
     hasNextSibling,
@@ -356,12 +356,9 @@ export const keydown = (protyle: IProtyle, editorElement: HTMLElement) => {
                             protyle.contentElement.scrollTop = protyle.contentElement.scrollTop + top;
                             protyle.scroll.lastScrollTop = protyle.contentElement.scrollTop + 1;
                         }
-                    } else if (!selectElements[0].parentElement.classList.contains("protyle-wysiwyg")) {
+                    } else if (!getParentBlock(selectElements[0]).classList.contains("protyle-wysiwyg")) {
                         hideElements(["select"], protyle);
-                        const parentBlockElement = hasClosestBlock(selectElements[0].parentElement);
-                        if (parentBlockElement) {
-                            parentBlockElement.classList.add("protyle-wysiwyg--select");
-                        }
+                        getParentBlock(selectElements[0]).classList.add("protyle-wysiwyg--select");
                     }
                 }
             });
@@ -385,12 +382,9 @@ export const keydown = (protyle: IProtyle, editorElement: HTMLElement) => {
                             protyle.contentElement.scrollTop = protyle.contentElement.scrollTop + bottom;
                             protyle.scroll.lastScrollTop = protyle.contentElement.scrollTop - 1;
                         }
-                    } else if (!selectLastElement.parentElement.classList.contains("protyle-wysiwyg")) {
+                    } else if (!getParentBlock(selectLastElement).classList.contains("protyle-wysiwyg")) {
                         hideElements(["select"], protyle);
-                        const parentBlockElement = hasClosestBlock(selectLastElement.parentElement);
-                        if (parentBlockElement) {
-                            parentBlockElement.classList.add("protyle-wysiwyg--select");
-                        }
+                        getParentBlock(selectLastElement).classList.add("protyle-wysiwyg--select");
                     }
                 }
             });
@@ -413,12 +407,9 @@ export const keydown = (protyle: IProtyle, editorElement: HTMLElement) => {
                                 protyle.contentElement.scrollTop = protyle.contentElement.scrollTop + top;
                                 protyle.scroll.lastScrollTop = protyle.contentElement.scrollTop + 1;
                             }
-                        } else if (!startEndElement.endElement.parentElement.classList.contains("protyle-wysiwyg")) {
+                        } else if (!getParentBlock(startEndElement.endElement).classList.contains("protyle-wysiwyg")) {
                             hideElements(["select"], protyle);
-                            const parentBlockElement = hasClosestBlock(startEndElement.endElement.parentElement);
-                            if (parentBlockElement) {
-                                parentBlockElement.classList.add("protyle-wysiwyg--select");
-                            }
+                            getParentBlock(startEndElement.endElement).classList.add("protyle-wysiwyg--select");
                         }
                     } else {
                         startEndElement.endElement.classList.remove("protyle-wysiwyg--select");
@@ -452,10 +443,7 @@ export const keydown = (protyle: IProtyle, editorElement: HTMLElement) => {
                             if (nextElement.getBoundingClientRect().width === 0) {
                                 // https://github.com/siyuan-note/siyuan/issues/11194
                                 hideElements(["select"], protyle);
-                                const parentBlockElement = hasClosestBlock(startEndElement.endElement.parentElement);
-                                if (parentBlockElement) {
-                                    parentBlockElement.classList.add("protyle-wysiwyg--select");
-                                }
+                                getParentBlock(startEndElement.endElement).classList.add("protyle-wysiwyg--select");
                             } else {
                                 nextElement.classList.add("protyle-wysiwyg--select");
                                 nextElement.setAttribute("select-end", "true");
@@ -466,12 +454,9 @@ export const keydown = (protyle: IProtyle, editorElement: HTMLElement) => {
                                     protyle.scroll.lastScrollTop = protyle.contentElement.scrollTop - 1;
                                 }
                             }
-                        } else if (!startEndElement.endElement.parentElement.classList.contains("protyle-wysiwyg")) {
+                        } else if (!getParentBlock(startEndElement.endElement).classList.contains("protyle-wysiwyg")) {
                             hideElements(["select"], protyle);
-                            const parentBlockElement = hasClosestBlock(startEndElement.endElement.parentElement);
-                            if (parentBlockElement) {
-                                parentBlockElement.classList.add("protyle-wysiwyg--select");
-                            }
+                            getParentBlock(startEndElement.endElement).classList.add("protyle-wysiwyg--select");
                         }
                     } else {
                         startEndElement.endElement.classList.remove("protyle-wysiwyg--select");

app/src/protyle/wysiwyg/remove.ts

@@ -2,7 +2,7 @@ import {focusBlock, focusByRange, focusByWbr, getSelectionOffset, setLastNodeRan
 import {
     getContenteditableElement,
     getLastBlock,
-    getNextBlock,
+    getNextBlock, getParentBlock,
     getPreviousBlock,
     getTopAloneElement,
     getTopEmptyElement,
@@ -126,13 +126,12 @@ export const removeBlock = async (protyle: IProtyle, blockElement: Element, rang
                     }
                     previousID = unfoldData[foldId].previousID;
                 }
-                const parentElement = hasClosestBlock(topElement.parentElement);
                 inserts.push({
                     action: "insert",
                     data,
                     id,
                     previousID,
-                    parentID: (parentElement ? parentElement.getAttribute("data-node-id") : null) || protyle.block.parentID
+                    parentID: getParentBlock(topElement)?.getAttribute("data-node-id") || protyle.block.parentID
                 });
                 if (topElement.getAttribute("data-subtype") === "o" && topElement.classList.contains("li")) {
                     listElement = topElement.parentElement;