Open rohitpaulk opened 9 months ago
Feel free to break this up however you see fit, and let's try to deploy incrementally for these 4 use-cases
@rohitpaulk Broke up all the steps into several simple task-lists above. I have a lot of unfinished/experimental changes for many of those steps, already splitting them into half a dozen little branches, and preparing my barebones branch to be made into the first PR.
Currently, our code rendering system is built in-house using Shiki for code highlighting. Some features we've added on top of this are:
This is getting hard for us to extend, mostly because there isn't a solid foundation that is oriented around code editing. Let's transition away from this and use CodeMirror instead.
Rationale
We're already running into some limitations with the current system.
Current work
One example of a current limitation is the way we handle comments.
Our comment buttons are currently anchored to the right of a line, so in most cases they're hidden by default. Even if you scroll to them, the disappear when you scroll back to read the comment:
https://github.com/codecrafters-io/frontend/assets/3893573/fafb268e-9cd8-4471-ae9b-4f8a4ce47942
We want to them to be anchored to the right-most end of the editor container (not the line), like with Repl.it:
https://github.com/codecrafters-io/frontend/assets/3893573/4e5aa506-ac28-4e9f-a7b0-36246f6aaebf
This is non-trivial to implement from scratch, since they need to be absolutely positioned wrt. the editor container in such a way that they're aware of a line's current Y-index. With CodeMirror, this'll be easier to do by using a system similar to their "gutter" feature (that renders icons on the left side, not right). You'll see that repl-it is using some kind of gutters plugin too.
Future work
A lot of the features we want to build in the future will be easier to build if we're using CodeMirror.
Displaying line numbers along with diffs
We might also add an in-browser editor at some point (thought it's unlikely that'll happen soon).
Scope
For starters, let's not add any new features but transition our existing features to use CodeMirror. I'm ordering these based on least used -> most used (we should ship PRs for the least used first, so we can iron out any issues early on before shipping)
1. Rendering buildpack code: URL
This only renders code, no diffs. No expand/collapse functionality, no comments functionality.
2. Rendering Submission Diffs for admins: URL
This renders diffs, but without comments etc. Needs to support expanding/collapsing unchanged lines, but doesn't need to support comments.
3. Rendering first stage solution diffs: URL
Similar to the above.
4. Community Solution Diffs: URL
This is the most complicated one: needs diffs + comments + collapse/expand unchanged sections.