Skip to main content


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


# peer depsnpm install install


Please use the stylesheet style.css like:

import '';

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.


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