Expose Monaco Code Editor as a Web Component for Custom Extensions

[pbochynski]

Description
To enhance the extensibility of the Busola application, we need to expose the Monaco code editor as a web component. This will enable custom extensions to utilize the Monaco code editor within their own interfaces, providing a consistent and powerful editing experience.

Reasons
The code editor is required for the new version of serverless UI.

Acceptance Criteria

• Web Component Creation - The Monaco code editor is encapsulated as a web component that can be imported and used by custom extensions.
• Easy Integration—Documentation and examples demonstrate how to integrate and configure the Monaco code editor web component within custom extensions.
• Performance—The Monaco code editor web component's performance is optimised to ensure smooth integration and usage within custom extensions.
• Documentation - The documentation is updated to include detailed instructions on how to use and configure the Monaco code editor web component within custom extensions.

Attachments
PoC

[pbochynski]

Some ideas:

1. You can wrap your react components into web components
2. You can reuse existing web component wrappers for monaco editor like: https://github.com/hey-web-components/monaco-editor

[mrCherry97]

Also there is a problem with ObjectPage, because it is not a base webcomponent that external teams can reuse. We need to check how to expose our DynamicPageComponent as webcomponent.