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 | CHANGELOG ]

This is a core module of ProseMirror. 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.

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.

Changelog

1.4.0 (2024-01-30)

New features

Input rules now take an inCode option that controls whether they should apply inside nodes marked as code.