Suppose a fictional event page changes its meeting place from North foyer to West entrance. The phrase appears in the visitor paragraph and in an HTML comment describing the old plan. A source-wide replacement can change both. The author needs to inspect each occurrence before deciding whether the historical comment should change too.
Enable the editor's search controls
For an existing CodeMirror 6 application with compatible packages:
import { keymap } from '@codemirror/view';
import { search, searchKeymap, openSearchPanel }
from '@codemirror/search';
const eventPageSearch = [
search({ top: true }),
keymap.of(searchKeymap)
];
Add these extensions to that editor's configuration. If the application already uses a setup that includes search bindings, inspect that setup before adding another keymap. This fragment supplies search support, not the editor's entire mount, language mode, or save service.
An external button can call openSearchPanel(view) with the current editor instance. Use a visible button label such as “Find in this page's source.” That scope helps readers distinguish the tool from their browser's page search and from a workspace-wide file search.
Set a literal query without treating it as a regular expression
The application can start this particular search with a prepared replacement:
import { SearchQuery, setSearchQuery, findNext }
from '@codemirror/search';
const entranceQuery = new SearchQuery({
search: 'North foyer',
replace: 'West entrance',
caseSensitive: true,
literal: true,
regexp: false
});
view.dispatch({ effects: setSearchQuery.of(entranceQuery) });
openSearchPanel(view);
findNext(view);
Search state must be installed for setSearchQuery to take effect; the earlier search() extension does that. literal: true keeps backslash sequences from being interpreted as special line or tab characters in a string query. regexp: false treats the search as ordinary text. The current query is part of editor state, so update it through the supported effect instead of mutating an earlier query object.
Inspect source matches before replacing them
Use this original fixture in a disposable development copy:
<p>Meet the guide in the North foyer.</p>
<!-- Previous plan: North foyer; retain until review closes. -->
<p>The north foyer noticeboard will be removed later.</p>
The case-sensitive query has two exact matches. The lowercase phrase in the last paragraph does not match. Inspect the selected range before using the panel's replacement control. Replacing the visitor paragraph does not establish that the historical comment should be rewritten.
replaceAll(view) replaces all matches of the active query in the current document. It does not understand visible text, comments, attributes, or event approval. If your tool needs “visitor text only,” supply a structure-aware editing operation rather than labeling a raw source replacement that way.
For regular expressions, validate query.valid and explain replacement behavior in the interface. Start with an exact string when the user is changing one known location name. Broader patterns deserve a preview of their actual matches.
Read the result, then persist it
After choosing the intended replacement, inspect view.state.doc.toString() and any rendered preview used by the application. The visitor paragraph should say West entrance; the comment should follow the deliberate review decision. Read the lowercase paragraph separately because the case-sensitive operation left it unchanged.
Save through the application's existing document service, reopen the same record, and repeat the search to confirm what remains. The CodeMirror merge guide is useful when another person must compare the finished source with an approved baseline. Keep the search operation, review decision, and saved result tied to the same event-page revision.