codesandbox / codesandbox/codesandbox-client

CSB embed editor does not properly highlight `<script type="module">`

Open
#8,259 1 comment 0 reactions 0 assignees View on GitHub

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:

image

The code highlights correctly in the full CSB editor:

image

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
Link to sandbox: https://codesandbox.io/s/redux-fundamentals-core-example-lr7k1?from-embed=&file=/index.html

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.