Search Plugin
- Features- useSearch
- search.lazyIdleTimeout
- search.useCustomHighlightAPI
- search.fuzzySearch
- find Control
- Basic Usage
- Disable Search
- Programmatic Search
- Find Next/Previous
- Open Search Dialog
- Custom Fuzzy Search
- Listen to Search Events
- Performance Tuning
- Search Dialog
- Search Process
- LazyWalker
- Match Finding
- Highlighting Methods
- Replace Operation
- Caching
- Navigation
- openSearchDialog
- openReplaceDialog
- search
- searchNext
- searchPrevious
- afterFindAndSelect
- afterFindAndReplace
 
- Edge Cases
- Notes
- Typical Use Case
- Classes
- Interfaces
Provides find and replace functionality with a visual dialog interface. This plugin allows users to search for text in the editor, navigate between matches, and replace occurrences.

Features
- Visual search dialog with input fields
- Find text with highlighting
- Find next/previous navigation
- Replace functionality
- Match counter display
- Custom fuzzy search algorithm support
- LazyWalker for performance
- CSS Custom Highlight API support
- Auto-scrolling to matches
- Keyboard shortcuts
- Toolbar button with dropdown
- Search results caching
- Event-driven architecture
useSearch
Type: boolean
Default: true
Enables or disables the search plugin entirely.
Example:
const editor = Jodit.make('#editor', {
    useSearch: false
});
search.lazyIdleTimeout
Type: number
Default: 0 (milliseconds)
Timeout for LazyWalker idle state during search. Higher values improve performance for large documents by spreading search work across frames.
Example:
const editor = Jodit.make('#editor', {
    search: {
        lazyIdleTimeout: 100  // 100ms idle timeout
    }
});
search.useCustomHighlightAPI
Type: boolean
Default: true if browser supports CSS.highlights, otherwise false
Uses browser's native CSS Custom Highlight API for highlighting matches instead of wrapping text in spans.
Example:
const editor = Jodit.make('#editor', {
    search: {
        useCustomHighlightAPI: true
    }
});
search.fuzzySearch
Type: FuzzySearch
Default: undefined (uses built-in fuzzy search)
Custom function to search for strings within text. Must implement the FuzzySearch interface: (needle: string, haystack: string, offset: number) => [index: number, length: number].
Example:
const editor = Jodit.make('#editor', {
    search: {
        fuzzySearch: (needle, haystack, offset) => {
            // Case-insensitive search
            const index = haystack.toLowerCase().indexOf(needle.toLowerCase(), offset);
            return [index, needle.length];
        }
    }
});
find Control
Icon: 'search'
Tooltip: 'Find'
Group: 'search'
Dropdown List:
- search: "Find" - Opens search dialog
- findNext: "Find Next" - Finds next match
- findPrevious: "Find Previous" - Finds previous match
- replace: "Replace" - Opens replace dialog
Opens search/replace dialog or navigates through matches.
Basic Usage
const editor = Jodit.make('#editor');
// Click Find button in toolbar
// Enter search query
// Use navigation buttons
Disable Search
const editor = Jodit.make('#editor', {
    useSearch: false
});
// or
const editor2 = Jodit.make('#editor2', {
    disablePlugins: ['search']
});
Programmatic Search
const editor = Jodit.make('#editor');
editor.value = '<p>this text contains some text</p>';
// Find and select first match
editor.e.fire('search', 'some text').then(() => {
    console.log('Selected!');
});
Find Next/Previous
const editor = Jodit.make('#editor');
editor.value = '<p>this text contains some text and some text</p>';
// Find first match
editor.e.fire('search', 'some text').then(() => {
    console.log('First match selected');
    // Find next match
    editor.e.fire('searchNext', 'some text').then(() => {
        console.log('Second match selected');
    });
});
Open Search Dialog
const editor = Jodit.make('#editor');
// Open search dialog
editor.execCommand('openSearchDialog');
// Open replace dialog
editor.execCommand('openReplaceDialog');
Custom Fuzzy Search
const editor = Jodit.make('#editor', {
    search: {
        fuzzySearch: (needle, haystack, offset) => {
            // Exact match only
            const index = haystack.indexOf(needle, offset);
            return [index, needle.length];
        }
    }
});
Listen to Search Events
const editor = Jodit.make('#editor');
editor.e.on('afterFindAndSelect', () => {
    console.log('Match selected');
});
editor.e.on('afterFindAndReplace', () => {
    console.log('Text replaced');
});
Performance Tuning
const editor = Jodit.make('#editor', {
    search: {
        lazyIdleTimeout: 200  // Spread search across frames
    }
});
Search Dialog
The plugin provides a UI with:
- Search input field
- Replace input field (in replace mode)
- Find Next button
- Find Previous button
- Replace button
- Match counter (e.g., "1 of 5")
Search Process
- Input Query: User types in search field
- Find Matches: Plugin walks DOM tree to find all occurrences
- Highlight: Wraps matches in spans or uses Highlight API
- Cache Results: Stores found ranges for reuse
- Navigate: User clicks next/previous to cycle through matches
- Select: Current match is selected in editor
- Scroll: Editor scrolls to make selected match visible
LazyWalker
For performance, search uses LazyWalker:
- Processes DOM nodes incrementally
- Yields to browser between chunks
- Prevents UI freezing on large documents
- Respects lazyIdleTimeoutfor frame splitting
Match Finding
The SentenceFinder class:
- Collects text nodes from editor
- Builds continuous text content
- Applies fuzzy search algorithm
- Returns array of ISelectionRangefor matches
Highlighting Methods
CSS Custom Highlight API (useCustomHighlightAPI: true):
- Uses browser's native CSS.highlights
- No DOM modification
- Better performance
- Limited browser support
Span Wrapping (useCustomHighlightAPI: false):
- Wraps matches in <span>withjd-tmp-selectionattribute
- Works in all browsers
- Cleaned up via clearSelectionWrappers()
- Removed from HTML output via afterGetValueFromEditorevent
Replace Operation
When replacing:
- Find Match: Locates current match in ranges
- Delete Content: Removes match text from range
- Insert Replacement: Inserts new text node
- Clear Highlights: Removes all highlight wrappers
- Set Cursor: Positions cursor after replacement
- Re-search: Finds matches again with updated content
- Sync: Updates editor value
Caching
Search results cached by query string:
- Key: search query
- Value: Promise<ISelectionRange[]>
- Invalidated on editor change
- Validation checks node connectivity
Navigation
Find Next:
- Increments current index
- Wraps to 0 at end
- Selects range at new index
- Scrolls into view
Find Previous:
- Decrements current index
- Wraps to last at beginning
- Selects range at new index
- Scrolls into view
openSearchDialog
Opens the search dialog.
Syntax:
editor.execCommand('openSearchDialog')
Example:
editor.execCommand('openSearchDialog');
openReplaceDialog
Opens the replace dialog (search dialog with replace field).
Syntax:
editor.execCommand('openReplaceDialog')
Example:
editor.execCommand('openReplaceDialog');
search
Fired to find and select first match of query.
Parameters:
- query(string): Text to search for
Returns: Promise
Example:
editor.e.fire('search', 'hello').then((found) => {
    console.log(found ? 'Found' : 'Not found');
});
searchNext
Fired to find and select next match.
Parameters:
- query(string, optional): Text to search for
Example:
editor.e.fire('searchNext', 'hello');
searchPrevious
Fired to find and select previous match.
Parameters:
- query(string, optional): Text to search for
Example:
editor.e.fire('searchPrevious', 'hello');
afterFindAndSelect
Fired after a match is selected.
Example:
editor.e.on('afterFindAndSelect', () => {
    console.log('Match selected');
});
afterFindAndReplace
Fired after text is replaced.
Example:
editor.e.on('afterFindAndReplace', () => {
    console.log('Text replaced');
});
Edge Cases
- 
Empty Query: Returns empty results array 
- 
No Matches: Dialog shows "0 of 0" 
- 
Query Change: Clears highlights and re-searches 
- 
Editor Change: Invalidates cache 
- 
Mode Switch: Closes dialog on mode change 
- 
Dialog Close: Clears highlights and resets counters 
- 
Node Disconnection: Cache validation checks node connectivity 
- 
Click in Editor: Resets current index 
- 
Large Documents: LazyWalker prevents UI freezing 
- 
Selection State: Saved/restored during operations 
Notes
- Plugin is class-based, extends Pluginbase class
- Uses @watch,@autobind,@cache,@cacheddecorators
- Search button in 'search' toolbar group
- Custom UI class UISearchfor dialog
- Event namespacing .searchfor clean removal
- Cache stored as IDictionary keyed by query
- LazyWalker instances: walker(main),walkerCount(counting)
- The SentenceFinderclass handles text node traversal
- Highlight wrappers have jd-tmp-selectionattribute
- CSS Custom Highlight API check: typeof globalWindow.Highlight !== 'undefined'
- Cleanup via clearSelectionWrappers()andclearSelectionWrappersFromHTML()
- Drawing highlights uses requestAnimationFramefor performance
- Batch size: 5 ranges per frame
- The highlightTextRanges()helper creates highlight spans
- Current index is 1-based for display (0-based internally)
- The plugin properly cleans up event listeners on destruction
- Replace updates cursor position after insertion
- Scroll uses scrollIntoViewIfNeeded()helper
- Find operations return Promises for async completion
- The findCurrentIndexInRanges()method matches current selection
- Cache invalidation on change event
- Debounced counter updates on keydown/mousedown
- Selection info stored in ui.selInfo
- The tryScrollToElement()method handles scroll for matches
- Counter updates triggered via ui:needUpdateCountersevent
- Replace triggered via ui:pressReplaceButtonevent
- The wrapFrameRequesttracks animation frame ID
- Previous query tracked to detect query changes
- Draw promise allows waiting for highlight completion
Typical Use Case
Users need to locate specific text in documents and optionally replace it. The search plugin provides this by:
- Providing visual search dialog
- Highlighting all matches in editor
- Showing match count (e.g., "3 of 15")
- Allowing navigation between matches
- Supporting find and replace operations
This improves user experience by:
- Making text easy to locate visually
- Supporting keyboard-driven workflow
- Handling large documents efficiently
- Providing familiar find/replace interface
- Auto-scrolling to matches
Classes
Interfaces
clearNativeSelection
clearNativeSelection(jodit): void
Parameters
| Name | Type | 
|---|---|
| jodit | IJodit | 
Returns
void
Defined in
jodit/src/plugins/search/helpers/highlight-text-ranges.ts:147