Is there a way to programatically trigger a combobox trigger? Or show it without a trigger?

[reinvanimschoot]

Hey everyone

We are implementing a Notion-like editor where we have gutter menu with a Plus button that adds an empty paragraph underneath the current element. Ideally, this new paragraph would open up the element menu that you normally get when typing a '/' but without adding an explicit '/' in said paragraph.

However, it doesn't look like a combobox can be triggered programatically. So I tried adding a paragraph with a '/' inside and even added afterwards using insertText, but both solutions do not seem to work.

Is there anyone else who has a similar experience? Ideally, I would be able to open the combobox by using a sort of flag or the presence of a specific inline element, rather than typing a trigger.

[TrySpace]

I'm struggling to achieve the same thing. And the tight coupling with the custom store is not making it easier.

I've got as far as this (from the Plate onChangeCombobox source)

const test = (pluginKey: string) => {
  const byId = comboboxSelectors.byId()     
  const plugin = byId[pluginKey] 
  const id = store.get.id()

  const { selection } = editor

  comboboxActions.open({
    activeId: id,
    text: '',
    targetRange: selection,
  })

  // I can focus the editor, but it does not focus the combobox input
  focusEditor(editor)
}

The only thing this does is open the initial combobox. But the text change does not trigger, so what I would then manually have to do afterwards is modifying the text of the store, but when? Every keystroke (which is how the original onChangeCombobox works) ? How do I then determine if it's open? Then I'd feel like I was rebuilding all the functionality again, just because the original combobox did not have this usecase...

With inserting a link I can use something like: triggerFloatingLink

(Also see: #1305 (comment))

Update

What I could do is something like this:

handlers: {   
      onChange: (e) => {     
        const isOpen = comboboxSelectors.isOpen()
        if (isOpen) {
          comboboxActions.text('z')
        }
      },
    },

This indeed changes the store.text
But then how to get the "last typed text since opening the combobox"? Unless there is a special helper this is not a good idea to start implementing...

Sandbox Reproduction:

https://codesandbox.io/s/sandpack-project-forked-80y6h6?file=/App.tsx

What I've noticed now is that there is no MentionInputElement rendered in the place of the cursor, I'm wondering if there is some onChange handler there to update the text?

Update 2

Putting this in before focusEditor, it does work:

 insertNode(editor, {
      type: ELEMENT_MENTION_INPUT,
      children: [{ text: '' }],
      trigger: '@',
      creationId: 'main',
    })

Updated sandbox: https://codesandbox.io/s/sandpack-project-forked-qdh8sq?file=/Toolbar.tsx