fix: search inside content (#295)

* search inside content

* sanitizeAllHtmlButMark

* escape disallowedTagsMode

* clean

package.json

@@ -11,6 +11,7 @@
     "@types/node": "^18.19.44",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
+    "@types/sanitize-html": "^2.13.0",
     "autoprefixer": "^10.4.20",
     "eslint": "^8.57.0",
     "eslint-config-next": "^14.2.5",
@@ -41,6 +42,7 @@
     "rehype-github-alerts": "^3.0.0",
     "rehype-prism-plus": "^2.0.0",
     "remark-gfm": "^4.0.0",
+    "sanitize-html": "^2.13.0",
     "tailwind-merge": "^2.5.2"
   },
   "scripts": {

src/app/[...slug]/DocsContext.tsx

@@ -7,8 +7,7 @@ export type DocToC = {
   id: string
   level: number
   title: string
-  description: string
-  // content: string
+  content: string
   url: string
   parent: DocToC | null
   label: string

src/components/Search/SearchItem.tsx

@@ -1,10 +1,11 @@
 import Icon from '@/components/Icon'
 import { highlight } from '@/utils/text'
 import Link from 'next/link'
+import sanitizeHtml from 'sanitize-html'
 
 export interface SearchResult {
   title: string
-  description: string
+  content: string
   url: string
   label: string
   image?: string
@@ -14,6 +15,13 @@ export interface SearchItemProps {
   search: string
   result: SearchResult
 }
+function sanitizeAllHtmlButMark(str: string) {
+  return sanitizeHtml(str, {
+    allowedTags: ['mark'],
+    allowedAttributes: false,
+    disallowedTagsMode: 'escape',
+  })
+}
 
 function SearchItem({ search, result }: SearchItemProps) {
   return (
@@ -24,18 +32,21 @@ function SearchItem({ search, result }: SearchItemProps) {
     >
       <li className="px-2 py-1">
         <div className="interactive-bg-surface-container-high flex items-center justify-between rounded-md p-4 py-5 transition-colors">
-          <span
-            className="pr-3"
-            dangerouslySetInnerHTML={{
-              __html: `
-                  <span class="block text-xs text-on-surface-variant/50 pb-1">${result.label}</span>
-                  ${highlight(result.title, search)}
-                  <span class="block text-sm text-on-surface-variant/50 pt-2">
-                    ${highlight(result.description, search)}
-                  </span>
-                `,
-            }}
-          />
+          <div className="break-all pr-3">
+            <div className="block pb-1 text-xs text-on-surface-variant/50">{result.label}</div>
+            <span
+              dangerouslySetInnerHTML={{
+                __html: highlight(sanitizeAllHtmlButMark(result.title), search),
+              }}
+            />
+            <div className="block pt-2 text-sm text-on-surface-variant/50">
+              <span
+                dangerouslySetInnerHTML={{
+                  __html: highlight(sanitizeAllHtmlButMark(result.content), search),
+                }}
+              />
+            </div>
+          </div>
           {result.image ? (
             // eslint-disable-next-line @next/next/no-img-element
             <img className="max-w-[40%] rounded" src={result.image} alt={result.title} />

src/components/Search/SearchModalContainer.tsx

@@ -36,7 +36,7 @@ export const SearchModalContainer = ({ onClose }: SearchModalContainerProps) =>
         ({ tableOfContents }) => tableOfContents,
       ) satisfies SearchResult[]
       // console.log('candidateResults', candidateResults)
-      candidateResults = candidateResults.filter((entry) => entry.description.length > 0)
+      // candidateResults = candidateResults.filter((entry) => entry.description.length > 0)
       // .concat(
       //   Object.entries(boxes).flatMap(([id, data]) => ({
       //     ...data,

src/components/mdx/Toc/rehypeToc.ts

@@ -25,7 +25,7 @@ const slugify = (title: string) => title.toLowerCase().replace(/\s+|-+/g, '-')
 /**
  * Generates a table of contents from page headings.
  */
-export const rehypeToc = (target: DocToC[] = [], url: string, page: string, content: string) => {
+export const rehypeToc = (target: DocToC[] = [], url: string, page: string) => {
   return () => (root: Node) => {
     const previous: Record<number, DocToC> = {}
 
@@ -39,19 +39,27 @@ export const rehypeToc = (target: DocToC[] = [], url: string, page: string, cont
         const id = slugify(title)
         node.properties.id = id
 
+        //
+        // Extract content for each heading
+        //
+
         let siblingIndex = i + 1
+        const content: string[] = []
         let sibling: Node | undefined = root.children[siblingIndex]
-        while (sibling?.type === 'text') sibling = root.children[siblingIndex++]
-        const description = sibling?.tagName === 'p' ? toString(sibling) : ''
+        while (sibling) {
+          if (RegExp(`^h${level}$`).test(sibling.tagName)) break // stop at the next (same-level) heading
+
+          content.push(toString(sibling))
+          sibling = root.children[siblingIndex++]
+        }
 
         const item: DocToC = {
           id,
           level,
           label: page,
           url: `${url}#${id}`,
           title,
-          description,
-          // content, // potentially too big to be in the ToC (perfs issue)
+          content: content.join(''),
           parent: previous[level - 2] ?? null,
         }
         previous[level - 1] = item

src/utils/docs.tsx

@@ -159,7 +159,7 @@ async function _getDocs(
               rehypeGha,
               rehypePrismPlus,
               rehypeCodesandbox(boxes), // 1. put all Codesandbox[id] into `doc.boxes`
-              rehypeToc(tableOfContents, url, title, content), // 2. will populate `doc.tableOfContents`
+              rehypeToc(tableOfContents, url, title), // 2. will populate `doc.tableOfContents`
             ],
           },
         },

src/utils/text.ts

@@ -7,7 +7,4 @@ export const escape = (text: string) => text.replace(/[|\\{}()[\]^$+*?.]/g, '\\$
  * Bolds matching text, returning HTML.
  */
 export const highlight = (text: string, target: string) =>
-  text.replace(
-    new RegExp(target, 'gi'),
-    (match: string) => `<span class="font-bold">${match}</span>`,
-  )
+  text.replace(new RegExp(target, 'gi'), (match: string) => `<mark>${match}</mark>`)