{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "find-replace-docs",
  "title": "Find",
  "description": "Highlight search matches in editable text.",
  "files": [
    {
      "path": "../../content/docs/(plugins)/(functionality)/find-replace.mdx",
      "content": "---\ntitle: Find\ndescription: Highlight search matches in editable text.\ndocs:\n  - route: /docs/components/search-highlight-node\n    title: Search Highlight Leaf\n  - route: /docs/examples/find-replace\n    title: Find Replace Demo\n---\n\nFind highlights matching text in editor blocks. `FindReplacePlugin` owns the search option and decorations; your UI owns the search input and any replace command.\n\n<ComponentPreview name=\"find-replace-demo\" />\n\n<PackageInfo>\n\n## Features\n\n- Case-insensitive search highlighting.\n- Multiple matches inside the same block.\n- Matches split across adjacent text leaves.\n- App-controlled search state through plugin options.\n- Registry highlight leaf for visible matches.\n\n</PackageInfo>\n\n## Fast Path\n\n<Steps>\n\n### Add The Plugin\n\nConfigure `FindReplacePlugin` with a leaf renderer for highlighted ranges.\n\n```tsx\nimport { FindReplacePlugin } from '@platejs/find-replace';\nimport { createPlateEditor } from 'platejs/react';\n\nimport { SearchHighlightLeaf } from '@/components/ui/search-highlight-node';\n\nexport const editor = createPlateEditor({\n  plugins: [\n    FindReplacePlugin.configure({\n      render: { node: SearchHighlightLeaf },\n    }),\n  ],\n});\n```\n\n### Control The Search\n\nUpdate the `search` option from your toolbar and ask Plate to redecorate the editor.\n\n```tsx title=\"components/find-toolbar.tsx\" showLineNumbers\nimport { FindReplacePlugin } from '@platejs/find-replace';\nimport { useEditorPlugin, usePluginOption } from 'platejs/react';\n\nexport function FindToolbar() {\n  const { editor, setOption } = useEditorPlugin(FindReplacePlugin);\n  const search = usePluginOption(FindReplacePlugin, 'search');\n\n  return (\n    <input\n      type=\"search\"\n      value={search}\n      onChange={(event) => {\n        setOption('search', event.target.value);\n        editor.api.redecorate();\n      }}\n    />\n  );\n}\n```\n\n### Use The Registry Example\n\nThe demo combines `FindReplacePlugin`, `FixedToolbar`, `Input`, and `SearchHighlightLeaf`.\n\n<ComponentSource name=\"find-replace-demo\" />\n\n</Steps>\n\n## Ownership\n\n| Surface | Owner | What It Does |\n|---------|-------|--------------|\n| `FindReplacePlugin` | `@platejs/find-replace` | Stores `options.search`, registers a leaf node, and wires `decorateFindReplace`. |\n| `decorateFindReplace` | `@platejs/find-replace` | Finds matches in one element's text children and returns Slate ranges. |\n| `SearchHighlightLeaf` | Registry UI | Renders decorated ranges with a yellow background. |\n| `FindToolbar` | App or registry example | Updates `options.search` and calls `editor.api.redecorate()`. |\n| Replace actions | App code | Perform text replacement with editor transforms. The package does not replace content for you. |\n\nThe package is headless. The registry gives you a visible highlight leaf and a demo toolbar.\n\n## Search Behavior\n\n| Behavior | Source |\n|----------|--------|\n| Empty `search` | Returns no ranges. |\n| Case handling | Text and query are lowercased before matching. |\n| Match scope | Only element nodes whose direct children are all text nodes are decorated. |\n| Multiple matches | Each match becomes one or more ranges. |\n| Split text leaves | A match crossing adjacent leaves is split into per-leaf ranges. |\n| Range payload | Each range includes `[FindReplacePlugin.key]: true` and the matched `search` slice. |\n\n`decorateFindReplace` searches the concatenated text for one element, then maps each match back to the original child text paths.\n\n## Search Highlight Leaf\n\nInstall the registry leaf when you want the default yellow highlight.\n\n```bash\nnpx shadcn@latest add @plate/search-highlight-node\n```\n\nThe copied component is intentionally small:\n\n```tsx title=\"components/ui/search-highlight-node.tsx\"\nimport { type PlateLeafProps, PlateLeaf } from 'platejs/react';\n\nexport function SearchHighlightLeaf(props: PlateLeafProps) {\n  return <PlateLeaf {...props} className=\"bg-yellow-100\" />;\n}\n```\n\nChange the class name when your design system needs a different search color.\n\n## API Reference\n\n| API | Package | Use |\n|-----|---------|-----|\n| `FindReplacePlugin` | `@platejs/find-replace` | Main plugin for search highlighting. |\n| `options.search` | `string` | Query text to highlight. Defaults to `''`. |\n| `decorateFindReplace` | `@platejs/find-replace` | Decoration function used by the plugin. |\n| `SearchRange.search` | `string` | The query slice represented by that range. |\n\n",
      "type": "registry:file",
      "target": "content/docs/plate/(plugins)/(functionality)/find-replace.mdx"
    }
  ],
  "type": "registry:file"
}