docs

README.md

@@ -35,12 +35,12 @@ Plate
 
 You can choose one of the following templates to get started:
 
-| Option                                                                            | NextJS |  Plate | Plugins |AI & Backend |
-| --------------------------------------------------------------------------------- | ------ |  ----- | ------- |-------- |
-| [Notion clone template](https://pro.platejs.org/docs/templates/potion) | ✅     |  ✅    | ✅      |✅       |
-| [Plate playground template](https://github.com/udecode/plate-playground-template) | ✅     |  ✅    | ✅      |       |
-| [Plate minimal template](https://github.com/udecode/plate-template)               | ✅     |  ✅    |         |       |
-| [NextJS template](https://platejs.org/docs/components/installation/next)          | ✅     |        |         |       |
+| Option                                                                            | NextJS | Plate | Plugins | AI & Backend |
+| --------------------------------------------------------------------------------- | ------ | ----- | ------- | ------------ |
+| [Notion-like template](https://pro.platejs.org/docs/templates/potion)             | ✅     | ✅    | ✅      | ✅           |
+| [Plate playground template](https://github.com/udecode/plate-playground-template) | ✅     | ✅    | ✅      |              |
+| [Plate minimal template](https://github.com/udecode/plate-template)               | ✅     | ✅    |         |              |
+| [NextJS template](https://platejs.org/docs/components/installation/next)          | ✅     |       |         |              |
 
 ## Documentation
 

apps/www/content/docs/block-selection.mdx

@@ -138,7 +138,7 @@ options: {
 
 ### Selection area
 
-Style the selection area using `.slate-selection-area` class. For example:
+Style the selection area using `.slate-selection-area` class to your `EditorContainer` component. For example:
 
 ```js
 '[&_.slate-selection-area]:border [&_.slate-selection-area]:border-primary [&_.slate-selection-area]:bg-primary/10'

apps/www/content/docs/getting-started.mdx

@@ -15,7 +15,7 @@ You can choose one of the following templates to get started:
 
 | Option                                                                            | NextJS | Plate | Plugins | AI & Backend |
 | --------------------------------------------------------------------------------- | ------ | ----- | ------- | ------------ |
-| [Notion clone template](https://pro.platejs.org/docs/templates/potion)            | ✅     | ✅    | ✅      | ✅           |
+| [Notion-like template](https://pro.platejs.org/docs/templates/potion)            | ✅     | ✅    | ✅      | ✅           |
 | [Plate playground template](https://github.com/udecode/plate-playground-template) | ✅     | ✅    | ✅      |              |
 | [Plate minimal template](https://github.com/udecode/plate-template)               | ✅     | ✅    |         |              |
 | [NextJS template](/docs/components/installation/next)                             | ✅     |       |         |              |

apps/www/public/r/index.json

@@ -1549,10 +1549,8 @@
       "examples": [
         "editor-default",
         "editor-disabled",
-        "editor-ghost",
-        "editor-label",
-        "editor-text",
-        "editor-button"
+        "editor-full-width",
+        "editor-ai-chat"
       ]
     },
     "files": [

apps/www/public/r/styles/default/basic-editor-handler-demo.json

@@ -1,7 +1,7 @@
 {
   "files": [
     {
-      "content": "'use client';\n\nimport 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",
+      "content": "'use client';\n\nimport React, { useState } from 'react';\n\nimport type { Value } from '@udecode/plate-common';\n\nimport {\n  type PlateContentProps,\n  Plate,\n  usePlateEditor,\n} from '@udecode/plate-common/react';\n\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from '@/components/ui/accordion';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\n\nconst editableProps: PlateContentProps = {\n  autoFocus: false,\n  placeholder: 'Type…',\n  spellCheck: false,\n};\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      <EditorContainer>\n        <Editor {...editableProps} />\n      </EditorContainer>\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"

apps/www/public/r/styles/default/basic-editor-styling-demo.json

@@ -1,7 +1,7 @@
 {
   "files": [
     {
-      "content": "'use client';\n\nimport React from 'react';\n\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\n\nimport { Editor } from '@/components/plate-ui/editor';\n\nexport default function BasicEditorStylingDemo() {\n  const editor = usePlateEditor();\n\n  return (\n    <Plate editor={editor}>\n      <Editor placeholder=\"Type...\" />\n    </Plate>\n  );\n}\n",
+      "content": "'use client';\n\nimport React from 'react';\n\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\n\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\n\nexport default function BasicEditorStylingDemo() {\n  const editor = usePlateEditor();\n\n  return (\n    <Plate editor={editor}>\n      <EditorContainer>\n        <Editor placeholder=\"Type...\" />\n      </EditorContainer>\n    </Plate>\n  );\n}\n",
       "path": "example/basic-editor-styling-demo.tsx",
       "target": "components/basic-editor-styling-demo.tsx",
       "type": "registry:example"

apps/www/public/r/styles/default/basic-editor-value-demo.json

@@ -1,7 +1,7 @@
 {
   "files": [
     {
-      "content": "'use client';\n\nimport React from 'react';\n\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\n\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 BasicEditorValueDemo() {\n  const editor = usePlateEditor({ value });\n\n  return (\n    <Plate editor={editor}>\n      <Editor {...editableProps} />\n    </Plate>\n  );\n}\n",
+      "content": "'use client';\n\nimport React from 'react';\n\nimport {\n  type PlateContentProps,\n  Plate,\n  usePlateEditor,\n} from '@udecode/plate-common/react';\n\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\n\nconst editableProps: PlateContentProps = {\n  autoFocus: false,\n  placeholder: 'Type…',\n  spellCheck: false,\n};\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 BasicEditorValueDemo() {\n  const editor = usePlateEditor({ value });\n\n  return (\n    <Plate editor={editor}>\n      <EditorContainer>\n        <Editor {...editableProps} />\n      </EditorContainer>\n    </Plate>\n  );\n}\n",
       "path": "example/basic-editor-value-demo.tsx",
       "target": "components/basic-editor-value-demo.tsx",
       "type": "registry:example"