Allow alternate editor components: Monaco editor, ACE

[kno10]

Context

The current editor component codemirror from jupyter, has issues with CSS transforms.

• Initializing inside a transformed CSS block invalidates CodeMirror's positioning assumptions. codemirror/codemirror5#2443 (old version)
• Using css transform results in incorrect behavior codemirror/dev#324 (won't fix)
• CSS conflicts with CodeMirror hakimel/reveal.js#1788 (won't fix)

CSS transforms is used by reveal.js to zoom slides from "design size" to "screen size".

This causes codemirror component to be quite unusable within reveal.js slides, as the visible cursor, line indicator and similar can be complely off.

Proposal

• make codemirror optional
• allow alternatives such as Monaco editor (VS Code) or ACE

Tasks and updates

No response

[stevejpurves]

👍🏼 on removing the current codemirror editor and just using vanilla codemirror and yes that would be a good point at which to make the editor optional, and allow for others...

@kno10 I'm curious on your use case, is the desired end state to drop thebe "as-is" into a site with reveal.js and for it to work. Or are you already writing custom javascript around reveal.js in the way you use that currently?

[kno10]

Runnable code examples on lecture slides. Currently using Decker, which is reveal.js based, but includes extensions to, e.g., record a lecture, produce closed captions, etc.
But if this is resolved for vanilla reveal.js, then it will also benefit decker. The scaling logic comes from reveal.js itself.

My customization currently is limited to the widgets, I don't want "run all" for example, and I prefer to have them in the bottom right.

Reveal.js generates CSS for the slide such as the following attached to the slides:
style="width: 1440px; height: 800px; inset: 50% auto auto 50%; transform: translate(-50%, -50%) scale(0.6555);"
the low scale factor is cause by having a large DOM inspector open (and reveal.js automatically updates this when the viewport changes), which reduces the real screen size. The browser viewport currently only has 1536 (my screen resolution is 1920 - supposedly a DPI correction by 96/120), the inner width then is 1536 x 552. The slides are configured in reveal.js to have 1440x800 pixels, and 552/800 = 0.69, not sure how reveal.js obtains its own value, possibly some additional padding included.
The more this scale diverges from 1, the more it messes up codemirror.

[kno10]

Apparently @codemirror/view 6.18.0 added some code to detect when the view component is scaled.
But Thebe appears to currently use codemirror 5.

[tonyfast]

i've been looking at thebe as a way to start testing code execution with assistive technologies. i have representations of rendered html notebooks that work really well with screen reader technologies. unfortunately, codemirror 5 has is not perceivable or operable by assistive technologies, the transition to 6 supposedly fixed this. regardless, the complexity of an editor framework makes it hard to test assistive technology experiences. i'm hoping to find a way to just use unstyled textareas as the cell input to provide a baseline for accessibility tests.