:bug: fix https://github.com/siyuan-note/siyuan/issues/5953

app/src/protyle/hint/index.ts

@@ -422,11 +422,17 @@ ${unicode2Emoji(emoji.unicode, true)}</button>`;
                     path: pathPosix().join(pathString, realFileName),
                     markdown: ""
                 }, response => {
+                    let tempElement = document.createElement("div");
                     let blockRefHTML = `<span data-type="block-ref" data-id="${response.data}" data-subtype="d">${escapeHtml(realFileName)}</span>`;
                     if (fileNames.length === 2) {
                         blockRefHTML = `<span data-type="block-ref" data-id="${response.data}" data-subtype="s">${escapeHtml(fileNames[0])}</span>`;
                     }
-                    insertHTML(genEmptyBlock(false, false, blockRefHTML), protyle);
+                    tempElement.innerHTML = blockRefHTML;
+                    tempElement = tempElement.firstElementChild as HTMLDivElement;
+                    protyle.toolbar.setInlineMark(protyle, "block-ref", "range", {
+                        type: "id",
+                        color: `${tempElement.getAttribute("data-id")}${Constants.ZWSP}${tempElement.getAttribute("data-subtype")}${Constants.ZWSP}${tempElement.textContent}`
+                    });
                 });
             });
             return;
@@ -440,17 +446,13 @@ ${unicode2Emoji(emoji.unicode, true)}</button>`;
                 }
                 return;
             }
-            range.insertNode(document.createElement("wbr"));
-            html = nodeElement.outerHTML;
-            range.deleteContents();
             let tempElement = document.createElement("div");
             tempElement.innerHTML = value.replace(/<mark>/g, "").replace(/<\/mark>/g, "");
-            tempElement = tempElement.firstChild as HTMLDivElement;
-            range.insertNode(tempElement);
-            range.setStartAfter(tempElement);
-            range.collapse(true);
-            updateTransaction(protyle, id, nodeElement.outerHTML, html);
-            focusByWbr(nodeElement, range);
+            tempElement = tempElement.firstElementChild as HTMLDivElement;
+            protyle.toolbar.setInlineMark(protyle, "block-ref", "range", {
+                type: "id",
+                color: `${tempElement.getAttribute("data-id")}${Constants.ZWSP}${tempElement.getAttribute("data-subtype")}${Constants.ZWSP}${tempElement.textContent}`
+            });
             return;
         } else if (this.splitChar === ":") {
             addEmoji(value);
@@ -533,7 +535,7 @@ ${unicode2Emoji(emoji.unicode, true)}</button>`;
                 focusByRange(range);
                 protyle.toolbar.range = range;
                 if (["a", "block-ref", "inline-math", "inline-memo", "text"].includes(value)) {
-                    protyle.toolbar.element.querySelector(`[data-type="${value}"]`).dispatchEvent(new CustomEvent("block-ref" === value? getEventName() : "click"));
+                    protyle.toolbar.element.querySelector(`[data-type="${value}"]`).dispatchEvent(new CustomEvent("block-ref" === value ? getEventName() : "click"));
                     return;
                 }
                 protyle.toolbar.setInlineMark(protyle, value, "range");

app/src/protyle/toolbar/Font.ts

@@ -151,6 +151,13 @@ export const fontEvent = (protyle: IProtyle, type?: string, color?: string) => {
 };
 
 export const setFontStyle = (textElement: HTMLElement, textOption: ITextOption) => {
+    const setBlockRef = (blockRefOption: string) => {
+        const blockRefData = blockRefOption.split(Constants.ZWSP);
+        textElement.setAttribute("data-id", blockRefData[0]);
+        textElement.setAttribute("data-subtype", blockRefData[1]);
+        textElement.innerText = blockRefData[2];
+    }
+
     if (textOption) {
         switch (textOption.type) {
             case "color":
@@ -169,6 +176,9 @@ export const setFontStyle = (textElement: HTMLElement, textOption: ITextOption)
             case "style4":
                 textElement.style.textShadow = "1px 1px var(--b3-border-color), 2px 2px var(--b3-border-color), 3px 3px var(--b3-border-color), 4px 4px var(--b3-border-color)";
                 break;
+            case "id":
+                setBlockRef(textOption.color)
+                break;
         }
     }
 };
@@ -177,6 +187,18 @@ export const hasSameTextStyle = (currentElement: HTMLElement, sideElement: HTMLE
     if (!textObj) {
         return true;
     }
+    if (textObj.type === "id") {
+        if (currentElement.nodeType !== 3) {
+            return currentElement.getAttribute("data-id") === sideElement.getAttribute("data-id") &&
+                currentElement.getAttribute("data-subtype") === sideElement.getAttribute("data-subtype") &&
+                currentElement.textContent === sideElement.textContent;
+        }
+        const blockRefData = textObj.color.split(Constants.ZWSP)
+        return blockRefData[0] === sideElement.getAttribute("data-id") &&
+            blockRefData[1] === sideElement.getAttribute("data-subtype") &&
+            blockRefData[2] === sideElement.textContent;
+    }
+
     let color = "";
     let webkitTextFillColor = "";
     let webkitTextStroke = "";

app/src/protyle/toolbar/index.ts

@@ -409,7 +409,7 @@ export class Toolbar {
                                 if (item === "sup") {
                                     types.splice(index, 1);
                                     if (!this.element.classList.contains("fn__none")) {
-                                        this.element.querySelector("[data-type=\"sup\"]").classList.remove("protyle-toolbar__item--current");
+                                        this.element.querySelector('[data-type="sup"]').classList.remove("protyle-toolbar__item--current");
                                     }
                                     return true;
                                 }
@@ -419,11 +419,19 @@ export class Toolbar {
                                 if (item === "sub") {
                                     types.splice(index, 1);
                                     if (!this.element.classList.contains("fn__none")) {
-                                        this.element.querySelector("[data-type=\"sub\"]").classList.remove("protyle-toolbar__item--current");
+                                        this.element.querySelector('[data-type="sub"]').classList.remove("protyle-toolbar__item--current");
                                     }
                                     return true;
                                 }
                             });
+                        } else if (type === "block-ref" && types.includes("virtual-block-ref")) {
+                            // 虚拟引用和引用不能同时存在
+                            types.find((item, index) => {
+                                if (item === "virtual-block-ref") {
+                                    types.splice(index, 1);
+                                    return true;
+                                }
+                            });
                         }
                         types = [...new Set(types)];
                         if (index === 0 && previousElement && previousElement.nodeType !== 3 &&