From d2564836ed47f067c1cc67222263fa7503de28c9 Mon Sep 17 00:00:00 2001
From: Marie <github@yuugi.dev>
Date: Mon, 16 Sep 2024 01:12:20 +0200
Subject: [PATCH] upd: prompt for confirmation on external links

---
 packages/frontend/src/components/MkDialog.vue |  3 ++-
 packages/frontend/src/components/MkLink.vue   | 26 +++++++++++++++++--
 packages/frontend/src/os.ts                   |  1 +
 packages/frontend/src/plugin.ts               |  1 +
 4 files changed, 28 insertions(+), 3 deletions(-)

diff --git a/packages/frontend/src/components/MkDialog.vue b/packages/frontend/src/components/MkDialog.vue
index 825c1d0513..7dc381b662 100644
--- a/packages/frontend/src/components/MkDialog.vue
+++ b/packages/frontend/src/components/MkDialog.vue
@@ -26,7 +26,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 			<MkLoading v-else-if="type === 'waiting'" :class="$style.iconInner" :em="true"/>
 		</div>
 		<header v-if="title" :class="$style.title"><Mfm :text="title"/></header>
-		<div v-if="text" :class="$style.text"><Mfm :text="text" :isBlock="true" /></div>
+		<div v-if="text" :class="$style.text"><Mfm :text="text" :isBlock="true" :plain="plain" /></div>
 		<MkInput v-if="input" v-model="inputValue" autofocus :type="input.type || 'text'" :placeholder="input.placeholder || undefined" :autocomplete="input.autocomplete" @keydown="onInputKeydown">
 			<template v-if="input.type === 'password'" #prefix><i class="ti ti-lock"></i></template>
 			<template #caption>
@@ -105,6 +105,7 @@ const props = withDefaults(defineProps<{
 	cancelableByBgClick?: boolean;
 	okText?: string;
 	cancelText?: string;
+	plain?: boolean;
 }>(), {
 	type: 'info',
 	showOkButton: true,
diff --git a/packages/frontend/src/components/MkLink.vue b/packages/frontend/src/components/MkLink.vue
index 07cf9e0c37..3587af3e82 100644
--- a/packages/frontend/src/components/MkLink.vue
+++ b/packages/frontend/src/components/MkLink.vue
@@ -5,7 +5,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <template>
 <component
-	:is="self ? 'MkA' : 'a'" ref="el" style="word-break: break-all;" class="_link" :[attr]="self ? url.substring(local.length) : url" :rel="rel ?? 'nofollow noopener'" :target="target"
+	v-if="self"
+	:is="'MkA'" ref="el" style="word-break: break-all;" class="_link" :to="url.substring(local.length)" :rel="rel ?? 'nofollow noopener'" :target="target"
 	:behavior="props.navigationBehavior"
 	:title="url"
 	@click.stop
@@ -13,6 +14,17 @@ SPDX-License-Identifier: AGPL-3.0-only
 	<slot></slot>
 	<i v-if="target === '_blank'" class="ti ti-external-link" :class="$style.icon"></i>
 </component>
+<component
+	v-else
+	:is="'a'" ref="el" style="word-break: break-all;" class="_link" :rel="rel ?? 'nofollow noopener popup=false'" :target="target"
+	:behavior="props.navigationBehavior"
+	:title="url"
+	@click="promptConfirm()"
+	@click.stop
+>
+	<slot></slot>
+	<i v-if="target === '_blank'" class="ti ti-external-link" :class="$style.icon"></i>
+</component>
 </template>
 
 <script lang="ts" setup>
@@ -22,6 +34,7 @@ import { useTooltip } from '@/scripts/use-tooltip.js';
 import * as os from '@/os.js';
 import { isEnabledUrlPreview } from '@/instance.js';
 import { MkABehavior } from '@/components/global/MkA.vue';
+import { i18n } from '@/i18n.js';
 
 const props = withDefaults(defineProps<{
 	url: string;
@@ -31,7 +44,6 @@ const props = withDefaults(defineProps<{
 });
 
 const self = props.url.startsWith(local);
-const attr = self ? 'to' : 'href';
 const target = self ? null : '_blank';
 
 const el = ref<HTMLElement | { $el: HTMLElement }>();
@@ -47,6 +59,16 @@ if (isEnabledUrlPreview.value) {
 		});
 	});
 }
+
+async function promptConfirm() {
+	const { canceled } = await os.confirm({
+		type: 'question',
+		text: i18n.tsx.confirmRemoteUrl({x: props.url}),
+		plain: true,
+	});
+	if (canceled) return;
+	window.open(props.url, '_blank', 'nofollow noopener popup=false');
+}
 </script>
 
 <style lang="scss" module>
diff --git a/packages/frontend/src/os.ts b/packages/frontend/src/os.ts
index 95a0f06790..bd96a0655e 100644
--- a/packages/frontend/src/os.ts
+++ b/packages/frontend/src/os.ts
@@ -245,6 +245,7 @@ export function confirm(props: {
 	text?: string;
 	okText?: string;
 	cancelText?: string;
+	plain?: boolean;
 }): Promise<{ canceled: boolean }> {
 	return new Promise(resolve => {
 		const { dispose } = popup(MkDialog, {
diff --git a/packages/frontend/src/plugin.ts b/packages/frontend/src/plugin.ts
index 0818eb43f1..0f77cd9cb0 100644
--- a/packages/frontend/src/plugin.ts
+++ b/packages/frontend/src/plugin.ts
@@ -97,6 +97,7 @@ function createPluginEnv(opts: { plugin: Plugin; storageKey: string }): Record<s
 				const { canceled } = await os.confirm({
 					type: 'question',
 					text: i18n.tsx.confirmRemoteUrl({x: url.value}),
+					plain: true,
 				});
 				if (canceled) return;
 				window.open(url.value, '_blank', 'noopener');