fix: Mermaid diagrams fail to render in search results with 'syntax error in text'" #9145
Conversation
|
…-in-text-in-search-result
| @@ -21,4 +24,7 @@ export const remarkPlugin: Plugin = function() { | |||
|
|
|||
| export const sanitizeOption: SanitizeOption = { | |||
| tagNames: ['mermaid'], | |||
| attributes: { | |||
| mermaid: ['value'], | |||
| }, | |||
There was a problem hiding this comment.
なぜ attributes として value が必要になるのか説明してください
There was a problem hiding this comment.
今回のエラーの原因は、検索結果ページの検索文字のハイライトタグが、mermaid ブロックの中に入ったとき、mermaid の文法エラーを引き起こすものでした。よって mermaid ブロックの中身を文字列として value に入れて MermaidViewer に送っています。
children のみでは出来ない理由は、特定の単語がハイライトされると MermaidViewer は children を文字列ではなく React.Element として受け取るためです。React.Element から文字列を復元することは一応出来ますが、その復元された文字列を使用しての mermaid 図の描画が出来ませんでした。
(画像は２つの mermaid 図を描画しようとしています。上はハイライトタグが入っていないので正しく描画され、下は入っているため syntax error。エラーが出ている方は children の type が react.element)
There was a problem hiding this comment.
であれば、もうちょっとやりようがあると思う。このままでは children と value の役割が冗長だし、MermaildViewer で中途半端に使っていたり使っていなかったりするので意図がわからない。
案1
MermaidViewerProps の型を変えるというのはやったのだろうか？
ここで children を string に限定すれば ReactMarkdown がよしなにやってくれるのであれば、children に一本化できる。
とはいえこの案は望み薄。
案2
案1 でうまくいかない場合は hast 時点まで遡る。
rewriteNode 処理 で children を text node にできないのだろうか？
https://github.com/syntax-tree/hast?tab=readme-ov-file#text
これでうまくいけば children に一本化できる。
案3
案1, 2両方共うまくいかない場合、hast では text node でも ReactMarkdown のおせっかいにより React.Element 化されるという診断になるか？
それであれば attribute を使う方が string 型になることが保証されるので、children を使わず attribute に一本化すればいいと思う。
There was a problem hiding this comment.
結果として案3の採用となりました。
案1
string に制限しても React.Element が流れてきたので断念。
案2
mdast の Code は value: string しか持てず、任意の型の children を持たないので、node を paragraph にし children に text node を入れる形で実験してみましたが、結果は変わリませんでした。
そもそも keyword-highlighter は rehype-plugin であり、node のタイプが text のときにキーワードを em で挟む処理でした。これを避けるためには mermaid の中身の node のタイプが text ではなく element な必要がありますが、element 化しつつ中身をテキストとして扱える型や方法がなかったので案2 も断念。
| @@ -21,4 +24,7 @@ export const remarkPlugin: Plugin = function() { | |||
|
|
|||
| export const sanitizeOption: SanitizeOption = { | |||
| tagNames: ['mermaid'], | |||
| attributes: { | |||
| mermaid: ['value'], | |||
| }, | |||
There was a problem hiding this comment.
であれば、もうちょっとやりようがあると思う。このままでは children と value の役割が冗長だし、MermaildViewer で中途半端に使っていたり使っていなかったりするので意図がわからない。
案1
MermaidViewerProps の型を変えるというのはやったのだろうか？
ここで children を string に限定すれば ReactMarkdown がよしなにやってくれるのであれば、children に一本化できる。
とはいえこの案は望み薄。
案2
案1 でうまくいかない場合は hast 時点まで遡る。
rewriteNode 処理 で children を text node にできないのだろうか？
https://github.com/syntax-tree/hast?tab=readme-ov-file#text
これでうまくいけば children に一本化できる。
案3
案1, 2両方共うまくいかない場合、hast では text node でも ReactMarkdown のおせっかいにより React.Element 化されるという診断になるか？
それであれば attribute を使う方が string 型になることが保証されるので、children を使わず attribute に一本化すればいいと思う。
…-in-text-in-search-result
…-in-text-in-search-result
|
@mergify requeue |
✅ The queue state of this pull request has been cleaned. It can be re-embarked automatically |
mergify
bot
deleted the
fix/122548-153821-fix-mermaid-syntax-error-in-text-in-search-result
branch
Summary
Task
Notes
使用する mermaid のバージョンを更新