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
Javalab: Use codemirror #39147
Javalab: Use codemirror #39147
Conversation
dispatchEditorChange = () => { | ||
return tr => { | ||
// we are overwriting the default dispatch method for codemirror, | ||
// so we need to manually call the update method. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This commenting is very helpful :)
} | ||
|
||
dispatchEditorChange = () => { | ||
return tr => { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
What is tr
in this case?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
tr is a codemirror transaction I'll add a comment to make it more clear
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
👍
Haha I'm glad I'm in an empty room, because I might have otherwise startled anyone nearby. So excited about this change!!! |
@@ -0,0 +1,52 @@ | |||
import { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This separation of concerns will make maintenance easy and straightforward 🙂
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM!
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM!
Instead of using Ace as our editor in Javalab, switch to Codemirror version 6
Our main reason for the switch is codemirror 6 has been redesigned with accessibility in mind and has things such as tab navigation built in. Ace does not have a solution for tab navigation (you get stuck in the ace editor with no way out beyond us doing something hacky).
Note that this is a different version of codemirror than we use elsewhere because we want to take advantage of the new accessibility features. However the new codemirror has different package names than the old one so it should not be an issue.
We still allow tabbing in the editor, but the user can continue navigation by doing
esc
+tab
.The new editor looks like this:
Links
Testing story
Tested locally. Verified we are still writing updates to redux so we can save/run code later (we do not have that functionality yet).
PR Checklist: