Merge pull request #17381 from calixteman/editor_highlight_selected

[Editor] Highlight must keep selected after the document has been scrolled

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() {

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`
+          );
+        })
+      );
+    });
+  });
 });