mirror of
https://github.com/zen-browser/pdf.js.git
synced 2025-07-07 17:05:38 +02:00
Disable link annotations during text selection
When selecting text, hovering over an element causes all the text between (according the the dom order) the current selection and that element to be selected. This means that when, while selecting, the cursor moves over a link, all the text in the page gets selected. Setting `user-select: none` on the link annotations would improve the situation, but it still makes it impossible to extend the selection within a link without using Shift+arrows keys on the keyboard. This commit fixes the problem by setting `pointer-events: none` on the `<section>`s in the annotation layer while selecting some text. This way, they are ignored for hit-testing and do not affect selection. It is still impossible to _start_ a selection inside a link, as the link text is covered by the link annotation. Fixes #18266
This commit is contained in:
parent
98e772727e
commit
64a0e59662
5 changed files with 289 additions and 101 deletions
|
@ -173,7 +173,7 @@ async function getSpanRectFromText(page, pageNumber, text) {
|
|||
return page.evaluate(
|
||||
(number, content) => {
|
||||
for (const el of document.querySelectorAll(
|
||||
`.page[data-page-number="${number}"] > .textLayer > span`
|
||||
`.page[data-page-number="${number}"] > .textLayer span:not(:has(> span))`
|
||||
)) {
|
||||
if (el.textContent === content) {
|
||||
const { x, y, width, height } = el.getBoundingClientRect();
|
||||
|
|
|
@ -14,6 +14,7 @@
|
|||
*/
|
||||
|
||||
import {
|
||||
awaitPromise,
|
||||
closePages,
|
||||
closeSinglePage,
|
||||
getSpanRectFromText,
|
||||
|
@ -98,6 +99,7 @@ describe("Text layer", () => {
|
|||
});
|
||||
|
||||
describe("using mouse", () => {
|
||||
describe("doesn't jump when hovering on an empty area", () => {
|
||||
let pages;
|
||||
|
||||
beforeAll(async () => {
|
||||
|
@ -110,7 +112,7 @@ describe("Text layer", () => {
|
|||
await closePages(pages);
|
||||
});
|
||||
|
||||
it("doesn't jump when hovering on an empty area", async () => {
|
||||
it("in a single page", async () => {
|
||||
await Promise.all(
|
||||
pages.map(async ([browserName, page]) => {
|
||||
const [positionStart, positionEnd] = await Promise.all([
|
||||
|
@ -141,7 +143,7 @@ describe("Text layer", () => {
|
|||
);
|
||||
});
|
||||
|
||||
it("doesn't jump when hovering on an empty area (multi-page)", async () => {
|
||||
it("across multiple pages", async () => {
|
||||
await Promise.all(
|
||||
pages.map(async ([browserName, page]) => {
|
||||
const scrollTarget = await getSpanRectFromText(
|
||||
|
@ -206,6 +208,162 @@ describe("Text layer", () => {
|
|||
});
|
||||
});
|
||||
|
||||
describe("when selecting over a link", () => {
|
||||
let pages;
|
||||
|
||||
beforeAll(async () => {
|
||||
pages = await loadAndWait(
|
||||
"annotation-link-text-popup.pdf",
|
||||
`.page[data-page-number = "1"] .endOfContent`
|
||||
);
|
||||
});
|
||||
afterAll(async () => {
|
||||
await closePages(pages);
|
||||
});
|
||||
afterEach(() =>
|
||||
Promise.all(
|
||||
pages.map(([_, page]) =>
|
||||
page.evaluate(() => window.getSelection().removeAllRanges())
|
||||
)
|
||||
)
|
||||
);
|
||||
|
||||
function waitForClick(page, selector, timeout) {
|
||||
return page.evaluateHandle(
|
||||
(sel, timeoutDelay) => {
|
||||
const element = document.querySelector(sel);
|
||||
const timeoutSignal = AbortSignal.timeout(timeoutDelay);
|
||||
return [
|
||||
new Promise(resolve => {
|
||||
timeoutSignal.addEventListener(
|
||||
"abort",
|
||||
() => resolve(false),
|
||||
{ once: true }
|
||||
);
|
||||
element.addEventListener(
|
||||
"click",
|
||||
e => {
|
||||
e.preventDefault();
|
||||
resolve(true);
|
||||
},
|
||||
{ once: true, signal: timeoutSignal }
|
||||
);
|
||||
}),
|
||||
];
|
||||
},
|
||||
selector,
|
||||
timeout
|
||||
);
|
||||
}
|
||||
|
||||
it("allows selecting within the link", async () => {
|
||||
await Promise.all(
|
||||
pages.map(async ([browserName, page]) => {
|
||||
const [positionStart, positionEnd] = await Promise.all([
|
||||
getSpanRectFromText(page, 1, "Link").then(middleLeftPosition),
|
||||
getSpanRectFromText(page, 1, "mozilla.org").then(
|
||||
middlePosition
|
||||
),
|
||||
]);
|
||||
|
||||
await page.mouse.move(positionStart.x, positionStart.y);
|
||||
await page.mouse.down();
|
||||
await moveInSteps(page, positionStart, positionEnd, 20);
|
||||
await page.mouse.up();
|
||||
|
||||
await expectAsync(page)
|
||||
.withContext(`In ${browserName}`)
|
||||
.toHaveRoughlySelected("Link\nmozil");
|
||||
})
|
||||
);
|
||||
});
|
||||
|
||||
it("allows selecting within the link when going backwards", async () => {
|
||||
await Promise.all(
|
||||
pages.map(async ([browserName, page]) => {
|
||||
const [positionStart, positionEnd] = await Promise.all([
|
||||
getSpanRectFromText(page, 1, "Text").then(middlePosition),
|
||||
getSpanRectFromText(page, 1, "mozilla.org").then(
|
||||
middlePosition
|
||||
),
|
||||
]);
|
||||
|
||||
await page.mouse.move(positionStart.x, positionStart.y);
|
||||
await page.mouse.down();
|
||||
await moveInSteps(page, positionStart, positionEnd, 20);
|
||||
await page.mouse.up();
|
||||
|
||||
await expectAsync(page)
|
||||
.withContext(`In ${browserName}`)
|
||||
.toHaveRoughlySelected("a.org\nTe");
|
||||
})
|
||||
);
|
||||
});
|
||||
|
||||
it("allows clicking the link after selecting", async () => {
|
||||
await Promise.all(
|
||||
pages.map(async ([browserName, page]) => {
|
||||
const [positionStart, positionEnd] = await Promise.all([
|
||||
getSpanRectFromText(page, 1, "Link").then(middleLeftPosition),
|
||||
getSpanRectFromText(page, 1, "mozilla.org").then(
|
||||
middlePosition
|
||||
),
|
||||
]);
|
||||
|
||||
await page.mouse.move(positionStart.x, positionStart.y);
|
||||
await page.mouse.down();
|
||||
await moveInSteps(page, positionStart, positionEnd, 20);
|
||||
await page.mouse.up();
|
||||
|
||||
const clickPromiseHandle = await waitForClick(
|
||||
page,
|
||||
"#pdfjs_internal_id_8R",
|
||||
1000
|
||||
);
|
||||
|
||||
await page.mouse.click(positionEnd.x, positionEnd.y);
|
||||
|
||||
const clicked = await awaitPromise(clickPromiseHandle);
|
||||
expect(clicked).toBeTrue();
|
||||
})
|
||||
);
|
||||
});
|
||||
|
||||
it("allows clicking the link after changing selection with the keyboard", async () => {
|
||||
await Promise.all(
|
||||
pages.map(async ([browserName, page]) => {
|
||||
const [positionStart, positionEnd] = await Promise.all([
|
||||
getSpanRectFromText(page, 1, "Link").then(middleLeftPosition),
|
||||
getSpanRectFromText(page, 1, "mozilla.org").then(
|
||||
middlePosition
|
||||
),
|
||||
]);
|
||||
|
||||
await page.mouse.move(positionStart.x, positionStart.y);
|
||||
await page.mouse.down();
|
||||
await moveInSteps(page, positionStart, positionEnd, 20);
|
||||
await page.mouse.up();
|
||||
|
||||
await page.keyboard.down("Shift");
|
||||
await page.keyboard.press("ArrowRight");
|
||||
await page.keyboard.up("Shift");
|
||||
|
||||
const clickPromiseHandle = await waitForClick(
|
||||
page,
|
||||
"#pdfjs_internal_id_8R",
|
||||
1000
|
||||
);
|
||||
|
||||
await page.mouse.click(positionEnd.x, positionEnd.y);
|
||||
|
||||
const clicked = await awaitPromise(clickPromiseHandle);
|
||||
expect(clicked).toBeTrue();
|
||||
})
|
||||
);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe("using selection carets", () => {
|
||||
let browser;
|
||||
let page;
|
||||
|
|
|
@ -126,6 +126,10 @@
|
|||
}
|
||||
}
|
||||
|
||||
.textLayer.selecting ~ & section {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
:is(.linkAnnotation, .buttonWidgetAnnotation.pushButton) > a {
|
||||
position: absolute;
|
||||
font-size: 1em;
|
||||
|
|
|
@ -118,9 +118,9 @@
|
|||
z-index: 0;
|
||||
cursor: default;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
&.active {
|
||||
&.selecting .endOfContent {
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -150,8 +150,8 @@ class TextLayerBuilder {
|
|||
#bindMouse(end) {
|
||||
const { div } = this;
|
||||
|
||||
div.addEventListener("mousedown", evt => {
|
||||
end.classList.add("active");
|
||||
div.addEventListener("mousedown", () => {
|
||||
div.classList.add("selecting");
|
||||
});
|
||||
|
||||
div.addEventListener("copy", event => {
|
||||
|
@ -193,16 +193,42 @@ class TextLayerBuilder {
|
|||
end.style.width = "";
|
||||
end.style.height = "";
|
||||
}
|
||||
end.classList.remove("active");
|
||||
textLayer.classList.remove("selecting");
|
||||
};
|
||||
|
||||
let isPointerDown = false;
|
||||
document.addEventListener(
|
||||
"pointerdown",
|
||||
() => {
|
||||
isPointerDown = true;
|
||||
},
|
||||
{ signal }
|
||||
);
|
||||
document.addEventListener(
|
||||
"pointerup",
|
||||
() => {
|
||||
isPointerDown = false;
|
||||
this.#textLayers.forEach(reset);
|
||||
},
|
||||
{ signal }
|
||||
);
|
||||
window.addEventListener(
|
||||
"blur",
|
||||
() => {
|
||||
isPointerDown = false;
|
||||
this.#textLayers.forEach(reset);
|
||||
},
|
||||
{ signal }
|
||||
);
|
||||
document.addEventListener(
|
||||
"keyup",
|
||||
() => {
|
||||
if (!isPointerDown) {
|
||||
this.#textLayers.forEach(reset);
|
||||
}
|
||||
},
|
||||
{ signal }
|
||||
);
|
||||
|
||||
if (typeof PDFJSDev === "undefined" || !PDFJSDev.test("MOZCENTRAL")) {
|
||||
// eslint-disable-next-line no-var
|
||||
|
@ -237,7 +263,7 @@ class TextLayerBuilder {
|
|||
|
||||
for (const [textLayerDiv, endDiv] of this.#textLayers) {
|
||||
if (activeTextLayers.has(textLayerDiv)) {
|
||||
endDiv.classList.add("active");
|
||||
textLayerDiv.classList.add("selecting");
|
||||
} else {
|
||||
reset(endDiv, textLayerDiv);
|
||||
}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue