Conversation
| "react": "^19.0.0", | ||
| "react-dom": "^19.0.0", | ||
| "rehype-katex": "^7.0.1", | ||
| "rehype-parse": "^9.0.1", |
There was a problem hiding this comment.
タグで囲まれた部分が表示されなくなってしまったため、remark-parseからrehype-parseに変えました
MarkdownではなくHTMLを直接渡している可能性
unified().use(remarkParse) を使っているので、これは Markdown を解析するパイプラインになっています。
もし<h1>Hello</h1>のような HTML 文字列をそのまま渡している場合、remarkParse ではなく rehypeParse を使うべきです。
→ もし HTML を含む文字列を処理するなら、 remarkParse ではなく rehypeParse を試してください。
| User, | ||
| } from "@prisma/client"; | ||
|
|
||
| dayjs.extend(utc); |
There was a problem hiding this comment.
layout.tsxでの読み込みはサーバーサイドでしか効かないため、クライアントサイドでレンダリングするときに処理するために必要
| import Message from "#/components/Message"; | ||
|
|
||
| type ChannelProps = { | ||
| session: Session; |
There was a problem hiding this comment.
Sessionはコンポーネントのpropsとして渡すにはふさわしくないと思うので、サーバー側でユーザーIDだけ抜き出してから渡すようにするか、クライアントコンポーネント内でSessionを扱いたければ useSession() フックを使う方が良いかと思います
| <ChannelFooter user_id="test" is_joined={false} /> | ||
| </Stack> | ||
| <Channel | ||
| session={session} |
src/components/Markdown.tsx
Outdated
| const result = unified() | ||
| .use(rehypeParse, { | ||
| fragment: true, | ||
| }) |
There was a problem hiding this comment.
これではMarkdownの表示を行うコンポーネントなのにMarkdownの処理を行うプラグインが全て効かなくなってしまうのでは…？(実際、手元で試したところMarkdownをGFMや数式へ変換する処理が全て効かなくなってしまっています)
Markdownに含まれるHTMLタグで囲まれた要素を表示したいのであれば、 remarkParse でパースするのを維持しつつ、 remarkRehype に { allowDangerousHtml: true } を指定して rehypeRaw と rehypeSanitize を組み合わせるのではどうでしょうか？
余談ですが、TextEditor(TipTap)の出力ってMarkdownではなく <p>Hoge <strong>Fuga</strong></p> のようなHTML形式なんですね…(Markdownで出力されてDBに格納されるものかと思い込んでいた)
There was a problem hiding this comment.
すみません確認が漏れていました、ちょっと後で動かして確認してみます👀
There was a problem hiding this comment.
この件ですがすぐに解決することが難しそうなので、一旦パース部分をもとの処理に戻しました。
現在のところTiptapから送信されたメッセージが表示できないままになってしまいますが、差分が大きくなるため一旦このPRでは送信処理を実装したというところまでにしたいと思います。
今後の方向性としてはTiptap側が勝手に文字列をpタグやdivタグで囲うのをやめさせるか、それが難しそうであればTiptapを辞めることも含めて検討しようと思います。
src/components/Markdown.tsx
Outdated
| }) | ||
| .processSync(props.content).result; | ||
| .processSync(content).result; | ||
| console.log(result); |
There was a problem hiding this comment.
console.log() が残っていますが消し忘れですか？
There was a problem hiding this comment.
すみません、消します（ESLintも設定しときます......）
|
|
||
| const Paragraph = (props: React.ComponentProps<"p">) => { | ||
| const { className, ...others } = props; | ||
| console.log(props); |
There was a problem hiding this comment.
console.log() は消し忘れですか？
2 participants
close #25
スクリーンショット