@wordpress/components/build/text-highlight/index.js

UI components for WordPress.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.TextHighlight = void 0;
var _element = require("@wordpress/element");
var _strings = require("../utils/strings");
var _jsxRuntime = require("react/jsx-runtime");
/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

/**
 * Highlights occurrences of a given string within another string of text. Wraps
 * each match with a `<mark>` tag which provides browser default styling.
 *
 * ```jsx
 * import { TextHighlight } from '@wordpress/components';
 *
 * const MyTextHighlight = () => (
 *   <TextHighlight
 *     text="Why do we like Gutenberg? Because Gutenberg is the best!"
 *     highlight="Gutenberg"
 *   />
 * );
 * ```
 */
const TextHighlight = props => {
  const {
    text = '',
    highlight = ''
  } = props;
  const trimmedHighlightText = highlight.trim();
  if (!trimmedHighlightText) {
    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
      children: text
    });
  }
  const regex = new RegExp(`(${(0, _strings.escapeRegExp)(trimmedHighlightText)})`, 'gi');
  return (0, _element.createInterpolateElement)(text.replace(regex, '<mark>$&</mark>'), {
    mark: /*#__PURE__*/(0, _jsxRuntime.jsx)("mark", {})
  });
};
exports.TextHighlight = TextHighlight;
var _default = exports.default = TextHighlight;
//# sourceMappingURL=index.js.map