feat: Strip HTML from rich text search results

editor.planx.uk/src/hooks/useSearch.ts

@@ -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;
 }
 
@@ -27,6 +33,7 @@ export const useSearch = <T extends object>({
       useExtendedSearch: true,
       includeMatches: true,
       minMatchCharLength: 3,
+      ignoreLocation: true,
       keys,
     }),
     [keys],
@@ -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,
         };
       }),

editor.planx.uk/src/pages/FlowEditor/components/Sidebar/Search/SearchResultCard/getDisplayDetailsForResult.tsx

@@ -11,7 +11,7 @@ import { NextSteps } from "@planx/components/NextSteps/model";
 import { ChecklistField } from "@planx/components/shared/Schema/model";
 import { TaskList } from "@planx/components/TaskList/model";
 import { SearchResult } from "hooks/useSearch";
-import { capitalize, get } from "lodash";
+import { capitalize } from "lodash";
 import { SLUGS } from "pages/FlowEditor/data/types";
 import { useStore } from "pages/FlowEditor/lib/store";
 
@@ -248,7 +248,7 @@ const defaultFormatter: SearchResultFormatter = {
   getIconKey: ({ item }) => item.type,
   getTitle: ({ item }) =>
     (item.data?.title as string) || (item.data?.text as string) || "",
-  getHeadline: ({ item, key }) => get(item, key)?.toString() || "",
+  getHeadline: ({ matchValue }) => matchValue,
   getComponentType: ({ item }) =>
     capitalize(SLUGS[item.type].replaceAll("-", " ")),
 };

editor.planx.uk/src/pages/FlowEditor/components/Sidebar/Search/facets.ts

@@ -1,5 +1,8 @@
 import { flatFlags, IndexedNode } from "@opensystemslab/planx-core/types";
-import { FuseOptionKey } from "fuse.js";
+import { FuseOptionKey, FuseOptionKeyObject } from "fuse.js";
+import { get } from "lodash";
+
+import { stripTagsAndLimitLength } from "../../Flow/lib/utils";
 
 export type SearchFacets = Array<FuseOptionKey<IndexedNode>>;
 
@@ -34,44 +37,61 @@ export const DATA_FACETS: SearchFacets = [
   ...drawBoundaryData,
 ];
 
+/**
+ * Generate a Fuse getFn in order to search against the text content of the HTML generated by RichTextInput fields
+ * Strips HTML tags from searched value in order to maintain matchIndices
+ * Docs: https://www.fusejs.io/examples.html#nested-search
+ */
+const richTextField = (
+  key: `data.${string}`,
+): FuseOptionKeyObject<IndexedNode> => ({
+  name: key,
+  getFn: (node: IndexedNode) =>
+    stripTagsAndLimitLength(get(node as Record<string, any>, key) || "", ""),
+});
+
 const basicFields: SearchFacets = [
   "data.text",
   "data.title",
-  "data.description",
+  richTextField("data.description"),
 ];
 
 const moreInformation: SearchFacets = [
   "data.notes",
-  "data.howMeasured",
-  "data.policyRef",
-  "data.info",
+  richTextField("data.howMeasured"),
+  richTextField("data.policyRef"),
+  richTextField("data.info"),
 ];
 
 const checklist: SearchFacets = ["data.categories.title"];
 
 const nextSteps: SearchFacets = [
   "data.steps.title",
-  "data.steps.description",
+  richTextField("data.steps.description"),
   "data.steps.url",
 ];
 
 const fileUploadAndLabel: SearchFacets = [
   "data.fileTypes.name",
   "data.fileTypes.moreInformation.notes",
-  "data.fileTypes.moreInformation.howMeasured",
-  "data.fileTypes.moreInformation.policyRef",
-  "data.fileTypes.moreInformation.info",
+  richTextField("data.fileTypes.moreInformation.howMeasured"),
+  richTextField("data.fileTypes.moreInformation.policyRef"),
+  richTextField("data.fileTypes.moreInformation.info"),
 ];
 
 /** List, Page, and MapAndLabel components share this structure */
 const schemaComponents: SearchFacets = [
   "data.schema.fields.data.title",
   "data.schema.fields.data.description",
+  // Currently just string - could be rich text once we have an Editor interface for generating schemas
   "data.schema.fields.data.options.data.description",
   "data.schema.fields.data.options.text",
 ];
 
