combine several languages in one monaco editor

Question

I want to make monaco editor support JSX syntax. As we know, a typical JSX code can be like:

<Component style={{color: '#333'}} className='foo'>
    hello html
    {
       console.log('hello js')
    }
</Component>

What I want to achieve is that when the cursor is in style attr, the completion suggestions are about CSS, when in {}, it shows JS suggestions and in components suggestions are from HTML or some custom syntax.

I notice that there is an api called getLanguageIdAtPosition for monaco model. Seems like that there can be different languages for different positions. But no one mentioned this api ever so I don't know if this api can do any help and how to make it.