diff --git a/.changeset/khaki-seals-smell.md b/.changeset/khaki-seals-smell.md
new file mode 100644
index 0000000000..9279c51d4f
--- /dev/null
+++ b/.changeset/khaki-seals-smell.md
@@ -0,0 +1,5 @@
+---
+'@udecode/plate-selection': minor
+---
+
+Feat: api.blockSelection.selectBlocks
diff --git a/.changeset/plenty-rivers-repeat.md b/.changeset/plenty-rivers-repeat.md
new file mode 100644
index 0000000000..16a63730af
--- /dev/null
+++ b/.changeset/plenty-rivers-repeat.md
@@ -0,0 +1,5 @@
+---
+'@udecode/plate-ai': patch
+---
+
+Fix replaceSelection, insertBelow
diff --git a/apps/www/content/docs/en/components/changelog.mdx b/apps/www/content/docs/en/components/changelog.mdx
index fa4bb148b6..dd70518f91 100644
--- a/apps/www/content/docs/en/components/changelog.mdx
+++ b/apps/www/content/docs/en/components/changelog.mdx
@@ -21,8 +21,6 @@ const aiEditor = usePlateEditor({ plugins });
 useAIChatEditor(aiEditor, content);
 ```
 
-
-
 ### January 12 #18.2
 
 - `ai-plugins`: remove `createAIEditor`, it's now created in `ai-chat-editor`
diff --git a/apps/www/content/docs/en/form.mdx b/apps/www/content/docs/en/form.mdx
new file mode 100644
index 0000000000..3784c5a628
--- /dev/null
+++ b/apps/www/content/docs/en/form.mdx
@@ -0,0 +1,428 @@
+---
+title: Form
+description: How to integrate Plate editor with react-hook-form.
+---
+
+While Plate is typically used as an **uncontrolled** input, there are valid scenarios where you want to integrate the editor within a form library like [**react-hook-form**](https://www.react-hook-form.com) or the [**Form**](https://ui.shadcn.com/docs/components/form) component from **shadcn/ui**. This guide walks through best practices and common pitfalls.
+
+## When to Integrate Plate with a Form
+
+- **Form Submission**: You want the editor's content to be included along with other fields (e.g., `<input>`, `<select>`) when the user submits the form.
+- **Validation**: You want to validate the editor's content (e.g., checking if it's empty) at the same time as other form fields.
+- **Form Data Management**: You want to store the editor content in the same store (like `react-hook-form`'s state) as other fields.
+
+However, keep in mind the warning about **fully controlling** the editor value. Plate (and Slate) strongly prefer an uncontrolled model. If you attempt to replace the editor's internal state too frequently, you can break **selection**, **history**, or cause performance issues. The recommended pattern is to treat the editor as uncontrolled, but still **sync** form data on certain events.
+
+## Approach 1: Sync on `onChange`
+
+This is the most straightforward approach: each time the editor changes, update your form field's value. For small documents or infrequent changes, this is usually acceptable.
+
+### React Hook Form Example
+
+```tsx
+import { useForm } from 'react-hook-form';
+import type { Value } from '@udecode/plate';
+import { Plate, PlateContent, usePlateEditor } from '@udecode/plate/react';
+
+type FormData = {
+  content: Value;
+};
+
+export function RHFEditorForm() {
+  const initialValue = [
+    { type: 'p', children: [{ text: 'Hello from react-hook-form!' }] },
+  ]
+
+  // Setup react-hook-form
+  const { register, handleSubmit, setValue } = useForm<FormData>({
+    defaultValues: {
+      content: initialValue,
+    },
+  });
+
+  // Create/configure the Plate editor
+  const editor = usePlateEditor({ value: initialValue });
+
+  // Register the field for react-hook-form
+  register('content', { /* validation rules... */ });
+
+  const onSubmit = (data: FormData) => {
+    // data.content will have final editor content
+    console.log('Submitted:', data.content);
+  };
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)}>
+      <Plate
+        editor={editor}
+        onChange={({ value }) => {
+          // Sync editor changes to the form
+          setValue('content', value);
+        }}
+      >
+        <PlateContent placeholder="Type here..." />
+      </Plate>
+
+      <button type="submit">Submit</button>
+    </form>
+  );
+}
+```
+
+**Notes**:
+1. **`defaultValues.content`**: your initial editor content.
+2. **`register('content')`**: signals to RHF that the field is tracked.  
+3. **`onChange({ value })`**: calls `setValue('content', value)` each time.
+
+If you expect large documents or fast typing, consider debouncing or switching to an `onBlur` approach to reduce form updates.
+
+### shadcn/ui Form Example
+
+[shadcn/ui](https://ui.shadcn.com/docs/components/form) provides a `<Form>` that integrates with react-hook-form. We'll use `<FormField>` to handle the field logic:
+
+```tsx
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form';
+import { useForm } from 'react-hook-form';
+import { Plate, PlateContent, usePlateEditor } from '@udecode/plate/react';
+
+type FormValues = {
+  content: any;
+};
+
+export function EditorForm() {
+  // 1. Create the form
+  const form = useForm<FormValues>({
+    defaultValues: {
+      content: [
+        { type: 'p', children: [{ text: 'Hello from shadcn/ui Form!' }] },
+      ],
+    },
+  });
+
+  // 2. Create the Plate editor
+  const editor = usePlateEditor();
+
+  const onSubmit = (data: FormValues) => {
+    console.log('Submitted data:', data.content);
+  };
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)}>
+        <FormField
+          control={form.control}
+          name="content"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Content</FormLabel>
+              <FormControl>
+                <Plate
+                  editor={editor}
+                  onChange={({ value }) => {
+                    // Sync to the form
+                    field.onChange(value);
+                  }}
+                >
+                  <PlateContent placeholder="Type..." />
+                </Plate>
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <button type="submit">Submit</button>
+      </form>
+    </Form>
+  );
+}
+```
+
+This approach makes your editor content behave like any other field in the shadcn/ui form.
+
+## Approach 2: Sync on Blur (or Another Trigger)
+
+Instead of syncing on every keystroke, you might only need the final value when the user:
+- Leaves the editor (`onBlur`),
+- Clicks a “Save” button, or
+- Reaches certain form submission logic.
+
+```tsx
+<Plate editor={editor}>
+  <PlateContent
+    onBlur={() => {
+      // Only sync on blur
+      setValue('content', editor.children);
+    }}
+  />
+</Plate>
+```
+
+This reduces overhead but your form state won't reflect partial updates while the user is typing.
+
+## Approach 3: Controlled Replacement (Advanced)
+
+If you want the form to be the single source of truth (completely [controlled](/docs/controlled)):
+```ts
+editor.tf.setValue(formStateValue);
+```
+But this has known drawbacks:
+- Potentially breaks cursor position and undo/redo.
+- Can cause frequent full re-renders for large docs.
+
+**Recommendation**: Stick to a partially uncontrolled model if you can.
+
+## Example: Save & Reset
+
+Here's a more complete form demonstrating both saving and resetting the editor/form:
+
+```tsx
+import { useForm } from 'react-hook-form';
+import { Plate, PlateContent, usePlateEditor } from '@udecode/plate/react';
+
+function MyForm() {
+  const form = useForm({
+    defaultValues: {
+      content: [
+        { type: 'p', children: [{ text: 'Initial content...' }] },
+      ],
+    },
+  });
+
+  const editor = usePlateEditor();
+
+  const onSubmit = (data) => {
+    alert(JSON.stringify(data, null, 2));
+  };
+
+  return (
+    <form onSubmit={form.handleSubmit(onSubmit)}>
+      <Plate
+        editor={editor}
+        onChange={({ value }) => form.setValue('content', value)}
+      >
+        <PlateContent />
+      </Plate>
+
+      <button type="submit">Save</button>
+
+      <button
+        type="button"
+        onClick={() => {
+          // Reset the editor
+          editor.tf.reset();
+          // Reset the form
+          form.reset();
+        }}
+      >
+        Reset
+      </button>
+    </form>
+  );
+}
+```
+
+- **`onChange`** -> updates form state.
+- **Reset** -> calls both `editor.tf.reset()` and `form.reset()` for consistency.
+
+## Migrating from a shadcn Textarea to Plate
+
+If you have a standard [TextareaForm from shadcn/ui docs](https://ui.shadcn.com/docs/components/textarea#form) and want to replace `<Textarea>` with a Plate editor, you can follow these steps:
+
+```tsx
+// 1. Original code (TextareaForm)
+<FormField
+  control={form.control}
+  name="bio"
+  render={({ field }) => (
+    <FormItem>
+      <FormLabel>Bio</FormLabel>
+      <FormControl>
+        <Textarea
+          placeholder="Tell us a bit about yourself"
+          className="resize-none"
+          {...field}
+        />
+      </FormControl>
+      <FormDescription>
+        You can <span>@mention</span> other users and organizations.
+      </FormDescription>
+      <FormMessage />
+    </FormItem>
+  )}
+/>
+```
+
+Create a new `EditorField` component:
+
+```tsx
+// EditorField.tsx
+"use client";
+
+import * as React from "react";
+import type { Value } from "@udecode/plate";
+import { Plate, PlateContent, usePlateEditor } from "@udecode/plate/react";
+
+/**
+ * A reusable editor component that works like a standard <Textarea>,
+ * accepting `value`, `onChange`, and optional placeholder.
+ *
+ * Usage:
+ *
+ * <FormField
+ *   control={form.control}
+ *   name="bio"
+ *   render={({ field }) => (
+ *     <FormItem>
+ *       <FormLabel>Bio</FormLabel>
+ *       <FormControl>
+ *         <EditorField
+ *           {...field}
+ *           placeholder="Tell us a bit about yourself"
+ *         />
+ *       </FormControl>
+ *       <FormDescription>Some helpful description...</FormDescription>
+ *       <FormMessage />
+ *     </FormItem>
+ *   )}
+ * />
+ */
+export interface EditorFieldProps
+  extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * The current Slate Value. Should be an array of Slate nodes.
+   */
+  value?: Value;
+
+  /**
+   * Called when the editor value changes.
+   */
+  onChange?: (value: Value) => void;
+
+  /**
+   * Placeholder text to display when editor is empty.
+   */
+  placeholder?: string;
+}
+
+export function EditorField({
+  value,
+  onChange,
+  placeholder = "Type here...",
+  ...props
+}: EditorFieldProps) {
+  // We create our editor instance with the provided initial `value`.
+  const editor = usePlateEditor({
+    value: value ?? [
+      { type: "p", children: [{ text: "" }] }, // Default empty paragraph
+    ],
+  });
+
+  return (
+    <Plate
+      editor={editor}
+      onChange={({ value }) => {
+        // Sync changes back to the caller via onChange prop
+        onChange?.(value);
+      }}
+      {...props}
+    >
+      <PlateContent placeholder={placeholder} />
+    </Plate>
+  );
+}
+```
+
+3. Replace the `<Textarea>` with a `<EditorField>` block:
+
+```tsx
+"use client";
+
+import { z } from "zod";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
+import { EditorField } from "./EditorField"; // Import the component above
+
+// 1. Define our validation schema with zod
+const FormSchema = z.object({
+  bio: z
+    .string()
+    .min(10, { message: "Bio must be at least 10 characters." })
+    .max(160, { message: "Bio must not exceed 160 characters." }),
+});
+
+// 2. Build our main form component
+export function EditorForm() {
+  // 3. Setup the form
+  const form = useForm<z.infer<typeof FormSchema>>({
+    resolver: zodResolver(FormSchema),
+    defaultValues: {
+      // Here "bio" is just a string, but our editor
+      // will interpret it as initial content if you parse it as JSON
+      bio: "",
+    },
+  });
+
+  // 4. Submission handler
+  function onSubmit(data: z.infer<typeof FormSchema>) {
+    alert("Submitted: " + JSON.stringify(data, null, 2));
+  }
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
+        <FormField
+          control={form.control}
+          name="bio"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Bio</FormLabel>
+              <FormControl>
+                <EditorField
+                  {...field}
+                  placeholder="Tell us a bit about yourself..."
+                />
+              </FormControl>
+              <FormDescription>
+                You can <span>@mention</span> other users and organizations.
+              </FormDescription>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <button type="submit" className="py-2 px-4 bg-primary text-white">
+          Submit
+        </button>
+      </form>
+    </Form>
+  );
+}
+```
+
+- Any existing form validations or error messages remain the same.
+- For default values, ensure `form.defaultValues.bio` is a valid Slate value (array of nodes) instead of a string.
+- For controlled values, use `editor.tf.setValue(formStateValue)` with moderation.
+
+## Best Practices
+
+1. **Use an Uncontrolled Editor**: Let Plate manage its own state, updating the form only when necessary.  
+2. **Minimize Replacements**: Avoid calling `editor.tf.setValue` too often; it can break selection, history, or degrade performance.  
+3. **Validate at the Right Time**: Decide if you need instant validation (typing) or upon blur/submit.  
+4. **Reset Both**: If you reset the form, call `editor.tf.reset()` to keep them in sync.
diff --git a/apps/www/content/docs/en/getting-started.mdx b/apps/www/content/docs/en/getting-started.mdx
index 6a2b5101a7..d7560702e2 100644
--- a/apps/www/content/docs/en/getting-started.mdx
+++ b/apps/www/content/docs/en/getting-started.mdx
@@ -22,7 +22,7 @@ For an existing React project, jump to the next step.
 First, install the core dependencies:
 
 ```bash
