diff --git a/src/display/editor/highlight.js b/src/display/editor/highlight.js index 0aa66d8d2..05a4914dc 100644 --- a/src/display/editor/highlight.js +++ b/src/display/editor/highlight.js @@ -252,12 +252,21 @@ class HighlightEditor extends AnnotationEditor { } setParent(parent) { + let mustBeSelected = false; if (this.parent && !parent) { this.#cleanDrawLayer(); } else if (parent) { this.#addToDrawLayer(parent); + // If mustBeSelected is true it means that this editor was selected + // when its parent has been destroyed, hence we must select it again. + mustBeSelected = + !this.parent && this.div?.classList.contains("selectedEditor"); } super.setParent(parent); + if (mustBeSelected) { + // We select it after the parent has been set. + this.select(); + } } #cleanDrawLayer() { diff --git a/test/integration/highlight_editor_spec.mjs b/test/integration/highlight_editor_spec.mjs index 7627d9dbe..2d18b1c1b 100644 --- a/test/integration/highlight_editor_spec.mjs +++ b/test/integration/highlight_editor_spec.mjs @@ -76,4 +76,60 @@ describe("Highlight Editor", () => { ); }); }); + + describe("Editor must keep selected", () => { + let pages; + + beforeAll(async () => { + pages = await loadAndWait("tracemonkey.pdf", ".annotationEditorLayer"); + }); + + afterAll(async () => { + await closePages(pages); + }); + + it("must scroll and check that the highlight is selected", async () => { + await Promise.all( + pages.map(async ([browserName, page]) => { + await page.click("#editorHighlight"); + await page.waitForSelector(".annotationEditorLayer.highlightEditing"); + + const rect = await page.evaluate(() => { + for (const el of document.querySelectorAll( + `.page[data-page-number="1"] > .textLayer > span` + )) { + if (el.textContent === "Abstract") { + const { x, y, width, height } = el.getBoundingClientRect(); + return { x, y, width, height }; + } + } + return null; + }); + + const x = rect.x + rect.width / 2; + const y = rect.y + rect.height / 2; + await page.mouse.click(x, y, { count: 2 }); + + await page.waitForSelector(`${getEditorSelector(0)}`); + await page.waitForSelector( + `.page[data-page-number = "1"] svg.highlightOutline.selected` + ); + + const oneToOne = Array.from(new Array(13).keys(), n => n + 2).concat( + Array.from(new Array(13).keys(), n => 13 - n) + ); + for (const pageNumber of oneToOne) { + await scrollIntoView( + page, + `.page[data-page-number = "${pageNumber}"]` + ); + } + + await page.waitForSelector( + `.page[data-page-number = "1"] svg.highlightOutline.selected` + ); + }) + ); + }); + }); });