Editor State

/**
 * The editor state class is a persistent (immutable) data structure.
 * To update a state, you create a transaction, which produces a new state
 * instance, without modifying the original object.
 */
class EditorState {
  /** Create a new state */
  static create(config?: EditorStateConfig): EditorState;
  
  /** Create a transaction that updates this state */
  update(...specs: readonly TransactionSpec[]): Transaction;
  
  /** The current document */
  readonly doc: Text;
  
  /** The current selection */
  readonly selection: EditorSelection;
  
  /** Retrieve the value of a state field */
  field<T>(field: StateField<T>): T;
  field<T>(field: StateField<T>, require: false): T | undefined;
  
  /** Get the value of a state facet */
  facet<Output>(facet: FacetReader<Output>): Output;
  
  /** The size (in columns) of a tab in the document */
  get tabSize(): number;
  
  /** Get the proper line-break string for this state */
  get lineBreak(): string;
  
  /** Returns true when the editor is configured to be read-only */
  get readOnly(): boolean;
}

interface EditorStateConfig {
  /** The initial document. Defaults to an empty document */
  doc?: string | Text;
  /** The starting selection. Defaults to a cursor at the very start */
  selection?: EditorSelection | {anchor: number, head?: number};
  /** Extension(s) to associate with this state */
  extensions?: Extension;
}

import { EditorState, Text, EditorSelection } from "@codemirror/state";

// Create a basic state
const state = EditorState.create({
  doc: "Hello, world!"
});

// Create state with custom selection
const stateWithSelection = EditorState.create({
  doc: "Hello, world!",
  selection: EditorSelection.single(5, 12) // Select "world"
});

// Create state with Text object
const textDoc = Text.of(["Line 1", "Line 2", "Line 3"]);
const stateWithText = EditorState.create({
  doc: textDoc,
  selection: EditorSelection.cursor(0)
});

/**
 * Create a transaction spec that replaces every selection range with the given content
 */
replaceSelection(text: string | Text): TransactionSpec;

/**
 * Create a set of changes and a new selection by running the given function
 * for each range in the active selection
 */
changeByRange(f: (range: SelectionRange) => {
  range: SelectionRange,
  changes?: ChangeSpec,
  effects?: StateEffect<any> | readonly StateEffect<any>[]
}): {
  changes: ChangeSet,
  selection: EditorSelection,
  effects: readonly StateEffect<any>[]
};

/**
 * Create a change set from the given change description
 */
changes(spec?: ChangeSpec): ChangeSet;

/**
 * Using the state's line separator, create a Text instance from the given string
 */
toText(string: string): Text;

/**
 * Return the given range of the document as a string
 */
sliceDoc(from?: number, to?: number): string;

// Replace selection with new text
const replaceSpec = state.replaceSelection("replacement text");
const newState = state.update(replaceSpec).state;

// Transform each selection range
const multiChange = state.changeByRange(range => ({
  changes: { from: range.from, to: range.to, insert: range.empty ? "X" : "" },
  range: EditorSelection.cursor(range.from + (range.empty ? 1 : 0))
}));
const transformedState = state.update(multiChange).state;

// Create changes manually
const changeSet = state.changes([
  { from: 0, to: 5, insert: "Hi" },
  { from: 10, insert: " there" }
]);

/**
 * Convert this state to a JSON-serializable object
 */
toJSON(fields?: {[prop: string]: StateField<any>}): any;

/**
 * Deserialize a state from its JSON representation
 */
static fromJSON(
  json: any, 
  config?: EditorStateConfig, 
  fields?: {[prop: string]: StateField<any>}
): EditorState;

/**
 * Look up a translation for the given phrase, or return the original string
 * if no translation is found
 */
phrase(phrase: string, ...insert: any[]): string;

/**
 * Find the values for a given language data field
 */
languageDataAt<T>(name: string, pos: number, side?: -1 | 0 | 1): readonly T[];

/**
 * Return a function that can categorize strings into Word, Space, or Other
 */
charCategorizer(at: number): (char: string) => CharCategory;

/**
 * Find the word at the given position
 */
wordAt(pos: number): SelectionRange | null;

/**
 * A facet that, when enabled, causes the editor to allow multiple ranges to be selected
 */
static allowMultipleSelections: Facet<boolean, boolean>;

/**
 * Configures the tab size to use in this state. Defaults to 4.
 */
static tabSize: Facet<number, number>;

/**
 * The line separator to use. By default, any of "\n", "\r\n" and "\r" is treated as a separator
 */
static lineSeparator: Facet<string, string | undefined>;

/**
 * This facet controls the value of the readOnly getter
 */
static readOnly: Facet<boolean, boolean>;

/**
 * Registers translation phrases
 */
static phrases: Facet<{[key: string]: string}>;

/**
 * A facet used to register language data providers
 */
static languageData: Facet<(state: EditorState, pos: number, side: -1 | 0 | 1) => readonly {[name: string]: any}[]>;

/**
 * Facet used to register change filters
 */
static changeFilter: Facet<(tr: Transaction) => boolean | readonly number[]>;

/**
 * Facet used to register a hook that gets a chance to update or replace transaction specs
 */
static transactionFilter: Facet<(tr: Transaction) => TransactionSpec | readonly TransactionSpec[]>;

/**
 * This is a more limited form of transactionFilter, which can only add annotations and effects
 */
static transactionExtender: Facet<(tr: Transaction) => Pick<TransactionSpec, "effects" | "annotations"> | null>;

/**
 * Subtype of Command that doesn't require access to the actual editor view
 */
type StateCommand = (target: {state: EditorState, dispatch: (transaction: Transaction) => void}) => boolean;

/**
 * Extension values can be provided when creating a state to attach various kinds of configuration
 */
type Extension = {extension: Extension} | readonly Extension[];