✨ https://github.com/siyuan-note/siyuan/issues/3565

app/src/layout/dock/Backlink.ts

@@ -22,7 +22,7 @@ export class Backlink extends Model {
     private tree: Tree;
     private notebookId: string;
     private mTree: Tree;
-    private editors:Protyle[] = [];
+    private editors: Protyle[] = [];
 
     constructor(options: {
         tab: Tab,
@@ -135,7 +135,6 @@ export class Backlink extends Model {
                 }
             });
         });
-
         this.tree = new Tree({
             element: this.element.querySelector(".backlinkList") as HTMLElement,
             data: null,
@@ -188,7 +187,7 @@ export class Backlink extends Model {
                                 render: {
                                     background: false,
                                     title: false,
-                                    gutter: false,
+                                    gutter: true,
                                     scroll: false,
                                     breadcrumb: false,
                                 }
@@ -252,6 +251,26 @@ export class Backlink extends Model {
             },
             blockExtHTML: `<span class="b3-list-item__action b3-tooltips b3-tooltips__nw" aria-label="${window.siyuan.languages.more}"><svg><use xlink:href="#iconMore"></use></svg></span>`
         });
+        this.tree.element.addEventListener("scroll", () => {
+            this.tree.element.querySelectorAll(".protyle-gutters").forEach(item => {
+                item.classList.add("fn__none");
+                item.innerHTML = "";
+                // https://ld246.com/article/1651935412480
+                this.tree.element.querySelectorAll(".protyle-wysiwyg--hl").forEach((hlItem) => {
+                    hlItem.classList.remove("protyle-wysiwyg--hl");
+                });
+            })
+        })
+        this.mTree.element.addEventListener("scroll", () => {
+            this.mTree.element.querySelectorAll(".protyle-gutters").forEach(item => {
+                item.classList.add("fn__none");
+                item.innerHTML = "";
+                // https://ld246.com/article/1651935412480
+                this.mTree.element.querySelectorAll(".protyle-wysiwyg--hl").forEach((hlItem) => {
+                    hlItem.classList.remove("protyle-wysiwyg--hl");
+                });
+            })
+        })
         // 为了快捷键的 dispatch
         this.element.querySelector('[data-type="collapse"]').addEventListener("click", () => {
             this.tree.collapseAll();

app/src/protyle/wysiwyg/index.ts

@@ -58,6 +58,7 @@ import {onGet} from "../util/onGet";
 import {setTableAlign} from "../util/table";
 import {countBlockWord, countSelectWord} from "../../layout/status";
 import {showMessage} from "../../dialog/message";
+import {loadBreadcrumb} from "./renderBacklink";
 
 export class WYSIWYG {
     public lastHTMLs: { [key: string]: string } = {};
@@ -1152,7 +1153,9 @@ export class WYSIWYG {
                 }
             } else if (protyle.toolbar.range.toString() === "") {
                 hideElements(["util"], protyle);
-                protyle.gutter.renderMenu(protyle, nodeElement);
+                if (protyle.gutter) {
+                    protyle.gutter.renderMenu(protyle, nodeElement);
+                }
                 window.siyuan.menus.menu.popup({x: event.clientX, y: event.clientY});
                 protyle.toolbar?.element.classList.add("fn__none");
             }
@@ -1371,6 +1374,12 @@ export class WYSIWYG {
         let shiftStartElement: HTMLElement;
         this.element.addEventListener("click", (event: MouseEvent & { target: HTMLElement }) => {
             hideElements(["hint", "util"], protyle);
+           const backlinkBreadcrumbItemElement =  hasClosestByClassName(event.target, "protyle-breadcrumb__item")
+            if (backlinkBreadcrumbItemElement) {
+                loadBreadcrumb(backlinkBreadcrumbItemElement);
+                event.stopPropagation()
+                return;
+            }
             if (!window.siyuan.shiftIsPressed) {
                 shiftStartElement = undefined;
             }

app/src/protyle/wysiwyg/remove.ts

@@ -103,6 +103,9 @@ const removeLi = (protyle: IProtyle, blockElement: Element, range: Range) => {
 
     // 列表项合并到前一个列表项的最后一个块末尾
     const listItemElement = blockElement.parentElement;
+    if (listItemElement.previousElementSibling && listItemElement.previousElementSibling.classList.contains("protyle-breadcrumb__bar")) {
+        return;
+    }
     const listItemId = listItemElement.getAttribute("data-node-id");
     const listElement = listItemElement.parentElement;
     range.insertNode(document.createElement("wbr"));
@@ -347,6 +350,10 @@ export const removeBlock = (protyle: IProtyle, blockElement: Element, range: Ran
         return;
     }
 
+    if (blockElement.previousElementSibling && blockElement.previousElementSibling.classList.contains("protyle-breadcrumb__bar")) {
+        return;
+    }
+
     const previousElement = getPreviousBlock(blockElement) as HTMLElement;
     if (!previousElement) {
         if (protyle.wysiwyg.element.childElementCount > 1 && getContenteditableElement(blockElement).textContent === "") {

app/src/protyle/wysiwyg/renderBacklink.ts

@@ -1,5 +1,7 @@
 import {getIconByType} from "../../editor/getIcon";
 import {removeLoading} from "../ui/initUI";
+import {fetchPost} from "../../util/fetch";
+import {Constants} from "../../constants";
 
 export const renderBacklink = (protyle: IProtyle, backlinkData: {
     blockPaths: IBreadcrumb[],
@@ -14,13 +16,33 @@ export const renderBacklink = (protyle: IProtyle, backlinkData: {
     removeLoading(protyle);
 }
 
+export const loadBreadcrumb = (element: HTMLElement) => {
+    if (element.classList.contains("protyle-breadcrumb__item--active")) {
+        return;
+    }
+    element.parentElement.querySelector(".protyle-breadcrumb__item--active").classList.remove("protyle-breadcrumb__item--active")
+    element.classList.add("protyle-breadcrumb__item--active")
+    let nextElement = element.parentElement.nextElementSibling
+    while (nextElement && !nextElement.classList.contains("protyle-breadcrumb__bar")) {
+        const tempElement = nextElement
+        nextElement = nextElement.nextElementSibling
+        tempElement.remove();
+    }
+    fetchPost("/api/filetree/getDoc", {
+        id: element.getAttribute("data-id"),
+        size: Constants.SIZE_GET_MAX,
+    }, getResponse => {
+        element.parentElement.insertAdjacentHTML("afterend", getResponse.data.content);
+    })
+}
+
 const genBreadcrumb = (blockPaths: IBreadcrumb[]) => {
     let html = ''
     blockPaths.forEach((item, index) => {
         if (index === 0) {
             return;
         }
-        html += `<span class="protyle-breadcrumb__item" data-node-id="${item.id}">
+        html += `<span class="protyle-breadcrumb__item${index === blockPaths.length - 1 ? " protyle-breadcrumb__item--active" : ""}" data-id="${item.id}">
     <svg class="popover__block" data-id="${item.id}"><use xlink:href="#${getIconByType(item.type, item.subType)}"></use></svg>
     <span class="protyle-breadcrumb__text" title="${item.name}">${item.name}</span>
 </span>`;