[Improvement]: Add code editor to the Dockerfile and Docker Composer UI

[MMTE]

this PR is in regard to improvement request in #2607 which was asked for adding a code editor like Monaco for dockerfile and docker-compose files.

/claim #2607

some quick notes:

• personally I'm not a fan of microsoft/monaco-editor but it's personal opinion. maybe considering CodeMirror wouldn't be a bad choice too.

• for proof of work two examples added. one in pure Dockerfile service creation and another in docker-compose service creation.

• here are some screen shots:
  

• syntax can be injected as parameter e.g here one is dockerfile and another is yaml.

• personally I believe some enhancements maybe needed.

[Thijmen]

Love this contribution, great work!

[andrasbacsai]

Thank you @MMTE! Love this. I will tweak it a bit, mostly the colors.

[MMTE]

Thanks for your kind reply. Honestly, it was an attempt to contribute, but I would like to add some details for those who aim to make more tweaks:

Monaco by default supports the Vite bundler. Here is the relevant documentation: Configuring Monaco with Vite.

I compiled the code, and the compilation was successful. However, I couldn't access the Monaco instance after compiling, even when using @vite(['resources/js/monaco-editor.js']) in my component.

Consider that I was exporting Monaco as a module in the monaco-editor.js file. It was compiled, and I added it to my component using the @vite(...) tag. Despite this, I wasn't able to initiate a new instance of Monaco in the component. This might be due to my limited knowledge, but I'm mentioning it in case someone wants to go further and use an npm-installed package instead of a CDN.

Overall, it was a nice experience. Coolify is a really nice open-source project.