diff --git a/packages/web/src/app/bookmarks/$bookmarkId.tsx b/packages/web/src/app/bookmarks/$bookmarkId.tsx index f7246aa..92bae2d 100644 --- a/packages/web/src/app/bookmarks/$bookmarkId.tsx +++ b/packages/web/src/app/bookmarks/$bookmarkId.tsx @@ -1,5 +1,5 @@ import type { Bookmark } from "@markone/core/bookmark" -import { createFileRoute, useCanGoBack, useNavigate, useRouter } from "@tanstack/react-router" +import { createFileRoute, useNavigate } from "@tanstack/react-router" import clsx from "clsx" import { atom, useAtom } from "jotai" import { useCallback, useEffect, useRef } from "react" @@ -118,20 +118,38 @@ function BookmarkListContainer() { function BookmarkPreview() { const { bookmarkId } = Route.useParams() - const { - data: previewHtml, - status: previewQueryStatus, - error, - } = useAuthenticatedQuery(["bookmarks", `${bookmarkId}.html`], () => - fetchApi(`/bookmarks/${bookmarkId}`, { - headers: { - Accept: "text/html", - }, - }).then((res) => res.text()), + const { data: previewHtml, status: previewQueryStatus } = useAuthenticatedQuery( + ["bookmarks", `${bookmarkId}.html`], + () => + fetchApi(`/bookmarks/${bookmarkId}`, { + headers: { + Accept: "text/html", + }, + }).then((res) => res.text()), ) const { data: bookmark, status: bookmarkQueryStatus } = useBookmark(bookmarkId) const [_titleBarHeight] = useAtom(titleBarHeight) const [_actionBarHeight] = useAtom(actionBarHeight) + const navigate = useNavigate() + + function attachKeyListenerToIFrame(event: React.SyntheticEvent) { + if (event.currentTarget.contentDocument) { + event.currentTarget.contentDocument.addEventListener("keydown", (keyEvent) => { + switch (keyEvent.key) { + case "c": + navigate({ to: "/bookmarks", replace: true }) + break + case "o": + if (bookmark) { + window.open(bookmark.url, "_blank")?.focus() + } + break + default: + break + } + }) + } + } if (previewQueryStatus === "error") { return ( @@ -148,6 +166,7 @@ function BookmarkPreview() { className="w-full h-full" style={{ paddingTop: _titleBarHeight, paddingBottom: _actionBarHeight }} srcDoc={previewHtml} + onLoad={attachKeyListenerToIFrame} /> ) } @@ -218,7 +237,9 @@ function BookmarkPreviewActionBar() { } function openLink() { - linkRef.current?.click() + if (bookmark) { + window.open(bookmark.url, "_blank")?.focus() + } } if (status !== "success") {