{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "tabbable-demo",
  "dependencies": [
    "@platejs/tabbable"
  ],
  "registryDependencies": [
    "https://platejs.org/r/editor-kit.json"
  ],
  "files": [
    {
      "path": "src/registry/examples/tabbable-demo.tsx",
      "content": "'use client';\n\nimport * as React from 'react';\n\nimport type { PlateElementProps } from 'platejs/react';\n\nimport { TabbablePlugin } from '@platejs/tabbable/react';\nimport {\n  Plate,\n  PlateElement,\n  useFocused,\n  usePlateEditor,\n  useSelected,\n} from 'platejs/react';\n\nimport { cn } from '@/lib/utils';\nimport { EditorKit } from '@/registry/components/editor/editor-kit';\nimport { tabbableValue } from '@/registry/examples/values/tabbable-value';\nimport { Editor, EditorContainer } from '@/registry/ui/editor';\n\nexport default function TabbableDemo() {\n  const editor = usePlateEditor({\n    plugins: [\n      ...EditorKit,\n      TabbablePlugin.configure({\n        node: { component: TabbableElement, isElement: true, isVoid: true },\n      }),\n    ],\n    value: tabbableValue,\n  });\n\n  return (\n    <Plate editor={editor}>\n      <EditorContainer variant=\"demo\">\n        <Editor />\n      </EditorContainer>\n    </Plate>\n  );\n}\n\nexport function TabbableElement({ children, ...props }: PlateElementProps) {\n  const selected = useSelected();\n  const focused = useFocused();\n\n  return (\n    <PlateElement {...props}>\n      <div\n        className={cn(\n          'mb-2 p-2',\n          selected && focused\n            ? 'border-2 border-blue-500'\n            : 'border border-gray-200'\n        )}\n        contentEditable={false}\n      >\n        <p>This is a void element.</p>\n        <button type=\"button\">Button 1</button>{' '}\n        <button type=\"button\">Button 2</button>\n      </div>\n      {children}\n    </PlateElement>\n  );\n}\n",
      "type": "registry:example"
    },
    {
      "path": "src/registry/examples/values/tabbable-value.tsx",
      "content": "/** @jsxRuntime classic */\n/** @jsx jsx */\nimport { jsx } from '@platejs/test-utils';\n\njsx;\n\nexport const tabbableValue: any = (\n  <fragment>\n    <hh2>Tabbable</hh2>\n    <hp>\n      Ensure a smooth tab navigation experience within your editor with the\n      Tabbable plugin.\n    </hp>\n    <hp>\n      Properly handle tab orders for void nodes, allowing for seamless\n      navigation and interaction. Without this plugin, DOM elements inside void\n      nodes come after the editor in the tab order.\n    </hp>\n    <element type=\"tabbable\">\n      <htext />\n    </element>\n    <element type=\"tabbable\">\n      <htext />\n    </element>\n    <hp>Place your cursor here and try pressing tab or shift+tab.</hp>\n    <hp indent={1} listStyleType=\"disc\">\n      List item 1\n    </hp>\n    <hp indent={1} listStyleType=\"disc\">\n      List item 2\n    </hp>\n    <hp indent={1} listStyleType=\"disc\">\n      List item 3\n    </hp>\n    <hcodeblock lang=\"javascript\">\n      <hcodeline>if (true) {'{'}</hcodeline>\n      <hcodeline>\n        {'// <-'} Place cursor at start of line and press tab\n      </hcodeline>\n      <hcodeline>{'}'}</hcodeline>\n    </hcodeblock>\n    <hp>\n      In this example, the plugin is disabled when the cursor is inside a list\n      or a code block. You can customise this using the{' '}\n      <htext code>query</htext> option.\n    </hp>\n    <element type=\"tabbable\">\n      <htext />\n    </element>\n    <hp>\n      When you press tab at the end of the editor, the focus should go to the\n      button below.\n    </hp>\n  </fragment>\n);\n",
      "type": "registry:example"
    }
  ],
  "type": "registry:example"
}