Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: Strip HTML from rich text search results #3783

Merged
merged 6 commits into from
Oct 24, 2024
Merged

feat: Strip HTML from rich text search results #3783

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
77983b6
feat: Strip HTML tags from search results
DafyddLlyr Oct 8, 2024
405ad3e
test: Update existing mocks to match new type
DafyddLlyr Oct 8, 2024
d80c5f8
fix: Search full strings
DafyddLlyr Oct 8, 2024
9298ae6
feat: Drop now redundant getHeadline(), update tests
DafyddLlyr Oct 21, 2024
12dfdb1
feat: Handle newlines
DafyddLlyr Oct 22, 2024
f0cf4fd
test: Add strip html test
DafyddLlyr Oct 23, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 8 additions & 0 deletions editor.planx.uk/src/hooks/useSearch.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,15 @@ interface UseSearchProps<T extends object> {
}

export interface SearchResult<T extends object> {
/** Original indexed item */
item: T;
/** Key used to locate value to search against */
key: string;
/** Indices within searched string that match search term */
matchIndices: [number, number][];
/** String matched against - does not necessarily equate to item[key] */
matchValue: string;
/** Index within flattened array of item[key] */
refIndex: number;
}

Expand All @@ -27,6 +33,7 @@ export const useSearch = <T extends object>({
useExtendedSearch: true,
includeMatches: true,
minMatchCharLength: 3,
ignoreLocation: true,
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

By default, just the first 60 characters are searched which was giving me some unexpected false negative results.

The testing I've done doesn't make this feel much slower performance-wise - will flag this when this PR is tested.

Docs: https://www.fusejs.io/api/options.html#ignorelocation

keys,
}),
[keys],
Expand All @@ -49,6 +56,7 @@ export const useSearch = <T extends object>({
key: result.matches?.[0].key || "",
// We only display the first match
matchIndices: result.matches[0].indices as [number, number][],
matchValue: result.matches[0].value!,
refIndex: result.matches[0]?.refIndex || 0,
};
}),
Expand Down
1 change: 1 addition & 0 deletions editor.planx.uk/src/pages/FlowEditor/components/Sidebar/Search/Headline.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ export const Headline: React.FC<Props> = ({ text, matchIndices, variant }) => {
<Typography
component="span"
variant={variant || "body2"}
whiteSpace={"pre-wrap"}
sx={(theme) => ({
fontWeight: isHighlighted(index) ? FONT_WEIGHT_BOLD : "regular",
fontSize: theme.typography.body2.fontSize,
Expand Down
Loading
Loading