VSCode Style Search & Replace for CodeMirror

A VSCode-styled Search and Replace extension for CodeMirror 6, built on top of the core @codemirror/search package. This plugin provides a familiar find/replace experience inspired by Visual Studio Code, complete with custom keybindings and inline input styling.

✨ Features

• Find and Replace support with UI controls
• Toggle options: Regex, Case Sensitivity, Whole Word
• Inline match highlighting
• Keyboard shortcuts modeled after VSCode
• Fully integrated with CodeMirror's state and view systems

🚀 Installation

Make sure you have @codemirror/view, @codemirror/state, and @codemirror/search installed:

npm install @rigstech/codemirror-vscodeSearch

Then include the plugin in your CodeMirror setup.

🛠️ Usage

Import

import { vscodeSearch, customSearchKeymap } from '@rigstech/codemirror-vscodeSearch';
import { keymap } from '@codemirror/view';

Add to Editor Extensions

const editor = new EditorView({
  state: EditorState.create({
    doc: 'Your initial content here...',
    extensions: [
      vscodeSearch,
      keymap.of([
        // Your other keymaps...
        ...customSearchKeymap
      ])
    ]
  }),
  parent: document.getElementById('editor')!
});

🎹 Default Keybindings

Shortcut	Action
Mod+F	Show Search UI
Mod+H	Show Replace UI
Escape	Hide Search UI
Enter	Find/Replace Next
Shift+Enter	Find Previous
Mod+Alt+Enter	Replace All
Alt+C	Toggle Case Sensitivity
Alt+W	Toggle Whole Word
Alt+R	Toggle Regex
Mod+A	Select All (search/replace box)

Mod is Cmd on macOS and Ctrl on Windows/Linux.

📦 Project Structure

This plugin is structured into:

commands:               Codemirror commands for hotkeys
keymap:                 Keymap defition
plugin:                 Main ViewPlugin
state:                  Extension States
theme:                  Styling
utility:                Helper Functions
FindReplaceControl:     Extension Logic

📄 License

MIT — feel free to use and modify for your own projects!