search

jupyter-book / thebe

Turn static HTML pages into live documents with Jupyter kernels.
https://thebe.readthedocs.io
BSD 3-Clause "New" or "Revised" License
393 stars 68 forks source link

Allow alternate editor components: Monaco editor, ACE #730

Open kno10 opened 7 months ago

kno10 commented 7 months ago

Context

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

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

Tasks and updates

No response

stevejpurves commented 7 months ago

👍🏼 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 commented 7 months ago

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 commented 6 months ago

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 commented 4 months ago

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.