Search extension

Search for text/pattern in SuperEditor content.

Select text and apply different sizes. Supports pt, px, em, and rem units with automatic min/max clamping.

Use case

• Find and replace: quickly locate words or phrases and replace them.
• Content navigation: jump to the next or previous match without scrolling manually.
• Highlighting: visually emphasize search results for the user.
• Custom workflows: integrate search into toolbars, command palettes, or keyboard shortcuts.

Commands

goToFirstMatch

Navigate to the first search match

Scrolls editor to the first match from previous search

Example:

Usage

editor.commands.goToFirstMatch()

import { SuperDoc } from 'superdoc';
import 'superdoc/style.css';

const superdoc = new SuperDoc({
  selector: '#editor',
  document: yourFile,
  onReady: (superdoc) => {
    const editor = superdoc.activeEditor;
    editor.commands.goToFirstMatch()
  },
});

search

Search for string matches in editor content

Returns array of SearchMatch objects with positions and IDs

Example:

Usage

const matches = editor.commands.search('test string')
const regexMatches = editor.commands.search(/test/i)

import { SuperDoc } from 'superdoc';
import 'superdoc/style.css';

const superdoc = new SuperDoc({
  selector: '#editor',
  document: yourFile,
  onReady: (superdoc) => {
    const editor = superdoc.activeEditor;
    const matches = editor.commands.search('test string')
    const regexMatches = editor.commands.search(/test/i)
  },
});

Parameters:

patternInput · String | RegExp · required

Search string, regex, or regex shorthand (e.g., '/pattern/flags')

options · Object

Optional settings

options.highlight · boolean · default: "true"

Apply CSS highlight classes to matches

options.maxMatches · number · default: "1000"

Maximum number of matches to return

goToSearchResult

Navigate to a specific search match

Scrolls to match and selects it

Example:

Usage

const searchResults = editor.commands.search('test string')
editor.commands.goToSearchResult(searchResults[3])

import { SuperDoc } from 'superdoc';
import 'superdoc/style.css';

const superdoc = new SuperDoc({
  selector: '#editor',
  document: yourFile,
  onReady: (superdoc) => {
    const editor = superdoc.activeEditor;
    const searchResults = editor.commands.search('test string')
    editor.commands.goToSearchResult(searchResults[3])
  },
});

Parameters:

match · SearchMatch · required

Match object to navigate to

Types

SearchMatch

Search match object

Show Properties

text · string · required

Found text

from · number · required

From position

to · number · required

To position

id · string · required

ID of the search match

Source code