CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-tiptap--core

Headless rich text editor built on ProseMirror with extensible architecture for building custom editors

94

1.00x
Overview
Eval results
Files

task.mdevals/scenario-2/

Toolbar Button State Manager

Build a toolbar button state management system for a rich text editor that dynamically enables/disables buttons based on the current editor state and selection context.

Task Description

Implement a system that checks whether editor commands can be executed in the current context. This is essential for building UI toolbars that need to enable/disable buttons based on what operations are valid at the current cursor position.

Your implementation must:

  1. Check if individual commands can be executed without actually running them
  2. Evaluate multiple commands at once and return their availability status
  3. Support both mark commands (bold, italic, code) and node commands (heading, blockquote)
  4. Work correctly with any selection state in the editor

The key requirement is to validate commands without executing them or modifying the document.

Test Cases

  • Given an editor with plain text selected, when checking if the toggleMark command with 'bold' can be executed, then canExecuteCommand returns true @test
  • Given an editor with a paragraph, when checking if setNode with 'heading' and level 1 can be executed, then canExecuteCommand returns true @test
  • Given an editor instance, when evaluating multiple mark actions (bold, italic, code), then evaluateToolbarActions returns availability status for each @test
  • Given an editor with selectable content, when evaluating node actions (heading, blockquote), then evaluateToolbarActions correctly reports which are available @test

@generates

API

/**
 * Configuration for a toolbar action
 */
export interface ActionConfig {
  name: string;
  type: 'mark' | 'node';
  commandName: string;
  attributes?: Record<string, any>;
}

/**
 * Result indicating action availability
 */
export interface ActionStatus {
  name: string;
  available: boolean;
  active?: boolean;
}

/**
 * Evaluates which toolbar actions are currently available
 * @param editor - The Tiptap editor instance
 * @param actions - Array of action configurations to check
 * @returns Array of action statuses
 */
export function evaluateToolbarActions(
  editor: any,
  actions: ActionConfig[]
): ActionStatus[];

/**
 * Checks if a specific command can be executed
 * @param editor - The Tiptap editor instance
 * @param commandName - Name of the command to check
 * @param attributes - Optional attributes for the command
 * @returns Whether the command can be executed
 */
export function canExecuteCommand(
  editor: any,
  commandName: string,
  attributes?: Record<string, any>
): boolean;

Dependencies { .dependencies }

@tiptap/core { .dependency }

Provides the rich text editor framework with command validation capabilities.

Install with Tessl CLI

npx tessl i tessl/npm-tiptap--core

tile.json