Merge branch 'udecode:main' into main

.changeset/itchy-cups-wonder.md

@@ -0,0 +1,5 @@
+---
+'@udecode/plate-dnd': patch
+---
+
+Fix: `useDndNode` calls a state setter during its render function

apps/www/content/docs/autoformat.mdx

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

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

@@ -167,15 +167,37 @@ export function BlockSelection() {
 
 This component should be rendered inside each block element for consistent selection feedback. Plate UI is doing it in `plate-element.tsx`.
 
-### Disable browser default scroll behavior
+## Selectable and resetable
 
-When selecting text and moving the cursor to the bottom of the page, the browser's default scroll behavior can conflict with the `BlockSelectionPlugin`. To mitigate this, you can add a non-selectable area to the right side of the editor:
+### full page selectable
+
+Like the [potion](https://potion.platejs.org/) template, you can enable block selection outside of the `<Editor />` component.
+
+Simply add the `data-plate-selectable` attribute to any component outside the editor that you want to make selectable. You can even make the entire page selectable if desired.
+
+For example:
 
 ```tsx
-<div className="absolute right-0 top-0 h-full w-4 select-none" />
+<Cover data-plate-selectable />
 ```
 
-This helps prevent unexpected scrolling during selection operations.
+### full page resetable
+
+To reset the selection, you need call the `api.blockSelection.unselect();` method.
+
+If you want to make the full page resetable by click, this means you need to be able to access the editor outside of `<Editor />`.
+
+Or you can implement a click outside handler to reset the selection.
+
+
+## Prevent unselect
+
+To prevent unselecting blocks when clicking on certain elements, add the `data-plate-prevent-unselect` attribute to those components
+
+For example:
+```tsx
+  <YourSpecialButtoon data-plate-prevent-unselect />
+```
 
 ## Plugins
 
@@ -232,6 +254,10 @@ A set of IDs for the currently selected blocks.
 
 ## API
 
+
+### editor.api.blockSelection.focus
+Focuses the block selection shadow input. This input handles copy, delete, and paste events for selected blocks.
+
 ### editor.api.blockSelection.addSelectedRow
 
 Adds a selected row to the block selection.

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

@@ -11,6 +11,21 @@ Use the [CLI](https://platejs.org/docs/components/cli) to install the latest ver
 
 ## November 2024 #16
 
+### November 7 #16.4
+
+- `block-context-menu`: prevent unselect when clicking on the context menu
+- `block-selection`: Add `editor.getApi(BlockSelectionPlugin).blockSelection.focus()` in onCloseAutoFocus.
+
+### November 6 #16.3
+
+- `editor`: add `overflow-x-hidden` to prevent horizontal scrolling
+- `table-element`: add `overflow-x-auto` to allow horizontal scrolling
+
+### November 5 #16.2
+
+- Fixed color-picker clear button's styles
+- Replace toggle-element button with css transitions 
+
 ### November 1 #16.1
 
 - `editor`: styles + `<EditorContainer />`

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>