graphite/Sharkey
1
0
Fork 0
mirror of https://git.joinsharkey.org/Sharkey/Sharkey.git synced 2024-11-27 01:43:08 +02:00
Code Issues Projects Releases Packages Wiki Activity

refactor: MkCodeをブロックとインラインで別コンポーネント化する (#13026)

Browse source 
* Create MkCodeInline.vue

* Update MkCode.vue

* Update MkMisskeyFlavoredMarkdown.ts

* Update flash.vue

* Update MkCodeInline.vue
This commit is contained in:
FineArchs 2024-01-18 12:16:12 +09:00 committed by GitHub
parent 1e237a7df5
commit fc7cd636a3
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 30 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
packages/frontend/src/components/MkCode.vue
View file

@ -4,8 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only
--> -->
<template> <template>
<code v-if="inline" :class="$style.codeInlineRoot">{{ code }}</code> <div :class="$style.codeBlockRoot">
<div v-else :class="$style.codeBlockRoot">
<button :class="$style.codeBlockCopyButton" class="_button" @click="copy"> <button :class="$style.codeBlockCopyButton" class="_button" @click="copy">
<i class="ti ti-copy"></i> <i class="ti ti-copy"></i>
</button> </button>
@ -36,7 +35,6 @@ import copyToClipboard from '@/scripts/copy-to-clipboard.js';
const props = defineProps<{ const props = defineProps<{
code: string; code: string;
lang?: string; lang?: string;
inline?: boolean;
}>(); }>();
const show = ref(!defaultStore.state.dataSaver.code); 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 { .codeBlockFallbackRoot {
display: block; display: block;
overflow-wrap: anywhere; overflow-wrap: anywhere;

26
packages/frontend/src/components/MkCodeInline.vue Normal file
View file

@ -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>

4
packages/frontend/src/components/global/MkMisskeyFlavoredMarkdown.ts
View file

@ -13,6 +13,7 @@ import MkMention from '@/components/MkMention.vue';
import MkEmoji from '@/components/global/MkEmoji.vue'; import MkEmoji from '@/components/global/MkEmoji.vue';
import MkCustomEmoji from '@/components/global/MkCustomEmoji.vue'; import MkCustomEmoji from '@/components/global/MkCustomEmoji.vue';
import MkCode from '@/components/MkCode.vue'; import MkCode from '@/components/MkCode.vue';
import MkCodeInline from '@/components/MkCodeInline.vue';
import MkGoogle from '@/components/MkGoogle.vue'; import MkGoogle from '@/components/MkGoogle.vue';
import MkSparkle from '@/components/MkSparkle.vue'; import MkSparkle from '@/components/MkSparkle.vue';
import MkA from '@/components/global/MkA.vue'; import MkA from '@/components/global/MkA.vue';
@ -373,10 +374,9 @@ export default function(props: MfmProps, context: SetupContext<MfmEvents>) {
} }
case 'inlineCode': { case 'inlineCode': {
return [h(MkCode, { return [h(MkCodeInline, {
key: Math.random(), key: Math.random(),
code: token.props.code, code: token.props.code,
inline: true,
})]; })];
} }

2
packages/frontend/src/pages/flash/flash.vue
View file

@ -37,7 +37,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<template #icon><i class="ti ti-code"></i></template> <template #icon><i class="ti ti-code"></i></template>
<template #label>{{ i18n.ts._play.viewSource }}</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> </MkFolder>
<div :class="$style.footer"> <div :class="$style.footer">
<Mfm :text="`By @${flash.user.username}`"/> <Mfm :text="`By @${flash.user.username}`"/>