Best way to render html content inside the editor?

[diddiman]

So i have tried basically two/three ways with their own pros and con. And i was mostly just curious how would be the best way

I have viewzone that i add and then i add a content widget that kind of look like this

const contentWidget: monaco.editor.IContentWidget={
        getDomNode() {
            const node = componentRef.current
            node.style.width = "350px"  //need a way to set this dynamically
            node.style.height = '100%'; // Set height to 100% of the editor view
            return componentRef.current
        },
        getId() {
            return lineNumber.toString()
        },
        getPosition() {
            return {
                position: { lineNumber: lineNumber, column: 0},
                preference: [2]
            }  
        },

which works very well. However when i scroll and the content of my content widget is kind of half in/out it is not rendered, causing a big chunk of the viewzone to just be a white space

I have also tried using the same thing but also with

allowEditorOverflow: true,

which causes it to overflow downwards but still being not rendered when it is half in/out in the top.

I also tried to use a similar method to this #1781

const contentWidget: monaco.editor.IOverlayWidget={
        getDomNode() {
            const node = componentRef.current
            node.style.width = "350px"  //need a way to set this dynamically
            node.style.height = '100%'; // Set height to 100% of the editor view
            return componentRef.current
        },
        getId() {
            return lineNumber.toString()
        },
        getPosition() {
            return null
        },
    }


    useEffect(() => {
        componentRef.current.style.top = `${viewZoneTop}px`;
        if(editor) {
            const layout = editor.getLayoutInfo()
            componentRef.current.style.left = `${layout.decorationsLeft + 5}px`;
            componentRef.current.style.width = `${layout.width - layout.decorationsLeft - 5}px`;
        }
        
    }, [viewZoneTop])

....

editor.changeViewZones((acc) => {
                if (selfId) {
                    acc.removeZone(selfId)
                }
                const self = acc.addZone({
                    afterLineNumber: lineNumber,
                    get heightInPx() {
                        return sizeRef.current.getBoundingClientRect().height
                    },
                    domNode: emptyRef.current,
                    onDomNodeTop: (top) => { setViewZoneTop(top); },
                })
                selfIdRef.current = self
                setSelfId(self)
            })

            editor.addOverlayWidget(contentWidget)

and that kind of works, with the problem being that scrolling (clicking the scrollbar and dragging) feels almost like there is some rubber band effect going on. Included a clip so you can see
Screencast from 2024-04-23 16-09-29.webm

Any tips or advice on how to do it in the best way?