-npm install @udecode/plate slate-react slate-history
+npm install @udecode/plate
 ```
 
 For the examples in this guide, we'll also use these plugins:
@@ -36,6 +36,24 @@ npm install @udecode/plate-basic-marks @udecode/plate-heading @udecode/plate-blo
 - `@udecode/plate-block-quote` adds blockquote support.
 - `@udecode/cn` helps with component styling (optional).
 
+### TypeScript Requirements
+
+Ensure your `tsconfig.json` is properly configured. The recommended setup for Plate requires TypeScript 5.0+ with the `"bundler"` module resolution:
+
+```jsonc
+{
+  "compilerOptions": {
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    // ... other options
+  }
+}
+```
+
+<Callout>
+  **Note**: If you can't use TypeScript 5.0+ or "bundler" resolution, see the [TypeScript](/docs/typescript) page for alternative solutions using path aliases.
+</Callout>
+
 ### Basic Editor
 
 Let's start with a minimal editor setup.
diff --git a/apps/www/content/docs/en/html.mdx b/apps/www/content/docs/en/html.mdx
index 6f65cf9267..01f0f70539 100644
--- a/apps/www/content/docs/en/html.mdx
+++ b/apps/www/content/docs/en/html.mdx
@@ -4,12 +4,6 @@ title: Serializing HTML
 
 <ComponentPreview name="html-demo" />
 
-<Callout className="my-4">
-  **Note**: Round-tripping is not yet supported: the HTML serializer will not
-  preserve all information from the Slate value when converting to HTML and
-  back.
-</Callout>
-
 ## Slate -> HTML
 
 [Server-side example](/docs/examples/slate-to-html)
@@ -33,7 +27,7 @@ const components = {
   // ...
 };
 
-// You can also pass a custom editor component and props
+// You can also pass a custom editor component and props.
 // For example, EditorStatic is a styled version of PlateStatic.
 const html = await serializeHtml(editor, {
   components,
@@ -67,148 +61,67 @@ const fullHtml = `<!DOCTYPE html>
 </html>`;
 ```
 
-<Callout className="my-4"> **Note**: The serialization process converts Slate nodes into static HTML markup. Interactivity like React event handlers, client-side hooks, or components that rely on browser APIs won't work in the serialized output. </Callout>
+<Callout className="my-4">
+  **Note**: The serialization process converts Slate nodes into static HTML markup. Interactivity like React event handlers, client-side hooks, or components that rely on browser APIs won't work in the serialized output.
+</Callout>
 
 ### Using Static Components
 
-When serializing Slate content to HTML, **you must use static versions of your components**. Your interactive, "client" components often rely on browser APIs or client-side React features that are not available during server-side rendering (SSR).
-
-**What does this mean?**  
-- **Interactive Components:** Components that use `use client`, event handlers (`onClick`), or browser-only APIs (like `window` or `document`) cannot run on the server.  
-- **Static Components:** Instead, for serialization, you must provide "static" versions of these components. Static components should:
-  - Not include any event handlers like `onClick`.
-  - Not rely on browser APIs or client-side hooks.
-  - Simply render the content as plain HTML.
+When serializing Slate content to HTML, **you must use static versions** of your elements (i.e., no client-only code). Check out the [Plate Static](/docs/plate-static) guide for more details on creating a “static” version of your components that can safely run in a server environment.
 
 **Example:**
 
-If you have a client-only component like `ImageElement` that uses `use client` and event handlers, you need to create a static version `ImageElementStatic` that just returns a plain `<img>` tag with all its attributes and no interactivity.
-
-For each plugin key, provide its corresponding static component in the `components` object passed to `serializeHtml`:
-
 ```tsx
-// Instead of using interactive components that rely on 'use client',
-// use statically defined components that simply return plain HTML.
-
 import { createSlateEditor, serializeHtml } from '@udecode/plate';
-
-// Import static versions of your components
 import { ParagraphElementStatic } from '@/components/plate-ui/paragraph-element-static';
 import { HeadingElementStatic } from '@/components/plate-ui/heading-element-static';
 import { ImageElementStatic } from '@/components/plate-ui/image-element-static';
-// ... and so on for each plugin ...
+// ... etc.
 
-const editor = createSlateEditor({ /* ...plugins... */ });
+const editor = createSlateEditor({ /* your plugins */ });
 
 const components = {
   [BaseParagraphPlugin.key]: ParagraphElementStatic,
   [BaseHeadingPlugin.key]: HeadingElementStatic,
   [BaseImagePlugin.key]: ImageElementStatic,
-  // ... other static components ...
 };
 
 const html = await serializeHtml(editor, { components });
 ```
 
-### PlateStatic vs. Plate
-
-When rendering your editor output without the need for an interactive environment, you have two primary options: `PlateStatic` and `Plate`. Both are designed to produce static, non-editable views of your content, but they differ in purpose and performance characteristics.
-
-**PlateStatic**  
-- **Purpose:** A more lightweight, server-compatible static renderer of the editor content.  
-- **Performance:** Generally more performant than `Plate` in read-only mode.  
-- **Use Case:** Ideal when you need a static preview of the content (e.g., in a server-side render or a static build). `PlateStatic` should be the default choice if you want a fast, static representation of your content.
-
-**Plate (Read-Only)**  
-- **Purpose:** The standard `Plate` editor component used with `readOnly={true}`. While this prevents editing, it still operates as a client component relying on browser APIs.  
-- **Use Case:** Suitable if you’re rendering in a browser and want an interactive environment (e.g. comments) that just happens to be non-editable. It’s **not** suitable for server-side HTML serialization or scenarios where static output is required, as it still runs client-side code.
-
-**In summary:**
-
-- **If you need high performance, a static view or HTML serialization:** Use `PlateStatic`.
-- **If you need an interactive environment and can run in a browser, but just want it read-only:** Use `Plate` with `readOnly={true}`.
-
-### API
-
-#### serializeHtml
-
-Convert Slate Nodes into HTML string.
-
-<APIParameters>
-<APIItem name="options" type="object">
-
-Options to control the HTML serialization process.
-
-<APISubList>
-<APISubListItem parent="options" name="components" type="NodeComponents">
-
-A mapping of plugin keys to React components. Each component renders the corresponding Slate node as HTML.
+For a more complete static-render approach, see [Plate Static](/docs/plate-static).
 
