V2 Node Search (+ hidden Node Library changes) (#8987)

## Summary

Redesigned node search with categories

## Changes

- **What**: Adds a v2 search component, leaving the existing
implementation untouched
- It also brings onboard the incomplete node library & preview changes,
disabled and behind a hidden setting
- **Breaking**: Changes the 'default' value of the node search setting
to v2, adding v1 (legacy) as an option

## Screenshots (if applicable)




https://github.com/user-attachments/assets/2ab797df-58f0-48e8-8b20-2a1809e3735f

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-8987-V2-Node-Search-hidden-Node-Library-changes-30c6d73d36508160902bcb92553f147c)
by [Unito](https://www.unito.io)

---------

Co-authored-by: Yourz <crazilou@vip.qq.com>
Co-authored-by: Amp <amp@ampcode.com>
Co-authored-by: github-actions <github-actions@github.com>
Co-authored-by: GitHub Action <action@github.com>
Co-authored-by: Christian Byrne <cbyrne@comfy.org>

packages/shared-frontend-utils/src/formatUtil.test.ts

@@ -1,6 +1,10 @@
 import { describe, expect, it } from 'vitest'
 
-import { getMediaTypeFromFilename, truncateFilename } from './formatUtil'
+import {
+  getMediaTypeFromFilename,
+  highlightQuery,
+  truncateFilename
+} from './formatUtil'
 
 describe('formatUtil', () => {
   describe('truncateFilename', () => {
@@ -142,4 +146,42 @@ describe('formatUtil', () => {
       })
     })
   })
+
+  describe('highlightQuery', () => {
+    it('should return text unchanged when query is empty', () => {
+      expect(highlightQuery('Hello World', '')).toBe('Hello World')
+    })
+
+    it('should wrap matching text in highlight span', () => {
+      const result = highlightQuery('Hello World', 'World')
+      expect(result).toBe('Hello <span class="highlight">World</span>')
+    })
+
+    it('should be case-insensitive', () => {
+      const result = highlightQuery('Hello World', 'hello')
+      expect(result).toBe('<span class="highlight">Hello</span> World')
+    })
+
+    it('should sanitize text by default', () => {
+      const result = highlightQuery('<script>alert("xss")</script>', 'alert')
+      expect(result).not.toContain('<script>')
+    })
+
+    it('should skip sanitization when sanitize is false', () => {
+      const result = highlightQuery('<b>bold</b>', 'bold', false)
+      expect(result).toContain('<b>')
+    })
+
+    it('should escape special regex characters in query', () => {
+      const result = highlightQuery('price is $10.00', '$10')
+      expect(result).toContain('<span class="highlight">$10</span>')
+    })
+
+    it('should highlight multiple occurrences', () => {
+      const result = highlightQuery('foo bar foo', 'foo')
+      expect(result).toBe(
+        '<span class="highlight">foo</span> bar <span class="highlight">foo</span>'
+      )
+    })
+  })
 })

packages/shared-frontend-utils/src/formatUtil.ts

@@ -1,3 +1,4 @@
+import { default as DOMPurify } from 'dompurify'
 import type { operations } from '@comfyorg/registry-types'
 
 export function formatCamelCase(str: string): string {
@@ -32,8 +33,15 @@ export function appendJsonExt(path: string) {
   return path
 }
 
-export function highlightQuery(text: string, query: string) {
+export function highlightQuery(
+  text: string,
+  query: string,
+  sanitize: boolean = true
+) {
   if (!query) return text
+  if (sanitize) {
+    text = DOMPurify.sanitize(text)
+  }
 
   // Escape special regex characters in the query string
   const escapedQuery = query.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')