{
  "name": "react-example-block-handle",
  "title": "react-example-block-handle",
  "type": "registry:block",
  "description": "A handle that appears on hover, allowing you to drag and re-order blocks.",
  "registryDependencies": [
    "https://unpkg.com/prosekit-registry/dist/r/react-sample-sample-doc-block-handle.json",
    "https://unpkg.com/prosekit-registry/dist/r/react-ui-block-handle.json",
    "https://unpkg.com/prosekit-registry/dist/r/react-ui-code-block-view.json",
    "https://unpkg.com/prosekit-registry/dist/r/react-ui-drop-indicator.json"
  ],
  "dependencies": [
    "prosekit@^0.21.3"
  ],
  "files": [
    {
      "path": "registry/src/react/examples/block-handle/editor.tsx",
      "type": "registry:component",
      "target": "components/editor/examples/block-handle/editor.tsx",
      "content": "'use client'\n\nimport 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { createEditor, type NodeJSON } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/react'\nimport { useMemo } from 'react'\n\nimport { sampleContent } from '../../sample/sample-doc-block-handle.ts'\nimport { BlockHandle } from '../../ui/block-handle/index.ts'\nimport { DropIndicator } from '../../ui/drop-indicator/index.ts'\n\nimport { defineExtension } from './extension.ts'\n\ninterface EditorProps {\n  initialContent?: NodeJSON\n}\n\nexport default function Editor(props: EditorProps) {\n  const defaultContent = props.initialContent ?? sampleContent\n  const editor = useMemo(() => {\n    const extension = defineExtension()\n    return createEditor({ extension, defaultContent })\n  }, [defaultContent])\n\n  return (\n    <ProseKit editor={editor}>\n      <div className=\"box-border h-full w-full min-h-36 overflow-y-hidden overflow-x-hidden rounded-md border border-solid border-gray-200 dark:border-gray-700 shadow-sm flex flex-col bg-[canvas] text-black dark:text-white\">\n        <div className=\"relative w-full flex-1 box-border overflow-y-auto\">\n          <div ref={editor.mount} className=\"ProseMirror box-border min-h-full px-[max(4rem,calc(50%-20rem))] py-8 outline-hidden outline-0 [&_span[data-mention=user]]:text-blue-500 [&_span[data-mention=tag]]:text-violet-500\"></div>\n          <BlockHandle />\n          <DropIndicator />\n        </div>\n      </div>\n    </ProseKit>\n  )\n}\n"
    },
    {
      "path": "registry/src/react/examples/block-handle/extension.ts",
      "type": "registry:component",
      "target": "components/editor/examples/block-handle/extension.ts",
      "content": "import { defineBasicExtension } from 'prosekit/basic'\nimport { union } from 'prosekit/core'\n\nimport { defineCodeBlockView } from '../../ui/code-block-view/index.ts'\n\nexport function defineExtension() {\n  return union([defineBasicExtension(), defineCodeBlockView()])\n}\n\nexport type EditorExtension = ReturnType<typeof defineExtension>\n"
    },
    {
      "path": "registry/src/react/examples/block-handle/index.ts",
      "type": "registry:component",
      "target": "components/editor/examples/block-handle/index.ts",
      "content": "export { default as ExampleEditor } from './editor.tsx'\n"
    }
  ],
  "meta": {
    "hasIcons": false,
    "hidden": false,
    "story": "block-handle",
    "framework": "react",
    "accumulatedFiles": [
      "registry/src/react/examples/block-handle/editor.tsx",
      "registry/src/react/examples/block-handle/extension.ts",
      "registry/src/react/examples/block-handle/index.ts",
      "registry/src/react/sample/sample-doc-block-handle.ts",
      "registry/src/react/ui/block-handle/block-handle.tsx",
      "registry/src/react/ui/block-handle/index.ts",
      "registry/src/react/ui/code-block-view/code-block-view.tsx",
      "registry/src/react/ui/code-block-view/index.ts",
      "registry/src/react/ui/drop-indicator/drop-indicator.tsx",
      "registry/src/react/ui/drop-indicator/index.ts"
    ],
    "internalDependencies": [
      "react-sample-sample-doc-block-handle",
      "react-ui-block-handle",
      "react-ui-code-block-view",
      "react-ui-drop-indicator"
    ]
  },
  "$schema": "https://ui.shadcn.com/schema/registry-item.json"
}