{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "installation-next-demo",
  "dependencies": [
    "@platejs/basic-nodes",
    "@platejs/basic-nodes"
  ],
  "registryDependencies": [
    "https://platejs.org/r/editor.json",
    "https://platejs.org/r/fixed-toolbar.json",
    "https://platejs.org/r/mark-toolbar-button.json",
    "https://platejs.org/r/heading-node.json",
    "https://platejs.org/r/paragraph-node.json",
    "https://platejs.org/r/blockquote-node.json"
  ],
  "files": [
    {
      "path": "src/registry/examples/installation-next-04-value-demo.tsx",
      "content": "'use client';\n\nimport * as React from 'react';\n\nimport type { Value } from 'platejs';\n\nimport {\n  BlockquotePlugin,\n  BoldPlugin,\n  H1Plugin,\n  H2Plugin,\n  H3Plugin,\n  ItalicPlugin,\n  UnderlinePlugin,\n} from '@platejs/basic-nodes/react';\nimport { Plate, usePlateEditor } from 'platejs/react';\n\nimport { BlockquoteElement } from '@/registry/ui/blockquote-node';\nimport { Editor, EditorContainer } from '@/registry/ui/editor';\nimport { FixedToolbar } from '@/registry/ui/fixed-toolbar';\nimport { H1Element, H2Element, H3Element } from '@/registry/ui/heading-node';\nimport { MarkToolbarButton } from '@/registry/ui/mark-toolbar-button';\nimport { ToolbarButton } from '@/registry/ui/toolbar';\n\nconst initialValue: Value = [\n  {\n    children: [{ text: 'Title' }],\n    type: 'h3',\n  },\n  {\n    children: [\n      {\n        children: [{ text: 'This is a quote.' }],\n        type: 'p',\n      },\n    ],\n    type: 'blockquote',\n  },\n  {\n    children: [\n      { text: 'With some ' },\n      { bold: true, text: 'bold' },\n      { text: ' text for emphasis!' },\n    ],\n    type: 'p',\n  },\n];\n\nexport default function MyEditorPage() {\n  const editor = usePlateEditor({\n    plugins: [\n      BoldPlugin,\n      ItalicPlugin,\n      UnderlinePlugin,\n      H1Plugin.withComponent(H1Element),\n      H2Plugin.withComponent(H2Element),\n      H3Plugin.withComponent(H3Element),\n      BlockquotePlugin.withComponent(BlockquoteElement),\n    ],\n    value: () => {\n      const savedValue = localStorage.getItem(\n        `nextjs-plate-value-demo-${new Date().toISOString().split('T')[0]}`\n      );\n\n      return savedValue ? JSON.parse(savedValue) : initialValue;\n    },\n  });\n\n  return (\n    <Plate\n      onChange={({ value }) => {\n        localStorage.setItem(\n          `nextjs-plate-value-demo-${new Date().toISOString().split('T')[0]}`,\n          JSON.stringify(value)\n        );\n      }}\n      editor={editor}\n    >\n      <FixedToolbar className=\"flex justify-start gap-1 rounded-t-lg\">\n        <ToolbarButton onClick={() => editor.tf.h1.toggle()}>H1</ToolbarButton>\n        <ToolbarButton onClick={() => editor.tf.h2.toggle()}>H2</ToolbarButton>\n        <ToolbarButton onClick={() => editor.tf.h3.toggle()}>H3</ToolbarButton>\n\n        <ToolbarButton onClick={() => editor.tf.blockquote.toggle()}>\n          Quote\n        </ToolbarButton>\n\n        <MarkToolbarButton nodeType=\"bold\" tooltip=\"Bold (⌘+B)\">\n          B\n        </MarkToolbarButton>\n        <MarkToolbarButton nodeType=\"italic\" tooltip=\"Italic (⌘+I)\">\n          I\n        </MarkToolbarButton>\n        <MarkToolbarButton nodeType=\"underline\" tooltip=\"Underline (⌘+U)\">\n          U\n        </MarkToolbarButton>\n\n        <div className=\"flex-1\" />\n\n        <ToolbarButton\n          className=\"px-2\"\n          onClick={() => {\n            editor.tf.setValue(initialValue);\n          }}\n        >\n          Reset\n        </ToolbarButton>\n      </FixedToolbar>\n\n      <EditorContainer>\n        <Editor placeholder=\"Type your amazing content here...\" />\n      </EditorContainer>\n    </Plate>\n  );\n}\n",
      "type": "registry:example"
    }
  ],
  "type": "registry:example"
}