custom html component render in a wrong way

[byk11]

Initial checklist

• I read the support docs
• I read the contributing guide
• I agree to follow the code of conduct
• I searched issues and discussions and couldn’t find anything (or linked relevant results below)

Affected package

"react-markdown": "^8.0.5" "rehype-raw": "^7.0.0",

Steps to reproduce

The position of the think component in the DOM tree is incorrect. How could I fix it, help please

Actual behavior

The position of the think component in the DOM tree is incorrect. How could I fix it, help please

Expected behavior

think about something,think about something

think about something,think about something

think component only wrap his children

Runtime

https://remarkjs.github.io/react-markdown/#html-in-markdown

Package manager

pnpm@8

Operating system

mac

Build and bundle tools

No response

[ChristianMurphy]

@byk11 could you share the HTML/markdown you are using?
The screenshot, doesn't offer a lot of clarity on what you expect.
One thing I do see is you have invalid HTML <think>, custom elements in HTML must contain a dash. https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#name

[byk11]

@byk11 could you share the HTML/markdown you are using? The screenshot, doesn't offer a lot of clarity on what you expect. One thing I do see is you have invalid HTML <think>, custom elements in HTML must contain a dash. https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#name

@ChristianMurphy thank you for your reply.
this is my markdown:

other content,other content

<my-think>
think about something,think about something

think about something,think about something
</my-think>

other content,other content

other content,other content

[ChristianMurphy]

@byk11 could share your content in a code block?

```
example <my-think>test</my-think>
```

[byk11]

@ChristianMurphy sure!

other content,other content

<my-think>
think about something,think about something

think about something,think about something
</my-think>

other content,other content

other content,other content

[ChristianMurphy]

@byk11 thanks for adding the code block.
To clarify, you are asking about the paragraphs in the HTML tag?
That is how markdown works, HTML can mix markdown inside. Paragraphs are being generated by the newlines.

<my-think>

# think **about** something,think about something

think `about` something,think about something

</my-think>

rendered

---

think about something,think about something

think about something,think about something

[github-actions]

Hi! Thanks for reaching out! Because we treat issues as our backlog, we close issues that are questions since they don’t represent a task to be completed.

See our support docs for how and where to ask questions.

Thanks,
— bb

[byk11]

@ChristianMurphy I want to render a custom Think components

@ChristianMurphy sure!

other content,other content

<my-think>
think about something,think about something

think about something,think about something
</my-think>

other content,other content

other content,other content

@ChristianMurphy thank you. I want to render a custom think component to display what AI is thinking about. The content is from AI. Maybe I can add a '\n' before , but is there any better resolution to cover more scenarios？I found that the following three situations cannot be displayed normally.

other content,other content

<my-think>think about something,think about something

think about something,think about something
</my-think>

other content,other content

other content,other content

other content,other content

<my-think>think about something,think about something

think about something,think about something

</my-think>

other content,other content

other content,other content

other content,other content

<my-think>
think about something,think about something

think about something,think about something
</my-think>

other content,other content

other content,other content

[ChristianMurphy]

A few thoughts:

1. make sure my-think's component supports arbitrary content, that could contain markdown
2. do you control the fine-tuning or prompting for the thinking tokens of your model? If so consider prompting or fine tuning it to produce valid markdown!
3. If not (unfortunate) you could indeed try to message the content to make it valid markdown, adding newlines.