search

materiahq / ngx-monaco-editor

Monaco Editor Library for Angular v6 and above
MIT License
159 stars 35 forks source link

Question About Using Monaco Plugin #42

Closed iwoloschin closed 3 years ago

iwoloschin commented 3 years ago

I'm trying to see if I can get support for Jsonnet in my project. I found a plugin that I believe should be useable (https://github.com/rakam-io/monaco-jsonnet), but I'm not entirely sure how to go about integrating these two things.

I suspect this request is somewhat out of scope for this project, if it is please feel free to disregard!

jmarc-roy commented 3 years ago

Hi @iwoloschin!

Interesting question, but unfortunately the repo you are pointing to is poorly documented for the moment, so I have no idea how it should be added to a current monaco editor instance. If you find more informations or an other plugin with a good documentation, we could consider looking further and add some examples.

iwoloschin commented 3 years ago

I asked one of the repo owners for some guidance, but I do not entirely understand their response. I'm hoping this is mostly due to my relative lack of experience with Angular/Typescript, maybe it makes more sense to you?

https://github.com/google/go-jsonnet/issues/295#issuecomment-735386197

There's a StackBlitz (originally copied from one of yours actually!) I made to try and experiment here, not sure if this would be helpful either. Mostly I just got some of the webpack stuff "working", but still do not really have any idea of how to link the two together.

https://stackblitz.com/edit/materia-ngx-monaco-editor-example-p7q2z8?devtoolsheight=33&file=src/app/app.component.ts

I do agree about the lack of documentation being somewhat frustrating. I think the only thing I can do there is brew some coffee and go try to understand the code better and make a PR for some better documentation. I have no clue how long that might take so if you want to close this issue in the meantime that is totally fine with me.

jmarc-roy commented 3 years ago

Hmm ok I see. Seems like you will not be able to do it works with our angular wrapper. Actually we don't use webpack to load monaco-editor. I think your approach is the right way to go, but you will have to implement your self some custom components. I'm just wondering what is your use case, because if you just want json schema validation, you can do it without this plugin (cf example linked on my answer: https://github.com/materiahq/ngx-monaco-editor/issues/44).

iwoloschin commented 3 years ago

I'm using Jsonnet to manage some processes. I was originally the only user, so I didn't have to worry too much "nice to have" things. The project has grown though and now there are a few other users and I'd like to implement some helpers, such as syntax highlight or even file validation/linting/etc. I found monaco-jsonnet while looking through some of the Jsonnet/go-jsonnet issues and it seemed like an obvious thing to try.

I believe for syntax highlighting I could just generate a custom syntax (here's an example from Jsonnet for codemirror). I could also probably just do validating/parsing/linting/etc server-side, I'm already sort of doing this, but it seemed like monaco-jsonnet could do a better job, if only I could figure out how to use it 😄.

jmarc-roy commented 3 years ago

Okay. Nice! So as already said our library in his current state will not be suitable for your use case. You should do everything with MonacoWebpackPlugin and a custom webpack config like you did on your stackblitz.

Doing some testing yesterday locally, I created a minimal example with latest angular version, but don't manage to have the plugin correctly working still have somme warning/error in the console. Here is the repository for this example: repo.

I think it's not far away from working as expected, some configurations must be missing somehow.

iwoloschin commented 3 years ago

Awesome, thanks for the help!