From 0014c8b5f3e6bad4b5740ab95a1f477c0312411f Mon Sep 17 00:00:00 2001 From: Vanessa Date: Fri, 30 Sep 2022 00:12:35 +0800 Subject: [PATCH] :sparkles: https://github.com/siyuan-note/siyuan/issues/3565 --- app/src/layout/dock/Backlink.ts | 25 ++++++++++++++++++++--- app/src/protyle/wysiwyg/index.ts | 11 +++++++++- app/src/protyle/wysiwyg/remove.ts | 7 +++++++ app/src/protyle/wysiwyg/renderBacklink.ts | 24 +++++++++++++++++++++- 4 files changed, 62 insertions(+), 5 deletions(-) diff --git a/app/src/layout/dock/Backlink.ts b/app/src/layout/dock/Backlink.ts index 40a4c0c9c..b21edf1de 100644 --- a/app/src/layout/dock/Backlink.ts +++ b/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: `` }); + 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(); diff --git a/app/src/protyle/wysiwyg/index.ts b/app/src/protyle/wysiwyg/index.ts index 9563e2e88..5768d3395 100644 --- a/app/src/protyle/wysiwyg/index.ts +++ b/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; } diff --git a/app/src/protyle/wysiwyg/remove.ts b/app/src/protyle/wysiwyg/remove.ts index 7bf294bce..1775b0370 100644 --- a/app/src/protyle/wysiwyg/remove.ts +++ b/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 === "") { diff --git a/app/src/protyle/wysiwyg/renderBacklink.ts b/app/src/protyle/wysiwyg/renderBacklink.ts index 8ac7637fb..e7d636fbf 100644 --- a/app/src/protyle/wysiwyg/renderBacklink.ts +++ b/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 += ` + html += ` ${item.name} `;