Search

Overview

The Search extension provides Search and Replace interface.

KeysDescription
Ctrl+FDisplay the Search toolbar
Ctrl+Shift+FDisplay the Replace toolbar
EscHide the toolbar

Focus this editor and use shortcuts to try them out:

/**
* The component for highlighting lines.
*
* @since 0.0.1
*/
export function ActiveLines( { event, root, options }: Renderer ): void {
const lines = ( root && parseData( root ) ) || options.activeLines;

if ( isArray( lines ) ) {
const activeLines = normalize( lines );

event.on( 'gutter:row:open', ( html, classes, index ) => {
if ( activeLines[ index ] ) {
classes.push( activeLines[ index ] );
}
} );
}
}
/**
 * The component for highlighting lines.
 *
 * @since 0.0.1
 */
export function ActiveLines( { event, root, options }: Renderer ): void {
  const lines = ( root && parseData( root ) ) || options.activeLines;

  if ( isArray( lines ) ) {
    const activeLines = normalize( lines );

    event.on( 'gutter:row:open', ( html, classes, index ) => {
      if ( activeLines[ index ] ) {
        classes.push( activeLines[ index ] );
      }
    } );
  }
}

I used to assign Ctrl+R for the Replace toolbar, but when the editor doesn't have focus, it sometimes accidentally reloads the page! 😫

Usage

Register the Toolbar and the Search extension:

import { RyuseiCode, Toolbar, Resize } from '@ryusei/code';


RyuseiCode.compose( { Toolbar, Search } );
JavaScript

or import the file:

<script src="path-to-the-file/toolbar.min.js"></script>
<script src="path-to-the-file/search.min.js"></script>
HTML

Options

Set an object to search to update default options, or false to deactivate it.

new RyuseiCode( { search: { ... } } );


// or
new RyuseiCode( { search: false } );
JavaScript

hideButtons

Buttons to hide from the toolbar. Accepted values are:

  • 'matchCase'
  • 'wholeWord'
  • 'regexp'
  • 'prevMatch'
  • 'nextMatch'
  • 'replace'
  • 'replaceAll'
new RyuseiCode( {
  search: {
    hideButtons: [ 'matchCase', 'regexp' ],
  }
} );
JavaScript

type: string[] default: []

hideMatchCount

Determines whether to display the match count or not.

type: boolean default: undefined

hideReplace

Enables/disables the Replace toolbar. If true the Replace toolbar will not appear.

type: boolean default: undefined

Methods

toggleMatchCase()

toggleMatchCase( activate: boolean ): void

Toggles the "Match Case" mode.

Params

activate

Optional. Whether to activate the "Match Case" mode or not.

toggleRegExp()

toggleRegExp( activate: boolean ): void

Toggles the "RegExp" mode.

Params

activate

Optional. Whether to activate the "RegExp" mode or not.

toggleWholeWord()

toggleWholeWord( wholeWord: boolean ): void

Toggles the "Match Whole Word" mode.

Params

wholeWord

Optional. Whether to activate the "Match Whole Word" mode or not.

activate()

activate( index: number ): void

Highlights the matched text at the index.

Params

index

An index of the range to highlight.

next()

next(): void

Highlights the next matched text and jumps there.

prev()

prev(): void

Highlights the previous matched text and jumps there.

replace()

replace( replacement: string, index: number ): void

Replaces the search result with the provided replacement string. If the length of ranges does not change after replacing, that means the replacement includes the original word itself.

Params

replacement

Optional. A replacement string.

index

Optional. An index to replace.

replaceAll()

replaceAll( replacement: string ): void

Replaces all matched strings with the replacement.

Params

replacement

Optional. A replacement string.

show()

show( replace: boolean ): void

Shows the toolbar.

Params

replace

Whether to display the replace interface or not.

clear()

clear(): void

Clears all markers.