CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-tiptap--pm

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

Pending
Overview
Eval results
Files

commands-and-editing.mddocs/

Commands and Editing

The commands system provides high-level editing operations that can be bound to keys, triggered by UI elements, or called programmatically. Commands handle text manipulation, selection, and document structure changes.

Capabilities

Command Definition

Commands are functions that examine the editor state and optionally perform editing actions.

/**
 * A command is a function that takes an editor state and optionally dispatches a transaction
 */
type Command = (state: EditorState, dispatch?: (tr: Transaction) => void, view?: EditorView) => boolean;

Selection Commands

Commands for managing and manipulating selections.

/**
 * Delete the current selection
 */
function deleteSelection(state: EditorState, dispatch?: (tr: Transaction) => void): boolean;

/**
 * Select the entire document
 */
function selectAll(state: EditorState, dispatch?: (tr: Transaction) => void): boolean;

/**
 * Select the parent node of the current selection
 */
function selectParentNode(state: EditorState, dispatch?: (tr: Transaction) => void): boolean;

/**
 * Select a node backward from the current position
 */
function selectNodeBackward(state: EditorState, dispatch?: (tr: Transaction) => void): boolean;

/**
 * Select a node forward from the current position
 */
function selectNodeForward(state: EditorState, dispatch?: (tr: Transaction) => void): boolean;

/**
 * Move selection to the start of the current text block
 */
function selectTextblockStart(state: EditorState, dispatch?: (tr: Transaction) => void): boolean;

/**
 * Move selection to the end of the current text block
 */
function selectTextblockEnd(state: EditorState, dispatch?: (tr: Transaction) => void): boolean;

Block Commands

Commands for manipulating block-level content.

/**
 * Join the current block with the previous one
 */
function joinBackward(state: EditorState, dispatch?: (tr: Transaction) => void): boolean;

/**
 * Join the current block with the next one
 */
function joinForward(state: EditorState, dispatch?: (tr: Transaction) => void): boolean;

/**
 * Join the current block with the one above
 */
function joinUp(state: EditorState, dispatch?: (tr: Transaction) => void): boolean;

/**
 * Join the current block with the one below
 */
function joinDown(state: EditorState, dispatch?: (tr: Transaction) => void): boolean;

/**
 * Lift the content around the selection out of its parent
 */
function lift(state: EditorState, dispatch?: (tr: Transaction) => void): boolean;

/**
 * Split the current block at the selection
 */
function splitBlock(state: EditorState, dispatch?: (tr: Transaction) => void): boolean;

/**
 * Split the current block while preserving marks
 */
function splitBlockKeepMarks(state: EditorState, dispatch?: (tr: Transaction) => void): boolean;

/**
 * Create a paragraph near the current position
 */
function createParagraphNear(state: EditorState, dispatch?: (tr: Transaction) => void): boolean;

/**
 * Lift an empty block out of its parent
 */
function liftEmptyBlock(state: EditorState, dispatch?: (tr: Transaction) => void): boolean;

Text Block Commands

Commands specifically for text block manipulation.

/**
 * Join text blocks backward
 */
function joinTextblockBackward(state: EditorState, dispatch?: (tr: Transaction) => void): boolean;

/**
 * Join text blocks forward
 */
function joinTextblockForward(state: EditorState, dispatch?: (tr: Transaction) => void): boolean;

Code Block Commands

Commands for handling code blocks.

/**
 * Insert a newline in a code block
 */
function newlineInCode(state: EditorState, dispatch?: (tr: Transaction) => void): boolean;

/**
 * Exit from a code block
 */
function exitCode(state: EditorState, dispatch?: (tr: Transaction) => void): boolean;

Mark Commands

Commands for applying and removing text marks.

/**
 * Toggle a mark on the current selection or at the cursor
 */
function toggleMark(markType: MarkType, attrs?: Attrs): Command;

Node Transformation Commands

Commands for changing node types and wrapping content.

/**
 * Change the type of the selected block(s)
 */
function setBlockType(nodeType: NodeType, attrs?: Attrs): Command;

/**
 * Wrap the selection in a node of the given type
 */
function wrapIn(nodeType: NodeType, attrs?: Attrs): Command;

/**
 * Split a block as a specific node type
 */
function splitBlockAs(nodeType: NodeType, attrs?: Attrs): Command;

Utility Commands

Helper commands and command combinators.

/**
 * Combine multiple commands, trying each in sequence until one succeeds
 */
function chainCommands(...commands: Command[]): Command;

/**
 * Automatically join nodes when appropriate after running a command
 */
function autoJoin(command: Command, isJoinable?: (before: Node, after: Node) => boolean): Command;

Keymap Support

Pre-defined key bindings for common commands.

/**
 * Basic keymap for common editing operations
 */
const baseKeymap: { [key: string]: Command };

/**
 * PC-specific keymap
 */
const pcBaseKeymap: { [key: string]: Command };

/**
 * Mac-specific keymap
 */
const macBaseKeymap: { [key: string]: Command };

Usage Examples:

import { 
  deleteSelection, 
  selectAll, 
  toggleMark, 
  setBlockType, 
  chainCommands,
  baseKeymap 
} from "@tiptap/pm/commands";
import { keymap } from "@tiptap/pm/keymap";

// Use commands directly
const deleteCmd = deleteSelection(state, dispatch);

// Create a toggle bold command
const toggleBold = toggleMark(schema.marks.strong);

// Create a heading command
const makeHeading = setBlockType(schema.nodes.heading, { level: 1 });

// Chain commands
const customEnter = chainCommands(
  exitCode,
  splitBlockKeepMarks,
  createParagraphNear,
  splitBlock
);

// Use in keymap
const myKeymap = keymap({
  ...baseKeymap,
  "Mod-b": toggleBold,
  "Mod-1": makeHeading,
  "Enter": customEnter
});

// Add to editor
const state = EditorState.create({
  schema: mySchema,
  plugins: [myKeymap]
});

Command Helpers

/**
 * Check if a command can be run in the current state
 */
function canRunCommand(state: EditorState, command: Command): boolean;

/**
 * Run a command and return the new state if successful
 */
function runCommand(state: EditorState, command: Command): EditorState | null;

Types

/**
 * Function to check if two nodes can be joined
 */
type JoinPredicate = (before: Node, after: Node) => boolean;

/**
 * Key binding map
 */
interface Keymap {
  [key: string]: Command | false;
}

Install with Tessl CLI

npx tessl i tessl/npm-tiptap--pm

docs

collaboration.md

commands-and-editing.md

cursors-and-enhancements.md

history.md

index.md

input-and-keymaps.md

markdown.md

menus-and-ui.md

model-and-schema.md

schema-definitions.md

state-management.md

tables.md

transformations.md

view-and-rendering.md

tile.json