From 1f4d5212d67af01ec31b9cdd52288dccdd67fe7f Mon Sep 17 00:00:00 2001 From: Jackson Harper Date: Wed, 11 Oct 2023 21:32:56 +0800 Subject: [PATCH 1/5] Handle shortcut events when pdf search is focused --- .../templates/article/PdfArticleContainer.tsx | 41 ++++++++++++++++++- 1 file changed, 39 insertions(+), 2 deletions(-) diff --git a/packages/web/components/templates/article/PdfArticleContainer.tsx b/packages/web/components/templates/article/PdfArticleContainer.tsx index 6a5b4f78a..fb07e12e9 100644 --- a/packages/web/components/templates/article/PdfArticleContainer.tsx +++ b/packages/web/components/templates/article/PdfArticleContainer.tsx @@ -35,8 +35,9 @@ export default function PdfArticleContainer( const containerRef = useRef(null) const [notebookKey, setNotebookKey] = useState(uuidv4()) const [noteTarget, setNoteTarget] = useState(undefined) - const [noteTargetPageIndex, setNoteTargetPageIndex] = - useState(undefined) + const [noteTargetPageIndex, setNoteTargetPageIndex] = useState< + number | undefined + >(undefined) const highlightsRef = useRef([]) const annotationOmnivoreId = (annotation: Annotation): string | undefined => { @@ -418,7 +419,43 @@ export default function PdfArticleContainer( } ) + function getActiveElement(element = document.activeElement) { + if (element && !('contentDocument' in element)) { + return undefined + } + + const shadowRoot = element?.shadowRoot + const contentDocument = element?.contentDocument as Document + + if (shadowRoot && shadowRoot.activeElement) { + return getActiveElement(shadowRoot.activeElement) + } + + if (contentDocument && contentDocument.activeElement) { + return getActiveElement(contentDocument.activeElement) + } + + return element + } + function keyDownHandler(event: globalThis.KeyboardEvent) { + var inputs = ['input', 'select', 'button', 'textarea'] + + if (event.target && 'nodeName' in event.target) { + const nodeName = (event.target.nodeName as string).toLowerCase() + console.log('nodeName: ', nodeName) + if (inputs.indexOf(nodeName) != -1) { + return + } + } + + var activeElement = event.target + if (activeElement && 'nodeName' in activeElement) { + if (inputs.indexOf(activeElement.nodeName as string) != -1) { + return + } + } + const key = event.key.toLowerCase() switch (key) { case 'o': From 3ca664ed671768f821653a831800ec076e554f0d Mon Sep 17 00:00:00 2001 From: Jackson Harper Date: Wed, 11 Oct 2023 21:34:03 +0800 Subject: [PATCH 2/5] Remove debug line --- .../web/components/templates/article/PdfArticleContainer.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/web/components/templates/article/PdfArticleContainer.tsx b/packages/web/components/templates/article/PdfArticleContainer.tsx index fb07e12e9..d36a7bb24 100644 --- a/packages/web/components/templates/article/PdfArticleContainer.tsx +++ b/packages/web/components/templates/article/PdfArticleContainer.tsx @@ -443,7 +443,6 @@ export default function PdfArticleContainer( if (event.target && 'nodeName' in event.target) { const nodeName = (event.target.nodeName as string).toLowerCase() - console.log('nodeName: ', nodeName) if (inputs.indexOf(nodeName) != -1) { return } From b953001215905f4bb0f78d042838521b51b871cb Mon Sep 17 00:00:00 2001 From: Jackson Harper Date: Wed, 11 Oct 2023 21:54:53 +0800 Subject: [PATCH 3/5] Simplify --- .../templates/article/PdfArticleContainer.tsx | 26 ------------------- 1 file changed, 26 deletions(-) diff --git a/packages/web/components/templates/article/PdfArticleContainer.tsx b/packages/web/components/templates/article/PdfArticleContainer.tsx index d36a7bb24..5e6fd8425 100644 --- a/packages/web/components/templates/article/PdfArticleContainer.tsx +++ b/packages/web/components/templates/article/PdfArticleContainer.tsx @@ -419,25 +419,6 @@ export default function PdfArticleContainer( } ) - function getActiveElement(element = document.activeElement) { - if (element && !('contentDocument' in element)) { - return undefined - } - - const shadowRoot = element?.shadowRoot - const contentDocument = element?.contentDocument as Document - - if (shadowRoot && shadowRoot.activeElement) { - return getActiveElement(shadowRoot.activeElement) - } - - if (contentDocument && contentDocument.activeElement) { - return getActiveElement(contentDocument.activeElement) - } - - return element - } - function keyDownHandler(event: globalThis.KeyboardEvent) { var inputs = ['input', 'select', 'button', 'textarea'] @@ -448,13 +429,6 @@ export default function PdfArticleContainer( } } - var activeElement = event.target - if (activeElement && 'nodeName' in activeElement) { - if (inputs.indexOf(activeElement.nodeName as string) != -1) { - return - } - } - const key = event.key.toLowerCase() switch (key) { case 'o': From 0a8d6515f95d9c71747d01f4e20814ca75faa6f9 Mon Sep 17 00:00:00 2001 From: Jackson Harper Date: Thu, 12 Oct 2023 09:56:29 +0800 Subject: [PATCH 4/5] Fix nodeName check --- .../templates/article/PdfArticleContainer.tsx | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/packages/web/components/templates/article/PdfArticleContainer.tsx b/packages/web/components/templates/article/PdfArticleContainer.tsx index 5e6fd8425..03f52a875 100644 --- a/packages/web/components/templates/article/PdfArticleContainer.tsx +++ b/packages/web/components/templates/article/PdfArticleContainer.tsx @@ -420,9 +420,13 @@ export default function PdfArticleContainer( ) function keyDownHandler(event: globalThis.KeyboardEvent) { - var inputs = ['input', 'select', 'button', 'textarea'] + const inputs = ['input', 'select', 'button', 'textarea'] - if (event.target && 'nodeName' in event.target) { + if ( + event.target && + 'nodeName' in event.target && + typeof event.target.nodeName == 'string' + ) { const nodeName = (event.target.nodeName as string).toLowerCase() if (inputs.indexOf(nodeName) != -1) { return @@ -455,8 +459,6 @@ export default function PdfArticleContainer( const highlight = root?.querySelector( '.PSPDFKit-Text-Markup-Inline-Toolbar-Highlight' ) - console.log('root ', root) - console.log('highlight overlay: ', highlight, highlight?.nodeName) if (highlight && highlight?.nodeName == 'BUTTON') { const button = highlight as HTMLButtonElement button.click() From c75c38b01b3c2e0a98cf3f86e759beca2574c31f Mon Sep 17 00:00:00 2001 From: Jackson Harper Date: Thu, 12 Oct 2023 10:22:34 +0800 Subject: [PATCH 5/5] Use a typescript is function to extract event target node --- .../templates/article/PdfArticleContainer.tsx | 24 +++++++++++++------ 1 file changed, 17 insertions(+), 7 deletions(-) diff --git a/packages/web/components/templates/article/PdfArticleContainer.tsx b/packages/web/components/templates/article/PdfArticleContainer.tsx index 03f52a875..210b1b2ae 100644 --- a/packages/web/components/templates/article/PdfArticleContainer.tsx +++ b/packages/web/components/templates/article/PdfArticleContainer.tsx @@ -419,15 +419,25 @@ export default function PdfArticleContainer( } ) - function keyDownHandler(event: globalThis.KeyboardEvent) { + type PossibleInputEventTarget = KeyboardEvent & { + nodeName: string + } + + function isPossibleInputEventTarget( + target: any + ): target is PossibleInputEventTarget { + return ( + 'nodeName' in target && + typeof target.nodeName == 'string' && + target.nodeName + ) + } + + function keyDownHandler(event: KeyboardEvent) { const inputs = ['input', 'select', 'button', 'textarea'] - if ( - event.target && - 'nodeName' in event.target && - typeof event.target.nodeName == 'string' - ) { - const nodeName = (event.target.nodeName as string).toLowerCase() + if (event.target && isPossibleInputEventTarget(event.target)) { + const nodeName = event.target.nodeName.toLowerCase() if (inputs.indexOf(nodeName) != -1) { return }