Headless rich text editor built on ProseMirror with extensible architecture for building custom editors
94
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.
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:
The key requirement is to validate commands without executing them or modifying the document.
@generates
/**
* 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;Provides the rich text editor framework with command validation capabilities.
Install with Tessl CLI
npx tessl i tessl/npm-tiptap--coredocs
evals
scenario-1
scenario-2
scenario-3
scenario-4
scenario-5
scenario-6
scenario-7
scenario-8
scenario-9
scenario-10