From bc8a741e14767fad081a08f470d757714d67560e Mon Sep 17 00:00:00 2001 From: FineArchs <133759614+FineArchs@users.noreply.github.com> Date: Sat, 13 Jan 2024 21:17:00 +0900 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=9E=A0=E7=B7=9A=E3=82=92=E3=81=A4?= =?UTF-8?q?=E3=81=91=E3=82=8BMFM=E3=82=92=E8=BF=BD=E5=8A=A0=20(#12981)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Update MkMisskeyFlavoredMarkdown.ts * Update const.ts * Update MkMisskeyFlavoredMarkdown.ts * Update MkMisskeyFlavoredMarkdown.ts * Update CHANGELOG.md --- CHANGELOG.md | 1 + .../global/MkMisskeyFlavoredMarkdown.ts | 28 +++++++++++++++---- packages/frontend/src/const.ts | 2 +- 3 files changed, 25 insertions(+), 6 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 870cdd7ae..6747c9fce 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -21,6 +21,7 @@ ### Client - Feat: 新しいゲームを追加 - Feat: 絵文字の詳細ダイアログを追加 +- Feat: 枠線をつけるMFM`$[border.width=1,style=solid,color=fff,radius=0 ...]`を追加 - Enhance: ハッシュタグ入力時に、本文の末尾の行に何も書かれていない場合は新たにスペースを追加しないように - Enhance: チャンネルノートのピン留めをノートのメニューからできるように - Enhance: 管理者の場合はAPI tokenの発行画面で管理機能に関する権限を付与できるように diff --git a/packages/frontend/src/components/global/MkMisskeyFlavoredMarkdown.ts b/packages/frontend/src/components/global/MkMisskeyFlavoredMarkdown.ts index 650c79dff..f55069200 100644 --- a/packages/frontend/src/components/global/MkMisskeyFlavoredMarkdown.ts +++ b/packages/frontend/src/components/global/MkMisskeyFlavoredMarkdown.ts @@ -61,7 +61,12 @@ export default function(props: MfmProps, context: SetupContext) { if (t == null) return null; return t.match(/^[0-9.]+s$/) ? t : null; }; - + + const validColor = (c: string | null | undefined): string | null => { + if (c == null) return null; + return c.match(/^[0-9a-f]{3,6}$/i) ? c : null; + }; + const useAnim = defaultStore.state.advancedMfm && defaultStore.state.animatedMfm; /** @@ -240,17 +245,30 @@ export default function(props: MfmProps, context: SetupContext) { break; } case 'fg': { - let color = token.props.args.color; - if (!/^[0-9a-f]{3,6}$/i.test(color)) color = 'f00'; + let color = validColor(token.props.args.color); + color = color ?? 'f00'; style = `color: #${color}; overflow-wrap: anywhere;`; break; } case 'bg': { - let color = token.props.args.color; - if (!/^[0-9a-f]{3,6}$/i.test(color)) color = 'f00'; + let color = validColor(token.props.args.color); + color = color ?? 'f00'; style = `background-color: #${color}; overflow-wrap: anywhere;`; break; } + case 'border': { + let color = validColor(token.props.args.color); + color = color ? `#${color}` : 'var(--accent)'; + let b_style = token.props.args.style; + if ( + !['hidden', 'dotted', 'dashed', 'solid', 'double', 'groove', 'ridge', 'inset', 'outset'] + .includes(b_style) + ) b_style = 'solid'; + const width = parseFloat(token.props.args.width ?? '1'); + const radius = parseFloat(token.props.args.radius ?? '0'); + style = `border: ${width}px ${b_style} ${color}; border-radius: ${radius}px`; + break; + } case 'ruby': { if (token.children.length === 1) { const child = token.children[0]; diff --git a/packages/frontend/src/const.ts b/packages/frontend/src/const.ts index 01c224ae2..ea0720445 100644 --- a/packages/frontend/src/const.ts +++ b/packages/frontend/src/const.ts @@ -108,4 +108,4 @@ export const DEFAULT_SERVER_ERROR_IMAGE_URL = 'https://xn--931a.moe/assets/error export const DEFAULT_NOT_FOUND_IMAGE_URL = 'https://xn--931a.moe/assets/not-found.jpg'; export const DEFAULT_INFO_IMAGE_URL = 'https://xn--931a.moe/assets/info.jpg'; -export const MFM_TAGS = ['tada', 'jelly', 'twitch', 'shake', 'spin', 'jump', 'bounce', 'flip', 'x2', 'x3', 'x4', 'scale', 'position', 'fg', 'bg', 'font', 'blur', 'rainbow', 'sparkle', 'rotate', 'ruby', 'unixtime']; +export const MFM_TAGS = ['tada', 'jelly', 'twitch', 'shake', 'spin', 'jump', 'bounce', 'flip', 'x2', 'x3', 'x4', 'scale', 'position', 'fg', 'bg', 'border', 'font', 'blur', 'rainbow', 'sparkle', 'rotate', 'ruby', 'unixtime'];