or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

collaboration.mdcommands-and-editing.mdcursors-and-enhancements.mdhistory.mdindex.mdinput-and-keymaps.mdmarkdown.mdmenus-and-ui.mdmodel-and-schema.mdschema-definitions.mdstate-management.mdtables.mdtransformations.mdview-and-rendering.md
tile.json

tessl/npm-tiptap--pm

Comprehensive wrapper around ProseMirror packages providing unified entry point for rich text editing functionality in Tiptap framework

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@tiptap/pm@3.4.x

To install, run

npx @tessl/cli install tessl/npm-tiptap--pm@3.4.0

index.mddocs/

@tiptap/pm

@tiptap/pm is a comprehensive wrapper package around ProseMirror, providing a unified entry point for all ProseMirror functionality required by the Tiptap rich text editor framework. It re-exports modules from 18 different ProseMirror packages through individual sub-module exports, simplifying dependency management for rich text editor development.

Package Information

  • Package Name: @tiptap/pm
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install @tiptap/pm

Core Imports

Each ProseMirror module is accessed via sub-module import:

import { EditorState, Transaction } from "@tiptap/pm/state";
import { EditorView } from "@tiptap/pm/view";
import { Node, Schema } from "@tiptap/pm/model";
import { history, undo, redo } from "@tiptap/pm/history";

All 18 sub-modules are available:

// Core document and state management
import * as model from "@tiptap/pm/model";
import * as state from "@tiptap/pm/state";
import * as view from "@tiptap/pm/view";
import * as transform from "@tiptap/pm/transform";

// Commands and editing
import * as commands from "@tiptap/pm/commands";
import * as inputrules from "@tiptap/pm/inputrules";
import * as keymap from "@tiptap/pm/keymap";

// Schema definitions
import * as schemaBasic from "@tiptap/pm/schema-basic";
import * as schemaList from "@tiptap/pm/schema-list";

// Extensions and features
import * as history from "@tiptap/pm/history";
import * as tables from "@tiptap/pm/tables";
import * as collab from "@tiptap/pm/collab";
import * as menu from "@tiptap/pm/menu";
import * as markdown from "@tiptap/pm/markdown";

// Cursor and UI enhancements
import * as gapcursor from "@tiptap/pm/gapcursor";
import * as dropcursor from "@tiptap/pm/dropcursor";
import * as trailingNode from "@tiptap/pm/trailing-node";

// Change tracking
import * as changeset from "@tiptap/pm/changeset";

Basic Usage

import { EditorState } from "@tiptap/pm/state";
import { EditorView } from "@tiptap/pm/view";
import { Schema } from "@tiptap/pm/model";
import { schema as basicSchema } from "@tiptap/pm/schema-basic";
import { history } from "@tiptap/pm/history";
import { keymap } from "@tiptap/pm/keymap";
import { baseKeymap } from "@tiptap/pm/commands";

// Create editor state
const state = EditorState.create({
  schema: basicSchema,
  plugins: [
    history(),
    keymap(baseKeymap),
  ],
});

// Create editor view
const view = new EditorView(document.querySelector("#editor"), {
  state,
  dispatchTransaction(transaction) {
    const newState = view.state.apply(transaction);
    view.updateState(newState);
  },
});

Architecture

@tiptap/pm is organized around ProseMirror's modular architecture:

  • Core System: Document model, state management, and view rendering
  • Editing Operations: Commands, transformations, and input handling
  • Schema Definitions: Pre-built node and mark types for common use cases
  • Extensions: Advanced features like tables, collaboration, and history
  • UI Components: Menus, cursors, and visual enhancements

Each sub-module provides a complete re-export of the corresponding ProseMirror package, maintaining full API compatibility while simplifying dependency management.

Capabilities

Document Model and Schema

Core document structure, node and mark definitions, and schema management for defining editor capabilities.

// Key classes from @tiptap/pm/model
class Schema {
  constructor(spec: SchemaSpec);
  node(name: string): NodeType;
  mark(name: string): MarkType;
}

class Node {
  readonly type: NodeType;
  readonly attrs: Attrs;
  readonly content: Fragment;
  readonly marks: Mark[];
}

class Fragment {
  static from(nodes: Node[] | Node | Fragment): Fragment;
  append(other: Fragment): Fragment;
  cut(from: number, to?: number): Fragment;
}

Document Model and Schema

Editor State Management

Complete editor state management including selections, transactions, and plugin system.

// Key classes from @tiptap/pm/state
class EditorState {
  static create(config: EditorStateConfig): EditorState;
  readonly doc: Node;
  readonly selection: Selection;
  readonly tr: Transaction;
  apply(tr: Transaction): EditorState;
}

class Transaction {
  readonly doc: Node;
  insertText(text: string, from?: number, to?: number): Transaction;
  delete(from: number, to: number): Transaction;
  replaceWith(from: number, to: number, content: Fragment): Transaction;
}

Editor State Management

View and Rendering

DOM rendering, user interaction handling, and visual decorations.

// Key classes from @tiptap/pm/view
class EditorView {
  constructor(place: Element, props: EditorProps);
  readonly state: EditorState;
  updateState(state: EditorState): void;
  dispatch(tr: Transaction): void;
  destroy(): void;
}

class Decoration {
  static widget(pos: number, dom: Element): Decoration;
  static inline(from: number, to: number, attrs: object): Decoration;
  static node(from: number, to: number, attrs: object): Decoration;
}

View and Rendering

Commands and Editing

Text manipulation commands, selection handling, and common editing operations.

// Key functions from @tiptap/pm/commands
type Command = (state: EditorState, dispatch?: (tr: Transaction) => void) => boolean;

