Setting up an editor

Setting up a full editor ‘from scratch’, using only the core libraries, requires quite a lot of code. To be able to get started quickly with a pre-configured editor, we provide the prosemirror-example-setup package, which creates an array of plugins for you, configured to create a passable editing interface for a given schema. In this example, we use the basic schema and extend it with lists.

import {EditorState} from "prosemirror-state"
import {EditorView} from "prosemirror-view"
import {Schema, DOMParser} from "prosemirror-model"
import {schema} from "prosemirror-schema-basic"
import {addListNodes} from "prosemirror-schema-list"
import {exampleSetup} from "prosemirror-example-setup"

// Mix the nodes from prosemirror-schema-list into the basic schema to
// create a schema with list support.
const mySchema = new Schema({
  nodes: addListNodes(schema.spec.nodes, "paragraph block*", "block"),
  marks: schema.spec.marks
})

window.view = new EditorView(document.querySelector("#editor"), {
  state: EditorState.create({
    doc: DOMParser.fromSchema(mySchema).parse(document.querySelector("#content")),
    plugins: exampleSetup({schema: mySchema})
  })
})

And this is what it looks like:

These plugins are created by the example setup:

• Input rules, which are input macros that fire when certain patterns are typed. In this case, it is set up to provide things like smart quotes and some Markdown-like behavior, such as starting a blockquote when you type “> ”.
• Keymaps with the base bindings and custom bindings for common mark and node types, such as mod-i to enable emphasis and ctrl-shift-1 to make the current textblock a heading.
• The drop cursor and gap cursor plugins.
• The undo history.
• A menu bar (which is another module that is meant more for demos than for production), with menu items for common tasks and schema elements.

Many ProseMirror packages come with a CSS file (linked under the "style" field in package.json). You must make sure to load these into the document that contains your editor. Some bundlers will help you with this, but if they don't, either create link tags like below, or make sure these files get concatenated into your bundled CSS.

<link rel=stylesheet href="path/prosemirror-view/style/prosemirror.css">
<link rel=stylesheet href="path/prosemirror-menu/style/menu.css">
<link rel=stylesheet href="path/prosemirror-example-setup/style/style.css">
<link rel=stylesheet href="path/prosemirror-gapcursor/style/gapcursor.css">