From 49e2eb87e9727899d66dfed1e33ae2b43fd3a963 Mon Sep 17 00:00:00 2001
From: 1Step621 <86859447+1STEP621@users.noreply.github.com>
Date: Wed, 27 Dec 2023 20:41:01 +0900
Subject: [PATCH] =?UTF-8?q?Fix(frontend):=20MFM=E3=81=A7fg=E3=81=A8bg?=
 =?UTF-8?q?=E3=81=AB=E9=95=B7=E3=81=84=E5=8D=98=E8=AA=9E=E3=82=92=E4=BD=BF?=
 =?UTF-8?q?=E3=81=86=E3=81=A8=E6=94=B9=E8=A1=8C=E3=81=95=E3=82=8C=E3=81=AA?=
 =?UTF-8?q?=E3=81=84=E5=95=8F=E9=A1=8C=E3=82=92=E4=BF=AE=E6=AD=A3=20(#1281?=
 =?UTF-8?q?9)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* MFMでfgとbgに長い単語を使うと改行されない問題を修正

* update CHANGELOG.md
---
 CHANGELOG.md                                                  | 1 +
 .../src/components/global/MkMisskeyFlavoredMarkdown.ts        | 4 ++--
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 95fcbbd881..1f65f62788 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -21,6 +21,7 @@
 ### Client
 - Fix: 一部のモデログ(logYellowでの表示対象)について、表示の色が変わらない問題を修正
 - Feat: AiScript専用のMFM構文`$[clickable.ev=EVENTNAME ...]`を追加。`Mk:C:mfm`のオプション`onClickEv`に関数を渡すと、クリック時に`EVENTNAME`を引数にして呼び出す
+- Fix: `fg`/`bg`MFMに長い単語を指定すると、オーバーフローされずはみ出る問題を修正
 
 ### Server
 - Enhance: センシティブワードの設定がハッシュタグトレンドにも適用されるようになりました
diff --git a/packages/frontend/src/components/global/MkMisskeyFlavoredMarkdown.ts b/packages/frontend/src/components/global/MkMisskeyFlavoredMarkdown.ts
index 33d5786fb1..5bac440a81 100644
--- a/packages/frontend/src/components/global/MkMisskeyFlavoredMarkdown.ts
+++ b/packages/frontend/src/components/global/MkMisskeyFlavoredMarkdown.ts
@@ -251,13 +251,13 @@ export default function(props: MfmProps, context: SetupContext<MfmEvents>) {
 					case 'fg': {
 						let color = token.props.args.color;
 						if (!/^[0-9a-f]{3,6}$/i.test(color)) color = 'f00';
-						style = `color: #${color};`;
+						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';
-						style = `background-color: #${color};`;
+						style = `background-color: #${color}; overflow-wrap: anywhere;`;
 						break;
 					}
 					case 'ruby': {