tessl/npm-tiptap--extensions

Collection of utility extensions for Tiptap rich text editor including character counting, placeholders, focus management, and history controls

—

Pending

Overview

Eval results

Files

Document Structure Management

Name: tessl/npm-tiptap--extensions
Author: tessl

Extensions for managing document structure, content flow, and providing history management capabilities.

Capabilities

Trailing Node Extension

Automatically maintains document structure by ensuring a trailing node (typically a paragraph) at the end of the document.

/**
 * Trailing node extension for automatic document structure management
 */
const TrailingNode: Extension<TrailingNodeOptions>;

interface TrailingNodeOptions {
  /** Node type to insert as trailing node (default: 'paragraph') */
  node: string;
  /** Node types after which trailing node should not be inserted (default: []) */
  notAfter?: string | string[];
}

Usage Examples:

import { TrailingNode } from "@tiptap/extensions/trailing-node";

// Basic trailing paragraph
const editor = new Editor({
  extensions: [
    TrailingNode.configure({
      node: 'paragraph',
    }),
  ],
});

// Custom trailing node
const customTrailing = TrailingNode.configure({
  node: 'customBlock',
  notAfter: ['heading', 'codeBlock'], // Don't add after these node types
});

// Multiple exclusions
const selectiveTrailing = TrailingNode.configure({
  node: 'paragraph',
  notAfter: ['table', 'image', 'horizontalRule', 'codeBlock'],
});

Trailing Node Behavior:

Automatic Insertion: Adds trailing node when document ends with non-excluded node types
Smart Detection: Only inserts when necessary to maintain document structure
Loop Prevention: Automatically adds configured node type to exclusion list to prevent infinite loops
Configurable Types: Support for any node type as the trailing element
Flexible Exclusions: String or array of node types to exclude from trailing insertion

Undo Redo Extension

Provides undo and redo functionality with keyboard shortcuts and configurable history management.

/**
 * Undo/Redo extension with history management and keyboard shortcuts
 */
const UndoRedo: Extension<UndoRedoOptions>;

interface UndoRedoOptions {
  /** Maximum number of history steps to maintain (default: 100) */
  depth: number;
  /** Delay in milliseconds before grouping operations (default: 500) */
  newGroupDelay: number;
}

declare module '@tiptap/core' {
  interface Commands<ReturnType> {
    undoRedo: {
      /** Undo the last operation */
      undo: () => ReturnType;
      /** Redo the last undone operation */
      redo: () => ReturnType;
    };
  }
}

Usage Examples:

import { UndoRedo } from "@tiptap/extensions/undo-redo";

// Basic undo/redo
const editor = new Editor({
  extensions: [
    UndoRedo.configure({
      depth: 100,
      newGroupDelay: 500,
    }),
  ],
});

// Extended history
const longHistoryEditor = new Editor({
  extensions: [
    UndoRedo.configure({
      depth: 1000, // Keep more history steps
      newGroupDelay: 1000, // Group operations over 1 second
    }),
  ],
});

// Using undo/redo commands
editor.commands.undo(); // Undo last operation
editor.commands.redo(); // Redo last undone operation

// Check if undo/redo is available
const canUndo = editor.can().undo();
const canRedo = editor.can().redo();

console.log(`Can undo: ${canUndo}, Can redo: ${canRedo}`);

Keyboard Shortcuts:

The extension provides built-in keyboard shortcuts:

Undo:
- Mod-z (Ctrl-z on Windows/Linux, Cmd-z on Mac)
- Mod-я (Russian keyboard layout support)
Redo:
- Shift-Mod-z (Shift-Ctrl-z on Windows/Linux, Shift-Cmd-z on Mac)
- Mod-y (Ctrl-y on Windows/Linux, Cmd-y on Mac)

History Management:

// Configure history behavior
const editor = new Editor({
  extensions: [
    UndoRedo.configure({
      depth: 50, // Limit history to 50 steps for performance
      newGroupDelay: 300, // Quick grouping for responsive editing
    }),
  ],
});

// Manual history management
editor.commands.undo(); // Step back one operation
editor.commands.redo(); // Step forward one operation

// Check history state
const historyState = editor.state.plugins.find(
  plugin => plugin.key.name === 'history'
);

Important Compatibility Note:

⚠️ The UndoRedo extension is not compatible with collaboration extensions. Use Tiptap's collaboration-specific history management when working with collaborative editing features.

Document Structure Patterns

Both extensions work together to maintain document integrity:

import { TrailingNode, UndoRedo } from "@tiptap/extensions";

const editor = new Editor({
  extensions: [
    // Maintain document structure
    TrailingNode.configure({
      node: 'paragraph',
      notAfter: ['table', 'codeBlock'],
    }),
    
    // Enable history with reasonable limits
    UndoRedo.configure({
      depth: 200,
      newGroupDelay: 400,
    }),
  ],
});

// Document structure operations are tracked in history
editor.commands.insertontent('<h1>New Heading</h1>');
// TrailingNode automatically adds paragraph after heading
// Operation is recorded in history and can be undone

editor.commands.undo(); // Removes heading and trailing paragraph
editor.commands.redo(); // Restores heading and trailing paragraph

Structure Management Benefits:

Consistent Documents: Always maintain expected document structure
Undo Safety: Structure changes are properly tracked in history
User Experience: Predictable behavior for content editing
Accessibility: Better navigation and screen reader support

Install with Tessl CLI

npx tessl i tessl/npm-tiptap--extensions

docs

document-structure.md

index.md

text-analysis.md

visual-enhancement.md

tile.json