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..da73327c
--- /dev/null
+++ b/src/context/intermediate/modals/ExternalLinkPrompt.tsx
@@ -0,0 +1,32 @@
+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,
+ children: "Continue",
+ },
+ {
+ onClick: onClose,
+ confirmation: false,
+ children: "Cancel",
+ },
+ ]}>
+
+ {link}
+
+ );
+}