or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

commands.mdindex.mdplugins.mdstate-and-ui.mdtypes-and-config.md
tile.json

commands.mddocs/

Command System

Complete command system for executing find and replace operations programmatically. All commands integrate with CKEditor's command system and can be executed using editor.execute().

Capabilities

FindCommand

Command for initiating find operations with custom search callbacks or simple text search.

/**
 * Command for initiating find operations. Supports both text search
 * and custom search callbacks with configurable options.
 */
class FindCommand extends Command {
  /**
   * Creates a find command instance
   * @param editor - The editor instance
   * @param state - The find and replace state object
   */
  constructor(editor: Editor, state: FindAndReplaceState);
  
  /** Always enabled */
  isEnabled: true;
  /** Does not affect document data */
  affectsData: false;
  
  /**
   * Executes the find operation
   * @param callbackOrText - Search term or custom search callback
   * @param options - Search options (case sensitivity, whole words)
   * @returns Object containing results and the search callback used
   */
  execute(callbackOrText: string | FindCallback, options?: FindAttributes): {
    results: Collection<FindResultType>;
    findCallback: FindCallback;
  };
}

Usage Examples:

// Simple text search
editor.execute('find', 'search term');

// Text search with options
editor.execute('find', 'search term', {
  matchCase: true,
  wholeWords: false
});

// Custom search callback
const customCallback = ({ item, text }) => {
  // Custom search logic
  return {
    results: [...],
    searchText: 'custom search'
  };
};
editor.execute('find', customCallback);

FindNextCommand

Command for navigating to the next search result in the results collection.

/**
 * Command for navigating to the next search result.
 * Only enabled when there are multiple search results.
 */
class FindNextCommand extends Command {
  /**
   * Creates a find next command instance
   * @param editor - The editor instance
   * @param state - The find and replace state object
   */
  constructor(editor: Editor, state: FindAndReplaceState);
  
  /** Does not affect document data */
  affectsData: false;
  /** Dynamically set based on results count (enabled when >1 results) */
  isEnabled: boolean;
  
  /** Updates the enabled state based on current results */
  refresh(): void;
  
  /** Moves to the next search result */
  execute(): void;
}

Usage Example:

// Navigate to next result
editor.execute('findNext');

// Check if command is enabled
const command = editor.commands.get('findNext');
console.log(command.isEnabled); // true if there are multiple results

FindPreviousCommand

Command for navigating to the previous search result in the results collection.

/**
 * Command for navigating to the previous search result.
 * Extends FindNextCommand with reverse navigation logic.
 */
class FindPreviousCommand extends FindNextCommand {
  /** Moves to the previous search result */
  execute(): void;
}

Usage Example:

// Navigate to previous result
editor.execute('findPrevious');

ReplaceCommand

Command for replacing a single search result with new text.

/**
 * Command for replacing a single search result.
 * Extends the base replace command with single replacement logic.
 */
class ReplaceCommand extends FindReplaceCommandBase {
  /**
   * Replaces a single search result with the specified text
   * @param replacementText - The text to replace with
   * @param result - The specific result to replace
   */
  execute(replacementText: string, result: FindResultType): void;
}

Usage Example:

// Replace the currently highlighted result
const state = editor.plugins.get('FindAndReplaceEditing').state;
editor.execute('replace', 'replacement text', state.highlightedResult);

// Replace a specific result
const firstResult = state.results.first;
editor.execute('replace', 'new text', firstResult);

ReplaceAllCommand

Command for replacing all occurrences of search results with new text.

/**
 * Command for replacing all search results.
 * Supports both text-based and result collection-based replacement.
 */
class ReplaceAllCommand extends FindReplaceCommandBase {
  /**
   * Replaces all occurrences matching the criteria
   * @param newText - The replacement text
   * @param textToReplace - Either search text or collection of results to replace
   */
  execute(newText: string, textToReplace: string | Collection<FindResultType>): void;
}

Usage Examples:

// Replace all occurrences of a search term
editor.execute('replaceAll', 'replacement text', 'search term');

// Replace all current search results
const state = editor.plugins.get('FindAndReplaceEditing').state;
editor.execute('replaceAll', 'new text', state.results);

FindReplaceCommandBase

Abstract base class providing common functionality for replace commands.

/**
 * Abstract base class for replace commands providing shared
 * replacement logic and common properties.
 */
abstract class FindReplaceCommandBase extends Command {
  /**
   * Creates a base replace command instance
   * @param editor - The editor instance
   * @param state - The find and replace state object
   */
  constructor(editor: Editor, state: FindAndReplaceState);
  
  /** Always enabled */
  isEnabled: true;
  /** Not dependent on selection */
  _isEnabledBasedOnSelection: false;
  
  /** Abstract method to be implemented by subclasses */
  abstract execute(...args: Array<unknown>): void;
  
  /**
   * Common replace logic shared between commands
   * @param replacementText - The text to replace with
   * @param result - The result to replace
   */
  protected _replace(replacementText: string, result: FindResultType): void;
}

Command Usage Patterns

Sequential Operations

// Perform a search, then navigate and replace
editor.execute('find', 'old text');
editor.execute('findNext');
editor.execute('replace', 'new text', state.highlightedResult);

Batch Operations

// Find and replace all in one operation
editor.execute('find', 'search term');
editor.execute('replaceAll', 'replacement', 'search term');

Custom Command Integration

// Create a custom command that uses find and replace
class FindAndHighlightCommand extends Command {
  execute(searchTerm) {
    // Use existing find command
    const findResult = this.editor.execute('find', searchTerm);
    
    // Custom highlighting logic
    this.highlightResults(findResult.results);
  }
}

// Register the custom command
editor.commands.add('findAndHighlight', new FindAndHighlightCommand(editor));

Error Handling

try {
  const result = editor.execute('find', 'search term');
  if (result.results.length === 0) {
    console.log('No results found');
  }
} catch (error) {
  console.error('Find operation failed:', error);
}

Command State Management

Listening to Command Changes

const findCommand = editor.commands.get('find');
const findNextCommand = editor.commands.get('findNext');

// Listen to enabled state changes
findNextCommand.on('change:isEnabled', (evt, propertyName, newValue) => {
  console.log('Find next enabled:', newValue);
});

Programmatic State Queries

// Check command availability
const commands = editor.commands;
console.log('Find available:', commands.get('find').isEnabled);
console.log('Replace available:', commands.get('replace').isEnabled);
console.log('Find next available:', commands.get('findNext').isEnabled);