Plugin System

/**
 * The find and replace plugin. This is a "glue" plugin which loads the 
 * editing and UI features and coordinates their interactions.
 */
class FindAndReplace extends Plugin {
  /** Required plugins */
  static requires: [FindAndReplaceEditing, FindAndReplaceUI];
  /** Plugin name identifier */
  static pluginName: 'FindAndReplace';
  /** Indicates this is an official CKEditor plugin */
  static isOfficialPlugin: true;
  
  /** Initializes the plugin and sets up event coordination */
  init(): void;
}

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

ClassicEditor
  .create(document.querySelector('#editor'), {
    plugins: [FindAndReplace],
    findAndReplace: {
      uiType: 'dialog'
    }
  })
  .then(editor => {
    // Find and replace is now available
    const plugin = editor.plugins.get('FindAndReplace');
  });

/**
 * The find and replace editing plugin. Handles model operations, 
 * commands registration, and search functionality.
 */
class FindAndReplaceEditing extends Plugin {
  /** Required plugins */
  static requires: [FindAndReplaceUtils];
  /** Plugin name identifier */
  static pluginName: 'FindAndReplaceEditing';
  /** Indicates this is an official CKEditor plugin */
  static isOfficialPlugin: true;
  
  /** The plugin state object managing search and replace state */
  state?: FindAndReplaceState;
  
  /** Initializes converters, commands, and event handlers */
  init(): void;
  
  /** 
   * Initiates a search operation
   * @param callbackOrText - Search term or custom search callback
   * @param findAttributes - Search options (case sensitivity, whole words)
   * @returns Collection of search results
   */
  find(callbackOrText: string | FindCallback, findAttributes?: FindAttributes): Collection<FindResultType>;
  
  /** Stops active search and clears results */
  stop(): void;
}

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

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

// Access search state
console.log(editing.state.results.length); // Number of results
console.log(editing.state.searchText); // Current search term

// Stop search
editing.stop();

/**
 * The find and replace UI plugin. Provides interface components,
 * keyboard shortcuts, and accessibility features.
 */
class FindAndReplaceUI extends Plugin {
  /** Required plugins */
  static requires: [Dialog];
  /** Plugin name identifier */
  static pluginName: 'FindAndReplaceUI';
  /** Indicates this is an official CKEditor plugin */
  static isOfficialPlugin: true;
  
  /** The form view instance */
  formView: FindAndReplaceFormView | null;
  
  /** 
   * Constructor that sets default UI type configuration
   * @param editor - The editor instance
   */
  constructor(editor: Editor);
  
  /** Sets up UI components, keyboard shortcuts, and accessibility features */
  init(): void;
}

// Access the UI plugin
const ui = editor.plugins.get('FindAndReplaceUI');

// Access the form view
if (ui.formView) {
  // Focus the form
  ui.formView.focus();
  
  // Reset the form
  ui.formView.reset();
}

/**
 * Utility functions for find and replace operations including
 * text conversion, result updates, and search callback creation.
 */
class FindAndReplaceUtils extends Plugin {
  /** Plugin name identifier */
  static pluginName: 'FindAndReplaceUtils';
  /** Indicates this is an official CKEditor plugin */
  static isOfficialPlugin: true;
  
  /**
   * Updates search results from a model range
   * @param range - The model range to search within
   * @param model - The editor model
   * @param findCallback - Search callback function that returns results array or results object
   * @param startResults - Existing results collection
   * @returns Updated results collection
   */
  updateFindResultFromRange(
    range: ModelRange, 
    model: Model, 
    findCallback: ({ item, text }: { item: ModelItem; text: string }) => Array<FindResultType> | { results: Array<FindResultType> }, 
    startResults: Collection<FindResultType> | null
  ): Collection<FindResultType>;
  
  /**
   * Converts model range to text representation
   * @param range - The model range to convert
   * @returns Text representation of the range
   */
  rangeToText(range: ModelRange): string;
  
  /**
   * Creates a text matching callback for find operations
   * @param searchTerm - The text to search for
   * @param options - Search options (case sensitivity, whole words)
   * @returns Find callback function that returns array of results
   */
  findByTextCallback(
    searchTerm: string, 
    options: { matchCase?: boolean; wholeWords?: boolean }
  ): ({ item, text }: { item: ModelItem; text: string }) => Array<FindResultType>;
}

// Access the utils plugin
const utils = editor.plugins.get('FindAndReplaceUtils');

// Create a custom search callback
const callback = utils.findByTextCallback('search term', {
  matchCase: true,
  wholeWords: false
});

// Convert a range to text
const text = utils.rangeToText(modelRange);

// Update results from a range
const results = utils.updateFindResultFromRange(
  range, 
  editor.model, 
  callback, 
  existingResults
);

FindAndReplace
├── FindAndReplaceEditing
│   └── FindAndReplaceUtils
└── FindAndReplaceUI
    └── Dialog (from CKEditor core)

// In FindAndReplace.init()
this.listenTo(formView, 'findNext', (evt, data) => {
  editor.execute('findNext');
});

this.listenTo(formView, 'replace', (evt, data) => {
  editor.execute('replace', data.replaceText, state.highlightedResult);
});

class CustomFindAndReplace extends Plugin {
  static requires = [FindAndReplaceEditing];
  
  init() {
    const editing = this.editor.plugins.get('FindAndReplaceEditing');
    
    // Add custom search functionality
    this.editor.commands.add('customFind', new CustomFindCommand(this.editor, editing.state));
  }
}