zim-fuzzysearch/lib/components/hooks/useMark.js

Client side fuzzy search combined with seperate configurable result highlighting.

import Mark from "mark.js";
/**
 * Uses library mark.js (https://markjs.io/#getting-to-know-markjs) to highlight
 * html text nodes according to given search value. For implementation details see link.
 * @param search Optional: string to be searched.
 * @param markOptions Optional: mark.js-option object to customize search.
 */
export var useMarkJs = function (search, markOptions) {
    var markInstance = null;
    /**
     * Reads text content of given element and nests matched strings in <mark> tags according to given search value.
     * (can be configured via the options object)
     * @param elem Element to be read out. Best given as ref.current.
     * @param value optional: String to be searched -> will default to global saerch string.
     * @param options optional: mark.js option object -> will default to global option.
     */
    var mark = function (elem, value, options) {
        if (value === void 0) { value = search; }
        if (options === void 0) { options = markOptions; }
        if (!value)
            return;
        markInstance = markInstance || new Mark(elem);
        markInstance.unmark();
        markInstance.mark(value, options);
    };
    /**
     * Reads text content of given element and nests matched strings in <mark> tags according to given regex.
     * (can be configured via the options object)
     * @param elem Element to be read out. Best given as ref.current.
     * @param regex Regex to be searched.
     * @param options optional: mark.js option object -> will default to global option.
     */
    var markRegEx = function (elem, regex, options) {
        if (options === void 0) { options = markOptions; }
        markInstance = markInstance || new Mark(elem);
        markInstance.unmark();
        markInstance.markRegExp(regex, options);
    };
    return {
        mark: mark,
        markRegEx: markRegEx
    };
};