✨ #3565

siyuan-note · Sep 30, 2022 · 6005027 · 6005027
1 parent b552c03
commit 6005027
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 18 deletions.
diff --git a/app/src/layout/dock/Backlink.ts b/app/src/layout/dock/Backlink.ts
@@ -324,6 +324,7 @@ export class Backlink extends Model {
                     refTreeID: liElement.getAttribute("data-node-id")
                 }, (response) => {
                     const editorElement = document.createElement("div");
+                    editorElement.style.minHeight = "auto";
                     liElement.after(editorElement);
                     const editor = new Protyle(editorElement, {
                         blockId: "",

diff --git a/app/src/protyle/wysiwyg/index.ts b/app/src/protyle/wysiwyg/index.ts
@@ -58,7 +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";
+import {getBacklinkHeadingMore, loadBreadcrumb} from "./renderBacklink";
 
 export class WYSIWYG {
     public lastHTMLs: { [key: string]: string } = {};
@@ -123,7 +123,7 @@ export class WYSIWYG {
         // https://github.com/siyuan-note/siyuan/issues/5924
         if (currentTypes.length > 0 && range.toString() === "" && range.startOffset === inputData.length && inlineElement.tagName === "SPAN" &&
             inlineElement.textContent.replace(Constants.ZWSP, "") !== inputData &&
-            inlineElement.textContent.replace(Constants.ZWSP, "").length >= inputData.length&&
+            inlineElement.textContent.replace(Constants.ZWSP, "").length >= inputData.length &&
             !hasPreviousSibling(range.startContainer) && !hasPreviousSibling(inlineElement)) {
             const html = inlineElement.innerHTML.replace(Constants.ZWSP, "");
             inlineElement.innerHTML = html.substr(dataLength);
@@ -1374,9 +1374,14 @@ 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");
+            const backlinkBreadcrumbItemElement = hasClosestByClassName(event.target, "protyle-breadcrumb__item");
             if (backlinkBreadcrumbItemElement) {
-                loadBreadcrumb(backlinkBreadcrumbItemElement);
+                if (backlinkBreadcrumbItemElement.getAttribute("data-id")) {
+                    loadBreadcrumb(backlinkBreadcrumbItemElement);
+                } else {
+                    // 引用标题时的更多加载
+                    getBacklinkHeadingMore(backlinkBreadcrumbItemElement)
+                }
                 event.stopPropagation();
                 return;
             }

diff --git a/app/src/protyle/wysiwyg/renderBacklink.ts b/app/src/protyle/wysiwyg/renderBacklink.ts
@@ -5,37 +5,69 @@ import {Constants} from "../../constants";
 
 export const renderBacklink = (protyle: IProtyle, backlinkData: {
     blockPaths: IBreadcrumb[],
-    dom: string
+    dom: string,
+    expand: boolean
 }[]) => {
     protyle.block.showAll = true;
     let html = "";
     backlinkData.forEach(item => {
-        html += genBreadcrumb(item.blockPaths) + item.dom;
+        html += genBreadcrumb(item.blockPaths) + setBacklinkFold(item.dom, item.expand);
     });
     protyle.wysiwyg.element.innerHTML = html;
     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();
+const setBacklinkFold = (html: string, expand: boolean) => {
+    const tempDom = document.createElement("template");
+    tempDom.innerHTML = html;
+    if (tempDom.content.firstElementChild.classList.contains("li")) {
+        if (expand) {
+            const thirdLiElement = tempDom.content.querySelector(".li .li .li")
+            if (thirdLiElement) {
+                thirdLiElement.setAttribute("fold", "1")
+            }
+        } else {
+            tempDom.content.firstElementChild.setAttribute("fold", "1")
+        }
+    } else if (tempDom.content.firstElementChild.getAttribute("data-type") === "NodeHeading") {
+        Array.from(tempDom.content.children).forEach((item, index) => {
+            if ((expand && index > 2) || (!expand && index > 1)) {
+                if ((expand && index === 3) || (!expand && index === 2)) {
+                    item.insertAdjacentHTML("beforebegin", `<div style="max-width: 100%;justify-content: center;" contenteditable="false" class="protyle-breadcrumb__item"><svg><use xlink:href="#iconMore"></use></svg></div>`);
+                }
+                item.classList.add("fn__none")
+            }
+        })
     }
+    return tempDom.innerHTML;
+}
+
+export const loadBreadcrumb = (element: HTMLElement) => {
     fetchPost("/api/filetree/getDoc", {
         id: element.getAttribute("data-id"),
         size: Constants.SIZE_GET_MAX,
     }, getResponse => {
-        element.parentElement.insertAdjacentHTML("afterend", getResponse.data.content);
+        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();
+        }
+        element.parentElement.insertAdjacentHTML("afterend", setBacklinkFold(getResponse.data.content, true));
     });
 };
 
+export const getBacklinkHeadingMore = (moreElement: HTMLElement) => {
+    let nextElement = moreElement.nextElementSibling;
+    while (nextElement && !nextElement.classList.contains("protyle-breadcrumb__bar")) {
+        nextElement.classList.remove("fn__none");
+        nextElement = nextElement.nextElementSibling;
+    }
+    moreElement.remove();
+}
+
 const genBreadcrumb = (blockPaths: IBreadcrumb[]) => {
     let html = "";
     blockPaths.forEach((item, index) => {

diff --git a/app/src/types/protyle.d.ts b/app/src/types/protyle.d.ts
@@ -362,6 +362,7 @@ interface IOptions {
     backlinkData?: {
         blockPaths: IBreadcrumb[],
         dom: string
+        expand: boolean
     }[],
     action?: string[],
     mode?: TEditorMode,