Improve code editor
Closed this issue · 8 comments
Related to this comment
Thanks to #221 the code can now be edited by hand. However, the code editor is just a simple text area. It would be nice if the editor had syntax highlighting and inline syntax errors.
We can use a lightweight solution like Codemirror or a heavy solution like Monaco (heavy because it requires setting up webworkers for a lot of its features). With how the current editor is displayed I would personally recommend Codemirror, as a fully-featured IDE experience (Monaco) seems like overkill. But if we eventually want this, then maybe Monaco is the way to go. Thoughts?
I've worked a lot with online editors so am keen on jumping on this issue if no one else has already started.
Thanks for opening an issue for this Jake 🙏
I personally had in mind something more like the code blocks in Andrew Branch's (@andrewbranch) blog. These code blocks are syntax highlighted, editable, and they show red squiggly lines underneath incorrect code. Take a look at one of his posts here - edit any code block and purposely make a mistake, the result is quite impressive IMO.
Is this overkill for our application?
Wow, that editor is amazing. I think that would be great in blocks. It would also be nice to have some autocomplete. Andrew seems to be using a custom Slate editor with Oniguruma and Textmate for syntax highlighting (which I believe is what Codesandbox uses). A concern with setting up a stack like that is bundle size. I don't think performance would be an issue.
One option could be to implement this in steps. First, just use Codemirror to quickly get syntax highlighting and a better JS editing experience (proper indentation, prettier?, etc). Next, we could implement a much more fully-featured editor like the one in Andrews blog and on Codesandbox (which I expect would take more time).
Or we could just skip to second step if we don't think it will take too long.
Or we could just skip to second step if we don't think it will take too long.
🤔 I don't think it would take that long - we can both implement this to make implementation time even faster.
If might even be worth publishing this as a separate package, because this is useful in other applications.
we can both implement this to make implementation time even faster
Good point. I think making it a separate package is a good idea too.
Do you think using Slate makes sense?
I think spiking out whatever is quickest might be the way to go for now, which is likely Codemirror. The editor itself isn't as high impact as the visual side IMO (but we should definitely at least have a proper code editor), especially since we have plans to be able to embed Blocks in Code to augment the IDE experience.
This is definitely heavier than Codemirror, but I had brought up possibly using @monaco-editor/react in #221. Not sure how you feel about that @coffee-cup? The demo seems pretty nice as far as more advance visuals.
Future thinking if we go the monaco route is we could possibly ship a plugin for VSCode users that can read Blocks code.
I did mention possibly using monaco and it could be a good solution. I may be a bit bias because I had a not so good experience setting it up before (mostly related to webworkers and tsserver). However, the editor does seem to be improved and the monaco-editor/react demo is impressive. The possibility of advanced customization and even vscode editor extensions is really nice. I'll give it a go and report back 😄
@souporserious it was really easy to add (#244). Thanks for recommendation!