Skip to content

Bold by TextPart in @tanstack/ai-*-ui is not compatible with Japanese and Chinese (and occasionally Korean) due to spec defect in CommonMark #164

@tats-u

Description

@tats-u

TanStack AI version

@tanstack/ai-react-ui@0.1.0

Framework/Library version

react@19.2.3

Describe the bug and the steps to reproduce it

Bold annotations by ** (and emphasis annotations by *) are frequently broken or undone in Japanese and Chinese (and occasionally Korean).

https://streamdown.ai/docs/cjk-support
commonmark/commonmark-spec#650
vercel/streamdown#185
CherryHQ/cherry-studio#4119

Example offending Markdown:

**この文は太字になりません(This sentence is not be bolded)。**この文のせいで(It is due to this sentence)。

- **12 Factor 的には“設定は外部の環境で与えるべき”**で、アプリが自分で .env を読み込むのは境界を曖昧にする、という主張。アプリは既に存在する環境変数だけを読むべき、という立場です。
- **平文の .env/環境変数に機密を置くリスク。**環境ダンプやログ、クラッシュレポート等で漏洩しやすい。自動ローテーションされにくい、という指摘(CI/CD 事故例の教訓)。セクレトは専用のシークレットマネージャで管理し、自動回転・監査、というベストプラクティスが主流です。
- **フレームワークの“暗黙ロード”が本番で驚きになりうる。**例:Flask は `python-dotenv` が入っていれば `.env`/`.flaskenv` を自動で読むため、意図せず設定が変わる恐れ。

Kiyoshiさん、掘り下げ了解〜!よし、今日は**「いつ・どう使う?どう作る?」を実務目線で一気に把握**しちゃいましょ。ついてきてね😉

企業局からは**“明日の午前中には復旧する”**という情報が出ておりますが、**読谷村内の水道が通常どおり使えるようになる時期を示すものではありません。**

まず従来のコンピュータは、0か1のどちらかの状態を取る**「ビット」**で情報を扱う。これに対して量子コンピュータは、**「量子ビット(キュービット)」**を用いる。この量子ビットは、量子力学の性質によって**0と1を同時に持つ「重ね合わせ状態」** になることができる。この「同時に複数状態を扱える」点が、量子コンピュータの計算能力の源になっている。

There are remark plugins that fixes this defect by modifying the spec only for CJK languages. They are recommended especially world-wide AI applications that may handle CJK languages. Humans can fix offending results by adding extra spaces if they have a live preview, but AI does not have a way to check the preview and cannot fix them.

Comparison with and without such plugins:

