search

UINDY-SWEN-200 / flaskGlowscriptHost

This is a flask based host application using Google Datastore for program persistence. This very nearly the same as the current application implementing www.glowscript.org.
0 stars 0 forks source link

Identify the places in the existing code where the interactions with the current editor happen, and implement the Monaco editor in the IDE. #3

Open sspickle opened 10 months ago

sspickle commented 10 months ago

Most of the interaction happens here

This issue is to read this code, identify what's going on, and formulate a plan to replace the editor with Monaco.

Ethan-Lohman commented 10 months ago

Where the editor is being interacted with seems to be in apiGet() function. Which loads in the ACE editor for the computer and the GSedit for mobile (Which I have no idea what or where that is coming from.).

apiGet({ if (Mobile device) { var editor = GSedit } else // Not mobile { var editor = ace.edit(page.find(".program-editor").get(0)); // A bunch of customization for the ACE editor like style, mode, etc. }})

Also here is public replit where I put comments on most lines to try and understand what was happening. You can see if it helps you guys understand it better, you can also edit it if you want if there is something I missed. The code is in the src/App.jsx.

sspickle commented 10 months ago

Good work Ethan!

The mobile editor implementation is here:

https://github.com/UINDY-SWEN-200/flaskGlowscriptHost/blob/c222d1dae43158d9042f26593fa6888ea8f51cfd/lib/editor.js#L1

The non-mobile editor implementation is described here:

https://github.com/UINDY-SWEN-200/flaskGlowscriptHost/blob/c222d1dae43158d9042f26593fa6888ea8f51cfd/lib/ace/FileSource.txt#L1

Of course Monaco is described here:

https://microsoft.github.io/monaco-editor/

The apiGet function is implemented here:

https://github.com/UINDY-SWEN-200/flaskGlowscriptHost/blob/c222d1dae43158d9042f26593fa6888ea8f51cfd/src/ide.js#L178

It's a little bit like the built-in fetch function we used in project 6, except that rather than returning a promise it accepts a callback function as a second argument as you describe.

You can see where it's switching between the non-mobile and mobile editor implementation here:

https://github.com/UINDY-SWEN-200/flaskGlowscriptHost/blob/c222d1dae43158d9042f26593fa6888ea8f51cfd/src/ide.js#L1424

Maybe we could set up a replit or a testing repo that could contain a skeleton implementation that you could use to familiarize yourselves with the monaco editor's configuration? Would that help?

sspickle commented 10 months ago

Remember that there is also an older svelte-kit implementation of a WASM based WebVPython editor/runner here that you can consult when designing the Monaco integration. This uses typescript and svelte-kit, so it's certainly not a copy/paste situation, but you can still learn a lot from this example.