@codemirror/search

What is @codemirror/search?

@codemirror/search is a package for the CodeMirror 6 text editor that provides search and replace functionality. It allows users to perform text searches, highlight search results, and replace text within the editor.

What are @codemirror/search's main functionalities?

Basic Search

This code sets up a basic CodeMirror editor with the search functionality enabled. It demonstrates how to perform a basic search for the word 'sample' within the document.

import { searchKeymap, search } from '@codemirror/search';
import { EditorState, EditorView, basicSetup } from '@codemirror/basic-setup';

const state = EditorState.create({
  doc: 'This is a sample document. You can search within this text.',
  extensions: [basicSetup, searchKeymap]
});

const view = new EditorView({
  state,
  parent: document.body
});

// To perform a search
const searchQuery = search('sample');
view.dispatch({ effects: searchQuery });

Search and Replace

This code sets up a basic CodeMirror editor with search and replace functionality. It demonstrates how to replace the word 'sample' with 'example' within the document.

import { searchKeymap, replace } from '@codemirror/search';
import { EditorState, EditorView, basicSetup } from '@codemirror/basic-setup';

const state = EditorState.create({
  doc: 'This is a sample document. You can replace text within this text.',
  extensions: [basicSetup, searchKeymap]
});

const view = new EditorView({
  state,
  parent: document.body
});

// To perform a search and replace
const replaceQuery = replace('sample', 'example');
view.dispatch({ effects: replaceQuery });

Highlight Search Results

This code sets up a basic CodeMirror editor with search highlighting enabled. It demonstrates how to highlight the search results for the word 'sample' within the document.

import { searchKeymap, highlightSearch } from '@codemirror/search';
import { EditorState, EditorView, basicSetup } from '@codemirror/basic-setup';

const state = EditorState.create({
  doc: 'This is a sample document. Highlighting search results is useful.',
  extensions: [basicSetup, searchKeymap, highlightSearch()]
});

const view = new EditorView({
  state,
  parent: document.body
});

// To highlight search results
const searchQuery = search('sample');
view.dispatch({ effects: searchQuery });

Other packages similar to @codemirror/search

codemirror

The 'codemirror' package is the core library for the CodeMirror editor. It provides the basic text editor functionality but does not include advanced search and replace features out of the box. Additional functionality can be added through extensions like @codemirror/search.

ace-builds

The 'ace-builds' package is a standalone code editor similar to CodeMirror. It includes built-in search and replace functionality, but the API and customization options differ from those of CodeMirror. Ace is known for its performance and ease of integration.

monaco-editor

The 'monaco-editor' package is the code editor that powers Visual Studio Code. It offers advanced search and replace features, along with many other functionalities. Monaco is highly customizable and provides a rich API, making it a strong alternative to CodeMirror.

README

@codemirror/search

[ WEBSITE | DOCS | ISSUES | FORUM | CHANGELOG ]

This package implements search functionality for the CodeMirror code editor.

The project page has more information, a number of examples and the documentation.

This code is released under an MIT license.

We aim to be an inclusive, welcoming community. To make that explicit, we have a code of conduct that applies to communication around the project.

Changelog

6.5.7 (2024-11-01)

Bug fixes

Fix an issue where findNext and findPrevious would do nothing when the only match in the document was partially selected.

Fix an infinite loop in SearchCursor when the normalizer function deletes characters.