Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Allow alternate editor components: Monaco editor, ACE #730

Open
kno10 opened this issue Feb 13, 2024 · 4 comments
Open

Allow alternate editor components: Monaco editor, ACE #730

kno10 opened this issue Feb 13, 2024 · 4 comments

Comments

@kno10
Copy link
Contributor

kno10 commented Feb 13, 2024

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

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

Tasks and updates

No response

@stevejpurves
Copy link
Collaborator

👍🏼 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
Copy link
Contributor Author

kno10 commented Feb 15, 2024

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
Copy link
Contributor Author

kno10 commented Feb 28, 2024

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
Copy link
Contributor

tonyfast commented May 5, 2024

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants