diff options
| author | FineArchs <133759614+FineArchs@users.noreply.github.com> | 2024-01-18 12:16:12 +0900 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2024-01-18 12:16:12 +0900 |
| commit | fc7cd636a39a1bc703bce83b71dba78455a76316 (patch) | |
| tree | ecfb4fe65b98e9552b1c7f7f160ccef8be5ccf61 /packages/frontend | |
| parent | Merge branch 'develop' of https://github.com/misskey-dev/misskey into develop (diff) | |
| download | sharkey-fc7cd636a39a1bc703bce83b71dba78455a76316.tar.gz sharkey-fc7cd636a39a1bc703bce83b71dba78455a76316.tar.bz2 sharkey-fc7cd636a39a1bc703bce83b71dba78455a76316.zip | |
refactor: MkCodeをブロックとインラインで別コンポーネント化する (#13026)
* Create MkCodeInline.vue
* Update MkCode.vue
* Update MkMisskeyFlavoredMarkdown.ts
* Update flash.vue
* Update MkCodeInline.vue
Diffstat (limited to 'packages/frontend')
4 files changed, 30 insertions, 16 deletions
diff --git a/packages/frontend/src/components/MkCode.vue b/packages/frontend/src/components/MkCode.vue index b81afe2920..251e6ade00 100644 --- a/packages/frontend/src/components/MkCode.vue +++ b/packages/frontend/src/components/MkCode.vue @@ -4,8 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only --> <template> -<code v-if="inline" :class="$style.codeInlineRoot">{{ code }}</code> -<div v-else :class="$style.codeBlockRoot"> +<div :class="$style.codeBlockRoot"> <button :class="$style.codeBlockCopyButton" class="_button" @click="copy"> <i class="ti ti-copy"></i> </button> @@ -36,7 +35,6 @@ import copyToClipboard from '@/scripts/copy-to-clipboard.js'; const props = defineProps<{ code: string; lang?: string; - inline?: boolean; }>(); const show = ref(!defaultStore.state.dataSaver.code); @@ -66,16 +64,6 @@ function copy() { } } -.codeInlineRoot { - display: inline-block; - font-family: Consolas, Monaco, Andale Mono, Ubuntu Mono, monospace; - overflow-wrap: anywhere; - color: #D4D4D4; - background: #1E1E1E; - padding: .1em; - border-radius: .3em; -} - .codeBlockFallbackRoot { display: block; overflow-wrap: anywhere; diff --git a/packages/frontend/src/components/MkCodeInline.vue b/packages/frontend/src/components/MkCodeInline.vue new file mode 100644 index 0000000000..5340c1fd5f --- /dev/null +++ b/packages/frontend/src/components/MkCodeInline.vue @@ -0,0 +1,26 @@ +<!-- +SPDX-FileCopyrightText: syuilo and other misskey contributors +SPDX-License-Identifier: AGPL-3.0-only +--> + +<template> +<code :class="$style.root">{{ code }}</code> +</template> + +<script lang="ts" setup> +const props = defineProps<{ + code: string; +}>(); +</script> + +<style module lang="scss"> +.root { + display: inline-block; + font-family: Consolas, Monaco, Andale Mono, Ubuntu Mono, monospace; + overflow-wrap: anywhere; + color: #D4D4D4; + background: #1E1E1E; + padding: .1em; + border-radius: .3em; +} +</style> diff --git a/packages/frontend/src/components/global/MkMisskeyFlavoredMarkdown.ts b/packages/frontend/src/components/global/MkMisskeyFlavoredMarkdown.ts index b7190f6335..9eab855004 100644 --- a/packages/frontend/src/components/global/MkMisskeyFlavoredMarkdown.ts +++ b/packages/frontend/src/components/global/MkMisskeyFlavoredMarkdown.ts @@ -13,6 +13,7 @@ import MkMention from '@/components/MkMention.vue'; import MkEmoji from '@/components/global/MkEmoji.vue'; import MkCustomEmoji from '@/components/global/MkCustomEmoji.vue'; import MkCode from '@/components/MkCode.vue'; +import MkCodeInline from '@/components/MkCodeInline.vue'; import MkGoogle from '@/components/MkGoogle.vue'; import MkSparkle from '@/components/MkSparkle.vue'; import MkA from '@/components/global/MkA.vue'; @@ -373,10 +374,9 @@ export default function(props: MfmProps, context: SetupContext<MfmEvents>) { } case 'inlineCode': { - return [h(MkCode, { + return [h(MkCodeInline, { key: Math.random(), code: token.props.code, - inline: true, })]; } diff --git a/packages/frontend/src/pages/flash/flash.vue b/packages/frontend/src/pages/flash/flash.vue index 4318694d4f..fabbc1c05d 100644 --- a/packages/frontend/src/pages/flash/flash.vue +++ b/packages/frontend/src/pages/flash/flash.vue @@ -37,7 +37,7 @@ SPDX-License-Identifier: AGPL-3.0-only <template #icon><i class="ti ti-code"></i></template> <template #label>{{ i18n.ts._play.viewSource }}</template> - <MkCode :code="flash.script" lang="is" :inline="false" class="_monospace"/> + <MkCode :code="flash.script" lang="is" class="_monospace"/> </MkFolder> <div :class="$style.footer"> <Mfm :text="`By @${flash.user.username}`"/> |