{
  "name": "selection-toolbar-info-demo",
  "type": "registry:example",
  "registryDependencies": [
    "selection-toolbar"
  ],
  "files": [
    {
      "path": "examples/selection-toolbar-info-demo.tsx",
      "type": "registry:example",
      "content": "\"use client\";\n\nimport { Bold, Copy, Italic } from \"lucide-react\";\nimport * as React from \"react\";\n\nimport {\n  SelectionToolbar,\n  SelectionToolbarItem,\n  SelectionToolbarSeparator,\n} from \"@/registry/bases/radix/ui/selection-toolbar\";\n\nexport default function SelectionToolbarInfoDemo() {\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  const [selectedText, setSelectedText] = React.useState(\"\");\n  const [wordCount, setWordCount] = React.useState(0);\n  const [charCount, setCharCount] = React.useState(0);\n\n  const wrapSelection = (tagName: string) => {\n    const selection = window.getSelection();\n    if (!selection || selection.rangeCount === 0) return;\n\n    const range = selection.getRangeAt(0);\n    const selectedText = range.toString();\n    if (!selectedText) return;\n\n    const wrapper = document.createElement(tagName);\n    try {\n      range.surroundContents(wrapper);\n    } catch {\n      wrapper.textContent = selectedText;\n      range.deleteContents();\n      range.insertNode(wrapper);\n    }\n\n    selection.removeAllRanges();\n  };\n\n  const onBold = () => {\n    wrapSelection(\"strong\");\n  };\n\n  const onItalic = () => {\n    wrapSelection(\"em\");\n  };\n\n  const onCopy = (text: string) => {\n    navigator.clipboard.writeText(text);\n  };\n\n  const onSelectionChange = (text: string) => {\n    setSelectedText(text);\n    const words = text.trim().split(/\\s+/).filter(Boolean);\n    setWordCount(words.length);\n    setCharCount(text.length);\n  };\n\n  return (\n    <div className=\"flex min-h-[400px] w-full flex-col items-center justify-center gap-4\">\n      <div\n        ref={containerRef}\n        contentEditable\n        suppressContentEditableWarning\n        className=\"w-full max-w-2xl space-y-4 rounded-lg border bg-card p-8 text-card-foreground outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50\"\n      >\n        <h2 className=\"text-2xl font-semibold\">Selection Info Tracking</h2>\n        <p className=\"leading-relaxed text-muted-foreground\">\n          Select any text to see the toolbar and track selection information\n          below. The component provides callbacks to monitor selected text and\n          implement custom behavior.\n        </p>\n        <p className=\"leading-relaxed text-muted-foreground\">\n          Try selecting different portions of text to see real-time updates of\n          the word count and character count. This demonstrates how you can\n          track and respond to selection changes.\n        </p>\n\n        <SelectionToolbar\n          container={containerRef}\n          onSelectionChange={onSelectionChange}\n        >\n          <SelectionToolbarItem onSelect={onBold}>\n            <Bold />\n          </SelectionToolbarItem>\n          <SelectionToolbarItem onSelect={onItalic}>\n            <Italic />\n          </SelectionToolbarItem>\n          <SelectionToolbarSeparator />\n          <SelectionToolbarItem onSelect={onCopy}>\n            <Copy />\n          </SelectionToolbarItem>\n        </SelectionToolbar>\n      </div>\n\n      {selectedText && (\n        <div className=\"flex w-full max-w-2xl flex-col gap-2 rounded-lg border bg-muted/50 p-4\">\n          <div className=\"text-sm font-medium\">Selection Info</div>\n          <div className=\"grid grid-cols-2 gap-4 text-sm\">\n            <div>\n              <span className=\"text-muted-foreground\">Words: </span>\n              <span className=\"font-medium\">{wordCount}</span>\n            </div>\n            <div>\n              <span className=\"text-muted-foreground\">Characters: </span>\n              <span className=\"font-medium\">{charCount}</span>\n            </div>\n          </div>\n          <div className=\"text-xs text-muted-foreground\">\n            <span className=\"font-medium\">Selected text: </span>\"\n            {selectedText.length > 50\n              ? `${selectedText.slice(0, 50)}...`\n              : selectedText}\n            \"\n          </div>\n        </div>\n      )}\n    </div>\n  );\n}\n",
      "target": ""
    }
  ]
}