How can I programmatically insert text into a Lexical Editor in React without losing focus?

Below is one common solution: prevent the button from stealing focus from the editor. If your editor loses focus when you click the button, the Lexical editor instance isn’t available for the update call. One way to prevent this is to handle the insertion on the button’s onMouseDown event and call event.preventDefault(). That way, the click won’t cause the editor to blur before you perform the update. For example:

---

JSXCopied
function createEditorInstance(myEditorID, initialValue) {
  const theEditorRef = useRef(null);

  const doInsertText = (someText) => {
    // Assuming that theEditorRef.current holds a reference to your Lexical editor instance
    // or the underlying DOM element that can trigger the focus.
    // Bring the editor into focused state:
    theEditorRef.current?.focus();

    // Now that the editor still has focus, update the editor.
    // Make sure you obtained the Lexical editor instance in your ref (via a proper onReady callback 
    // or similar pattern as recommended in Lexical's docs).
    editor.update(() => {
      const textNode = $createTextNode(someText);
      const selection = $getSelection();
      if (selection) {
        selection.insertNodes([textNode]);
      }
    });
  };

  return (
    <>
      <LexicalEditor
        id={myEditorID}
        initialValue={initialValue}
        toolbar={{ toolList: myToolList }}
        theEditorRef={theEditorRef}
      />
      
      {/* Use onMouseDown so the button click doesn’t steal focus */}
      <button
        onMouseDown={(e) => {
          e.preventDefault(); // Prevent the button from taking the focus away
          doInsertText('Some text string');
        }}
      >
        Insert Some Text
      </button>
    </>
  );
}

---

Explanation

1. Preventing Focus Loss:
   Using the onMouseDown event with e.preventDefault() prevents the button from stealing focus when clicked. This allows your Lexical editor to keep focus so that its instance (or context) remains available.

2. Using Refs:
   Make sure your Lexical editor component exposes its instance through a ref (for example via an onReady callback or similar mechanism). Then you can call methods like .update() even when your insertion action is triggered externally.

3. Updating the Editor:
   Once the focus is maintained, your code can safely call editor.update(…) to insert the text at the preserved selection.

This approach is similar in spirit to how React’s ref examples (like focusing a text input) work when you need to programmatically call focus on a DOM node. It is key here that the external action does not cause your editor to blur, so its internal state (like the active selection) stays available when you perform your text insertion.