コピーしたときのモーダルに説明をつけた

traPtitech · Oct 23, 2024 · 8a0c4e7 · 8a0c4e7
1 parent 4d3788f
commit 8a0c4e7
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 11 deletions.
diff --git a/src/components/Main/MainView/ChannelView/ChannelHeader/composables/useCopyChannelLink.ts b/src/components/Main/MainView/ChannelView/ChannelHeader/composables/useCopyChannelLink.ts
@@ -12,7 +12,7 @@ const useCopyChannelLink = (props: { channelId: ChannelId }) => {
     const channelPath = channelIdToPathString(props.channelId)
     const channelUrl = `${embeddingOrigin}${constructChannelPath(channelPath)}`
 
-    await copyText(`[#${channelPath}](${channelUrl})`)
+    await copyText(`[#${channelPath}](${channelUrl})`, 'チャンネルリンク')
   }
 
   return { copyLink }

diff --git a/src/components/Main/MainView/MessageElement/MessageContextMenu.vue b/src/components/Main/MainView/MessageElement/MessageContextMenu.vue
@@ -63,6 +63,7 @@ import { useMeStore } from '/@/store/domain/me'
 import { useModalStore } from '/@/store/ui/modal'
 import { useMessagesStore } from '/@/store/entities/messages'
 import { useMessageEditingStateStore } from '/@/store/ui/messageEditingStateStore'
+import useCopyText from '/@/composables/toast/useCopyText'
 
 const useMessageChanger = (messageId: Ref<MessageId>) => {
   const { execWithToast } = useExecWithToast()
@@ -86,15 +87,13 @@ const useMessageChanger = (messageId: Ref<MessageId>) => {
 }
 
 const useCopyMd = (messageId: Ref<MessageId>) => {
-  const { execWithToast } = useExecWithToast()
   const { messagesMap } = useMessagesStore()
+  const { copyText } = useCopyText()
 
   const copyMd = async () => {
     const content = messagesMap.value.get(messageId.value)?.content ?? ''
     const replacedContent = replaceBack(content)
-    execWithToast('コピーしました', 'コピーに失敗しました', () =>
-      navigator.clipboard.writeText(replacedContent)
-    )
+    copyText(replacedContent, 'Markdown')
   }
   return { copyMd }
 }

diff --git a/src/composables/contextMenu/useCopyLink.ts b/src/composables/contextMenu/useCopyLink.ts
@@ -9,12 +9,12 @@ const useCopyLink = (messageId: Ref<MessageId>) => {
 
   const copyLink = async () => {
     const link = `${embeddingOrigin}${constructMessagesPath(messageId.value)}`
-    await copyText(link)
+    await copyText(link, 'メッセージリンク')
   }
 
   const copyEmbedded = async () => {
     const link = `<iframe src="${embeddingOrigin}/widget/?type=message&id=${messageId.value}" scrolling="no" frameborder="no" width="600"></iframe>`
-    await copyText(link)
+    await copyText(link, '埋め込み')
   }
 
   return { copyLink, copyEmbedded }

diff --git a/src/composables/toast/useCopyText.ts b/src/composables/toast/useCopyText.ts
@@ -3,10 +3,18 @@ import useExecWithToast from '/@/composables/toast/useExecWithToast'
 const useCopyText = () => {
   const { execWithToast } = useExecWithToast()
 
-  const copyText = async (text: string) => {
-    await execWithToast('コピーしました', 'コピーに失敗しました', () =>
-      navigator.clipboard.writeText(text)
-    )
+  const copyText = async (text: string, description?: string) => {
+    if (description === undefined) {
+      await execWithToast('コピーしました', 'コピーに失敗しました', () =>
+        navigator.clipboard.writeText(text)
+      )
+    } else {
+      await execWithToast(
+        `${description}をコピーしました`,
+        `${description}のコピーに失敗しました`,
+        () => navigator.clipboard.writeText(text)
+      )
+    }
   }
 
   return { copyText }