How to add text programmatically with Lexical editor?

Question

I'm using draftjs so far and I like it but since draftjs is going to be retired I'm playing with lexical text editor. But I could not figure out even very basic thing, insert text programmatically.

How can I insert text programmatically? like draftjs's Modifier.insertText?

Thanks for advance. example codes or link to examples are very helpful.

Samples

Answer 1

editor.update does the trick: https://lexical.dev/docs/concepts/editor-state#updating-state

Here is a working example with React: https://codesandbox.io/s/lexical-update-d035dn?file=/src/Editor.js

Viridescent

Thanks! btw, how can I append text on existing paragraph? do we have an example for that? – Samples

Answer 2

Create a component that can benefit from the Lexical instance context.

import { $getSelection } from 'lexical'; 
import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';

const InsertText = () => {
      const [editor] = useLexicalComposerContext();
    
      useEffect(() => {
        editor.update(() => {
          const selection = $getSelection();
          if (selection) {
            selection.insertText('the text I wanted to insert');
          }
        });
      }, [editor]);
    
      return null;
    };

You can then add the component as child to the parent LexicalComposer provider.

Sialkot