From 60050279912591f9499a0dc4e824dc2c5a2ad301 Mon Sep 17 00:00:00 2001 From: Vanessa Date: Fri, 30 Sep 2022 18:05:24 +0800 Subject: [PATCH] :sparkles: https://github.com/siyuan-note/siyuan/issues/3565 --- app/src/layout/dock/Backlink.ts | 1 + app/src/protyle/wysiwyg/index.ts | 13 +++-- app/src/protyle/wysiwyg/renderBacklink.ts | 60 +++++++++++++++++------ app/src/types/protyle.d.ts | 1 + 4 files changed, 57 insertions(+), 18 deletions(-) diff --git a/app/src/layout/dock/Backlink.ts b/app/src/layout/dock/Backlink.ts index 5f2c790b9..94fe07a88 100644 --- 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 index 6fd74a795..7a4441b21 100644 --- 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 index 84763acf9..19d48c00d 100644 --- 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); }; +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", `
`); + } + item.classList.add("fn__none") + } + }) + } + return tempDom.innerHTML; +} + 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); + 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 index 20f0b0a7b..1c04ac1f2 100644 --- 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,