diff --git a/CHANGELOG.md b/CHANGELOG.md index 5db3783e10..e452eb3845 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -20,6 +20,7 @@ ### Client - Fix: 一部のモデログ(logYellowでの表示対象)について、表示の色が変わらない問題を修正 +- Feat: AiScript専用のMFM構文`$[clickable.ev=EVENTNAME ...]`を追加。`Mk:C:mfm`のオプション`onClickEv`に関数を渡すと、クリック時に`EVENTNAME`を引数にして呼び出す ### Server - Enhance: センシティブワードの設定がハッシュタグトレンドにも適用されるようになりました diff --git a/packages/frontend/src/components/MkAsUi.vue b/packages/frontend/src/components/MkAsUi.vue index 4239cc6091..0ff5bd7036 100644 --- a/packages/frontend/src/components/MkAsUi.vue +++ b/packages/frontend/src/components/MkAsUi.vue @@ -11,7 +11,7 @@ SPDX-License-Identifier: AGPL-3.0-only </template> </div> <span v-else-if="c.type === 'text'" :class="{ [$style.fontSerif]: c.font === 'serif', [$style.fontMonospace]: c.font === 'monospace' }" :style="{ fontSize: c.size ? `${c.size * 100}%` : null, fontWeight: c.bold ? 'bold' : null, color: c.color ?? null }">{{ c.text }}</span> - <Mfm v-else-if="c.type === 'mfm'" :class="{ [$style.fontSerif]: c.font === 'serif', [$style.fontMonospace]: c.font === 'monospace' }" :style="{ fontSize: c.size ? `${c.size * 100}%` : null, fontWeight: c.bold ? 'bold' : null, color: c.color ?? null }" :text="c.text"/> + <Mfm v-else-if="c.type === 'mfm'" :class="{ [$style.fontSerif]: c.font === 'serif', [$style.fontMonospace]: c.font === 'monospace' }" :style="{ fontSize: c.size ? `${c.size * 100}%` : null, fontWeight: c.bold ? 'bold' : null, color: c.color ?? null }" :text="c.text" @clickEv="c.onClickEv"/> <MkButton v-else-if="c.type === 'button'" :primary="c.primary" :rounded="c.rounded" :disabled="c.disabled" :small="size === 'small'" inline @click="c.onClick">{{ c.text }}</MkButton> <div v-else-if="c.type === 'buttons'" class="_buttons" :style="{ justifyContent: align }"> <MkButton v-for="button in c.buttons" :primary="button.primary" :rounded="button.rounded" :disabled="button.disabled" inline :small="size === 'small'" @click="button.onClick">{{ button.text }}</MkButton> diff --git a/packages/frontend/src/components/global/MkMisskeyFlavoredMarkdown.ts b/packages/frontend/src/components/global/MkMisskeyFlavoredMarkdown.ts index a46c7f0cec..3e72b64799 100644 --- a/packages/frontend/src/components/global/MkMisskeyFlavoredMarkdown.ts +++ b/packages/frontend/src/components/global/MkMisskeyFlavoredMarkdown.ts @@ -3,7 +3,7 @@ * SPDX-License-Identifier: AGPL-3.0-only */ -import { VNode, h } from 'vue'; +import { VNode, h, SetupContext } from 'vue'; import * as mfm from 'mfm-js'; import * as Misskey from 'misskey-js'; import MkUrl from '@/components/global/MkUrl.vue'; @@ -43,8 +43,12 @@ type MfmProps = { enableEmojiMenuReaction?: boolean; }; +type MfmEvents = { + clickEv(id: string): void; +}; + // eslint-disable-next-line import/no-default-export -export default function(props: MfmProps) { +export default function(props: MfmProps, context: SetupContext<MfmEvents>) { const isNote = props.isNote ?? true; const shouldNyaize = props.nyaize ? props.nyaize === 'respect' ? props.author?.isCat : false : false; @@ -281,6 +285,13 @@ export default function(props: MfmProps) { }), ]); } + case 'clickable': { + return h('span', { onClick(ev: MouseEvent): void { + ev.stopPropagation(); + ev.preventDefault(); + context.emit('clickEv', token.props.args.ev ?? ''); + } }, genEl(token.children, scale)); + } } if (style === undefined) { return h('span', {}, ['$[', token.props.name, ' ', ...genEl(token.children, scale), ']']); diff --git a/packages/frontend/src/scripts/aiscript/ui.ts b/packages/frontend/src/scripts/aiscript/ui.ts index 75b9248432..08ba1e6d9b 100644 --- a/packages/frontend/src/scripts/aiscript/ui.ts +++ b/packages/frontend/src/scripts/aiscript/ui.ts @@ -47,6 +47,7 @@ export type AsUiMfm = AsUiComponentBase & { bold?: boolean; color?: string; font?: 'serif' | 'sans-serif' | 'monospace'; + onClickEv?: (evId: string) => void }; export type AsUiButton = AsUiComponentBase & { @@ -230,6 +231,8 @@ function getMfmOptions(def: values.Value | undefined): Omit<AsUiMfm, 'id' | 'typ if (color) utils.assertString(color); const font = def.value.get('font'); if (font) utils.assertString(font); + const onClickEv = def.value.get('onClickEv'); + if (onClickEv) utils.assertFunction(onClickEv); return { text: text?.value, @@ -237,6 +240,9 @@ function getMfmOptions(def: values.Value | undefined): Omit<AsUiMfm, 'id' | 'typ bold: bold?.value, color: color?.value, font: font?.value, + onClickEv: (evId: string) => { + if (onClickEv) call(onClickEv, values.STR(evId)); + }, }; }