diff --git a/CHANGELOG.md b/CHANGELOG.md index 897a909a04c7c00da1cc2f2470dcd5459c55a63c..9b433196147ba6c0e61342b141aa7a2ea1eab84c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -24,6 +24,7 @@ - Feat: 絵文å—ã®è©³ç´°ãƒ€ã‚¤ã‚¢ãƒã‚°ã‚’è¿½åŠ - Feat: æž ç·šã‚’ã¤ã‘ã‚‹MFM`$[border.width=1,style=solid,color=fff,radius=0 ...]`ã‚’è¿½åŠ - デフォルトã§æž ç·šã‹ã‚‰ã¯ã¿å‡ºã‚‹éƒ¨åˆ†ãŒéš ã•ã‚Œã‚‹ã‚ˆã†ã«ã—ã¾ã—ãŸã€‚åˆæœŸã¨åŒã˜æŒ™å‹•ã«ã™ã‚‹ã«ã¯`$[border.noclip`ãŒå¿…è¦ã§ã™ +- Enhance: MFMç‰ã®ã‚³ãƒ¼ãƒ‰ãƒ–ãƒãƒƒã‚¯ã«å…¨æ–‡ã‚³ãƒ”ー用ã®ãƒœã‚¿ãƒ³ã‚’è¿½åŠ - Enhance: ãƒãƒƒã‚·ãƒ¥ã‚¿ã‚°å…¥åŠ›æ™‚ã«ã€æœ¬æ–‡ã®æœ«å°¾ã®è¡Œã«ä½•ã‚‚書ã‹ã‚Œã¦ã„ãªã„å ´åˆã¯æ–°ãŸã«ã‚¹ãƒšãƒ¼ã‚¹ã‚’è¿½åŠ ã—ãªã„よã†ã« - Enhance: ãƒãƒ£ãƒ³ãƒãƒ«ãƒŽãƒ¼ãƒˆã®ãƒ”ン留ã‚をノートã®ãƒ¡ãƒ‹ãƒ¥ãƒ¼ã‹ã‚‰ã§ãるよã†ã« - Enhance: 管ç†è€…ã®å ´åˆã¯API tokenã®ç™ºè¡Œç”»é¢ã§ç®¡ç†æ©Ÿèƒ½ã«é–¢ã™ã‚‹æ¨©é™ã‚’付与ã§ãるよã†ã« diff --git a/packages/frontend/src/components/MkCode.vue b/packages/frontend/src/components/MkCode.vue index 2c016e4d7cf1dd4d363ac58441dc97cc1d26ed0c..b81afe29201234f0d8f669195f7babe7458eac23 100644 --- a/packages/frontend/src/components/MkCode.vue +++ b/packages/frontend/src/components/MkCode.vue @@ -4,29 +4,36 @@ SPDX-License-Identifier: AGPL-3.0-only --> <template> -<Suspense> - <template #fallback> - <MkLoading v-if="!inline ?? true"/> - </template> - <code v-if="inline" :class="$style.codeInlineRoot">{{ code }}</code> - <XCode v-else-if="show && lang" :code="code" :lang="lang"/> - <pre v-else-if="show" :class="$style.codeBlockFallbackRoot"><code :class="$style.codeBlockFallbackCode">{{ code }}</code></pre> - <button v-else :class="$style.codePlaceholderRoot" @click="show = true"> - <div :class="$style.codePlaceholderContainer"> - <div><i class="ti ti-code"></i> {{ i18n.ts.code }}</div> - <div>{{ i18n.ts.clickToShow }}</div> - </div> +<code v-if="inline" :class="$style.codeInlineRoot">{{ code }}</code> +<div v-else :class="$style.codeBlockRoot"> + <button :class="$style.codeBlockCopyButton" class="_button" @click="copy"> + <i class="ti ti-copy"></i> </button> -</Suspense> + <Suspense> + <template #fallback> + <MkLoading /> + </template> + <XCode v-if="show && lang" :code="code" :lang="lang"/> + <pre v-else-if="show" :class="$style.codeBlockFallbackRoot"><code :class="$style.codeBlockFallbackCode">{{ code }}</code></pre> + <button v-else :class="$style.codePlaceholderRoot" @click="show = true"> + <div :class="$style.codePlaceholderContainer"> + <div><i class="ti ti-code"></i> {{ i18n.ts.code }}</div> + <div>{{ i18n.ts.clickToShow }}</div> + </div> + </button> + </Suspense> +</div> </template> <script lang="ts" setup> import { defineAsyncComponent, ref } from 'vue'; +import * as os from '@/os.js'; import MkLoading from '@/components/global/MkLoading.vue'; import { defaultStore } from '@/store.js'; import { i18n } from '@/i18n.js'; +import copyToClipboard from '@/scripts/copy-to-clipboard.js'; -defineProps<{ +const props = defineProps<{ code: string; lang?: string; inline?: boolean; @@ -35,9 +42,30 @@ defineProps<{ const show = ref(!defaultStore.state.dataSaver.code); const XCode = defineAsyncComponent(() => import('@/components/MkCode.core.vue')); + +function copy() { + copyToClipboard(props.code); + os.success(); +} </script> <style module lang="scss"> +.codeBlockRoot { + position: relative; +} + +.codeBlockCopyButton { + color: #D4D4D4; + position: absolute; + top: 8px; + right: 8px; + opacity: 0.5; + + &:hover { + opacity: 0.8; + } +} + .codeInlineRoot { display: inline-block; font-family: Consolas, Monaco, Andale Mono, Ubuntu Mono, monospace;