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:
- Ordered lists (such as this one)
- Bullet lists
- Blockquotes
- Code blocks
- 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-BandCtrl-Ifor strong and emphasizedAlt-Leftto dedent a blockAlt-Upto join it to a similar block above itAlt-Rightplus a second keypress to wrap a block- “*” for bullet list
- “1” for numbered list
- “>” for blockquote
Ctrl-Enterto insert a hard breakCtrl-ZandCtrl-Yto 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.