codesandbox / codesandbox/codesandbox-client
CSB embed editor does not properly highlight `<script type="module">`
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 13.6k
- Forks
- 2.4k
- Avg merge
- 6d 19h
- Merged PRs (30d)
- 2
Description
🐛 bug report
Preflight Checklist
- I have read the Contributing Guidelines for this project.
- I agree to follow the Code of Conduct that this project
adheres to. - I have searched the issue tracker for an issue that matches the one I want
to file, without success.
Description of the problem
I just updated a Redux docs vanilla JS example sandbox to go from a plain <script> tag to a <script type="module">. Now, the embed editor no longer does any syntax highlighting for the JS code in that script tag:
- https://redux.js.org/tutorials/fundamentals/part-1-overview#redux-core-example-app
- https://codesandbox.io/s/redux-fundamentals-core-example-lr7k1?from-embed=&file=/index.html
The code highlights correctly in the full CSB editor:
How has this issue affected you? What are you trying to accomplish?
This is a bare basic example of Redux usage with vanilla JS, to illustrate the concepts.
Lack of syntax highlighting isn't a total breaking issue, but it's definitely annoying and makes it harder for Redux learners to read the code in this example.
To Reproduce
- Browse to the Redux docs at https://redux.js.org/tutorials/fundamentals/part-1-overview#redux-core-example-app and observe the highlighting in the
<script>tag in the sandbox embed
Link to sandbox: https://codesandbox.io/s/redux-fundamentals-core-example-lr7k1?from-embed=&file=/index.html
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Reproduce the issue in the linked Redux documentation sandbox, focusing on the embedded editor's handling of the <script type="module"> tag. Compare its highlighting with the full CSB editor shown in the report. Done means JavaScript inside module script tags is highlighted correctly in the embed editor.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 42/100