Merge pull request #3712 from udecode/feat/block

Blocks

Author: zbeyens

apps/www/content/docs/components/cli.mdx

@@ -7,17 +7,10 @@ description: Use the CLI to add Plate UI components to your project.
 
 Use the `init` command to initialize configuration and dependencies for a new project with Plate UI.
 
-The `init` command installs dependencies, adds the `cn` util, configures `tailwind.config.js`, and CSS variables for the project.
+The `init` command installs dependencies, configures `tailwind.config.js`, and CSS variables for the project.
 
 ```bash
-npx shadcx@latest init -u https://platejs.org/r -n plate
-```
-
-If you also want to use [shadcn/ui](https://ui.shadcn.com/) in your project, you can use the following command:
-
-```bash
-npx shadcx@latest init
-npx shadcx@latest init -u https://platejs.org/r -n plate
+npx shadcx@latest init plate
 ```
 
 You will be asked a few questions to configure `components.json`:
@@ -30,7 +23,7 @@ Do you want to use CSS variables for colors? › yes
 ### Options
 
 ```txt
-Usage: shadcx init [options]
+Usage: shadcx init [options] [registry]
 
 initialize your project and install dependencies
 
@@ -39,10 +32,10 @@ Options:
   -f, --force       force overwrite of existing components.json. (default: false)
   -y, --yes         skip confirmation prompt. (default: false)
   -c, --cwd <cwd>   the working directory. defaults to the current directory.
-  -u, --url <url>   custom registry URL. (default: https://platejs.org/r)
   -n, --name <name> registry name. (default: plate)
   -s, --silent      mute output (default: false)
   --src-dir         use the src directory when creating a new project (default: false)
+  --pm <pm>         package manager to use (npm, pnpm, yarn, bun)
   -h, --help        display help for command
 ```
 
@@ -51,7 +44,14 @@ Options:
 Use the `add` command to add Plate UI components and dependencies to your project.
 
 ```bash
-npx shadcx@latest add [component] -r plate
+# Using prefix syntax
+npx shadcx@latest add plate/editor plate/toolbar
+
+# Or mixed usage (registry will be from the first prefix found)
+npx shadcx@latest add plate/editor toolbar
+
+# Or using registry option
+npx shadcx@latest add editor toolbar -r plate
 ```
 
 You will be presented with a list of components to choose from:
@@ -99,13 +99,13 @@ Options:
 In a monorepo, you can specify the path to your workspace with the `-c` or `--cwd` option.
 
 ```bash
-npx shadcx@latest init -u https://platejs.org/r -n plate -c ./apps/www
+npx shadcx@latest init plate -c ./apps/www
 ```
 
 or
 
 ```bash
-npx shadcx@latest add align-dropdown-menu -r plate -c ./apps/www
+npx shadcx@latest add plate/editor -c ./apps/www
 ```
 
 ## Example components.json
@@ -114,24 +114,30 @@ Here's an example `components.json` file configured for [shadcn/ui](https://ui.s
 
 ```json
 {
+  "$schema": "https://ui.shadcn.com/schema.json",
   "style": "default",
-  "tailwind": {
-    "config": "tailwind.config.js",
-    "css": "app/globals.css",
-    "baseColor": "slate",
-    "cssVariables": true
-  },
+  "rsc": true,
+  "tsx": true,
   "aliases": {
     "components": "@/components",
+    "hooks": "@/hooks",
+    "lib": "@/lib",
+    "ui": "@/components/ui",
     "utils": "@/lib/utils"
   },
+  "tailwind": {
+    "baseColor": "slate",
+    "config": "tailwind.config.ts",
+    "css": "src/app/globals.css",
+    "cssVariables": true,
+    "prefix": ""
+  },
   "registries": {
     "plate": {
-      "url": "https://platejs.org/r",
-      "style": "default",
       "aliases": {
         "ui": "@/components/plate-ui"
-      }
+      },
+      "url": "https://platejs.org/r"
     }
   }
 }

apps/www/content/docs/components/components-json.mdx

@@ -16,22 +16,9 @@ We use it to understand how your project is set up and how to generate component
 You can create a `components.json` file in your project by running the following command:
 
 ```bash
-npx shadcx@latest init
+npx shadcx@latest init plate
 ```
 
-For Plate UI components, you have two options:
-
-1. Initialize both [shadcn/ui](https://ui.shadcn.com/) and Plate UI:
-   ```bash
-   npx shadcx@latest init
-   npx shadcx@latest init -u https://platejs.org/r -n plate
-   ```
-
-2. Initialize only Plate UI:
-   ```bash
-   npx shadcx@latest init -u https://platejs.org/r -n plate
-   ```
-
 See the [CLI section](/docs/cli) for more information.
 
 ## $schema
@@ -220,8 +207,11 @@ The style to use for components from this registry. Plate UI has only one style:
 Custom aliases for this registry. This allows you to specify a different location for UI components from this registry.
 
 <Callout>
-  When using multiple registries, you can use the `-r` or `--registry` option with the `add` command to specify which registry to use:
-  ```bash
-  npx shadcx@latest add button -r plate
-  ```
+
+When working with multiple registries, you can use the prefix syntax to specify which registry to use for each component:
+
+```bash
+npx shadcx@latest add plate/button
+```
+
 </Callout>

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

@@ -16,7 +16,7 @@ Components are styled using Tailwind CSS. You need to install Tailwind CSS in yo
 Add the following dependencies to your project:
 
 ```bash
-npm install @udecode/cn tailwindcss-animate class-variance-authority tailwind-merge lucide-react
+npm install @udecode/plate-common slate slate-react slate-history slate-hyperscript @udecode/cn tailwindcss-animate class-variance-authority tailwind-merge lucide-react
 ```
 
 We use icons from [Lucide](https://lucide.dev). You can use any icon library you want.
@@ -26,7 +26,7 @@ We use icons from [Lucide](https://lucide.dev). You can use any icon library you
 Here's what demo `tailwind.config.js` looks like:
 
 <ComponentSource
-  src="../../templates/plate-playground-template/tailwind.config.js"
+  src="../../templates/plate-playground-template/tailwind.config.ts"
   open
 />
 
@@ -35,7 +35,7 @@ Here's what demo `tailwind.config.js` looks like:
 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).
 
 <ComponentSource
-  src="../../templates/plate-playground-template/src/styles/globals.css"
+  src="../../templates/plate-playground-template/src/app/globals.css"
   open
 />
 
@@ -44,7 +44,7 @@ Add the following to your `styles/globals.css` file. You can learn more about us
 You can now start adding components to your project.
 
 ```bash
-npx shadcx@latest add paragraph-element -r plate
+npx shadcx@latest add plate/paragraph-element
 ```
 
 </Steps>

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

@@ -7,9 +7,7 @@ description: Install and configure Next.js.
 
 A [template](https://github.com/udecode/plate/tree/main/templates/plate-template) is available to help you get started quickly.
 
-<Callout>
 **If you're using Next.js 15, see the [Next.js 15 + React 19](https://ui.shadcn.com/docs/installation/react-19) guide.**
-</Callout>
 
 </Callout>
 
@@ -20,14 +18,7 @@ A [template](https://github.com/udecode/plate/tree/main/templates/plate-template
 Run the `init` command to create a new Next.js project or to setup an existing one:
 
 ```bash
-npx shadcx@latest init -u https://platejs.org/r -n plate
-```
-
-If you want to use [shadcn/ui](https://ui.shadcn.com/) combined with Plate UI, run instead:
-
-```bash
-npx shadcx@latest init
-npx shadcx@latest init -u https://platejs.org/r -n plate
+npx shadcx@latest init plate
 ```
 
 ### Configure components.json
@@ -44,7 +35,7 @@ Do you want to use CSS variables for colors? › no / yes
 You can now start adding components to your project.
 
 ```bash
-npx shadcx@latest add paragraph-element -r plate
+npx shadcx@latest add plate/paragraph-element
 ```
 
 The command above will add the `ParagraphElement` component to your project.

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

@@ -119,7 +119,7 @@ export default defineConfig({
 Run `shadcx` init command to setup your project:
 
 ```bash
-npx shadcx@latest init -u https://platejs.org/r -n plate
+npx shadcx@latest init plate
 ```
 
 ### Configure components.json
@@ -136,7 +136,7 @@ Do you want to use CSS variables for colors? › no / yes
 You can now start adding components to your project.
 
 ```bash
-npx shadcx@latest add paragraph-element
+npx shadcx@latest add plate/paragraph-element
 ```
 
 ### Register components

apps/www/public/r/config.json

@@ -1,4 +1,5 @@
 {
+  "name": "plate",
   "style": "default",
   "tailwind": {
     "baseColor": "slate"

apps/www/public/r/index.json

@@ -478,6 +478,35 @@
     ],
     "type": "registry:ui"
   },
+  {
+    "dependencies": [
+      "@udecode/plate-media"
+    ],
+    "doc": {
+      "description": "A modal component for previewing and manipulating images.",
+      "docs": [
+        {
+          "route": "/docs/media"
+        },
+        {
+          "route": "https://pro.platejs.org/docs/components/image-preview"
+        }
+      ],
+      "examples": [
+        "media-demo",
+        "media-toolbar-pro"
+      ]
+    },
+    "files": [
+      {
+        "path": "plate-ui/image-preview.tsx",
+        "type": "registry:ui"
+      }
+    ],
+    "name": "image-preview",
+    "registryDependencies": [],
+    "type": "registry:ui"
+  },
   {
     "dependencies": [
       "@udecode/plate-kbd"
@@ -984,6 +1013,26 @@
     ],
     "type": "registry:ui"
   },
+  {
+    "dependencies": [
+      "@radix-ui/react-context-menu"
+    ],
+    "doc": {
+      "description": "Displays a menu to the user — such as a set of actions or functions — triggered by a button.",
+      "links": {
+        "doc": "https://ui.shadcn.com/docs/components/context-menu"
+      }
+    },
+    "files": [
+      {
+        "path": "plate-ui/context-menu.tsx",
+        "type": "registry:ui"
+      }
+    ],
+    "name": "context-menu",
+    "registryDependencies": [],
+    "type": "registry:ui"
+  },
   {
     "dependencies": [
       "@radix-ui/react-dialog"
@@ -1147,6 +1196,7 @@
     ],
     "name": "ai-menu",
     "registryDependencies": [
+      "use-chat",
       "command",
       "popover",
       "editor"
@@ -1248,7 +1298,8 @@
     "name": "block-context-menu",
     "registryDependencies": [
       "calendar",
-      "plate-element"
+      "plate-element",
+      "context-menu"
     ],
     "type": "registry:ui"
   },
@@ -1463,7 +1514,11 @@
     "type": "registry:ui"
   },
   {
-    "dependencies": [],
+    "dependencies": [
+      "@udecode/plate-cursor",
+      "@udecode/plate-dnd",
+      "@udecode/plate-selection"
+    ],
     "doc": {
       "description": "A visual overlay for collaborative cursors and selections.",
       "docs": [