Repository navigation
fix: make editor search persistent and safe - #592
Open
faisalahammad wants to merge 1 commit into
Open
faisalahammad wants to merge 1 commit into
faisalahammad wants to merge 1 commit into
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
The snippet editor search dialog opened with Ctrl+F or Cmd+F closed as soon as Enter was pressed, returning focus to the code area even when the query had no matches or the user was only checking a result. It was easy to type or paste into the code by mistake. This change replaces the stock dialog with a persistent one built on CodeMirror's own search APIs. The dialog stays open, keeps focus in the search field, reports every result, and returns focus to the editor only on Escape or close.
Fixes #515
Changes
src/js/utils/editorSearch.ts (new)
After: Custom
findPersistentcommand registered at runtime usingcm.openDialog()andcm.getSearchCursor(). The dialog shows a labelled search field, a live match counter, and a close button. Enter and Shift+Enter step through matches,aria-live="polite"announces "Match x of y" or "No results found", and Enter never submits the form. Prefills from the current selection or the last query.Why: Built on CodeMirror's existing search engine rather than a separate one, as the issue requires.
src/js/components/EditMenu/SnippetForm/fields/CodeEditor.tsx
Before: Only Ctrl-S and Ctrl-Enter were bound here.
After: Adds a
${controlKey}-Fbinding tofindPersistentalongside the existing save keys.Why: Gives Ctrl+F (Cmd+F on Mac) a dedicated binding for the default keymap.
src/js/entries/editor.ts
After: Imports the new module and registers the command for every editor entry.
Why: One place so the edit screen and settings preview both get the same dialog.
src/php/Utils/editor.php
Before: The editor script had
code-editoras its only dependency.After: Adds
wp-i18nas a dependency and callswp_set_script_translations()for thecode-snippets-code-editorhandle.Why: The new user-facing strings ("No results found", "Match x of y") translate in the non-React entry. The existing
Alt-F => findPersistentbinding now uses the same dialog.src/css/common/_codemirror.scss
After: Dialog styles scoped under
.CodeMirror-dialog(needed to outrank WP core's.CodeMirror-dialog inputrules): 14em minimum field width, flex layout, theme tokens,:focus-visibleoutlines on field and close button, red no-results state.Why: Meets the wide-field and accessible-focus criteria against WP core's stock dialog CSS.
tests/e2e/editor-search.spec.ts (new)
After: 12 Playwright tests covering open and focus, Enter keeping focus and stepping matches, Shift+Enter backwards, wrap-around, the no-match state, Escape and close-button focus return, all four keymaps (Default/Vim/Emacs/Sublime) opening the dialog, and Tab inserting a tab under the Default keymap.
Testing
Test 1: Persistent search with matches
Result: the dialog stays open, focus stays in the input, selection cycles through matches, status shows "Match x of y".
Test 2: No matches
Result: dialog stays open, red "No results found" appears, no typing reaches the editor.
Test 3: Close paths
Result: both paths close the dialog and return focus to the editor.
Screenshots
No screenshots. Visual changes are limited to the dialog styling, covered by the test steps above.