[playground] Allow resizing of playground sections

[aralroca]

Related to #158

In the Brisa Playground code size, preview, and terminal are modifiable by developers.

[chankruze]

@enzonotario @aralroca should we use any external package or should we try with vanilla css ?

As we already have automatic layout set to true, here
https://github.com/chankruze/brisa/blob/a97caf0b0c7921308ac525282ff5d101620ed442/packages/www/src/pages/playground/index.tsx#L71

const editor = monaco.editor.create(document.querySelector('#code-editor'), {
    theme: document.body.classList.contains('dark') ? "vs-dark" : "vs-light",
        automaticLayout: true,
    });

[enzonotario]

I was trying to use an existing WebComponent (https://opensource.adobe.com/spectrum-web-components/components/split-view/), with no success so far.

I think it would be better to use an existing solution, because do it from zero, considering Responsive, Accessibility, etc, would be long.

Feel free to propose a solution. If not, I'll give it a try on weekend.

[Swayam29082004]

Fixed in #524
Fix Monaco Editor Initialization
This update ensures the Monaco Editor initializes only after the DOM content has fully loaded, using the DOMContentLoaded event listener. Additionally, requestAnimationFrame is used to defer the Monaco editor initialization, ensuring it's done after the layout is ready, which prevents issues when the editor is initialized too early. This solution improves reliability for dynamic page layouts and resizing scenarios.
document.addEventListener('DOMContentLoaded', () => { const container = document.querySelector('#code-editor'); if (container) { requestAnimationFrame(() => { const editor = monaco.editor.create(container, { theme: document.body.classList.contains('dark') ? "vs-dark" : "vs-light", automaticLayout: true, }); }); } });