pnpm add @cbcruk/highlight-kit

import {
  highlights,
  computeRanges,
  injectHighlightStyles,
} from '@cbcruk/highlight-kit'

injectHighlightStyles({
  search: { backgroundColor: '#fef08a', color: '#854d0e' },
})

const el = document.querySelector('#article')!
const ranges = computeRanges(el, 'wisdom', { caseSensitive: false })

// (name, sourceId, ranges) — 같은 name에 여러 source가 union 됨
highlights.set('search', 'my-source', ranges)

highlights.remove('search', 'my-source') // 한 source만 제거
highlights.clear('search') // name 통째로 제거

import {
  createValueHighlighter,
  injectHighlightStyles,
} from '@cbcruk/highlight-kit'

injectHighlightStyles({
  comment: { color: '#6b7280' },
  keyword: { color: '#7c3aed' },
})

const textarea = document.querySelector('textarea')!
const highlighter = createValueHighlighter({
  element: textarea,
  rules: [
    { name: 'comment', pattern: /\/\/[^\n]*/ },
    { name: 'keyword', pattern: /\b(?:const|function|return)\b/ },
  ],
})

highlighter.dispose() // 등록 해제 + 모든 Range disconnect

// 누수: 이전 Range를 놓아주지 않는다
function onInput() {
  highlight.clear()
  for (const m of textarea.value.matchAll(/example/g)) {
    highlight.add(textarea.createValueRange(m.index, m.index + 7))
  }
}

import { createValueRangeRegistry } from '@cbcruk/highlight-kit'

const registry = createValueRangeRegistry({ element: textarea })
registry.commit([{ name: 'note', priority: 0, spans: [{ start: 0, end: 4 }] }])
registry.commit([{ name: 'note', priority: 0, spans: [{ start: 6, end: 9 }] }])
registry.dispose()

import { Highlight } from '@cbcruk/highlight-kit/react'

function Article({ keyword }: { keyword: string }) {
  return (
    <Highlight query={keyword} name="search">
      <article>{/* ...긴 본문... */}</article>
    </Highlight>
  )
}

::highlight(search) {
  background: #fef08a;
  color: #854d0e;
}

<Highlight query={q} name="search" as="section" style={{ display: 'contents' }}>
  {children}
</Highlight>

import { useHighlight } from '@cbcruk/highlight-kit/react'

function SearchableText({ query }: { query: string }) {
  const { ref, count, active } = useHighlight<HTMLDivElement>({
    query,
    name: 'search',
    caseSensitive: false,
  })

  return (
    <>
      <span>{count}개 일치</span>
      <div ref={ref}>{/* ...본문... */}</div>
    </>
  )
}

import { useRef, useState } from 'react'
import {
  HighlightStyles,
  useHighlightSearch,
} from '@cbcruk/highlight-kit/react'

function Search() {
  const ref = useRef<HTMLDivElement>(null)
  const [query, setQuery] = useState('wisdom')
  const { count, active, next, prev } = useHighlightSearch(ref, query)

  return (
    <>
      <HighlightStyles />
      <input value={query} onChange={(e) => setQuery(e.target.value)} />
      <span>{count === 0 ? '0/0' : `${active + 1}/${count}`}</span>
      <button onClick={prev}>↑</button>
      <button onClick={next}>↓</button>
      <div ref={ref}>...본문...</div>
    </>
  )
}

import { Highlight } from '@cbcruk/highlight-kit/react'

function Logs({ logs }: { logs: string }) {
  return (
    <Highlight.Root name="log-info" as="pre">
      {logs}
      <Highlight.Match name="log-error" pattern={/ERROR:[^\n]*/} />
      <Highlight.Match name="log-warn" pattern={/WARN:[^\n]*/} />
      {/* name 생략 → Root의 name */}
      <Highlight.Match pattern={/INFO:[^\n]*/} />
    </Highlight.Root>
  )
}

import { HighlightStyles, useValueTokens } from '@cbcruk/highlight-kit/react'

const RULES = [
  { name: 'comment', pattern: /\/\/[^\n]*/ },
  { name: 'string', pattern: /'[^']*'|"[^"]*"/ },
  { name: 'keyword', pattern: /\b(?:const|function|return)\b/ },
]

function CodeArea() {
  const { ref, supported, counts } = useValueTokens<HTMLTextAreaElement>(RULES)

  return (
    <>
      <HighlightStyles
        styles={{
          comment: { color: '#6b7280' },
          string: { color: '#16a34a' },
          keyword: { color: '#7c3aed' },
        }}
      />
      <textarea ref={ref} defaultValue="const x = 1 // note" />
      {!supported && <p>이 브라우저는 textarea 안을 칠할 수 없습니다.</p>}
      <small>키워드 {counts.keyword ?? 0}개</small>
    </>
  )
}

const { ref, count } = useValueHighlight<HTMLTextAreaElement>({
  query: /\bexample\b/gi,
  name: 'flagged',
})

const { ref } = useValueTokens<HTMLTextAreaElement>(RULES, { value })

import {
  HighlightStyles,
  useValueHighlightSearch,
} from '@cbcruk/highlight-kit/react'

function NoteSearch() {
  const [query, setQuery] = useState('')
  const { ref, count, active, next, prev } =
    useValueHighlightSearch<HTMLTextAreaElement>(query)

  return (
    <>
      <HighlightStyles />
      <input value={query} onChange={(e) => setQuery(e.target.value)} />
      <span>{count === 0 ? '0/0' : `${active + 1}/${count}`}</span>
      <button onClick={prev}>↑</button>
      <button onClick={next}>↓</button>
      <textarea ref={ref} rows={10} />
    </>
  )
}

import {
  useHighlightState,
  useHighlightSupport,
} from '@cbcruk/highlight-kit/react'

const { count, active } = useHighlightState('search') // 읽기 전용 구독
const all = useHighlightSnapshots() // { [name]: { count, active } }
const supported = useHighlightSupport() // SSR 중엔 false

import {
  createHighlightController,
  createNoopSink,
} from '@cbcruk/highlight-kit'
import { HighlightProvider } from '@cbcruk/highlight-kit/react'

const controller = createHighlightController({ sink: createNoopSink() })
render(
  <HighlightProvider controller={controller}>
    <SearchUI />
  </HighlightProvider>,
)
expect(controller.getSnapshot('search').count).toBe(3)

pnpm test:run packages/highlight-kit   # Vitest (jsdom)