@wordpress/components
Version:
UI components for WordPress.
8 lines (7 loc) • 1.83 kB
Source Map (JSON)
{
"version": 3,
"sources": ["../../src/text-highlight/index.tsx"],
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { createInterpolateElement } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { escapeRegExp } from '../utils/strings';\nimport { Fragment as _Fragment, jsx as _jsx } from \"react/jsx-runtime\";\n/**\n * Highlights occurrences of a given string within another string of text. Wraps\n * each match with a `<mark>` tag which provides browser default styling.\n *\n * ```jsx\n * import { TextHighlight } from '@wordpress/components';\n *\n * const MyTextHighlight = () => (\n * <TextHighlight\n * text=\"Why do we like Gutenberg? Because Gutenberg is the best!\"\n * highlight=\"Gutenberg\"\n * />\n * );\n * ```\n */\nexport const TextHighlight = props => {\n const {\n text = '',\n highlight = ''\n } = props;\n const trimmedHighlightText = highlight.trim();\n if (!trimmedHighlightText) {\n return /*#__PURE__*/_jsx(_Fragment, {\n children: text\n });\n }\n const regex = new RegExp(`(${escapeRegExp(trimmedHighlightText)})`, 'gi');\n return createInterpolateElement(text.replace(regex, '<mark>$&</mark>'), {\n mark: /*#__PURE__*/_jsx(\"mark\", {})\n });\n};\nTextHighlight.displayName = 'TextHighlight';\nexport default TextHighlight;"],
"mappings": ";AAGA,SAAS,gCAAgC;AAKzC,SAAS,oBAAoB;AAC7B,SAAS,YAAY,WAAW,OAAO,YAAY;AAgB5C,IAAM,gBAAgB,WAAS;AACpC,QAAM;AAAA,IACJ,OAAO;AAAA,IACP,YAAY;AAAA,EACd,IAAI;AACJ,QAAM,uBAAuB,UAAU,KAAK;AAC5C,MAAI,CAAC,sBAAsB;AACzB,WAAoB,qBAAK,WAAW;AAAA,MAClC,UAAU;AAAA,IACZ,CAAC;AAAA,EACH;AACA,QAAM,QAAQ,IAAI,OAAO,IAAI,aAAa,oBAAoB,CAAC,KAAK,IAAI;AACxE,SAAO,yBAAyB,KAAK,QAAQ,OAAO,iBAAiB,GAAG;AAAA,IACtE,MAAmB,qBAAK,QAAQ,CAAC,CAAC;AAAA,EACpC,CAAC;AACH;AACA,cAAc,cAAc;AAC5B,IAAO,yBAAQ;",
"names": []
}