-</APISubListItem>
-
-<APISubListItem parent="options" name="editorComponent" type="React.ComponentType<T>" optional>
-
-A React component to render the entire editor content. Defaults to `PlateStatic` if not provided. This component receives `components`, `editor`, and `props`.
-
-</APISubListItem>
-
-<APISubListItem parent="options" name="props" type="Partial<T>" optional>
-
-Props to pass to the `editorComponent`. The generic type `T` extends `PlateStaticProps`.
-
-</APISubListItem>
-
-<APISubListItem parent="options" name="preserveClassNames" type="string[]" optional>
-
-A list of class name prefixes to preserve if `stripClassNames` is enabled.
-
-</APISubListItem>
-
-<APISubListItem parent="options" name="stripClassNames" type="boolean" optional>
-
-If `true`, remove class names from the output HTML except those listed in `preserveClassNames`.
-
-- **Default:** `false`
-
-</APISubListItem>
-
-<APISubListItem parent="options" name="stripDataAttributes" type="boolean" optional>
-
-If `true`, remove `data-*` attributes from the output HTML.
-
-- **Default:** `false`
-
-</APISubListItem>
-</APISubList>
-</APIItem>
-</APIParameters>
-
-<APIReturns>
-<APIItem type="string">
-A HTML string representing the Slate content.
-</APIItem>
-</APIReturns>
+---
 
 ## HTML -> Slate
 
+The HTML deserializer supports round-trip conversion, meaning you can export content to HTML and later import it back while maintaining the document structure, formatting, and attributes.
+
 ### Usage
 
-The `editor.api.html.deserialize` function allows you to convert HTML content into Slate value:
+The `editor.api.html.deserialize` function converts HTML content into a Slate value:
 
-```typescript
+```ts
 import { createPlateEditor } from '@udecode/plate/react';
 
 const editor = createPlateEditor({
   plugins: [
     // all plugins that you want to deserialize
-  ]
-})
-editor.children = editor.api.html.deserialize('<p>Hello, world!</p>')
+  ],
+});
+
+// You can deserialize HTML strings
+editor.children = editor.api.html.deserialize('<p>Hello, world!</p>');
+
+// Or deserialize HTML previously exported from Plate
+const exportedHtml = await serializeHtml(editor, { components });
+const importedValue = editor.api.html.deserialize(exportedHtml);
+editor.children = importedValue;
 ```
 
 ### Plugin Deserialization Rules
 
-Here's a comprehensive list of plugins that support HTML deserialization, along with their corresponding HTML elements and styles:
+Below is a reference for the built-in HTML deserialization rules. Each plugin can parse specific tags, styles, and attributes.
 
 #### Text Formatting
 
@@ -234,16 +147,16 @@ Here's a comprehensive list of plugins that support HTML deserialization, along
   - List Item: `<li>`
 - **IndentListPlugin**:
   - List Item: `<li>`
-  - Parses `aria-level` attribute for indentation
+  - Uses `aria-level` for indentation
 
 #### Blocks
 
 - **BlockquotePlugin**: `<blockquote>`
 - **CodeBlockPlugin**:
-  - Deserializes `<pre>` elements
-  - Deserializes `<p>` elements with `fontFamily: 'Consolas'` style
+  - `<pre>` elements
+  - `<p>` elements with `fontFamily: 'Consolas'`
   - Splits content into code lines
-  - Preserves language information if available
+  - Preserves language info if available
 - **HorizontalRulePlugin**: `<hr>`
 
 #### Links and Media
@@ -255,10 +168,10 @@ Here's a comprehensive list of plugins that support HTML deserialization, along
 #### Tables
 
 - **TablePlugin**:
-  - Table: `<table>`
-  - Table Row: `<tr>`
-  - Table Cell: `<td>`
-  - Table Header Cell: `<th>`
+  - `<table>`
+  - `<tr>`
+  - `<td>`
+  - `<th>`
 
 #### Text Styling
 
@@ -291,14 +204,14 @@ Plugins can define various properties to control HTML deserialization:
   - `validNodeName`: Valid HTML tag names
   - `validStyle`: Valid CSS styles
 
-### Extending Deserialization
+### Customizing Deserialization
 
-You can extend or customize the deserialization behavior of any plugin. Here's an example of how you might extend the `CodeBlockPlugin`:
+You can modify how plugins parse HTML:
 
-```typescript
+```ts
 import { CodeBlockPlugin } from '@udecode/plate-code-block/react';
 
-const CustomCodeBlockPlugin = CodeBlockPlugin.extend({
+const MyCodeBlockPlugin = CodeBlockPlugin.extend({
   parsers: {
     html: {
       deserializer: {
@@ -306,17 +219,18 @@ const CustomCodeBlockPlugin = CodeBlockPlugin.extend({
           const language = element.getAttribute('data-language');
           const textContent = element.textContent || '';
           const lines = textContent.split('\n');
-          
+
           return {
             type: CodeBlockPlugin.key,
             language,
             children: lines.map((line) => ({
-              type: CodeLinePlugin.key,
+              type: 'code_line',
               children: [{ text: line }],
             })),
           };
         },
         rules: [
+          // inherit existing rules
           ...CodeBlockPlugin.parsers.html.deserializer.rules,
           { validAttribute: 'data-language' },
         ],
@@ -361,24 +275,76 @@ export const IndentListPlugin = createTSlatePlugin<IndentListConfig>({
 });
 ```
 
-### API
+## API
+
+### `serializeHtml(editor, options)`
+
+Converts Slate nodes from `editor.children` into an HTML string.
+
+```ts
+const htmlString = await serializeHtml(editor, {
+  components,
+  stripClassNames: true,
+  preserveClassNames: ['slate-'],
+  stripDataAttributes: true,
+  editorComponent: MyCustomStaticWrapper,
+  props: { className: 'my-serialized' },
+});
+```
+
+<API name="serializeHtml">
+<APIOptions>
+<APIItem name="components" type="HTMLElement | string">
+A mapping of plugin keys to React components. Each component renders the corresponding Slate node as HTML.
+</APIItem>
+<APIItem name="editorComponent" type="React.ComponentType<T>">
+A React component to render the entire editor content. Defaults to `PlateStatic` if not provided. This component receives `components`, `editor`, and `props`.
+</APIItem>
+<APIItem name="props" type="Partial<T>" optional>
+Props to pass to the `editorComponent`. The generic type `T` extends `PlateStaticProps`.
+</APIItem>
+<APIItem name="preserveClassNames" type="string[]" optional>
+A list of class name prefixes to preserve if `stripClassNames` is enabled.
+</APIItem>
+<APIItem name="stripClassNames" type="boolean" optional>
+If `true`, remove class names from the output HTML except those listed in `preserveClassNames`.
+- **Default:** `false`
+</APIItem>
+<APIItem name="stripDataAttributes" type="boolean" optional>
+If `true`, remove `data-*` attributes from the output HTML.
+- **Default:** `false`
+</APIItem>
+</APIOptions>
+<APIReturns>
+<APIItem type="string">
+The serialized HTML string.
+</APIItem>
+</APIReturns>
+</API>
 
-#### editor.api.html.deserialize
+### `editor.api.html.deserialize`
 
-Deserialize HTML string into Slate value.
+Parses an HTML string or element into a Slate value.  
 
+```ts
+editor.children = editor.api.html.deserialize('<p>Deserialized</p>', {
+  collapseWhiteSpace: false,
+});
+```
+
+<API name="html-deserialize">
 <APIParameters>
-<APISubListItem parent="options" name="element" type="HTMLElement | string">
+<APIItem name="element" type="HTMLElement | string">
 
 The HTML element or string to deserialize.
 
-</APISubListItem>
-<APISubListItem parent="options" name="collapseWhiteSpace" type="boolean" optional>
+</APIItem>
+<APIItem name="collapseWhiteSpace" type="boolean" optional>
 
 Flag to enable or disable the removal of whitespace from the serialized HTML.
 
 - **Default:** `true` (Whitespace will be removed.)
-</APISubListItem>
+</APIItem>
 </APIParameters>
 <APIReturns>
 <APIItem type="Descendant[]">
@@ -386,3 +352,4 @@ Flag to enable or disable the removal of whitespace from the serialized HTML.
 The deserialized Slate value.
 </APIItem>
 </APIReturns>
