-
Notifications
You must be signed in to change notification settings - Fork 181
Description
Bug Description
Any text that contains XML sequences that aren't valid HTML will make React drop a bunch of errors in the console and prevent the item from rendering. If the content includes something that isn't going to render correctly, it would be nice to be able to escape them automatically so that this doesn't occur. It is possible to handle this before passing the content into streamdown, however it's not necessarily possible since something may get modified with rehype and escaping beforehand would break that.
"<invalid>"will not render and will show an error:The tag <invalid> is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter."`<invalid>`"will render inside a<code>tag
Steps to Reproduce
Pass any string that contains xml that is not a valid html element and open the console to see the errors. See code sample for example.
Expected Behavior
No errors logged to console.
Actual Behavior
Errors are logged to the console.
The tag <valid> is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.
The tag <not> is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.
Code Sample
import { Streamdown } from 'streamdown';
export default function App() {
const markdown = `# Hello World
This is **streaming** markdown!
This is \`<not> <valid>\` HTML
This is <not> <valid> HTML
`;
return (
<div className="App">
<Streamdown>{markdown}</Streamdown>
</div>
);
}Streamdown Version
1.6.10
React Version
19.2.3
Node.js Version
No response
Browser(s)
No response
Operating System
None
Additional Context
I'm willing to contribute if there is appetite to handle this in this package.