Search Replace Dialog Block for React

So you can see it without a click. On load the bar is a copy drawn in place at the end of the frame: a native dialog element with no scrim, so nothing is trapped or focused and the text beside it keeps working. The Find and replace button opens the real bar as a non-modal Popover that hangs from the button (Escape closes it and focus goes back to the button), and the copy stays closed until a reload. Both show the same FindBody component and share the block's state. In your app keep the Popover, or dock a panel of your own to the editor, and drop the copy: the "in-place" state and the dialog element beside the text.

It is a plain text search over each line, never a regular expression, so any character you type is just itself. Match case compares letters exactly, and Whole word only counts a match that has no letter, digit or underscore next to it, so "launch" skips "relaunch" and "launched". Matches never overlap, they are counted in reading order, and the count in the field and the one on Replace all always agree. A regular-expression mode is left out on purpose: it would need its own handling of invalid patterns.

Replace swaps the current match and moves to the next one after it, so a replacement that contains the search text is not replaced again. Replace all swaps every match in one go and says how many in a polite message. Both rewrite the page's text in this tab only, and the count updates at once; when nothing matches, the buttons stay in the page but turn quiet and say "No matches to replace" when pressed.

A pale tint alone is lost on some screens and for some eyes. Each match has a real mark element with an underline and a light fill, and the current match adds a heavier underline and a ring, so it is found by shape and weight. The count is text in the field and a polite message after a short pause when you type, and at once when you press Next or Previous.

No. The ten lines are a typed constant held in state, and the replacements live in this tab. In your app run matchesOf over your editor's text model instead, mark the ranges it returns, and apply Replace and Replace all as one edit so Undo takes them back together.

Yes. The bar is named Find and replace, focus starts in the Find field, Enter and Shift Enter move through the matches, and Escape closes it and returns focus to the header button; the page can be scrolled with the keyboard while the bar is open. The trigger is passed to PopoverTrigger through render, and the popover is controlled with open and onOpenChange. The copy shown on load moves no focus; Escape inside it and its close button close it and put focus on the header button.