Skip to main content

@bangle.dev/search

contrib

This package allows your to highlight search text in your editor.

Installation#

# peer depsnpm install @bangle.dev/core @bangle.dev/pmnpm install @bangle.dev/search

Styling#

Please use the stylesheet style.css like:

import '@bangle.dev/search/style.css';

search: Component#

spec({ ... }): Component#

plugins({ ... }): Plugins#

Named parameters:

  • key: ?Prosemirror.PluginKey

  • query: Regex | string | undefined
    The search query to determine which text needs highlight.

  • className: ?string="bangle-search-match"
    The class name of the search highlight element.

  • maxHighlights: ?number=1500
    The maximum number of search highlights.

commands: CommandObject#

  • updateSearchQuery(key: Prosemirror.PluginKey, query: Regex | string | undefined): Command
    Updates the search query. Set the query to undefined to clear all highlights.

Usage

const searchPluginKey = new PluginKey('search');
const plugins = [  // other plugins  search.plugins({ query: /hello/, key: searchPluginKey })];
// commandupdateSearchQuery(searchPluginKey, query: undefined)