[{"path":"hundreds-editors-demo.tsx","content":"'use client';\n\nimport * as React from 'react';\n\nimport { Plate, usePlateEditor } from 'platejs/react';\n\nimport { createMultiEditorsValue } from '@/registry/examples/values/multi-editors-value';\nimport { Editor, EditorContainer } from '@/components/ui/editor';\n\nconst values = createMultiEditorsValue();\n\nfunction WithPlate({ id, value }: any) {\n const editor = usePlateEditor({\n id,\n // components: PlateUI,\n // plugins: [BasicBlocksPlugin, BasicMarksPlugin],\n value,\n });\n\n return (\n \n \n \n \n \n );\n}\n\n// function Element({ attributes, children, element }: any) {\n// switch (element.type) {\n// case 'h1':\n// return

{children}

;\n// default:\n// return

{children}

;\n// }\n// }\n\n// function WithoutPlate({ initialValue }: any) {\n// const [value, setValue] = useState(initialValue);\n// const renderElement = useCallback((p) => , []);\n// const editor = useMemo(() => withReact(createEditor() as ReactEditor), []);\n//\n// return (\n// setValue(v), [])}\n// >\n// \n// \n// );\n// }\n\nexport default function HundredsEditorsDemo() {\n return (\n

\n {values.map((value, idx) => {\n return (\n

#{idx + 1}

\n \n {/* */}\n

\n );\n })}\n

\n );\n}\n","type":"registry:example","target":"components/hundreds-editors-demo.tsx","highlightedContent":"

'use client';\n\nimport * as React from 'react';\n\nimport { Plate, usePlateEditor } from 'platejs/react';\n\nimport { createMultiEditorsValue } from '@/registry/examples/values/multi-editors-value';\nimport { Editor, EditorContainer } from '@/components/ui/editor';\n\nconst values = createMultiEditorsValue();\n\nfunction WithPlate({ id, value }: any) {\n  const editor = usePlateEditor({\n    id,\n    // components: PlateUI,\n    // plugins: [BasicBlocksPlugin, BasicMarksPlugin],\n    value,\n  });\n\n  return (\n    <Plate editor={editor}>\n      <EditorContainer>\n        <Editor spellCheck={false} />\n      </EditorContainer>\n    </Plate>\n  );\n}\n\n// function Element({ attributes, children, element }: any) {\n//   switch (element.type) {\n//     case 'h1':\n//       return <h1 {...attributes}>{children}</h1>;\n//     default:\n//       return <p {...attributes}>{children}</p>;\n//   }\n// }\n\n// function WithoutPlate({ initialValue }: any) {\n//   const [value, setValue] = useState(initialValue);\n//   const renderElement = useCallback((p) => <Element {...p} />, []);\n//   const editor = useMemo(() => withReact(createEditor() as ReactEditor), []);\n//\n//   return (\n//     <Slate\n//       editor={editor}\n//       value={value}\n//       onChange={useCallback((v) => setValue(v), [])}\n//     >\n//       <Editable renderElement={renderElement} />\n//     </Slate>\n//   );\n// }\n\nexport default function HundredsEditorsDemo() {\n  return (\n    <div className=\"flex flex-col\">\n      {values.map((value, idx) => {\n        return (\n          <div key={idx} className=\"p-10\">\n            <h3 className=\"mb-2 font-semibold\">#{idx + 1}</h3>\n            <WithPlate id={idx + 1} value={value} />\n            {/* <WithoutPlate initialValue={initialValue} id={idx} /> */}\n          </div>\n        );\n      })}\n    </div>\n  );\n}\n

"},{"path":"values/multi-editors-value.tsx","type":"registry:example","target":"components/multi-editors-value.tsx","highlightedContent":"

"},{"path":"../ui/editor.tsx","type":"registry:ui","target":"components/ui/editor.tsx","highlightedContent":"

"},{"path":"../ui/editor-static.tsx","type":"registry:ui","target":"components/ui/editor-static.tsx","highlightedContent":"

"}]

数百编辑器