From 8d2cbcf88c3f08006a0cd74be72e55041101bf34 Mon Sep 17 00:00:00 2001
From: zbeyens <zbeyens@udecode.io>
Date: Mon, 18 Sep 2023 13:02:07 +0200
Subject: [PATCH 1/3] =?UTF-8?q?=E2=9C=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/www/content/docs/components/cloud.mdx    |  2 +-
 apps/www/content/docs/components/editor.mdx   | 75 +++++++++++++++++++
 apps/www/content/docs/getting-started.mdx     | 30 ++++++--
 apps/www/public/registry/index.json           |  9 +++
 apps/www/src/__registry__/index.tsx           | 63 ++++++++++++++++
 .../src/app/_components/installation-tab.tsx  |  6 +-
 apps/www/src/config/customizer-components.ts  |  4 +
 apps/www/src/config/customizer-items.ts       |  6 ++
 apps/www/src/config/docs.ts                   |  1 +
 apps/www/src/lib/plate/demo/editableProps.ts  |  6 --
 .../example/basic-editor-handler-demo.tsx     | 46 ++++++++----
 .../example/basic-editor-styling-demo.tsx     | 12 +++
 .../example/basic-editor-value-demo.tsx       |  6 +-
 .../example/basic-plugins-components-demo.tsx | 11 +--
 .../example/basic-plugins-default-demo.tsx    | 24 ++++--
 .../registry/default/example/cloud-demo.tsx   |  5 +-
 .../default/example/editable-voids-demo.tsx   | 64 +++++++++-------
 .../default/example/editor-button.tsx         | 17 +++++
 .../default/example/editor-default.tsx        | 15 ++++
 .../default/example/editor-disabled.tsx       | 15 ++++
 .../registry/default/example/editor-form.tsx  | 15 ++++
 .../registry/default/example/editor-ghost.tsx | 15 ++++
 .../registry/default/example/editor-label.tsx | 17 +++++
 .../registry/default/example/editor-text.tsx  | 20 +++++
 .../default/example/find-replace-demo.tsx     |  5 +-
 .../default/example/hundreds-blocks-demo.tsx  | 13 +++-
 .../default/example/hundreds-editors-demo.tsx | 13 ++--
 .../registry/default/example/iframe-demo.tsx  |  7 +-
 .../default/example/multiple-editors-demo.tsx |  9 ++-
 .../default/example/playground-demo.tsx       |  7 +-
 .../default/example/preview-md-demo.tsx       | 13 ++--
 .../src/registry/default/plate-ui/editor.tsx  | 60 +++++++++++++++
 apps/www/src/registry/registry.ts             | 55 ++++++++++++++
 apps/www/src/styles/globals.css               | 23 ------
 templates/plate-template/package.json         |  6 +-
 templates/plate-template/pnpm-lock.yaml       | 70 ++++++++---------
 templates/plate-template/src/app/layout.tsx   |  1 +
 templates/plate-template/src/app/page.tsx     |  2 +-
 .../src/components/plate-editor.tsx           | 12 +--
 .../src/components/plate-ui/editor.tsx        | 59 +++++++++++++++
 40 files changed, 667 insertions(+), 172 deletions(-)
 create mode 100644 apps/www/content/docs/components/editor.mdx
 create mode 100644 apps/www/src/registry/default/example/basic-editor-styling-demo.tsx
 create mode 100644 apps/www/src/registry/default/example/editor-button.tsx
 create mode 100644 apps/www/src/registry/default/example/editor-default.tsx
 create mode 100644 apps/www/src/registry/default/example/editor-disabled.tsx
 create mode 100644 apps/www/src/registry/default/example/editor-form.tsx
 create mode 100644 apps/www/src/registry/default/example/editor-ghost.tsx
 create mode 100644 apps/www/src/registry/default/example/editor-label.tsx
 create mode 100644 apps/www/src/registry/default/example/editor-text.tsx
 create mode 100644 apps/www/src/registry/default/plate-ui/editor.tsx
 create mode 100644 templates/plate-template/src/components/plate-ui/editor.tsx

diff --git a/apps/www/content/docs/components/cloud.mdx b/apps/www/content/docs/components/cloud.mdx
index e17806d04d..1bf736158c 100644
--- a/apps/www/content/docs/components/cloud.mdx
+++ b/apps/www/content/docs/components/cloud.mdx
@@ -101,7 +101,7 @@ export default function CloudDemo() {
       <FixedToolbar>
         <CloudToolbarButtons />
       </FixedToolbar>
-      <PlateContent />
+      <Editor />
     </Plate>
   );
 }
diff --git a/apps/www/content/docs/components/editor.mdx b/apps/www/content/docs/components/editor.mdx
new file mode 100644
index 0000000000..58ecd7bc3e
--- /dev/null
+++ b/apps/www/content/docs/components/editor.mdx
@@ -0,0 +1,75 @@
+---
+title: Editor
+description: From Textarea to WYSIWYG editor.
+component: true
+docs:
+  - route: /docs/api/core/plate
+    title: Plate
+---
+
+## Installation
+
+<Tabs defaultValue="cli">
+
+<TabsList>
+  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="manual">Manual</TabsTrigger>
+</TabsList>
+
+<TabsContent value="cli">
+
+```bash
+npx @udecode/plate-ui@latest add editor
+```
+
+</TabsContent>
+
+<TabsContent value="manual">
+
+<Steps>
+
+<Step>
+
+Copy and paste the following code into your project.
+
+</Step>
+
+<ComponentSource name="editor" />
+
+<Step>
+
+Update the import paths to match your project setup.
+
+</Step>
+
+</Steps>
+
+</TabsContent>
+
+</Tabs>
+
+## Examples
+
+### Default
+
+<ComponentPreview name="editor-default" />
+
+### Disabled
+
+<ComponentPreview name="editor-disabled" />
+
+### Ghost
+
+<ComponentPreview name="editor-ghost" />
+
+### With Label
+
+<ComponentPreview name="editor-label" />
+
+### With Text
+
+<ComponentPreview name="editor-text" />
+
+### With Button
+
+<ComponentPreview name="editor-button" />
diff --git a/apps/www/content/docs/getting-started.mdx b/apps/www/content/docs/getting-started.mdx
index 0a2e8454a6..2d3b9c6e31 100644
--- a/apps/www/content/docs/getting-started.mdx
+++ b/apps/www/content/docs/getting-started.mdx
@@ -37,7 +37,7 @@ npm install @udecode/plate slate slate-react slate-history slate-hyperscript rea
 
 ### Basic Editor
 
-Let's start with a minimal editor setup using **`Plate`** and **`PlateContent`**.
+Let's start with a minimal editor setup.
 
 ```tsx showLineNumbers {1,5-7}
 import { Plate } from '@udecode/plate-common';
@@ -51,12 +51,30 @@ export default function BasicEditor() {
 }
 ```
 
-Simple and straightforward. Try it out:
+`Plate` manages the editor state and `PlateContent` renders the editor content. 
 
 <ComponentPreview name="basic-editor-default-demo" padding="md" />
 
+### Styling
+
+Let's give our editor some styles: [Editor](/docs/components/editor) is a styled version of `PlateContent`. 
+
+```tsx showLineNumbers {1,5-7}
+import { Plate } from '@udecode/plate-common';
+
+export default function BasicEditor() {
+  return (
+    <Plate>
+      <Editor placeholder="Type..." />
+    </Plate>
+  );
+}
+```
+
+<ComponentPreview name="basic-editor-styling-demo" padding="md" />
+
 <Callout className="mt-4">
-  **Note**: The following examples are using these global styles:
+  **Note**: `Editor` is just an example of a styled editor using Tailwind. You can create your own styled version of `PlateContent`.
   <ComponentSource name="globals" />
 </Callout>
 
@@ -81,7 +99,7 @@ const initialValue = [
 export default function BasicEditor() {
   return (
     <Plate initialValue={initialValue}>
-      <PlateContent />
+      <Editor />
     </Plate>
   );
 }
@@ -109,7 +127,7 @@ export default function BasicEditor() {
         // save newValue...
       }}
     >
-      <PlateContent />
+      <Editor />
     </Plate>
   );
 }
@@ -186,7 +204,7 @@ export default function BasicEditor() {
       plugins={plugins}
       // ...
     >
-      <PlateContent />
+      <Editor />
     </Plate>
   );
 }
