Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 9 additions & 0 deletions packages/app/src/components/layout/AppLayout.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -150,6 +150,15 @@ export function AppLayout() {
return () => window.removeEventListener("keydown", handleKeyDown, { capture: true });
}, [toggleCommandPalette]);

useEffect(() => {
const handleContextMenu = (event: MouseEvent) => {
event.preventDefault();
};

window.addEventListener("contextmenu", handleContextMenu, { capture: true });
return () => window.removeEventListener("contextmenu", handleContextMenu, { capture: true });
}, []);

useEffect(() => {
if (!isReaderActive) return;

Expand Down
1 change: 1 addition & 0 deletions packages/app/src/components/reader/ReaderView.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2833,6 +2833,7 @@ export function ReaderView({ bookId, tabId }: ReaderViewProps) {
<SelectionPopover
position={selectionPos}
selectedText={selection.text}
selectionRects={selection.rects}
annotated={selection.annotated}
currentColor={selection.color as HighlightColor | undefined}
defaultColor={viewSettings.defaultHighlightColor ?? "yellow"}
Expand Down
47 changes: 46 additions & 1 deletion packages/app/src/components/reader/SelectionPopover.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ import { useTranslation } from "react-i18next";
interface SelectionPopoverProps {
position: { x: number; y: number };
selectedText: string;
selectionRects: DOMRect[];
annotated?: boolean; // true if this is an existing annotation
currentColor?: HighlightColor; // current highlight color (for existing annotations)
defaultColor?: HighlightColor;
Expand All @@ -39,6 +40,7 @@ const POPOVER_MARGIN = 8;
export function SelectionPopover({
position,
selectedText: _selectedText,
selectionRects,
annotated = false,
currentColor,
defaultColor = "yellow",
Expand All @@ -57,8 +59,33 @@ export function SelectionPopover({
const [selectedColor, setSelectedColor] = useState<HighlightColor>(currentColor || defaultColor);
const overlayRef = useRef<HTMLDivElement>(null);
const popoverRef = useRef<HTMLDivElement>(null);
const closeTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
const [clampedPosition, setClampedPosition] = useState(position);

const clearPendingClose = () => {
if (!closeTimerRef.current) return;
clearTimeout(closeTimerRef.current);
closeTimerRef.current = null;
};

const selectionBounds = selectionRects.reduce<DOMRect | null>((bounds, rect) => {
if (!bounds) {
return new DOMRect(rect.left, rect.top, rect.width, rect.height);
}
const left = Math.min(bounds.left, rect.left);
const top = Math.min(bounds.top, rect.top);
const right = Math.max(bounds.right, rect.right);
const bottom = Math.max(bounds.bottom, rect.bottom);
return new DOMRect(left, top, right - left, bottom - top);
}, null);

const isPointInsideSelection = (x: number, y: number) =>
!!selectionBounds &&
x >= selectionBounds.left &&
x <= selectionBounds.right &&
y >= selectionBounds.top &&
y <= selectionBounds.bottom;

const handleHighlightClick = () => {
// PDF doesn't support highlighting
if (isPdf) return;
Expand Down Expand Up @@ -121,13 +148,31 @@ export function SelectionPopover({
);
});

const handleBackdropClick = () => {
clearPendingClose();
closeTimerRef.current = setTimeout(() => {
closeTimerRef.current = null;
onClose();
}, 320);
};

const handleBackdropDoubleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
clearPendingClose();
if (!isPointInsideSelection(event.clientX, event.clientY)) {
onClose();
return;
}
onAskAI();
};

return (
<div ref={overlayRef} className="absolute inset-0 z-50">
<button
type="button"
aria-label={t("common.close")}
className="absolute inset-0 cursor-default"
onClick={onClose}
onClick={handleBackdropClick}
onDoubleClick={handleBackdropDoubleClick}
/>
<div
ref={popoverRef}
Expand Down
5 changes: 5 additions & 0 deletions packages/app/src/lib/reader/iframe-event-handlers.ts
Original file line number Diff line number Diff line change
Expand Up @@ -142,6 +142,10 @@ export const handleMouseup = (bookKey: string, event: MouseEvent) => {
);
};

export const handleContextMenu = (event: MouseEvent) => {
event.preventDefault();
};

/** Single-click detection with double-click exclusion */
let clickTimer: ReturnType<typeof setTimeout> | null = null;
let clickCount = 0;
Expand Down Expand Up @@ -231,6 +235,7 @@ export function registerIframeEventHandlers(bookKey: string, doc: Document): voi
doc.addEventListener("keyup", handleKeyup.bind(null, bookKey));
doc.addEventListener("mousedown", handleMousedown.bind(null, bookKey));
doc.addEventListener("mouseup", handleMouseup.bind(null, bookKey));
doc.addEventListener("contextmenu", handleContextMenu, { capture: true });
doc.addEventListener("click", handleClick.bind(null, bookKey));
doc.addEventListener("wheel", handleWheel.bind(null, bookKey), {
passive: true,
Expand Down