From 902ad918c1d9f66a8f1bb02bab66e47c0e96ab09 Mon Sep 17 00:00:00 2001
From: Vanessa <lly219@gmail.com>
Date: Thu, 29 Sep 2022 23:08:37 +0800
Subject: [PATCH] :sparkles: https://github.com/siyuan-note/siyuan/issues/3565

---
 app/src/protyle/index.ts                  | 10 ++++----
 app/src/protyle/util/Options.ts           |  1 +
 app/src/protyle/wysiwyg/keydown.ts        |  2 +-
 app/src/protyle/wysiwyg/renderBacklink.ts | 30 +++++++++++++++++++++--
 4 files changed, 35 insertions(+), 8 deletions(-)

diff --git a/app/src/protyle/index.ts b/app/src/protyle/index.ts
index 5c4400e41..259dfba34 100644
--- a/app/src/protyle/index.ts
+++ b/app/src/protyle/index.ts
@@ -81,7 +81,7 @@ class Protyle {
         }
 
         this.init();
-        if (!options.action.includes(Constants.CB_GET_HISTORY)) {
+        if (!mergedOptions.action.includes(Constants.CB_GET_HISTORY)) {
             this.protyle.ws = new Model({
                 id: this.protyle.id,
                 type: "protyle",
@@ -164,13 +164,13 @@ class Protyle {
             fetchPost("/api/filetree/getDoc", {
                 id: options.blockId,
                 k: options.key || "",
-                mode: (options.action && options.action.includes(Constants.CB_GET_CONTEXT)) ? 3 : 0, // 0: 仅当前 ID（默认值），1：向上 2：向下，3：上下都加载，4：加载最后
-                size: options.action?.includes(Constants.CB_GET_ALL) ? Constants.SIZE_GET_MAX : Constants.SIZE_GET,
+                mode: (mergedOptions.action && mergedOptions.action.includes(Constants.CB_GET_CONTEXT)) ? 3 : 0, // 0: 仅当前 ID（默认值），1：向上 2：向下，3：上下都加载，4：加载最后
+                size: mergedOptions.action?.includes(Constants.CB_GET_ALL) ? Constants.SIZE_GET_MAX : Constants.SIZE_GET,
             }, getResponse => {
-                onGet(getResponse, this.protyle, options.action, options.scrollAttr);
+                onGet(getResponse, this.protyle, mergedOptions.action, options.scrollAttr);
                 if (this.protyle.model) {
                     /// #if !MOBILE
-                    if (options.action?.includes(Constants.CB_GET_FOCUS)) {
+                    if (mergedOptions.action?.includes(Constants.CB_GET_FOCUS)) {
                         setPanelFocus(this.protyle.model.element.parentElement.parentElement);
                     }
                     updatePanelByEditor(this.protyle, false);
diff --git a/app/src/protyle/util/Options.ts b/app/src/protyle/util/Options.ts
index bc2a05153..4fbcc0231 100644
--- a/app/src/protyle/util/Options.ts
+++ b/app/src/protyle/util/Options.ts
@@ -17,6 +17,7 @@ export class Options {
             breadcrumbDocName: false,
             breadcrumbContext: false
         },
+        action: [],
         after: undefined,
         classes: {
             preview: "",
diff --git a/app/src/protyle/wysiwyg/keydown.ts b/app/src/protyle/wysiwyg/keydown.ts
index 3f86889f1..2c7d97b7e 100644
--- a/app/src/protyle/wysiwyg/keydown.ts
+++ b/app/src/protyle/wysiwyg/keydown.ts
@@ -136,7 +136,7 @@ export const keydown = (protyle: IProtyle, editorElement: HTMLElement) => {
             window.siyuan.menus.menu.remove();
         }
 
-        if (!["Alt", "Meta", "Shift", "Control", "CapsLock", "Escape"].includes(event.key)) {
+        if (!["Alt", "Meta", "Shift", "Control", "CapsLock", "Escape"].includes(event.key) && protyle.options.render.breadcrumb) {
             protyle.breadcrumb.hide();
         }
 
diff --git a/app/src/protyle/wysiwyg/renderBacklink.ts b/app/src/protyle/wysiwyg/renderBacklink.ts
index 1de796059..8ac7637fb 100644
--- a/app/src/protyle/wysiwyg/renderBacklink.ts
+++ b/app/src/protyle/wysiwyg/renderBacklink.ts
@@ -1,6 +1,32 @@
-export const renderBacklink = (protype: IProtyle, backlinkData: {
+import {getIconByType} from "../../editor/getIcon";
+import {removeLoading} from "../ui/initUI";
+
+export const renderBacklink = (protyle: IProtyle, backlinkData: {
     blockPaths: IBreadcrumb[],
     dom: string
 }[]) => {
-
+    protyle.block.showAll = true
+    let html = ""
+    backlinkData.forEach(item => {
+        html += genBreadcrumb(item.blockPaths) + item.dom
+    });
+    protyle.wysiwyg.element.innerHTML = html
+    removeLoading(protyle);
+}
+
+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}">
+    <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>`;
+        if (index !== blockPaths.length - 1) {
+            html += '<svg class="protyle-breadcrumb__arrow"><use xlink:href="#iconRight"></use></svg>';
+        }
+    })
+    return `<div contenteditable="false" class="protyle-breadcrumb__bar protyle-breadcrumb__bar--nowrap">${html}</div>`;
 }