Is it possible to dynamically insert new React Components within the SlateJS Editor context on key down or on key change?

[MeikyuuTrader]

I wanted to add a new react component each time someone uses /

From the rich text examples, most of it involves transforming the current div to be something else. Or the toolbar examples, that would add itself above the editable context.
However, I want to add a new react component whilst someone is typing without exiting the slatejs editor. Each new line inserts a new div into the DOM and immediately after they can continue typing like normal. I want something similar except I'll be inserting my react component.

Eg, imagine a text input like

My text content. Triggerred a keydown event in the next line
REACT COMPONENT INSERTED HERE
Continued slatejs text editor 
...

    <Slate
        editor={editor}
        value={value}
        onChange={value => setValue(value)}>
        <Editable
            placeholder="Enter some rich text…"
            spellCheck
            autoFocus
            onKeyDown={event => {
                switch (event.key) {
                    case '/': {
                        event.preventDefault()
                        // Don't work, can't insert my tags react component into the dom with Editor. 
                        Editor.insertNode(editor, <Tags />)
                        // Returning the tags component doesn't work either. 
                        return <Tags /> 
                    }
                }
            }}
        />
    </Slate>

Potential Solutions

My current thoughts are I could dynamically inject a new react component into the DOM. However, I don't actually know where it should be added. Since each new line in SlateJS inserts another <div> and I want it underneath the current SlateJS DOM element. Not underneath the editor itself.

Another thought was I'd get the current element when onkeydown is /, then insert the react component directly under there. Or get the parent, get the id of the current element (since everything is in the parent slate div) and insert a new react component at array index [id + 1].

[MeikyuuTrader]

Given nobody has replied, I'm assuming it's generally not possible with default SlateJS behaviour. You can easily insert a component above or below the slatejs editor.

It seems you can insert into the slatejs div via react/javascript. However, there's very funky behaviour, like inserting new lines positions the component strangely.

[dylans]

It's certainly possible. Plate (a collection of Slate plugins) has a few good examples. For example the media-embed plugin shows an example of inserting an iframe with a form field as react components. This example inserts it as a block element immediately after the current selection.

[MeikyuuTrader]

Hmm, that example isn't overly obvious. It just seems to insert a new node that's void and is an element.

  insertNodes<TElement>(
    editor,
    {
      type: key,
      url,
      children: [{ text: '' }],
    },
    { at: path }
  );