prosemirror-inputrules

What is prosemirror-inputrules?

The prosemirror-inputrules package provides a way to define input rules for ProseMirror editors. These rules can automatically transform text as the user types, such as converting markdown-like syntax into rich text formatting.

What are prosemirror-inputrules's main functionalities?

Basic Input Rule

This code demonstrates how to create a basic input rule that transforms a markdown-like bullet list syntax into a bullet list node in a ProseMirror editor.

const { inputRules, wrappingInputRule } = require('prosemirror-inputrules');
const { Schema } = require('prosemirror-model');
const { EditorState } = require('prosemirror-state');
const { EditorView } = require('prosemirror-view');

// Define a schema
const schema = new Schema({
  nodes: {
    doc: { content: 'block+' },
    paragraph: { content: 'inline*', group: 'block' },
    text: { group: 'inline' }
  },
  marks: {}
});

// Define an input rule
const bulletListRule = wrappingInputRule(/^\s*([-+*])\s$/, schema.nodes.bullet_list);

// Create an editor state with the input rule plugin
const state = EditorState.create({
  schema,
  plugins: [inputRules({ rules: [bulletListRule] })]
});

// Create an editor view
const view = new EditorView(document.querySelector('#editor'), {
  state
});

Custom Input Rule

This code demonstrates how to create a custom input rule that transforms a markdown-like heading syntax into a heading node in a ProseMirror editor.

const { inputRules, textblockTypeInputRule } = require('prosemirror-inputrules');
const { Schema } = require('prosemirror-model');
const { EditorState } = require('prosemirror-state');
const { EditorView } = require('prosemirror-view');

// Define a schema
const schema = new Schema({
  nodes: {
    doc: { content: 'block+' },
    heading: { content: 'inline*', group: 'block', attrs: { level: { default: 1 } } },
    text: { group: 'inline' }
  },
  marks: {}
});

// Define a custom input rule
const headingRule = textblockTypeInputRule(/^#\s$/, schema.nodes.heading, { level: 1 });

// Create an editor state with the input rule plugin
const state = EditorState.create({
  schema,
  plugins: [inputRules({ rules: [headingRule] })]
});

// Create an editor view
const view = new EditorView(document.querySelector('#editor'), {
  state
});

Other packages similar to prosemirror-inputrules

quill

Quill is a modern WYSIWYG editor built for compatibility and extensibility. It provides a rich API for customizing the editor's behavior and appearance. Unlike prosemirror-inputrules, Quill comes with built-in support for various input transformations and does not require additional plugins for basic input rules.

draft-js

Draft.js is a framework for building rich text editors in React. It provides a set of tools for managing editor state and handling input transformations. Similar to prosemirror-inputrules, Draft.js allows developers to define custom input rules, but it is more tightly integrated with the React ecosystem.

slate

Slate is a completely customizable framework for building rich text editors. It provides a set of primitives for defining the editor's behavior and appearance. Like prosemirror-inputrules, Slate allows developers to define custom input rules, but it offers more flexibility and control over the editor's behavior.

README

prosemirror-inputrules

[ WEBSITE | ISSUES | FORUM | GITTER | CHANGELOG ]

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

This module exports a plugin that can be used to define input rules, things that should happen when input matching a given pattern is typed, along with a number of predefined rules.

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.

Changelog

0.23.0 (2017-09-13)

Breaking changes

Schema-specific rule-builders blockQuoteRule, orderedListRule, bulletListRule, codeBlockRule, and headingRule, along with the allInputRules array, are no longer included in this module.