prosemirror-state

What is prosemirror-state?

The prosemirror-state package is a part of the ProseMirror toolkit, which is used to manage the state of a ProseMirror editor. It provides a way to represent the editor's state, including the document, selection, and any other metadata. This package is essential for creating and manipulating the state of a ProseMirror editor, allowing for complex text editing functionalities.

What are prosemirror-state's main functionalities?

EditorState

The EditorState class is used to create and manage the state of the editor. This includes the document, selection, and any other metadata. The code sample demonstrates how to create an EditorState instance using a schema and a document parsed from the DOM.

const { EditorState } = require('prosemirror-state');
const { Schema, DOMParser } = require('prosemirror-model');

const schema = new Schema({
  nodes: {
    doc: { content: 'block+' },
    paragraph: { content: 'text*', toDOM: () => ['p', 0] },
    text: { inline: true }
  }
});

const doc = DOMParser.fromSchema(schema).parse(document.querySelector('#content'));
const state = EditorState.create({ doc });
console.log(state);

Transaction

Transactions are used to apply changes to the editor state. The code sample demonstrates how to create a transaction that inserts text into the document and then apply that transaction to the state.

const { EditorState, Transaction } = require('prosemirror-state');
const { Schema, DOMParser } = require('prosemirror-model');

const schema = new Schema({
  nodes: {
    doc: { content: 'block+' },
    paragraph: { content: 'text*', toDOM: () => ['p', 0] },
    text: { inline: true }
  }
});

const doc = DOMParser.fromSchema(schema).parse(document.querySelector('#content'));
let state = EditorState.create({ doc });

let tr = state.tr.insertText('Hello, world!', 1, 1);
state = state.apply(tr);
console.log(state.doc.content);

Plugin

Plugins allow you to extend the functionality of the editor. The code sample demonstrates how to create a plugin that logs keydown events and add it to the editor state.

const { EditorState, Plugin } = require('prosemirror-state');
const { Schema, DOMParser } = require('prosemirror-model');

const schema = new Schema({
  nodes: {
    doc: { content: 'block+' },
    paragraph: { content: 'text*', toDOM: () => ['p', 0] },
    text: { inline: true }
  }
});

const doc = DOMParser.fromSchema(schema).parse(document.querySelector('#content'));

const myPlugin = new Plugin({
  props: {
    handleDOMEvents: {
      keydown(view, event) {
        console.log('A key was pressed:', event.key);
        return false;
      }
    }
  }
});

const state = EditorState.create({ doc, plugins: [myPlugin] });
console.log(state);

Other packages similar to prosemirror-state

draft-js

Draft.js is a framework for building rich text editors in React. It provides a similar set of functionalities for managing editor state, but is more tightly integrated with React. Unlike ProseMirror, which is framework-agnostic, Draft.js is specifically designed for use with React.

slate

Slate is another framework for building rich text editors in React. It offers a more flexible and customizable approach compared to Draft.js, allowing developers to define their own schema and plugins. Like ProseMirror, Slate provides fine-grained control over the editor state and document structure.

quill

Quill is a powerful, free, open-source WYSIWYG editor. It provides a high-level API for managing editor state and content, but does not offer the same level of low-level control as ProseMirror. Quill is more focused on providing a ready-to-use editor with a rich set of features out of the box.

README

prosemirror-state

[ WEBSITE | ISSUES | FORUM | GITTER | CHANGELOG ]

This is a core module of ProseMirror. ProseMirror is a well-behaved rich semantic content editor based on contentEditable, with support for collaborative editing and custom document schemas.

This module implements the editor state, which tracks the current document and selection, and managed plugins.

The project page has more information, a number of examples and the documentation.

This code is released under an MIT license. There's a forum for general discussion and support requests, and the Github bug tracker is the place to report issues.

We aim to be an inclusive, welcoming community. To make that explicit, we have a code of conduct that applies to communication around the project.

Changelog

1.4.0 (2022-05-30)

Bug fixes

Creating a TextSelection with endpoints that don't point at inline positions now emits a warning. (It is technically an error, but crashing on it might be too disruptive for some existing setups.)

New features

Include TypeScript type declarations.