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

Replace Ace Editor with CodeMirror #4933

Merged
merged 4 commits into from
Sep 12, 2023
Merged

Replace Ace Editor with CodeMirror #4933

merged 4 commits into from
Sep 12, 2023

Conversation

niknetniko
Copy link
Member

@niknetniko niknetniko commented Sep 4, 2023

This pull request replaces the Ace Editor with CodeMirror (which is a commonly-used text editing component for the web).

While functionally equivalent for end-users, it does have some benefits:

  • No longer uses Sprockets
  • Ready for use within WebComponents

On the other hand, it does need a bit more code to:

  • Set up the language support (since the set of first-party language modules is smaller)
  • Set up the theme. It applies the Rouge CSS classes to the code, so it uses the same theme. However, sometimes CodeMirror and Rouge don't agree on what a particular piece of code is, so I foresee that we might need to tweak the theme a bit sometimes.

Closes #4585 as a side effect.

@niknetniko niknetniko added the enhancement A change that isn't substantial enough to be called a feature label Sep 4, 2023
@niknetniko niknetniko requested review from jorg-vr and a team as code owners September 4, 2023 11:35
@niknetniko niknetniko requested review from chvp and removed request for a team September 4, 2023 11:35
@niknetniko niknetniko force-pushed the enhance/codemirror branch 2 times, most recently from 3112703 to 2e7be1f Compare September 4, 2023 11:37
@jorg-vr jorg-vr added deploy naos Request a deployment on naos deploy mestra Request a deployment on mestra labels Sep 11, 2023
Copy link
Contributor

@jorg-vr jorg-vr left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you for replacing the legacy editor!

app/assets/javascripts/editor.ts Show resolved Hide resolved

// A custom theme for CodeMirror that applies the same CSS as Rouge does,
// meaning we can use our existing themes.
const rougeStyle = HighlightStyle.define([
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could this also be used for the papyros code editor? (as it also uses code mirror)
This would greatly improve styling

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Since Papyros sets up its own editor, this is no small task: we would need to either hardcode a "dodona" mode (which isn't nice) or change the API to support configuring the CodeMirror instance used by Papyros (which is a lot of work).

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can't we make the 'dodona mode' the default for papyros? ANd just make their default styling consistent.
I'll have a look at this at some later point. No need to fix that for this pr

CodeMirror uses the .nv class a lot, meaning a lot of the code will be
italicized. Rather than change CodeMirror to use the less specific and
less semantic class .n (for names), we remove the italic from the .nv
class instead.
@jorg-vr jorg-vr merged commit 857673b into main Sep 12, 2023
12 of 14 checks passed
@jorg-vr jorg-vr deleted the enhance/codemirror branch September 12, 2023 11:56
@jorg-vr jorg-vr temporarily deployed to naos September 12, 2023 11:56 — with GitHub Actions Inactive
@jorg-vr jorg-vr temporarily deployed to production September 12, 2023 12:00 — with GitHub Actions Inactive
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
deploy mestra Request a deployment on mestra deploy naos Request a deployment on naos enhancement A change that isn't substantial enough to be called a feature
Projects
None yet
Development

Successfully merging this pull request may close these issues.

ACE Editor does not support latest JavaScript features
3 participants