diff --git a/app/src/protyle/breadcrumb/index.ts b/app/src/protyle/breadcrumb/index.ts index fa7928a04..bb8b1605b 100644 --- a/app/src/protyle/breadcrumb/index.ts +++ b/app/src/protyle/breadcrumb/index.ts @@ -31,6 +31,7 @@ import {emitOpenMenu} from "../../plugin/EventBus"; import {isInAndroid, isIPad, isMac, updateHotkeyTip} from "../util/compatibility"; import {resize} from "../util/resize"; import {listIndent, listOutdent} from "../wysiwyg/list"; +import {improveBreadcrumbAppearance} from "../wysiwyg/renderBacklink"; export class Breadcrumb { public element: HTMLElement; @@ -651,30 +652,8 @@ ${padHTML} html += ''; } }); - this.element.classList.remove("protyle-breadcrumb__bar--nowrap"); this.element.innerHTML = html; - const itemElements = Array.from(this.element.querySelectorAll(".protyle-breadcrumb__text")); - if (itemElements.length === 0) { - return; - } - let jump = false; - while (this.element.scrollHeight > 30 && !jump && itemElements.length > 1) { - itemElements.find((item, index) => { - if (index > 0) { - if (!item.classList.contains("protyle-breadcrumb__text--ellipsis")) { - item.classList.add("protyle-breadcrumb__text--ellipsis"); - return true; - } - if (index === itemElements.length - 1 && item.classList.contains("protyle-breadcrumb__text--ellipsis")) { - jump = true; - } - } - }); - } - this.element.classList.add("protyle-breadcrumb__bar--nowrap"); - if (this.element.lastElementChild) { - this.element.scrollLeft = (this.element.lastElementChild as HTMLElement).offsetLeft - this.element.clientWidth + 14; - } + improveBreadcrumbAppearance(this.element.parentElement); }); /// #endif } diff --git a/app/src/protyle/render/blockRender.ts b/app/src/protyle/render/blockRender.ts index 6eb9f88a4..41e416b15 100644 --- a/app/src/protyle/render/blockRender.ts +++ b/app/src/protyle/render/blockRender.ts @@ -3,7 +3,7 @@ import {fetchPost, fetchSyncPost} from "../../util/fetch"; import {processRender} from "../util/processCode"; import {highlightRender} from "./highlightRender"; import {Constants} from "../../constants"; -import {genBreadcrumb} from "../wysiwyg/renderBacklink"; +import {genBreadcrumb, improveBreadcrumbAppearance} from "../wysiwyg/renderBacklink"; import {avRender} from "./av/render"; export const blockRender = (protyle: IProtyle, element: Element, top?: number) => { @@ -115,6 +115,7 @@ const renderEmbed = (blocks: { item.lastElementChild.insertAdjacentHTML("beforebegin", html + // 辅助上下移动时进行选中 `
${Constants.ZWSP}
`); + improveBreadcrumbAppearance(item.querySelector(".protyle-wysiwyg__embed")); } else { item.lastElementChild.insertAdjacentHTML("beforebegin", `
${window.siyuan.languages.refExpired}
${Constants.ZWSP}
`); diff --git a/app/src/protyle/wysiwyg/renderBacklink.ts b/app/src/protyle/wysiwyg/renderBacklink.ts index 829ab3c0d..4ceea4916 100644 --- a/app/src/protyle/wysiwyg/renderBacklink.ts +++ b/app/src/protyle/wysiwyg/renderBacklink.ts @@ -19,9 +19,7 @@ export const renderBacklink = (protyle: IProtyle, backlinkData: { html += genBreadcrumb(item.blockPaths, false, index) + setBacklinkFold(item.dom, item.expand); }); protyle.wysiwyg.element.innerHTML = html; - protyle.wysiwyg.element.querySelectorAll(".protyle-breadcrumb__bar .protyle-breadcrumb__item--active").forEach((item:HTMLElement) => { - item.parentElement.scrollLeft = item.offsetLeft; - }); + improveBreadcrumbAppearance(protyle.wysiwyg.element); processRender(protyle.wysiwyg.element); highlightRender(protyle.wysiwyg.element); avRender(protyle.wysiwyg.element, protyle); @@ -120,5 +118,33 @@ export const genBreadcrumb = (blockPaths: IBreadcrumb[], renderFirst: boolean, p html += ''; } }); - return `
${html}
`; + return `
${html}
`; }; + +export const improveBreadcrumbAppearance = (element: HTMLElement) => { + element.querySelectorAll(".protyle-breadcrumb__bar").forEach((item: HTMLElement) => { + item.classList.remove("protyle-breadcrumb__bar--nowrap"); + const itemElements = Array.from(item.querySelectorAll(".protyle-breadcrumb__text")); + if (itemElements.length === 0) { + return; + } + let jump = false; + while (item.scrollHeight > 30 && !jump && itemElements.length > 1) { + itemElements.find((item, index) => { + if (index > 0) { + if (!item.classList.contains("protyle-breadcrumb__text--ellipsis")) { + item.classList.add("protyle-breadcrumb__text--ellipsis"); + return true; + } + if (index === itemElements.length - 1 && item.classList.contains("protyle-breadcrumb__text--ellipsis")) { + jump = true; + } + } + }); + } + item.classList.add("protyle-breadcrumb__bar--nowrap"); + if (item.lastElementChild) { + item.scrollLeft = (item.lastElementChild as HTMLElement).offsetLeft - item.clientWidth + 14; + } + }); +}