ProseMirror demo page   mark

Demonstration Text

In a ProseMirror document, you can have the usual strong and emphasized text, code font, and links. There are also images: .

Column one	Column two
11	"foo"
32	"xyz"

On the block level you can have:

1. Ordered lists (such as this one)
2. Bullet lists
3. Blockquotes
4. Code blocks
5. Horizontal rules

That is about it, though you can also bind extra commands and menu items that insert custom raw HTML blocks. These are not editable inside the editor, only though site-defined interface elements.

---

The Interface

The current interface will show a widget for inline styling when you select a piece of text. It will keep a “hamburger button” floating to the right of the currently focused block, though which you can manipulate block-level structure.

There are also a number of keys bound to commands, which can be customized. Here are a few examples:

• Ctrl-B and Ctrl-I for strong and emphasized
• Alt-Left to dedent a block
• Alt-Up to join it to a similar block above it

• Alt-Right plus a second keypress to wrap a block

  • “*” for bullet list
  • “1” for numbered list
  • “>” for blockquote
• Ctrl-Enter to insert a hard break
• Ctrl-Z and Ctrl-Y to un- and redo

And finally, there is support for defining “input rules” where some types of typed input cause something to happen. This demo has automatic quotes enabled, so that when you type single or double quotes in a non-code context, they'll be converted to the appropriate Unicode quote, and allows you to start a list or a quote by typing “>”, “*”, or “1.”, followed by a space, at the start of a paragraph.

---

The Model

Blockquotes and lists can nest arbitrarily deep. Thus, the document forms a tree, not dissimilar to the browser's DOM tree.

At the inline level, the model works differently. Each block of text is a single node containing a flat series of inline elements. These are serialized as a tree structure when outputting HTML.

Positions in the document are represented as a path (an array of offsets) through the block tree, and then an offset into the inline content of the block. Blocks that have no inline content (such as horizontal rules and HTML blocks) can not have the cursor inside of them. User-exposed operations on the document preserve the invariant that there is always at least a single valid cursor position.

---

Examples

We did not see a nested blockquote yet.

Nor did we see a code block

Note that the content of a code block can't be styled.

This paragraph has
a hard break inside of it.