How to convert the output of editorState to plain text?

[charklewis]

I am looking to convert the content in my editor to plain string file. Is this possible with any current plugins or utilities?

So for example this:

{"_nodeMap":[["root",{"__children":["1","3"],"__dir":"ltr","__format":0,"__indent":0,"__key":"root","__parent":null,"__type":"root"}],["1",{"__type":"paragraph","__parent":"root","__key":"1","__children":["2"],"__format":0,"__indent":0,"__dir":"ltr"}],["2",{"__type":"text","__parent":"1","__key":"2","__text":"hello world","__format":0,"__style":"","__mode":0,"__detail":0}],["3",{"__type":"paragraph","__parent":"root","__key":"3","__children":["4"],"__format":0,"__indent":0,"__dir":"ltr"}],["4",{"__type":"text","__parent":"3","__key":"4","__text":"bold hello world","__format":1,"__style":"","__mode":0,"__detail":0}]],"_selection":{"anchor":{"key":"4","offset":16,"type":"text"},"focus":{"key":"4","offset":16,"type":"text"},"type":"range"}}

Would be represented as:

hello world hello world bold

[thegreatercurve]

I think getTextContent on the root node should produce what you need i.e.:

import {
  $getRoot,
} from 'lexical';

// ... 

const stringifiedEditorState = JSON.stringify(
  editor.getEditorState().toJSON(),
);
const parsedEditorState = editor.parseEditorState(stringifiedEditorState);

const editorStateTextString = parsedEditorState.read(() => $getRoot().getTextContent())

[charklewis]

@thegreatercurve this is exactly it! Thanks.

[pehrlich2]

I ended up doing this when my form is submitted:

const editorState = editorRef.current.getEditorState();
formJson.plaintextContent = editorState._nodeMap.get('root').__cachedText

In had to use __cachedText because if I used getTextContent it threw Uncaught Error: Unable to find an active editor. This method can only be used synchronously during the callback of editor.update. I think this may be okay as we're in the form submission phase here and no more edits are being done..

[jsakas]

This worked for me:

editor.getRootElement()?.textContent

[laulautrup]

This does not seem to include the text of HeadingNodes. Anyone knows how to include those?

[laulautrup]

My error. Failed to include the nodes when I created the editor.

[newfish-cmyk]

In practice, it seems that the code given by the answer will add extra blank lines🧐?
So I tried to manually convert editorstate to text, and it seems to be working fine.

function editorStateToText(editor) {
  const editorStateTextString = [];
  const paragraphs = editor.getEditorState().toJSON().root.children;
  paragraphs.forEach((paragraph) => {
    const children = paragraph.children;
    const paragraphText = [];
    children.forEach((child) => {
      if (child.type === 'linebreak') {
        paragraphText.push('
');
      } else if (child.text) {
        paragraphText.push(child.text);
      }
    });
    editorStateTextString.push(paragraphText.join(''));
  });
  return editorStateTextString.join('
');
}

[jackple]

RichTextPlugin will add extra blank lines when text copied from somewhere

[jackple]

issue
#6783 (comment)