enhance(frontend): Playの説明欄にMFMを使えるように (#12899)

* (enhance) Playの説明欄にMFMを使えるように

* Update Changelog

* use class for mfm component

* Update packages/frontend/src/pages/flash/flash-edit.vue

Co-authored-by: 1Step621 <86859447+1STEP621@users.noreply.github.com>

* Update flash.vue

* Update CHANGELOG.md

---------

Co-authored-by: 1Step621 <86859447+1STEP621@users.noreply.github.com>
This commit is contained in:
かっこかり 2024-01-14 15:31:11 +09:00 committed by GitHub
parent 79a9defa0c
commit 12142a221a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 12 additions and 3 deletions

View file

@ -28,6 +28,7 @@
- Enhance: AiScriptを0.17.0に更新 [CHANGELOG](https://github.com/aiscript-dev/aiscript/blob/bb89d132b633a622d3cb0eff0d0cc7e476c0cfdd/CHANGELOG.md) - Enhance: AiScriptを0.17.0に更新 [CHANGELOG](https://github.com/aiscript-dev/aiscript/blob/bb89d132b633a622d3cb0eff0d0cc7e476c0cfdd/CHANGELOG.md)
- 配列の範囲外・非整数のインデックスへの代入が完全禁止になるので注意 - 配列の範囲外・非整数のインデックスへの代入が完全禁止になるので注意
- Enhance: 絵文字ピッカー・オートコンプリートで、完全一致した絵文字を優先的に表示するように - Enhance: 絵文字ピッカー・オートコンプリートで、完全一致した絵文字を優先的に表示するように
- Enhance: Playの説明欄にMFMを使えるように
- Fix: ネイティブモードの絵文字がモノクロにならないように - Fix: ネイティブモードの絵文字がモノクロにならないように
- Fix: v2023.12.0で追加された「モデレーターがユーザーのアイコンもしくはバナー画像を未設定状態にできる機能」が管理画面上で正しく表示されていない問題を修正 - Fix: v2023.12.0で追加された「モデレーターがユーザーのアイコンもしくはバナー画像を未設定状態にできる機能」が管理画面上で正しく表示されていない問題を修正
- Fix: AiScriptの`readline`関数が不正な値を返すことがある問題のv2023.12.0時点での修正がPlay以外に適用されていないのを修正 - Fix: AiScriptの`readline`関数が不正な値を返すことがある問題のv2023.12.0時点での修正がPlay以外に適用されていないのを修正

View file

@ -9,7 +9,9 @@ SPDX-License-Identifier: AGPL-3.0-only
<header> <header>
<h1 :title="flash.title">{{ flash.title }}</h1> <h1 :title="flash.title">{{ flash.title }}</h1>
</header> </header>
<p v-if="flash.summary" :title="flash.summary">{{ flash.summary.length > 85 ? flash.summary.slice(0, 85) + '…' : flash.summary }}</p> <p v-if="flash.summary" :title="flash.summary">
<Mfm class="summaryMfm" :text="flash.summary" :plain="true" :nowrap="true"/>
</p>
<footer> <footer>
<img class="icon" :src="flash.user.avatarUrl"/> <img class="icon" :src="flash.user.avatarUrl"/>
<p>{{ userName(flash.user) }}</p> <p>{{ userName(flash.user) }}</p>
@ -54,6 +56,12 @@ const props = defineProps<{
margin: 0; margin: 0;
color: var(--urlPreviewText); color: var(--urlPreviewText);
font-size: 0.8em; font-size: 0.8em;
overflow: clip;
> .summaryMfm {
display: block;
width: 100%;
}
} }
> footer { > footer {

View file

@ -11,7 +11,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkInput v-model="title"> <MkInput v-model="title">
<template #label>{{ i18n.ts._play.title }}</template> <template #label>{{ i18n.ts._play.title }}</template>
</MkInput> </MkInput>
<MkTextarea v-model="summary"> <MkTextarea v-model="summary" :mfmAutocomplete="true" :mfmPreview="true">
<template #label>{{ i18n.ts._play.summary }}</template> <template #label>{{ i18n.ts._play.summary }}</template>
</MkTextarea> </MkTextarea>
<MkButton primary @click="selectPreset">{{ i18n.ts.selectFromPresets }}<i class="ti ti-chevron-down"></i></MkButton> <MkButton primary @click="selectPreset">{{ i18n.ts.selectFromPresets }}<i class="ti ti-chevron-down"></i></MkButton>

View file

@ -25,7 +25,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<div v-else :class="$style.ready"> <div v-else :class="$style.ready">
<div class="_panel main"> <div class="_panel main">
<div class="title">{{ flash.title }}</div> <div class="title">{{ flash.title }}</div>
<div class="summary">{{ flash.summary }}</div> <div class="summary"><Mfm :text="flash.summary"/></div>
<MkButton class="start" gradate rounded large @click="start">Play</MkButton> <MkButton class="start" gradate rounded large @click="start">Play</MkButton>
<div class="info"> <div class="info">
<span v-tooltip="i18n.ts.numberOfLikes"><i class="ti ti-heart"></i> {{ flash.likedCount }}</span> <span v-tooltip="i18n.ts.numberOfLikes"><i class="ti ti-heart"></i> {{ flash.likedCount }}</span>