Merge pull request #17543 from calixteman/bug1869767

[Editor] Unselect highlights when the user click on the text layer (bug 1869767)

src/display/editor/annotation_editor_layer.js

@@ -350,6 +350,9 @@ class AnnotationEditorLayer {
   }
 
   #textLayerPointerDown(event) {
+    // Unselect all the editors in order to let the user select some text
+    // without being annoyed by an editor toolbar.
+    this.#uiManager.unselectAll();
     if (event.target === this.#textLayer.div) {
       const { isMac } = FeatureTest.platform;
       if (event.button !== 0 || (event.ctrlKey && isMac)) {

test/integration/highlight_editor_spec.mjs

@@ -530,4 +530,42 @@ describe("Highlight Editor", () => {
       );
     });
   });
+
+  describe("Color picker can annoy the user when selecting some text", () => {
+    let pages;
+
+    beforeAll(async () => {
+      pages = await loadAndWait("tracemonkey.pdf", ".annotationEditorLayer");
+    });
+
+    afterAll(async () => {
+      await closePages(pages);
+    });
+
+    it("must check that editor is unselected when the mouse is down on the text layer", async () => {
+      await Promise.all(
+        pages.map(async ([browserName, page]) => {
+          await page.click("#editorHighlight");
+          await page.waitForSelector(".annotationEditorLayer.highlightEditing");
+          const sel = getEditorSelector(0);
+
+          const rect = await getSpanRectFromText(page, 1, "Abstract");
+          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(sel);
+          await page.waitForSelector(
+            `.page[data-page-number = "1"] svg.highlightOutline.selected`
+          );
+
+          await page.waitForSelector(`${sel} .editToolbar button.colorPicker`);
+          await page.mouse.click(x, y - rect.height);
+          await page.waitForSelector(
+            `.page[data-page-number = "1"] svg.highlightOutline:not(.selected)`
+          );
+        })
+      );
+    });
+  });
 });