basic-editor-handler-demo.json

{
  "files": [
    {
      "content": "import React, { useState } from 'react';\n\nimport type { Value } from '@udecode/plate-common';\n\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\n\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from '@/components/ui/accordion';\nimport { editableProps } from '@/plate/demo/editableProps';\nimport { Editor } from '@/components/plate-ui/editor';\n\nconst value = [\n  {\n    children: [\n      {\n        text: 'This is editable plain text with react and history plugins, just like a textarea!',\n      },\n    ],\n    type: 'p',\n  },\n];\n\nexport default function BasicEditorHandlerDemo() {\n  const [debugValue, setDebugValue] = useState<Value>(value);\n\n  const localValue =\n    typeof window !== 'undefined' && localStorage.getItem('editorContent');\n\n  const editor = usePlateEditor({\n    value: localValue ? JSON.parse(localValue) : value,\n  });\n\n  return (\n    <Plate\n      onChange={({ value }) => {\n        localStorage.setItem('editorContent', JSON.stringify(value));\n        setDebugValue(value);\n      }}\n      editor={editor}\n    >\n      <Editor {...editableProps} />\n\n      <Accordion type=\"single\" collapsible>\n        <AccordionItem value=\"manual-installation\">\n          <AccordionTrigger>Debug Value</AccordionTrigger>\n          <AccordionContent>{JSON.stringify(debugValue)}</AccordionContent>\n        </AccordionItem>\n      </Accordion>\n    </Plate>\n  );\n}\n",
      "path": "example/basic-editor-handler-demo.tsx",
      "target": "components/basic-editor-handler-demo.tsx",
      "type": "registry:example"
    }
  ],
  "name": "basic-editor-handler-demo",
  "registryDependencies": [],
  "type": "registry:example"
}