[Editor] Avoid editor creation/selection on right click (bug 1781762)

This commit is contained in:
Calixte Denizet 2022-07-27 14:11:29 +02:00
parent 8ebd2d3dfd
commit ce4144eee4
6 changed files with 100 additions and 18 deletions

View File

@ -21,8 +21,8 @@
/** @typedef {import("../../web/interfaces").IL10n} IL10n */
import { AnnotationEditorType, shadow } from "../../shared/util.js";
import { bindEvents, KeyboardManager } from "./tools.js";
import { binarySearchFirstItem } from "../display_utils.js";
import { bindEvents } from "./tools.js";
import { FreeTextEditor } from "./freetext.js";
import { InkEditor } from "./ink.js";
@ -577,6 +577,12 @@ class AnnotationEditorLayer {
* @param {PointerEvent} event
*/
pointerup(event) {
const isMac = KeyboardManager.platform.isMac;
if (event.button !== 0 || (event.ctrlKey && isMac)) {
// Don't create an editor on right click.
return;
}
if (event.target !== this.div) {
return;
}
@ -594,6 +600,12 @@ class AnnotationEditorLayer {
* @param {PointerEvent} event
*/
pointerdown(event) {
const isMac = KeyboardManager.platform.isMac;
if (event.button !== 0 || (event.ctrlKey && isMac)) {
// Do nothing on right click.
return;
}
if (event.target !== this.div) {
return;
}

View File

@ -253,6 +253,7 @@ class AnnotationEditor {
if (event.button !== 0 || (event.ctrlKey && isMac)) {
// Avoid to focus this editor because of a non-left click.
event.preventDefault();
return;
}
if (

View File

@ -217,6 +217,10 @@ class FreeTextEditor extends AnnotationEditor {
/** @inheritdoc */
enableEditMode() {
if (this.isInEditMode()) {
return;
}
this.parent.setEditingState(false);
this.parent.updateToolbar(AnnotationEditorType.FREETEXT);
super.enableEditMode();
@ -230,6 +234,10 @@ class FreeTextEditor extends AnnotationEditor {
/** @inheritdoc */
disableEditMode() {
if (!this.isInEditMode()) {
return;
}
this.parent.setEditingState(true);
super.disableEditMode();
this.overlayDiv.classList.add("enabled");
@ -239,6 +247,10 @@ class FreeTextEditor extends AnnotationEditor {
this.editorDiv.removeEventListener("focus", this.#boundEditorDivFocus);
this.editorDiv.removeEventListener("blur", this.#boundEditorDivBlur);
// On Chrome, the focus is given to <body> when contentEditable is set to
// false, hence we focus the div.
this.div.focus();
// In case the blur callback hasn't been called.
this.isEditing = false;
}

View File

@ -244,6 +244,7 @@ class KeyboardManager {
return;
}
callback.bind(self)();
event.stopPropagation();
event.preventDefault();
}
}

View File

@ -25,7 +25,7 @@ describe("Editor", () => {
let pages;
beforeAll(async () => {
pages = await loadAndWait("tracemonkey.pdf", ".annotationEditorLayer");
pages = await loadAndWait("aboutstacks.pdf", ".annotationEditorLayer");
});
afterAll(async () => {
@ -204,13 +204,13 @@ describe("Editor", () => {
it("must check that aria-owns is correct", async () => {
await Promise.all(
pages.map(async ([browserName, page]) => {
const [adobeComRect, oldAriaOwns] = await page.$eval(
const [stacksRect, oldAriaOwns] = await page.$eval(
".textLayer",
el => {
for (const span of el.querySelectorAll(
`span[role="presentation"]`
)) {
if (span.innerText.includes("adobe.com")) {
if (span.innerText.includes("Stacks are simple to create")) {
span.setAttribute("pdfjs", true);
const { x, y, width, height } = span.getBoundingClientRect();
return [
@ -227,21 +227,13 @@ describe("Editor", () => {
const data = "Hello PDF.js World !!";
await page.mouse.click(
adobeComRect.x + adobeComRect.width + 10,
adobeComRect.y + adobeComRect.height / 2
stacksRect.x + stacksRect.width + 1,
stacksRect.y + stacksRect.height / 2
);
await page.type(`${editorPrefix}5 .internal`, data);
const editorRect = await page.$eval(`${editorPrefix}5`, el => {
const { x, y, width, height } = el.getBoundingClientRect();
return { x, y, width, height };
});
// Commit.
await page.mouse.click(
editorRect.x,
editorRect.y + 2 * editorRect.height
);
await page.keyboard.press("Escape");
const ariaOwns = await page.$eval(".textLayer", el => {
const span = el.querySelector(`span[pdfjs="true"]`);
@ -254,13 +246,77 @@ describe("Editor", () => {
})
);
});
it("must check that right click doesn't select", async () => {
await Promise.all(
pages.map(async ([browserName, page]) => {
const rect = await page.$eval(".annotationEditorLayer", el => {
const { x, y } = el.getBoundingClientRect();
return { x, y };
});
await page.keyboard.down("Control");
await page.keyboard.press("a");
await page.keyboard.up("Control");
await page.keyboard.down("Control");
await page.keyboard.press("Backspace");
await page.keyboard.up("Control");
const data = "Hello PDF.js World !!";
await page.mouse.click(rect.x + 100, rect.y + 100);
await page.type(`${editorPrefix}6 .internal`, data);
const editorRect = await page.$eval(`${editorPrefix}6`, el => {
const { x, y, width, height } = el.getBoundingClientRect();
return { x, y, width, height };
});
// Commit.
await page.keyboard.press("Escape");
expect(await getSelectedEditors(page))
.withContext(`In ${browserName}`)
.toEqual([6]);
await page.keyboard.press("Escape");
expect(await getSelectedEditors(page))
.withContext(`In ${browserName}`)
.toEqual([]);
await page.mouse.click(
editorRect.x + editorRect.width / 2,
editorRect.y + editorRect.height / 2
);
expect(await getSelectedEditors(page))
.withContext(`In ${browserName}`)
.toEqual([6]);
// Escape.
await page.keyboard.press("Escape");
expect(await getSelectedEditors(page))
.withContext(`In ${browserName}`)
.toEqual([]);
// TODO: uncomment that stuff once we've a way to dismiss
// the context menu.
/* await page.mouse.click(
editorRect.x + editorRect.width / 2,
editorRect.y + editorRect.height / 2,
{ button: "right" }
); */
})
);
});
});
describe("FreeText (multiselection)", () => {
let pages;
beforeAll(async () => {
pages = await loadAndWait("tracemonkey.pdf", ".annotationEditorLayer");
pages = await loadAndWait("aboutstacks.pdf", ".annotationEditorLayer");
});
afterAll(async () => {

View File

@ -24,7 +24,7 @@ describe("Editor", () => {
let pages;
beforeAll(async () => {
pages = await loadAndWait("tracemonkey.pdf", ".annotationEditorLayer");
pages = await loadAndWait("aboutstacks.pdf", ".annotationEditorLayer");
});
afterAll(async () => {
@ -60,7 +60,7 @@ describe("Editor", () => {
expect(await getSelectedEditors(page))
.withContext(`In ${browserName}`)
.toEqual([0, 2, 3]);
.toEqual([0, 1, 2]);
await page.keyboard.press("Backspace");