https://tats-u.github.io/markdown-cjk-friendly/?s16=KgAqAFMwbjCHZW8wKllXW2swajCKMH4wWzCTMAj_VABoAGkAcwAgAHMAZQBuAHQAZQBuAGMAZQAgAGkAcwAgAG4AbwB0ACAAYgBlACAAYgBvAGwAZABlAGQACf8CMCoAKgBTMG4wh2VuMFswRDBnMAj_SQB0ACAAaQBzACAAZAB1AGUAIAB0AG8AIAB0AGgAaQBzACAAcwBlAG4AdABlAG4AYwBlAAn_AjAKAAoALQAgACoAKgAxADIAIABGAGEAYwB0AG8AcgAgAIR2azBvMBwgLYqaW28wFlnokG4wsHSDWGcwDk5IMIsweTBNMB0gKgAqAGcwATCiMNcw6jBMMOqBBlJnMCAALgBlAG4AdgAgAJIwrYp_MLyPgDBuMG8wg1hMdZIw1mYnZmswWTCLMAEwaDBEMEYwO041XwIwojDXMOowbzDiZWswWFsoV1kwizCwdINYCVlwZWAwUTCSMK2KgDB5ME0wATBoMEQwRjDLejRYZzBZMAIwCgAtACAAKgAqAHNeh2VuMCAALgBlAG4AdgAP_7B0g1gJWXBlazBfasZbkjBuf08w6jC5MK8wAjAqACoAsHSDWMAw8zDXMIQw7TCwMAEwrzDpMMMwtzDlMOww3TD8MMgwSXtnMA9vKW1XMIQwWTBEMAIw6oHVUu0w_DDGMPwwtzDnMPMwVTCMMGswTzBEMAEwaDBEMEYwB2NYZAj_QwBJAC8AQwBEACAAi05FZYtPbjBZZROKCf8CMLswrzDsMMgwbzACXCh1bjC3MPwwrzDsMMMwyDDeMM0w_DC4MOMwZzChewZ0VzABMOqB1VLeVuKO-zDjdvtnATBoMEQwRjDZMLkwyDDXMOkwrzDGMKMwuTBMMDtOQW1nMFkwAjAKAC0AIAAqACoA1TDsMPww4DDvMPwwrzBuMBwgl2bZnu0w_DDJMB0gTDAsZ2p1ZzBamk0wazBqMIowRjCLMAIwKgAqAItPGv9GAGwAYQBzAGsAIABvMCAAYABwAHkAdABoAG8AbgAtAGQAbwB0AGUAbgB2AGAAIABMMGVRYzBmMEQwjDBwMCAAYAAuAGUAbgB2AGAALwBgAC4AZgBsAGEAcwBrAGUAbgB2AGAAIACSMOqB1VJnMK2KgDBfMIEwATAPYfNWWzBaMC2KmltMMAlZjzCLMFBgjDACMAoACgBLAGkAeQBvAHMAaABpAFUwkzABMJhjijALTlIwhk7jiRwwAf-IMFcwATDKTuVlbzAqACoADDBEMGQw-zBpMEYwf09GMB__aTBGMFxPizAf_w0wkjCfW9lS7nbafWcwAE4XbGswimLhYyoAKgBXMGEwgzBEMH4wVzCHMAIwZDBEMGYwTTBmMG0wPdgJ3goACgABT21pQFxLMIkwbzAqACoAHCAOZuVlbjBIU01SLU5rMG8wqV_nZVkwizAdICoAKgBoMEQwRjDFYDFYTDD6UWYwSjCKMH4wWTBMMAEwKgAqAK2KN4xRZ4VRbjA0bFOQTDAakDheaTBKMIowf09IMIswiDBGMGswajCLMEJmH2eSMDp5WTCCMG4wZzBvMEIwijB-MFswkzACMCoAKgAKAAoAfjBaMJNfZWduMLMw8zDUMOUw_DC_MG8wATAwAEswMQBuMGkwYTCJMEswbjC2ckthkjDWU4swKgAqAAww0zDDMMgwDTAqACoAZzDFYDFYkjBxYkYwAjBTMIwwazD-W1cwZjDPkVBbszDzMNQw5TD8ML8wbzABMCoAKgAMMM-RUFvTMMMwyDAI_60w5TD8MNMwwzDIMAn_DTAqACoAkjAodUQwizACMFMwbjDPkVBb0zDDMMgwbzABMM-RUFubUmZbbjAnYOqMazCIMGMwZjAqACoAMABoMDEAkjAMVEJmazABY2QwDDDNkW0wCFSPMFswtnJLYQ0wKgAqACAAazBqMIswUzBoMEwwZzBNMIswAjBTMG4wDDAMVEJmazAHiXBltnJLYZIwcWJIMIswDTC5cEwwATDPkVBbszDzMNQw5TD8ML8wbjAIipd7_YCbUm4wkG5rMGowYzBmMEQwizACMA&gfm=1&engine=micromark

Reproduction:

  1. Open the reproduction link
  2. Paste an offending Markdown to the text area
  3. ** are not recognized as bold

To fix:

Just add remark plugins remark-cjk-friendly (and remark-cjk-friendly-gfm-strikethrough) to the Markdown rendering component

Your Minimal, Reproducible Example - (Sandbox Highly Recommended)

https://stackblitz.com/edit/vitejs-vite-irf2vdzr?file=package.json

Screenshots or Videos (Optional)

Image Image
Image
### なぜ「アンチパターン」と言われるのか(よくある論点)

- **12 Factor 的には“設定は外部の環境で与えるべき”**で、アプリが自分で .env を読み込むのは境界を曖昧にする、という主張。アプリは既に存在する環境変数だけを読むべき、という立場です。
- **平文の .env/環境変数に機密を置くリスク。**環境ダンプやログ、クラッシュレポート等で漏洩しやすい。自動ローテーションされにくい、という指摘(CI/CD 事故例の教訓)。セクレトは専用のシークレットマネージャで管理し、自動回転・監査、というベストプラクティスが主流です。
- **フレームワークの“暗黙ロード”が本番で驚きになりうる。**例:Flask は `python-dotenv` が入っていれば `.env`/`.flaskenv` を自動で読むため、意図せず設定が変わる恐れ。
- **優先順位の混乱。** `.env` が本来の環境変数を上書きして事故る――ただし `python-dotenv`**既定では上書きしません**`override=True` を付けた場合のみ)。また `PYTHON_DOTENV_DISABLED=1` でロード自体を無効化できます。
- こうした背景から「dotenv は開発専用・本番では使うな」と断ずる記事もあります。

