enhance(frontend): 리액션 뷰어에서 우클릭하면 리액션을 복사할 수 있음

CHANGELOG_CHERRYPICK.md

@@ -73,6 +73,7 @@ Misskey의 전체 변경 사항을 확인하려면, [CHANGELOG.md#2023xx](CHANGE
 - Enhance: HTML 태그 및 Markdown 태그가 자동 완성을 지원함
   - `<`를 입력하면 ``<b>, ~~, <i>, <small>, <center>, <plain>, `, ```, \(\), \(\\ \)`` 태그를 자동으로 입력할 수 있음
 - Enhance: 서버에서 푸시 알림을 사용할 수 있으면 푸시 알림을 활성화 하도록 대화 상자를 표시
+- Enhance: 리액션 뷰어에서 우클릭하면 리액션을 복사할 수 있음
 - Fix: '모달 배경색 제거' 옵션이 이모지 피커에 반영되지 않음
 - Fix: 열람 주의로 설정된 노트의 리액션이 '더 보기'를 눌러야 표시됨
 - Fix: 채널 이름이 긴 경우 게시 양식 표시가 깨지는 문제 (misskey-dev/misskey#12524)

packages/frontend/src/components/MkNote.vue

@@ -126,7 +126,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 		</div>
 		<div v-if="appearNote.renote" :class="$style.quote"><MkNoteSimple :note="appearNote.renote" :class="$style.quoteNote"/></div>
 		<div>
-			<MkReactionsViewer :note="appearNote" :maxNumber="16" @click.stop @mockUpdateMyReaction="emitUpdReaction">
+			<MkReactionsViewer :note="appearNote" :maxNumber="16" @click.stop @contextmenu.prevent.stop @mockUpdateMyReaction="emitUpdReaction">
 				<template #more>
 					<div :class="$style.reactionOmitted">{{ i18n.ts.more }}</div>
 				</template>

packages/frontend/src/components/MkReactionsViewer.reaction.vue

@@ -11,6 +11,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 	class="_button"
 	:class="[$style.root, { [$style.reacted]: note.myReaction == reaction, [$style.canToggle]: (canToggle || alternative), [$style.small]: defaultStore.state.reactionsDisplaySize === 'small', [$style.large]: defaultStore.state.reactionsDisplaySize === 'large' }]"
 	@click.stop="(ev) => { canToggle || alternative ? toggleReaction(ev) : stealReaction(ev) }"
+	@contextmenu.prevent.stop="(ev) => onContextMenu(ev)"
 >
 	<MkReactionIcon :class="defaultStore.state.limitWidthOfReaction ? $style.limitWidth : ''" :reaction="reaction" :emojiUrl="note.reactionEmojis[reaction.substring(1, reaction.length - 1)]" @click.stop="(ev) => { canToggle || alternative ? toggleReaction(ev) : stealReaction(ev) }"/>
 	<span :class="$style.count">{{ count }}</span>
@@ -31,6 +32,7 @@ import { defaultStore } from '@/store.js';
 import { i18n } from '@/i18n.js';
 import { customEmojis } from '@/custom-emojis.js';
 import * as sound from '@/scripts/sound.js';
+import copyToClipboard from '@/scripts/copy-to-clipboard.js';
 
 const props = defineProps<{
 	reaction: string;
@@ -141,6 +143,22 @@ function stealReaction(ev: MouseEvent) {
 	}
 }
 
+function onContextMenu(ev: MouseEvent) {
+	if (customEmojis.value.find(it => it.name === reactionName.value)?.name) {
+		os.popupMenu([{
+			type: 'label',
+			text: `:${reactionName.value}:`,
+		}, {
+			text: i18n.ts.copy,
+			icon: 'ti ti-copy',
+			action: () => {
+				copyToClipboard(`:${reactionName.value}:`);
+				os.toast(i18n.ts.copied, 'copied');
+			},
+		}], ev.currentTarget ?? ev.target);
+	}
+}
+
 function anime() {
 	if (document.hidden) return;
 	if (!defaultStore.state.animation) return;

packages/frontend/src/components/MkSubNoteContent.vue

@@ -60,7 +60,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 		<span :class="$style.showLessLabel">{{ i18n.ts.showLess }}</span>
 	</button>
 	<div v-if="showSubNoteFooterButton">
-		<MkReactionsViewer v-show="note.cw == null || showContent" :note="note" :maxNumber="16" @click.stop @mockUpdateMyReaction="emitUpdReaction">
+		<MkReactionsViewer v-show="note.cw == null || showContent" :note="note" :maxNumber="16" @click.stop @contextmenu.prevent.stop @mockUpdateMyReaction="emitUpdReaction">
 			<template #more>
 				<div :class="$style.reactionOmitted">{{ i18n.ts.more }}</div>
 			</template>