-const taskList: SearchFacets = ["data.tasks.title", "data.tasks.description"];
+const taskList: SearchFacets = [
+  "data.tasks.title",
+  richTextField("data.tasks.description"),
+];
 
 const result: SearchFacets = [
   ...flatFlags.flatMap(({ value }) => [
@@ -80,38 +100,38 @@ const result: SearchFacets = [
   ]),
 ];
 
-const content: SearchFacets = ["data.content"];
+const content: SearchFacets = [richTextField("data.content")];
 
 const confirmation: SearchFacets = [
   "data.heading",
-  "data.moreInfo",
-  "data.contactInfo",
+  richTextField("data.moreInfo"),
+  richTextField("data.contactInfo"),
   "data.nextSteps.title",
   "data.nextSteps.description",
 ];
 
 const findProperty: SearchFacets = [
   "data.newAddressTitle",
-  "data.newAddressDescription",
+  richTextField("data.newAddressDescription"),
   "data.newAddressDescriptionLabel",
 ];
 
 const drawBoundary: SearchFacets = [
   "data.titleForUploading",
-  "data.descriptionForUploading",
+  richTextField("data.descriptionForUploading"),
 ];
 
-const planningConstraints: SearchFacets = ["data.disclaimer"];
+const planningConstraints: SearchFacets = [richTextField("data.disclaimer")];
 
 const pay: SearchFacets = [
   "data.bannerTitle",
   "data.instructionsTitle",
-  "data.instructionsDescription",
+  richTextField("data.instructionsDescription"),
   "data.secondaryPageTitle",
   "data.nomineeTitle",
-  "data.nomineeDescription",
+  richTextField("data.nomineeDescription"),
   "data.yourDetailsTitle",
-  "data.yourDetailsDescription",
+  richTextField("data.yourDetailsDescription"),
   "data.yourDetailsLabel",
 ];
 

editor.planx.uk/src/pages/FlowEditor/components/Sidebar/Search/mocks/getDisplayDetailsForResult.ts

@@ -208,6 +208,7 @@ export const mockQuestionResult: SearchResult<IndexedNode> = {
   key: "data.fn",
   matchIndices: [[0, 3]],
   refIndex: 0,
+  matchValue: "colour",
 };
 
 export const mockAnswerResult: SearchResult<IndexedNode> = {
@@ -223,6 +224,7 @@ export const mockAnswerResult: SearchResult<IndexedNode> = {
   key: "data.val",
   matchIndices: [[0, 2]],
   refIndex: 0,
+  matchValue: "red",
 };
 
 export const mockListRootResult: SearchResult<IndexedNode> = {
@@ -326,6 +328,7 @@ export const mockListRootResult: SearchResult<IndexedNode> = {
   key: "data.fn",
   matchIndices: [[0, 7]],
   refIndex: 0,
+  matchValue: "listRoot",
 };
 
 export const mockListDataResult: SearchResult<IndexedNode> = {
@@ -467,6 +470,7 @@ export const mockListDataResult: SearchResult<IndexedNode> = {
   key: "data.schema.fields.data.fn",
   matchIndices: [[0, 5]],
   refIndex: 1,
+  matchValue: "tenure",
 };
 
 export const mockListAnswerResult: SearchResult<IndexedNode> = {
@@ -608,6 +612,7 @@ export const mockListAnswerResult: SearchResult<IndexedNode> = {
   key: "data.schema.fields.data.options.data.val",
   matchIndices: [[0, 14]],
   refIndex: 10,
+  matchValue: "tenure",
 };
 
 export const mockCalculateRootResult: SearchResult<IndexedNode> = {
@@ -630,6 +635,7 @@ export const mockCalculateRootResult: SearchResult<IndexedNode> = {
   key: "data.output",
   matchIndices: [[0, 14]],
   refIndex: 0,
+  matchValue: "calculateOutput",
 };
 
 export const mockCalculateFormulaResult: SearchResult<IndexedNode> = {
@@ -652,6 +658,7 @@ export const mockCalculateFormulaResult: SearchResult<IndexedNode> = {
   key: "formula",
   matchIndices: [[0, 6]],
   refIndex: 1,
+  matchValue: "formulaTwo",
 };
 
 export const mockFileUploadAndLabelResult: SearchResult<IndexedNode> = {
@@ -676,4 +683,5 @@ export const mockFileUploadAndLabelResult: SearchResult<IndexedNode> = {
   key: "data.fileTypes.fn",
   matchIndices: [[0, 8]],
   refIndex: 0,
+  matchValue: "floorplan",
 };

editor.planx.uk/src/pages/FlowEditor/components/Sidebar/Search/mocks/simple.ts

@@ -50,6 +50,7 @@ export const results: SearchResults<IndexedNode> = [
     key: "data.val",
     matchIndices: [[0, 2]],
     refIndex: 0,
+    matchValue: "india",
   },
   {
     item: {
@@ -64,5 +65,6 @@ export const results: SearchResults<IndexedNode> = [
     key: "data.val",
     matchIndices: [[0, 2]],
     refIndex: 0,
+    matchValue: "indonesia",
   },
 ];