or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

document-structure.mdindex.mdnavigation-interaction.mdtext-analysis.mdvisual-enhancement.md
tile.json

tessl/npm-tiptap--extensions

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

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

To install, run

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

index.mddocs/

Tiptap Extensions

Tiptap Extensions is a collection of essential utility extensions for the Tiptap rich text editor. This package provides 8 specialized extensions that enhance editor functionality with features like character counting, drag-and-drop visual feedback, placeholder text, focus management, gap navigation, selection styling, document structure management, and undo/redo capabilities.

Package Information

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

Core Imports

All extensions can be imported from the main package:

import { CharacterCount, Focus, Placeholder, UndoRedo } from "@tiptap/extensions";

Individual extension imports are also supported:

import { CharacterCount } from "@tiptap/extensions/character-count";
import { Focus } from "@tiptap/extensions/focus";
import { Placeholder } from "@tiptap/extensions/placeholder";
import { UndoRedo } from "@tiptap/extensions/undo-redo";

For CommonJS:

const { CharacterCount, Focus, Placeholder } = require("@tiptap/extensions");

Basic Usage

import { Editor } from "@tiptap/core";
import { CharacterCount, Focus, Placeholder } from "@tiptap/extensions";

const editor = new Editor({
  extensions: [
    CharacterCount.configure({
      limit: 280,
    }),
    Focus.configure({
      className: 'has-focus',
      mode: 'all',
    }),
    Placeholder.configure({
      placeholder: 'Start typing...',
      showOnlyWhenEditable: true,
    }),
  ],
  content: '<p>Hello World!</p>',
});

// Access character count
const characterCount = editor.storage.characterCount.characters();
console.log(`Characters: ${characterCount}`);

Architecture

All extensions follow the Tiptap Extension pattern using Extension.create(). Each extension:

  • Options Interface: Configurable options with sensible defaults
  • Storage Interface: Runtime methods and state (where applicable)
  • ProseMirror Integration: Seamless integration with ProseMirror plugins
  • Type Safety: Full TypeScript support with proper type definitions
  • Module Augmentation: Extensions that modify global types do so via module declarations

Capabilities

Text and Document Analysis

Extensions for measuring and analyzing document content.

interface CharacterCountOptions {
  limit: number | null | undefined;
  mode: 'textSize' | 'nodeSize';
  textCounter: (text: string) => number;
  wordCounter: (text: string) => number;
}

interface CharacterCountStorage {
  characters: (options?: { node?: ProsemirrorNode; mode?: 'textSize' | 'nodeSize' }) => number;
  words: (options?: { node?: ProsemirrorNode }) => number;
}

Text Analysis

Visual Enhancement

Extensions that provide visual feedback and styling for the editor interface.

interface FocusOptions {
  className: string;
  mode: 'all' | 'deepest' | 'shallowest';
}

interface DropcursorOptions {
  color?: string | false;
  width: number | undefined;
  class: string | undefined;
}

interface PlaceholderOptions {
  emptyEditorClass: string;
  emptyNodeClass: string;
  placeholder: string | ((props: PlaceholderProps) => string);
  showOnlyWhenEditable: boolean;
  showOnlyCurrent: boolean;
  includeChildren: boolean;
}

Visual Enhancement

Navigation and Interaction

Extensions that enhance cursor movement and user interaction patterns.

declare module '@tiptap/core' {
  interface NodeConfig<Options, Storage> {
    allowGapCursor?: boolean | null | ((this: {
      name: string;
      options: Options;
      storage: Storage;
      parent: ParentConfig<NodeConfig<Options>>['allowGapCursor'];
    }) => boolean | null);
  }
}

type SelectionOptions = {
  className: string;
}

Navigation and Interaction

Document Structure Management

Extensions for managing document structure and content flow.

interface TrailingNodeOptions {
  node: string;
  notAfter?: string | string[];
}

interface UndoRedoOptions {
  depth: number;
  newGroupDelay: number;
}

declare module '@tiptap/core' {
  interface Commands<ReturnType> {
    undoRedo: {
      undo: () => ReturnType;
      redo: () => ReturnType;
    };
  }
}

Document Structure