FindReplace

A find and replace bar over the matcher of an editor.

tsx

import { FindReplace } from '@adecore/editor-react';
import { EditorFrame } from '../shared/editor-frame.tsx';
import { SAMPLE, useEditor } from '../shared/editor.ts';

const OPTIONS = { text: SAMPLE, language: 'typescript', theme: 'demo' } as const;

export default function FindReplaceDemo() {
    const { host, editor } = useEditor(OPTIONS);

    return <EditorFrame host={host} toolbar={editor === null ? undefined : <FindReplace editor={editor} className="w-full" />} />;
}

tsx

<FindReplace editor={editor} onClose={() => setFindOpen(false)} />

Prop	Type	Meaning
`editor`	`Editor`	The editor to search
`onClose`	`() => void`	Escape in the bar; the bar does not hide itself
`className`	`string`	On the bar

The bar has case, whole word and regular expression toggles, a search in the selection, the count of matches, previous and next, and a replace row with preserve case, replace and replace all. Enter goes to the next match and Shift+Enter to the previous one. A regular expression that does not parse says so instead of searching. Unmounting the bar ends the find.

Whether the bar shows, and which key opens it, is the app's. The findNext, findPrevious and replace ids of the key table name keys for that.

FindReplace ​

FindReplace