Render other VSCode UI view parts

[boan-anbo]

Hi there! I have a question about rendering editor parts (e.g. editor group view and side bar) other than the single tab.

I have a working React component set-up similar to monaco-vscode-api's demo where I attach the default VSCode UI parts one by one like so:

     // initiaze our vscode ui by assigning the refs to the corresponding DOM elements
     // and handle their visibility.
        for (const {part, element} of [
            {part: Parts.TITLEBAR_PART, element: titleBarRef.current},
            {part: Parts.BANNER_PART, element: bannerRef.current},
            {part: Parts.SIDEBAR_PART, element: sideBarRef.current},
            {
                part: Parts.ACTIVITYBAR_PART,
                element: activityBarRef.current
            },
            {
                part: Parts.EDITOR_PART,
                element: editorPartRef.current
            }, {part: Parts.STATUSBAR_PART, element: statusBarRef.current}, {
                part: Parts.AUXILIARYBAR_PART,
                element: auxiliaryBarRef.current
            }
        ]) {
            attachPart(part, element!)

            if (!isPartVisibile(part)) {
                element!.style.display = 'none'
            }

            onPartVisibilityChange(part, visible => {
                element!.style.display = visible ? 'block' : 'none'
            })
        } 

I need the editors view of EditorPart which allows multiple tabs and split views and the file system sidebar to view mounted files.

I wonder if it's possible with monaco-editor-react.

I'd really like to use monaco-editor-react UserConfig API etc but I also need the views. Please kindly advise. Thanks!

[kaisalmen]

Hi @boan-anbo you can add any monaco-vscode-api service you need (like here), so you could configure everything you require from the official demo. I don't know if setting up the DOM elements need to happen in between service init and monaco start (like in the demo) or if it can be done before. I guess so this order should be no problem. Currently init and start are performed together in the wrapper/react component without the possibility to do something in betweeen.

[boan-anbo]

Thanks so much! I just tried and attached parts hooking onto the MonacoEditorReactComp's onLoad and it can render the Parts without problem with the ViewsServiceOverride.

  <MonacoEditorReactComp
                userConfig={userConfig}
                style={{
                    'paddingTop': '5px',
                    'height': '200px'
                }}
                onLoad={() => {

                    // initiaze our vscode ui by assigning the refs to the corresponding DOM elements
                    // and handle their visibility.
                    for (const {part, element} of [
                        {part: Parts.TITLEBAR_PART, element: titleBarRef.current},
                        {part: Parts.BANNER_PART, element: bannerRef.current},
                        {part: Parts.SIDEBAR_PART, element: sideBarRef.current},
                        {
                            part: Parts.ACTIVITYBAR_PART,
                            element: activityBarRef.current
                        },
                        // {part: Parts.PANEL_PART, element: panelRef.current},
                        {
                            part: Parts.EDITOR_PART,
                            element: editorPartRef.current
                        }, {part: Parts.STATUSBAR_PART, element: statusBarRef.current}, {
                            part: Parts.AUXILIARYBAR_PART,
                            element: auxiliaryBarRef.current
                        }
                    ]) {
                        attachPart(part, element!)

                        if (!isPartVisibile(part)) {
                            element!.style.display = 'none'
                        }

                        onPartVisibilityChange(part, visible => {
                            element!.style.display = visible ? 'block' : 'none'
                        })
                    }

                }}
            />

As shown above, I guess I just need to fork the wrapper and disable createEditors which currently creates an editor outside the EditorsGroup part independently rendered through monaco-vscode-api's getPart

[kaisalmen]

@boan-anbo I will make the split of init and start available as option in the wrapper and therefore re-open this issue.

[boan-anbo]

That'd be awesome! Thanks in advance

[kaisalmen]

@boan-anbo I have opened PR #59 There are new preview releases available: https://github.com/TypeFox/monaco-components/pull/59#issuecomment-1802207636

[boan-anbo]

Thanks so much! Will try it soon and report back.

[kaisalmen]

@boan-anbo I consider this to be no longer and issue.

[boan-anbo]

@kaisalmen Thanks so much! Sorry that I didn't get to test it as I later had to switch to non-monaco editors, but really appreciated it!