gcg/static-cms
0
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

docs: fix search character escaping

Browse Source
This commit is contained in:
Daniel Lautzenheiser 2023-11-08 14:42:18 -05:00
parent bb0b709b48
commit 27b6112cba
1 changed files with 91 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
packages/docs/src/components/layout/search/SearchModal.tsx
View File

@ -72,6 +72,10 @@ const StyledSuggestionSection = styled('div')`
gap: 4px;
`;
function escapeRegExp(str: string) {
return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); // $& means the whole matched string
}
interface SearchModalProps {
open: boolean;
onClose: () => void;
@ -102,9 +106,10 @@ const SearchModal: FC<SearchModalProps> = ({ open, onClose, searchablePages }) =
const searchResults = useSearchScores(search, searchablePages);
const renderedResults = useMemo(
() =>
searchResults?.length > 0 ? (
const renderedResults = useMemo(() => {
const escapedSearch = escapeRegExp(search);
return searchResults?.length > 0 ? (
[...Array<unknown>(SEARCH_RESULTS_TO_SHOW)].map((_, index) => {
if (searchResults.length <= index) {
return;
@ -116,14 +121,16 @@ const SearchModal: FC<SearchModalProps> = ({ open, onClose, searchablePages }) =
if (!result.isExactTitleMatch) {
const match = new RegExp(
`(?:[\\s]+[^\\s]+){0,10}[\\s]*${search}(?![^<>]*(([/"']|]]|\\b)>))[\\s]*(?:[^\\s]+\\s){0,25}`,
`(?:[\\s]+[^\\s]+){0,10}[\\s]*${escapeRegExp(
escapedSearch,
)}(?![^<>]*(([/"']|]]|\\b)>))[\\s]*(?:[^\\s]+\\s){0,25}`,
'ig',
).exec(entry.textContent);
if (match && match.length >= 1) {
summary = `...${match[0].trim()}...`;
} else {
const match = new RegExp(
`(?:[\\s]+[^\\s]+){0,10}[\\s]*(${search
`(?:[\\s]+[^\\s]+){0,10}[\\s]*(${escapedSearch
.split(' ')
.join('|')})(?![^<>]*(([/"']|]]|\\b)>))[\\s]*(?:[^\\s]+\\s){0,25}`,
'ig',
@ -135,7 +142,7 @@ const SearchModal: FC<SearchModalProps> = ({ open, onClose, searchablePages }) =
}
summary = summary?.replace(
new RegExp(`(${search.split(' ').join('|')})(?![^<>]*(([/"']|]]|\\b)>))`, 'ig'),
new RegExp(`(${escapedSearch.split(' ').join('|')})(?![^<>]*(([/"']|]]|\\b)>))`, 'ig'),
`<strong style="color: ${theme.palette.primary.main}">$1</strong>`,
);
@ -148,7 +155,7 @@ const SearchModal: FC<SearchModalProps> = ({ open, onClose, searchablePages }) =
/>
);
})
) : isNotEmpty(search) ? (
) : isNotEmpty(escapedSearch) ? (
<Typography
variant="h3"
component="div"
@ -163,13 +170,9 @@ const SearchModal: FC<SearchModalProps> = ({ open, onClose, searchablePages }) =
<Typography variant="h3" sx={{ marginBottom: '4px' }}>
Getting Started
</Typography>
<SuggestionLink href="/docs/start-with-a-template">
Start With a Template
</SuggestionLink>
<SuggestionLink href="/docs/start-with-a-template">Start With a Template</SuggestionLink>
<SuggestionLink href="/docs/add-to-your-site">Add to Your Site</SuggestionLink>
<SuggestionLink href="/docs/configuration-options">
Configuration Options
</SuggestionLink>
<SuggestionLink href="/docs/configuration-options">Configuration Options</SuggestionLink>
<SuggestionLink href="/docs/collection-overview">Collections</SuggestionLink>
</StyledSuggestionSection>
<StyledSuggestionSection>
@ -199,9 +202,8 @@ const SearchModal: FC<SearchModalProps> = ({ open, onClose, searchablePages }) =
<SuggestionLink href="/docs/widget-markdown">Markdown</SuggestionLink>
</StyledSuggestionSection>
</StyledSuggestions>
),
[handleClose, search, searchResults, theme.palette.primary.main],
);
}, [handleClose, search, searchResults, theme.palette.primary.main]);
return (
<StyledDialog open={open} onClose={handleClose} fullScreen={fullScreen} fullWidth>