fix: Fix code block hydration errors #11046
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
Bundle ReportChanges will decrease total bundle size by 16.29kB ⬇️
|
There was a problem hiding this comment.
Thanks for removing this. I think I missed this file in the changelog migration.
| __html: JSON.stringify( | ||
| api.responses[selectedResponse].content?.schema, | ||
| null, | ||
| 2 |
There was a problem hiding this comment.
Is there any way uncontrolled input can land here?
There was a problem hiding this comment.
good point, but no, this is just the filtered response of our openAPI call
| @@ -25,29 +29,39 @@ function Example({api, selectedTabView, selectedResponse}: ExampleProps) { | |||
| exampleJson = api.responses[selectedResponse].content?.example; | |||
| } | |||
|
|
|||
| // load prism dynamically for these codeblocks, | |||
| // otherwise the highlighting applies globally | |||
| useEffect(() => { | |||
There was a problem hiding this comment.
Will this cause layout shift or flashing because it paints some time after the initial page load? 🤔
There was a problem hiding this comment.
Yes, but it did that before as well. We could also think about not dynamically loading prismjs at all and instead use what we already have (rehypePrismPlus). This would streamline the style of the API JSON examples with our other codeblocks. This would require more work though, we can do it in another pr if needed.
|
Feel free to merge! |
ApiExamplescomponentfixes #10574
might fix errors for switching code tabs (#10719)