From 4b079bf8f273ef90e3acd30d5a1613770548df3e Mon Sep 17 00:00:00 2001
From: Martynas Bagdonas <git.martynas@gmail.com>
Date: Tue, 31 Oct 2023 12:00:30 +0000
Subject: [PATCH] Fix external links in outline view and allow toggling by
 clicking text

Fixes zotero/zotero#3283
---
 pdfjs/pdf.js                                  |  2 +-
 src/common/components/reader-ui.js            |  1 +
 src/common/components/sidebar/outline-view.js | 46 +++++++++++++------
 3 files changed, 35 insertions(+), 14 deletions(-)

diff --git a/pdfjs/pdf.js b/pdfjs/pdf.js
index 159a1d56..046158be 160000
--- a/pdfjs/pdf.js
+++ b/pdfjs/pdf.js
@@ -1 +1 @@
-Subproject commit 159a1d5612b803ca1d8b1f5d7498d5e84a58c284
+Subproject commit 046158be54cebc3a43b65d0e54731d5635cfbedb
diff --git a/src/common/components/reader-ui.js b/src/common/components/reader-ui.js
index 34da34d9..862430bf 100644
--- a/src/common/components/reader-ui.js
+++ b/src/common/components/reader-ui.js
@@ -167,6 +167,7 @@ const ReaderUI = React.forwardRef((props, ref) => {
 								<OutlineView
 									outline={state.outline}
 									onNavigate={props.onNavigate}
+									onOpenLink={props.onOpenLink}
 									onUpdate={props.onUpdateOutline}
 								/>
 							}
diff --git a/src/common/components/sidebar/outline-view.js b/src/common/components/sidebar/outline-view.js
index 63ec2fac..5ba0550b 100644
--- a/src/common/components/sidebar/outline-view.js
+++ b/src/common/components/sidebar/outline-view.js
@@ -5,7 +5,7 @@ import { IconTreeItemCollapsed, IconTreeItemExpanded } from '../common/icons';
 
 
 
-function Item({ item, children, onNavigate, onUpdate }) {
+function Item({ item, children, onNavigate, onOpenLink, onUpdate }) {
 	function handleExpandToggleClick(event) {
 		item.expanded = !item.expanded;
 		onUpdate();
@@ -13,21 +13,39 @@ function Item({ item, children, onNavigate, onUpdate }) {
 
 	function handleKeyDown(event) {
 		event.preventDefault();
-		if (event.key === 'Enter') {
-			handleExpandToggleClick();
-		}
-		else if (!window.rtl && event.key === 'ArrowLeft' || window.rtl && event.key === 'ArrowRight') {
-			item.expanded = false;
-			onUpdate();
+		if (event.key === 'Enter' && item.url) {
+			onOpenLink(item.url);
 		}
-		else if (!window.rtl && event.key === 'ArrowRight' || window.rtl && event.key === 'ArrowLeft') {
-			item.expanded = true;
-			onUpdate();
+		if (item?.items.length) {
+			if (event.key === 'Enter') {
+				handleExpandToggleClick();
+			}
+			else if (!window.rtl && event.key === 'ArrowLeft' || window.rtl && event.key === 'ArrowRight') {
+				item.expanded = false;
+				onUpdate();
+			}
+			else if (!window.rtl && event.key === 'ArrowRight' || window.rtl && event.key === 'ArrowLeft') {
+				item.expanded = true;
+				onUpdate();
+			}
 		}
 	}
 
 	function handleFocus(event) {
-		onNavigate(item.location);
+		if (item.location) {
+			onNavigate(item.location);
+		}
+	}
+
+	function handleClick() {
+		if (item.items?.length) {
+			handleExpandToggleClick();
+		}
+	}
+
+	function handleURLClick(event) {
+		event.preventDefault();
+		onOpenLink(item.url);
 	}
 
 	let toggle;
@@ -49,14 +67,15 @@ function Item({ item, children, onNavigate, onUpdate }) {
 					tabIndex={-1}
 					onFocus={handleFocus}
 					onKeyDown={handleKeyDown}
-				>{item.title}</div>
+					onClick={handleClick}
+				>{item.title}{item.url && (<> [<a href={item.url} onClick={handleURLClick}>URL</a>]</>)}</div>
 			</div>
 			{children && <div className="children">{children}</div>}
 		</li>
 	);
 }
 
-function OutlineView({ outline, onNavigate, onUpdate}) {
+function OutlineView({ outline, onNavigate, onOpenLink, onUpdate}) {
 	const intl = useIntl();
 
 	function handleUpdate() {
@@ -71,6 +90,7 @@ function OutlineView({ outline, onNavigate, onUpdate}) {
 						key={index}
 						item={item}
 						onNavigate={onNavigate}
+						onOpenLink={onOpenLink}
 						onUpdate={handleUpdate}
 					>
 						{item.expanded && item.items && renderItems(item.items)}