0ct0pu5/siyuan
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source
This commit is contained in:
Vanessa 2022-09-30 18:05:24 +08:00
parent b552c03736
commit 6005027991
4 changed files with 57 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
app/src/layout/dock/Backlink.ts
View file

@ -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: "",

13
app/src/protyle/wysiwyg/index.ts
View file

@ -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;
}

60
app/src/protyle/wysiwyg/renderBacklink.ts
View file

@ -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", `<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) => {
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) => {

1
app/src/types/protyle.d.ts vendored
View file

@ -362,6 +362,7 @@ interface IOptions {
backlinkData?: {
blockPaths: IBreadcrumb[],
dom: string
expand: boolean
}[],
action?: string[],
mode?: TEditorMode,