### では、どう使い分ける?

#### OK(推奨)な場面

From: https://x.com/MtkN1XBt/status/1960502766918623743?s=20

Image
Kiyoshiさん、掘り下げ了解〜!よし、今日は**「いつ・どう使う?どう作る?」を実務目線で一気に把握**しちゃいましょ。ついてきてね😉

### なにが“LangChainらしさ”?

- ***Runnable / LCEL(LangChain Expression Language)**\
  いまの LangChain は「Runnable」という共通インターフェースとLCELで**処理をパイプでつなぐ**のが基本。モデル入れ替えやストリーミング、並列、リトライ等が統一APIで扱えます。
- **エージェント×LangGraph**\
  「ツールを使いながら自走する」エージェントは**LangGraph**で状態管理・反復・中断/再開・人手承認(HITL)まで堅牢に。エージェントの実装はLangChain側のエージェントAPIとLangGraphが連携する形が主流です。

From: https://x.com/tatakauashi/status/1988137666580492766/photo/1

Image
読谷村内の断水情報について:誤解防止のお知らせ

更新日:2025年11月24日

**【読谷村内の断水情報について:誤解防止のお知らせ】**

一部メディアやSNSにおいて、「明日(11月25日・火曜日)の午前に再開する」といった投稿が見られますが、これは読谷村における断水復旧状況を正確に示した情報ではありません。

企業局からは**“明日の午前中には復旧する”**という情報が出ておりますが、**読谷村内の水道が通常どおり使えるようになる時期を示すものではありません。**

読谷村では、企業局の復旧作業後に

- **石川浄水場からの供給再開(現時点で未定)**
- 各地域で必要となる **水の排水作業(赤水・サビ水抜き)**

などの工程が必要となるため、\
**実際の復旧にかかる日数は目処が立っておらず、数日はかかる見込みです。**

From: https://x.com/BerandaMegane/status/1992951470799679952/photo/1

Image
量子コンピュータは、**量子力学の原理を利用して計算を行う新しいタイプのコンピュータ**である。ここでは一般の社会人でも理解しやすい形で、従来のコンピュータとの違いと、その可能性をより詳しく説明する。

まず従来のコンピュータは、0か1のどちらかの状態を取る**「ビット」**で情報を扱う。これに対して量子コンピュータは、**「量子ビット(キュービット)」**を用いる。この量子ビットは、量子力学の性質によって**0と1を同時に持つ「重ね合わせ状態」** になることができる。この「同時に複数状態を扱える」点が、量子コンピュータの計算能力の源になっている。

From: https://x.com/asaokitan/status/1989865406904058020/photo/1


Only offending lines:

- **12 Factor 的には“設定は外部の環境で与えるべき”**で、アプリが自分で .env を読み込むのは境界を曖昧にする、という主張。アプリは既に存在する環境変数だけを読むべき、という立場です。
- **平文の .env/環境変数に機密を置くリスク。**環境ダンプやログ、クラッシュレポート等で漏洩しやすい。自動ローテーションされにくい、という指摘(CI/CD 事故例の教訓)。セクレトは専用のシークレットマネージャで管理し、自動回転・監査、というベストプラクティスが主流です。
- **フレームワークの“暗黙ロード”が本番で驚きになりうる。**例:Flask は `python-dotenv` が入っていれば `.env`/`.flaskenv` を自動で読むため、意図せず設定が変わる恐れ。

Kiyoshiさん、掘り下げ了解〜!よし、今日は**「いつ・どう使う?どう作る?」を実務目線で一気に把握**しちゃいましょ。ついてきてね😉

企業局からは**“明日の午前中には復旧する”**という情報が出ておりますが、**読谷村内の水道が通常どおり使えるようになる時期を示すものではありません。**

まず従来のコンピュータは、0か1のどちらかの状態を取る**「ビット」**で情報を扱う。これに対して量子コンピュータは、**「量子ビット(キュービット)」**を用いる。この量子ビットは、量子力学の性質によって**0と1を同時に持つ「重ね合わせ状態」** になることができる。この「同時に複数状態を扱える」点が、量子コンピュータの計算能力の源になっている。

