リモートクリップURL書き換えの改善

CHANGELOG_yojo.md

@@ -23,7 +23,8 @@
 -
 
 ### Client
--
+- Fix: MFMでURLの表示文字列を変更した時にリモートクリップURLが書き換えられない
+- Enhance: リモートクリップのURLプレビューをリモートURLで生成
 
 ### Server
 -

packages/frontend/src/components/MkLink.vue

@@ -5,9 +5,9 @@ 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"
+	:is="self ? 'MkA' : 'a'" ref="el" style="word-break: break-all;" class="_link" :[attr]="self ? url_string.substring(local.length) : url_string" :rel="rel ?? 'nofollow noopener'" :target="target"
 	:behavior="props.navigationBehavior"
-	:title="url"
+	:title="url_string"
 	@click.stop
 >
 	<slot></slot>
@@ -27,10 +27,17 @@ const props = withDefaults(defineProps<{
 	url: string;
 	rel?: null | string;
 	navigationBehavior?: MkABehavior;
+	host?: null | string;
 }>(), {
 });
 
-const self = props.url.startsWith(local);
+let self = props.url.startsWith(local);
+let requestUrl = new URL(props.url);
+if (props.host === requestUrl.host && requestUrl.pathname.startsWith('/clips/')) {
+	requestUrl = new URL(local + requestUrl.pathname + '@' + props.host);
+	self = true;
+}
+const url_string = requestUrl.toString();
 const attr = self ? 'to' : 'href';
 const target = self ? null : '_blank';
 

packages/frontend/src/components/MkUrlPreview.vue

@@ -116,11 +116,15 @@ const isMobile = ref(deviceKind === 'smartphone' || window.innerWidth <= MOBILE_
 
 let self = props.url.startsWith(local);
 let requestUrl = new URL(props.url);
+let url_string: string;
 if (props.host === requestUrl.host && requestUrl.pathname.startsWith('/clips/')) {
 	requestUrl = new URL(local + requestUrl.pathname + '@' + props.host);
 	self = true;
+	url_string = requestUrl.toString();
+	requestUrl = new URL(props.url);
+} else {
+	url_string = requestUrl.toString();
 }
-const url_string = requestUrl.toString();
 const attr = self ? 'to' : 'href';
 const target = self ? null : '_blank';
 const fetching = ref(true);

packages/frontend/src/components/global/MkMisskeyFlavoredMarkdown.ts

@@ -364,6 +364,7 @@ export default function (props: MfmProps, { emit }: { emit: SetupContext<MfmEven
 					key: Math.random(),
 					url: token.props.url,
 					rel: 'nofollow noopener',
+					host: props.author?.host,
 				}, genEl(token.children, scale, true))];
 			}
 
@@ -411,7 +412,6 @@ export default function (props: MfmProps, { emit }: { emit: SetupContext<MfmEven
 			}
 
 			case 'emojiCode': {
-				// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
 				if (props.author?.host == null) {
 					return [h(MkCustomEmoji, {
 						key: Math.random(),

packages/frontend/src/components/global/MkUrl.vue

@@ -60,7 +60,7 @@ if (props.showUrlPreview && isEnabledUrlPreview.value) {
 	useTooltip(el, (showing) => {
 		const { dispose } = os.popup(defineAsyncComponent(() => import('@/components/MkUrlPreviewPopup.vue')), {
 			showing,
-			url: url_string,
+			url: props.url,
 			source: el.value instanceof HTMLElement ? el.value : el.value?.$el,
 		}, {
 			closed: () => dispose(),