Feature Request: Embed Monaco editor

Duet3D / DuetWebControl

A completely new web interface for the Duet electronics

GNU General Public License v3.0

410 stars 229 forks source link

Feature Request: Embed Monaco editor #356

Closed pfn closed 1 year ago

pfn commented 3 years ago

Hey @chrishamm -- I'm not sure how the existing file editor works but all the keybindings and everything aren't obviously documented anywhere. It would be great if we could embed something like VS Code's monaco editor and use that instead, possibly open up being able to install editor plugins so that we could have our own choice of keybindings as well?

I saw that fluidd recently embedded monaco, and I think it's something that's worth taking up for DWC.

What do you think?

References: https://microsoft.github.io/monaco-editor/ https://github.com/cadriel/fluidd/releases/tag/v1.12.1 https://github.com/cadriel/fluidd/commit/b81dec4cc21bd6b6c59b35f97237d32ac85e7b7e

chrishamm commented 3 years ago

Thanks for pointing it out, it looks quite straight-forward to me. And I reckon it wouldn't take much effort to implement a G-code colorizer. However it does not support mobile devices, OTOH the current editor doesn't either.

TBH I haven't checked how editor plugins could be loaded but since we'll start supporting plugins in v3.3, editor plugins may be feasible too.

pfn commented 3 years ago

The fluidd commit linked has a gcode colorizer already, I don't know what the source license for that is offhand and if it's compatible here.

meteyou commented 3 years ago

monaco is a really huge editor. it blow up the frontend, thats why we switched to codemirror v6 in mainsail. its much lighter and it have full touch support.

here you can find more infos: https://codemirror.net/6/

chrishamm commented 3 years ago

@meteyou We're already using CodeMirror with a custom G-code mode in DWC but the current version isn't compatible with touch devices.

meteyou commented 3 years ago

@chrishamm yes, codemirror V5 haven't touch support, but V6 works fine with ipad, iphone and android phones.

pfn commented 3 years ago

Perhaps lets change this FR to be to update codemirror to v6 or newer.

chrishamm commented 3 years ago

@meteyou @pfn I've created a new branch v3.4-dev-cm6 which has experimental CodeMirror 6 support and the first impression was quite good. But unfortunately I do not regard it stable yet because of a few rather serious issues:

I was unable to get the on-screen keyboard working with it easily. The only input events I was able to emulate was Enter, but that's about it
Scrolling through longer files causes glitches/artifacts (you can see the content behind the dialog while scrolling)
Syntax highlighting doesn't work as well as with CM5 and it randomly stops working when scrolling through large files. Ideally the meanwhile deprecated "mode" should be replaced with a proper LR-Parser, but I don't have any good starting point or time for this. If anyone can find solutions for these problems, I'll be happy to merge it into one of the next DWC versions.

chrishamm commented 1 year ago

Monaco is now part of v3.5-dev.