https://tats-u.github.io/markdown-cjk-friendly/?s16=LQAgACoAKgAxADIAIABGAGEAYwB0AG8AcgAgAIR2azBvMBwgLYqaW28wFlnokG4wsHSDWGcwDk5IMIsweTBNMB0gKgAqAGcwATCiMNcw6jBMMOqBBlJnMCAALgBlAG4AdgAgAJIwrYp_MLyPgDBuMG8wg1hMdZIw1mYnZmswWTCLMAEwaDBEMEYwO041XwIwojDXMOowbzDiZWswWFsoV1kwizCwdINYCVlwZWAwUTCSMK2KgDB5ME0wATBoMEQwRjDLejRYZzBZMAIwCgAtACAAKgAqAHNeh2VuMCAALgBlAG4AdgAP_7B0g1gJWXBlazBfasZbkjBuf08w6jC5MK8wAjAqACoAsHSDWMAw8zDXMIQw7TCwMAEwrzDpMMMwtzDlMOww3TD8MMgwSXtnMA9vKW1XMIQwWTBEMAIw6oHVUu0w_DDGMPwwtzDnMPMwVTCMMGswTzBEMAEwaDBEMEYwB2NYZAj_QwBJAC8AQwBEACAAi05FZYtPbjBZZROKCf8CMLswrzDsMMgwbzACXCh1bjC3MPwwrzDsMMMwyDDeMM0w_DC4MOMwZzChewZ0VzABMOqB1VLeVuKO-zDjdvtnATBoMEQwRjDZMLkwyDDXMOkwrzDGMKMwuTBMMDtOQW1nMFkwAjAKAC0AIAAqACoA1TDsMPww4DDvMPwwrzBuMBwgl2bZnu0w_DDJMB0gTDAsZ2p1ZzBamk0wazBqMIowRjCLMAIwKgAqAItPGv9GAGwAYQBzAGsAIABvMCAAYABwAHkAdABoAG8AbgAtAGQAbwB0AGUAbgB2AGAAIABMMGVRYzBmMEQwjDBwMCAAYAAuAGUAbgB2AGAALwBgAC4AZgBsAGEAcwBrAGUAbgB2AGAAIACSMOqB1VJnMK2KgDBfMIEwATAPYfNWWzBaMC2KmltMMAlZjzCLMFBgjDACMAoACgBLAGkAeQBvAHMAaABpAFUwkzABMJhjijALTlIwhk7jiRwwAf-IMFcwATDKTuVlbzAqACoADDBEMGQw-zBpMEYwf09GMB__aTBGMFxPizAf_w0wkjCfW9lS7nbafWcwAE4XbGswimLhYyoAKgBXMGEwgzBEMH4wVzCHMAIwZDBEMGYwTTBmMG0wPdgJ3goACgABT21pQFxLMIkwbzAqACoAHCAOZuVlbjBIU01SLU5rMG8wqV_nZVkwizAdICoAKgBoMEQwRjDFYDFYTDD6UWYwSjCKMH4wWTBMMAEwKgAqAK2KN4xRZ4VRbjA0bFOQTDAakDheaTBKMIowf09IMIswiDBGMGswajCLMEJmH2eSMDp5WTCCMG4wZzBvMEIwijB-MFswkzACMCoAKgAKAAoAfjBaMJNfZWduMLMw8zDUMOUw_DC_MG8wATAwAEswMQBuMGkwYTCJMEswbjC2ckthkjDWU4swKgAqAAww0zDDMMgwDTAqACoAZzDFYDFYkjBxYkYwAjBTMIwwazD-W1cwZjDPkVBbszDzMNQw5TD8ML8wbzABMCoAKgAMMM-RUFvTMMMwyDAI_60w5TD8MNMwwzDIMAn_DTAqACoAkjAodUQwizACMFMwbjDPkVBb0zDDMMgwbzABMM-RUFubUmZbbjAnYOqMazCIMGMwZjAqACoAMABoMDEAkjAMVEJmazABY2QwDDDNkW0wCFSPMFswtnJLYQ0wKgAqACAAazBqMIswUzBoMEwwZzBNMIswAjBTMG4wDDAMVEJmazAHiXBltnJLYZIwcWJIMIswDTC5cEwwATDPkVBbszDzMNQw5TD8ML8wbjAIipd7_YCbUm4wkG5rMGowYzBmMEQwizACMA&gfm=1&engine=micromark


Chinese examples:

Actual:

plain CommonMark

Expected:

with this spec

Image source: CherryHQ/cherry-studio#4119


The actual cases that I have met in AI services:

Image Image

Do you intend to try to help solve this bug with your own PR?

Yes, I think I know how to fix it and will discuss it in the comments of this issue

Terms & Code of Conduct

  • I agree to follow this project's Code of Conduct
  • I understand that if my bug cannot be reliable reproduced in a debuggable environment, it will probably not be fixed and this issue may even be closed.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions