prosemirror-example-setup

[ WEBSITE | ISSUES | FORUM | GITTER ]

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

This module provides an example of the glue code one might write to tie the modules that make up ProseMirror into an actual presentable editor. It is not meant to be very reusable, though it might be helpful to get something up-and-running quickly.

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.

Documentation

This module exports the following items:

exampleSetup(options: Object) → [Plugin]

Create an array of plugins pre-configured for the given schema. The resulting array will include the following plugins:

• Input rules for smart quotes and creating the block types in the schema using markdown conventions (say "> " to create a blockquote)

• A keymap that defines keys to create and manipulate the nodes in the schema

• A keymap binding the default keys provided by the prosemirror-commands module

• The undo history plugin

• The drop cursor plugin

• The gap cursor plugin

• A custom plugin that adds a menuContent prop for the prosemirror-menu wrapper, and a CSS class that enables the additional styling defined in style/style.css in this package

These options are supported:

• schema: Schema
  The schema to use. This influences the menu items and key bindings that are generated. Assumes that node names correspond to those in the schema modules in the main distribution.

• mapKeys: ?Object
  Can be used to adjust the key bindings created.

• menuBar: ?bool
  Set to false to disable the menu bar.

• floatingMenu: ?bool
  Set to false to make the menu bar non-floating.

• menuContent: [[MenuItem]]
  Can be used to override the menu content.

• history: ?bool
  Set this to false to disable adding the history plugin to the result.

buildMenuItems(schema: Schema) → Object

Given a schema, look for default mark and node types in it and return an object with relevant menu items relating to those marks:

• toggleStrong: MenuItem
  A menu item to toggle the strong mark.

• toggleEm: MenuItem
  A menu item to toggle the emphasis mark.

• toggleCode: MenuItem
  A menu item to toggle the code font mark.

• toggleLink: MenuItem
  A menu item to toggle the link mark.

• insertImage: MenuItem
  A menu item to insert an image.

• wrapBulletList: MenuItem
  A menu item to wrap the selection in a bullet list.

• wrapOrderedList: MenuItem
  A menu item to wrap the selection in an ordered list.

• wrapBlockQuote: MenuItem
  A menu item to wrap the selection in a block quote.

• makeParagraph: MenuItem
  A menu item to set the current textblock to be a normal paragraph.

• makeCodeBlock: MenuItem
  A menu item to set the current textblock to be a code block.

• insertTable: MenuItem
  An item to insert a table.

• addRowBefore, addRowAfter, removeRow, addColumnBefore, addColumnAfter, removeColumn: MenuItem
  Table-manipulation items.

• makeHead[N]: MenuItem
  Where N is 1 to 6. Menu items to set the current textblock to be a heading of level N.

• insertHorizontalRule: MenuItem
  A menu item to insert a horizontal rule.

The return value also contains some prefabricated menu elements and menus, that you can use instead of composing your own menu from scratch:

• insertMenu: Dropdown
  A dropdown containing the insertImage and insertHorizontalRule items.

• typeMenu: Dropdown
  A dropdown containing the items for making the current textblock a paragraph, code block, or heading.

• fullMenu: [[MenuElement]]
  An array of arrays of menu elements for use as the full menu for, for example the menu bar.

buildKeymap(schema: Schema, remap: ?Object) → Object

Inspect the given schema looking for marks and nodes from the basic schema, and if found, add key bindings related to them. This will add:

• Mod-b for toggling strong
• Mod-i for toggling emphasis
• Mod-` for toggling code font
• Ctrl-Shift-0 for making the current textblock a paragraph
• Ctrl-Shift-1 to Ctrl-Shift-Digit6 for making the current textblock a heading of the corresponding level
• Ctrl-Shift-Backslash to make the current textblock a code block
• Ctrl-Shift-8 to wrap the selection in an ordered list
• Ctrl-Shift-9 to wrap the selection in a bullet list
• Ctrl-> to wrap the selection in a block quote
• Enter to split a non-empty textblock in a list item while at the same time splitting the list item
• Mod-Enter to insert a hard break
• Mod-_ to insert a horizontal rule

You can suppress or map these bindings by passing a mapKeys argument, which maps key names (say "Mod-B" to either false, to remove the binding, or a new key name string.

buildInputRules(schema: Schema) → [InputRule]

A set of input rules for creating the basic block quotes, lists, code blocks, and heading.

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.