enhance(frontend): Shareページでの投稿完了時にpostMessageを発火するように (#12505)

* enhance(frontend): Shareページでの投稿完了時にpostMessageを発火

* Update Changelog

* fix

* 名前の混同をさける

* 名前をわかりやすくする

* watchを使わずパフォーマンス改善

CHANGELOG.md

@@ -25,6 +25,7 @@
 - Enhance: ユーザーのRawデータを表示するページが復活
 - Enhance: リアクション選択時に音を鳴らせるように
 - Enhance: サウンドにドライブのファイルを使用できるように
+- Enhance: Shareページで投稿を完了すると、親ウィンドウ（親フレーム）にpostMessageするように
 - fix: 「設定のバックアップ」で一部の項目がバックアップに含まれていなかった問題を修正
 - Fix: ウィジェットのジョブキューにて音声の発音方法変更に追従できていなかったのを修正 #12367
 - Fix: コードエディタが正しく表示されない問題を修正

packages/frontend/src/pages/share.vue

@@ -19,7 +19,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 			:renote="renote"
 			:initialVisibleUsers="visibleUsers"
 			class="_panel"
-			@posted="state = 'posted'"
+			@posted="onPosted"
 		/>
 		<div v-else-if="state === 'posted'" class="_buttonsCenter">
 			<MkButton primary @click="close">{{ i18n.ts.close }}</MkButton>
@@ -32,20 +32,20 @@ SPDX-License-Identifier: AGPL-3.0-only
 <script lang="ts" setup>
 // SPECIFICATION: https://misskey-hub.net/docs/features/share-form.html
 
-import { } from 'vue';
+import { ref } from 'vue';
 import * as Misskey from 'misskey-js';
 import MkButton from '@/components/MkButton.vue';
 import MkPostForm from '@/components/MkPostForm.vue';
 import * as os from '@/os.js';
-import { mainRouter } from '@/router.js';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
+import { postMessageToParentWindow } from '@/scripts/post-message.js';
 import { i18n } from '@/i18n.js';
 
 const urlParams = new URLSearchParams(window.location.search);
 const localOnlyQuery = urlParams.get('localOnly');
 const visibilityQuery = urlParams.get('visibility') as typeof Misskey.noteVisibilities[number];
 
-let state = $ref('fetching' as 'fetching' | 'writing' | 'posted');
+const state = ref<'fetching' | 'writing' | 'posted'>('fetching');
 let title = $ref(urlParams.get('title'));
 const text = urlParams.get('text');
 const url = urlParams.get('url');
@@ -144,7 +144,7 @@ async function init() {
 		});
 	}
 
-	state = 'writing';
+	state.value = 'writing';
 }
 
 init();
@@ -162,6 +162,11 @@ function goToMisskey(): void {
 	location.href = '/';
 }
 
+function onPosted(): void {
+	state.value = 'posted';
+	postMessageToParentWindow('misskey:shareForm:shareCompleted');
+}
+
 const headerActions = $computed(() => []);
 
 const headerTabs = $computed(() => []);

packages/frontend/src/scripts/post-message.ts

@@ -0,0 +1,25 @@
+/*
+ * SPDX-FileCopyrightText: syuilo and other misskey contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+export const postMessageEventTypes = [
+	'misskey:shareForm:shareCompleted',
+] as const;
+
+export type PostMessageEventType = typeof postMessageEventTypes[number];
+
+export type MiPostMessageEvent = {
+	type: PostMessageEventType;
+	payload?: any;
+};
+
+/**
+ * 親フレームにイベントを送信
+ */
+export function postMessageToParentWindow(type: PostMessageEventType, payload?: any): void {
+	window.postMessage({
+		type,
+		payload,
+	}, '*');
+}