prosemirror/prosemirror-example-setup

An example of how to set up a ProseMirror editor. ProseMirror is the editor that TipTap uses as the base of their product. I'm trying TipTap as a WYSIWYG for my portfolio site.

Summary

ProseMirror's prosemirror-example-setup is a TypeScript package that shows how to assemble a basic rich text editor from the ProseMirror modules. It bundles plugins, key bindings, input rules, and menu items into a working editor configuration, acting as glue code rather than a reusable component. Note: this repository is archived, and the README states the code has moved to code.haverbeke.berlin/prosemirror/prosemirror-example-setup.

What it is useful for

The module is useful when an engineer wants a working ProseMirror editor without wiring each piece by hand. According to the README, calling exampleSetup({schema}) returns an array of plugins already pre-configured for the given schema, including:

• Input rules for smart quotes and markdown-style block creation (typing "> " produces a blockquote)
• A keymap that defines keys to create and manipulate the nodes in the schema
• The default keymap provided by prosemirror-commands
• The undo history plugin
• The drop cursor and gap cursor plugins
• A custom plugin that adds a menuContent prop for prosemirror-menu and a CSS class that activates the styling in style/style.css

For finer control, three lower-level helpers are exported. buildMenuItems(schema) returns an object of menu items such as toggleStrong, toggleEm, toggleCode, toggleLink, insertImage, wrapBulletList, wrapOrderedList, wrapBlockQuote, makeParagraph, makeCodeBlock, heading items, and insertHorizontalRule, grouped into blockMenu, inlineMenu, and fullMenu. buildKeymap(schema, mapKeys) produces bindings like Mod-b (strong), Mod-i (emphasis), Ctrl-Shift-1 through Ctrl-Shift-6 (headings), Ctrl-Shift-8/Ctrl-Shift-9 (lists), Ctrl-> (block quote), Mod-Enter (hard break), and Alt-ArrowUp/Alt-ArrowDown (join up/down). buildInputRules(schema) returns a plugin with input rules for basic block quotes, lists, code blocks, and headings.

How engineers can use it

The README does not include installation or build steps, so readers should follow the moved repository page and ProseMirror's main documentation for setup commands.

Based on the documented API, a typical starting usage is to import exampleSetup, pass it a ProseMirror schema (for example a basic schema), and feed the returned plugin array into EditorState.create({schema, plugins}). From there, the options listed in the README let you tune the output:

• menuBar: false disables the menu bar
• history: false disables the undo plugin
• floatingMenu: false makes the menu bar non-floating
• mapKeys: {"Mod-B": false} suppresses or remaps default key bindings
• menuContent overrides the toolbar groups produced by buildMenuItems

Documented limitations: the README explicitly says the module is "not meant to be very reusable" and is mainly for getting "something up-and-running quickly," so production editors will likely need finer-grained control. The repository is archived, and the README redirects issues, support, and the bug tracker to the new location at code.haverbeke.berlin.