diff --git a/apps/www/public/registry/index.json b/apps/www/public/registry/index.json
index 9655614d3b..b07a5b08b5 100644
--- a/apps/www/public/registry/index.json
+++ b/apps/www/public/registry/index.json
@@ -1,4 +1,13 @@
 [
+  {
+    "name": "editor",
+    "dependencies": [],
+    "registryDependencies": [],
+    "files": [
+      "plate-ui/editor.tsx"
+    ],
+    "type": "components:plate-ui"
+  },
   {
     "name": "cloud",
     "dependencies": [
diff --git a/apps/www/src/__registry__/index.tsx b/apps/www/src/__registry__/index.tsx
index 856d2bc5bb..9d95513583 100644
--- a/apps/www/src/__registry__/index.tsx
+++ b/apps/www/src/__registry__/index.tsx
@@ -4,6 +4,13 @@
 import * as React from 'react'
 export const Index: Record<string, any> = {
   'default': {
+    'editor': {
+      name: 'editor',
+      type: 'components:plate-ui',
+      registryDependencies: [],
+      files: ['registry/default/plate-ui/editor.tsx'],
+      component: React.lazy(() => import('@/registry/default/plate-ui/editor')),
+    },
     'cloud': {
       name: 'cloud',
       type: 'components:plate-ui',
@@ -669,6 +676,55 @@ export const Index: Record<string, any> = {
       files: ['registry/default/plate-ui/resizable.tsx'],
       component: React.lazy(() => import('@/registry/default/plate-ui/resizable')),
     },
+    'editor-default': {
+      name: 'editor-default',
+      type: 'components:example',
+      registryDependencies: [],
+      files: ['registry/default/example/editor-default.tsx'],
+      component: React.lazy(() => import('@/registry/default/example/editor-default')),
+    },
+    'editor-disabled': {
+      name: 'editor-disabled',
+      type: 'components:example',
+      registryDependencies: [],
+      files: ['registry/default/example/editor-disabled.tsx'],
+      component: React.lazy(() => import('@/registry/default/example/editor-disabled')),
+    },
+    'editor-ghost': {
+      name: 'editor-ghost',
+      type: 'components:example',
+      registryDependencies: [],
+      files: ['registry/default/example/editor-ghost.tsx'],
+      component: React.lazy(() => import('@/registry/default/example/editor-ghost')),
+    },
+    'editor-label': {
+      name: 'editor-label',
+      type: 'components:example',
+      registryDependencies: [],
+      files: ['registry/default/example/editor-label.tsx'],
+      component: React.lazy(() => import('@/registry/default/example/editor-label')),
+    },
+    'editor-text': {
+      name: 'editor-text',
+      type: 'components:example',
+      registryDependencies: [],
+      files: ['registry/default/example/editor-text.tsx'],
+      component: React.lazy(() => import('@/registry/default/example/editor-text')),
+    },
+    'editor-button': {
+      name: 'editor-button',
+      type: 'components:example',
+      registryDependencies: [],
+      files: ['registry/default/example/editor-button.tsx'],
+      component: React.lazy(() => import('@/registry/default/example/editor-button')),
+    },
+    'editor-form': {
+      name: 'editor-form',
+      type: 'components:example',
+      registryDependencies: [],
+      files: ['registry/default/example/editor-form.tsx'],
+      component: React.lazy(() => import('@/registry/default/example/editor-form')),
+    },
     'basic-editor-default-demo': {
       name: 'basic-editor-default-demo',
       type: 'components:example',
@@ -676,6 +732,13 @@ export const Index: Record<string, any> = {
       files: ['registry/default/example/basic-editor-default-demo.tsx'],
       component: React.lazy(() => import('@/registry/default/example/basic-editor-default-demo')),
     },
+    'basic-editor-styling-demo': {
+      name: 'basic-editor-styling-demo',
+      type: 'components:example',
+      registryDependencies: [],
+      files: ['registry/default/example/basic-editor-styling-demo.tsx'],
+      component: React.lazy(() => import('@/registry/default/example/basic-editor-styling-demo')),
+    },
     'basic-editor-handler-demo': {
       name: 'basic-editor-handler-demo',
       type: 'components:example',
diff --git a/apps/www/src/app/_components/installation-tab.tsx b/apps/www/src/app/_components/installation-tab.tsx
index 091fa6a9f7..a74c5acdec 100644
--- a/apps/www/src/app/_components/installation-tab.tsx
+++ b/apps/www/src/app/_components/installation-tab.tsx
@@ -177,6 +177,8 @@ export default function InstallationTab() {
     return res;
   }, [plugins]);
 
+  const hasEditor = components.some((comp) => comp.id === 'editor');
+
   const importsCode = useMemo(() => {
     const importsGroups = Object.entries(groupedImportsByPackage).map(
       ([packageName, imports]) =>
@@ -189,7 +191,7 @@ export default function InstallationTab() {
         )} } from '@/components/plate-ui/${componentId}';`
     );
     return [
-      `import { createPlugins, Plate, PlateContent${
+      `import { createPlugins, Plate${hasEditor ? '' : ', PlateContent'}${
         plateImports.length > 0 ? ', ' + plateImports : ''
       } } from '@udecode/plate-common';`,
       ...importsGroups,
@@ -314,7 +316,7 @@ export default function InstallationTab() {
     addLine(``);
   }
 
-  addLine(`<PlateContent />`);
+  addLine(`<${hasEditor ? 'Editor' : 'PlateContent'} />`);
 
   if (hasFloatingToolbar) {
     addLine(``);
diff --git a/apps/www/src/config/customizer-components.ts b/apps/www/src/config/customizer-components.ts
index fb80e934d7..308a25318a 100644
--- a/apps/www/src/config/customizer-components.ts
+++ b/apps/www/src/config/customizer-components.ts
@@ -1,4 +1,8 @@
 export const customizerComponents = {
+  editor: {
+    title: 'Editor',
+    href: '/docs/components/editor',
+  },
   alignDropdownMenu: {
     title: 'Align Dropdown Menu',
     href: '/docs/components/align-dropdown-menu',
diff --git a/apps/www/src/config/customizer-items.ts b/apps/www/src/config/customizer-items.ts
index 4baf54712d..f572ec38d2 100644
--- a/apps/www/src/config/customizer-items.ts
+++ b/apps/www/src/config/customizer-items.ts
@@ -88,6 +88,12 @@ export const customizerItems: Record<string, SettingPlugin> = {
     label: 'Components',
     badges: [customizerBadges.ui],
     components: [
+      {
+        id: 'editor',
+        label: 'Editor',
+        usage: 'Editor',
+        route: customizerComponents.editor.href,
+      },
       {
         id: 'fixed-toolbar',
         label: 'FixedToolbar',
diff --git a/apps/www/src/config/docs.ts b/apps/www/src/config/docs.ts
index 7fa27545f2..84c46d9340 100644
--- a/apps/www/src/config/docs.ts
+++ b/apps/www/src/config/docs.ts
@@ -720,6 +720,7 @@ export const docsConfig: DocsConfig = {
     {
       title: 'Components',
       items: [
+        customizerComponents.editor,
         customizerComponents.alignDropdownMenu,
         customizerComponents.avatar,
         customizerComponents.blockquoteElement,
diff --git a/apps/www/src/lib/plate/demo/editableProps.ts b/apps/www/src/lib/plate/demo/editableProps.ts
index 709be79525..1c4a655b19 100644
--- a/apps/www/src/lib/plate/demo/editableProps.ts
+++ b/apps/www/src/lib/plate/demo/editableProps.ts
@@ -1,13 +1,7 @@
 import { PlateContentProps } from '@udecode/plate-common';
 
-import { cn } from '@/lib/utils';
-
 export const editableProps: PlateContentProps = {
   spellCheck: false,
   autoFocus: false,
   placeholder: 'Type…',
-  style: {
-    outline: 'none',
-  },
-  className: cn('relative max-w-full [&_strong]:font-bold'),
 };
diff --git a/apps/www/src/registry/default/example/basic-editor-handler-demo.tsx b/apps/www/src/registry/default/example/basic-editor-handler-demo.tsx
index 9903569255..a71226c97d 100644
--- a/apps/www/src/registry/default/example/basic-editor-handler-demo.tsx
+++ b/apps/www/src/registry/default/example/basic-editor-handler-demo.tsx
@@ -1,31 +1,45 @@
 import React, { useState } from 'react';
 import { editableProps } from '@/plate/demo/editableProps';
-import { Plate, PlateContent, Value } from '@udecode/plate-common';
+import { Plate, Value } from '@udecode/plate-common';
+
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from '@/components/ui/accordion';
+import { Editor } from '@/registry/default/plate-ui/editor';
+
+const initialValue = [
+  {
+    type: 'p',
+    children: [
+      {
+        text: 'This is editable plain text with react and history plugins, just like a textarea!',
+      },
+    ],
+  },
+];
 
 export default function BasicEditorHandlerDemo() {
-  const [debugValue, setDebugValue] = useState<Value>([]);
+  const [debugValue, setDebugValue] = useState<Value>(initialValue);
 
   return (
     <Plate
-      initialValue={[
-        {
-          type: 'p',
-          children: [
-            {
-              text: 'This is editable plain text with react and history plugins, just like a textarea!',
-            },
-          ],
-        },
-      ]}
+      initialValue={initialValue}
       onChange={(newValue) => {
         setDebugValue(newValue);
         // save newValue...
       }}
     >
-      <PlateContent {...editableProps} />
-      debug value:
-      <br />
-      {JSON.stringify(debugValue)}
+      <Editor {...editableProps} />
+
+      <Accordion type="single" collapsible>
+        <AccordionItem value="manual-installation">
+          <AccordionTrigger>Debug Value</AccordionTrigger>
+          <AccordionContent>{JSON.stringify(debugValue)}</AccordionContent>
+        </AccordionItem>
+      </Accordion>
     </Plate>
   );
 }
diff --git a/apps/www/src/registry/default/example/basic-editor-styling-demo.tsx b/apps/www/src/registry/default/example/basic-editor-styling-demo.tsx
new file mode 100644
index 0000000000..37d18ba31f
--- /dev/null
+++ b/apps/www/src/registry/default/example/basic-editor-styling-demo.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+import { Plate } from '@udecode/plate-common';
+
+import { Editor } from '@/registry/default/plate-ui/editor';
+
+export default function BasicEditorStylingDemo() {
+  return (
+    <Plate>
+      <Editor placeholder="Type..." />
+    </Plate>
+  );
+}
diff --git a/apps/www/src/registry/default/example/basic-editor-value-demo.tsx b/apps/www/src/registry/default/example/basic-editor-value-demo.tsx
index 13ce071fce..2ddc78d8eb 100644
--- a/apps/www/src/registry/default/example/basic-editor-value-demo.tsx
+++ b/apps/www/src/registry/default/example/basic-editor-value-demo.tsx
@@ -1,6 +1,8 @@
 import React from 'react';
 import { editableProps } from '@/plate/demo/editableProps';
-import { Plate, PlateContent } from '@udecode/plate-common';
+import { Plate } from '@udecode/plate-common';
+
+import { Editor } from '@/registry/default/plate-ui/editor';
 
 const initialValue = [
   {
@@ -16,7 +18,7 @@ const initialValue = [
 export default function BasicEditorValueDemo() {
   return (
     <Plate initialValue={initialValue}>
-      <PlateContent {...editableProps} />
+      <Editor {...editableProps} />
     </Plate>
   );
 }
diff --git a/apps/www/src/registry/default/example/basic-plugins-components-demo.tsx b/apps/www/src/registry/default/example/basic-plugins-components-demo.tsx
index 0981b3b8a1..3a25adad24 100644
--- a/apps/www/src/registry/default/example/basic-plugins-components-demo.tsx
+++ b/apps/www/src/registry/default/example/basic-plugins-components-demo.tsx
@@ -9,10 +9,12 @@ import {
 } from '@udecode/plate-basic-marks';
 import { createBlockquotePlugin } from '@udecode/plate-block-quote';
 import { createCodeBlockPlugin } from '@udecode/plate-code-block';
-import { createPlugins, Plate, PlateContent } from '@udecode/plate-common';
+import { createPlugins, Plate } from '@udecode/plate-common';
 import { createHeadingPlugin } from '@udecode/plate-heading';
 import { createParagraphPlugin } from '@udecode/plate-paragraph';
 
+import { Editor } from '@/registry/default/plate-ui/editor';
+
 const plugins = createPlugins(
   [
     // Pick your plugins in https://platejs.org/?builder=true
@@ -36,12 +38,7 @@ const plugins = createPlugins(
 export default function BasicPluginsComponentsDemo() {
   return (
     <Plate initialValue={basicEditorValue} plugins={plugins}>
-      <PlateContent
-        spellCheck={false}
-        autoFocus={false}
-        placeholder="Type..."
-        style={{ outline: 'none' }}
-      />
+      <Editor spellCheck={false} autoFocus={false} placeholder="Type..." />
     </Plate>
   );
 }
diff --git a/apps/www/src/registry/default/example/basic-plugins-default-demo.tsx b/apps/www/src/registry/default/example/basic-plugins-default-demo.tsx
index dacdfb4766..1199f693fd 100644
--- a/apps/www/src/registry/default/example/basic-plugins-default-demo.tsx
+++ b/apps/www/src/registry/default/example/basic-plugins-default-demo.tsx
@@ -9,10 +9,18 @@ import {
 } from '@udecode/plate-basic-marks';
 import { createBlockquotePlugin } from '@udecode/plate-block-quote';
 import { createCodeBlockPlugin } from '@udecode/plate-code-block';
-import { Plate, PlateContent, PlatePlugin, Value } from '@udecode/plate-common';
+import { Plate, PlatePlugin, Value } from '@udecode/plate-common';
 import { createHeadingPlugin } from '@udecode/plate-heading';
 import { createParagraphPlugin } from '@udecode/plate-paragraph';
 
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from '@/components/ui/accordion';
+import { Editor } from '@/registry/default/plate-ui/editor';
+
 import { basicEditorValue } from './basic-plugins-components-demo';
 
 const plugins: PlatePlugin[] = [
@@ -29,7 +37,7 @@ const plugins: PlatePlugin[] = [
 ];
 
 export default function BasicPluginsDefaultDemo() {
-  const [debugValue, setDebugValue] = useState<Value>([]);
+  const [debugValue, setDebugValue] = useState<Value>(basicEditorValue);
 
   return (
     <Plate
@@ -40,10 +48,14 @@ export default function BasicPluginsDefaultDemo() {
         // save newValue...
       }}
     >
-      <PlateContent {...editableProps} />
-      debug value:
-      <br />
-      {JSON.stringify(debugValue)}
+      <Editor {...editableProps} />
+
+      <Accordion type="single" collapsible>
+        <AccordionItem value="manual-installation">
+          <AccordionTrigger>Debug Value</AccordionTrigger>
+          <AccordionContent>{JSON.stringify(debugValue)}</AccordionContent>
+        </AccordionItem>
+      </Accordion>
     </Plate>
   );
 }
diff --git a/apps/www/src/registry/default/example/cloud-demo.tsx b/apps/www/src/registry/default/example/cloud-demo.tsx
index 28a520fd54..a7ed25d490 100644
--- a/apps/www/src/registry/default/example/cloud-demo.tsx
+++ b/apps/www/src/registry/default/example/cloud-demo.tsx
@@ -11,12 +11,13 @@ import {
   ELEMENT_CLOUD_ATTACHMENT,
   ELEMENT_CLOUD_IMAGE,
 } from '@udecode/plate-cloud';
-import { Plate, PlateContent } from '@udecode/plate-common';
+import { Plate } from '@udecode/plate-common';
 
 import { createMyPlugins, MyValue } from '@/types/plate-types';
 import { CloudAttachmentElement } from '@/registry/default/plate-ui/cloud-attachment-element';
 import { CloudImageElement } from '@/registry/default/plate-ui/cloud-image-element';
 import { CloudToolbarButtons } from '@/registry/default/plate-ui/cloud-toolbar-buttons';
+import { Editor } from '@/registry/default/plate-ui/editor';
 import { FixedToolbar } from '@/registry/default/plate-ui/fixed-toolbar';
 
 const plugins = createMyPlugins(
@@ -61,7 +62,7 @@ export default function CloudDemo() {
         <CloudToolbarButtons />
       </FixedToolbar>
 
-      <PlateContent {...editableProps} />
+      <Editor className="mt-2" {...editableProps} />
     </Plate>
   );
 }
diff --git a/apps/www/src/registry/default/example/editable-voids-demo.tsx b/apps/www/src/registry/default/example/editable-voids-demo.tsx
index 7a1f6e8e8a..c0e0125847 100644
--- a/apps/www/src/registry/default/example/editable-voids-demo.tsx
+++ b/apps/www/src/registry/default/example/editable-voids-demo.tsx
@@ -16,13 +16,16 @@ import {
 import {
   createPluginFactory,
   Plate,
-  PlateContent,
   PlateRenderElementProps,
   TElement,
 } from '@udecode/plate-common';
 import { createResetNodePlugin } from '@udecode/plate-reset-node';
 
 import { createMyPlugins, MyEditor, MyValue } from '@/types/plate-types';
+import { Label } from '@/components/ui/label';
+import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
+import { Editor } from '@/registry/default/plate-ui/editor';
+import { Input } from '@/registry/default/plate-ui/input';
 
 export const ELEMENT_EDITABLE_VOID = 'editable-void';
 
@@ -44,7 +47,6 @@ const editableVoidPlugins = createMyPlugins(
   }
 );
 const styles: Record<string, CSSProperties> = {
-  box: { boxShadow: '0 0 0 3px #ddd', padding: '8px' },
   input: { margin: '8px 0' },
   radio: { width: 'unset' },
   editor: { padding: '20px', border: '2px solid #ddd' },
@@ -59,40 +61,44 @@ export function EditableVoidElement({
   return (
     // Need contentEditable=false or Firefox has issues with certain input types.
     <div {...attributes} contentEditable={false}>
-      <div style={styles.box}>
-        <h4>Name:</h4>
-        <input
-          style={styles.input}
+      <div className="mt-2 grid gap-6 rounded-md border p-6 shadow">
+        <Input
           type="text"
+          id="name"
+          placeholder="Name"
+          className="my-2"
           value={inputValue}
           onChange={(e) => {
             setInputValue(e.target.value);
           }}
         />
-        <h4>Left or right handed:</h4>
-        <input
-          style={styles.radio}
-          type="radio"
-          name="handedness"
-          value="left"
-        />{' '}
-        Left
-        <br />
-        <input
-          style={styles.radio}
-          type="radio"
-          name="handedness"
-          value="right"
-        />{' '}
-        Right
-        <h4>Tell us about yourself:</h4>
-        <div style={styles.editor}>
+
+        <div className="grid w-full max-w-sm items-center gap-2">
+          <Label htmlFor="handed">Left or right handed:</Label>
+
+          <RadioGroup id="handed" defaultValue="r1">
+            <div className="flex items-center space-x-2">
+              <RadioGroupItem value="r1" id="r1" />
+              <Label htmlFor="r1">Left</Label>
+            </div>
+            <div className="flex items-center space-x-2">
+              <RadioGroupItem value="r2" id="r2" />
+              <Label htmlFor="r2">Right</Label>
+            </div>
+          </RadioGroup>
+        </div>
+
+        <div className="grid gap-2">
+          <Label htmlFor="editable-void-basic-elements">
+            Tell us about yourself:
+          </Label>
+
           <Plate<MyValue, MyEditor>
             id="editable-void-basic-elements"
             plugins={editableVoidPlugins}
             // initialValue={basicElementsValue}
           >
-            <PlateContent {...editableProps} />
+            <Editor {...editableProps} />
           </Plate>
         </div>
       </div>
@@ -115,8 +121,10 @@ const plugins = createMyPlugins(
 
 export default function EditableVoidsDemo() {
   return (
-    <Plate<MyValue> plugins={plugins} initialValue={editableVoidsValue}>
-      <PlateContent {...editableProps} />
-    </Plate>
+    <div className="p-10">
+      <Plate<MyValue> plugins={plugins} initialValue={editableVoidsValue}>
+        <Editor {...editableProps} />
+      </Plate>
+    </div>
   );
 }
diff --git a/apps/www/src/registry/default/example/editor-button.tsx b/apps/www/src/registry/default/example/editor-button.tsx
new file mode 100644
index 0000000000..78be9c2195
--- /dev/null
+++ b/apps/www/src/registry/default/example/editor-button.tsx
@@ -0,0 +1,17 @@
+'use client';
+
+import { Plate } from '@udecode/plate-common';
+
+import { Button } from '@/registry/default/plate-ui/button';
+import { Editor } from '@/registry/default/plate-ui/editor';
+
+export default function EditorButton() {
+  return (
+    <div className="mt-[72px] grid w-full gap-2 p-10">
+      <Plate>
+        <Editor placeholder="Type your message here." />
+        <Button>Send message</Button>
+      </Plate>
+    </div>
+  );
+}
diff --git a/apps/www/src/registry/default/example/editor-default.tsx b/apps/www/src/registry/default/example/editor-default.tsx
new file mode 100644
index 0000000000..9e4c92ba7a
--- /dev/null
+++ b/apps/www/src/registry/default/example/editor-default.tsx
@@ -0,0 +1,15 @@
+'use client';
+
+import { Plate } from '@udecode/plate-common';
+
+import { Editor } from '@/registry/default/plate-ui/editor';
+
+export default function EditorDefault() {
+  return (
+    <div className="mt-[72px] p-10">
+      <Plate>
+        <Editor placeholder="Type your message here." />
+      </Plate>
+    </div>
+  );
+}
diff --git a/apps/www/src/registry/default/example/editor-disabled.tsx b/apps/www/src/registry/default/example/editor-disabled.tsx
new file mode 100644
index 0000000000..30c3efd2c4
--- /dev/null
+++ b/apps/www/src/registry/default/example/editor-disabled.tsx
@@ -0,0 +1,15 @@
+'use client';
+
+import { Plate } from '@udecode/plate-common';
+
+import { Editor } from '@/registry/default/plate-ui/editor';
+
+export default function EditorDisabled() {
+  return (
+    <div className="mt-[72px] p-10">
+      <Plate>
+        <Editor placeholder="Type your message here." disabled />
+      </Plate>
+    </div>
+  );
+}
diff --git a/apps/www/src/registry/default/example/editor-form.tsx b/apps/www/src/registry/default/example/editor-form.tsx
new file mode 100644
index 0000000000..61eff09d81
--- /dev/null
+++ b/apps/www/src/registry/default/example/editor-form.tsx
@@ -0,0 +1,15 @@
+'use client';
+
+import { Plate } from '@udecode/plate-common';
+
+import { Editor } from '@/registry/default/plate-ui/editor';
+
+export default function EditorForm() {
+  return (
+    <div className="mt-[72px] p-10">
+      <Plate>
+        <Editor placeholder="Type your message here." />
+      </Plate>
+    </div>
+  );
+}
diff --git a/apps/www/src/registry/default/example/editor-ghost.tsx b/apps/www/src/registry/default/example/editor-ghost.tsx
new file mode 100644
index 0000000000..e47a5494d9
--- /dev/null
+++ b/apps/www/src/registry/default/example/editor-ghost.tsx
@@ -0,0 +1,15 @@
+'use client';
+
+import { Plate } from '@udecode/plate-common';
+
+import { Editor } from '@/registry/default/plate-ui/editor';
+
+export default function EditorGhost() {
+  return (
+    <div className="mt-[72px] p-10">
+      <Plate>
+        <Editor placeholder="Type your message here." variant="ghost" />
+      </Plate>
+    </div>
+  );
+}
diff --git a/apps/www/src/registry/default/example/editor-label.tsx b/apps/www/src/registry/default/example/editor-label.tsx
new file mode 100644
index 0000000000..93700a4c2a
--- /dev/null
+++ b/apps/www/src/registry/default/example/editor-label.tsx
@@ -0,0 +1,17 @@
+'use client';
+
+import { Plate } from '@udecode/plate-common';
+
+import { Label } from '@/components/ui/label';
+import { Editor } from '@/registry/default/plate-ui/editor';
+
+export default function EditorLabel() {
+  return (
+    <div className="mt-[72px] grid gap-1.5 p-10">
+      <Plate id="message">
+        <Label htmlFor="message">Your message</Label>
+        <Editor placeholder="Type your message here." id="message" />
+      </Plate>
+    </div>
+  );
+}
diff --git a/apps/www/src/registry/default/example/editor-text.tsx b/apps/www/src/registry/default/example/editor-text.tsx
new file mode 100644
index 0000000000..b18035e870
--- /dev/null
+++ b/apps/www/src/registry/default/example/editor-text.tsx
@@ -0,0 +1,20 @@
+'use client';
+
+import { Plate } from '@udecode/plate-common';
+
+import { Label } from '@/components/ui/label';
+import { Editor } from '@/registry/default/plate-ui/editor';
+
+export default function EditorText() {
+  return (
+    <div className="mt-[72px] grid gap-1.5 p-10">
+      <Plate>
+        <Label htmlFor="message-2">Your Message</Label>
+        <Editor placeholder="Type your message here." id="message-2" />
+        <p className="text-sm text-muted-foreground">
+          Your message will be copied to the support team.
+        </p>
+      </Plate>
+    </div>
+  );
+}
diff --git a/apps/www/src/registry/default/example/find-replace-demo.tsx b/apps/www/src/registry/default/example/find-replace-demo.tsx
index 40bd57d7e0..5cc4d14eea 100644
--- a/apps/www/src/registry/default/example/find-replace-demo.tsx
+++ b/apps/www/src/registry/default/example/find-replace-demo.tsx
@@ -3,11 +3,12 @@ import { editableProps } from '@/plate/demo/editableProps';
 import { plateUI } from '@/plate/demo/plateUI';
 import { basicNodesPlugins } from '@/plate/demo/plugins/basicNodesPlugins';
 import { findReplaceValue } from '@/plate/demo/values/findReplaceValue';
-import { Plate, PlateContent } from '@udecode/plate-common';
+import { Plate } from '@udecode/plate-common';
 import { createFindReplacePlugin } from '@udecode/plate-find-replace';
 
 import { createMyPlugins, MyValue } from '@/types/plate-types';
 import { Icons } from '@/components/icons';
+import { Editor } from '@/registry/default/plate-ui/editor';
 import { FixedToolbar } from '@/registry/default/plate-ui/fixed-toolbar';
 
 export interface SearchHighlightToolbarProps {
@@ -79,7 +80,7 @@ export default function FindReplaceDemo() {
       <SearchHighlightToolbar icon={Icons.search} setSearch={setSearch} />
 
       <Plate<MyValue> plugins={plugins} initialValue={findReplaceValue}>
-        <PlateContent {...editableProps} />
+        <Editor {...editableProps} />
       </Plate>
     </>
   );
diff --git a/apps/www/src/registry/default/example/hundreds-blocks-demo.tsx b/apps/www/src/registry/default/example/hundreds-blocks-demo.tsx
index d6c4ab277b..b05a2f9a3e 100644
--- a/apps/www/src/registry/default/example/hundreds-blocks-demo.tsx
+++ b/apps/www/src/registry/default/example/hundreds-blocks-demo.tsx
@@ -2,7 +2,7 @@ import React, { useCallback, useMemo, useState } from 'react';
 import { editableProps } from '@/plate/demo/editableProps';
 import { basicNodesPlugins } from '@/plate/demo/plugins/basicNodesPlugins';
 import { createHugeDocumentValue } from '@/plate/demo/values/createHugeDocumentValue';
-import { Plate, PlateContent, TElement } from '@udecode/plate-common';
+import { Plate, TElement } from '@udecode/plate-common';
 import { createEditor } from 'slate';
 import {
   Editable,
@@ -13,13 +13,14 @@ import {
 } from 'slate-react';
 
 import { MyValue } from '@/types/plate-types';
+import { Editor } from '@/registry/default/plate-ui/editor';
 
 const initialValue = createHugeDocumentValue() as MyValue;
 
 function WithPlate() {
   return (
     <Plate initialValue={initialValue} plugins={basicNodesPlugins}>
-      <PlateContent {...editableProps} />
+      <Editor {...editableProps} />
     </Plate>
   );
 }
@@ -54,8 +55,12 @@ function WithoutPlate() {
 export default function HundredsBlocksDemo() {
   return (
     <div className="flex">
-      <WithPlate />
-      <WithoutPlate />
+      <div className="w-1/2 p-4">
+        <WithPlate />
+      </div>
+      <div className="w-1/2 p-4">
+        <WithoutPlate />
+      </div>
     </div>
   );
 }
diff --git a/apps/www/src/registry/default/example/hundreds-editors-demo.tsx b/apps/www/src/registry/default/example/hundreds-editors-demo.tsx
index cd0b2c8bb1..5a847d81c9 100644
--- a/apps/www/src/registry/default/example/hundreds-editors-demo.tsx
+++ b/apps/www/src/registry/default/example/hundreds-editors-demo.tsx
@@ -2,9 +2,10 @@ import React from 'react';
 import { editableProps } from '@/plate/demo/editableProps';
 import { basicNodesPlugins } from '@/plate/demo/plugins/basicNodesPlugins';
 import { createMultiEditorsValue } from '@/plate/demo/values/createMultiEditorsValue';
-import { Plate, PlateContent } from '@udecode/plate-common';
+import { Plate } from '@udecode/plate-common';
 
 import { MyValue } from '@/types/plate-types';
+import { Editor } from '@/registry/default/plate-ui/editor';
 
 const initialValues = createMultiEditorsValue();
 
@@ -15,7 +16,7 @@ function WithPlate({ initialValue, id }: any) {
       initialValue={initialValue}
       plugins={basicNodesPlugins}
     >
-      <PlateContent {...editableProps} />
+      <Editor {...editableProps} />
     </Plate>
   );
 }
@@ -45,17 +46,13 @@ function WithPlate({ initialValue, id }: any) {
 //   );
 // }
 
-const styles = {
-  wrapper: { border: '1px solid black', marginBottom: '20px', padding: 4 },
-};
-
 export default function HundredsEditorsDemo() {
   return (
     <div className="flex flex-col">
       {initialValues.map((initialValue, idx) => {
         return (
-          <div style={styles.wrapper} key={idx}>
-            <div>{idx}</div>
+          <div key={idx} className="p-10">
+            <h3 className="mb-2 font-semibold">#{idx + 1}</h3>
             <WithPlate initialValue={initialValue} id={idx + 1} />
             {/* <WithoutPlate initialValue={initialValue} id={idx} /> */}
           </div>
diff --git a/apps/www/src/registry/default/example/iframe-demo.tsx b/apps/www/src/registry/default/example/iframe-demo.tsx
index d189d5674b..73e78f39da 100644
--- a/apps/www/src/registry/default/example/iframe-demo.tsx
+++ b/apps/www/src/registry/default/example/iframe-demo.tsx
@@ -3,10 +3,11 @@ import { editableProps } from '@/plate/demo/editableProps';
 import { plateUI } from '@/plate/demo/plateUI';
 import { basicNodesPlugins } from '@/plate/demo/plugins/basicNodesPlugins';
 import { iframeValue } from '@/plate/demo/values/iframeValue';
-import { Plate, PlateContent } from '@udecode/plate-common';
+import { Plate } from '@udecode/plate-common';
 import { createPortal } from 'react-dom';
 
 import { createMyPlugins, MyValue } from '@/types/plate-types';
+import { Editor } from '@/registry/default/plate-ui/editor';
 
 import {
   createEditableVoidPlugin,
@@ -42,9 +43,9 @@ export function IFrame({ children, ...props }: any) {
 
 export default function IframeDemo() {
   return (
-    <IFrame>
+    <IFrame className="p-10">
       <Plate<MyValue> plugins={plugins} initialValue={iframeValue}>
-        <PlateContent {...editableProps} />
+        <Editor {...editableProps} />
       </Plate>
     </IFrame>
   );
diff --git a/apps/www/src/registry/default/example/multiple-editors-demo.tsx b/apps/www/src/registry/default/example/multiple-editors-demo.tsx
index 6f18375ea4..fda8a6d55e 100644
--- a/apps/www/src/registry/default/example/multiple-editors-demo.tsx
+++ b/apps/www/src/registry/default/example/multiple-editors-demo.tsx
@@ -4,10 +4,11 @@ import { imagePlugins } from '@/plate/demo/plugins/imagePlugins';
 import { basicElementsValue } from '@/plate/demo/values/basicElementsValue';
 import { basicMarksValue } from '@/plate/demo/values/basicMarksValue';
 import { imageValue } from '@/plate/demo/values/mediaValue';
-import { Plate, PlateContent } from '@udecode/plate-common';
+import { Plate } from '@udecode/plate-common';
 
 import { MyValue } from '@/types/plate-types';
 import { PlaygroundTurnIntoDropdownMenu } from '@/components/plate-ui/playground-turn-into-dropdown-menu';
+import { Editor } from '@/registry/default/plate-ui/editor';
 import { FixedToolbar } from '@/registry/default/plate-ui/fixed-toolbar';
 import { Separator } from '@/registry/default/plate-ui/separator';
 
@@ -32,11 +33,11 @@ export default function MultipleEditorsDemo() {
           </FixedToolbar>
 
           <div>
-            <PlateContent />
+            <Editor />
             <Separator />
-            <PlateContent id="marks" />
+            <Editor id="marks" />
             <Separator />
-            <PlateContent id="image" />
+            <Editor id="image" />
           </div>
         </Plate>
       </Plate>
diff --git a/apps/www/src/registry/default/example/playground-demo.tsx b/apps/www/src/registry/default/example/playground-demo.tsx
index 472f465f6f..8a4de2a9dc 100644
--- a/apps/www/src/registry/default/example/playground-demo.tsx
+++ b/apps/www/src/registry/default/example/playground-demo.tsx
@@ -48,7 +48,6 @@ import { createCommentsPlugin } from '@udecode/plate-comments';
 import {
   createPlateEditor,
   Plate,
-  PlateContent,
   PlatePluginComponent,
   useEditorRef,
   usePlateActions,
@@ -98,6 +97,7 @@ import { PlaygroundFixedToolbarButtons } from '@/components/plate-ui/playground-
 import { PlaygroundFloatingToolbarButtons } from '@/components/plate-ui/playground-floating-toolbar-buttons';
 import { CommentsPopover } from '@/registry/default/plate-ui/comments-popover';
 import { CursorOverlay } from '@/registry/default/plate-ui/cursor-overlay';
+import { Editor } from '@/registry/default/plate-ui/editor';
 import { FixedToolbar } from '@/registry/default/plate-ui/fixed-toolbar';
 import { FloatingToolbar } from '@/registry/default/plate-ui/floating-toolbar';
 import { MentionCombobox } from '@/registry/default/plate-ui/mention-combobox';
@@ -321,12 +321,13 @@ export default function PlaygroundDemo({ id }: { id?: ValueId }) {
                     'md:[&_.slate-start-area-left]:!w-[64px] md:[&_.slate-start-area-right]:!w-[64px]'
                 )}
               >
-                <PlateContent
+                <Editor
                   {...editableProps}
                   placeholder=""
+                  variant="ghost"
                   className={cn(
                     editableProps.className,
-                    'px-8 outline-none',
+                    'px-8 text-base',
                     !id && 'min-h-[920px] pb-[20vh] pt-4 md:px-[96px]',
                     id && 'pb-8 pt-2'
                   )}
diff --git a/apps/www/src/registry/default/example/preview-md-demo.tsx b/apps/www/src/registry/default/example/preview-md-demo.tsx
index afaa73c322..2462cb2888 100644
--- a/apps/www/src/registry/default/example/preview-md-demo.tsx
+++ b/apps/www/src/registry/default/example/preview-md-demo.tsx
@@ -1,3 +1,5 @@
+/* eslint-disable prettier/prettier */
+import Prism from 'prismjs';
 import 'prismjs/components/prism-markdown';
 
 import React from 'react';
@@ -9,14 +11,13 @@ import {
   createPluginFactory,
   isText,
   Plate,
-  PlateContent,
   TRenderLeafProps,
   TText,
 } from '@udecode/plate-common';
-import Prism from 'prismjs';
 
 import { createMyPlugins, MyValue } from '@/types/plate-types';
 import { cn } from '@/lib/utils';
+import { Editor } from '@/registry/default/plate-ui/editor';
 
 /**
  * Decorate texts with markdown preview.
@@ -111,8 +112,10 @@ const _editableProps = {
 
 export default function PreviewMdDemo() {
   return (
-    <Plate<MyValue> plugins={plugins} initialValue={previewMdValue}>
-      <PlateContent {..._editableProps} />
-    </Plate>
+    <div className="p-10">
+      <Plate<MyValue> plugins={plugins} initialValue={previewMdValue}>
+        <Editor {..._editableProps} />
+      </Plate>
+    </div>
   );
 }
diff --git a/apps/www/src/registry/default/plate-ui/editor.tsx b/apps/www/src/registry/default/plate-ui/editor.tsx
new file mode 100644
index 0000000000..6c0aac09e7
--- /dev/null
+++ b/apps/www/src/registry/default/plate-ui/editor.tsx
@@ -0,0 +1,60 @@
+import React from 'react';
+import { PlateContent } from '@udecode/plate-common';
+import { cva } from 'class-variance-authority';
+
+import { cn } from '@/lib/utils';
+
+import type { PlateContentProps } from '@udecode/plate-common';
+import type { VariantProps } from 'class-variance-authority';
+
+const editorVariants = cva(
+  cn(
+    'relative whitespace-pre-wrap break-words',
+    'min-h-[80px] w-full rounded-md bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+    '[&_[data-slate-placeholder]]:text-muted-foreground [&_[data-slate-placeholder]]:!opacity-100',
+    '[&_[data-slate-placeholder]]:top-[auto_!important]',
+    '[&_strong]:font-bold'
+  ),
+  {
+    variants: {
+      variant: {
+        outline: 'border border-input',
+        ghost: '',
+      },
+      focused: {
+        true: 'ring-2 ring-ring ring-offset-2',
+      },
+      disabled: {
+        true: 'cursor-not-allowed opacity-50',
+      },
+    },
+    defaultVariants: {
+      variant: 'outline',
+    },
+  }
+);
+
+export type EditorProps = PlateContentProps &
+  VariantProps<typeof editorVariants>;
+
+const Editor = React.forwardRef<HTMLDivElement, EditorProps>(
+  ({ variant, disabled, focused, readOnly, className, ...props }, ref) => {
+    return (
+      <div ref={ref} className="relative w-full">
+        <PlateContent
+          className={cn(
+            editorVariants({ variant, focused, disabled }),
+            className
+          )}
+          disableDefaultStyles
+          readOnly={disabled ?? readOnly}
+          aria-disabled={disabled}
+          {...props}
+        />
+      </div>
+    );
+  }
+);
+Editor.displayName = 'Editor';
+
+export { Editor };
diff --git a/apps/www/src/registry/registry.ts b/apps/www/src/registry/registry.ts
index 32e8317066..af5cd2795c 100644
--- a/apps/www/src/registry/registry.ts
+++ b/apps/www/src/registry/registry.ts
@@ -1,6 +1,13 @@
 import { Registry } from './schema';
 
 const ui: Registry = [
+  {
+    name: 'editor',
+    type: 'components:plate-ui',
+    dependencies: [],
+    registryDependencies: [],
+    files: ['plate-ui/editor.tsx'],
+  },
   {
     name: 'cloud',
     type: 'components:plate-ui',
@@ -556,12 +563,60 @@ const ui: Registry = [
 ];
 
 const example: Registry = [
+  {
+    name: 'editor-default',
+    type: 'components:example',
+    registryDependencies: [],
+    files: ['example/editor-default.tsx'],
+  },
+  {
+    name: 'editor-disabled',
+    type: 'components:example',
+    registryDependencies: [],
+    files: ['example/editor-disabled.tsx'],
+  },
+  {
+    name: 'editor-ghost',
+    type: 'components:example',
+    registryDependencies: [],
+    files: ['example/editor-ghost.tsx'],
+  },
+  {
+    name: 'editor-label',
+    type: 'components:example',
+    registryDependencies: [],
+    files: ['example/editor-label.tsx'],
+  },
+  {
+    name: 'editor-text',
+    type: 'components:example',
+    registryDependencies: [],
+    files: ['example/editor-text.tsx'],
+  },
+  {
+    name: 'editor-button',
+    type: 'components:example',
+    registryDependencies: [],
+    files: ['example/editor-button.tsx'],
+  },
+  {
+    name: 'editor-form',
+    type: 'components:example',
+    registryDependencies: [],
+    files: ['example/editor-form.tsx'],
+  },
   {
     name: 'basic-editor-default-demo',
     type: 'components:example',
     registryDependencies: [],
     files: ['example/basic-editor-default-demo.tsx'],
   },
+  {
+    name: 'basic-editor-styling-demo',
+    type: 'components:example',
+    registryDependencies: [],
+    files: ['example/basic-editor-styling-demo.tsx'],
+  },
   {
     name: 'basic-editor-handler-demo',
     type: 'components:example',
diff --git a/apps/www/src/styles/globals.css b/apps/www/src/styles/globals.css
index 4896d69007..6fbe08d8f3 100644
--- a/apps/www/src/styles/globals.css
+++ b/apps/www/src/styles/globals.css
@@ -59,29 +59,6 @@
       'rlig' 1,
       'calt' 1;
   }
-
-  kbd {
-    font-size: inherit;
-  }
-
-  [data-slate-editor] {
-    font-family:
-      Inter,
-      ui-sans-serif,
-      system-ui,
-      -apple-system,
-      BlinkMacSystemFont,
-      Segoe UI,
-      Roboto,
-      Helvetica Neue,
-      Arial,
-      Noto Sans,
-      sans-serif,
-      'Apple Color Emoji',
-      'Segoe UI Emoji',
-      Segoe UI Symbol,
-      'Noto Color Emoji';
-  }
 }
 
 @layer utilities {
diff --git a/templates/plate-template/package.json b/templates/plate-template/package.json
index 438cf1c466..4d4bb3055b 100644
--- a/templates/plate-template/package.json
+++ b/templates/plate-template/package.json
@@ -14,11 +14,11 @@
   "dependencies": {
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-tooltip": "^1.0.6",
-    "@udecode/plate-common": "^23.7.4",
+    "@udecode/plate-common": "^24.0.0",
     "class-variance-authority": "0.7.0",
     "clsx": "2.0.0",
     "eslint-plugin-prettier": "^5.0.0",
-    "lucide-react": "0.277.0",
+    "lucide-react": "0.279.0",
     "next": "^13.4.19",
     "next-themes": "^0.2.1",
     "react": "^18.2.0",
@@ -33,7 +33,7 @@
   },
   "devDependencies": {
     "@ianvs/prettier-plugin-sort-imports": "^4.1.0",
-    "@types/node": "^20.6.1",
+    "@types/node": "^20.6.2",
     "@types/react": "^18.2.21",
     "@types/react-dom": "^18.2.7",
     "@typescript-eslint/parser": "^6.7.0",
diff --git a/templates/plate-template/pnpm-lock.yaml b/templates/plate-template/pnpm-lock.yaml
index c66aa448d1..e3b010a293 100644
--- a/templates/plate-template/pnpm-lock.yaml
+++ b/templates/plate-template/pnpm-lock.yaml
@@ -1,9 +1,5 @@
 lockfileVersion: '6.0'
 
-settings:
-  autoInstallPeers: true
-  excludeLinksFromLockfile: false
-
 patchedDependencies:
   react-dnd@15.1.2:
     hash: nvkuskfagl3tfokj6l2yreas2e
@@ -17,8 +13,8 @@ dependencies:
     specifier: ^1.0.6
     version: 1.0.6(@types/react-dom@18.2.7)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)
   '@udecode/plate-common':
-    specifier: ^23.7.4
-    version: 23.7.4(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
+    specifier: ^24.0.0
+    version: 24.0.0(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
   class-variance-authority:
     specifier: 0.7.0
     version: 0.7.0
@@ -29,8 +25,8 @@ dependencies:
     specifier: ^5.0.0
     version: 5.0.0(eslint-config-prettier@9.0.0)(eslint@8.49.0)(prettier@3.0.3)
   lucide-react:
-    specifier: 0.277.0
-    version: 0.277.0(react@18.2.0)
+    specifier: 0.279.0
+    version: 0.279.0(react@18.2.0)
   next:
     specifier: ^13.4.19
     version: 13.4.19(@babel/core@7.22.17)(react-dom@18.2.0)(react@18.2.0)
@@ -42,7 +38,7 @@ dependencies:
     version: 18.2.0
   react-dnd:
     specifier: ^15.1.2
-    version: 15.1.2(patch_hash=nvkuskfagl3tfokj6l2yreas2e)(@types/node@20.6.1)(@types/react@18.2.21)(react@18.2.0)
+    version: 15.1.2(patch_hash=nvkuskfagl3tfokj6l2yreas2e)(@types/node@20.6.2)(@types/react@18.2.21)(react@18.2.0)
   react-dnd-html5-backend:
     specifier: ^15.1.3
     version: 15.1.3
@@ -70,8 +66,8 @@ devDependencies:
     specifier: ^4.1.0
     version: 4.1.0(prettier@3.0.3)
   '@types/node':
-    specifier: ^20.6.1
-    version: 20.6.1
+    specifier: ^20.6.2
+    version: 20.6.2
   '@types/react':
     specifier: ^18.2.21
     version: 18.2.21
@@ -944,8 +940,8 @@ packages:
     resolution: {integrity: sha512-trNJ/vtMZYMLhfN45uLq4ShQSw0/S7xCTLLVM+WM1rmFpba/VS42jVUgaO3w/NOLiWR/09lnYk0yMaA/atdIsg==}
     dev: false
 
-  /@types/node@20.6.1:
-    resolution: {integrity: sha512-4LcJvuXQlv4lTHnxwyHQZ3uR9Zw2j7m1C9DfuwoTFQQP4Pmu04O6IfLYgMmHoOCt0nosItLLZAH+sOrRE0Bo8g==}
+  /@types/node@20.6.2:
+    resolution: {integrity: sha512-Y+/1vGBHV/cYk6OI1Na/LHzwnlNCAfU3ZNGrc1LdRe/LAIbdDPTTv/HU3M7yXN448aTVDq3eKRm2cg7iKLb8gw==}
 
   /@types/prop-types@15.7.5:
     resolution: {integrity: sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==}
@@ -1028,8 +1024,8 @@ packages:
       eslint-visitor-keys: 3.4.3
     dev: true
 
-  /@udecode/plate-common@23.7.4(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1):
-    resolution: {integrity: sha512-/pNpnfrVTKxTv1hJwlxgyNfhCDJuHtil7sVYADdIJsd53iq9XY26X4xa5cbC+dmFyyqNBC3r7YWFDMiww0U2Kg==}
+  /@udecode/plate-common@24.0.0(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1):
+    resolution: {integrity: sha512-5TrJUM2uQfBUZwEDrJBVVPjy5D+Gwdi1UIjHCZixDq8lXV96xtrdaXRDLwJ57VxECdEBJ98wrCB/0czD2uvYBA==}
     peerDependencies:
       react: '>=16.8.0'
       react-dom: '>=16.8.0'
@@ -1037,11 +1033,11 @@ packages:
       slate-history: '>=0.93.0'
       slate-react: '>=0.95.0'
     dependencies:
-      '@udecode/plate-core': 23.7.4(@babel/core@7.22.17)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
-      '@udecode/plate-utils': 23.7.4(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
+      '@udecode/plate-core': 24.0.0(@babel/core@7.22.17)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
+      '@udecode/plate-utils': 24.0.0(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
       '@udecode/slate': 23.7.4(slate-history@0.93.0)(slate@0.94.1)
-      '@udecode/slate-react': 23.7.4(react-dom@18.2.0)(react@18.2.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
-      '@udecode/slate-utils': 23.7.4(slate-history@0.93.0)(slate@0.94.1)
+      '@udecode/slate-react': 24.0.0(react-dom@18.2.0)(react@18.2.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
+      '@udecode/slate-utils': 24.0.0(slate-history@0.93.0)(slate@0.94.1)
       '@udecode/utils': 19.7.1
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
@@ -1063,8 +1059,8 @@ packages:
       - xstate
     dev: false
 
-  /@udecode/plate-core@23.7.4(@babel/core@7.22.17)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1):
-    resolution: {integrity: sha512-W3/z6d5XkuFfRx3ckPNIfKlYkr5KDLnH8gRJD8TJJM6QMs70jauR8R4m28OAy0LplMARnTdtWjvSv+rqZxJpFg==}
+  /@udecode/plate-core@24.0.0(@babel/core@7.22.17)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1):
+    resolution: {integrity: sha512-iHGpnIAkbwMGeD4Ficbf+M5m+q3O5uhzrimQKvbjvZj2bW3MAoPDnuvhrnlaTqAIwxzyhk4tWT9a8294L/gWPg==}
     peerDependencies:
       react: '>=16.8.0'
       react-dom: '>=16.8.0'
@@ -1073,7 +1069,7 @@ packages:
       slate-react: '>=0.95.0'
     dependencies:
       '@udecode/slate': 23.7.4(slate-history@0.93.0)(slate@0.94.1)
-      '@udecode/slate-react': 23.7.4(react-dom@18.2.0)(react@18.2.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
+      '@udecode/slate-react': 24.0.0(react-dom@18.2.0)(react@18.2.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
       '@udecode/utils': 19.7.1
       '@udecode/zustood': 1.1.3(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(zustand@3.7.2)
       clsx: 1.2.1
@@ -1102,8 +1098,8 @@ packages:
       - xstate
     dev: false
 
-  /@udecode/plate-utils@23.7.4(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1):
-    resolution: {integrity: sha512-FGZ1QjMkR6Tr57b66u1C8mu/JCVwh1e0W5OkjRIhE2Drkm5I39TlrfM86ouZroWuOP228B/hXFn6a2pjqIQKIw==}
+  /@udecode/plate-utils@24.0.0(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1):
+    resolution: {integrity: sha512-Ywa8a/ZancDit9qJGh7N3TEmJK22/WsW/h+486niU5u00hJGDcfqrtORoNPVggAHEU1RCLJ7u9nyNXMvdGAUPA==}
     peerDependencies:
       react: '>=16.8.0'
       react-dom: '>=16.8.0'
@@ -1112,10 +1108,10 @@ packages:
       slate-react: '>=0.95.0'
     dependencies:
       '@radix-ui/react-slot': 1.0.2(@types/react@18.2.21)(react@18.2.0)
-      '@udecode/plate-core': 23.7.4(@babel/core@7.22.17)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
+      '@udecode/plate-core': 24.0.0(@babel/core@7.22.17)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
       '@udecode/slate': 23.7.4(slate-history@0.93.0)(slate@0.94.1)
-      '@udecode/slate-react': 23.7.4(react-dom@18.2.0)(react@18.2.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
-      '@udecode/slate-utils': 23.7.4(slate-history@0.93.0)(slate@0.94.1)
+      '@udecode/slate-react': 24.0.0(react-dom@18.2.0)(react@18.2.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
+      '@udecode/slate-utils': 24.0.0(slate-history@0.93.0)(slate@0.94.1)
       '@udecode/utils': 19.7.1
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
@@ -1137,8 +1133,8 @@ packages:
       - xstate
     dev: false
 
-  /@udecode/slate-react@23.7.4(react-dom@18.2.0)(react@18.2.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1):
-    resolution: {integrity: sha512-eVMh6MRvMIUYKPltSGvIivGvs+pzdyXWc0lVToRLkrMPriTW1HsA0zRTBScVDq0HPXjHyzlxJPFTk0TBIV+YVg==}
+  /@udecode/slate-react@24.0.0(react-dom@18.2.0)(react@18.2.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1):
+    resolution: {integrity: sha512-enPGVtY8SZY2oG1eLE2CT9Ldq3xO7txes4mwW8JjIPdrOrgoyQWXM14lrjrYHnPDw2Gp624WSWx0xL0Yu+AOAg==}
     peerDependencies:
       react: '>=16.8.0'
       react-dom: '>=16.8.0'
@@ -1155,8 +1151,8 @@ packages:
       slate-react: 0.98.3(react-dom@18.2.0)(react@18.2.0)(slate@0.94.1)
     dev: false
 
-  /@udecode/slate-utils@23.7.4(slate-history@0.93.0)(slate@0.94.1):
-    resolution: {integrity: sha512-UeZ9yv/VJuzstkzIZpkZYn+P7VrZVRL7cpf+aO/1GwUNYYhNduXw0S7TrTi1WGiODxb47rVjOzmiVrkPLGSfcg==}
+  /@udecode/slate-utils@24.0.0(slate-history@0.93.0)(slate@0.94.1):
+    resolution: {integrity: sha512-kYeWk3t/9NGey4FohRai4jXplzeCs7l2VuMKujpx33KAPbaGGOW0f3iWcuC/bEoeqJCKmyQAVA2Dw/T0hhVKBA==}
     peerDependencies:
       slate: '>=0.94.0'
       slate-history: '>=0.93.0'
@@ -2829,8 +2825,8 @@ packages:
       yallist: 4.0.0
     dev: true
 
-  /lucide-react@0.277.0(react@18.2.0):
-    resolution: {integrity: sha512-9epmznme+vW14V9d2rsMeLr3fMnf59lYDUOVUg6s7oVN22Zq8h4B30+3CIdFFV9UXCjPG5ZNKHfO/hf96cl46A==}
+  /lucide-react@0.279.0(react@18.2.0):
+    resolution: {integrity: sha512-LJ8g66+Bxc3t3x9vKTeK3wn3xucrOQGfJ9ou9GsBwCt2offsrT2BB90XrTrIzE1noYYDe2O8jZaRHi6sAHXNxw==}
     peerDependencies:
       react: ^16.5.1 || ^17.0.0 || ^18.0.0
     dependencies:
@@ -3252,7 +3248,7 @@ packages:
       dnd-core: 15.1.2
     dev: false
 
-  /react-dnd@15.1.2(patch_hash=nvkuskfagl3tfokj6l2yreas2e)(@types/node@20.6.1)(@types/react@18.2.21)(react@18.2.0):
+  /react-dnd@15.1.2(patch_hash=nvkuskfagl3tfokj6l2yreas2e)(@types/node@20.6.2)(@types/react@18.2.21)(react@18.2.0):
     resolution: {integrity: sha512-EaSbMD9iFJDY/o48T3c8wn3uWU+2uxfFojhesZN3LhigJoAIvH2iOjxofSA9KbqhAKP6V9P853G6XG8JngKVtA==}
     peerDependencies:
       '@types/hoist-non-react-statics': '>= 3.3.1'
@@ -3269,7 +3265,7 @@ packages:
     dependencies:
       '@react-dnd/invariant': 3.0.1
       '@react-dnd/shallowequal': 3.0.1
-      '@types/node': 20.6.1
+      '@types/node': 20.6.2
       '@types/react': 18.2.21
       dnd-core: 15.1.2
       fast-deep-equal: 3.1.3
@@ -3982,3 +3978,7 @@ packages:
     dependencies:
       react: 18.2.0
     dev: false
+
+settings:
+  autoInstallPeers: true
+  excludeLinksFromLockfile: false
diff --git a/templates/plate-template/src/app/layout.tsx b/templates/plate-template/src/app/layout.tsx
index 027fc4c469..6f1be9d9d4 100644
--- a/templates/plate-template/src/app/layout.tsx
+++ b/templates/plate-template/src/app/layout.tsx
@@ -42,6 +42,7 @@ export default function RootLayout({ children }: RootLayoutProps) {
             '[&_.slate-selected]:!bg-primary/20 [&_.slate-selection-area]:border [&_.slate-selection-area]:border-primary [&_.slate-selection-area]:bg-primary/10',
             fontSans.variable
           )}
+          suppressHydrationWarning
         >
           <ThemeProvider attribute="class" defaultTheme="light">
             <TooltipProvider
diff --git a/templates/plate-template/src/app/page.tsx b/templates/plate-template/src/app/page.tsx
index 92f1bf1a44..4bf28e2d20 100644
--- a/templates/plate-template/src/app/page.tsx
+++ b/templates/plate-template/src/app/page.tsx
@@ -37,7 +37,7 @@ export default function IndexPage() {
         </Link>
       </div>
 
-      <div className="max-w-[1336px] rounded-lg border bg-background shadow">
+      <div className="flex w-[600px] flex-col gap-4">
         <PlateEditor />
       </div>
     </section>
diff --git a/templates/plate-template/src/components/plate-editor.tsx b/templates/plate-template/src/components/plate-editor.tsx
index 0e580685c7..5c07abd592 100644
--- a/templates/plate-template/src/components/plate-editor.tsx
+++ b/templates/plate-template/src/components/plate-editor.tsx
@@ -1,6 +1,8 @@
 'use client';
 
-import { createPlugins, Plate, PlateProvider } from '@udecode/plate-common';
+import { createPlugins, Plate } from '@udecode/plate-common';
+
+import { Editor } from '@/components/plate-ui/editor';
 
 const plugins = createPlugins([], {
   components: {},
@@ -10,14 +12,14 @@ const initialValue = [
   {
     id: 1,
     type: 'p',
-    children: [{ text: 'Hello, World!' }],
+    children: [{ text: '' }],
   },
 ];
 
 export function PlateEditor() {
   return (
-    <PlateProvider plugins={plugins} initialValue={initialValue}>
-      <Plate />
-    </PlateProvider>
+    <Plate plugins={plugins} initialValue={initialValue}>
+      <Editor placeholder="Type your message here." />
+    </Plate>
   );
 }
diff --git a/templates/plate-template/src/components/plate-ui/editor.tsx b/templates/plate-template/src/components/plate-ui/editor.tsx
new file mode 100644
index 0000000000..6b0ba6e5c3
--- /dev/null
+++ b/templates/plate-template/src/components/plate-ui/editor.tsx
@@ -0,0 +1,59 @@
+import React from 'react';
+import { PlateContent } from '@udecode/plate-common';
+import { cva } from 'class-variance-authority';
+
+import { cn } from '@/lib/utils';
+
+import type { PlateContentProps } from '@udecode/plate-common';
+import type { VariantProps } from 'class-variance-authority';
+
+const editorVariants = cva(
+  cn(
+    'relative whitespace-pre-wrap break-words',
+    'min-h-[80px] w-full rounded-md bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+    '[&_[data-slate-placeholder]]:text-muted-foreground [&_[data-slate-placeholder]]:!opacity-100',
+    '[&_strong]:font-bold'
+  ),
+  {
+    variants: {
+      variant: {
+        outline: 'border border-input',
+        ghost: '',
+      },
+      focused: {
+        true: 'ring-2 ring-ring ring-offset-2',
+      },
+      disabled: {
+        true: 'cursor-not-allowed opacity-50',
+      },
+    },
+    defaultVariants: {
+      variant: 'outline',
+    },
+  }
+);
+
+export type EditorProps = PlateContentProps &
+  VariantProps<typeof editorVariants>;
+
+const Editor = React.forwardRef<HTMLDivElement, EditorProps>(
+  ({ variant, disabled, focused, readOnly, className, ...props }, ref) => {
+    return (
+      <div ref={ref} className="relative w-full">
+        <PlateContent
+          className={cn(
+            editorVariants({ variant, focused, disabled }),
+            className
+          )}
+          disableDefaultStyles
+          readOnly={disabled ?? readOnly}
+          aria-disabled={disabled}
+          {...props}
+        />
+      </div>
+    );
+  }
+);
+Editor.displayName = 'Editor';
+
+export { Editor };

From 22a325b4bd38efacd843e0ad51b8f2b91f7ae184 Mon Sep 17 00:00:00 2001
From: zbeyens <zbeyens@udecode.io>
Date: Mon, 18 Sep 2023 13:02:11 +0200
Subject: [PATCH 2/3] =?UTF-8?q?=E2=9C=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/www/public/registry/styles/default/editor.json | 12 ++++++++++++
 1 file changed, 12 insertions(+)
 create mode 100644 apps/www/public/registry/styles/default/editor.json

diff --git a/apps/www/public/registry/styles/default/editor.json b/apps/www/public/registry/styles/default/editor.json
new file mode 100644
index 0000000000..31d4464aac
--- /dev/null
+++ b/apps/www/public/registry/styles/default/editor.json
@@ -0,0 +1,12 @@
+{
+  "name": "editor",
+  "dependencies": [],
+  "registryDependencies": [],
+  "files": [
+    {
+      "name": "editor.tsx",
+      "content": "import React from 'react';\nimport { PlateContent } from '@udecode/plate-common';\nimport { cva } from 'class-variance-authority';\n\nimport { cn } from '@/lib/utils';\n\nimport type { PlateContentProps } from '@udecode/plate-common';\nimport type { VariantProps } from 'class-variance-authority';\n\nconst editorVariants = cva(\n  cn(\n    'relative whitespace-pre-wrap break-words',\n    'min-h-[80px] w-full rounded-md bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',\n    '[&_[data-slate-placeholder]]:text-muted-foreground [&_[data-slate-placeholder]]:!opacity-100',\n    '[&_[data-slate-placeholder]]:top-[auto_!important]',\n    '[&_strong]:font-bold'\n  ),\n  {\n    variants: {\n      variant: {\n        outline: 'border border-input',\n        ghost: '',\n      },\n      focused: {\n        true: 'ring-2 ring-ring ring-offset-2',\n      },\n      disabled: {\n        true: 'cursor-not-allowed opacity-50',\n      },\n    },\n    defaultVariants: {\n      variant: 'outline',\n    },\n  }\n);\n\nexport type EditorProps = PlateContentProps &\n  VariantProps<typeof editorVariants>;\n\nconst Editor = React.forwardRef<HTMLDivElement, EditorProps>(\n  ({ variant, disabled, focused, readOnly, className, ...props }, ref) => {\n    return (\n      <div ref={ref} className=\"relative w-full\">\n        <PlateContent\n          className={cn(\n            editorVariants({ variant, focused, disabled }),\n            className\n          )}\n          disableDefaultStyles\n          readOnly={disabled ?? readOnly}\n          aria-disabled={disabled}\n          {...props}\n        />\n      </div>\n    );\n  }\n);\nEditor.displayName = 'Editor';\n\nexport { Editor };\n"
+    }
+  ],
+  "type": "components:plate-ui"
+}
\ No newline at end of file

From 938c8183900e75bfa1ea85f7f97d7795ed4c0ce7 Mon Sep 17 00:00:00 2001
From: zbeyens <zbeyens@udecode.io>
Date: Mon, 18 Sep 2023 14:16:16 +0200
Subject: [PATCH 3/3] =?UTF-8?q?=E2=9C=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../www/content/docs/components/changelog.mdx |   7 +
 .../registry/styles/default/editor.json       |   2 +-
 apps/www/public/registry/themes.css           |   4 +-
 .../default/example/editor-button.tsx         |  17 +-
 .../default/example/editor-default.tsx        |  18 +-
 .../registry/default/example/editor-form.tsx  |  16 +-
 .../registry/default/example/editor-ghost.tsx |  16 +-
 .../registry/default/example/editor-label.tsx |  16 +-
 .../registry/default/example/editor-text.tsx  |  17 +-
 .../default/example/playground-demo.tsx       |   4 +-
 .../src/registry/default/plate-ui/editor.tsx  |  36 +-
 apps/www/src/registry/themes.ts               |   4 +-
 .../plate-playground-template/package.json    |  88 +--
 .../plate-playground-template/pnpm-lock.yaml  | 524 +++++++++---------
 .../src/components/plate-editor.tsx           |  21 +-
 .../src/components/plate-ui/button.tsx        |   2 +
 .../plate-ui/code-block-element.css           |  20 +-
 .../src/components/plate-ui/editor.tsx        |  88 +++
 .../plate-ui/fixed-toolbar-buttons.tsx        |   4 +-
 .../plate-ui/floating-toolbar-buttons.tsx     |   4 +-
 .../plate-ui/mode-dropdown-menu.tsx           |   4 +-
 .../src/components/plate-ui/editor.tsx        |  37 +-
 22 files changed, 595 insertions(+), 354 deletions(-)
 create mode 100644 templates/plate-playground-template/src/components/plate-ui/editor.tsx

diff --git a/apps/www/content/docs/components/changelog.mdx b/apps/www/content/docs/components/changelog.mdx
index 39f279cb50..550c240b08 100644
--- a/apps/www/content/docs/components/changelog.mdx
+++ b/apps/www/content/docs/components/changelog.mdx
@@ -10,6 +10,13 @@ Use the [CLI](https://platejs.org/docs/components/cli) to install the latest ver
 
 ## September 2023 #4
 
+### 18 Sept #4.4
+
+- `editor`: New component 🎉 See [Editor](https://platejs.org/docs/components/editor)
+- `fixed-toolbar-buttons`, `floating-toolbar-buttons`, `mode-dropdown-menu`: 
+  - plate 24: rename `usePlateReadOnly` to `useEditorReadOnly`
+- `code-block-element`: changes in `code-block-element.css`
+
 ### 15 Sept #4.3
 
 - `table-element`
diff --git a/apps/www/public/registry/styles/default/editor.json b/apps/www/public/registry/styles/default/editor.json
index 31d4464aac..6b0409a576 100644
--- a/apps/www/public/registry/styles/default/editor.json
+++ b/apps/www/public/registry/styles/default/editor.json
@@ -5,7 +5,7 @@
   "files": [
     {
       "name": "editor.tsx",
-      "content": "import React from 'react';\nimport { PlateContent } from '@udecode/plate-common';\nimport { cva } from 'class-variance-authority';\n\nimport { cn } from '@/lib/utils';\n\nimport type { PlateContentProps } from '@udecode/plate-common';\nimport type { VariantProps } from 'class-variance-authority';\n\nconst editorVariants = cva(\n  cn(\n    'relative whitespace-pre-wrap break-words',\n    'min-h-[80px] w-full rounded-md bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',\n    '[&_[data-slate-placeholder]]:text-muted-foreground [&_[data-slate-placeholder]]:!opacity-100',\n    '[&_[data-slate-placeholder]]:top-[auto_!important]',\n    '[&_strong]:font-bold'\n  ),\n  {\n    variants: {\n      variant: {\n        outline: 'border border-input',\n        ghost: '',\n      },\n      focused: {\n        true: 'ring-2 ring-ring ring-offset-2',\n      },\n      disabled: {\n        true: 'cursor-not-allowed opacity-50',\n      },\n    },\n    defaultVariants: {\n      variant: 'outline',\n    },\n  }\n);\n\nexport type EditorProps = PlateContentProps &\n  VariantProps<typeof editorVariants>;\n\nconst Editor = React.forwardRef<HTMLDivElement, EditorProps>(\n  ({ variant, disabled, focused, readOnly, className, ...props }, ref) => {\n    return (\n      <div ref={ref} className=\"relative w-full\">\n        <PlateContent\n          className={cn(\n            editorVariants({ variant, focused, disabled }),\n            className\n          )}\n          disableDefaultStyles\n          readOnly={disabled ?? readOnly}\n          aria-disabled={disabled}\n          {...props}\n        />\n      </div>\n    );\n  }\n);\nEditor.displayName = 'Editor';\n\nexport { Editor };\n"
+      "content": "import React from 'react';\nimport { PlateContent } from '@udecode/plate-common';\nimport { cva } from 'class-variance-authority';\n\nimport { cn } from '@/lib/utils';\n\nimport type { PlateContentProps } from '@udecode/plate-common';\nimport type { VariantProps } from 'class-variance-authority';\n\nconst editorVariants = cva(\n  cn(\n    'relative overflow-x-auto whitespace-pre-wrap break-words',\n    'min-h-[80px] w-full rounded-md bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none',\n    '[&_[data-slate-placeholder]]:text-muted-foreground [&_[data-slate-placeholder]]:!opacity-100',\n    '[&_[data-slate-placeholder]]:top-[auto_!important]',\n    '[&_strong]:font-bold'\n  ),\n  {\n    variants: {\n      variant: {\n        outline: 'border border-input',\n        ghost: '',\n      },\n      focused: {\n        true: 'ring-2 ring-ring ring-offset-2',\n      },\n      disabled: {\n        true: 'cursor-not-allowed opacity-50',\n      },\n      focusRing: {\n        true: 'focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',\n        false: '',\n      },\n      size: {\n        sm: 'text-sm',\n        md: 'text-base',\n      },\n    },\n    defaultVariants: {\n      variant: 'outline',\n      focusRing: true,\n      size: 'sm',\n    },\n  }\n);\n\nexport type EditorProps = PlateContentProps &\n  VariantProps<typeof editorVariants>;\n\nconst Editor = React.forwardRef<HTMLDivElement, EditorProps>(\n  (\n    {\n      className,\n      disabled,\n      focused,\n      focusRing,\n      readOnly,\n      size,\n      variant,\n      ...props\n    },\n    ref\n  ) => {\n    return (\n      <div ref={ref} className=\"relative w-full\">\n        <PlateContent\n          className={cn(\n            editorVariants({\n              disabled,\n              focused,\n              focusRing,\n              size,\n              variant,\n            }),\n            className\n          )}\n          disableDefaultStyles\n          readOnly={disabled ?? readOnly}\n          aria-disabled={disabled}\n          {...props}\n        />\n      </div>\n    );\n  }\n);\nEditor.displayName = 'Editor';\n\nexport { Editor };\n"
     }
   ],
   "type": "components:plate-ui"
diff --git a/apps/www/public/registry/themes.css b/apps/www/public/registry/themes.css
index 99d2c2bcf4..d3f75bc426 100644
--- a/apps/www/public/registry/themes.css
+++ b/apps/www/public/registry/themes.css
@@ -91,7 +91,7 @@
     --destructive: 0 84.2% 60.2%;
     --destructive-foreground: 210 40% 98%;
  
-    --ring: 222.2 84% 4.9%;
+    --ring: 215 20.2% 65.1%;
  
     --radius: 0.5rem;
   }
@@ -124,7 +124,7 @@
     --destructive: 0 62.8% 30.6%;
     --destructive-foreground: 210 40% 98%;
  
-    --ring: 212.7 26.8% 83.9;
+    --ring: 217.2 32.6% 17.5%;
   }
 
   .theme-stone {
diff --git a/apps/www/src/registry/default/example/editor-button.tsx b/apps/www/src/registry/default/example/editor-button.tsx
index 78be9c2195..d17b64e789 100644
--- a/apps/www/src/registry/default/example/editor-button.tsx
+++ b/apps/www/src/registry/default/example/editor-button.tsx
@@ -1,15 +1,30 @@
 'use client';
 
-import { Plate } from '@udecode/plate-common';
+import { createPlateUI } from '@/plate/create-plate-ui';
+import { createBasicElementsPlugin } from '@udecode/plate-basic-elements';
+import { createBasicMarksPlugin } from '@udecode/plate-basic-marks';
+import { createPlugins, Plate } from '@udecode/plate-common';
 
 import { Button } from '@/registry/default/plate-ui/button';
 import { Editor } from '@/registry/default/plate-ui/editor';
+import { FloatingToolbar } from '@/registry/default/plate-ui/floating-toolbar';
+import { FloatingToolbarButtons } from '@/registry/default/plate-ui/floating-toolbar-buttons';
 
 export default function EditorButton() {
+  const plugins = createPlugins(
+    [createBasicElementsPlugin(), createBasicMarksPlugin()],
+    { components: createPlateUI() }
+  );
+
   return (
     <div className="mt-[72px] grid w-full gap-2 p-10">
       <Plate>
         <Editor placeholder="Type your message here." />
+
+        <FloatingToolbar>
+          <FloatingToolbarButtons />
+        </FloatingToolbar>
+
         <Button>Send message</Button>
       </Plate>
     </div>
diff --git a/apps/www/src/registry/default/example/editor-default.tsx b/apps/www/src/registry/default/example/editor-default.tsx
index 9e4c92ba7a..5dcdab10f9 100644
--- a/apps/www/src/registry/default/example/editor-default.tsx
+++ b/apps/www/src/registry/default/example/editor-default.tsx
@@ -1,14 +1,28 @@
 'use client';
 
-import { Plate } from '@udecode/plate-common';
+import { createPlateUI } from '@/plate/create-plate-ui';
+import { createBasicElementsPlugin } from '@udecode/plate-basic-elements';
+import { createBasicMarksPlugin } from '@udecode/plate-basic-marks';
+import { createPlugins, Plate } from '@udecode/plate-common';
 
 import { Editor } from '@/registry/default/plate-ui/editor';
+import { FloatingToolbar } from '@/registry/default/plate-ui/floating-toolbar';
+import { FloatingToolbarButtons } from '@/registry/default/plate-ui/floating-toolbar-buttons';
 
 export default function EditorDefault() {
+  const plugins = createPlugins(
+    [createBasicElementsPlugin(), createBasicMarksPlugin()],
+    { components: createPlateUI() }
+  );
+
   return (
     <div className="mt-[72px] p-10">
-      <Plate>
+      <Plate plugins={plugins}>
         <Editor placeholder="Type your message here." />
+
+        <FloatingToolbar>
+          <FloatingToolbarButtons />
+        </FloatingToolbar>
       </Plate>
     </div>
   );
diff --git a/apps/www/src/registry/default/example/editor-form.tsx b/apps/www/src/registry/default/example/editor-form.tsx
index 61eff09d81..bd1aaaec5a 100644
--- a/apps/www/src/registry/default/example/editor-form.tsx
+++ b/apps/www/src/registry/default/example/editor-form.tsx
@@ -1,14 +1,28 @@
 'use client';
 
-import { Plate } from '@udecode/plate-common';
+import { createPlateUI } from '@/plate/create-plate-ui';
+import { createBasicElementsPlugin } from '@udecode/plate-basic-elements';
+import { createBasicMarksPlugin } from '@udecode/plate-basic-marks';
+import { createPlugins, Plate } from '@udecode/plate-common';
 
 import { Editor } from '@/registry/default/plate-ui/editor';
+import { FloatingToolbar } from '@/registry/default/plate-ui/floating-toolbar';
+import { FloatingToolbarButtons } from '@/registry/default/plate-ui/floating-toolbar-buttons';
 
 export default function EditorForm() {
+  const plugins = createPlugins(
+    [createBasicElementsPlugin(), createBasicMarksPlugin()],
+    { components: createPlateUI() }
+  );
+
   return (
     <div className="mt-[72px] p-10">
       <Plate>
         <Editor placeholder="Type your message here." />
+
+        <FloatingToolbar>
+          <FloatingToolbarButtons />
+        </FloatingToolbar>
       </Plate>
     </div>
   );
diff --git a/apps/www/src/registry/default/example/editor-ghost.tsx b/apps/www/src/registry/default/example/editor-ghost.tsx
index e47a5494d9..224003ba24 100644
--- a/apps/www/src/registry/default/example/editor-ghost.tsx
+++ b/apps/www/src/registry/default/example/editor-ghost.tsx
@@ -1,14 +1,28 @@
 'use client';
 
-import { Plate } from '@udecode/plate-common';
+import { createPlateUI } from '@/plate/create-plate-ui';
+import { createBasicElementsPlugin } from '@udecode/plate-basic-elements';
+import { createBasicMarksPlugin } from '@udecode/plate-basic-marks';
+import { createPlugins, Plate } from '@udecode/plate-common';
 
 import { Editor } from '@/registry/default/plate-ui/editor';
+import { FloatingToolbar } from '@/registry/default/plate-ui/floating-toolbar';
+import { FloatingToolbarButtons } from '@/registry/default/plate-ui/floating-toolbar-buttons';
 
 export default function EditorGhost() {
+  const plugins = createPlugins(
+    [createBasicElementsPlugin(), createBasicMarksPlugin()],
+    { components: createPlateUI() }
+  );
+
   return (
     <div className="mt-[72px] p-10">
       <Plate>
         <Editor placeholder="Type your message here." variant="ghost" />
+
+        <FloatingToolbar>
+          <FloatingToolbarButtons />
+        </FloatingToolbar>
       </Plate>
     </div>
   );
diff --git a/apps/www/src/registry/default/example/editor-label.tsx b/apps/www/src/registry/default/example/editor-label.tsx
index 93700a4c2a..957561879e 100644
--- a/apps/www/src/registry/default/example/editor-label.tsx
+++ b/apps/www/src/registry/default/example/editor-label.tsx
@@ -1,16 +1,30 @@
 'use client';
 
-import { Plate } from '@udecode/plate-common';
+import { createPlateUI } from '@/plate/create-plate-ui';
+import { createBasicElementsPlugin } from '@udecode/plate-basic-elements';
+import { createBasicMarksPlugin } from '@udecode/plate-basic-marks';
+import { createPlugins, Plate } from '@udecode/plate-common';
 
 import { Label } from '@/components/ui/label';
 import { Editor } from '@/registry/default/plate-ui/editor';
+import { FloatingToolbar } from '@/registry/default/plate-ui/floating-toolbar';
+import { FloatingToolbarButtons } from '@/registry/default/plate-ui/floating-toolbar-buttons';
 
 export default function EditorLabel() {
+  const plugins = createPlugins(
+    [createBasicElementsPlugin(), createBasicMarksPlugin()],
+    { components: createPlateUI() }
+  );
+
   return (
     <div className="mt-[72px] grid gap-1.5 p-10">
       <Plate id="message">
         <Label htmlFor="message">Your message</Label>
         <Editor placeholder="Type your message here." id="message" />
+
+        <FloatingToolbar>
+          <FloatingToolbarButtons />
+        </FloatingToolbar>
       </Plate>
     </div>
   );
diff --git a/apps/www/src/registry/default/example/editor-text.tsx b/apps/www/src/registry/default/example/editor-text.tsx
index b18035e870..7e3f9773c0 100644
--- a/apps/www/src/registry/default/example/editor-text.tsx
+++ b/apps/www/src/registry/default/example/editor-text.tsx
@@ -1,16 +1,31 @@
 'use client';
 
-import { Plate } from '@udecode/plate-common';
+import { createPlateUI } from '@/plate/create-plate-ui';
+import { createBasicElementsPlugin } from '@udecode/plate-basic-elements';
+import { createBasicMarksPlugin } from '@udecode/plate-basic-marks';
+import { createPlugins, Plate } from '@udecode/plate-common';
 
 import { Label } from '@/components/ui/label';
 import { Editor } from '@/registry/default/plate-ui/editor';
+import { FloatingToolbar } from '@/registry/default/plate-ui/floating-toolbar';
+import { FloatingToolbarButtons } from '@/registry/default/plate-ui/floating-toolbar-buttons';
 
 export default function EditorText() {
+  const plugins = createPlugins(
+    [createBasicElementsPlugin(), createBasicMarksPlugin()],
+    { components: createPlateUI() }
+  );
+
   return (
     <div className="mt-[72px] grid gap-1.5 p-10">
       <Plate>
         <Label htmlFor="message-2">Your Message</Label>
         <Editor placeholder="Type your message here." id="message-2" />
+
+        <FloatingToolbar>
+          <FloatingToolbarButtons />
+        </FloatingToolbar>
+
         <p className="text-sm text-muted-foreground">
           Your message will be copied to the support team.
         </p>
diff --git a/apps/www/src/registry/default/example/playground-demo.tsx b/apps/www/src/registry/default/example/playground-demo.tsx
index 8a4de2a9dc..cf037a5bee 100644
--- a/apps/www/src/registry/default/example/playground-demo.tsx
+++ b/apps/www/src/registry/default/example/playground-demo.tsx
@@ -325,9 +325,11 @@ export default function PlaygroundDemo({ id }: { id?: ValueId }) {
                   {...editableProps}
                   placeholder=""
                   variant="ghost"
+                  size="md"
+                  focusRing={false}
                   className={cn(
                     editableProps.className,
-                    'px-8 text-base',
+                    'px-8',
                     !id && 'min-h-[920px] pb-[20vh] pt-4 md:px-[96px]',
                     id && 'pb-8 pt-2'
                   )}
diff --git a/apps/www/src/registry/default/plate-ui/editor.tsx b/apps/www/src/registry/default/plate-ui/editor.tsx
index 6c0aac09e7..f3e6197307 100644
--- a/apps/www/src/registry/default/plate-ui/editor.tsx
+++ b/apps/www/src/registry/default/plate-ui/editor.tsx
@@ -9,8 +9,8 @@ import type { VariantProps } from 'class-variance-authority';
 
 const editorVariants = cva(
   cn(
-    'relative whitespace-pre-wrap break-words',
-    'min-h-[80px] w-full rounded-md bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+    'relative overflow-x-auto whitespace-pre-wrap break-words',
+    'min-h-[80px] w-full rounded-md bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none',
     '[&_[data-slate-placeholder]]:text-muted-foreground [&_[data-slate-placeholder]]:!opacity-100',
     '[&_[data-slate-placeholder]]:top-[auto_!important]',
     '[&_strong]:font-bold'
@@ -27,9 +27,19 @@ const editorVariants = cva(
       disabled: {
         true: 'cursor-not-allowed opacity-50',
       },
+      focusRing: {
+        true: 'focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+        false: '',
+      },
+      size: {
+        sm: 'text-sm',
+        md: 'text-base',
+      },
     },
     defaultVariants: {
       variant: 'outline',
+      focusRing: true,
+      size: 'sm',
     },
   }
 );
@@ -38,12 +48,30 @@ export type EditorProps = PlateContentProps &
   VariantProps<typeof editorVariants>;
 
 const Editor = React.forwardRef<HTMLDivElement, EditorProps>(
-  ({ variant, disabled, focused, readOnly, className, ...props }, ref) => {
+  (
+    {
+      className,
+      disabled,
+      focused,
+      focusRing,
+      readOnly,
+      size,
+      variant,
+      ...props
+    },
+    ref
+  ) => {
     return (
       <div ref={ref} className="relative w-full">
         <PlateContent
           className={cn(
-            editorVariants({ variant, focused, disabled }),
+            editorVariants({
+              disabled,
+              focused,
+              focusRing,
+              size,
+              variant,
+            }),
             className
           )}
           disableDefaultStyles
diff --git a/apps/www/src/registry/themes.ts b/apps/www/src/registry/themes.ts
index 3a1d92654b..6704ae4496 100644
--- a/apps/www/src/registry/themes.ts
+++ b/apps/www/src/registry/themes.ts
@@ -79,7 +79,7 @@ export const themes = [
         'destructive-foreground': '210 40% 98%',
         border: '214.3 31.8% 91.4%',
         input: '214.3 31.8% 91.4%',
-        ring: '222.2 84% 4.9%',
+        ring: '215 20.2% 65.1%',
         radius: '0.5rem',
       },
       dark: {
@@ -101,7 +101,7 @@ export const themes = [
         'destructive-foreground': '210 40% 98%',
         border: '217.2 32.6% 17.5%',
         input: '217.2 32.6% 17.5%',
-        ring: '212.7 26.8% 83.9',
+        ring: '217.2 32.6% 17.5%',
       },
     },
   },
diff --git a/templates/plate-playground-template/package.json b/templates/plate-playground-template/package.json
index 84c4e2acf4..46bb6b5f9a 100644
--- a/templates/plate-playground-template/package.json
+++ b/templates/plate-playground-template/package.json
@@ -23,54 +23,54 @@
     "@radix-ui/react-toggle": "^1.0.3",
     "@radix-ui/react-toolbar": "^1.0.4",
     "@radix-ui/react-tooltip": "^1.0.6",
-    "@udecode/plate-alignment": "^23.7.4",
-    "@udecode/plate-autoformat": "^23.7.4",
-    "@udecode/plate-basic-marks": "^23.7.4",
-    "@udecode/plate-block-quote": "^23.7.4",
-    "@udecode/plate-break": "^23.7.4",
-    "@udecode/plate-caption": "^23.7.4",
-    "@udecode/plate-code-block": "^23.7.4",
-    "@udecode/plate-combobox": "^23.7.4",
-    "@udecode/plate-comments": "^23.7.4",
-    "@udecode/plate-common": "^23.7.4",
-    "@udecode/plate-cursor": "^23.7.4",
-    "@udecode/plate-dnd": "^23.7.4",
-    "@udecode/plate-emoji": "^23.7.4",
-    "@udecode/plate-excalidraw": "^23.7.4",
-    "@udecode/plate-floating": "^23.7.4",
-    "@udecode/plate-font": "^23.7.4",
-    "@udecode/plate-heading": "^23.7.4",
-    "@udecode/plate-highlight": "^23.7.4",
-    "@udecode/plate-horizontal-rule": "^23.7.4",
-    "@udecode/plate-indent": "^23.7.4",
-    "@udecode/plate-indent-list": "^23.7.4",
-    "@udecode/plate-juice": "^23.7.4",
-    "@udecode/plate-kbd": "^23.7.4",
-    "@udecode/plate-line-height": "^23.7.4",
-    "@udecode/plate-link": "^23.7.4",
-    "@udecode/plate-list": "^23.7.4",
-    "@udecode/plate-media": "^23.7.4",
-    "@udecode/plate-mention": "^23.7.4",
-    "@udecode/plate-node-id": "^23.7.4",
-    "@udecode/plate-normalizers": "^23.7.4",
-    "@udecode/plate-paragraph": "^23.7.4",
-    "@udecode/plate-reset-node": "^23.7.4",
-    "@udecode/plate-resizable": "^23.7.4",
-    "@udecode/plate-select": "^23.7.4",
-    "@udecode/plate-selection": "^23.7.4",
-    "@udecode/plate-serializer-csv": "^23.7.4",
-    "@udecode/plate-serializer-docx": "^23.7.4",
-    "@udecode/plate-serializer-html": "^23.7.4",
-    "@udecode/plate-serializer-md": "^23.7.4",
-    "@udecode/plate-tabbable": "^23.7.4",
-    "@udecode/plate-table": "^23.7.4",
-    "@udecode/plate-trailing-block": "^23.7.4",
+    "@udecode/plate-alignment": "^24.0.0",
+    "@udecode/plate-autoformat": "^24.0.0",
+    "@udecode/plate-basic-marks": "^24.0.0",
+    "@udecode/plate-block-quote": "^24.0.0",
+    "@udecode/plate-break": "^24.0.0",
+    "@udecode/plate-caption": "^24.0.0",
+    "@udecode/plate-code-block": "^24.0.0",
+    "@udecode/plate-combobox": "^24.0.0",
+    "@udecode/plate-comments": "^24.0.0",
+    "@udecode/plate-common": "^24.0.0",
+    "@udecode/plate-cursor": "^24.0.0",
+    "@udecode/plate-dnd": "^24.0.0",
+    "@udecode/plate-emoji": "^24.0.0",
+    "@udecode/plate-excalidraw": "^24.0.0",
+    "@udecode/plate-floating": "^24.0.0",
+    "@udecode/plate-font": "^24.0.0",
+    "@udecode/plate-heading": "^24.0.0",
+    "@udecode/plate-highlight": "^24.0.0",
+    "@udecode/plate-horizontal-rule": "^24.0.0",
+    "@udecode/plate-indent": "^24.0.0",
+    "@udecode/plate-indent-list": "^24.0.0",
+    "@udecode/plate-juice": "^24.0.0",
+    "@udecode/plate-kbd": "^24.0.0",
+    "@udecode/plate-line-height": "^24.0.0",
+    "@udecode/plate-link": "^24.0.0",
+    "@udecode/plate-list": "^24.0.0",
+    "@udecode/plate-media": "^24.0.0",
+    "@udecode/plate-mention": "^24.0.0",
+    "@udecode/plate-node-id": "^24.0.0",
+    "@udecode/plate-normalizers": "^24.0.0",
+    "@udecode/plate-paragraph": "^24.0.0",
+    "@udecode/plate-reset-node": "^24.0.0",
+    "@udecode/plate-resizable": "^24.0.0",
+    "@udecode/plate-select": "^24.0.0",
+    "@udecode/plate-selection": "^24.0.0",
+    "@udecode/plate-serializer-csv": "^24.0.0",
+    "@udecode/plate-serializer-docx": "^24.0.0",
+    "@udecode/plate-serializer-html": "^24.0.0",
+    "@udecode/plate-serializer-md": "^24.0.0",
+    "@udecode/plate-tabbable": "^24.0.0",
+    "@udecode/plate-table": "^24.0.0",
+    "@udecode/plate-trailing-block": "^24.0.0",
     "class-variance-authority": "0.7.0",
     "clsx": "2.0.0",
     "cmdk": "0.2.0",
     "date-fns": "^2.30.0",
     "eslint-plugin-prettier": "^5.0.0",
-    "lucide-react": "0.277.0",
+    "lucide-react": "0.279.0",
     "next": "^13.4.19",
     "next-themes": "^0.2.1",
     "react": "^18.2.0",
@@ -87,7 +87,7 @@
   },
   "devDependencies": {
     "@ianvs/prettier-plugin-sort-imports": "^4.1.0",
-    "@types/node": "^20.6.1",
+    "@types/node": "^20.6.2",
     "@types/react": "^18.2.21",
     "@types/react-dom": "^18.2.7",
     "@typescript-eslint/parser": "^6.7.0",
diff --git a/templates/plate-playground-template/pnpm-lock.yaml b/templates/plate-playground-template/pnpm-lock.yaml
index 83bb4145bc..e2fe35aa7b 100644
--- a/templates/plate-playground-template/pnpm-lock.yaml
+++ b/templates/plate-playground-template/pnpm-lock.yaml
@@ -1,9 +1,5 @@
 lockfileVersion: '6.0'
 
-settings:
-  autoInstallPeers: true
-  excludeLinksFromLockfile: false
-
 patchedDependencies:
   react-dnd@15.1.2:
     hash: nvkuskfagl3tfokj6l2yreas2e
@@ -44,131 +40,131 @@ dependencies:
     specifier: ^1.0.6
     version: 1.0.6(@types/react-dom@18.2.7)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)
   '@udecode/plate-alignment':
-    specifier: ^23.7.4
-    version: 23.7.4(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
+    specifier: ^24.0.0
+    version: 24.0.0(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
   '@udecode/plate-autoformat':
-    specifier: ^23.7.4
-    version: 23.7.4(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
+    specifier: ^24.0.0
+    version: 24.0.0(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
   '@udecode/plate-basic-marks':
-    specifier: ^23.7.4
-    version: 23.7.4(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
+    specifier: ^24.0.0
+    version: 24.0.0(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
   '@udecode/plate-block-quote':
-    specifier: ^23.7.4
-    version: 23.7.4(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
+    specifier: ^24.0.0
+    version: 24.0.0(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
   '@udecode/plate-break':
-    specifier: ^23.7.4
-    version: 23.7.4(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
+    specifier: ^24.0.0
+    version: 24.0.0(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
   '@udecode/plate-caption':
-    specifier: ^23.7.4
-    version: 23.7.4(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
+    specifier: ^24.0.0
+    version: 24.0.0(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
   '@udecode/plate-code-block':
-    specifier: ^23.7.4
-    version: 23.7.4(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
+    specifier: ^24.0.0
+    version: 24.0.0(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
   '@udecode/plate-combobox':
-    specifier: ^23.7.4
-    version: 23.7.4(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
+    specifier: ^24.0.0
+    version: 24.0.0(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
   '@udecode/plate-comments':
-    specifier: ^23.7.4
-    version: 23.7.4(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
+    specifier: ^24.0.0
+    version: 24.0.0(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
   '@udecode/plate-common':
-    specifier: ^23.7.4
-    version: 23.7.4(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
+    specifier: ^24.0.0
+    version: 24.0.0(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
   '@udecode/plate-cursor':
-    specifier: ^23.7.4
-    version: 23.7.4(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
+    specifier: ^24.0.0
+    version: 24.0.0(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
   '@udecode/plate-dnd':
-    specifier: ^23.7.4
-    version: 23.7.4(@babel/core@7.22.17)(@types/react@18.2.21)(react-dnd-html5-backend@15.1.3)(react-dnd@15.1.2)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
+    specifier: ^24.0.0
+    version: 24.0.0(@babel/core@7.22.17)(@types/react@18.2.21)(react-dnd-html5-backend@15.1.3)(react-dnd@15.1.2)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
   '@udecode/plate-emoji':
-    specifier: ^23.7.4
-    version: 23.7.4(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
+    specifier: ^24.0.0
+    version: 24.0.0(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
   '@udecode/plate-excalidraw':
-    specifier: ^23.7.4
-    version: 23.7.4(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
+    specifier: ^24.0.0
+    version: 24.0.0(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
   '@udecode/plate-floating':
-    specifier: ^23.7.4
-    version: 23.7.4(@babel/core@7.22.17)(@types/react-dom@18.2.7)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
+    specifier: ^24.0.0
+    version: 24.0.0(@babel/core@7.22.17)(@types/react-dom@18.2.7)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
   '@udecode/plate-font':
-    specifier: ^23.7.4
-    version: 23.7.4(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
+    specifier: ^24.0.0
+    version: 24.0.0(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
   '@udecode/plate-heading':
-    specifier: ^23.7.4
-    version: 23.7.4(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
+    specifier: ^24.0.0
+    version: 24.0.0(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
   '@udecode/plate-highlight':
-    specifier: ^23.7.4
-    version: 23.7.4(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
+    specifier: ^24.0.0
+    version: 24.0.0(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
   '@udecode/plate-horizontal-rule':
-    specifier: ^23.7.4
-    version: 23.7.4(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
+    specifier: ^24.0.0
+    version: 24.0.0(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
   '@udecode/plate-indent':
-    specifier: ^23.7.4
-    version: 23.7.4(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
+    specifier: ^24.0.0
+    version: 24.0.0(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
   '@udecode/plate-indent-list':
-    specifier: ^23.7.4
-    version: 23.7.4(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
+    specifier: ^24.0.0
+    version: 24.0.0(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
   '@udecode/plate-juice':
-    specifier: ^23.7.4
-    version: 23.7.4(@babel/core@7.22.17)(@types/react@18.2.21)(encoding@0.1.13)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
+    specifier: ^24.0.0
+    version: 24.0.0(@babel/core@7.22.17)(@types/react@18.2.21)(encoding@0.1.13)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
   '@udecode/plate-kbd':
-    specifier: ^23.7.4
-    version: 23.7.4(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
+    specifier: ^24.0.0
+    version: 24.0.0(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
   '@udecode/plate-line-height':
-    specifier: ^23.7.4
-    version: 23.7.4(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
+    specifier: ^24.0.0
+    version: 24.0.0(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
   '@udecode/plate-link':
-    specifier: ^23.7.4
-    version: 23.7.4(@babel/core@7.22.17)(@types/react-dom@18.2.7)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
+    specifier: ^24.0.0
+    version: 24.0.0(@babel/core@7.22.17)(@types/react-dom@18.2.7)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
   '@udecode/plate-list':
-    specifier: ^23.7.4
-    version: 23.7.4(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
+    specifier: ^24.0.0
+    version: 24.0.0(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
   '@udecode/plate-media':
-    specifier: ^23.7.4
-    version: 23.7.4(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
+    specifier: ^24.0.0
+    version: 24.0.0(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
   '@udecode/plate-mention':
-    specifier: ^23.7.4
-    version: 23.7.4(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
+    specifier: ^24.0.0
+    version: 24.0.0(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
   '@udecode/plate-node-id':
-    specifier: ^23.7.4
-    version: 23.7.4(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
+    specifier: ^24.0.0
+    version: 24.0.0(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
   '@udecode/plate-normalizers':
-    specifier: ^23.7.4
-    version: 23.7.4(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
+    specifier: ^24.0.0
+    version: 24.0.0(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
   '@udecode/plate-paragraph':
-    specifier: ^23.7.4
-    version: 23.7.4(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
+    specifier: ^24.0.0
+    version: 24.0.0(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
   '@udecode/plate-reset-node':
-    specifier: ^23.7.4
-    version: 23.7.4(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
+    specifier: ^24.0.0
+    version: 24.0.0(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
   '@udecode/plate-resizable':
-    specifier: ^23.7.4
-    version: 23.7.4(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
+    specifier: ^24.0.0
+    version: 24.0.0(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
   '@udecode/plate-select':
-    specifier: ^23.7.4
-    version: 23.7.4(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
+    specifier: ^24.0.0
+    version: 24.0.0(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
   '@udecode/plate-selection':
-    specifier: ^23.7.4
-    version: 23.7.4(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
+    specifier: ^24.0.0
+    version: 24.0.0(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
   '@udecode/plate-serializer-csv':
-    specifier: ^23.7.4
-    version: 23.7.4(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-hyperscript@0.77.0)(slate-react@0.98.3)(slate@0.94.1)
+    specifier: ^24.0.0
+    version: 24.0.0(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-hyperscript@0.77.0)(slate-react@0.98.3)(slate@0.94.1)
   '@udecode/plate-serializer-docx':
-    specifier: ^23.7.4
-    version: 23.7.4(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-hyperscript@0.77.0)(slate-react@0.98.3)(slate@0.94.1)
+    specifier: ^24.0.0
+    version: 24.0.0(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-hyperscript@0.77.0)(slate-react@0.98.3)(slate@0.94.1)
   '@udecode/plate-serializer-html':
-    specifier: ^23.7.4
-    version: 23.7.4(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-hyperscript@0.77.0)(slate-react@0.98.3)(slate@0.94.1)
+    specifier: ^24.0.0
+    version: 24.0.0(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-hyperscript@0.77.0)(slate-react@0.98.3)(slate@0.94.1)
   '@udecode/plate-serializer-md':
-    specifier: ^23.7.4
-    version: 23.7.4(@babel/core@7.22.17)(@types/react-dom@18.2.7)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
+    specifier: ^24.0.0
+    version: 24.0.0(@babel/core@7.22.17)(@types/react-dom@18.2.7)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
   '@udecode/plate-tabbable':
-    specifier: ^23.7.4
-    version: 23.7.4(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
+    specifier: ^24.0.0
+    version: 24.0.0(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
   '@udecode/plate-table':
-    specifier: ^23.7.4
-    version: 23.7.4(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
+    specifier: ^24.0.0
+    version: 24.0.0(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
   '@udecode/plate-trailing-block':
-    specifier: ^23.7.4
-    version: 23.7.4(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
+    specifier: ^24.0.0
+    version: 24.0.0(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
   class-variance-authority:
     specifier: 0.7.0
     version: 0.7.0
@@ -185,8 +181,8 @@ dependencies:
     specifier: ^5.0.0
     version: 5.0.0(eslint-config-prettier@9.0.0)(eslint@8.49.0)(prettier@3.0.3)
   lucide-react:
-    specifier: 0.277.0
-    version: 0.277.0(react@18.2.0)
+    specifier: 0.279.0
+    version: 0.279.0(react@18.2.0)
   next:
     specifier: ^13.4.19
     version: 13.4.19(@babel/core@7.22.17)(react-dom@18.2.0)(react@18.2.0)
@@ -198,7 +194,7 @@ dependencies:
     version: 18.2.0
   react-dnd:
     specifier: ^15.1.2
-    version: 15.1.2(patch_hash=nvkuskfagl3tfokj6l2yreas2e)(@types/node@20.6.1)(@types/react@18.2.21)(react@18.2.0)
+    version: 15.1.2(patch_hash=nvkuskfagl3tfokj6l2yreas2e)(@types/node@20.6.2)(@types/react@18.2.21)(react@18.2.0)
   react-dnd-html5-backend:
     specifier: ^15.1.3
     version: 15.1.3
@@ -232,8 +228,8 @@ devDependencies:
     specifier: ^4.1.0
     version: 4.1.0(prettier@3.0.3)
   '@types/node':
-    specifier: ^20.6.1
-    version: 20.6.1
+    specifier: ^20.6.2
+    version: 20.6.2
   '@types/react':
     specifier: ^18.2.21
     version: 18.2.21
@@ -1780,8 +1776,8 @@ packages:
       '@types/unist': 2.0.8
     dev: false
 
-  /@types/node@20.6.1:
-    resolution: {integrity: sha512-4LcJvuXQlv4lTHnxwyHQZ3uR9Zw2j7m1C9DfuwoTFQQP4Pmu04O6IfLYgMmHoOCt0nosItLLZAH+sOrRE0Bo8g==}
+  /@types/node@20.6.2:
+    resolution: {integrity: sha512-Y+/1vGBHV/cYk6OI1Na/LHzwnlNCAfU3ZNGrc1LdRe/LAIbdDPTTv/HU3M7yXN448aTVDq3eKRm2cg7iKLb8gw==}
 
   /@types/prop-types@15.7.5:
     resolution: {integrity: sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==}
@@ -1868,8 +1864,8 @@ packages:
       eslint-visitor-keys: 3.4.3
     dev: true
 
-  /@udecode/plate-alignment@23.7.4(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1):
-    resolution: {integrity: sha512-66VApmBZr+ByxalWyRlJWc0y8WbLbJHiePyNdC/bcwKKJPfYrRYR0UoQzow3gSxZpPS6GK2gLg3rhWNxwE8GfQ==}
+  /@udecode/plate-alignment@24.0.0(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1):
+    resolution: {integrity: sha512-CwAexPfP4yDsKHc2tCM79oboM09sFzd2rdGmixuDd9UxNScrQu3S71y5zzynao0ok+eOJAivNYtFDNq/eUYTmA==}
     peerDependencies:
       react: '>=16.8.0'
       react-dom: '>=16.8.0'
@@ -1877,7 +1873,7 @@ packages:
       slate-history: '>=0.93.0'
       slate-react: '>=0.95.0'
     dependencies:
-      '@udecode/plate-common': 23.7.4(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
+      '@udecode/plate-common': 24.0.0(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
       slate: 0.94.1
@@ -1898,8 +1894,8 @@ packages:
       - xstate
     dev: false
 
-  /@udecode/plate-autoformat@23.7.4(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1):
-    resolution: {integrity: sha512-1yFRtUAj1eEr+cPTU7XBvXmkZr/0MZV5sqmF+IpP4ChznCGNdSY3ubUEH0ihQ2lCJxNoSoYXki7I1d/q03J5YA==}
+  /@udecode/plate-autoformat@24.0.0(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1):
+    resolution: {integrity: sha512-qkG/SZ2ov51pZA32xE7kSF+NA4j4WItT6Fn00YANJMuWiOiCOMlku4LQgjcTjG2EgJg1Mn+2Noru3TdofyuIHg==}
     peerDependencies:
       react: '>=16.8.0'
       react-dom: '>=16.8.0'
@@ -1907,7 +1903,7 @@ packages:
       slate-history: '>=0.93.0'
       slate-react: '>=0.95.0'
     dependencies:
-      '@udecode/plate-common': 23.7.4(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
+      '@udecode/plate-common': 24.0.0(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
       slate: 0.94.1
@@ -1928,8 +1924,8 @@ packages:
       - xstate
     dev: false
 
-  /@udecode/plate-basic-marks@23.7.4(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1):
-    resolution: {integrity: sha512-twjGfOgtrFOcyozlYGgWjpomD6vZmgcZjYZR22pEQVd/YaTEoT5rh9rj/EmuhIgoZq7bZjAyk147PmHyI3TTSQ==}
+  /@udecode/plate-basic-marks@24.0.0(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1):
+    resolution: {integrity: sha512-liPm8haw0uUolt0cyPN7zEV8nDPvcacA6ve4pdEH8hFM5Yaw/LeJOYLHUNdue49Q5tbr8urhCInkCIFpJX0S5Q==}
     peerDependencies:
       react: '>=16.8.0'
       react-dom: '>=16.8.0'
@@ -1937,7 +1933,7 @@ packages:
       slate-history: '>=0.93.0'
       slate-react: '>=0.95.0'
     dependencies:
-      '@udecode/plate-common': 23.7.4(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
+      '@udecode/plate-common': 24.0.0(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
       slate: 0.94.1
@@ -1958,8 +1954,8 @@ packages:
       - xstate
     dev: false
 
-  /@udecode/plate-block-quote@23.7.4(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1):
-    resolution: {integrity: sha512-Z18I+NDtr4Yl+FH+T/9m3DwIKXdRHvghnPo019WtPRGxTI+rI4C5SZTRZdJps2tSocJWSt0sJpp/2DEPHSSODA==}
+  /@udecode/plate-block-quote@24.0.0(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1):
+    resolution: {integrity: sha512-E56i4pd+6TZf5Z9VJ/m5rPMLuOtuOvaqM0rlU85xT9nKxl1JT2MknLzPvrtrb466ui380+kx4/1eMg2dveG1rA==}
     peerDependencies:
       react: '>=16.8.0'
       react-dom: '>=16.8.0'
@@ -1967,7 +1963,7 @@ packages:
       slate-history: '>=0.93.0'
       slate-react: '>=0.95.0'
     dependencies:
-      '@udecode/plate-common': 23.7.4(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
+      '@udecode/plate-common': 24.0.0(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
       slate: 0.94.1
@@ -1988,8 +1984,8 @@ packages:
       - xstate
     dev: false
 
-  /@udecode/plate-break@23.7.4(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1):
-    resolution: {integrity: sha512-EAOF5DjB6Eu88pvajlX8zUIG19QgifQts9sOl/XACt4qQc0bRiUhY5+1zNg9wbo92+fyYSViuT913JxFdLA6NA==}
+  /@udecode/plate-break@24.0.0(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1):
+    resolution: {integrity: sha512-yntSfQXrlwj9Ipj+/sNDNobKJblQbx94GcMbEzh1Ee68u9G1AoG9d3FB/S54kXClEQhXxS709JOzIYv/qh97HQ==}
     peerDependencies:
       react: '>=16.8.0'
       react-dom: '>=16.8.0'
@@ -1997,7 +1993,7 @@ packages:
       slate-history: '>=0.93.0'
       slate-react: '>=0.95.0'
     dependencies:
-      '@udecode/plate-common': 23.7.4(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
+      '@udecode/plate-common': 24.0.0(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
       slate: 0.94.1
@@ -2018,8 +2014,8 @@ packages:
       - xstate
     dev: false
 
-  /@udecode/plate-caption@23.7.4(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1):
-    resolution: {integrity: sha512-00zbd3q5ocgSiFfKql9vMxzylqVtxKWfx5eNdiCPvhdnVBncV6KHcWuSi6tBcig5HY+GUBj1DKyJGLapWj3Qog==}
+  /@udecode/plate-caption@24.0.0(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1):
+    resolution: {integrity: sha512-ucc0HqH3zTt+b6NVq7E0H7CaW8brBojpsf39PGxS8xAA8huECK4Spsqt8NdifTFl7SSLEjzyGYSuYsTMbMVwpA==}
     peerDependencies:
       react: '>=16.8.0'
       react-dom: '>=16.8.0'
@@ -2027,7 +2023,7 @@ packages:
       slate-history: '>=0.93.0'
       slate-react: '>=0.95.0'
     dependencies:
-      '@udecode/plate-common': 23.7.4(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
+      '@udecode/plate-common': 24.0.0(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
       react-textarea-autosize: 8.5.3(@types/react@18.2.21)(react@18.2.0)
@@ -2049,8 +2045,8 @@ packages:
       - xstate
     dev: false
 
-  /@udecode/plate-code-block@23.7.4(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1):
-    resolution: {integrity: sha512-yn6eRx1DeyK41SVSM4uMYxNeDfOmNQQYhd9RNBZ5qrfoKDi997fcjTweI34A8rcIjzX3NXKy3o+R5bMQ6FnNcg==}
+  /@udecode/plate-code-block@24.0.0(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1):
+    resolution: {integrity: sha512-zUp6rHZh1Lp5AIiuMDkGkkc/ctgOHp0KKJohAGyxUKG+nmQOvyCZ1RpH0jpVWs6te4TVypNNzJ/e5/Mt8Z87Jw==}
     peerDependencies:
       react: '>=16.8.0'
       react-dom: '>=16.8.0'
@@ -2058,7 +2054,7 @@ packages:
       slate-history: '>=0.93.0'
       slate-react: '>=0.95.0'
     dependencies:
-      '@udecode/plate-common': 23.7.4(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
+      '@udecode/plate-common': 24.0.0(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
       prismjs: 1.29.0
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
@@ -2080,8 +2076,8 @@ packages:
       - xstate
     dev: false
 
-  /@udecode/plate-combobox@23.7.4(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1):
-    resolution: {integrity: sha512-ejUR2Y4Bj4aZsXazeNBTk+s4dHzt1/RVcbE5b2uLdtClpBqnYrmW3KnrBEHKJpmMk37eUFgYXGwmsDcMqrmmpg==}
+  /@udecode/plate-combobox@24.0.0(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1):
+    resolution: {integrity: sha512-Yk0xBb5gl+mh6VWAfAXS3RHDLxpF27qcZGIU9IBhWqGMU3+ouEo0BNX94xH+rrkx80/+vzDZSoPnfKWN+H+lVw==}
     peerDependencies:
       react: '>=16.8.0'
       react-dom: '>=16.8.0'
@@ -2089,7 +2085,7 @@ packages:
       slate-history: '>=0.93.0'
       slate-react: '>=0.95.0'
     dependencies:
-      '@udecode/plate-common': 23.7.4(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
+      '@udecode/plate-common': 24.0.0(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
       downshift: 6.1.12(react@18.2.0)
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
@@ -2111,8 +2107,8 @@ packages:
       - xstate
     dev: false
 
-  /@udecode/plate-comments@23.7.4(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1):
-    resolution: {integrity: sha512-BoEo98pfX4FLPKzynWnyrzzU6npOkvuMPXQ90arZO+3l1hDkTU1kx7w3kXxJrPxwFb4E8f13nqs61WDrbvj01g==}
+  /@udecode/plate-comments@24.0.0(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1):
+    resolution: {integrity: sha512-N6EaugY+zu0+VWLy+3Rivghk6frPV3zoNaVY31g0Avl7I86liKiClHD+E7K0Cugh7zlZYdWDJtV4bkc1UGZmkA==}
     peerDependencies:
       react: '>=16.8.0'
       react-dom: '>=16.8.0'
@@ -2120,7 +2116,7 @@ packages:
       slate-history: '>=0.93.0'
       slate-react: '>=0.95.0'
     dependencies:
-      '@udecode/plate-common': 23.7.4(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
+      '@udecode/plate-common': 24.0.0(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
       slate: 0.94.1
@@ -2141,8 +2137,8 @@ packages:
       - xstate
     dev: false
 
-  /@udecode/plate-common@23.7.4(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1):
-    resolution: {integrity: sha512-/pNpnfrVTKxTv1hJwlxgyNfhCDJuHtil7sVYADdIJsd53iq9XY26X4xa5cbC+dmFyyqNBC3r7YWFDMiww0U2Kg==}
+  /@udecode/plate-common@24.0.0(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1):
+    resolution: {integrity: sha512-5TrJUM2uQfBUZwEDrJBVVPjy5D+Gwdi1UIjHCZixDq8lXV96xtrdaXRDLwJ57VxECdEBJ98wrCB/0czD2uvYBA==}
     peerDependencies:
       react: '>=16.8.0'
       react-dom: '>=16.8.0'
@@ -2150,11 +2146,11 @@ packages:
       slate-history: '>=0.93.0'
       slate-react: '>=0.95.0'
     dependencies:
-      '@udecode/plate-core': 23.7.4(@babel/core@7.22.17)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
-      '@udecode/plate-utils': 23.7.4(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
+      '@udecode/plate-core': 24.0.0(@babel/core@7.22.17)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
+      '@udecode/plate-utils': 24.0.0(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
       '@udecode/slate': 23.7.4(slate-history@0.93.0)(slate@0.94.1)
-      '@udecode/slate-react': 23.7.4(react-dom@18.2.0)(react@18.2.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
-      '@udecode/slate-utils': 23.7.4(slate-history@0.93.0)(slate@0.94.1)
+      '@udecode/slate-react': 24.0.0(react-dom@18.2.0)(react@18.2.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
+      '@udecode/slate-utils': 24.0.0(slate-history@0.93.0)(slate@0.94.1)
       '@udecode/utils': 19.7.1
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
@@ -2176,8 +2172,8 @@ packages:
       - xstate
     dev: false
 
-  /@udecode/plate-core@23.7.4(@babel/core@7.22.17)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1):
-    resolution: {integrity: sha512-W3/z6d5XkuFfRx3ckPNIfKlYkr5KDLnH8gRJD8TJJM6QMs70jauR8R4m28OAy0LplMARnTdtWjvSv+rqZxJpFg==}
+  /@udecode/plate-core@24.0.0(@babel/core@7.22.17)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1):
+    resolution: {integrity: sha512-iHGpnIAkbwMGeD4Ficbf+M5m+q3O5uhzrimQKvbjvZj2bW3MAoPDnuvhrnlaTqAIwxzyhk4tWT9a8294L/gWPg==}
     peerDependencies:
       react: '>=16.8.0'
       react-dom: '>=16.8.0'
@@ -2186,7 +2182,7 @@ packages:
       slate-react: '>=0.95.0'
     dependencies:
       '@udecode/slate': 23.7.4(slate-history@0.93.0)(slate@0.94.1)
-      '@udecode/slate-react': 23.7.4(react-dom@18.2.0)(react@18.2.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
+      '@udecode/slate-react': 24.0.0(react-dom@18.2.0)(react@18.2.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
       '@udecode/utils': 19.7.1
       '@udecode/zustood': 1.1.3(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(zustand@3.7.2)
       clsx: 1.2.1
@@ -2215,8 +2211,8 @@ packages:
       - xstate
     dev: false
 
-  /@udecode/plate-cursor@23.7.4(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1):
-    resolution: {integrity: sha512-KII8TgLGEccH0uY+uZp0MiBnflOk2HNE7lL0pIgmt/g9iLdmARzEox8+NM1gPcf9X9wj0CKyXZSYjSRosKwZsw==}
+  /@udecode/plate-cursor@24.0.0(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1):
+    resolution: {integrity: sha512-ouC+jRr1Bi9aFvrnxWfgkQFPA/rATCWxDnSOy+hA9CWzv9iYDPYbSHjOKyHnozq2JBVLFt4i01PLtjwZrf++BQ==}
     peerDependencies:
       react: '>=16.8.0'
       react-dom: '>=16.8.0'
@@ -2224,7 +2220,7 @@ packages:
       slate-history: '>=0.93.0'
       slate-react: '>=0.95.0'
     dependencies:
-      '@udecode/plate-common': 23.7.4(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
+      '@udecode/plate-common': 24.0.0(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
       slate: 0.94.1
@@ -2245,8 +2241,8 @@ packages:
       - xstate
     dev: false
 
-  /@udecode/plate-dnd@23.7.4(@babel/core@7.22.17)(@types/react@18.2.21)(react-dnd-html5-backend@15.1.3)(react-dnd@15.1.2)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1):
-    resolution: {integrity: sha512-h1mJ3SUp5c3OjuxKZpOVT1KCc6ImVToofEcEoVj7mYktiekmvExDuWoDDdxf4jT/GfAvaZ0keNZ/zig8c3nD+w==}
+  /@udecode/plate-dnd@24.0.0(@babel/core@7.22.17)(@types/react@18.2.21)(react-dnd-html5-backend@15.1.3)(react-dnd@15.1.2)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1):
+    resolution: {integrity: sha512-lbibPaIdi82eqZShGq3lf6h3p7lm2E91ld4nyThottOtruotkYH/Vlbaunz53RLZ0nL3HRjJmFP4iuCYhl1F8g==}
     peerDependencies:
       react: '>=16.8.0'
       react-dnd: '>=14.0.0'
@@ -2256,10 +2252,10 @@ packages:
       slate-history: '>=0.93.0'
       slate-react: '>=0.95.0'
     dependencies:
-      '@udecode/plate-common': 23.7.4(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
+      '@udecode/plate-common': 24.0.0(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
       raf: 3.4.1
       react: 18.2.0
-      react-dnd: 15.1.2(patch_hash=nvkuskfagl3tfokj6l2yreas2e)(@types/node@20.6.1)(@types/react@18.2.21)(react@18.2.0)
+      react-dnd: 15.1.2(patch_hash=nvkuskfagl3tfokj6l2yreas2e)(@types/node@20.6.2)(@types/react@18.2.21)(react@18.2.0)
       react-dnd-html5-backend: 15.1.3
       react-dom: 18.2.0(react@18.2.0)
       slate: 0.94.1
@@ -2280,8 +2276,8 @@ packages:
       - xstate
     dev: false
 
-  /@udecode/plate-emoji@23.7.4(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1):
-    resolution: {integrity: sha512-mUvuvEnrJ1Vy9KpLSGoKZIeamBuxUVx3WB/K3MzmSUN3YzpCxItybUNyW/lqQH+5Jc42RhqJEnHD1ulCPIPOPQ==}
+  /@udecode/plate-emoji@24.0.0(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1):
+    resolution: {integrity: sha512-MTLJoDvRuBWQYjleLzDFd7LWHPOdDtgTrpqV/OFsny+pmuUYBMfHAi6AH9i39z9GS6UqGde7AuYN5pQRw1l2/w==}
     peerDependencies:
       react: '>=16.8.0'
       react-dom: '>=16.8.0'
@@ -2290,8 +2286,8 @@ packages:
       slate-react: '>=0.95.0'
     dependencies:
       '@emoji-mart/data': 1.1.2
-      '@udecode/plate-combobox': 23.7.4(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
-      '@udecode/plate-common': 23.7.4(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
+      '@udecode/plate-combobox': 24.0.0(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
+      '@udecode/plate-common': 24.0.0(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
       slate: 0.94.1
@@ -2312,8 +2308,8 @@ packages:
       - xstate
     dev: false
 
-  /@udecode/plate-excalidraw@23.7.4(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1):
-    resolution: {integrity: sha512-bMULzvL1aQ152DfkdtXwYnxTINYtHrhlY6Gx94tcrMSfi2adxTBHGDutjmXiw857EHJHsuxwze85AO/GdMFRtA==}
+  /@udecode/plate-excalidraw@24.0.0(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1):
+    resolution: {integrity: sha512-v/+X/Eiod73wSCgT05TA8ITYN7qsOTCSlyjc52Qs/ZVJx8yxCVNT14BEh1xDv3PXD+3vMlMuGgplqXVXGZfF8Q==}
     peerDependencies:
       react: '>=16.8.0'
       react-dom: '>=16.8.0'
@@ -2322,7 +2318,7 @@ packages:
       slate-react: '>=0.95.0'
     dependencies:
       '@excalidraw/excalidraw': 0.12.0(react-dom@18.2.0)(react@18.2.0)
-      '@udecode/plate-common': 23.7.4(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
+      '@udecode/plate-common': 24.0.0(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
       slate: 0.94.1
@@ -2343,8 +2339,8 @@ packages:
       - xstate
     dev: false
 
-  /@udecode/plate-floating@23.7.4(@babel/core@7.22.17)(@types/react-dom@18.2.7)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1):
-    resolution: {integrity: sha512-0NIW643b0bgvAhnC4lgqxORm2pmdMCyAOgqCE3Rhe+CsIO7FrJD1QCjtjuyfU1Z4zZIjAKrYEqK+aDuBo5Tnow==}
+  /@udecode/plate-floating@24.0.0(@babel/core@7.22.17)(@types/react-dom@18.2.7)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1):
+    resolution: {integrity: sha512-HpCXFne/YiPSSJMfrnxfKFr5QT04s3eEVIQiwMS2AEw/7MKPnM+xH5Tz2z006XGfZTQVf7LmR5HSvOalifoARA==}
     peerDependencies:
       react: '>=16.8.0'
       react-dom: '>=16.8.0'
@@ -2354,7 +2350,7 @@ packages:
     dependencies:
       '@floating-ui/react': 0.22.3(react-dom@18.2.0)(react@18.2.0)
       '@radix-ui/react-dropdown-menu': 2.0.5(@types/react-dom@18.2.7)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)
-      '@udecode/plate-common': 23.7.4(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
+      '@udecode/plate-common': 24.0.0(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
       slate: 0.94.1
@@ -2376,8 +2372,8 @@ packages:
       - xstate
     dev: false
 
-  /@udecode/plate-font@23.7.4(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1):
-    resolution: {integrity: sha512-4T/JZ+TFWJDpKbsFCsJrEVzKVf5hFIC2Al04dJQ/bSnOc43dwRB9zinPU8yibyicGfyYeKwDzjSip4eFvO/zjQ==}
+  /@udecode/plate-font@24.0.0(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1):
+    resolution: {integrity: sha512-UiBGwYzNBjHywsRgBa0Lhv/CIPbUVvhnJm7coiWr+uY/0sWwOmWgDIovnVDjF/xrdRiutQZcdIOiiXTYW31VjA==}
     peerDependencies:
       react: '>=16.8.0'
       react-dom: '>=16.8.0'
@@ -2385,7 +2381,7 @@ packages:
       slate-history: '>=0.93.0'
       slate-react: '>=0.95.0'
     dependencies:
-      '@udecode/plate-common': 23.7.4(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
+      '@udecode/plate-common': 24.0.0(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
       slate: 0.94.1
@@ -2406,8 +2402,8 @@ packages:
       - xstate
     dev: false
 
-  /@udecode/plate-heading@23.7.4(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1):
-    resolution: {integrity: sha512-0ifVnBib2Z8Y7IWx4FApr1QAyDycyUeGN6MMzMuygMeiXlsctC0UUKQ1iymxZYu7tIqIxWCY+X3uNQWjWZA1iA==}
+  /@udecode/plate-heading@24.0.0(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1):
+    resolution: {integrity: sha512-7LwC70jTwMfBP1edqA9tTZYw+bLOJIwlgxDBPN0eB7LbQTaKlcUM+N1HL052DFkdP37ILewN6WoHQEOOctfJUA==}
     peerDependencies:
       react: '>=16.8.0'
       react-dom: '>=16.8.0'
@@ -2415,7 +2411,7 @@ packages:
       slate-history: '>=0.93.0'
       slate-react: '>=0.95.0'
     dependencies:
-      '@udecode/plate-common': 23.7.4(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
+      '@udecode/plate-common': 24.0.0(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
       slate: 0.94.1
@@ -2436,8 +2432,8 @@ packages:
       - xstate
     dev: false
 
-  /@udecode/plate-highlight@23.7.4(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1):
-    resolution: {integrity: sha512-a/2CVG3J8nmqvmX8zlOhyHEZkhf5skojpMPRF1ubbKk704LlDM3Y1qN9VZTgLhzYwT4x+eLCHoKzBlidjcGygA==}
+  /@udecode/plate-highlight@24.0.0(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1):
+    resolution: {integrity: sha512-T4vxFz08dROJZwJoaMKMJBHpk+0HpibxIdHgwv5dXfKhoIJEePB8b5UmB7uku0bamg6urrVAKyA74xRqS8/PRg==}
     peerDependencies:
       react: '>=16.8.0'
       react-dom: '>=16.8.0'
@@ -2445,7 +2441,7 @@ packages:
       slate-history: '>=0.93.0'
       slate-react: '>=0.95.0'
     dependencies:
-      '@udecode/plate-common': 23.7.4(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
+      '@udecode/plate-common': 24.0.0(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
       slate: 0.94.1
@@ -2466,8 +2462,8 @@ packages:
       - xstate
     dev: false
 
-  /@udecode/plate-horizontal-rule@23.7.4(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1):
-    resolution: {integrity: sha512-e6dYN0AtpNHrXPfsClRfRqJK1mZwkjBcOxOFlp81x0mgY71jHnexnFbnby57wMqlJtygOvHhVJ5efslM49Tkrg==}
+  /@udecode/plate-horizontal-rule@24.0.0(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1):
+    resolution: {integrity: sha512-W/9151hgQnxiY9s/VvV2LYAybOksCPxpB350oxQnc9KNb8Cmfvb5hGbKzKDGOxU9h+/tHnkkSblZYTBB6Q5m0A==}
     peerDependencies:
       react: '>=16.8.0'
       react-dom: '>=16.8.0'
@@ -2475,7 +2471,7 @@ packages:
       slate-history: '>=0.93.0'
       slate-react: '>=0.95.0'
     dependencies:
-      '@udecode/plate-common': 23.7.4(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
+      '@udecode/plate-common': 24.0.0(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
       slate: 0.94.1
@@ -2496,8 +2492,8 @@ packages:
       - xstate
     dev: false
 
-  /@udecode/plate-indent-list@23.7.4(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1):
-    resolution: {integrity: sha512-O3N0K0sTiLm8cx/jhGEg3LnQB+bd8/cEM9j/8TQyvWCjjfj1pb9l8faMjNEmAwMg1QtxlIdS3iQGID/gUE799Q==}
+  /@udecode/plate-indent-list@24.0.0(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1):
+    resolution: {integrity: sha512-fsYtr/XGpZhicVFsBbEy8egF3Zr3v25w7+B/7cbnVN/nN6ny7olihKhckqrr7l987sVqyjnIc9UbCdTDYd4YSw==}
     peerDependencies:
       react: '>=16.8.0'
       react-dom: '>=16.8.0'
@@ -2505,9 +2501,9 @@ packages:
       slate-history: '>=0.93.0'
       slate-react: '>=0.95.0'
     dependencies:
-      '@udecode/plate-common': 23.7.4(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
-      '@udecode/plate-indent': 23.7.4(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
-      '@udecode/plate-list': 23.7.4(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
+      '@udecode/plate-common': 24.0.0(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
+      '@udecode/plate-indent': 24.0.0(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
+      '@udecode/plate-list': 24.0.0(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
       slate: 0.94.1
@@ -2528,8 +2524,8 @@ packages:
       - xstate
     dev: false
 
-  /@udecode/plate-indent@23.7.4(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1):
-    resolution: {integrity: sha512-wYHkxcMMHYWERUrrOYZrulvkpTFLC9Hkn6lh4Q/p6h+kq+sJAaM9hVkrsmvR0lV8j4zIAG14eedKQk7s2b656Q==}
+  /@udecode/plate-indent@24.0.0(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1):
+    resolution: {integrity: sha512-anYFuJXCI0GuysA1Gyo6CsT1ccc2VaZlFPrTUzlhl2JOm8pRiHVrX0TQT9cZGIycAtMPf82lv4Snv0b/kkKA/Q==}
     peerDependencies:
       react: '>=16.8.0'
       react-dom: '>=16.8.0'
@@ -2537,7 +2533,7 @@ packages:
       slate-history: '>=0.93.0'
       slate-react: '>=0.95.0'
     dependencies:
-      '@udecode/plate-common': 23.7.4(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
+      '@udecode/plate-common': 24.0.0(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
       slate: 0.94.1
@@ -2558,8 +2554,8 @@ packages:
       - xstate
     dev: false
 
-  /@udecode/plate-juice@23.7.4(@babel/core@7.22.17)(@types/react@18.2.21)(encoding@0.1.13)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1):
-    resolution: {integrity: sha512-qu0mLIAxAhWJSzhiB+rM3ydMOCoH/zZPl2H0htQ+nQE4Gx8kZm6ppzT+P50Ad4y82TCLCBFaXuBdhCq6d7TyFw==}
+  /@udecode/plate-juice@24.0.0(@babel/core@7.22.17)(@types/react@18.2.21)(encoding@0.1.13)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1):
+    resolution: {integrity: sha512-M8occ7zV8/DZYQpWAgJnDtvsOwDT/kocGH3UrQkfA1LQu50TScWK1Qv419e2Tr8aiDFYNft0bGVYA27tnYa+BQ==}
     peerDependencies:
       react: '>=16.8.0'
       react-dom: '>=16.8.0'
@@ -2567,7 +2563,7 @@ packages:
       slate-history: '>=0.93.0'
       slate-react: '>=0.95.0'
     dependencies:
-      '@udecode/plate-common': 23.7.4(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
+      '@udecode/plate-common': 24.0.0(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
       juice: 8.1.0(encoding@0.1.13)
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
@@ -2590,8 +2586,8 @@ packages:
       - xstate
     dev: false
 
-  /@udecode/plate-kbd@23.7.4(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1):
-    resolution: {integrity: sha512-kHJip7CMB4J4CCEL2XVT6CS9yw0oMaYCMlq2qP4QBlhTcWFvmb/C9eMShoDU+MCD5p5tQek9cfXchQNj7bOVwg==}
+  /@udecode/plate-kbd@24.0.0(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1):
+    resolution: {integrity: sha512-0XIKAJLrYciZtJu7JwbhmkTGYCYZH/O9fuL9dvqqEUjlAglv0ubMIqthAxhW2P5ioBZWnRHBQaGLqaTktp74WQ==}
     peerDependencies:
       react: '>=16.8.0'
       react-dom: '>=16.8.0'
@@ -2599,7 +2595,7 @@ packages:
       slate-history: '>=0.93.0'
       slate-react: '>=0.95.0'
     dependencies:
-      '@udecode/plate-common': 23.7.4(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
+      '@udecode/plate-common': 24.0.0(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
       slate: 0.94.1
@@ -2620,8 +2616,8 @@ packages:
       - xstate
     dev: false
 
-  /@udecode/plate-line-height@23.7.4(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1):
-    resolution: {integrity: sha512-eyAuIkPQ2G6lcSlgZWPI26HWt5KkAUgKECZd+yy+txVT9y8DAPtPHnI9obQIyf22etcszpL6RzFZ+ifXmDT95Q==}
+  /@udecode/plate-line-height@24.0.0(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1):
+    resolution: {integrity: sha512-BWHdyZyF6ZvsuFi8qe6s6X4CzSbM/DMyO6emW+PLrZvlpRtRm5bYahH/pB+GE6ERXAkLsfYt2IMN35J/MN2DVA==}
     peerDependencies:
       react: '>=16.8.0'
       react-dom: '>=16.8.0'
@@ -2629,7 +2625,7 @@ packages:
       slate-history: '>=0.93.0'
       slate-react: '>=0.95.0'
     dependencies:
-      '@udecode/plate-common': 23.7.4(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
+      '@udecode/plate-common': 24.0.0(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
       slate: 0.94.1
@@ -2650,8 +2646,8 @@ packages:
       - xstate
     dev: false
 
-  /@udecode/plate-link@23.7.4(@babel/core@7.22.17)(@types/react-dom@18.2.7)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1):
-    resolution: {integrity: sha512-bQ/n1HP0xcuDHGFOlxSRUiQiX7p78QljucvV5RoDz726ttJKQvSQc1K2cMiepgy9dsiyQskineY/VPwWszF4cw==}
+  /@udecode/plate-link@24.0.0(@babel/core@7.22.17)(@types/react-dom@18.2.7)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1):
+    resolution: {integrity: sha512-2fjbmwOptGsKpSDdygjXl+J16EyoMYUL2oIh78UZWJX4+z0DzRT1ZtLFisgAx7xFUNlHRRGta9dzaMKqR379LA==}
     peerDependencies:
       react: '>=16.8.0'
       react-dom: '>=16.8.0'
@@ -2659,9 +2655,9 @@ packages:
       slate-history: '>=0.93.0'
       slate-react: '>=0.95.0'
     dependencies:
-      '@udecode/plate-common': 23.7.4(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
-      '@udecode/plate-floating': 23.7.4(@babel/core@7.22.17)(@types/react-dom@18.2.7)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
-      '@udecode/plate-normalizers': 23.7.4(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
+      '@udecode/plate-common': 24.0.0(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
+      '@udecode/plate-floating': 24.0.0(@babel/core@7.22.17)(@types/react-dom@18.2.7)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
+      '@udecode/plate-normalizers': 24.0.0(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
       slate: 0.94.1
@@ -2683,8 +2679,8 @@ packages:
       - xstate
     dev: false
 
-  /@udecode/plate-list@23.7.4(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1):
-    resolution: {integrity: sha512-e6joNNDmwmTvxWas58ypvNt/m1nq5ZLBPH9x3bIGJRb+fEpe8q9jjk8V9Fv259Vo2yaHg6gFrHwViHPJaWCZ8g==}
+  /@udecode/plate-list@24.0.0(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1):
+    resolution: {integrity: sha512-RvC6qY/Ng3XYiAR0yal8AqeMVM5xX1+vwqOfNr90Jove8MbUsBahMZEKYy2BZ/2ZDPMw0YRTrjb/owmbc9nWrg==}
     peerDependencies:
       react: '>=16.8.0'
       react-dom: '>=16.8.0'
@@ -2692,8 +2688,8 @@ packages:
       slate-history: '>=0.93.0'
       slate-react: '>=0.95.0'
     dependencies:
-      '@udecode/plate-common': 23.7.4(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
-      '@udecode/plate-reset-node': 23.7.4(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
+      '@udecode/plate-common': 24.0.0(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
+      '@udecode/plate-reset-node': 24.0.0(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
       slate: 0.94.1
@@ -2714,8 +2710,8 @@ packages:
       - xstate
     dev: false
 
-  /@udecode/plate-media@23.7.4(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1):
-    resolution: {integrity: sha512-2IutC7Y+pR7uE9P3WU9b8V3dnJHVqdZtabul3kW5GJsi4AMgqaOBo5Q0FzA7e5soqvSukUrLnnlcfABeTciJTQ==}
+  /@udecode/plate-media@24.0.0(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1):
+    resolution: {integrity: sha512-ePbR2PIwb1xhBz1TGRLn+N5cKky/Tm81dhwGMmuhDyTm/JT5qIkRzl4qTHwgSpY4h3fMPCDXXSKXhXXBIkLz/w==}
     peerDependencies:
       react: '>=16.8.0'
       react-dom: '>=16.8.0'
@@ -2723,7 +2719,7 @@ packages:
       slate-history: '>=0.93.0'
       slate-react: '>=0.95.0'
     dependencies:
-      '@udecode/plate-common': 23.7.4(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
+      '@udecode/plate-common': 24.0.0(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
       js-video-url-parser: 0.5.1
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
@@ -2745,8 +2741,8 @@ packages:
       - xstate
     dev: false
 
-  /@udecode/plate-mention@23.7.4(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1):
-    resolution: {integrity: sha512-I2BKNCGvKcxez4IO32ZmT+Qq0Jt1ujNG/2rdAQcPDYeK/9AIvxP1YwQ1u3weh7vm35bdrrLEiLFZD0BFTsATQQ==}
+  /@udecode/plate-mention@24.0.0(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1):
+    resolution: {integrity: sha512-uyEqgeEs4pCEcnvGczKl+y0c+YhIxoeP4xQG+jJWftgHSUT0Mipw0Xogz4sSUU+0oc/b9wpLxbJrhfiDx0NR0A==}
     peerDependencies:
       react: '>=16.8.0'
       react-dom: '>=16.8.0'
@@ -2754,8 +2750,8 @@ packages:
       slate-history: '>=0.93.0'
       slate-react: '>=0.95.0'
     dependencies:
-      '@udecode/plate-combobox': 23.7.4(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
-      '@udecode/plate-common': 23.7.4(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
+      '@udecode/plate-combobox': 24.0.0(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
+      '@udecode/plate-common': 24.0.0(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
       slate: 0.94.1
@@ -2776,8 +2772,8 @@ packages:
       - xstate
     dev: false
 
-  /@udecode/plate-node-id@23.7.4(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1):
-    resolution: {integrity: sha512-Kn3USCD36aY9DvQUjZX+3ZgOxRweeHuQnK7fu2dO3H2Y04T1TeaWrb7dzR4vYLWjI17GMek6PmZ5FHEP0t26cQ==}
+  /@udecode/plate-node-id@24.0.0(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1):
+    resolution: {integrity: sha512-xuE0Zm3sL8zqhKGeaZ+aO3RYGcSTmonuK1pOTjU28OOEwAFBU2SU+ET/PStInn1hPgwC3EZl11ksYlNIkR7Ulg==}
     peerDependencies:
       react: '>=16.8.0'
       react-dom: '>=16.8.0'
@@ -2785,7 +2781,7 @@ packages:
       slate-history: '>=0.93.0'
       slate-react: '>=0.95.0'
     dependencies:
-      '@udecode/plate-common': 23.7.4(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
+      '@udecode/plate-common': 24.0.0(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
       slate: 0.94.1
@@ -2806,8 +2802,8 @@ packages:
       - xstate
     dev: false
 
-  /@udecode/plate-normalizers@23.7.4(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1):
-    resolution: {integrity: sha512-DhNAHdyCka4nmYHir39/ijwOmeRN4wgtDANBHnuXnVES8/q1eHUyR9HZI8X2CAbV2SjCMHWp+XU8Mu+xRg3FsQ==}
+  /@udecode/plate-normalizers@24.0.0(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1):
+    resolution: {integrity: sha512-tkcAEHrETXDg0yub6GW9STXLvAE4o5+thnPAqxLzyP7Js9FdshTTvFyEagdWNOgIXH4ZHNNkVmYQyyWvDypQhw==}
     peerDependencies:
       react: '>=16.8.0'
       react-dom: '>=16.8.0'
@@ -2815,7 +2811,7 @@ packages:
       slate-history: '>=0.93.0'
       slate-react: '>=0.95.0'
     dependencies:
-      '@udecode/plate-common': 23.7.4(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
+      '@udecode/plate-common': 24.0.0(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
       slate: 0.94.1
@@ -2836,8 +2832,8 @@ packages:
       - xstate
     dev: false
 
-  /@udecode/plate-paragraph@23.7.4(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1):
-    resolution: {integrity: sha512-S6LCzbzwvO2E+xW2UYZ/PLmYPrFgAUKg5goLgaMxSU7VNlLBJ/iRLktplYtnBk4jBhBlhaA5Zla6Rdidp9UbYA==}
+  /@udecode/plate-paragraph@24.0.0(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1):
+    resolution: {integrity: sha512-BfEBIXO6PsztAWu23m9VXyBzGeJsjNTbQUsA52IiWY3pyu6UTP1Zy1j3YEuYanYYoBoq7XNYX/Nvi0IWwDwbYA==}
     peerDependencies:
       react: '>=16.8.0'
       react-dom: '>=16.8.0'
@@ -2845,7 +2841,7 @@ packages:
       slate-history: '>=0.93.0'
       slate-react: '>=0.95.0'
     dependencies:
-      '@udecode/plate-common': 23.7.4(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
+      '@udecode/plate-common': 24.0.0(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
       slate: 0.94.1
@@ -2866,8 +2862,8 @@ packages:
       - xstate
     dev: false
 
-  /@udecode/plate-reset-node@23.7.4(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1):
-    resolution: {integrity: sha512-kPwFsxWqlyydmKHAknM+0DrpfmuIegqEeYDe2oH4mv1bVY2utLV6ErPYqymHAanjTD9WW2EUYar16oYbs+8hEw==}
+  /@udecode/plate-reset-node@24.0.0(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1):
+    resolution: {integrity: sha512-n+lIVRsM96zdT7rW+oBpAXYBQkMrfkjTFjOAJ5AnW3kdDOWNn0TK24QMfPdn4lPAJDJ8KI5RleoUDVUgt9Hapg==}
     peerDependencies:
       react: '>=16.8.0'
       react-dom: '>=16.8.0'
@@ -2875,7 +2871,7 @@ packages:
       slate-history: '>=0.93.0'
       slate-react: '>=0.95.0'
     dependencies:
-      '@udecode/plate-common': 23.7.4(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
+      '@udecode/plate-common': 24.0.0(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
       slate: 0.94.1
@@ -2896,8 +2892,8 @@ packages:
       - xstate
     dev: false
 
-  /@udecode/plate-resizable@23.7.4(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1):
-    resolution: {integrity: sha512-n0yJFTQN1SLY/6oBxVNb8i4uxM6wNlgcBfAPiTYjK7hAbnro7Zr5RPucsvBRm+zpgLOyUtCcf/Hz2K+jwabh3Q==}
+  /@udecode/plate-resizable@24.0.0(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1):
+    resolution: {integrity: sha512-KP4qijTX2H6pymmMRdDq+DXejbwf0pFo3fP8mA8qpLbs/yp/yxgy0QBzwsenX+QkXQYZIVT0Dme15OAW4uHizg==}
     peerDependencies:
       react: '>=16.8.0'
       react-dom: '>=16.8.0'
@@ -2905,7 +2901,7 @@ packages:
       slate-history: '>=0.93.0'
       slate-react: '>=0.95.0'
     dependencies:
-      '@udecode/plate-common': 23.7.4(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
+      '@udecode/plate-common': 24.0.0(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
       slate: 0.94.1
@@ -2926,8 +2922,8 @@ packages:
       - xstate
     dev: false
 
-  /@udecode/plate-select@23.7.4(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1):
-    resolution: {integrity: sha512-FOwcnIUhRlIqAL8etKM+Xa9Oo1wZt6IY/HZMAK7pfOSmSYfxNmfabiDFB6xBQ434asGjlYL6B3bJJlk+rPWxAw==}
+  /@udecode/plate-select@24.0.0(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1):
+    resolution: {integrity: sha512-5Ym7dxk2RQ8TqeMKn5XVSlizyDGsSj3jdfoXIr3gY0tXTKwDkBxZSIjhfTbCJdjFqRjeyFPTGVLXA3oFJyaM2Q==}
     peerDependencies:
       react: '>=16.8.0'
       react-dom: '>=16.8.0'
@@ -2935,7 +2931,7 @@ packages:
       slate-history: '>=0.93.0'
       slate-react: '>=0.95.0'
     dependencies:
-      '@udecode/plate-common': 23.7.4(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
+      '@udecode/plate-common': 24.0.0(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
       slate: 0.94.1
@@ -2956,8 +2952,8 @@ packages:
       - xstate
     dev: false
 
-  /@udecode/plate-selection@23.7.4(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1):
-    resolution: {integrity: sha512-ePd8W4QLbFAAQ47DnX19M3laiP5L6MeEA3/EmRZZ52GZE0pXfm3xD/FVyTnQhRnFq9+J4oZ1K6D4fd75OfbYhQ==}
+  /@udecode/plate-selection@24.0.0(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1):
+    resolution: {integrity: sha512-oCp75TMQap2MufWk1uoRLioBWm4837eslERipF7yC6UbiKmN3QnAY8axEYc0S1YB9m82nnJg/gvhwW/yvnWb7A==}
     peerDependencies:
       react: '>=16.8.0'
       react-dom: '>=16.8.0'
@@ -2965,7 +2961,7 @@ packages:
       slate-history: '>=0.93.0'
       slate-react: '>=0.95.0'
     dependencies:
-      '@udecode/plate-common': 23.7.4(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
+      '@udecode/plate-common': 24.0.0(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
       '@viselect/vanilla': 3.2.5
       copy-to-clipboard: 3.3.3
       react: 18.2.0
@@ -2988,8 +2984,8 @@ packages:
       - xstate
     dev: false
 
-  /@udecode/plate-serializer-csv@23.7.4(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-hyperscript@0.77.0)(slate-react@0.98.3)(slate@0.94.1):
-    resolution: {integrity: sha512-0wLglMpDZpnMCTMvr8Gw3U7/E4Vmr6DLfc7xDhCm4dujX95Io8VXIxVkpzbfChJEnoTxuO9eh0KT4qnVybKDgw==}
+  /@udecode/plate-serializer-csv@24.0.0(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-hyperscript@0.77.0)(slate-react@0.98.3)(slate@0.94.1):
+    resolution: {integrity: sha512-1PuItVEJ35Tj0xW7g6UwqykAQSVMVfvOWYrCmr8KgOOxosI9s6uNGELiXMKc6uQizOevOj/ngH5x9roo1kcLwA==}
     peerDependencies:
       react: '>=16.8.0'
       react-dom: '>=16.8.0'
@@ -2998,8 +2994,8 @@ packages:
       slate-hyperscript: '>=0.66.0'
       slate-react: '>=0.95.0'
     dependencies:
-      '@udecode/plate-common': 23.7.4(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
-      '@udecode/plate-table': 23.7.4(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
+      '@udecode/plate-common': 24.0.0(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
+      '@udecode/plate-table': 24.0.0(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
       papaparse: 5.4.1
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
@@ -3022,8 +3018,8 @@ packages:
       - xstate
     dev: false
 
-  /@udecode/plate-serializer-docx@23.7.4(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-hyperscript@0.77.0)(slate-react@0.98.3)(slate@0.94.1):
-    resolution: {integrity: sha512-kfv7Jl+Bn7Q1/Xq6uWI/ldoXQzzx9uNsqnAoBCnG87kejEKuoQ9RhilrUwlY/DSxSsFU+G5oXFbE31IFN0dSCQ==}
+  /@udecode/plate-serializer-docx@24.0.0(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-hyperscript@0.77.0)(slate-react@0.98.3)(slate@0.94.1):
+    resolution: {integrity: sha512-V0mABElB6NCZ4fitfmZcIyeX3CbXswcUgdZA4EpqZdaBpWkuZp3SM5jM6562Acd3P/6SaTW4B8qpZCBdI9mqjQ==}
     peerDependencies:
       react: '>=16.8.0'
       react-dom: '>=16.8.0'
@@ -3032,13 +3028,13 @@ packages:
       slate-hyperscript: '>=0.66.0'
       slate-react: '>=0.95.0'
     dependencies:
-      '@udecode/plate-common': 23.7.4(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
-      '@udecode/plate-heading': 23.7.4(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
-      '@udecode/plate-indent': 23.7.4(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
-      '@udecode/plate-indent-list': 23.7.4(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
-      '@udecode/plate-media': 23.7.4(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
-      '@udecode/plate-paragraph': 23.7.4(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
-      '@udecode/plate-table': 23.7.4(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
+      '@udecode/plate-common': 24.0.0(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
+      '@udecode/plate-heading': 24.0.0(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
+      '@udecode/plate-indent': 24.0.0(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
+      '@udecode/plate-indent-list': 24.0.0(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
+      '@udecode/plate-media': 24.0.0(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
+      '@udecode/plate-paragraph': 24.0.0(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
+      '@udecode/plate-table': 24.0.0(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
       slate: 0.94.1
@@ -3061,8 +3057,8 @@ packages:
       - xstate
     dev: false
 
-  /@udecode/plate-serializer-html@23.7.4(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-hyperscript@0.77.0)(slate-react@0.98.3)(slate@0.94.1):
-    resolution: {integrity: sha512-M4NXmZps0r76dG8dHleU1qCWm3O7e+XWCUIJ4i3D17QHZxPiXQUJnZtS4gWl2IKwKmY2x9aEdqmu+wtfJGjCCQ==}
+  /@udecode/plate-serializer-html@24.0.0(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-hyperscript@0.77.0)(slate-react@0.98.3)(slate@0.94.1):
+    resolution: {integrity: sha512-Bp+LDoop175WSfNhAZ1hccpWslXkw45em94Nvg0CSiYzP1tMBXx5LxOLyVycCQTUgq6sHLIeSzkq43WtvsgsNA==}
     peerDependencies:
       react: '>=16.8.0'
       react-dom: '>=16.8.0'
@@ -3071,7 +3067,7 @@ packages:
       slate-hyperscript: '>=0.66.0'
       slate-react: '>=0.95.0'
     dependencies:
-      '@udecode/plate-common': 23.7.4(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
+      '@udecode/plate-common': 24.0.0(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
       html-entities: 2.4.0
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
@@ -3094,8 +3090,8 @@ packages:
       - xstate
     dev: false
 
-  /@udecode/plate-serializer-md@23.7.4(@babel/core@7.22.17)(@types/react-dom@18.2.7)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1):
-    resolution: {integrity: sha512-FsZQmbZ3SHS5NMw07hlAfIIPR8J1SzhuYCnJ/8AJmn2lDgagQWAoZywj1qtXjRgqeksLIs+vno+uKKkg+6jJBQ==}
+  /@udecode/plate-serializer-md@24.0.0(@babel/core@7.22.17)(@types/react-dom@18.2.7)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1):
+    resolution: {integrity: sha512-yIGNaTEodedaGG50SF9AK3ACeGVX2m3uiLccppAkhunNX5VgXZkT5ENcwWoAd9zcMgLZFta1HliDTI3y+LJLTg==}
     peerDependencies:
       react: '>=16.8.0'
       react-dom: '>=16.8.0'
@@ -3103,13 +3099,13 @@ packages:
       slate-history: '>=0.93.0'
       slate-react: '>=0.95.0'
     dependencies:
-      '@udecode/plate-block-quote': 23.7.4(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
-      '@udecode/plate-code-block': 23.7.4(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
-      '@udecode/plate-common': 23.7.4(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
-      '@udecode/plate-heading': 23.7.4(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
-      '@udecode/plate-link': 23.7.4(@babel/core@7.22.17)(@types/react-dom@18.2.7)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
-      '@udecode/plate-list': 23.7.4(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
-      '@udecode/plate-paragraph': 23.7.4(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
+      '@udecode/plate-block-quote': 24.0.0(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
+      '@udecode/plate-code-block': 24.0.0(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
+      '@udecode/plate-common': 24.0.0(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
+      '@udecode/plate-heading': 24.0.0(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
+      '@udecode/plate-link': 24.0.0(@babel/core@7.22.17)(@types/react-dom@18.2.7)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
+      '@udecode/plate-list': 24.0.0(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
+      '@udecode/plate-paragraph': 24.0.0(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
       remark-parse: 9.0.0
@@ -3134,8 +3130,8 @@ packages:
       - xstate
     dev: false
 
-  /@udecode/plate-tabbable@23.7.4(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1):
-    resolution: {integrity: sha512-NRbBxy1UtI0AP9dxhMVuu0pwl5KhDNeWL55v8k+QcLGa1p4tThHrLOWl/0sFHexV9fLm6FIciQ0d4X5HguHgig==}
+  /@udecode/plate-tabbable@24.0.0(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1):
+    resolution: {integrity: sha512-Ftnm9wFDILnQpAnjLe8Hsl9s8xeTr7KMsswL0VNlmujn/EsDB89tJdQTXJSMClx3RrtkcYel5EYSgWUqkHcp5Q==}
     peerDependencies:
       react: '>=16.8.0'
       react-dom: '>=16.8.0'
@@ -3143,7 +3139,7 @@ packages:
       slate-history: '>=0.93.0'
       slate-react: '>=0.95.0'
     dependencies:
-      '@udecode/plate-common': 23.7.4(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
+      '@udecode/plate-common': 24.0.0(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
       slate: 0.94.1
@@ -3165,8 +3161,8 @@ packages:
       - xstate
     dev: false
 
-  /@udecode/plate-table@23.7.4(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1):
-    resolution: {integrity: sha512-beSF173v9Leg5m7d4JTtCgtRGqiQ67BzcKNz0YVaL2ilnTecuRL09PdMm5TPG3w75deKIkgLYFu7IUY+iYTOpA==}
+  /@udecode/plate-table@24.0.0(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1):
+    resolution: {integrity: sha512-1JVwUAgjrn7iJkqXJaGJglFhfxxYXDirYULbafbpdLpOYUSCgdTb0YmL4nBeraaoJBrO0XYfLLtIunJlgSyP/Q==}
     peerDependencies:
       react: '>=16.8.0'
       react-dom: '>=16.8.0'
@@ -3174,8 +3170,8 @@ packages:
       slate-history: '>=0.93.0'
       slate-react: '>=0.98.1'
     dependencies:
-      '@udecode/plate-common': 23.7.4(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
-      '@udecode/plate-resizable': 23.7.4(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
+      '@udecode/plate-common': 24.0.0(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
+      '@udecode/plate-resizable': 24.0.0(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
       slate: 0.94.1
@@ -3196,8 +3192,8 @@ packages:
       - xstate
     dev: false
 
-  /@udecode/plate-trailing-block@23.7.4(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1):
-    resolution: {integrity: sha512-Qo9LZQlBTcpWFPGJDwWDdP1PCreieYiJJpN/p2FpApnQtJ5AYXH8ZyQm2PjqlR0zWmU2YrN7bpD71wocsGCkGQ==}
+  /@udecode/plate-trailing-block@24.0.0(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1):
+    resolution: {integrity: sha512-UBr5TlGa2CT7+HEVc6UbqMofPkJaT5ZOwLqFr9vkzoWEVAdwwD26ga2CV/LNR/mIln5hpqSd0d+znjHhUwMPUw==}
     peerDependencies:
       react: '>=16.8.0'
       react-dom: '>=16.8.0'
@@ -3205,7 +3201,7 @@ packages:
       slate-history: '>=0.93.0'
       slate-react: '>=0.95.0'
     dependencies:
-      '@udecode/plate-common': 23.7.4(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
+      '@udecode/plate-common': 24.0.0(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
       slate: 0.94.1
@@ -3226,8 +3222,8 @@ packages:
       - xstate
     dev: false
 
-  /@udecode/plate-utils@23.7.4(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1):
-    resolution: {integrity: sha512-FGZ1QjMkR6Tr57b66u1C8mu/JCVwh1e0W5OkjRIhE2Drkm5I39TlrfM86ouZroWuOP228B/hXFn6a2pjqIQKIw==}
+  /@udecode/plate-utils@24.0.0(@babel/core@7.22.17)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1):
+    resolution: {integrity: sha512-Ywa8a/ZancDit9qJGh7N3TEmJK22/WsW/h+486niU5u00hJGDcfqrtORoNPVggAHEU1RCLJ7u9nyNXMvdGAUPA==}
     peerDependencies:
       react: '>=16.8.0'
       react-dom: '>=16.8.0'
@@ -3236,10 +3232,10 @@ packages:
       slate-react: '>=0.95.0'
     dependencies:
       '@radix-ui/react-slot': 1.0.2(@types/react@18.2.21)(react@18.2.0)
-      '@udecode/plate-core': 23.7.4(@babel/core@7.22.17)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
+      '@udecode/plate-core': 24.0.0(@babel/core@7.22.17)(react-dom@18.2.0)(react@18.2.0)(scheduler@0.23.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
       '@udecode/slate': 23.7.4(slate-history@0.93.0)(slate@0.94.1)
-      '@udecode/slate-react': 23.7.4(react-dom@18.2.0)(react@18.2.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
-      '@udecode/slate-utils': 23.7.4(slate-history@0.93.0)(slate@0.94.1)
+      '@udecode/slate-react': 24.0.0(react-dom@18.2.0)(react@18.2.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1)
+      '@udecode/slate-utils': 24.0.0(slate-history@0.93.0)(slate@0.94.1)
       '@udecode/utils': 19.7.1
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
@@ -3261,8 +3257,8 @@ packages:
       - xstate
     dev: false
 
-  /@udecode/slate-react@23.7.4(react-dom@18.2.0)(react@18.2.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1):
-    resolution: {integrity: sha512-eVMh6MRvMIUYKPltSGvIivGvs+pzdyXWc0lVToRLkrMPriTW1HsA0zRTBScVDq0HPXjHyzlxJPFTk0TBIV+YVg==}
+  /@udecode/slate-react@24.0.0(react-dom@18.2.0)(react@18.2.0)(slate-history@0.93.0)(slate-react@0.98.3)(slate@0.94.1):
+    resolution: {integrity: sha512-enPGVtY8SZY2oG1eLE2CT9Ldq3xO7txes4mwW8JjIPdrOrgoyQWXM14lrjrYHnPDw2Gp624WSWx0xL0Yu+AOAg==}
     peerDependencies:
       react: '>=16.8.0'
       react-dom: '>=16.8.0'
@@ -3279,8 +3275,8 @@ packages:
       slate-react: 0.98.3(react-dom@18.2.0)(react@18.2.0)(slate@0.94.1)
     dev: false
 
-  /@udecode/slate-utils@23.7.4(slate-history@0.93.0)(slate@0.94.1):
-    resolution: {integrity: sha512-UeZ9yv/VJuzstkzIZpkZYn+P7VrZVRL7cpf+aO/1GwUNYYhNduXw0S7TrTi1WGiODxb47rVjOzmiVrkPLGSfcg==}
+  /@udecode/slate-utils@24.0.0(slate-history@0.93.0)(slate@0.94.1):
+    resolution: {integrity: sha512-kYeWk3t/9NGey4FohRai4jXplzeCs7l2VuMKujpx33KAPbaGGOW0f3iWcuC/bEoeqJCKmyQAVA2Dw/T0hhVKBA==}
     peerDependencies:
       slate: '>=0.94.0'
       slate-history: '>=0.93.0'
@@ -5210,8 +5206,8 @@ packages:
       yallist: 4.0.0
     dev: true
 
-  /lucide-react@0.277.0(react@18.2.0):
-    resolution: {integrity: sha512-9epmznme+vW14V9d2rsMeLr3fMnf59lYDUOVUg6s7oVN22Zq8h4B30+3CIdFFV9UXCjPG5ZNKHfO/hf96cl46A==}
+  /lucide-react@0.279.0(react@18.2.0):
+    resolution: {integrity: sha512-LJ8g66+Bxc3t3x9vKTeK3wn3xucrOQGfJ9ou9GsBwCt2offsrT2BB90XrTrIzE1noYYDe2O8jZaRHi6sAHXNxw==}
     peerDependencies:
       react: ^16.5.1 || ^17.0.0 || ^18.0.0
     dependencies:
@@ -5726,7 +5722,7 @@ packages:
       dnd-core: 15.1.2
     dev: false
 
-  /react-dnd@15.1.2(patch_hash=nvkuskfagl3tfokj6l2yreas2e)(@types/node@20.6.1)(@types/react@18.2.21)(react@18.2.0):
+  /react-dnd@15.1.2(patch_hash=nvkuskfagl3tfokj6l2yreas2e)(@types/node@20.6.2)(@types/react@18.2.21)(react@18.2.0):
     resolution: {integrity: sha512-EaSbMD9iFJDY/o48T3c8wn3uWU+2uxfFojhesZN3LhigJoAIvH2iOjxofSA9KbqhAKP6V9P853G6XG8JngKVtA==}
     peerDependencies:
       '@types/hoist-non-react-statics': '>= 3.3.1'
@@ -5743,7 +5739,7 @@ packages:
     dependencies:
       '@react-dnd/invariant': 3.0.1
       '@react-dnd/shallowequal': 3.0.1
-      '@types/node': 20.6.1
+      '@types/node': 20.6.2
       '@types/react': 18.2.21
       dnd-core: 15.1.2
       fast-deep-equal: 3.1.3
@@ -6766,3 +6762,7 @@ packages:
     dependencies:
       react: 18.2.0
     dev: false
+
+settings:
+  autoInstallPeers: true
+  excludeLinksFromLockfile: false
diff --git a/templates/plate-playground-template/src/components/plate-editor.tsx b/templates/plate-playground-template/src/components/plate-editor.tsx
index e20a8789af..0b4329801f 100644
--- a/templates/plate-playground-template/src/components/plate-editor.tsx
+++ b/templates/plate-playground-template/src/components/plate-editor.tsx
@@ -2,7 +2,7 @@
 
 import React, { useRef } from 'react';
 import { CommentsProvider } from '@udecode/plate-comments';
-import { Plate, PlateProvider } from '@udecode/plate-common';
+import { Plate } from '@udecode/plate-common';
 import { ELEMENT_PARAGRAPH } from '@udecode/plate-paragraph';
 import { DndProvider } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
@@ -13,6 +13,7 @@ import { plugins } from '@/lib/plate/plate-plugins';
 import { cn } from '@/lib/utils';
 import { CommentsPopover } from '@/components/plate-ui/comments-popover';
 import { CursorOverlay } from '@/components/plate-ui/cursor-overlay';
+import { Editor } from '@/components/plate-ui/editor';
 import { FixedToolbar } from '@/components/plate-ui/fixed-toolbar';
 import { FixedToolbarButtons } from '@/components/plate-ui/fixed-toolbar-buttons';
 import { FloatingToolbar } from '@/components/plate-ui/floating-toolbar';
@@ -33,7 +34,7 @@ export default function PlateEditor() {
   return (
     <DndProvider backend={HTML5Backend}>
       <CommentsProvider users={commentsUsers} myUserId={myUserId}>
-        <PlateProvider plugins={plugins} initialValue={initialValue}>
+        <Plate plugins={plugins} initialValue={initialValue}>
           <div
             ref={containerRef}
             className={cn(
@@ -45,14 +46,12 @@ export default function PlateEditor() {
               <FixedToolbarButtons />
             </FixedToolbar>
 
-            <Plate
-              editableProps={{
-                autoFocus: true,
-                className: cn(
-                  'relative overflow-x-auto outline-none [&_strong]:font-bold',
-                  '!min-h-[600px] px-[96px] py-16'
-                ),
-              }}
+            <Editor
+              className="px-[96px] py-16"
+              autoFocus
+              focusRing={false}
+              variant="ghost"
+              size="md"
             />
 
             <FloatingToolbar>
@@ -65,7 +64,7 @@ export default function PlateEditor() {
 
             <CursorOverlay containerRef={containerRef} />
           </div>
-        </PlateProvider>
+        </Plate>
       </CommentsProvider>
     </DndProvider>
   );
diff --git a/templates/plate-playground-template/src/components/plate-ui/button.tsx b/templates/plate-playground-template/src/components/plate-ui/button.tsx
index d66f66afb5..18b0a7f0b7 100644
--- a/templates/plate-playground-template/src/components/plate-ui/button.tsx
+++ b/templates/plate-playground-template/src/components/plate-ui/button.tsx
@@ -18,6 +18,7 @@ const buttonVariants = cva(
           'bg-secondary text-secondary-foreground hover:bg-secondary/80',
         ghost: 'hover:bg-accent hover:text-accent-foreground',
         link: 'text-primary underline-offset-4 hover:underline',
+        inlineLink: 'text-base text-primary underline underline-offset-4',
       },
       size: {
         default: 'h-10 px-4 py-2',
@@ -26,6 +27,7 @@ const buttonVariants = cva(
         sms: 'h-9 w-9 rounded-md px-0',
         lg: 'h-11 rounded-md px-8',
         icon: 'h-10 w-10',
+        none: '',
       },
       isMenu: {
         true: 'h-auto w-full cursor-pointer justify-start',
diff --git a/templates/plate-playground-template/src/components/plate-ui/code-block-element.css b/templates/plate-playground-template/src/components/plate-ui/code-block-element.css
index 4a294ff7c6..3fc78348ac 100644
--- a/templates/plate-playground-template/src/components/plate-ui/code-block-element.css
+++ b/templates/plate-playground-template/src/components/plate-ui/code-block-element.css
@@ -28,8 +28,8 @@
  * --syntax-cursor-line: hsla(230, 8%, 24%, 0.05);
  */
 
-code[class*='language-'],
-pre[class*='language-'] {
+.slate-code_block code[class*='language-'],
+.slate-code_block pre[class*='language-'] {
   background: hsl(230, 1%, 98%);
   color: hsl(230, 8%, 24%);
   font-family: 'Fira Code', 'Fira Mono', Menlo, Consolas, 'DejaVu Sans Mono',
@@ -50,22 +50,22 @@ pre[class*='language-'] {
 }
 
 /* Selection */
-code[class*='language-']::-moz-selection,
-code[class*='language-'] *::-moz-selection,
-pre[class*='language-'] *::-moz-selection {
+.slate-code_block code[class*='language-']::-moz-selection,
+.slate-code_block code[class*='language-'] *::-moz-selection,
+.slate-code_block pre[class*='language-'] *::-moz-selection {
   background: hsl(230, 1%, 90%);
   color: inherit;
 }
 
-code[class*='language-']::selection,
-code[class*='language-'] *::selection,
-pre[class*='language-'] *::selection {
+.slate-code_block code[class*='language-']::selection,
+.slate-code_block code[class*='language-'] *::selection,
+.slate-code_block pre[class*='language-'] *::selection {
   background: hsl(230, 1%, 90%);
   color: inherit;
 }
 
 /* Code blocks */
-pre[class*='language-'] {
+.slate-code_block pre[class*='language-'] {
   padding: 1em;
   margin: 0.5em 0;
   overflow: auto;
@@ -73,7 +73,7 @@ pre[class*='language-'] {
 }
 
 /* Inline code */
-:not(pre) > code[class*='language-'] {
+.slate-code_block :not(pre) > code[class*='language-'] {
   padding: 0.2em 0.3em;
   border-radius: 0.3em;
   white-space: normal;
diff --git a/templates/plate-playground-template/src/components/plate-ui/editor.tsx b/templates/plate-playground-template/src/components/plate-ui/editor.tsx
new file mode 100644
index 0000000000..f3e6197307
--- /dev/null
+++ b/templates/plate-playground-template/src/components/plate-ui/editor.tsx
@@ -0,0 +1,88 @@
+import React from 'react';
+import { PlateContent } from '@udecode/plate-common';
+import { cva } from 'class-variance-authority';
+
+import { cn } from '@/lib/utils';
+
+import type { PlateContentProps } from '@udecode/plate-common';
+import type { VariantProps } from 'class-variance-authority';
+
+const editorVariants = cva(
+  cn(
+    'relative overflow-x-auto whitespace-pre-wrap break-words',
+    'min-h-[80px] w-full rounded-md bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none',
+    '[&_[data-slate-placeholder]]:text-muted-foreground [&_[data-slate-placeholder]]:!opacity-100',
+    '[&_[data-slate-placeholder]]:top-[auto_!important]',
+    '[&_strong]:font-bold'
+  ),
+  {
+    variants: {
+      variant: {
+        outline: 'border border-input',
+        ghost: '',
+      },
+      focused: {
+        true: 'ring-2 ring-ring ring-offset-2',
+      },
+      disabled: {
+        true: 'cursor-not-allowed opacity-50',
+      },
+      focusRing: {
+        true: 'focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+        false: '',
+      },
+      size: {
+        sm: 'text-sm',
+        md: 'text-base',
+      },
+    },
+    defaultVariants: {
+      variant: 'outline',
+      focusRing: true,
+      size: 'sm',
+    },
+  }
+);
+
+export type EditorProps = PlateContentProps &
+  VariantProps<typeof editorVariants>;
+
+const Editor = React.forwardRef<HTMLDivElement, EditorProps>(
+  (
+    {
+      className,
+      disabled,
+      focused,
+      focusRing,
+      readOnly,
+      size,
+      variant,
+      ...props
+    },
+    ref
+  ) => {
+    return (
+      <div ref={ref} className="relative w-full">
+        <PlateContent
+          className={cn(
+            editorVariants({
+              disabled,
+              focused,
+              focusRing,
+              size,
+              variant,
+            }),
+            className
+          )}
+          disableDefaultStyles
+          readOnly={disabled ?? readOnly}
+          aria-disabled={disabled}
+          {...props}
+        />
+      </div>
+    );
+  }
+);
+Editor.displayName = 'Editor';
+
+export { Editor };
diff --git a/templates/plate-playground-template/src/components/plate-ui/fixed-toolbar-buttons.tsx b/templates/plate-playground-template/src/components/plate-ui/fixed-toolbar-buttons.tsx
index 1655fe9007..1a04494998 100644
--- a/templates/plate-playground-template/src/components/plate-ui/fixed-toolbar-buttons.tsx
+++ b/templates/plate-playground-template/src/components/plate-ui/fixed-toolbar-buttons.tsx
@@ -6,7 +6,7 @@ import {
   MARK_STRIKETHROUGH,
   MARK_UNDERLINE,
 } from '@udecode/plate-basic-marks';
-import { usePlateReadOnly } from '@udecode/plate-common';
+import { useEditorReadOnly } from '@udecode/plate-core';
 import { MARK_BG_COLOR, MARK_COLOR } from '@udecode/plate-font';
 import { ListStyleType } from '@udecode/plate-indent-list';
 import { ELEMENT_IMAGE } from '@udecode/plate-media';
@@ -32,7 +32,7 @@ import { ToolbarGroup } from './toolbar';
 import { TurnIntoDropdownMenu } from './turn-into-dropdown-menu';
 
 export function FixedToolbarButtons() {
-  const readOnly = usePlateReadOnly();
+  const readOnly = useEditorReadOnly();
 
   return (
     <div className="w-full overflow-hidden">
diff --git a/templates/plate-playground-template/src/components/plate-ui/floating-toolbar-buttons.tsx b/templates/plate-playground-template/src/components/plate-ui/floating-toolbar-buttons.tsx
index c61feebd18..6aab0cc38c 100644
--- a/templates/plate-playground-template/src/components/plate-ui/floating-toolbar-buttons.tsx
+++ b/templates/plate-playground-template/src/components/plate-ui/floating-toolbar-buttons.tsx
@@ -6,7 +6,7 @@ import {
   MARK_STRIKETHROUGH,
   MARK_UNDERLINE,
 } from '@udecode/plate-basic-marks';
-import { usePlateReadOnly } from '@udecode/plate-common';
+import { useEditorReadOnly } from '@udecode/plate-core';
 
 import { Icons } from '@/components/icons';
 import { CommentToolbarButton } from '@/components/plate-ui/comment-toolbar-button';
@@ -17,7 +17,7 @@ import { MoreDropdownMenu } from './more-dropdown-menu';
 import { TurnIntoDropdownMenu } from './turn-into-dropdown-menu';
 
 export function FloatingToolbarButtons() {
-  const readOnly = usePlateReadOnly();
+  const readOnly = useEditorReadOnly();
 
   return (
     <>
diff --git a/templates/plate-playground-template/src/components/plate-ui/mode-dropdown-menu.tsx b/templates/plate-playground-template/src/components/plate-ui/mode-dropdown-menu.tsx
index 7461cc6dbb..f6c5eafece 100644
--- a/templates/plate-playground-template/src/components/plate-ui/mode-dropdown-menu.tsx
+++ b/templates/plate-playground-template/src/components/plate-ui/mode-dropdown-menu.tsx
@@ -3,9 +3,9 @@ import { DropdownMenuProps } from '@radix-ui/react-dropdown-menu';
 import {
   focusEditor,
   useEditorState,
-  usePlateReadOnly,
   usePlateStore,
 } from '@udecode/plate-common';
+import { useEditorReadOnly } from '@udecode/plate-core';
 
 import { Icons } from '@/components/icons';
 
@@ -22,7 +22,7 @@ import { ToolbarButton } from './toolbar';
 export function ModeDropdownMenu(props: DropdownMenuProps) {
   const editor = useEditorState();
   const setReadOnly = usePlateStore().set.readOnly();
-  const readOnly = usePlateReadOnly();
+  const readOnly = useEditorReadOnly();
   const openState = useOpenState();
 
   let value = 'editing';
diff --git a/templates/plate-template/src/components/plate-ui/editor.tsx b/templates/plate-template/src/components/plate-ui/editor.tsx
index 6b0ba6e5c3..f3e6197307 100644
--- a/templates/plate-template/src/components/plate-ui/editor.tsx
+++ b/templates/plate-template/src/components/plate-ui/editor.tsx
@@ -9,9 +9,10 @@ import type { VariantProps } from 'class-variance-authority';
 
 const editorVariants = cva(
   cn(
-    'relative whitespace-pre-wrap break-words',
-    'min-h-[80px] w-full rounded-md bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+    'relative overflow-x-auto whitespace-pre-wrap break-words',
+    'min-h-[80px] w-full rounded-md bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none',
     '[&_[data-slate-placeholder]]:text-muted-foreground [&_[data-slate-placeholder]]:!opacity-100',
+    '[&_[data-slate-placeholder]]:top-[auto_!important]',
     '[&_strong]:font-bold'
   ),
   {
@@ -26,9 +27,19 @@ const editorVariants = cva(
       disabled: {
         true: 'cursor-not-allowed opacity-50',
       },
+      focusRing: {
+        true: 'focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+        false: '',
+      },
+      size: {
+        sm: 'text-sm',
+        md: 'text-base',
+      },
     },
     defaultVariants: {
       variant: 'outline',
+      focusRing: true,
+      size: 'sm',
     },
   }
 );
@@ -37,12 +48,30 @@ export type EditorProps = PlateContentProps &
   VariantProps<typeof editorVariants>;
 
 const Editor = React.forwardRef<HTMLDivElement, EditorProps>(
-  ({ variant, disabled, focused, readOnly, className, ...props }, ref) => {
+  (
+    {
+      className,
+      disabled,
+      focused,
+      focusRing,
+      readOnly,
+      size,
+      variant,
+      ...props
+    },
+    ref
+  ) => {
     return (
       <div ref={ref} className="relative w-full">
         <PlateContent
           className={cn(
-            editorVariants({ variant, focused, disabled }),
+            editorVariants({
+              disabled,
+              focused,
+              focusRing,
+              size,
+              variant,
+            }),
             className
           )}
           disableDefaultStyles