moritzjacobs commented 7 months ago

🐛 bug report

Preflight Checklist

[x] I have read the Contributing Guidelines for this project.
[x] I agree to follow the Code of Conduct that this project adheres to.
[x] I have searched the issue tracker for an issue that matches the one I want to file, without success.

Description of the problem

When loaded with codemirror=1 as a query param, code highlighting in embeds isn't working anymore.

How has this issue affected you? What are you trying to accomplish?

We have a large collection of training material that embeds examples e.g. like this:

<iframe
  src="https://codesandbox.io/embed/XXXXXXXXXXXXXXXXXX?codemirror=1&amp;fontsize=16&amp;hidenavigation=1&amp;module=%2Fsrc%2Felements%2FhelloWorld.js&amp;view=split&amp;editorsize=65&amp;theme=light"
  style="
    width: 100%;
    height: 680px;
    border: 0;
    overflow: hidden;
    margin: 0;
  "
  sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
></iframe>

Since codemirror is a bit more lightweight, we set the param option to 1, as per the documentation.

Recently our trainers noticed, that code highlighting doesn't seem to work anymore. Before we work around this by not using codemirror, we thought it might be worth a report.

To Reproduce

Look at this codepen (don't laugh, I just thought it would be better to not embed codesandboxes into each other 😆):

https://codepen.io/moritzjacobs/pen/MWRwgeB

The iframe code is directly from the sharing modal, only difference between left and right is codemirror=1.

Thank you for your help!

Your Environment

Software	Name/Version
Сodesandbox	any
Browser	Chrome, FF, Safari, …
Operating System	macOS

JamesACS commented 7 months ago

Hello @moritzjacobs ,

The documentation linked is for our legacy embeds. Unfortunately not all of the features for our older embeds are available on our current embeds. Including the codemirror option.