Extending the document model

Imagine we need to include exotic, site-specific elements in our documents. These may be handles to other objects in our system (documents, users, etc), domain-specific widgets, or, in the case of this demo, dinosaurs.

ProseMirror allows you to define custom document elements, along with serialization and parsing methods to convert them to and from the document formats you are interested in. These then become proper semantic element in your document format.

In the editor below, dinosaurs are first-class elements in the document model. They can appear anywhere where text can appear.

Dinos in the Document

The full source code for this demo is here.

Note: The schema API allows for more powerful things than this, such as adding nodes with content, or completely redefining the document structure.

Next demo: writing custom node views.