Skip to content

fix: make editor search persistent and safe - #592

Open
faisalahammad wants to merge 1 commit into
codesnippetspro:core-betafrom
faisalahammad:fix/515-persistent-editor-search/core
Open

faisalahammad wants to merge 1 commit into
codesnippetspro:core-betafrom
faisalahammad:fix/515-persistent-editor-search/core

Conversation

@faisalahammad

Copy link
Copy Markdown

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 findPersistent command registered at runtime using cm.openDialog() and cm.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}-F binding to findPersistent alongside 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-editor as its only dependency.
After: Adds wp-i18n as a dependency and calls wp_set_script_translations() for the code-snippets-code-editor handle.
Why: The new user-facing strings ("No results found", "Match x of y") translate in the non-React entry. The existing Alt-F => findPersistent binding 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 input rules): 14em minimum field width, flex layout, theme tokens, :focus-visible outlines 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

  1. Open a snippet for editing, press Ctrl+F (Cmd+F on Mac).
  2. Type a query that exists in the code, press Enter repeatedly.
    Result: the dialog stays open, focus stays in the input, selection cycles through matches, status shows "Match x of y".

Test 2: No matches

  1. Press Ctrl+F, type a query that does not exist, press Enter.
    Result: dialog stays open, red "No results found" appears, no typing reaches the editor.

Test 3: Close paths

  1. Press Escape inside the dialog, then reopen with Ctrl+F and click the close button.
    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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Make snippet editor search persistent and safe

1 participant