+</API>
diff --git a/apps/www/content/docs/en/plate-static.mdx b/apps/www/content/docs/en/plate-static.mdx
new file mode 100644
index 0000000000..b0d16555f9
--- /dev/null
+++ b/apps/www/content/docs/en/plate-static.mdx
@@ -0,0 +1,229 @@
+---
+title: Plate Static
+description: A minimal, memoized, read-only version of Plate with RSC/SSR support.
+---
+
+`<PlateStatic>` provides a **fast, read-only** way to render Slate content. It is designed for **server-side** or **React Server Component** (RSC) environments, without any client-side editing logic. It also **memoizes** node renders to avoid unnecessary re-renders, making it more performant than using [`<Plate>`](/docs/api/core/plate-components) in read-only mode.
+
+`<PlateStatic>` is heavily utilized by [`serializeHtml`](/docs/api/core/plate-plugin#serializehtml) for HTML export. You can also use it in any server or RSC scenario where you want a non-interactive, purely presentational version of your content.
+
+## Key Advantages
+
+- **Server-Safe:** Does not rely on browser APIs or client-side hooks. It’s safe for SSR or RSC.
+- **No Slate Editor Overhead:** Omits interactive logic like selections or event handlers.
+- **Memoized Rendering:** Uses `_memo` references and structural comparison to re-render only changed nodes.  
+- **Partial Re-Renders:** Changes in a single paragraph won’t re-render the rest of the document.
+- **Lightweight:** Smaller bundle size compared to using `Plate` in read-only mode, since it doesn’t import additional interactive code.
+
+## When to Use `<PlateStatic>`
+
+- [**HTML Serialization**](/docs/html).
+- **Server-Rendered Previews** in Next.js (particularly page or RSC routes).
+- **Static Sites** generating read-only content.
+- **Performance-Critical** read views where minimal overhead is desired.
+- **AI Streaming Rendering** for real-time content generation where chunks of content are streamed and rendered progressively.
+
+If you want **interactive** read-only features (e.g., highlighting on hover, comment popovers, or selections), you’ll still need the standard `Plate` editor in the browser. In purely read-only server contexts, `PlateStatic` is recommended.
+
+## Usage
+
+### 1. Create a Slate Editor
+
+First, create a Slate editor with the plugins you need. You can use `createSlateEditor`, just like we use `usePlateEditor` with `Plate`.
+
+```tsx
+import { createSlateEditor } from '@udecode/plate';
+// Import your desired plugins
+
+const editor = createSlateEditor({
+  plugins: [
+    // your plugin list: e.g. headings, images, markdown, etc.
+  ],
+  value: [
+    {
+      type: 'p',
+      children: [{ text: 'Hello from a static Plate editor!' }],
+    },
+  ],
+});
+```
+
+### 2. Define Node Components (Static)
+
+If you have interactive or client-only components for your editor (e.g. ones using `use client` or event handlers), you **must** provide static variants for server rendering. For example:
+
+```tsx
+// paragraph-element-static.ts
+import React from 'react';
+import { SlateElementProps } from '@udecode/plate';
+
+export function ParagraphElementStatic(props: SlateElementProps) {
+  return (
+    <p {...props.attributes} style={props.style}>
+      {props.children}
+    </p>
+  );
+}
+```
+
+You might have a static version for headings, images, links, etc., each returning pure HTML. No browser events or `useEffect`.
+
+### 3. Map Plugin Keys to Static Components
+
+Create a mapping object where each plugin key or node type references its static component:
+
+```ts
+import { ParagraphElementStatic } from './paragraph-element-static';
+import { HeadingElementStatic } from './heading-element-static';
+// etc.
+
+export const components = {
+  p: ParagraphElementStatic,
+  h1: HeadingElementStatic,
+  // ...
+};
+```
+
+### 4. Render `<PlateStatic>`
+
+`PlateStatic` is a React component that takes:
+
+- **`editor`**: A Slate editor instance.
+- **`components`**: A record of plugin/node keys -> static components.
+- **`value?`**: Optional controlled state, overriding `editor.children`.
+- Any additional HTML/div attributes (`className`, `style`, etc.).
+
+```tsx
+import { PlateStatic } from '@udecode/plate/core/static'; 
+// or from '@udecode/plate' if re-exported
+
+export default function MyStaticView() {
+  const editor = createSlateEditor({ /* your config */ });
+
+  return (
+    <PlateStatic
+      editor={editor}
+      components={components}
+      style={{ padding: 16 }}
+      className="my-plate-static"
+    />
+  );
+}
+```
+
+If you provide a `value` prop, it overwrites `editor.children`:
+
+```tsx
+<PlateStatic
+  editor={editor}
+  components={components}
+  value={[
+    {
+      type: 'p',
+      children: [{ text: 'Overridden content.' }],
+    },
+  ]}
+/>
+```
+
+### 5. Memoization
+
+Under the hood, each `<ElementStatic>` and `<LeafStatic>` is wrapped in `React.memo`. Plate also checks:
+- **Reference Equality**: If your node references haven’t changed, it won’t re-render.
+- **`_memo` field**: If you set `node._memo` for a specific element/leaf, Plate respects that as an override. If `_memo` is unchanged, the node won’t re-render even if the text changes. This is especially helpful for custom solutions or partial updates.
+
+### `PlateStatic` vs. `Plate` + `readOnly`
+
+| Aspect                           | `PlateStatic`                                          | `Plate` + `readOnly`                              |
+| -------------------------------- | ------------------------------------------------------- | ------------------------------------------------------- |
+| **Interactive**                  | No (server-safe)                                       | Some interactive features can still run in the browser |
+| **Browser APIs**                 | Not used; safe in SSR or RSC                           | Minimal usage still in read-only mode, but it’s client |
+| **Performance**                  | More optimized for static usage, minimal overhead      | Heavier, has more editor internals loaded              |
+| **Partial Re-render**            | Uses memoization of sub-trees for efficient rendering  | Also can do partial re-render, but still has client overhead |
+| **Use Cases**                    | Server rendering, HTML serialization, static previews  | Browser-based read-only states, needed for some interactive read features |
+| **Recommended**                  | SSR or RSC with no editing or advanced interactions    | If you need client-side read-only + interactive features (like comments, hovers) |
+
+### RSC/SSR Example
+
+In a Next.js 14 (or similar) environment, you can place your `PlateStatic` in a **React Server Component**:
+
+```tsx
+// app/preview/page.tsx (RSC)
+import { PlateStatic } from '@udecode/plate/core/static';
+import { createSlateEditor } from '@udecode/plate';
+import { components } from './my-static-components'; // your static components
+
+export default async function Page() {
+  // Potentially fetch data from DB or an API here
+  const editor = createSlateEditor({
+    value: [
+      { type: 'p', children: [{ text: 'Rendered server-side 🎉' }] },
+    ],
+  });
+
+  // Return the static output:
+  return (
+    <PlateStatic 
+      editor={editor} 
+      components={components} 
+      className="my-static-preview"
+    />
+  );
+}
+```
+
+No client bundle is needed for `PlateStatic`; it’s purely rendered to HTML on the server.
+
+### Pairing with `serializeHtml`
+
+If you’re generating a complete HTML string (for emailing, PDF, or an external page), use `serializeHtml`:
+
+```ts
+import { createSlateEditor } from '@udecode/plate';
+import { serializeHtml } from '@udecode/plate/core/static';
+import { components } from './my-static-components';
+
+const editor = createSlateEditor({ /* ...plugins... */ });
+
+// Using PlateStatic under the hood
+const html = await serializeHtml(editor, {
+  components,
+  editorComponent: PlateStatic, // optional if you want a custom wrapper
+  props: { className: 'max-w-3xl mx-auto' }, 
+});
+
+console.log(html);
+/*
+<div data-slate-editor="true" data-slate-node="value" class="max-w-3xl mx-auto">
+  <div data-slate-node="element" data-slate-type="p" ...>Hello Plate!</div>
+</div>
+*/
+```
+
+For a more complete guide, see [HTML Serialization](/docs/html).
+
+## API
+
+### `<PlateStatic>`
+
+```ts
+interface PlateStaticProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** The Slate editor instance. */
+  editor: SlateEditor;
+
+  /** Node components used to render each plugin/node type. */
+  components: NodeComponents;
+
+  /** Optional new `Value` to override `editor.children`. */
+  value?: Descendant[];
+
+  /** Inline styling. */
+  style?: React.CSSProperties;
+
+  /** className or other <div> attributes also supported. */
+}
+```
+
+- **`editor`**: Must be created via `createSlateEditor` (or similar).  
+- **`components`**: A record mapping plugin keys (or node types) to static React components.  
+- **`value`**: If provided, overwrites the existing `editor.children`.  
diff --git a/apps/www/content/docs/en/typescript.mdx b/apps/www/content/docs/en/typescript.mdx
new file mode 100644
index 0000000000..65e5e2a3de
--- /dev/null
+++ b/apps/www/content/docs/en/typescript.mdx
@@ -0,0 +1,209 @@
+---
+title: TypeScript
+description: Configure TypeScript (tsconfig) for using Plate, including module resolution solutions.
+---
+
+Plate provides ESM packages, which require certain TypeScript (and bundler) configurations to ensure compatibility, especially when importing subpath modules like `@udecode/plate/react`. Below are several solutions and workarounds to make TypeScript happy.
+
+## Quick Summary
+
+1. **Recommended (Easiest):** Use TypeScript **5.0+** and set `"moduleResolution": "bundler"` in your `tsconfig.json`.
+2. **Alternate (Node resolution):** Keep `"moduleResolution": "node"` and map paths to `dist/react` (and potentially alias them in your bundler config).
+3. **Up-to-date Packages:** Ensure all `@udecode/plate-*` dependencies share the same major/minor version.
+
+
+## Recommended: `"moduleResolution": "bundler"`
+
+The simplest approach for modern bundlers (Vite, Next.js 14, etc.) is to enable the new TypeScript "bundler" resolution mode. Example:
+
+```jsonc
+// tsconfig.json
+{
+  "compilerOptions": {
+    // ...
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    // ...
+  }
+}
+```
+
+This aligns TypeScript's resolution logic more closely with modern bundlers and ESM packages. Below is a working excerpt from [Plate template](https://github.com/udecode/plate-template):
+
+```jsonc
+{
+  "compilerOptions": {
+    "strict": false,
+    "strictNullChecks": true,
+    "allowUnusedLabels": false,
+    "allowUnreachableCode": false,
+    "exactOptionalPropertyTypes": false,
+    "noFallthroughCasesInSwitch": true,
+    "noImplicitOverride": true,
+    "noImplicitReturns": false,
+    "noPropertyAccessFromIndexSignature": false,
+    "noUncheckedIndexedAccess": false,
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+
+    "isolatedModules": true,
+
+    "allowJs": true,
+    "checkJs": false,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "jsx": "preserve",
+    "module": "esnext",
+    "target": "es2022",
+    "moduleResolution": "bundler",
+    "moduleDetection": "force",
+    "resolveJsonModule": true,
+    "noEmit": true,
+    "incremental": true,
+    "sourceMap": true,
+
+    "baseUrl": "src",
+    "paths": {
+      "@/*": ["./*"]
+    }
+  },
+  "include": [
+    "next-env.d.ts",
+    ".next/types/**/*.ts",
+    "src/**/*.ts",
+    "src/**/*.tsx"
+  ],
+  "exclude": ["node_modules"]
+}
+```
+
+- **`"moduleResolution": "bundler"`** was introduced in TypeScript 5.0.
+- If your TS version is older than 5.0, you **must** upgrade or stick to `"moduleResolution": "node"` plus manual path aliases.
+
+```jsonc
+// package.json
+{
+  "devDependencies": {
+    "typescript": "^5.0.0"
+  }
+}
+```
+
+If you see an error like `TS5023: Unknown compiler option 'moduleResolution'` (for `bundler`), it likely means your TypeScript version is below 5.0.
+
+## Workaround: `"moduleResolution": "node"` + Path Aliases
+
+If upgrading your entire project to TS 5.0 or changing the resolution mode is not possible:
+
+1. Keep `"moduleResolution": "node"`.
+2. Map each Plate subpath import to its `dist/react` types in `tsconfig.json` using `paths`.
+3. Alias these paths in your bundler config.
+
+### Example `tsconfig.json`
+
+```jsonc
+{
+  "compilerOptions": {
+    "moduleResolution": "node",
+    "paths": {
+      "@udecode/plate/react": [
+        "./node_modules/@udecode/plate/dist/react/index.d.ts"
+      ],
+      "@udecode/plate-core/react": [
+        "./node_modules/@udecode/plate-core/dist/react/index.d.ts"
+      ],
+      "@udecode/plate-list/react": [
+        "./node_modules/@udecode/plate-list/dist/react/index.d.ts"
+      ]
+      // ...repeat for all @udecode/plate-*/react packages
+    }
+  }
+}
+```
+
+### Example `vite.config.ts`
+
+```ts
+import { defineConfig } from 'vite';
+import path from 'path';
+
+export default defineConfig({
+  resolve: {
+    alias: {
+      '@udecode/plate/react': path.resolve(
+        __dirname,
+        'node_modules/@udecode/plate/dist/react'
+      ),
+      '@udecode/plate-core/react': path.resolve(
+        __dirname,
+        'node_modules/@udecode/plate-core/dist/react'
+      ),
+      '@udecode/plate-list/react': path.resolve(
+        __dirname,
+        'node_modules/@udecode/plate-list/dist/react'
+      ),
+
+      // Non-/react base aliases:
+      '@udecode/plate': path.resolve(
+        __dirname,
+        'node_modules/@udecode/plate'
+      ),
+      '@udecode/plate-core': path.resolve(
+        __dirname,
+        'node_modules/@udecode/plate-core'
+      ),
+      '@udecode/plate-list': path.resolve(
+        __dirname,
+        'node_modules/@udecode/plate-list'
+      )
+    }
+  }
+});
+```
+
+**Note:**  
+- You must do this for every `@udecode/plate-*/react` import you use.  
+- For testing/Jest, replicate these aliases via `moduleNameMapper` or similar.
+
+## Ensure Matching Plate Versions
+
+Say you're upgrading one package to `42.0.3`, double-check that all your `@udecode/plate-*` packages are on the **latest version up to 42.0.3** (one package could stay at `42.0.2` if it has no `42.0.3` release). Mixing versions often leads to mismatches.
+
+## FAQ
+
+> I updated `moduleResolution` to `bundler` but it broke my older imports."
+
+If your codebase has older TS usage or relies on `node` resolution, try the path alias approach or fully migrate to a TS 5+ / ESM environment.
+
+> "I'm seeing `TS2305` about missing exports. Is that a resolution error or a real missing export?"  
+
+It can be either:
+- If the entire package is "not found," it's likely a resolution issue.  
+- If it's specifically "no exported member," double-check that you spelled the import correctly (no typos) and that your installed version actually has that export.
+
+> "Which minimum TS version do I need for `moduleResolution: bundler`?"  
+
+TypeScript 5.0 or higher.
+
+> "We switched to bundler resolution, but some older libraries in our project break."  
+
+If your older libraries aren't ESM-friendly, you might stick to `node` resolution and do manual path aliases. Some large codebases gradually upgrade or create separate build pipelines for legacy code.
+
+> "We see the error in Jest but not in Vite."  
+
+You'll need to replicate your alias/resolution changes for Jest. For example:
+
+```js
+// jest.config.js
+module.exports = {
+  // ...
+  moduleNameMapper: {
+    '^@udecode/plate/react$': '<rootDir>/node_modules/@udecode/plate/dist/react',
+    '^@udecode/plate-core/react$': '<rootDir>/node_modules/@udecode/plate-core/dist/react',
+    // ...
+  }
+};
+```
diff --git a/apps/www/public/r/styles/default/ai-menu.json b/apps/www/public/r/styles/default/ai-menu.json
index df75fd1b6c..4964dec929 100644
--- a/apps/www/public/r/styles/default/ai-menu.json
+++ b/apps/www/public/r/styles/default/ai-menu.json
@@ -39,7 +39,7 @@
       "type": "registry:ui"
     },
     {
-      "content": "'use client';\n\nimport React, { memo } from 'react';\n\nimport { withProps } from '@udecode/cn';\nimport { BaseParagraphPlugin, SlateLeaf } from '@udecode/plate';\nimport { useAIChatEditor } from '@udecode/plate-ai/react';\nimport {\n  BaseBoldPlugin,\n  BaseCodePlugin,\n  BaseItalicPlugin,\n  BaseStrikethroughPlugin,\n  BaseUnderlinePlugin,\n} from '@udecode/plate-basic-marks';\nimport { BaseBlockquotePlugin } from '@udecode/plate-block-quote';\nimport {\n  BaseCodeBlockPlugin,\n  BaseCodeLinePlugin,\n  BaseCodeSyntaxPlugin,\n} from '@udecode/plate-code-block';\nimport { usePlateEditor } from '@udecode/plate-core/react';\nimport { BaseHeadingPlugin, HEADING_KEYS } from '@udecode/plate-heading';\nimport { BaseHorizontalRulePlugin } from '@udecode/plate-horizontal-rule';\nimport { BaseIndentPlugin } from '@udecode/plate-indent';\nimport { BaseIndentListPlugin } from '@udecode/plate-indent-list';\nimport { BaseLinkPlugin } from '@udecode/plate-link';\nimport { MarkdownPlugin } from '@udecode/plate-markdown';\n\nimport {\n  TodoLiStatic,\n  TodoMarkerStatic,\n} from '@/components/plate-ui/indent-todo-marker-static';\n\nimport { BlockquoteElementStatic } from './blockquote-element-static';\nimport { CodeBlockElementStatic } from './code-block-element-static';\nimport { CodeLeafStatic } from './code-leaf-static';\nimport { CodeLineElementStatic } from './code-line-element-static';\nimport { CodeSyntaxLeafStatic } from './code-syntax-leaf-static';\nimport { EditorStatic } from './editor-static';\nimport { HeadingElementStatic } from './heading-element-static';\nimport { HrElementStatic } from './hr-element-static';\nimport { LinkElementStatic } from './link-element-static';\nimport { ParagraphElementStatic } from './paragraph-element-static';\n\nconst components = {\n  [BaseBlockquotePlugin.key]: BlockquoteElementStatic,\n  [BaseBoldPlugin.key]: withProps(SlateLeaf, { as: 'strong' }),\n  [BaseCodeBlockPlugin.key]: CodeBlockElementStatic,\n  [BaseCodeLinePlugin.key]: CodeLineElementStatic,\n  [BaseCodePlugin.key]: CodeLeafStatic,\n  [BaseCodeSyntaxPlugin.key]: CodeSyntaxLeafStatic,\n  [BaseHorizontalRulePlugin.key]: HrElementStatic,\n  [BaseItalicPlugin.key]: withProps(SlateLeaf, { as: 'em' }),\n  [BaseLinkPlugin.key]: LinkElementStatic,\n  [BaseParagraphPlugin.key]: ParagraphElementStatic,\n  [BaseStrikethroughPlugin.key]: withProps(SlateLeaf, { as: 's' }),\n  [BaseUnderlinePlugin.key]: withProps(SlateLeaf, { as: 'u' }),\n  [HEADING_KEYS.h1]: withProps(HeadingElementStatic, { variant: 'h1' }),\n  [HEADING_KEYS.h2]: withProps(HeadingElementStatic, { variant: 'h2' }),\n  [HEADING_KEYS.h3]: withProps(HeadingElementStatic, { variant: 'h3' }),\n};\n\nconst plugins = [\n  BaseBlockquotePlugin,\n  BaseBoldPlugin,\n  BaseCodeBlockPlugin,\n  BaseCodeLinePlugin,\n  BaseCodePlugin,\n  BaseCodeSyntaxPlugin,\n  BaseItalicPlugin,\n  BaseStrikethroughPlugin,\n  BaseUnderlinePlugin,\n  BaseHeadingPlugin,\n  BaseHorizontalRulePlugin,\n  BaseLinkPlugin,\n  BaseParagraphPlugin,\n  BaseIndentPlugin.extend({\n    inject: {\n      targetPlugins: [BaseParagraphPlugin.key],\n    },\n  }),\n  BaseIndentListPlugin.extend({\n    inject: {\n      targetPlugins: [BaseParagraphPlugin.key],\n    },\n    options: {\n      listStyleTypes: {\n        todo: {\n          liComponent: TodoLiStatic,\n          markerComponent: TodoMarkerStatic,\n          type: 'todo',\n        },\n      },\n    },\n  }),\n  MarkdownPlugin.configure({ options: { indentList: true } }),\n];\n\nexport const AIChatEditor = memo(({ content }: { content: string }) => {\n  const aiEditor = usePlateEditor({\n    plugins,\n  });\n\n  useAIChatEditor(aiEditor, content);\n\n  return (\n    <EditorStatic variant=\"aiChat\" components={components} editor={aiEditor} />\n  );\n});\n",
+      "content": "'use client';\n\nimport React, { memo } from 'react';\n\nimport { withProps } from '@udecode/cn';\nimport { BaseParagraphPlugin, SlateLeaf } from '@udecode/plate';\nimport { usePlateEditor } from '@udecode/plate/react';\nimport { useAIChatEditor } from '@udecode/plate-ai/react';\nimport {\n  BaseBoldPlugin,\n  BaseCodePlugin,\n  BaseItalicPlugin,\n  BaseStrikethroughPlugin,\n  BaseUnderlinePlugin,\n} from '@udecode/plate-basic-marks';\nimport { BaseBlockquotePlugin } from '@udecode/plate-block-quote';\nimport {\n  BaseCodeBlockPlugin,\n  BaseCodeLinePlugin,\n  BaseCodeSyntaxPlugin,\n} from '@udecode/plate-code-block';\nimport { BaseHeadingPlugin, HEADING_KEYS } from '@udecode/plate-heading';\nimport { BaseHorizontalRulePlugin } from '@udecode/plate-horizontal-rule';\nimport { BaseIndentPlugin } from '@udecode/plate-indent';\nimport { BaseIndentListPlugin } from '@udecode/plate-indent-list';\nimport { BaseLinkPlugin } from '@udecode/plate-link';\nimport { MarkdownPlugin } from '@udecode/plate-markdown';\n\nimport {\n  TodoLiStatic,\n  TodoMarkerStatic,\n} from '@/components/plate-ui/indent-todo-marker-static';\n\nimport { BlockquoteElementStatic } from './blockquote-element-static';\nimport { CodeBlockElementStatic } from './code-block-element-static';\nimport { CodeLeafStatic } from './code-leaf-static';\nimport { CodeLineElementStatic } from './code-line-element-static';\nimport { CodeSyntaxLeafStatic } from './code-syntax-leaf-static';\nimport { EditorStatic } from './editor-static';\nimport { HeadingElementStatic } from './heading-element-static';\nimport { HrElementStatic } from './hr-element-static';\nimport { LinkElementStatic } from './link-element-static';\nimport { ParagraphElementStatic } from './paragraph-element-static';\n\nconst components = {\n  [BaseBlockquotePlugin.key]: BlockquoteElementStatic,\n  [BaseBoldPlugin.key]: withProps(SlateLeaf, { as: 'strong' }),\n  [BaseCodeBlockPlugin.key]: CodeBlockElementStatic,\n  [BaseCodeLinePlugin.key]: CodeLineElementStatic,\n  [BaseCodePlugin.key]: CodeLeafStatic,\n  [BaseCodeSyntaxPlugin.key]: CodeSyntaxLeafStatic,\n  [BaseHorizontalRulePlugin.key]: HrElementStatic,\n  [BaseItalicPlugin.key]: withProps(SlateLeaf, { as: 'em' }),\n  [BaseLinkPlugin.key]: LinkElementStatic,\n  [BaseParagraphPlugin.key]: ParagraphElementStatic,\n  [BaseStrikethroughPlugin.key]: withProps(SlateLeaf, { as: 's' }),\n  [BaseUnderlinePlugin.key]: withProps(SlateLeaf, { as: 'u' }),\n  [HEADING_KEYS.h1]: withProps(HeadingElementStatic, { variant: 'h1' }),\n  [HEADING_KEYS.h2]: withProps(HeadingElementStatic, { variant: 'h2' }),\n  [HEADING_KEYS.h3]: withProps(HeadingElementStatic, { variant: 'h3' }),\n};\n\nconst plugins = [\n  BaseBlockquotePlugin,\n  BaseBoldPlugin,\n  BaseCodeBlockPlugin,\n  BaseCodeLinePlugin,\n  BaseCodePlugin,\n  BaseCodeSyntaxPlugin,\n  BaseItalicPlugin,\n  BaseStrikethroughPlugin,\n  BaseUnderlinePlugin,\n  BaseHeadingPlugin,\n  BaseHorizontalRulePlugin,\n  BaseLinkPlugin,\n  BaseParagraphPlugin,\n  BaseIndentPlugin.extend({\n    inject: {\n      targetPlugins: [BaseParagraphPlugin.key],\n    },\n  }),\n  BaseIndentListPlugin.extend({\n    inject: {\n      targetPlugins: [BaseParagraphPlugin.key],\n    },\n    options: {\n      listStyleTypes: {\n        todo: {\n          liComponent: TodoLiStatic,\n          markerComponent: TodoMarkerStatic,\n          type: 'todo',\n        },\n      },\n    },\n  }),\n  MarkdownPlugin.configure({ options: { indentList: true } }),\n];\n\nexport const AIChatEditor = memo(({ content }: { content: string }) => {\n  const aiEditor = usePlateEditor({\n    plugins,\n  });\n\n  useAIChatEditor(aiEditor, content);\n\n  return (\n    <EditorStatic variant=\"aiChat\" components={components} editor={aiEditor} />\n  );\n});\n",
       "path": "plate-ui/ai-chat-editor.tsx",
       "target": "components/plate-ui/ai-chat-editor.tsx",
       "type": "registry:ui"
diff --git a/apps/www/src/components/link.tsx b/apps/www/src/components/link.tsx
index e8d7bc2b65..6cadf4ada2 100644
--- a/apps/www/src/components/link.tsx
+++ b/apps/www/src/components/link.tsx
@@ -21,7 +21,7 @@ export function Link({
         'relative inline-block h-5 font-medium',
         !isExternal && 'underline underline-offset-4',
         isExternal &&
-          'no-underline hover:after:absolute hover:after:bottom-0 hover:after:left-0 hover:after:h-[1.5px] hover:after:w-[calc(100%-2px)] hover:after:bg-primary',
+          'no-underline hover:after:absolute hover:after:-bottom-1 hover:after:left-0 hover:after:h-[1.5px] hover:after:w-[calc(100%-2px)] hover:after:bg-primary',
         // 'relative font-medium text-blue-600 hover:after:absolute hover:after:bottom-0 hover:after:left-0 hover:after:h-[1.5px] hover:after:w-[calc(100%-2px)] hover:after:bg-brand',
         className
       )}
diff --git a/apps/www/src/config/docs-plugins.ts b/apps/www/src/config/docs-plugins.ts
index b2cd1587c2..8c59d9a2ca 100644
--- a/apps/www/src/config/docs-plugins.ts
+++ b/apps/www/src/config/docs-plugins.ts
@@ -41,7 +41,6 @@ export const pluginsNavItems: SidebarNavItem[] = [
   {
     description: 'Provides quick access to block-specific actions.',
     href: '/docs/block-menu',
-    label: 'New',
     title: 'Block Menu',
   },
   {
@@ -52,7 +51,6 @@ export const pluginsNavItems: SidebarNavItem[] = [
   {
     description: 'Highlight important information or add special notes.',
     href: '/docs/callout',
-    label: 'New',
     title: 'Callout',
   },
   {
@@ -85,7 +83,6 @@ export const pluginsNavItems: SidebarNavItem[] = [
   {
     description: 'A visual overlay for cursors and selections.',
     href: '/docs/cursor-overlay',
-    label: 'New',
     title: 'Cursor Overlay',
   },
   {
@@ -109,7 +106,6 @@ export const pluginsNavItems: SidebarNavItem[] = [
     description:
       'Enables the insertion and rendering of LaTeX equations in your editor.',
     href: '/docs/equation',
-    label: 'New',
     title: 'Equation',
   },
   {
@@ -182,7 +178,7 @@ export const pluginsNavItems: SidebarNavItem[] = [
   {
     description: 'Embed medias like videos or tweets into your document.',
     href: '/docs/media',
-    label: ['Element', 'New'],
+    label: ['Element'],
     title: 'Media',
   },
   {
@@ -200,7 +196,6 @@ export const pluginsNavItems: SidebarNavItem[] = [
   {
     description: 'Automatically assign unique IDs to nodes in the document.',
     href: '/docs/node-id',
-    label: 'New',
     title: 'Node ID',
   },
   {
@@ -239,7 +234,6 @@ export const pluginsNavItems: SidebarNavItem[] = [
     description:
       'Slash command menu for quick insertion of various content types.',
     href: '/docs/slash-command',
-    label: 'New',
     title: 'Slash Command',
   },
   {
@@ -264,7 +258,6 @@ export const pluginsNavItems: SidebarNavItem[] = [
     description:
       'Renders a table of contents element with clickable links to headings in the document.',
     href: '/docs/toc',
-    label: 'New',
     title: 'Table of Contents',
   },
   {
@@ -276,7 +269,6 @@ export const pluginsNavItems: SidebarNavItem[] = [
   {
     description: 'Ensure a trailing block is always present in the document.',
     href: '/docs/trailing-block',
-    label: 'New',
     title: 'Trailing Block',
   },
 ];
diff --git a/apps/www/src/config/docs.ts b/apps/www/src/config/docs.ts
index e35e630594..9ce558dc46 100644
--- a/apps/www/src/config/docs.ts
+++ b/apps/www/src/config/docs.ts
@@ -92,12 +92,27 @@ export const guidesNavItems: SidebarNavItem[] = [
     href: '/docs/controlled',
     title: 'Controlled Value',
   },
+  {
+    href: '/docs/form',
+    label: 'New',
+    title: 'Form',
+  },
+  {
+    href: '/docs/plate-static',
+    label: 'New',
+    title: 'Plate Static',
+  },
   {
     description: 'HTML <-> Slate',
     href: '/docs/html',
     label: 'New',
     title: 'Serializing HTML',
   },
+  {
+    href: '/docs/typescript',
+    label: 'New',
+    title: 'TypeScript',
+  },
   {
     href: '/docs/debugging',
     title: 'Debugging',
diff --git a/apps/www/src/registry/default/plate-ui/ai-chat-editor.tsx b/apps/www/src/registry/default/plate-ui/ai-chat-editor.tsx
index b807331a84..9f7bd03afe 100644
--- a/apps/www/src/registry/default/plate-ui/ai-chat-editor.tsx
+++ b/apps/www/src/registry/default/plate-ui/ai-chat-editor.tsx
@@ -4,6 +4,7 @@ import React, { memo } from 'react';
 
 import { withProps } from '@udecode/cn';
 import { BaseParagraphPlugin, SlateLeaf } from '@udecode/plate';
+import { usePlateEditor } from '@udecode/plate/react';
 import { useAIChatEditor } from '@udecode/plate-ai/react';
 import {
   BaseBoldPlugin,
@@ -18,7 +19,6 @@ import {
   BaseCodeLinePlugin,
   BaseCodeSyntaxPlugin,
 } from '@udecode/plate-code-block';
-import { usePlateEditor } from '@udecode/plate-core/react';
 import { BaseHeadingPlugin, HEADING_KEYS } from '@udecode/plate-heading';
 import { BaseHorizontalRulePlugin } from '@udecode/plate-horizontal-rule';
 import { BaseIndentPlugin } from '@udecode/plate-indent';
diff --git a/apps/www/src/registry/default/plate-ui/emoji-input-element.tsx b/apps/www/src/registry/default/plate-ui/emoji-input-element.tsx
index bdedc06120..e2d1927a11 100644
--- a/apps/www/src/registry/default/plate-ui/emoji-input-element.tsx
+++ b/apps/www/src/registry/default/plate-ui/emoji-input-element.tsx
@@ -3,7 +3,7 @@
 import React, { useMemo, useState } from 'react';
 
 import { withRef } from '@udecode/cn';
-import { useEditorPlugin } from '@udecode/plate-core/react';
+import { useEditorPlugin } from '@udecode/plate/react';
 import { EmojiInlineIndexSearch, insertEmoji } from '@udecode/plate-emoji';
 import { EmojiPlugin } from '@udecode/plate-emoji/react';
 
diff --git a/packages/ai/src/react/ai-chat/transforms/insertBelowAIChat.ts b/packages/ai/src/react/ai-chat/transforms/insertBelowAIChat.ts
index 5cbe361563..0863f5cfbc 100644
--- a/packages/ai/src/react/ai-chat/transforms/insertBelowAIChat.ts
+++ b/packages/ai/src/react/ai-chat/transforms/insertBelowAIChat.ts
@@ -6,9 +6,12 @@ import cloneDeep from 'lodash/cloneDeep.js';
 
 import type { AIChatPluginConfig } from '../AIChatPlugin';
 
+import { createFormattedBlocks } from './replaceSelectionAIChat';
+
 export const insertBelowAIChat = (
   editor: PlateEditor,
-  sourceEditor: SlateEditor
+  sourceEditor: SlateEditor,
+  { format = 'single' }: { format?: 'all' | 'none' | 'single' } = {}
 ) => {
   if (!sourceEditor || sourceEditor.api.isEmpty()) return;
 
@@ -38,14 +41,52 @@ export const insertBelowAIChat = (
 
     const nextPath = PathApi.next(lastBlock[1]);
 
-    insertBlocksAndSelect(cloneDeep(sourceEditor.children), {
+    if (format === 'none') {
+      insertBlocksAndSelect(cloneDeep(sourceEditor.children), {
+        at: nextPath,
+      });
+
+      return;
+    }
+
+    const formattedBlocks = createFormattedBlocks({
+      blocks: cloneDeep(sourceEditor.children),
+      format,
+      sourceBlock: lastBlock,
+    });
+
+    if (!formattedBlocks) return;
+
+    insertBlocksAndSelect(formattedBlocks, {
       at: nextPath,
     });
   } else {
     const [, end] = RangeApi.edges(editor.selection!);
     const endPath = [end.path[0]];
+    const currentBlock = editor.api.node({
+      at: endPath,
+      block: true,
+      mode: 'lowest',
+    });
+
+    if (!currentBlock) return;
+    if (format === 'none') {
+      insertBlocksAndSelect(cloneDeep(sourceEditor.children), {
+        at: PathApi.next(endPath),
+      });
+
+      return;
+    }
+
+    const formattedBlocks = createFormattedBlocks({
+      blocks: cloneDeep(sourceEditor.children),
+      format,
+      sourceBlock: currentBlock,
+    });
+
+    if (!formattedBlocks) return;
 
-    insertBlocksAndSelect(cloneDeep(sourceEditor.children), {
+    insertBlocksAndSelect(formattedBlocks, {
       at: PathApi.next(endPath),
     });
   }
diff --git a/packages/ai/src/react/ai-chat/transforms/replaceSelectionAIChat.ts b/packages/ai/src/react/ai-chat/transforms/replaceSelectionAIChat.ts
index 12c2510941..ec5629739a 100644
--- a/packages/ai/src/react/ai-chat/transforms/replaceSelectionAIChat.ts
+++ b/packages/ai/src/react/ai-chat/transforms/replaceSelectionAIChat.ts
@@ -15,7 +15,7 @@ import cloneDeep from 'lodash/cloneDeep.js';
 
 import type { AIChatPluginConfig } from '../AIChatPlugin';
 
-const createFormattedBlocks = ({
+export const createFormattedBlocks = ({
   blocks,
   format,
   sourceBlock,
@@ -53,11 +53,10 @@ const createFormattedBlocks = ({
       return block;
     }
 
-    return {
+    return applyTextFormatting({
       ...block,
       ...blockProps,
-      children: block.children.map(applyTextFormatting),
-    };
+    });
   });
 };
 
diff --git a/packages/selection/src/internal/transforms/selectBlocks.spec.tsx b/packages/selection/src/internal/transforms/selectBlocks.spec.tsx
new file mode 100644
index 0000000000..b42afcac15
--- /dev/null
+++ b/packages/selection/src/internal/transforms/selectBlocks.spec.tsx
@@ -0,0 +1,265 @@
+/** @jsx jsxt */
+
+import type { PlateEditor } from '@udecode/plate/react';
+
+import { createPlateEditor } from '@udecode/plate/react';
+import { jsxt } from '@udecode/plate-test-utils';
+
+import { BlockSelectionPlugin } from '../../react';
+import { selectBlocks } from './selectBlocks';
+
+jsxt;
+
+describe('selectBlocks', () => {
+  let editor: PlateEditor;
+
+  beforeEach(() => {
+    editor = createPlateEditor({
+      plugins: [BlockSelectionPlugin],
+      selection: {
+        anchor: { offset: 0, path: [0] },
+        focus: { offset: 0, path: [0] },
+      },
+      value: [
+        {
+          id: 'block1',
+          children: [{ text: 'Block One' }],
+          type: 'p',
+        },
+        {
+          id: 'block2',
+          children: [{ text: 'Block Two' }],
+          type: 'p',
+        },
+        {
+          id: 'block3',
+          children: [{ text: 'Block Three' }],
+          type: 'p',
+        },
+      ],
+    });
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe('when no blocks are selected', () => {
+    it('should select the specified block', () => {
+      selectBlocks(editor, [1]);
+
+      const selectedIds = editor.getOption(BlockSelectionPlugin, 'selectedIds');
+      expect(Array.from(selectedIds!)).toEqual(['block2']);
+    });
+  });
+
+  describe('when blocks are already selected', () => {
+    beforeEach(() => {
+      editor.setOption(
+        BlockSelectionPlugin,
+        'selectedIds',
+        new Set(['block1', 'block2'])
+      );
+    });
+
+    it('should keep existing selection if selecting an already selected block', () => {
+      selectBlocks(editor, [0]);
+
+      const selectedIds = editor.getOption(BlockSelectionPlugin, 'selectedIds');
+      expect(Array.from(selectedIds!)).toEqual(['block1', 'block2']);
+    });
+
+    it('should select only the new block if selecting an unselected block', () => {
+      selectBlocks(editor, [2]);
+
+      const selectedIds = editor.getOption(BlockSelectionPlugin, 'selectedIds');
+      expect(Array.from(selectedIds!)).toEqual(['block3']);
+    });
+  });
+
+  describe('with nested blocks', () => {
+    beforeEach(() => {
+      editor = createPlateEditor({
+        plugins: [BlockSelectionPlugin],
+        selection: {
+          anchor: { offset: 0, path: [0, 0] },
+          focus: { offset: 0, path: [0, 0] },
+        },
+        value: [
+          {
+            id: 'parent1',
+            children: [
+              {
+                id: 'child1',
+                children: [{ text: 'Child One' }],
+                type: 'p',
+              },
+              {
+                id: 'child2',
+                children: [{ text: 'Child Two' }],
+                type: 'p',
+              },
+            ],
+            type: 'div',
+          },
+        ],
+      });
+    });
+
+    it('should select nested block', () => {
+      selectBlocks(editor, [0, 0]);
+
+      const selectedIds = editor.getOption(BlockSelectionPlugin, 'selectedIds');
+      expect(Array.from(selectedIds!)).toEqual(['child1']);
+    });
+
+    it('should select parent block', () => {
+      selectBlocks(editor, [0]);
+
+      const selectedIds = editor.getOption(BlockSelectionPlugin, 'selectedIds');
+      expect(Array.from(selectedIds!)).toEqual(['parent1']);
+    });
+  });
+
+  describe('with non-selectable blocks', () => {
+    beforeEach(() => {
+      editor = createPlateEditor({
+        plugins: [BlockSelectionPlugin],
+        selection: {
+          anchor: { offset: 0, path: [0, 0, 0] },
+          focus: { offset: 0, path: [0, 0, 0] },
+        },
+        value: [
+          {
+            id: 'table1',
+            children: [
+              {
+                id: 'tr1',
+                children: [
+                  {
+                    id: 'td1',
+                    children: [{ text: 'Cell One' }],
+                    type: 'td',
+                  },
+                ],
+                type: 'tr',
+              },
+            ],
+            type: 'table',
+          },
+        ],
+      });
+    });
+
+    it('should select block at path', () => {
+      selectBlocks(editor, [0, 0]);
+
+      const selectedIds = editor.getOption(BlockSelectionPlugin, 'selectedIds');
+      expect(Array.from(selectedIds!)).toEqual(['tr1']);
+    });
+  });
+
+  describe('with multi-level selection', () => {
+    beforeEach(() => {
+      editor = createPlateEditor({
+        plugins: [BlockSelectionPlugin],
+        selection: {
+          anchor: { offset: 0, path: [0, 0, 0] },
+          focus: { offset: 0, path: [0, 0, 0] },
+        },
+        value: [
+          {
+            id: 'root1',
+            children: [
+              {
+                id: 'section1',
+                children: [
+                  {
+                    id: 'div1',
+                    children: [
+                      {
+                        id: 'p1',
+                        children: [{ text: 'Paragraph 1' }],
+                        type: 'p',
+                      },
+                    ],
+                    type: 'div',
+                  },
+                  {
+                    id: 'div2',
+                    children: [
+                      {
+                        id: 'p2',
+                        children: [{ text: 'Paragraph 2' }],
+                        type: 'p',
+                      },
+                    ],
+                    type: 'div',
+                  },
+                ],
+                type: 'section',
+              },
+              {
+                id: 'section2',
+                children: [
+                  {
+                    id: 'div3',
+                    children: [
+                      {
+                        id: 'p3',
+                        children: [{ text: 'Paragraph 3' }],
+                        type: 'p',
+                      },
+                    ],
+                    type: 'div',
+                  },
+                ],
+                type: 'section',
+              },
+            ],
+            type: 'root',
+          },
+        ],
+      });
+    });
+
+    it('should select only blocks at same level', () => {
+      // Set selection from div1 to div3
+      editor.selection = {
+        anchor: { offset: 0, path: [0, 0, 0] },
+        focus: { offset: 0, path: [0, 1, 0] },
+      };
+
+      selectBlocks(editor, [0, 0, 0]);
+
+      const selectedIds = editor.getOption(BlockSelectionPlugin, 'selectedIds');
+      expect(Array.from(selectedIds!)).toEqual(['div1', 'div2', 'div3']);
+    });
+
+    it('should select only sections when selecting across sections', () => {
+      // Set selection from section1 to section2
+      editor.selection = {
+        anchor: { offset: 0, path: [0, 0] },
+        focus: { offset: 0, path: [0, 1] },
+      };
+
+      selectBlocks(editor, [0, 0]);
+
+      const selectedIds = editor.getOption(BlockSelectionPlugin, 'selectedIds');
+      expect(Array.from(selectedIds!)).toEqual(['section1', 'section2']);
+    });
+
+    it('should select only paragraphs when selecting across nested paragraphs', () => {
+      // Set selection from p1 to p3
+      editor.selection = {
+        anchor: { offset: 0, path: [0, 0, 0, 0] },
+        focus: { offset: 0, path: [0, 1, 0, 0] },
+      };
+
+      selectBlocks(editor, [0, 0, 0, 0]);
+
+      const selectedIds = editor.getOption(BlockSelectionPlugin, 'selectedIds');
+      expect(Array.from(selectedIds!)).toEqual(['p1', 'p2', 'p3']);
+    });
+  });
+});
diff --git a/packages/selection/src/internal/transforms/selectBlocks.ts b/packages/selection/src/internal/transforms/selectBlocks.ts
new file mode 100644
index 0000000000..86324711b9
--- /dev/null
+++ b/packages/selection/src/internal/transforms/selectBlocks.ts
@@ -0,0 +1,28 @@
+import type { Path, SlateEditor, TElement, TNode } from '@udecode/plate';
+
+import { BlockSelectionPlugin } from '../../react';
+
+export const selectBlocks = (editor: SlateEditor, at: Path | TNode) => {
+  const blockSelection = editor
+    .getApi(BlockSelectionPlugin)
+    .blockSelection.getNodes();
+
+  const entry = editor.api.node<TElement & { id: string }>(at);
+
+  if (!entry) return;
+
+  const [element, path] = entry;
+
+  const selectedBlocks =
+    blockSelection.length > 0
+      ? blockSelection
+      : editor.api.blocks({
+          match: (_, p) => p.length === path.length,
+          mode: 'lowest',
+        });
+  const ids = selectedBlocks.map((block) => block[0].id as string);
+
+  editor.getApi(BlockSelectionPlugin).blockSelection.setSelectedIds({
+    ids: ids.includes(element.id) ? ids : [element.id],
+  });
+};
diff --git a/packages/selection/src/react/BlockSelectionPlugin.tsx b/packages/selection/src/react/BlockSelectionPlugin.tsx
index c2dbc3994c..02c9a1d28d 100644
--- a/packages/selection/src/react/BlockSelectionPlugin.tsx
+++ b/packages/selection/src/react/BlockSelectionPlugin.tsx
@@ -8,6 +8,7 @@ import { createTPlatePlugin } from '@udecode/plate/react';
 
 import type { ChangedElements, PartialSelectionOptions } from '../internal';
 
+import { selectBlocks } from '../internal/transforms/selectBlocks';
 import { querySelectorAllSelectable, querySelectorSelectable } from '../lib';
 import { extractSelectableIds } from '../lib/extractSelectableIds';
 import { BlockMenuPlugin } from './BlockMenuPlugin';
@@ -233,8 +234,17 @@ export const BlockSelectionPlugin = createTPlatePlugin<BlockSelectionConfig>({
     insertBlocksAndSelect: bindFirst(insertBlocksAndSelect, editor),
     /** Remove selected blocks */
     removeNodes: bindFirst(removeBlockSelectionNodes, editor),
-    /** Select blocks */
+    /** Set selection based on block selection */
     select: bindFirst(selectBlockSelectionNodes, editor),
+    /**
+     * Selects blocks in the editor based on the provided block ID.
+     *
+     * Uses block selection if any blocks are selected, otherwise falls back to
+     * editor selection. If the provided block ID is already in the current
+     * selection, maintains the existing selection. Otherwise, clears the
+     * current selection and selects only the specified block.
+     */
+    selectBlocks: bindFirst(selectBlocks, editor),
     /** Set block indent */
     setIndent: bindFirst(setBlockSelectionIndent, editor),
     /** Set nodes on selected blocks */
diff --git a/templates/plate-playground-template/src/components/plate-ui/ai-chat-editor.tsx b/templates/plate-playground-template/src/components/plate-ui/ai-chat-editor.tsx
index 37ad371c26..2ee1040db8 100644
--- a/templates/plate-playground-template/src/components/plate-ui/ai-chat-editor.tsx
+++ b/templates/plate-playground-template/src/components/plate-ui/ai-chat-editor.tsx
@@ -4,6 +4,7 @@ import React, { memo } from 'react';
 
 import { withProps } from '@udecode/cn';
 import { BaseParagraphPlugin, SlateLeaf } from '@udecode/plate';
+import { usePlateEditor } from '@udecode/plate/react';
 import { useAIChatEditor } from '@udecode/plate-ai/react';
 import {
   BaseBoldPlugin,
@@ -18,7 +19,6 @@ import {
   BaseCodeLinePlugin,
   BaseCodeSyntaxPlugin,
 } from '@udecode/plate-code-block';
-import { usePlateEditor } from '@udecode/plate-core/react';
 import { BaseHeadingPlugin, HEADING_KEYS } from '@udecode/plate-heading';
 import { BaseHorizontalRulePlugin } from '@udecode/plate-horizontal-rule';
 import { BaseIndentPlugin } from '@udecode/plate-indent';
diff --git a/templates/plate-playground-template/src/components/plate-ui/emoji-input-element.tsx b/templates/plate-playground-template/src/components/plate-ui/emoji-input-element.tsx
index 9c07b3acc3..b5ee211deb 100644
--- a/templates/plate-playground-template/src/components/plate-ui/emoji-input-element.tsx
+++ b/templates/plate-playground-template/src/components/plate-ui/emoji-input-element.tsx
@@ -3,7 +3,7 @@
 import React, { useMemo, useState } from 'react';
 
 import { withRef } from '@udecode/cn';
-import { useEditorPlugin } from '@udecode/plate-core/react';
+import { useEditorPlugin } from '@udecode/plate/react';
 import { EmojiInlineIndexSearch, insertEmoji } from '@udecode/plate-emoji';
 import { EmojiPlugin } from '@udecode/plate-emoji/react';