Listening for mode changes in vim extension

v6
1

I’m trying to listen for vim (@replit/codemirror-vim package) mode changes (codemirror v6) to update UI in response. I have a button to toggle between insert and visual modes (default mode is visual).

That’s the button onclick handler for switching between modes and it works fine:

const handleSwitchVimMode = (view: EditorView) => {
  const cm = getCM(view)

  if (!cm) return

  const isInsertMode = cm.state.keyMap === 'vim-insert'

  Vim.handleKey(cm, isInsertMode ? '<Esc>' : 'a')
}

But in my updateListener I cannot get valid mode name. That’s how I set up an event listener:

EditorView.updateListener.of((update: ViewUpdate) => {
  const {view} = update

  const cm = getCM(view)

  if (!cm) return

  console.log(cm.getMode(), cm.state.keyMap)
})

cm.getMode() always returns {name: undefined}.

cm.state.keyMap contains some information at least, but it’s invalid: when I’m in insert mode and click on the button, I’m still getting 'vim-insert' despite I’m successfully switched to visual mode.

NOTE: if I change doc afterwards (enter any symbol), it returns 'vim' which seems to be correct.

I’m not sure if it’s important, but I’m managing vim extension through compartment:

export const vimCompartment = new Compartment()

export function toggleVimExtension(view: EditorView, enableVim: boolean) {
  view.dispatch({
    effects: vimCompartment.reconfigure(enableVim ? vim() : [])
  })
}

const extensions = [
  ...
  vimCompartment.of([]),

  EditorView.updateListener.of((update: ViewUpdate) => {
    const {view} = update

    const cm = getCM(view)

    if (!cm) return

    console.log(cm.getMode(), cm.state.keyMap)
  }),
  ...
]

So my question is: how can I listen for vim mode changes and get relevant information about it. Please, can anyone point me in the right direction?