diff --git a/app/src/editor/util.ts b/app/src/editor/util.ts index 5862d8a21..b1cb3417b 100644 --- a/app/src/editor/util.ts +++ b/app/src/editor/util.ts @@ -19,7 +19,6 @@ import {pushBack} from "../util/backForward"; import {Asset} from "../asset"; import {Layout} from "../layout"; import {hasClosestBlock, hasClosestByAttribute, hasClosestByClassName,} from "../protyle/util/hasClosest"; -import {getPreviousHeading} from "../protyle/wysiwyg/getBlock"; import {lockFile, setTitle} from "../dialog/processSystem"; import {zoomOut} from "../menus/protyle"; import {countBlockWord, countSelectWord} from "../layout/status"; @@ -417,14 +416,7 @@ const updateOutline = (models: IModels, protyle: IProtyle, reload = false) => { if (protyle.wysiwyg.element.contains(startContainer)) { const currentElement = hasClosestByAttribute(startContainer, "data-node-id", null); if (currentElement) { - if (currentElement.getAttribute("data-type") === "NodeHeading") { - item.setCurrent(currentElement.getAttribute("data-node-id")); - } else { - const headingElement = getPreviousHeading(currentElement); - if (headingElement) { - item.setCurrent(headingElement.getAttribute("data-node-id")); - } - } + item.setCurrent(currentElement); } } } diff --git a/app/src/layout/dock/Outline.ts b/app/src/layout/dock/Outline.ts index 49e989161..2e8f83843 100644 --- a/app/src/layout/dock/Outline.ts +++ b/app/src/layout/dock/Outline.ts @@ -11,6 +11,7 @@ import {Constants} from "../../constants"; import {escapeHtml} from "../../util/escape"; import {unicode2Emoji} from "../../emoji"; import {onGet} from "../../protyle/util/onGet"; +import {getPreviousBlock} from "../../protyle/wysiwyg/getBlock"; export class Outline extends Model { public tree: Tree; @@ -110,7 +111,9 @@ export class Outline extends Model { options.tab.panelElement.querySelector('[data-type="collapse"]').addEventListener("click", () => { this.tree.collapseAll(); }); - options.tab.panelElement.querySelector('[data-type="expand"]').addEventListener("click", (event: MouseEvent & { target: Element }) => { + options.tab.panelElement.querySelector('[data-type="expand"]').addEventListener("click", (event: MouseEvent & { + target: Element + }) => { const iconElement = hasClosestByClassName(event.target, "block__icon"); if (!iconElement) { return; @@ -215,7 +218,37 @@ export class Outline extends Model { } } - public setCurrent(id: string) { + public setCurrent(nodeElement: HTMLElement) { + if (nodeElement.getAttribute("data-type") === "NodeHeading") { + this.setCurrentById(nodeElement.getAttribute("data-node-id")) + } else { + let previousElement = getPreviousBlock(nodeElement); + while (previousElement) { + if (previousElement.getAttribute("data-type") === "NodeHeading") { + break; + } else { + previousElement = getPreviousBlock(previousElement); + } + } + if (previousElement) { + this.setCurrentById(previousElement.getAttribute("data-node-id")) + } else { + fetchPost("/api/block/getBlockBreadcrumb", { + id: nodeElement.getAttribute("data-node-id"), + excludeTypes: [] + }, (response) => { + response.data.reverse().find((item: IBreadcrumb) => { + if (item.type === "NodeHeading") { + this.setCurrentById(item.id); + return true; + } + }); + }); + } + } + } + + private setCurrentById(id: string) { this.element.querySelectorAll(".b3-list-item.b3-list-item--focus").forEach(item => { item.classList.remove("b3-list-item--focus"); }); diff --git a/app/src/protyle/wysiwyg/getBlock.ts b/app/src/protyle/wysiwyg/getBlock.ts index 0291dde99..10c07c693 100644 --- a/app/src/protyle/wysiwyg/getBlock.ts +++ b/app/src/protyle/wysiwyg/getBlock.ts @@ -1,18 +1,6 @@ import {hasClosestBlock, hasClosestByAttribute} from "../util/hasClosest"; import {Constants} from "../../constants"; -export const getPreviousHeading = (element: Element) => { - let previous = getPreviousBlock(element); - while (previous) { - if (previous.getAttribute("data-type") === "NodeHeading") { - break; - } else { - previous = getPreviousBlock(previous); - } - } - return previous; -}; - export const getPreviousBlock = (element: Element) => { let parentElement = element; while (parentElement) { diff --git a/app/src/protyle/wysiwyg/index.ts b/app/src/protyle/wysiwyg/index.ts index 25eb63c39..13a2b9f8c 100644 --- a/app/src/protyle/wysiwyg/index.ts +++ b/app/src/protyle/wysiwyg/index.ts @@ -28,7 +28,6 @@ import { getContenteditableElement, getLastBlock, getNextBlock, - getPreviousHeading, getTopAloneElement, hasNextSibling, hasPreviousSibling, @@ -175,16 +174,7 @@ export class WYSIWYG { if (protyle.model) { getAllModels().outline.forEach(item => { if (item.blockId === protyle.block.rootID) { - if (nodeElement.getAttribute("data-type") === "NodeHeading") { - item.setCurrent(nodeElement.getAttribute("data-node-id")); - return; - } - const headingElement = getPreviousHeading(nodeElement); - if (headingElement) { - item.setCurrent(headingElement.getAttribute("data-node-id")); - return; - } - item.setCurrent(""); + item.setCurrent(nodeElement) } }); }