We have almost completed work on moving the Code Editor from Code Mirror to Monaco, the same editor that powers the ever popular, Visual Studio Code.
With this upgrade, it will give developers:
- Much better performance, especially with large text files
- More editing functionality through the command palette
- Mouse driven features such as Cmd/Ctrl + Click to jump to definition, hover for documentation and a context menu!
There will be some small differences which will include:
- Syntax color changes as we’ve opted to use Monaco’s default theme, which should be comfortably familiar to VS Code users
- Some hotkeys/shortcuts will be different (e.g moving a line up/down)
When can we use it?
We are still working through a few issues but planning to release the Editor as early as next week. Keep your eyes peeled!
Will we be able to change our color/theme to match what was previous, or better just be able to customize so I can have monokai?
It’s on the list to work through but for the current term, unfortunately it’s set to be the default. Maybe a feature request to have customisable themes?
Will we be able to change the standard code template that comes when creating a new script?
No, this feature request has not been worked on yet unfortunately. Could you make a feature request on https://github.com/playcanvas/editor/issues please so that we can track this 🙂
will do! I’m already looking forward to this update 😀
I second the custom colours for syntax highlighting.
Having them changed on me really affects my coding/debugging as I daily switch between different editors.
Update: We added a theme selector for Monaco that covers the most common themes: https://github.com/playcanvas/editor/releases/tag/v1.20.4
Looks fab, but two things I find slightly annoying so far:
1. Page up/down no longer moves a screen-full, but depends on where the cursor is. So pressing PageUp and then PageDown will not land you where you were.
2. Undoing does not ensure the changed lines are visible. It just makes the changes outside the view.
1. I’m not sure I understand. Would it be possible to post a video on https://github.com/playcanvas/editor/issues please? We should be doing the same as VS Code defaults.
2. We have a ticket in place for this 🙂 : https://github.com/playcanvas/editor/issues/606
1. Not sure I can show it with a video. In some editors whenever I press page up (or down) the whole visible segment moves an entire screen-height along with the cursor. This way, when I press page down (or up) afterwards, it will return to exactly where I started. This allows quick navigation by eg pressing page up 3 times to check params for a function, then page down three times to land where you started with the same focus, so you don’t get disoriented. I checked in VS Code and I have an extention installed called “Better PageUp / PageDown”, so it’s not default behavior, forgot that 🙂