Components: Fix race conditions in SyntaxHighlighter #18158
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
…light the code Closes #18090
☁️ Nx Cloud ReportCI is running/has finished running commands for commit ca24412. As they complete they will appear below. Click to see the status, the terminal output, and the build insights. 📂 See all runs for this branch ✅ Successfully ran 1 targetSent with 💌 from NxCloud. |
ndelangen
approved these changes
May 6, 2022
ndelangen
approved these changes
May 6, 2022
| We can't use `code` since PrismJS races for it. | ||
| See https://github.com/storybookjs/storybook/issues/18090 | ||
| */ | ||
| const Code = styled.div(({ theme }) => ({ |
There was a problem hiding this comment.
For anyone watching, it's easy to miss:
We're changing the <code> to a <div>.
We do this because Prismjs wants to format code directly on the DOM itself.
It's targeting these DOM-nodes..
We can either patch Prismjs or make sure the DOM-nodes it targets don't exists.. and that'd what we opted to do here.
shilman
approved these changes
May 6, 2022
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Issue: #18090
What I did
Replace
codewithdivto prevent PrismJS to highlight the code after React has finished doing so.Apparently, PrimsJS that is pre-bundled with the syntax highlighter library was running globally after it would load and replace already highlighted code with
[object Object].How to test
Check out instructions in #18090