How to replace selected text in MDXEditor via a custom toolbar button and async operation?

[Hlopa]

I'm trying to implement a custom toolbar button that replaces the selected text in the editor with a modified version, returned from an async API call. The flow I want is:

1. User selects some text
2. User clicks the custom button
3. The button sends the selected text to an API and receives a markdown string in response
4. The selected text gets replaced with the response

The button is added through toolbarPlugin({ toolbarContents }). Here's a simplified version of the button code I tried:

const CustomButton: React.FC<{ editorRef: React.RefObject<MDXEditorMethods> }> = ({ editorRef }) => {
  const handleClick = () => {
    const lexicalEditor = (editorRef.current as any)?.editor
    if (!lexicalEditor) return

    lexicalEditor.update(async () => {
      const selection = $getSelection()
      if (!$isRangeSelection(selection) || selection.isCollapsed()) {
        console.warn("Please select text first")
        return
      }

      const selectedText = selection.getTextContent()

      const response = await fetch("/api/process", {
        method: "POST",
        body: JSON.stringify({ input: selectedText }),
        headers: { "Content-Type": "application/json" },
      })

      const { result } = await response.json()
      selection.insertRawText(result)
    })
  }

  return <button onClick={handleClick}>My button</button>
}

This doesn’t work properly because editorRef.current?.editor seems to be internal and not part of the public MDXEditorMethods API, so TypeScript complains, and sometimes the runtime does too. I also tried using LexicalComposerContext in the toolbar plugin, but that caused the "cannot find a LexicalComposerContext" error — presumably because toolbarContents is rendered outside of the Lexical context.

I also tried using a custom Lexical command and dispatching it from the button, registering it inside the MDXEditorComponent, but still couldn’t get it to work as expected.

Any guidance or examples would be greatly appreciated! 🙏

[petyosi]

You can grab the current Lexical editor through the Gurx hooks. This will return the root editor (usually), or the nested ones, in case you're using nested editors. You can also use rootEditor$. All of those are exported from the package.

const activeEditor = useCellValue(activeEditor$)

[Hlopa]

Thank you, that helped a lot!