tessl/npm-tiptap--extensions

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

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

Tiptap Extensions

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

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