diff --git a/src/components/markdown/Renderer.tsx b/src/components/markdown/Renderer.tsx index d96ef898..9fe876b4 100644 --- a/src/components/markdown/Renderer.tsx +++ b/src/components/markdown/Renderer.tsx @@ -24,6 +24,7 @@ import { generateEmoji } from "../common/Emoji"; import { emojiDictionary } from "../../assets/emojis"; import { MarkdownProps } from "./Markdown"; +import {useIntermediate} from "../../context/intermediate/Intermediate"; // TODO: global.d.ts file for defining globals declare global { @@ -97,6 +98,8 @@ const RE_CHANNELS = /<#([A-z0-9]{26})>/g; export default function Renderer({ content, disallowBigEmoji }: MarkdownProps) { const client = useContext(AppContext); + const { openScreen } = useIntermediate(); + if (typeof content === "undefined") return null; if (content.length === 0) return null; @@ -198,6 +201,13 @@ export default function Renderer({ content, disallowBigEmoji }: MarkdownProps) { if (!internal) { element.setAttribute("target", "_blank"); + element.onclick = (ev) => { + ev.preventDefault(); + openScreen({ + id: "external_link_prompt", + link: href + }) + } } }, ); diff --git a/src/context/intermediate/Intermediate.tsx b/src/context/intermediate/Intermediate.tsx index a3d30489..59a3cc1c 100644 --- a/src/context/intermediate/Intermediate.tsx +++ b/src/context/intermediate/Intermediate.tsx @@ -24,6 +24,7 @@ export type Screen = | { id: "signed_out" } | { id: "error"; error: string } | { id: "clipboard"; text: string } + | { id: "external_link_prompt"; link: string } | { id: "_prompt"; question: Children; diff --git a/src/context/intermediate/Modals.tsx b/src/context/intermediate/Modals.tsx index fdd3dc6e..8815a16d 100644 --- a/src/context/intermediate/Modals.tsx +++ b/src/context/intermediate/Modals.tsx @@ -9,6 +9,7 @@ import { InputModal } from "./modals/Input"; import { OnboardingModal } from "./modals/Onboarding"; import { PromptModal } from "./modals/Prompt"; import { SignedOutModal } from "./modals/SignedOut"; +import {ExternalLinkModal} from "./modals/ExternalLinkPrompt"; export interface Props { screen: Screen; @@ -34,6 +35,8 @@ export default function Modals({ screen, openScreen }: Props) { return ; case "onboarding": return ; + case "external_link_prompt": + return ; } return null; diff --git a/src/context/intermediate/modals/ExternalLinkPrompt.tsx b/src/context/intermediate/modals/ExternalLinkPrompt.tsx new file mode 100644 index 00000000..04fecfcf --- /dev/null +++ b/src/context/intermediate/modals/ExternalLinkPrompt.tsx @@ -0,0 +1,34 @@ +import { Text } from "preact-i18n"; + +import Modal from "../../../components/ui/Modal"; + +interface Props { + onClose: () => void; + link: string; +} + +export function ExternalLinkModal({ onClose, link }: Props) { + return ( + } + actions={[ + { + onClick: ()=>{window.open(link, "_blank");}, + confirmation: true, + contrast: true, + accent: true, + children: "Continue", + }, + { + onClick: onClose, + confirmation: false, + children: "Cancel", + }, + ]}> +
+ {link} +
+ ); +}