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

tessl/npm-ckeditor--ckeditor5-find-and-replace

Find and replace feature for CKEditor 5 with comprehensive search capabilities and UI integration.

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@ckeditor/ckeditor5-find-and-replace@46.0.x

To install, run

npx @tessl/cli install tessl/npm-ckeditor--ckeditor5-find-and-replace@46.0.0

index.mddocs/

CKEditor 5 Find and Replace

CKEditor 5 Find and Replace is a comprehensive plugin that adds sophisticated search and replace functionality to CKEditor 5. It provides advanced search capabilities with support for case-sensitive matching, whole word matching, and regular expressions, along with navigation through search results and both individual and batch replacement operations.

Package Information

  • Package Name: @ckeditor/ckeditor5-find-and-replace
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install ckeditor5 (included in the main CKEditor 5 package)

Core Imports

import { FindAndReplace } from "@ckeditor/ckeditor5-find-and-replace";

For accessing individual components:

import { 
  FindAndReplace, 
  FindAndReplaceEditing, 
  FindAndReplaceUI,
  FindCommand,
  ReplaceCommand 
} from "@ckeditor/ckeditor5-find-and-replace";

Basic Usage

Adding to Editor Configuration

import { ClassicEditor } from '@ckeditor/ckeditor5-editor-classic';
import { FindAndReplace } from '@ckeditor/ckeditor5-find-and-replace';

ClassicEditor
  .create(document.querySelector('#editor'), {
    plugins: [FindAndReplace],
    findAndReplace: {
      uiType: 'dialog' // or 'dropdown'
    }
  })
  .then(editor => {
    // Editor ready with find and replace functionality
    console.log('Editor was initialized', editor);
  })
  .catch(error => {
    console.error(error);
  });

Programmatic Usage

// Access the editing plugin
const findAndReplaceEditing = editor.plugins.get('FindAndReplaceEditing');

// Perform a search
const results = findAndReplaceEditing.find('search term', {
  matchCase: true,
  wholeWords: false
});

// Execute commands
editor.execute('find', 'search term');
editor.execute('replace', 'replacement text', results.first);
editor.execute('replaceAll', 'replacement text', 'search term');

// 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);
}

Architecture

CKEditor 5 Find and Replace is built around several key components:

  • Plugin Architecture: Main coordinating plugin with separate editing and UI plugins
  • Command System: Integration with CKEditor's command system for find/replace operations
  • State Management: Observable state object with automatic UI synchronization
  • Event System: Comprehensive event system for UI interactions and custom integrations
  • Extensibility: Callback-based search system allowing custom search implementations

Capabilities

Plugin System

Core plugin classes that integrate the find and replace functionality into CKEditor 5. The main FindAndReplace plugin coordinates between editing and UI features.

class FindAndReplace extends Plugin {
  static requires: [FindAndReplaceEditing, FindAndReplaceUI];
  static pluginName: 'FindAndReplace';
  static isOfficialPlugin: true;
  init(): void;
}

Plugin System

Command System

Complete command system for executing find and replace operations programmatically. Includes commands for search, navigation, and replacement operations.

class FindCommand extends Command {
  constructor(editor: Editor, state: FindAndReplaceState);
  execute(callbackOrText: string | FindCallback, options?: FindAttributes): {
    results: Collection<FindResultType>;
    findCallback: FindCallback;
  };
}

Command System

State Management and UI

Observable state management with comprehensive UI components including form views, focus management, and event handling.

class FindAndReplaceState extends ObservableMixin {
  constructor(model: Model);
  results: Collection<FindResultType>;
  highlightedResult: FindResultType | null;
  searchText: string;
  replaceText: string;
  matchCase: boolean;
  matchWholeWords: boolean;
}

State Management and UI

Types and Configuration

Complete type definitions for all interfaces, configuration options, and event types used throughout the find and replace system.

interface FindAndReplaceConfig {
  uiType?: 'dialog' | 'dropdown';
}

type FindResultType = {
  id?: string;
  label?: string;
  start?: number;
  end?: number;
  marker?: Marker;
};

Types and Configuration