@tiptap/pm

What is @tiptap/pm?

@tiptap/pm is a package that provides a set of tools and utilities for building rich text editors. It is part of the Tiptap ecosystem, which is built on top of ProseMirror, a toolkit for building rich text editors. @tiptap/pm offers a range of functionalities including schema creation, commands, input rules, and more.

What are @tiptap/pm's main functionalities?

Schema Creation

This feature allows you to define the structure of your document. The schema defines the nodes and marks that can be used in the editor.

const { Schema } = require('@tiptap/pm');

const mySchema = new Schema({
  nodes: {
    doc: { content: 'block+' },
    paragraph: { content: 'text*', toDOM: () => ['p', 0], parseDOM: [{ tag: 'p' }] },
    text: { inline: true }
  },
  marks: {}
});

Commands

Commands are functions that perform actions on the editor state. This example shows how to create a command to toggle a bold mark.

const { toggleMark } = require('@tiptap/pm');

const boldCommand = toggleMark(mySchema.marks.bold);

// Usage in an editor instance
editor.commands.bold = () => boldCommand(editor.state, editor.dispatch);

Input Rules

Input rules are used to automatically transform text as the user types. This example shows how to create an input rule that transforms text starting with '>' into a blockquote.

const { inputRules, wrappingInputRule } = require('@tiptap/pm');

const blockquoteRule = wrappingInputRule(/^
*>
$/, mySchema.nodes.blockquote);

const myInputRules = inputRules({ rules: [blockquoteRule] });

Other packages similar to @tiptap/pm

prosemirror

ProseMirror is a toolkit for building rich text editors. It provides a lot of the underlying functionality that @tiptap/pm builds upon. While ProseMirror is more low-level and requires more setup, @tiptap/pm offers a more user-friendly API and additional utilities.

slate

Slate is another framework for building rich text editors. It offers a different approach compared to ProseMirror and @tiptap/pm, focusing on a more React-friendly API. Slate is highly customizable but can be more complex to set up.

draft-js

Draft.js is a rich text editor framework developed by Facebook. It provides a set of React components and utilities for building rich text editors. While it is powerful, it is not as flexible as ProseMirror and @tiptap/pm.

README

@tiptap/pm

Introduction

Tiptap is a headless wrapper around ProseMirror – a toolkit for building rich text WYSIWYG editors, which is already in use at many well-known companies such as New York Times, The Guardian or Atlassian.

What is this pm package?

The pm package is a wrapper package for ProseMirror. This includes all ProseMirror packages that are required to run Tiptap.

Official Documentation

Documentation can be found on the Tiptap website.

License

Tiptap is open sourced software licensed under the MIT license.