mdastのTextノードに入ってるテキストに対してbudouxの処理を入れて、日本語改行を良い感じにしてみました。

// こんな感じ
import { Text } from 'mdast'
import { Fragment } from 'react'
import { loadDefaultJapaneseParser } from 'budoux'

const wbrParser = loadDefaultJapaneseParser()

interface Props {
    node: Text
}

export const AppMarkdownText = ({ node: { value } }: Props) => {
    return (
        <>
            {value.split('\n').map((text, i) => (
                <Fragment key={`text-${i}`}>
                    {i !== 0 && <br />}
                    {wbrParser.parse(text).map((fgmt, j) => (
                        <Fragment key={`fgmt-${j}`}>
                            {j !== 0 && <wbr />}
                            {fgmt}
                        </Fragment>
                    ))}
                </Fragment>
            ))}
        </>
    )
}

以下、ダミーテキストで確認。

<p>

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

<li>

<li>のネストが未対応だったのでついでに対応しました。

• この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
  • この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

<a>

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

<h3>

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

コードフェンス

こちらはTextノードじゃないのでそのまま。

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

インラインコード

こちらもTextノードじゃないのでそのまま。

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

引用文

これは装飾付きの<p>なだけなので効果有り。

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。