Merge pull request #3727 from udecode/feat/block

Fix blocks

Author: zbeyens

apps/www/content/docs/autoformat.mdx

@@ -58,7 +58,7 @@ const plugins = [
 
 ### `autoformatRules`
 
-<ComponentSource src="../../templates/plate-playground-template/src/components/editor/plugins/autoformat-plugin.ts" />
+<ComponentSource name="autoformat-plugin" />
 
 ### `autoformatBlocks`
 

apps/www/content/docs/components/installation/manual.mdx

@@ -32,7 +32,7 @@ Here's what demo `tailwind.config.js` looks like:
 
 ### Configure styles
 
-Add the following to your `styles/globals.css` file. You can learn more about using CSS variables for theming in the [theming section](/docs/components/theming).
+Add the following to your `globals.css` file. You can learn more about using CSS variables for theming in the [theming section](/docs/components/theming).
 
 <ComponentSource
   src="../../templates/plate-playground-template/src/app/globals.css"
@@ -47,4 +47,20 @@ You can now start adding components to your project.
 npx shadcx@latest add plate/paragraph-element
 ```
 
+### Add editor (optional)
+
+Choose your editor to get started ([browse available editors](/editors)). 
+
+[Minimal Editor](https://template.platejs.org/editor)
+```bash
+npx shadcx@latest add plate/editor-basic
+```
+
+[AI Editor](https://playground.platejs.org/editor)
+```bash
+npx shadcx@latest add plate/editor-ai
+```
+
+This will add an `/editor` page to your project along with all necessary components as a starting point.
+
 </Steps>

apps/www/content/docs/components/installation/next.mdx

@@ -5,12 +5,30 @@ description: Install and configure Next.js.
 
 <Callout>
 
-A [template](https://github.com/udecode/plate/tree/main/templates/plate-template) is available to help you get started quickly.
-
-**If you're using Next.js 15, see the [Next.js 15 + React 19](https://ui.shadcn.com/docs/installation/react-19) guide.**
+**If you're using React 19, see the [Next.js 15 + React 19](https://ui.shadcn.com/docs/react-19) guide.**
 
 </Callout>
 
+## Quick Start
+
+Choose your editor to get started. These commands will initialize your project and add the editor ([browse available editors](/editors)):
+
+[Minimal Editor](https://template.platejs.org/editor)
+```bash
+npx shadcx@latest add plate/editor-basic
+```
+
+[AI Editor](https://playground.platejs.org/editor)
+```bash
+npx shadcx@latest add plate/editor-ai
+```
+
+This will add an `/editor` page to your project along with all necessary components as a starting point.
+
+## Manual Installation
+
+If you prefer to set up your project step by step, follow these instructions:
+
 <Steps>
 
 ### Create project
@@ -44,4 +62,20 @@ The command above will add the `ParagraphElement` component to your project.
 
 To add more components to your plugins, see [Plugin Components](/docs/plugin-components#register-components).
 
+### Add editor (optional)
+
+Choose your editor to get started ([browse available editors](/editors)). 
+
+[Minimal Editor](https://template.platejs.org/editor)
+```bash
+npx shadcx@latest add plate/editor-basic
+```
+
+[AI Editor](https://playground.platejs.org/editor)
+```bash
+npx shadcx@latest add plate/editor-ai
+```
+
+This will add an `/editor` page to your project along with all necessary components as a starting point.
+
 </Steps>

apps/www/content/docs/components/installation/vite.mdx

@@ -143,4 +143,20 @@ npx shadcx@latest add plate/paragraph-element
 
 To add the components to your plugins, see [Plugin Components](/docs/plugin-components#register-components).
 
+### Add editor (optional)
+
+Choose your editor to get started ([browse available editors](/editors)). 
+
+[Minimal Editor](https://template.platejs.org/editor)
+```bash
+npx shadcx@latest add plate/editor-basic
+```
+
+[AI Editor](https://playground.platejs.org/editor)
+```bash
+npx shadcx@latest add plate/editor-ai
+```
+
+This will add an `/editor` page to your project along with all necessary components as a starting point.
+
 </Steps>

apps/www/public/r/index.json

@@ -890,6 +890,35 @@
     "registryDependencies": [],
     "type": "registry:ui"
   },
+  {
+    "dependencies": [
+      "@udecode/plate-list"
+    ],
+    "doc": {
+      "description": "A checkbox list element with interactive todo items.",
+      "docs": [
+        {
+          "route": "/docs/list",
+          "title": "List"
+        }
+      ],
+      "examples": [
+        "list-demo"
+      ]
+    },
+    "files": [
+      {
+        "path": "plate-ui/todo-list-element.tsx",
+        "type": "registry:ui"
+      }
+    ],
+    "name": "todo-list-element",
+    "registryDependencies": [
+      "checkbox",
+      "plate-element"
+    ],
+    "type": "registry:ui"
+  },
   {
     "dependencies": [
       "@udecode/plate-toggle"

apps/www/public/r/styles/default/copilot-plugins.json

@@ -6,7 +6,7 @@
   ],
   "files": [
     {
-      "content": "'use client';\n\nimport type { TElement } from '@udecode/plate-common';\n\nimport { faker } from '@faker-js/faker';\nimport { CopilotPlugin } from '@udecode/plate-ai/react';\nimport { getAncestorNode } from '@udecode/plate-common';\nimport { serializeMdNodes, stripMarkdown } from '@udecode/plate-markdown';\n\nimport { GhostText } from '@/components/plate-ui/ghost-text';\n\nexport const copilotPlugins = [\n  CopilotPlugin.configure(({ api }) => ({\n    options: {\n      completeOptions: {\n        api: '/api/ai/copilot',\n        body: {\n          system: `You are an advanced AI writing assistant, similar to VSCode Copilot but for general text. Your task is to predict and generate the next part of the text based on the given context.\n  \n  Rules:\n  - Continue the text naturally up to the next punctuation mark (., ,, ;, :, ?, or !).\n  - Maintain style and tone. Don't repeat given text.\n  - For unclear context, provide the most likely continuation.\n  - Handle code snippets, lists, or structured text if needed.\n  - Don't include \"\"\" in your response.\n  - CRITICAL: Always end with a punctuation mark.\n  - CRITICAL: Avoid starting a new block. Do not use block formatting like >, #, 1., 2., -, etc. The suggestion should continue in the same block as the context.\n  - If no context is provided or you can't generate a continuation, return \"0\" without explanation.`,\n        },\n        onError: () => {\n          api.copilot.setBlockSuggestion({\n            text: stripMarkdown(faker.lorem.sentence()),\n          });\n        },\n        onFinish: (_, completion) => {\n          if (completion === '0') return;\n\n          api.copilot.setBlockSuggestion({\n            //stripMarkdownBlocks in plus GhostText\n            text: stripMarkdown(completion),\n          });\n        },\n      },\n      debounceDelay: 500,\n      getPrompt: ({ editor }) => {\n        const contextEntry = getAncestorNode(editor);\n\n        if (!contextEntry) return '';\n\n        const prompt = serializeMdNodes([contextEntry[0] as TElement]);\n\n        return `Continue the text up to the next punctuation mark:\n  \"\"\"\n  ${prompt}\n  \"\"\"`;\n      },\n      renderGhostText: GhostText,\n    },\n  })),\n] as const;\n",
+      "content": "'use client';\n\nimport type { TElement } from '@udecode/plate-common';\n\nimport { faker } from '@faker-js/faker';\nimport { CopilotPlugin } from '@udecode/plate-ai/react';\nimport { getAncestorNode } from '@udecode/plate-common';\nimport { serializeMdNodes, stripMarkdown } from '@udecode/plate-markdown';\n\nimport { GhostText } from '@/components/plate-ui/ghost-text';\n\nexport const copilotPlugins = [\n  CopilotPlugin.configure(({ api }) => ({\n    options: {\n      completeOptions: {\n        api: '/api/ai/copilot',\n        body: {\n          system: `You are an advanced AI writing assistant, similar to VSCode Copilot but for general text. Your task is to predict and generate the next part of the text based on the given context.\n  \n  Rules:\n  - Continue the text naturally up to the next punctuation mark (., ,, ;, :, ?, or !).\n  - Maintain style and tone. Don't repeat given text.\n  - For unclear context, provide the most likely continuation.\n  - Handle code snippets, lists, or structured text if needed.\n  - Don't include \"\"\" in your response.\n  - CRITICAL: Always end with a punctuation mark.\n  - CRITICAL: Avoid starting a new block. Do not use block formatting like >, #, 1., 2., -, etc. The suggestion should continue in the same block as the context.\n  - If no context is provided or you can't generate a continuation, return \"0\" without explanation.`,\n        },\n        onError: () => {\n          // Mock the API response. Remove it when you implement the route /api/ai/copilot\n          api.copilot.setBlockSuggestion({\n            text: stripMarkdown(faker.lorem.sentence()),\n          });\n        },\n        onFinish: (_, completion) => {\n          if (completion === '0') return;\n\n          api.copilot.setBlockSuggestion({\n            text: stripMarkdown(completion),\n          });\n        },\n      },\n      debounceDelay: 500,\n      getPrompt: ({ editor }) => {\n        const contextEntry = getAncestorNode(editor);\n\n        if (!contextEntry) return '';\n\n        const prompt = serializeMdNodes([contextEntry[0] as TElement]);\n\n        return `Continue the text up to the next punctuation mark:\n  \"\"\"\n  ${prompt}\n  \"\"\"`;\n      },\n      renderGhostText: GhostText,\n    },\n  })),\n] as const;\n",
       "path": "components/editor/plugins/copilot-plugins.tsx",
       "target": "components/editor/plugins/copilot-plugins.tsx",
       "type": "registry:component"

apps/www/public/r/styles/default/todo-list-element.json

@@ -0,0 +1,31 @@
+{
+  "dependencies": [
+    "@udecode/plate-list"
+  ],
+  "doc": {
+    "description": "A checkbox list element with interactive todo items.",
+    "docs": [
+      {
+        "route": "/docs/list",
+        "title": "List"
+      }
+    ],
+    "examples": [
+      "list-demo"
+    ]
+  },
+  "files": [
+    {
+      "content": "'use client';\n\nimport React from 'react';\n\nimport { cn, withRef } from '@udecode/cn';\nimport {\n  useTodoListElement,\n  useTodoListElementState,\n} from '@udecode/plate-list/react';\n\nimport { Checkbox } from './checkbox';\nimport { PlateElement } from './plate-element';\n\nexport const TodoListElement = withRef<typeof PlateElement>(\n  ({ children, className, ...props }, ref) => {\n    const { element } = props;\n    const state = useTodoListElementState({ element });\n    const { checkboxProps } = useTodoListElement(state);\n\n    return (\n      <PlateElement\n        ref={ref}\n        className={cn('flex flex-row py-1', className)}\n        {...props}\n      >\n        <div\n          className=\"mr-1.5 flex select-none items-center justify-center\"\n          contentEditable={false}\n        >\n          <Checkbox {...checkboxProps} />\n        </div>\n        <span\n          className={cn(\n            'flex-1 focus:outline-none',\n            state.checked && 'text-muted-foreground line-through'\n          )}\n          contentEditable={!state.readOnly}\n          suppressContentEditableWarning\n        >\n          {children}\n        </span>\n      </PlateElement>\n    );\n  }\n);\n",
+      "path": "plate-ui/todo-list-element.tsx",
+      "target": "components/plate-ui/todo-list-element.tsx",
+      "type": "registry:ui"
+    }
+  ],
+  "name": "todo-list-element",
+  "registryDependencies": [
+    "checkbox",
+    "plate-element"
+  ],
+  "type": "registry:ui"
+}