@codemirror/state

Creating an Editor State

This feature allows for the initialization of an editor state with a starting document. The document can be a string or a more complex structure for representing text.

{
  import {EditorState} from '@codemirror/state';
  const state = EditorState.create({doc: 'Hello, world!'});
}

Updating the State

This demonstrates how to update the state by creating a transaction. In this example, the text 'Hello' is replaced with 'Goodbye'. Transactions can include changes to the document, selections, and other state aspects.

{
  import {EditorState, Transaction} from '@codemirror/state';
  let newState = state.update({changes: {from: 0, to: 5, insert: 'Goodbye'}}).state;
}

Reading the State

This feature is about accessing the current content of the editor. It shows how to convert the document in the state to a string, which can be useful for saving the content or displaying it elsewhere.

{
  import {EditorState} from '@codemirror/state';
  const content = state.doc.toString();
}