function deleteSelection(state: EditorState, dispatch?: (tr: Transaction) => void): boolean;
function joinBackward(state: EditorState, dispatch?: (tr: Transaction) => void): boolean;
function selectAll(state: EditorState, dispatch?: (tr: Transaction) => void): boolean;
function toggleMark(markType: MarkType): Command;
function wrapIn(nodeType: NodeType, attrs?: Attrs): Command;

Commands and Editing

Input Rules and Keymaps

Automatic text transformations and keyboard shortcut handling.

// Key classes and functions from @tiptap/pm/inputrules and @tiptap/pm/keymap
class InputRule {
  constructor(pattern: RegExp, handler: string | InputRuleHandler);
}

function inputRules(config: { rules: InputRule[] }): Plugin;
function keymap(bindings: { [key: string]: Command }): Plugin;

Input Rules and Keymaps

Schema Definitions

Pre-built schemas for common document structures and list handling.

// Constants from @tiptap/pm/schema-basic and @tiptap/pm/schema-list
const schema: Schema; // Basic schema with common nodes and marks
const nodes: { [name: string]: NodeSpec };
const marks: { [name: string]: MarkSpec };

// List-related functions
function addListNodes(nodes: { [name: string]: NodeSpec }, itemContent: string): { [name: string]: NodeSpec };
function wrapInList(listType: NodeType, attrs?: Attrs): Command;

Schema Definitions

History and Undo/Redo

Undo/redo functionality with configurable history tracking.

// Key functions from @tiptap/pm/history
function history(config?: HistoryOptions): Plugin;
function undo(state: EditorState, dispatch?: (tr: Transaction) => void): boolean;
function redo(state: EditorState, dispatch?: (tr: Transaction) => void): boolean;
function undoDepth(state: EditorState): number;
function redoDepth(state: EditorState): number;

History and Undo/Redo

Tables

Advanced table editing with cell selection, column resizing, and table manipulation.

// Key classes and functions from @tiptap/pm/tables
class CellSelection extends Selection {
  static create(doc: Node, from: number, to?: number): CellSelection;
}

function tableNodes(options: TableNodesOptions): { [name: string]: NodeSpec };
function tableEditing(): Plugin;
function columnResizing(options?: ColumnResizingOptions): Plugin;

Tables

Collaboration

Real-time collaborative editing with conflict resolution.

// Key functions from @tiptap/pm/collab
function collab(config?: CollabConfig): Plugin;
function sendableSteps(state: EditorState): { version: number; steps: Step[]; clientID: number } | null;
function receiveTransaction(state: EditorState, steps: Step[], clientIDs: number[]): Transaction;
function getVersion(state: EditorState): number;

Collaboration

Markdown Support

Markdown parsing and serialization for document interchange.

// Key classes from @tiptap/pm/markdown
class MarkdownParser {
  constructor(schema: Schema, tokenizer: any, tokens: { [token: string]: ParseSpec });
  parse(text: string): Node;
}

class MarkdownSerializer {
  constructor(nodes: { [name: string]: any }, marks: { [name: string]: MarkSerializerSpec });
  serialize(content: Node): string;
}

Markdown Support

Menus and UI

Visual menu components and user interface elements.

// Key classes and functions from @tiptap/pm/menu
class MenuItem {
  constructor(spec: MenuItemSpec);
}

function menuBar(options: { content: MenuElement[][] }): Plugin;
function renderGrouped(view: EditorView, content: MenuElement[][]): DocumentFragment;

Menus and UI

Document Transformations

Low-level document transformation and position mapping.

// Key classes from @tiptap/pm/transform
class Transform {
  readonly doc: Node;
  readonly steps: Step[];
  step(step: Step): Transform;
  insertText(pos: number, text: string): Transform;
  delete(from: number, to: number): Transform;
}

class Step {
  apply(doc: Node): StepResult;
  getMap(): StepMap;
}

Document Transformations

Cursors and Visual Enhancements

Gap cursor, drop cursor, and trailing node functionality for improved user experience.

// Key functions from cursor and enhancement modules
function gapCursor(): Plugin;
function dropCursor(options?: DropCursorOptions): Plugin;
function trailingNode(options: TrailingNodeOptions): Plugin;

Cursors and Visual Enhancements

Types

// Core types used across the API
interface SchemaSpec {
  nodes: { [name: string]: NodeSpec };
  marks?: { [name: string]: MarkSpec };
  topNode?: string;
}

interface NodeSpec {
  content?: string;
  marks?: string;
  group?: string;
  inline?: boolean;
  atom?: boolean;
  attrs?: { [name: string]: AttributeSpec };
  parseDOM?: ParseRule[];
  toDOM?: (node: Node) => DOMOutputSpec;
}

interface MarkSpec {
  attrs?: { [name: string]: AttributeSpec };
  inclusive?: boolean;
  excludes?: string;
  group?: string;
  parseDOM?: ParseRule[];
  toDOM?: (mark: Mark, inline: boolean) => DOMOutputSpec;
}

interface EditorStateConfig {
  schema?: Schema;
  doc?: Node;
  selection?: Selection;
  plugins?: Plugin[];
}

interface EditorProps {
  state: EditorState;
  dispatchTransaction?: (tr: Transaction) => void;
  nodeViews?: { [name: string]: NodeViewConstructor };
  decorations?: (state: EditorState) => DecorationSet;
  attributes?: (state: EditorState) => { [key: string]: string };
}

type Command = (state: EditorState, dispatch?: (tr: Transaction) => void, view?: EditorView) => boolean;

type DOMOutputSpec = string | Element | [string, ...any[]];
type Attrs = { [key: string]: any };