From 9594fcf548dee42b721ac416c107331a9564c88b Mon Sep 17 00:00:00 2001
From: Felix Feng <felixfeng33@gmail.com>
Date: Mon, 11 Nov 2024 16:34:34 +0800
Subject: [PATCH 01/34] history

---
 apps/www/package.json                         |   3 +
 apps/www/src/app/api/uploadthing/core.ts      |  26 ++
 apps/www/src/app/api/uploadthing/route.ts     |  11 +
 apps/www/src/lib/plate/create-plate-ui.ts     |   8 +-
 .../default/lib/uploadthing/handle-error.ts   |  27 ++
 .../registry/default/lib/uploadthing/index.ts |   5 +
 .../default/lib/uploadthing/uploadthing.ts    |   6 +
 .../lib/uploadthing/use-upload-file.ts        |  86 +++++
 .../plate-ui/media-placeholder-element.tsx    | 193 ++++++++++
 .../plate-ui/media-placeholder-popover.tsx    | 335 ++++++++++++++++++
 .../src/registry/default/plate-ui/spinner.tsx |  30 ++
 .../src/registry/default/plate-ui/tabs.tsx    |  64 ++++
 packages/media/src/lib/media/index.ts         |   2 +-
 .../react/placeholder/PlaceholderPlugin.tsx   |  51 ++-
 .../placeholder/transforms/insertMedia.ts     |  31 +-
 yarn.lock                                     | 149 +++++++-
 16 files changed, 1017 insertions(+), 10 deletions(-)
 create mode 100644 apps/www/src/app/api/uploadthing/core.ts
 create mode 100644 apps/www/src/app/api/uploadthing/route.ts
 create mode 100644 apps/www/src/registry/default/lib/uploadthing/handle-error.ts
 create mode 100644 apps/www/src/registry/default/lib/uploadthing/index.ts
 create mode 100644 apps/www/src/registry/default/lib/uploadthing/uploadthing.ts
 create mode 100644 apps/www/src/registry/default/lib/uploadthing/use-upload-file.ts
 create mode 100644 apps/www/src/registry/default/plate-ui/media-placeholder-element.tsx
 create mode 100644 apps/www/src/registry/default/plate-ui/media-placeholder-popover.tsx
 create mode 100644 apps/www/src/registry/default/plate-ui/spinner.tsx
 create mode 100644 apps/www/src/registry/default/plate-ui/tabs.tsx

diff --git a/apps/www/package.json b/apps/www/package.json
index fcd52c7871..a2ff871bd4 100644
--- a/apps/www/package.json
+++ b/apps/www/package.json
@@ -132,6 +132,7 @@
     "@udecode/slate-react": "workspace:^",
     "@udecode/slate-utils": "workspace:^",
     "@udecode/utils": "workspace:^",
+    "@uploadthing/react": "7.1.0",
     "@vercel/og": "^0.6.2",
     "ai": "^3.4.10",
     "class-variance-authority": "^0.7.0",
@@ -170,6 +171,8 @@
     "ts-morph": "^22.0.0",
     "unist-builder": "4.0.0",
     "unist-util-visit": "^5.0.0",
+    "uploadthing": "7.2.0",
+    "use-file-picker": "2.1.2",
     "vaul": "0.9.0"
   },
   "devDependencies": {
diff --git a/apps/www/src/app/api/uploadthing/core.ts b/apps/www/src/app/api/uploadthing/core.ts
new file mode 100644
index 0000000000..3233c7cb10
--- /dev/null
+++ b/apps/www/src/app/api/uploadthing/core.ts
@@ -0,0 +1,26 @@
+import type { FileRouter } from 'uploadthing/next';
+
+import { createUploadthing } from 'uploadthing/next';
+
+const f = createUploadthing();
+
+// FileRouter for your app, can contain multiple FileRoutes
+export const ourFileRouter = {
+  // Define as many FileRoutes as you like, each with a unique routeSlug
+  imageUploader: f(['image', 'text', 'blob', 'pdf', 'video', 'audio'])
+    // Set permissions and file types for this FileRoute
+    .middleware(async ({ req }) => {
+      // This code runs on your server before upload
+
+      // Whatever is returned here is accessible in onUploadComplete as `metadata`
+      return {};
+    })
+    .onUploadComplete(({ file, metadata }) => {
+      // This code RUNS ON YOUR SERVER after upload
+
+      // !!! Whatever is returned here is sent to the clientside `onClientUploadComplete` callback
+      return { file };
+    }),
+} satisfies FileRouter;
+
+export type OurFileRouter = typeof ourFileRouter;
diff --git a/apps/www/src/app/api/uploadthing/route.ts b/apps/www/src/app/api/uploadthing/route.ts
new file mode 100644
index 0000000000..379d038d96
--- /dev/null
+++ b/apps/www/src/app/api/uploadthing/route.ts
@@ -0,0 +1,11 @@
+import { createRouteHandler } from 'uploadthing/next';
+
+import { ourFileRouter } from './core';
+
+// Export routes for Next App Router
+export const { GET, POST } = createRouteHandler({
+  router: ourFileRouter,
+
+  // Apply an (optional) custom config:
+  // config: { ... },
+});
diff --git a/apps/www/src/lib/plate/create-plate-ui.ts b/apps/www/src/lib/plate/create-plate-ui.ts
index b5dd57b104..28687a8ea6 100644
--- a/apps/www/src/lib/plate/create-plate-ui.ts
+++ b/apps/www/src/lib/plate/create-plate-ui.ts
@@ -41,7 +41,11 @@ import {
   NumberedListPlugin,
   TodoListPlugin,
 } from '@udecode/plate-list/react';
-import { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react';
+import {
+  ImagePlugin,
+  MediaEmbedPlugin,
+  PlaceholderPlugin,
+} from '@udecode/plate-media/react';
 import {
   MentionInputPlugin,
   MentionPlugin,
@@ -75,6 +79,7 @@ import { KbdLeaf } from '@/registry/default/plate-ui/kbd-leaf';
 import { LinkElement } from '@/registry/default/plate-ui/link-element';
 import { ListElement } from '@/registry/default/plate-ui/list-element';
 import { MediaEmbedElement } from '@/registry/default/plate-ui/media-embed-element';
+import { MediaPlaceholderElement } from '@/registry/default/plate-ui/media-placeholder-element';
 import { MentionElement } from '@/registry/default/plate-ui/mention-element';
 import { MentionInputElement } from '@/registry/default/plate-ui/mention-input-element';
 import { ParagraphElement } from '@/registry/default/plate-ui/paragraph-element';
@@ -130,6 +135,7 @@ export const createPlateUI = ({
     [MentionPlugin.key]: MentionElement,
     [NumberedListPlugin.key]: withProps(ListElement, { variant: 'ol' }),
     [ParagraphPlugin.key]: ParagraphElement,
+    [PlaceholderPlugin.key]: MediaPlaceholderElement,
     [SlashInputPlugin.key]: SlashInputElement,
     [StrikethroughPlugin.key]: withProps(PlateLeaf, { as: 's' }),
     [SubscriptPlugin.key]: withProps(PlateLeaf, { as: 'sub' }),
diff --git a/apps/www/src/registry/default/lib/uploadthing/handle-error.ts b/apps/www/src/registry/default/lib/uploadthing/handle-error.ts
new file mode 100644
index 0000000000..f04db185ad
--- /dev/null
+++ b/apps/www/src/registry/default/lib/uploadthing/handle-error.ts
@@ -0,0 +1,27 @@
+import { isRedirectError } from 'next/dist/client/components/redirect';
+import { toast } from 'sonner';
+import { z } from 'zod';
+
+export function getErrorMessage(err: unknown) {
+  const unknownError = 'Something went wrong, please try again later.';
+
+  if (err instanceof z.ZodError) {
+    const errors = err.issues.map((issue) => {
+      return issue.message;
+    });
+
+    return errors.join('\n');
+  } else if (err instanceof Error) {
+    return err.message;
+  } else if (isRedirectError(err)) {
+    throw err;
+  } else {
+    return unknownError;
+  }
+}
+
+export function showErrorToast(err: unknown) {
+  const errorMessage = getErrorMessage(err);
+
+  return toast.error(errorMessage);
+}
diff --git a/apps/www/src/registry/default/lib/uploadthing/index.ts b/apps/www/src/registry/default/lib/uploadthing/index.ts
new file mode 100644
index 0000000000..55dcc822a3
--- /dev/null
+++ b/apps/www/src/registry/default/lib/uploadthing/index.ts
@@ -0,0 +1,5 @@
+export * from './handle-error';
+
+export * from './uploadthing';
+
+export * from './use-upload-file';
diff --git a/apps/www/src/registry/default/lib/uploadthing/uploadthing.ts b/apps/www/src/registry/default/lib/uploadthing/uploadthing.ts
new file mode 100644
index 0000000000..90f48864d6
--- /dev/null
+++ b/apps/www/src/registry/default/lib/uploadthing/uploadthing.ts
@@ -0,0 +1,6 @@
+import type { OurFileRouter } from '@/app/api/uploadthing/core';
+
+import { generateReactHelpers } from '@uploadthing/react';
+
+export const { uploadFiles, useUploadThing } =
+  generateReactHelpers<OurFileRouter>();
diff --git a/apps/www/src/registry/default/lib/uploadthing/use-upload-file.ts b/apps/www/src/registry/default/lib/uploadthing/use-upload-file.ts
new file mode 100644
index 0000000000..9c2d867d2c
--- /dev/null
+++ b/apps/www/src/registry/default/lib/uploadthing/use-upload-file.ts
@@ -0,0 +1,86 @@
+import * as React from 'react';
+
+import type { OurFileRouter } from '@/app/api/uploadthing/core';
+import type {
+  ClientUploadedFileData,
+  UploadFilesOptions,
+} from 'uploadthing/types';
+
+import { toast } from 'sonner';
+
+import { getErrorMessage } from './handle-error';
+import { uploadFiles } from './uploadthing';
+
+export interface UploadedFile<T = unknown> extends ClientUploadedFileData<T> {}
+
+interface UseUploadFileProps
+  extends Pick<
+    UploadFilesOptions<OurFileRouter, keyof OurFileRouter>,
+    'headers' | 'onUploadBegin' | 'onUploadProgress' | 'skipPolling'
+  > {
+  defaultUploadedFiles?: UploadedFile[];
+  onUploadComplete?: (files: UploadedFile[]) => void;
+  onUploadError?: (error: unknown) => void;
+}
+
+export function useUploadFile(
+  endpoint: keyof OurFileRouter,
+  {
+    defaultUploadedFiles = [],
+    onUploadComplete,
+    onUploadError,
+    ...props
+  }: UseUploadFileProps = {}
+) {
+  const [uploadedFiles, setUploadedFiles] =
+    React.useState<UploadedFile[]>(defaultUploadedFiles);
+  const [progresses, setProgresses] = React.useState<Record<string, number>>(
+    {}
+  );
+  const [isUploading, setIsUploading] = React.useState(false);
+
+  async function uploadThings(files: File[]) {
+    setIsUploading(true);
+
+    try {
+      const res = await uploadFiles(endpoint, {
+        ...props,
+        files,
+        onUploadProgress: ({ file, progress }) => {
+          setProgresses((prev) => {
+            return {
+              ...prev,
+              [file.name]: Math.min(progress, 100),
+            };
+          });
+        },
+      });
+
+      setUploadedFiles((prev) => (prev ? [...prev, ...res] : res));
+
+      onUploadComplete?.(res);
+
+      return uploadedFiles;
+    } catch (error) {
+      const errorMessage = getErrorMessage(error);
+
+      const message =
+        errorMessage.length > 0
+          ? errorMessage
+          : 'Something went wrong, please try again later.';
+
+      toast.error(message);
+      onUploadError?.(error);
+    } finally {
+      setProgresses({});
+      setIsUploading(false);
+    }
+  }
+
+  return {
+    isUploading,
+    progresses,
+    uploadFiles: uploadThings,
+    uploadedFiles,
+  };
+}
diff --git a/apps/www/src/registry/default/plate-ui/media-placeholder-element.tsx b/apps/www/src/registry/default/plate-ui/media-placeholder-element.tsx
new file mode 100644
index 0000000000..63df78723e
--- /dev/null
+++ b/apps/www/src/registry/default/plate-ui/media-placeholder-element.tsx
@@ -0,0 +1,193 @@
+'use client';
+
+import React, { useEffect, useRef, useState } from 'react';
+import type { ReactNode } from 'react';
+
+import { cn } from '@udecode/cn';
+import { withHOC, withRef } from '@udecode/plate-common/react';
+import {
+  AudioPlugin,
+  FilePlugin,
+  ImagePlugin,
+  PlaceholderProvider,
+  VideoPlugin,
+  usePlaceholderElementState,
+} from '@udecode/plate-media/react';
+import { AudioLines, FileUp, Film, ImageIcon } from 'lucide-react';
+
+import { MediaPlaceholderPopover } from './media-placeholder-popover';
+import { PlateElement } from './plate-element';
+import { Spinner } from './spinner';
+
+const CONTENT: Record<
+  string,
+  {
+    content: ReactNode;
+    icon: ReactNode;
+  }
+> = {
+  [AudioPlugin.key]: {
+    content: 'Add an audio file',
+    icon: <AudioLines />,
+  },
+  [FilePlugin.key]: {
+    content: 'Add a file',
+    icon: <FileUp />,
+  },
+  [ImagePlugin.key]: {
+    content: 'Add an image',
+    icon: <ImageIcon />,
+  },
+  [VideoPlugin.key]: {
+    content: 'Add a video',
+    icon: <Film />,
+  },
+};
+
+export const MediaPlaceholderElement = withHOC(
+  PlaceholderProvider,
+  withRef<typeof PlateElement>(
+    ({ children, className, editor, nodeProps, ...props }, ref) => {
+      const { mediaType, progresses, progressing, setSize, updatedFiles } =
+        usePlaceholderElementState();
+
+      const currentContent = CONTENT[mediaType];
+
+      const isImage = mediaType === ImagePlugin.key;
+
+      const file: File | undefined = updatedFiles?.[0];
+      const progress = file ? progresses?.[file.name] : undefined;
+
+      const imageRef = useRef<HTMLImageElement>(null);
+      useEffect(() => {
+        if (!imageRef.current) return;
+
+        const { height, width } = imageRef.current;
+
+        setSize?.({
+          height,
+          width,
+        });
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+      }, [imageRef.current]);
+
+      return (
+        <PlateElement
+          ref={ref}
+          className={cn('relative my-1', className)}
+          editor={editor}
+          {...props}
+        >
+          <MediaPlaceholderPopover>
+            {(!progressing || !isImage) && (
+              <div
+                className={cn(
+                  'flex cursor-pointer select-none items-center rounded-sm bg-muted p-3 pr-9 hover:bg-primary/10'
+                )}
+                contentEditable={false}
+                role="button"
+              >
+                <div className="relative mr-3 flex text-muted-foreground/80 [&_svg]:size-6">
+                  {currentContent.icon}
+                </div>
+                <div className="whitespace-nowrap text-sm text-muted-foreground">
+                  <div>{progressing ? file?.name : currentContent.content}</div>
+
+                  {progressing && !isImage && (
+                    <div className="mt-1 flex items-center gap-1.5">
+                      <div>{formatBytes(file.size)}</div>
+                      <div>–</div>
+                      <div className="flex items-center">
+                        <Spinner className="mr-1 size-3.5" />
+                        {progress ?? 0}%
+                      </div>
+                    </div>
+                  )}
+                </div>
+              </div>
+            )}
+          </MediaPlaceholderPopover>
+
+          {isImage && progressing && file && (
+            <ImageProgress
+              file={file}
+              imageRef={imageRef}
+              progress={progress}
+            />
+          )}
+
+          {children}
+        </PlateElement>
+      );
+    }
+  )
+);
+
+export function ImageProgress({
+  className,
+  file,
+  imageRef,
+  progress = 0,
+}: {
+  file: File;
+  className?: string;
+  imageRef?: React.RefObject<HTMLImageElement>;
+  progress?: number;
+}) {
+  const [objectUrl, setObjectUrl] = useState<string | null>(null);
+
+  useEffect(() => {
+    const url = URL.createObjectURL(file);
+    setObjectUrl(url);
+
+    return () => {
+      URL.revokeObjectURL(url);
+    };
+  }, [file]);
+
+  if (!objectUrl) {
+    return null;
+  }
+
+  return (
+    <div className={cn('relative', className)} contentEditable={false}>
+      <img
+        ref={imageRef}
+        className="h-auto w-full rounded-sm object-cover"
+        alt={file.name}
+        src={objectUrl}
+      />
+      {progress < 100 && (
+        <div className="absolute bottom-1 right-1 flex items-center space-x-2 rounded-full bg-black/50 px-1 py-0.5">
+          <Spinner />
+          <span className="text-xs font-medium text-white">
+            {Math.round(progress)}%
+          </span>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export function formatBytes(
+  bytes: number,
+  opts: {
+    decimals?: number;
+    sizeType?: 'accurate' | 'normal';
+  } = {}
+) {
+  const { decimals = 0, sizeType = 'normal' } = opts;
+
+  const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
+  const accurateSizes = ['Bytes', 'KiB', 'MiB', 'GiB', 'TiB'];
+
+  if (bytes === 0) return '0 Byte';
+
+  const i = Math.floor(Math.log(bytes) / Math.log(1024));
+
+  return `${(bytes / Math.pow(1024, i)).toFixed(decimals)} ${
+    sizeType === 'accurate'
+      ? (accurateSizes[i] ?? 'Bytest')
+      : (sizes[i] ?? 'Bytes')
+  }`;
+}
diff --git a/apps/www/src/registry/default/plate-ui/media-placeholder-popover.tsx b/apps/www/src/registry/default/plate-ui/media-placeholder-popover.tsx
new file mode 100644
index 0000000000..82c7f67098
--- /dev/null
+++ b/apps/www/src/registry/default/plate-ui/media-placeholder-popover.tsx
@@ -0,0 +1,335 @@
+'use client';
+
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+
+import {
+  insertNodes,
+  removeNodes,
+  withoutSavingHistory,
+} from '@udecode/plate-common';
+import {
+  findNodePath,
+  useEditorPlugin,
+  useEditorRef,
+} from '@udecode/plate-common/react';
+import { setMediaNode } from '@udecode/plate-media';
+import {
+  AudioPlugin,
+  FilePlugin,
+  ImagePlugin,
+  PlaceholderPlugin,
+  UploadErrorCode,
+  VideoPlugin,
+  usePlaceholderPopoverState,
+} from '@udecode/plate-media/react';
+import { toast } from 'sonner';
+import { useFilePicker } from 'use-file-picker';
+
+import { useUploadFile } from '../lib/uploadthing';
+import { Button } from './button';
+import { Input } from './input';
+import { Popover, PopoverContent, PopoverTrigger } from './popover';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from './tabs';
+
+const MEDIA_CONFIG: Record<
+  string,
+  {
+    accept: string[];
+    buttonText: string;
+    embedText: string;
+  }
+> = {
+  [AudioPlugin.key]: {
+    accept: ['audio/*'],
+    buttonText: 'Upload Audio',
+    embedText: 'Embed audio',
+  },
+  [FilePlugin.key]: {
+    accept: ['*'],
+    buttonText: 'Choose a file',
+    embedText: 'Embed file',
+  },
+  [ImagePlugin.key]: {
+    accept: ['image/*'],
+    buttonText: 'Upload file',
+    embedText: 'Embed image',
+  },
+  [VideoPlugin.key]: {
+    accept: ['video/*'],
+    buttonText: 'Upload video',
+    embedText: 'Embed video',
+  },
+};
+
+export interface MediaPopoverProps {
+  children: React.ReactNode;
+}
+
+export const MediaPlaceholderPopover = ({ children }: MediaPopoverProps) => {
+  const editor = useEditorRef();
+
+  const {
+    id,
+    element,
+    mediaType,
+    readOnly,
+    selected,
+    setIsUploading,
+    setProgresses,
+    setUpdatedFiles,
+    size,
+  } = usePlaceholderPopoverState();
+  const [open, setOpen] = useState(false);
+
+  const currentMedia = MEDIA_CONFIG[mediaType];
+
+  const { api, getOption } = useEditorPlugin(PlaceholderPlugin);
+
+  // const mediaConfig = api.placeholder.getMediaConfig(mediaType as MediaKeys);
+  const multiple = getOption('multiple') ?? true;
+
+  const { isUploading, progresses, uploadFiles, uploadedFiles } = useUploadFile(
+    'imageUploader',
+    {
+      defaultUploadedFiles: [],
+    }
+  );
+
+  const replaceCurrentPlaceholder = useCallback(
+    (file: File) => {
+      setUpdatedFiles([file]);
+      void uploadFiles([file]);
+      api.placeholder.addUploadingFile(element.id as string, file);
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [element.id]
+  );
+
+  /** Open file picker */
+  const { openFilePicker } = useFilePicker({
+    accept: currentMedia.accept,
+    multiple,
+    onFilesSelected: ({ plainFiles: updatedFiles }) => {
+      const firstFile = updatedFiles[0];
+      const restFiles = updatedFiles.slice(1);
+
+      replaceCurrentPlaceholder(firstFile);
+
+      restFiles.length > 0 && (editor as any).tf.insert.media(restFiles);
+    },
+  });
+
+  // React dev mode will call useEffect twice
+  const isReplaced = useRef(false);
+  /** Paste and drop */
+  useEffect(() => {
+    if (isReplaced.current) return;
+
+    isReplaced.current = true;
+    const currentFiles = api.placeholder.getUploadingFile(element.id as string);
+
+    if (!currentFiles) return;
+
+    replaceCurrentPlaceholder(currentFiles);
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isReplaced]);
+
+  useEffect(() => {
+    const uploaded = uploadedFiles.length;
+
+    if (!uploaded) return;
+
+    const fileInfo = uploadedFiles[0];
+
+    const path = findNodePath(editor, element);
+
+    // replaceNode<TImageElement>(editor, {
+    //   at: path!,
+    //   nodes: [
+    //     {
+    //       children: [],
+    //       initialHeight: size!.height,
+    //       initialWidth: size!.width,
+    //       isUpload: true,
+    //       name: mediaType === FilePlugin.key ? fileInfo.name : '',
+    //       placeholderId: element.id as string,
+    //       type: mediaType!,
+    //       url: fileInfo.url,
+    //     },
+    //   ],
+    // });
+
+    withoutSavingHistory(editor, () => {
+      removeNodes(editor, { at: path });
+    });
+
+    insertNodes(
+      editor,
+      {
+        children: [],
+        initialHeight: size!.height,
+        initialWidth: size!.width,
+        isUpload: true,
+        name: mediaType === FilePlugin.key ? fileInfo.name : '',
+        placeholderId: element.id as string,
+        type: mediaType!,
+        url: fileInfo.url,
+      },
+      { at: path }
+    );
+
+    // setMediaNode(
+    //   editor,
+    //   {
+    //     id: nanoid(),
+    //     initialHeight: size?.height,
+    //     initialWidth: size?.width,
+    //     isUpload: true,
+    //     name: mediaType === FilePlugin.key ? fileInfo.name : '',
+    //     placeholderId: element.id as string,
+    //     type: mediaType!,
+    //     url: fileInfo.url,
+    //   },
+    //   { at: path }
+    // );
+
+    api.placeholder.removeUploadingFile(element.id as string);
+
+    // mergeMarkedBatch(editor, PlaceholderPlugin.key);
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [uploadedFiles, element.id, size]);
+
+  const [embedValue, setEmbedValue] = useState('');
+
+  const onEmbed = useCallback(
+    (value: string) => {
+      setMediaNode(editor, {
+        type: mediaType,
+        url: value,
+      });
+    },
+    [editor, mediaType]
+  );
+
+  useEffect(() => {
+    setOpen(selected);
+  }, [selected, setOpen]);
+
+  useEffect(() => {
+    if (isUploading) {
+      setOpen(false);
+    }
+  }, [isUploading]);
+
+  useEffect(() => {
+    setProgresses(progresses);
+    setIsUploading(isUploading);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [id, progresses, isUploading]);
+
+  if (readOnly) return <>{children}</>;
+
+  return (
+    <Popover open={open} onOpenChange={setOpen} modal={false}>
+      <PopoverTrigger asChild>{children}</PopoverTrigger>
+
+      <PopoverContent
+        className="flex flex-col"
+        onOpenAutoFocus={(e) => e.preventDefault()}
+      >
+        <Tabs className="w-full shrink-0" defaultValue="account">
+          <TabsList className="px-2" onMouseDown={(e) => e.preventDefault()}>
+            <TabsTrigger value="account">Upload</TabsTrigger>
+            <TabsTrigger value="password">Embed link</TabsTrigger>
+          </TabsList>
+          <TabsContent className="w-[300px] px-3 py-2" value="account">
+            <Button className="w-full" onClick={openFilePicker}>
+              {currentMedia.buttonText}
+            </Button>
+            <div className="mt-3 text-xs text-muted-foreground">
+              The maximum size per file is 5MB
+            </div>
+          </TabsContent>
+
+          <TabsContent
+            className="w-[300px] px-3 pb-3 pt-2 text-center"
+            value="password"
+          >
+            <Input
+              value={embedValue}
+              onChange={(e) => setEmbedValue(e.target.value)}
+              placeholder="Paste the link..."
+            />
+
+            <Button
+              className="mt-2 w-full max-w-[300px]"
+              onClick={() => onEmbed(embedValue)}
+            >
+              {currentMedia.embedText}
+            </Button>
+          </TabsContent>
+        </Tabs>
+      </PopoverContent>
+    </Popover>
+  );
+};
+
+export const useUploadErrorToast = () => {
+  const editor = useEditorRef();
+
+  const uploadError = editor.useOption(PlaceholderPlugin, 'error');
+
+  useEffect(() => {
+    if (!uploadError) return;
+
+    const { code, data } = uploadError;
+
+    switch (code) {
+      case UploadErrorCode.INVALID_FILE_SIZE: {
+        toast.error(
+          `The size of files ${data.files
+            .map((f) => f.name)
+            .join(', ')} is invalid`
+        );
+
+        break;
+      }
+      case UploadErrorCode.INVALID_FILE_TYPE: {
+        toast.error(
+          `The type of files ${data.files
+            .map((f) => f.name)
+            .join(', ')} is invalid`
+        );
+
+        break;
+      }
+      case UploadErrorCode.TOO_LARGE: {
+        toast.error(
+          `The size of files ${data.files
+            .map((f) => f.name)
+            .join(', ')} is too large than ${data.maxFileSize}`
+        );
+
+        break;
+      }
+      case UploadErrorCode.TOO_LESS_FILES: {
+        toast.error(
+          `The mini um number of files is ${data.minFileCount} for ${data.fileType}`
+        );
+
+        break;
+      }
+      case UploadErrorCode.TOO_MANY_FILES: {
+        toast.error(
+          `The maximum number of files is ${data.maxFileCount} ${
+            data.fileType ? `for ${data.fileType}` : ''
+          }`
+        );
+
+        break;
+      }
+    }
+  }, [uploadError]);
+};
diff --git a/apps/www/src/registry/default/plate-ui/spinner.tsx b/apps/www/src/registry/default/plate-ui/spinner.tsx
new file mode 100644
index 0000000000..742d2bad76
--- /dev/null
+++ b/apps/www/src/registry/default/plate-ui/spinner.tsx
@@ -0,0 +1,30 @@
+import React from 'react';
+
+import { cn } from '@udecode/cn';
+import { type VariantProps, cva } from 'class-variance-authority';
+import { type LucideProps, Loader2Icon } from 'lucide-react';
+
+const spinnerVariants = cva('animate-spin text-muted-foreground', {
+  defaultVariants: {
+    size: 'default',
+  },
+  variants: {
+    size: {
+      default: 'size-4',
+      icon: 'size-10',
+      lg: 'size-6',
+      sm: 'size-2',
+    },
+  },
+});
+
+export const Spinner = ({
+  className,
+  size,
+  ...props
+}: Partial<LucideProps & VariantProps<typeof spinnerVariants>>) => (
+  <Loader2Icon
+    className={cn(spinnerVariants({ size }), className)}
+    {...props}
+  />
+);
diff --git a/apps/www/src/registry/default/plate-ui/tabs.tsx b/apps/www/src/registry/default/plate-ui/tabs.tsx
new file mode 100644
index 0000000000..bea6294b37
--- /dev/null
+++ b/apps/www/src/registry/default/plate-ui/tabs.tsx
@@ -0,0 +1,64 @@
+'use client';
+
+import * as React from 'react';
+
+import * as TabsPrimitive from '@radix-ui/react-tabs';
+import { cn } from '@udecode/cn';
+import { type VariantProps, cva } from 'class-variance-authority';
+
+const Tabs = TabsPrimitive.Root;
+
+const tabsListVariants = cva(
+  'inline-flex h-10 w-full items-center border-b border-border bg-background px-2 text-sm'
+);
+
+const TabsList = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List> &
+    VariantProps<typeof tabsListVariants>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.List
+    ref={ref}
+    className={cn(tabsListVariants(), className)}
+    {...props}
+  />
+));
+TabsList.displayName = TabsPrimitive.List.displayName;
+
+const tabsTriggerVariants = cva(
+  cn(
+    'relative inline-flex h-[28px] items-center justify-center whitespace-nowrap rounded-sm px-2 transition-all disabled:pointer-events-none disabled:opacity-50',
+    'text-muted-foreground/80 ring-offset-background hover:bg-accent hover:text-accent-foreground',
+    'data-[state=active]:text-foreground data-[state=active]:before:absolute data-[state=active]:before:bottom-[-6px] data-[state=active]:before:left-2 data-[state=active]:before:h-[2px] data-[state=active]:before:w-[calc(100%-16px)] data-[state=active]:before:bg-primary data-[state=active]:before:content-[""]'
+  )
+);
+
+const TabsTrigger = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger> &
+    VariantProps<typeof tabsTriggerVariants>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Trigger
+    ref={ref}
+    className={cn(tabsTriggerVariants(), className)}
+    {...props}
+  />
+));
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
+
+const TabsContent = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Content
+    ref={ref}
+    className={cn(
+      'mt-2 ring-offset-background focus-visible:outline-none',
+      className
+    )}
+    {...props}
+  />
+));
+TabsContent.displayName = TabsPrimitive.Content.displayName;
+
+export { Tabs, TabsContent, TabsList, TabsTrigger };
diff --git a/packages/media/src/lib/media/index.ts b/packages/media/src/lib/media/index.ts
index 7f9a061e57..4a95d1b952 100644
--- a/packages/media/src/lib/media/index.ts
+++ b/packages/media/src/lib/media/index.ts
@@ -4,4 +4,4 @@
 
 export * from './insertMedia';
 export * from './parseMediaUrl';
-export type * from './types';
+export * from './types';
diff --git a/packages/media/src/react/placeholder/PlaceholderPlugin.tsx b/packages/media/src/react/placeholder/PlaceholderPlugin.tsx
index 1df999168a..466b601b34 100644
--- a/packages/media/src/react/placeholder/PlaceholderPlugin.tsx
+++ b/packages/media/src/react/placeholder/PlaceholderPlugin.tsx
@@ -4,6 +4,7 @@ import {
   getAncestorNode,
   getNodeString,
   removeNodes,
+  withoutSavingHistory,
 } from '@udecode/plate-common';
 import { findEventRange, toTPlatePlugin } from '@udecode/plate-common/react';
 
@@ -30,6 +31,7 @@ export const PlaceholderPlugin = toTPlatePlugin<
   ExtendConfig<
     PlaceholderConfig,
     {
+      disableEmptyPlaceholder: boolean;
       disabledDndPlugin: boolean;
       uploadConfig: UploadConfig;
       uploadingFiles: Record<string, File>;
@@ -41,7 +43,54 @@ export const PlaceholderPlugin = toTPlatePlugin<
     { placeholder: PlaceholderApi }
   >
 >(BasePlaceholderPlugin, {
+  extendEditor: ({ editor, getOption }) => {
+    const disableEmptyPlaceholder = getOption('disableEmptyPlaceholder');
+
+    const { normalizeNode, undo } = editor;
+
+    editor.normalizeNode = (entry, options) => {
+      if (!disableEmptyPlaceholder) return normalizeNode(entry, options);
+
+      const [node, path] = entry;
+
+      if (node.type === PlaceholderPlugin.key) {
+        const uploadingFiles = getOption('uploadingFiles');
+
+        const isLoading = uploadingFiles?.[node.id];
+
+        if (!isLoading) {
+          removeNodes(editor, { at: path });
+        }
+      }
+
+      return normalizeNode(entry, options);
+    };
+
+    editor.undo = () => {
+      if (disableEmptyPlaceholder) {
+        const uploadingFiles = getOption('uploadingFiles');
+
+        if (!uploadingFiles) return undo();
+
+        const keys = Object.keys(uploadingFiles);
+
+        for (const key of keys) {
+          withoutSavingHistory(editor, () => {
+            removeNodes(editor, {
+              at: [],
+              match: (node) => node.id === key,
+            });
+          });
+        }
+      }
+
+      return undo();
+    };
+
+    return editor;
+  },
   options: {
+    disableEmptyPlaceholder: true,
     disabledDndPlugin: false,
     error: null,
     maxFileCount: 5,
@@ -157,7 +206,7 @@ export const PlaceholderPlugin = toTPlatePlugin<
 
           if (getNodeString(node).length === 0) {
             removeNodes(editor, { at: path });
-            tf.insert.media(files, path);
+            tf.insert.media(files, { at: path });
             inserted = true;
           }
         }
diff --git a/packages/media/src/react/placeholder/transforms/insertMedia.ts b/packages/media/src/react/placeholder/transforms/insertMedia.ts
index 4dc76a873a..3513584960 100644
--- a/packages/media/src/react/placeholder/transforms/insertMedia.ts
+++ b/packages/media/src/react/placeholder/transforms/insertMedia.ts
@@ -1,6 +1,12 @@
 import type { PlateEditor } from '@udecode/plate-common/react';
 
-import { insertNodes, nanoid, withoutNormalizing } from '@udecode/plate-common';
+import {
+  type InsertNodesOptions,
+  insertNodes,
+  nanoid,
+  withoutNormalizing,
+  withoutSavingHistory,
+} from '@udecode/plate-common';
 import { Path } from 'slate';
 
 import { type TPlaceholderElement, BasePlaceholderPlugin } from '../../../lib';
@@ -13,7 +19,7 @@ import { validateFiles } from '../utils/validateFiles';
 export const insertMedia = (
   editor: PlateEditor,
   files: FileList,
-  at?: Path
+  options?: Omit<InsertNodesOptions, 'at'> & { at?: Path }
 ): any => {
   const api = editor.getApi(PlaceholderPlugin);
   const uploadConfig = editor.getOption(PlaceholderPlugin, 'uploadConfig');
@@ -54,6 +60,7 @@ export const insertMedia = (
   }
 
   let currentAt: Path | undefined;
+  const { at, nextBlock = true, ...restOptions } = options ?? {};
 
   Array.from(files).forEach((file, index) => {
     if (index === 0) {
@@ -66,7 +73,9 @@ export const insertMedia = (
 
     const id = nanoid();
 
-    withoutNormalizing(editor, () =>
+    api.placeholder.addUploadingFile(id, file);
+
+    const insert = () => {
       insertNodes<TPlaceholderElement>(
         editor,
         {
@@ -75,10 +84,20 @@ export const insertMedia = (
           mediaType: getMediaType(file, uploadConfig)!,
           type: editor.getType(BasePlaceholderPlugin),
         },
-        { at: currentAt, nextBlock: false }
-      )
+        { at: currentAt, nextBlock, ...restOptions }
+      );
+    };
+
+    const disableEmptyPlaceholder = editor.getOption(
+      PlaceholderPlugin,
+      'disableEmptyPlaceholder'
     );
 
-    api.placeholder.addUploadingFile(id, file);
+    if (disableEmptyPlaceholder) {
+      withoutSavingHistory(editor, insert);
+      // insert();
+    } else {
+      withoutNormalizing(editor, insert);
+    }
   });
 };
diff --git a/yarn.lock b/yarn.lock
index 44e6a8743a..e94a94eec5 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1135,6 +1135,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@effect/platform@npm:0.69.8":
+  version: 0.69.8
+  resolution: "@effect/platform@npm:0.69.8"
+  dependencies:
+    find-my-way-ts: "npm:^0.1.5"
+    multipasta: "npm:^0.2.5"
+  peerDependencies:
+    effect: ^3.10.3
+  checksum: 10c0/23028c02a15d8504369d301ed49f42157ebcee2bc4caddf473f35231a725dfa75eb5363add2d686d5dec58bd500559b787a61827d423fb448a6b2dddf65d605c
+  languageName: node
+  linkType: hard
+
 "@emnapi/runtime@npm:^1.2.0":
   version: 1.3.1
   resolution: "@emnapi/runtime@npm:1.3.1"
@@ -7338,6 +7350,41 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@uploadthing/mime-types@npm:0.3.1":
+  version: 0.3.1
+  resolution: "@uploadthing/mime-types@npm:0.3.1"
+  checksum: 10c0/40acf3ce6427c979e8e8a9fc60169fee35c6b6b504d8ed462d62579f9f57a940c3b0afd9e387cec03247b86772fcfc93ba7539fa07cb43a9698c18dbdff5802f
+  languageName: node
+  linkType: hard
+
+"@uploadthing/react@npm:7.1.0":
+  version: 7.1.0
+  resolution: "@uploadthing/react@npm:7.1.0"
+  dependencies:
+    "@uploadthing/shared": "npm:7.1.0"
+    file-selector: "npm:0.6.0"
+  peerDependencies:
+    next: "*"
+    react: ^17.0.2 || ^18.0.0
+    uploadthing: 7.2.0
+  peerDependenciesMeta:
+    next:
+      optional: true
+  checksum: 10c0/4ef6353e38a9dcbaf3078943ddb111b5a9cc682bc4436ba3c124a8b92afcfad39c195a77592bffab567abb296598e804254b47b6507e28fd73872f4ac853c7de
+  languageName: node
+  linkType: hard
+
+"@uploadthing/shared@npm:7.1.0":
+  version: 7.1.0
+  resolution: "@uploadthing/shared@npm:7.1.0"
+  dependencies:
+    "@uploadthing/mime-types": "npm:0.3.1"
+    effect: "npm:3.10.3"
+    sqids: "npm:^0.3.0"
+  checksum: 10c0/655d316470c288a237f6e4c749f45d81ebdaed1b3d2dc6813180fc0e500029874130b2adf9b29681cc395f435c4b4ec4061bb38c6d3abbbbb88af5282c12925c
+  languageName: node
+  linkType: hard
+
 "@vercel/og@npm:^0.6.2":
   version: 0.6.3
   resolution: "@vercel/og@npm:0.6.3"
@@ -9582,6 +9629,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"effect@npm:3.10.3":
+  version: 3.10.3
+  resolution: "effect@npm:3.10.3"
+  dependencies:
+    fast-check: "npm:^3.21.0"
+  checksum: 10c0/aa09e50b67c9bf90e4ab11e34d8c9163de46d1ec2baa84ff8ce180f06e3b45798578cb5dca3051bb42596404f8978e24bc912790a984af1921618aef22570ee7
+  languageName: node
+  linkType: hard
+
 "ejs@npm:^3.1.10":
   version: 3.1.10
   resolution: "ejs@npm:3.1.10"
@@ -11040,6 +11096,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"fast-check@npm:^3.21.0":
+  version: 3.23.1
+  resolution: "fast-check@npm:3.23.1"
+  dependencies:
+    pure-rand: "npm:^6.1.0"
+  checksum: 10c0/d61ee4a7a2e1abc5126bf2f1894413f532f686b3d1fc15c67fefb60dcca66024934b69a6454d3eba92e6568ac1abbb9882080e212d255865c3b3bbe52c5bf702
+  languageName: node
+  linkType: hard
+
 "fast-deep-equal@npm:^3.1.1, fast-deep-equal@npm:^3.1.3":
   version: 3.1.3
   resolution: "fast-deep-equal@npm:3.1.3"
@@ -11196,6 +11261,24 @@ __metadata:
   languageName: node
   linkType: hard
 
+"file-selector@npm:0.2.4":
+  version: 0.2.4
+  resolution: "file-selector@npm:0.2.4"
+  dependencies:
+    tslib: "npm:^2.0.3"
+  checksum: 10c0/f43a8c370e69897c5c060dcfdeacb8828ccbdacdd2a255723c28fd16f230098ba079526de2dd0e7e519e4d9e72a06f2be0bbaee7ab8e09bed8f05b619f3fba94
+  languageName: node
+  linkType: hard
+
+"file-selector@npm:0.6.0":
+  version: 0.6.0
+  resolution: "file-selector@npm:0.6.0"
+  dependencies:
+    tslib: "npm:^2.4.0"
+  checksum: 10c0/477ca1b56274db9fee1a8a623c4bfef580389726a5fef843af8c1f2f17f70ec2d1e41b29115777c92e120a15f1cca734c6ef36bb48bfa2ee027c68da16cd0d28
+  languageName: node
+  linkType: hard
+
 "filelist@npm:^1.0.4":
   version: 1.0.4
   resolution: "filelist@npm:1.0.4"
@@ -11223,6 +11306,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"find-my-way-ts@npm:^0.1.5":
+  version: 0.1.5
+  resolution: "find-my-way-ts@npm:0.1.5"
+  checksum: 10c0/703797b8466e1fbf437f0a6f7e100e02ca5922c0d7afb0548b5e77fa9c7b4e4a5bed5d2589e27cc037a516b144e3ba334acce5369387a79975ffaf61b2900398
+  languageName: node
+  linkType: hard
+
 "find-process@npm:^1.4.7":
   version: 1.4.7
   resolution: "find-process@npm:1.4.7"
@@ -15812,6 +15902,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"multipasta@npm:^0.2.5":
+  version: 0.2.5
+  resolution: "multipasta@npm:0.2.5"
+  checksum: 10c0/f0790b1bdfc6b84ae6139982ead353957b668fe54fec8a4d93c19e9d051b02c837c93fbdff10b26bff2dbfcf7792c6435c27786c14ad82a0fb33b939c1bf96c6
+  languageName: node
+  linkType: hard
+
 "mz@npm:^2.7.0":
   version: 2.7.0
   resolution: "mz@npm:2.7.0"
@@ -17549,7 +17646,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"pure-rand@npm:^6.0.0":
+"pure-rand@npm:^6.0.0, pure-rand@npm:^6.1.0":
   version: 6.1.0
   resolution: "pure-rand@npm:6.1.0"
   checksum: 10c0/1abe217897bf74dcb3a0c9aba3555fe975023147b48db540aa2faf507aee91c03bf54f6aef0eb2bf59cc259a16d06b28eca37f0dc426d94f4692aeff02fb0e65
@@ -19493,6 +19590,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"sqids@npm:^0.3.0":
+  version: 0.3.0
+  resolution: "sqids@npm:0.3.0"
+  checksum: 10c0/2ce528b83f2780166b2e8025ece1e8262ee217ed51ab5656959cb6e1a885eee5b6ea86627ce6b0321d7b0eeb34a2ed455476c01c44e6e55e18cee52b3e1b9eb3
+  languageName: node
+  linkType: hard
+
 "ssri@npm:^10.0.0":
   version: 10.0.6
   resolution: "ssri@npm:10.0.6"
@@ -21152,6 +21256,35 @@ __metadata:
   languageName: node
   linkType: hard
 
+"uploadthing@npm:7.2.0":
+  version: 7.2.0
+  resolution: "uploadthing@npm:7.2.0"
+  dependencies:
+    "@effect/platform": "npm:0.69.8"
+    "@uploadthing/mime-types": "npm:0.3.1"
+    "@uploadthing/shared": "npm:7.1.0"
+    effect: "npm:3.10.3"
+  peerDependencies:
+    express: "*"
+    fastify: "*"
+    h3: "*"
+    next: "*"
+    tailwindcss: "*"
+  peerDependenciesMeta:
+    express:
+      optional: true
+    fastify:
+      optional: true
+    h3:
+      optional: true
+    next:
+      optional: true
+    tailwindcss:
+      optional: true
+  checksum: 10c0/49ee09f7fefd676c02597a618cff98c08b113398571ca9ab5748c69f3b56868e0c99579639aa0e59a496377b5de533b24fc38b65ea2fa95b97d82769f05b78b8
+  languageName: node
+  linkType: hard
+
 "uri-js@npm:^4.2.2":
   version: 4.4.1
   resolution: "uri-js@npm:4.4.1"
@@ -21230,6 +21363,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"use-file-picker@npm:2.1.2":
+  version: 2.1.2
+  resolution: "use-file-picker@npm:2.1.2"
+  dependencies:
+    file-selector: "npm:0.2.4"
+  peerDependencies:
+    react: ">=16"
+  checksum: 10c0/7d1c5f8800d87584731a9caf83b447f3633bc2dc05408f668b3349a374502f81a4116d216d2008d682f63076615894ad01a1c3a518d7142307a529a1d11776d0
+  languageName: node
+  linkType: hard
+
 "use-isomorphic-layout-effect@npm:^1.1.1":
   version: 1.1.2
   resolution: "use-isomorphic-layout-effect@npm:1.1.2"
@@ -21905,6 +22049,7 @@ __metadata:
     "@udecode/slate-react": "workspace:^"
     "@udecode/slate-utils": "workspace:^"
     "@udecode/utils": "workspace:^"
+    "@uploadthing/react": "npm:7.1.0"
     "@vercel/og": "npm:^0.6.2"
     ai: "npm:^3.4.10"
     autoprefixer: "npm:^10.4.20"
@@ -21963,6 +22108,8 @@ __metadata:
     typescript: "npm:5.6.2"
     unist-builder: "npm:4.0.0"
     unist-util-visit: "npm:^5.0.0"
+    uploadthing: "npm:7.2.0"
+    use-file-picker: "npm:2.1.2"
     vaul: "npm:0.9.0"
   languageName: unknown
   linkType: soft

From 2091066485614a207b1e755046560cb3c0ce1c04 Mon Sep 17 00:00:00 2001
From: Felix Feng <felixfeng33@gmail.com>
Date: Mon, 11 Nov 2024 20:03:24 +0800
Subject: [PATCH 02/34] history

---
 apps/www/package.json                         |   1 +
 apps/www/src/lib/plate/create-plate-ui.ts     |   6 +
 .../default/plate-ui/media-audio-element.tsx  |  44 ++++++
 .../default/plate-ui/media-file-element.tsx   |  62 +++++++++
 .../plate-ui/media-placeholder-popover.tsx    |  21 +--
 .../default/plate-ui/media-toolbar-button.tsx |  22 ++-
 .../default/plate-ui/media-video-element.tsx  | 129 ++++++++++++++++++
 .../react/placeholder/PlaceholderPlugin.tsx   |  50 ++-----
 .../placeholder/transforms/insertMedia.ts     |   5 +-
 .../src/react/placeholder/utils/history.ts    |  50 +++++++
 .../src/react/placeholder/utils/index.ts      |   1 +
 yarn.lock                                     |  41 +++++-
 12 files changed, 374 insertions(+), 58 deletions(-)
 create mode 100644 apps/www/src/registry/default/plate-ui/media-audio-element.tsx
 create mode 100644 apps/www/src/registry/default/plate-ui/media-file-element.tsx
 create mode 100644 apps/www/src/registry/default/plate-ui/media-video-element.tsx
 create mode 100644 packages/media/src/react/placeholder/utils/history.ts

diff --git a/apps/www/package.json b/apps/www/package.json
index a2ff871bd4..b557352ea5 100644
--- a/apps/www/package.json
+++ b/apps/www/package.json
@@ -155,6 +155,7 @@
     "react-dom": "^18.3.1",
     "react-lite-youtube-embed": "^2.4.0",
     "react-markdown": "9.0.1",
+    "react-player": "2.16.0",
     "react-resizable-panels": "^2.0.22",
     "react-syntax-highlighter": "^15.5.0",
     "react-tweet": "^3.2.1",
diff --git a/apps/www/src/lib/plate/create-plate-ui.ts b/apps/www/src/lib/plate/create-plate-ui.ts
index 28687a8ea6..240b319f17 100644
--- a/apps/www/src/lib/plate/create-plate-ui.ts
+++ b/apps/www/src/lib/plate/create-plate-ui.ts
@@ -42,9 +42,11 @@ import {
   TodoListPlugin,
 } from '@udecode/plate-list/react';
 import {
+  FilePlugin,
   ImagePlugin,
   MediaEmbedPlugin,
   PlaceholderPlugin,
+  VideoPlugin,
 } from '@udecode/plate-media/react';
 import {
   MentionInputPlugin,
@@ -79,7 +81,9 @@ import { KbdLeaf } from '@/registry/default/plate-ui/kbd-leaf';
 import { LinkElement } from '@/registry/default/plate-ui/link-element';
 import { ListElement } from '@/registry/default/plate-ui/list-element';
 import { MediaEmbedElement } from '@/registry/default/plate-ui/media-embed-element';
+import { MediaFileElement } from '@/registry/default/plate-ui/media-file-element';
 import { MediaPlaceholderElement } from '@/registry/default/plate-ui/media-placeholder-element';
+import { MediaVideoElement } from '@/registry/default/plate-ui/media-video-element';
 import { MentionElement } from '@/registry/default/plate-ui/mention-element';
 import { MentionInputElement } from '@/registry/default/plate-ui/mention-input-element';
 import { ParagraphElement } from '@/registry/default/plate-ui/paragraph-element';
@@ -116,6 +120,7 @@ export const createPlateUI = ({
     [DatePlugin.key]: DateElement,
     [EmojiInputPlugin.key]: EmojiInputElement,
     [ExcalidrawPlugin.key]: ExcalidrawElement,
+    [FilePlugin.key]: MediaFileElement,
     [FindReplacePlugin.key]: SearchHighlightLeaf,
     [HEADING_KEYS.h1]: withProps(HeadingElement, { variant: 'h1' }),
     [HEADING_KEYS.h2]: withProps(HeadingElement, { variant: 'h2' }),
@@ -148,6 +153,7 @@ export const createPlateUI = ({
     [TodoListPlugin.key]: TodoListElement,
     [TogglePlugin.key]: ToggleElement,
     [UnderlinePlugin.key]: withProps(PlateLeaf, { as: 'u' }),
+    [VideoPlugin.key]: MediaVideoElement,
   };
 
   if (placeholder) {
diff --git a/apps/www/src/registry/default/plate-ui/media-audio-element.tsx b/apps/www/src/registry/default/plate-ui/media-audio-element.tsx
new file mode 100644
index 0000000000..fa0b95a48c
--- /dev/null
+++ b/apps/www/src/registry/default/plate-ui/media-audio-element.tsx
@@ -0,0 +1,44 @@
+'use client';
+
+import React from 'react';
+
+import { cn, withRef } from '@udecode/cn';
+import { withHOC } from '@udecode/plate-common/react';
+import { useMediaState } from '@udecode/plate-media/react';
+import { ResizableProvider } from '@udecode/plate-resizable';
+
+import { Caption, CaptionTextarea } from './caption';
+import { PlateElement } from './plate-element';
+
+export const MediaAudioElement = withHOC(
+  ResizableProvider,
+  withRef<typeof PlateElement>(
+    ({ children, className, nodeProps, ...props }, ref) => {
+      const { align = 'center', readOnly, unsafeUrl } = useMediaState();
+
+      return (
+        <PlateElement
+          ref={ref}
+          className={cn('relative mb-1', className)}
+          {...props}
+        >
+          <figure className="group relative" contentEditable={false}>
+            <div className="h-16">
+              {/* eslint-disable-next-line jsx-a11y/media-has-caption */}
+              <audio className="size-full" src={unsafeUrl} controls />
+            </div>
+
+            <Caption style={{ width: '100%' }} align={align}>
+              <CaptionTextarea
+                className="h-20"
+                readOnly={readOnly}
+                placeholder="Write a caption..."
+              />
+            </Caption>
+          </figure>
+          {children}
+        </PlateElement>
+      );
+    }
+  )
+);
diff --git a/apps/www/src/registry/default/plate-ui/media-file-element.tsx b/apps/www/src/registry/default/plate-ui/media-file-element.tsx
new file mode 100644
index 0000000000..4ef5d1c0e0
--- /dev/null
+++ b/apps/www/src/registry/default/plate-ui/media-file-element.tsx
@@ -0,0 +1,62 @@
+'use client';
+
+import React from 'react';
+
+import { cn, withRef } from '@udecode/cn';
+import { withHOC } from '@udecode/plate-common/react';
+import { useMediaState } from '@udecode/plate-media/react';
+import { ResizableProvider } from '@udecode/plate-resizable';
+import { FileUp } from 'lucide-react';
+import { useReadOnly } from 'slate-react';
+
+import { Caption, CaptionTextarea } from './caption';
+import { PlateElement } from './plate-element';
+
+export const MediaFileElement = withHOC(
+  ResizableProvider,
+  withRef<typeof PlateElement>(
+    ({ children, className, nodeProps, ...props }, ref) => {
+      const readOnly = useReadOnly();
+
+      const { name, unsafeUrl } = useMediaState();
+
+      const onDownload = () => {
+        window.open(unsafeUrl);
+      };
+
+      return (
+        <PlateElement
+          ref={ref}
+          className={cn('relative my-px rounded-sm', className)}
+          {...props}
+        >
+          {/* eslint-disable-next-line jsx-a11y/interactive-supports-focus */}
+          <div
+            className="group relative m-0 flex cursor-pointer items-center rounded px-0.5 py-[3px] hover:bg-muted"
+            onClick={onDownload}
+            contentEditable={false}
+            role="button"
+          >
+            <div className="flex items-center gap-1 p-1">
+              <FileUp className="size-5" />
+
+              <div>{name}</div>
+
+              {/* TODO: add size */}
+              {/* <div className="text-muted-foreground">{element.size}</div> */}
+            </div>
+
+            <Caption align="left">
+              <CaptionTextarea
+                className="text-left"
+                readOnly={readOnly}
+                placeholder="Write a caption..."
+              />
+            </Caption>
+          </div>
+          {children}
+        </PlateElement>
+      );
+    }
+  )
+);
diff --git a/apps/www/src/registry/default/plate-ui/media-placeholder-popover.tsx b/apps/www/src/registry/default/plate-ui/media-placeholder-popover.tsx
index 82c7f67098..dfc0ccc226 100644
--- a/apps/www/src/registry/default/plate-ui/media-placeholder-popover.tsx
+++ b/apps/www/src/registry/default/plate-ui/media-placeholder-popover.tsx
@@ -20,6 +20,7 @@ import {
   PlaceholderPlugin,
   UploadErrorCode,
   VideoPlugin,
+  updateUploadHistory,
   usePlaceholderPopoverState,
 } from '@udecode/plate-media/react';
 import { toast } from 'sonner';
@@ -162,22 +163,22 @@ export const MediaPlaceholderPopover = ({ children }: MediaPopoverProps) => {
 
     withoutSavingHistory(editor, () => {
       removeNodes(editor, { at: path });
-    });
 
-    insertNodes(
-      editor,
-      {
-        children: [],
-        initialHeight: size!.height,
-        initialWidth: size!.width,
+      const node = {
+        children: [{ text: '' }],
+        initialHeight: size?.height,
+        initialWidth: size?.width,
         isUpload: true,
         name: mediaType === FilePlugin.key ? fileInfo.name : '',
         placeholderId: element.id as string,
         type: mediaType!,
         url: fileInfo.url,
-      },
-      { at: path }
-    );
+      };
+
+      insertNodes(editor, node, { at: path });
+
+      updateUploadHistory(editor, node);
+    });
 
     // setMediaNode(
     //   editor,
diff --git a/apps/www/src/registry/default/plate-ui/media-toolbar-button.tsx b/apps/www/src/registry/default/plate-ui/media-toolbar-button.tsx
index af5a051daf..4f6ada9d88 100644
--- a/apps/www/src/registry/default/plate-ui/media-toolbar-button.tsx
+++ b/apps/www/src/registry/default/plate-ui/media-toolbar-button.tsx
@@ -2,13 +2,12 @@
 
 import React from 'react';
 
+import type { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react';
+
 import { withRef } from '@udecode/cn';
-import {
-  type ImagePlugin,
-  type MediaEmbedPlugin,
-  useMediaToolbarButton,
-} from '@udecode/plate-media/react';
+import { useEditorRef } from '@udecode/plate-common/react';
 import { ImageIcon } from 'lucide-react';
+import { useFilePicker } from 'use-file-picker';
 
 import { ToolbarButton } from './toolbar';
 
@@ -18,10 +17,19 @@ export const MediaToolbarButton = withRef<
     nodeType?: typeof ImagePlugin.key | typeof MediaEmbedPlugin.key;
   }
 >(({ nodeType, ...rest }, ref) => {
-  const { props } = useMediaToolbarButton({ nodeType });
+  const editor = useEditorRef();
+
+  /** Open file picker */
+  const { openFilePicker } = useFilePicker({
+    accept: ['image/*'],
+    multiple: true,
+    onFilesSelected: ({ plainFiles: updatedFiles }) => {
+      (editor as any).tf.insert.media(updatedFiles);
+    },
+  });
 
   return (
-    <ToolbarButton ref={ref} {...props} {...rest}>
+    <ToolbarButton ref={ref} onClick={openFilePicker} {...rest}>
       <ImageIcon />
     </ToolbarButton>
   );
diff --git a/apps/www/src/registry/default/plate-ui/media-video-element.tsx b/apps/www/src/registry/default/plate-ui/media-video-element.tsx
new file mode 100644
index 0000000000..6108bacecb
--- /dev/null
+++ b/apps/www/src/registry/default/plate-ui/media-video-element.tsx
@@ -0,0 +1,129 @@
+'use client';
+
+import React from 'react';
+import LiteYouTubeEmbed from 'react-lite-youtube-embed';
+import ReactPlayer from 'react-player';
+
+import { cn, withRef } from '@udecode/cn';
+import { useEditorMounted, withHOC } from '@udecode/plate-common/react';
+import { useDraggable, useDraggableState } from '@udecode/plate-dnd';
+import { parseTwitterUrl, parseVideoUrl } from '@udecode/plate-media';
+import { useMediaState } from '@udecode/plate-media/react';
+import { ResizableProvider, useResizableStore } from '@udecode/plate-resizable';
+
+import { Caption, CaptionTextarea } from './caption';
+import { PlateElement } from './plate-element';
+import {
+  Resizable,
+  ResizeHandle,
+  mediaResizeHandleVariants,
+} from './resizable';
+
+export const MediaVideoElement = withHOC(
+  ResizableProvider,
+  withRef<typeof PlateElement>(
+    ({ children, className, nodeProps, ...props }, ref) => {
+      const {
+        align = 'center',
+        embed,
+        isUpload,
+        isYoutube,
+        readOnly,
+        unsafeUrl,
+      } = useMediaState({
+        urlParsers: [parseTwitterUrl, parseVideoUrl],
+      });
+      const width = useResizableStore().get.width();
+
+      const isEditorMounted = useEditorMounted();
+
+      const isTweet = true;
+
+      const state = useDraggableState({ element: props.element });
+      const { isDragging } = state;
+      const { handleRef } = useDraggable(state);
+
+      return (
+        <PlateElement
+          ref={ref}
+          className={cn('relative py-2.5', className)}
+          {...props}
+        >
+          <figure
+            className="relative m-0 cursor-default"
+            contentEditable={false}
+          >
+            <Resizable
+              className={cn(isDragging && 'opacity-50')}
+              align={align}
+              options={{
+                align,
+                maxWidth: isTweet ? 550 : '100%',
+                minWidth: isTweet ? 300 : 100,
+                readOnly,
+              }}
+            >
+              <div className="group/media">
+                <ResizeHandle
+                  className={mediaResizeHandleVariants({ direction: 'left' })}
+                  options={{ direction: 'left' }}
+                />
+
+                <ResizeHandle
+                  className={mediaResizeHandleVariants({ direction: 'right' })}
+                  options={{ direction: 'right' }}
+                />
+
+                {!isUpload && isYoutube && (
+                  <div ref={handleRef}>
+                    <LiteYouTubeEmbed
+                      id={embed!.id!}
+                      title="youtube"
+                      wrapperClass={cn(
+                        'aspect-video rounded-sm',
+                        // focused && selected && 'ring-2 ring-ring ring-offset-2',
+                        'relative block cursor-pointer bg-black bg-cover bg-center [contain:content]',
+                        '[&.lyt-activated]:before:absolute [&.lyt-activated]:before:top-0 [&.lyt-activated]:before:h-[60px] [&.lyt-activated]:before:w-full [&.lyt-activated]:before:bg-top [&.lyt-activated]:before:bg-repeat-x [&.lyt-activated]:before:pb-[50px] [&.lyt-activated]:before:[transition:all_0.2s_cubic-bezier(0,_0,_0.2,_1)]',
+                        '[&.lyt-activated]:before:bg-[url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADGCAYAAAAT+OqFAAAAdklEQVQoz42QQQ7AIAgEF/T/D+kbq/RWAlnQyyazA4aoAB4FsBSA/bFjuF1EOL7VbrIrBuusmrt4ZZORfb6ehbWdnRHEIiITaEUKa5EJqUakRSaEYBJSCY2dEstQY7AuxahwXFrvZmWl2rh4JZ07z9dLtesfNj5q0FU3A5ObbwAAAABJRU5ErkJggg==)]',
+                        'after:block after:pb-[var(--aspect-ratio)] after:content-[""]',
+                        '[&_>_iframe]:absolute [&_>_iframe]:left-0 [&_>_iframe]:top-0 [&_>_iframe]:size-full',
+                        '[&_>_.lty-playbtn]:z-[1] [&_>_.lty-playbtn]:h-[46px] [&_>_.lty-playbtn]:w-[70px] [&_>_.lty-playbtn]:rounded-[14%] [&_>_.lty-playbtn]:bg-[#212121] [&_>_.lty-playbtn]:opacity-80 [&_>_.lty-playbtn]:[transition:all_0.2s_cubic-bezier(0,_0,_0.2,_1)]',
+                        '[&:hover_>_.lty-playbtn]:bg-[red] [&:hover_>_.lty-playbtn]:opacity-100',
+                        '[&_>_.lty-playbtn]:before:border-y-[11px] [&_>_.lty-playbtn]:before:border-l-[19px] [&_>_.lty-playbtn]:before:border-r-0 [&_>_.lty-playbtn]:before:border-[transparent_transparent_transparent_#fff] [&_>_.lty-playbtn]:before:content-[""]',
+                        '[&_>_.lty-playbtn]:absolute [&_>_.lty-playbtn]:left-1/2 [&_>_.lty-playbtn]:top-1/2 [&_>_.lty-playbtn]:[transform:translate3d(-50%,-50%,0)]',
+                        '[&_>_.lty-playbtn]:before:absolute [&_>_.lty-playbtn]:before:left-1/2 [&_>_.lty-playbtn]:before:top-1/2 [&_>_.lty-playbtn]:before:[transform:translate3d(-50%,-50%,0)]',
+                        '[&.lyt-activated]:cursor-[unset]',
+                        '[&.lyt-activated]:before:pointer-events-none [&.lyt-activated]:before:opacity-0',
+                        '[&.lyt-activated_>_.lty-playbtn]:pointer-events-none [&.lyt-activated_>_.lty-playbtn]:!opacity-0'
+                      )}
+                    />
+                  </div>
+                )}
+
+                {/* TODO: Lazy load */}
+                {isUpload && isEditorMounted && (
+                  <div ref={handleRef}>
+                    <ReactPlayer
+                      height="100%"
+                      url={unsafeUrl}
+                      width="100%"
+                      controls
+                    />
+                  </div>
+                )}
+              </div>
+            </Resizable>
+
+            <Caption style={{ width }} align={align}>
+              <CaptionTextarea
+                readOnly={readOnly}
+                placeholder="Write a caption..."
+              />
+            </Caption>
+          </figure>
+          {children}
+        </PlateElement>
+      );
+    }
+  )
+);
diff --git a/packages/media/src/react/placeholder/PlaceholderPlugin.tsx b/packages/media/src/react/placeholder/PlaceholderPlugin.tsx
index 466b601b34..0c000fb394 100644
--- a/packages/media/src/react/placeholder/PlaceholderPlugin.tsx
+++ b/packages/media/src/react/placeholder/PlaceholderPlugin.tsx
@@ -4,7 +4,6 @@ import {
   getAncestorNode,
   getNodeString,
   removeNodes,
-  withoutSavingHistory,
 } from '@udecode/plate-common';
 import { findEventRange, toTPlatePlugin } from '@udecode/plate-common/react';
 
@@ -14,6 +13,7 @@ import type { MediaItemConfig, UploadError } from './type';
 import { type PlaceholderConfig, BasePlaceholderPlugin } from '../../lib';
 import { AudioPlugin, FilePlugin, ImagePlugin, VideoPlugin } from '../plugins';
 import { insertMedia } from './transforms/insertMedia';
+import { isHistoryMarked } from './utils/history';
 
 export type PlaceholderApi = {
   addUploadingFile: (id: string, file: File) => void;
@@ -43,48 +43,26 @@ export const PlaceholderPlugin = toTPlatePlugin<
     { placeholder: PlaceholderApi }
   >
 >(BasePlaceholderPlugin, {
-  extendEditor: ({ editor, getOption }) => {
-    const disableEmptyPlaceholder = getOption('disableEmptyPlaceholder');
+  extendEditor: ({ editor }) => {
+    const { apply, writeHistory } = editor;
 
-    const { normalizeNode, undo } = editor;
+    editor.writeHistory = (stack, batch) => {
+      if (isHistoryMarked(editor)) {
+        const newBatch = {
+          ...batch,
+          [PlaceholderPlugin.key]: true,
+        };
 
-    editor.normalizeNode = (entry, options) => {
-      if (!disableEmptyPlaceholder) return normalizeNode(entry, options);
-
-      const [node, path] = entry;
-
-      if (node.type === PlaceholderPlugin.key) {
-        const uploadingFiles = getOption('uploadingFiles');
-
-        const isLoading = uploadingFiles?.[node.id];
-
-        if (!isLoading) {
-          removeNodes(editor, { at: path });
-        }
+        return writeHistory(stack, newBatch);
       }
 
-      return normalizeNode(entry, options);
+      writeHistory(stack, batch);
     };
 
-    editor.undo = () => {
-      if (disableEmptyPlaceholder) {
-        const uploadingFiles = getOption('uploadingFiles');
-
-        if (!uploadingFiles) return undo();
-
-        const keys = Object.keys(uploadingFiles);
-
-        for (const key of keys) {
-          withoutSavingHistory(editor, () => {
-            removeNodes(editor, {
-              at: [],
-              match: (node) => node.id === key,
-            });
-          });
-        }
-      }
+    editor.apply = (op) => {
+      console.log(editor.history.undos);
 
-      return undo();
+      return apply(op);
     };
 
     return editor;
diff --git a/packages/media/src/react/placeholder/transforms/insertMedia.ts b/packages/media/src/react/placeholder/transforms/insertMedia.ts
index 3513584960..9441de17f9 100644
--- a/packages/media/src/react/placeholder/transforms/insertMedia.ts
+++ b/packages/media/src/react/placeholder/transforms/insertMedia.ts
@@ -5,7 +5,6 @@ import {
   insertNodes,
   nanoid,
   withoutNormalizing,
-  withoutSavingHistory,
 } from '@udecode/plate-common';
 import { Path } from 'slate';
 
@@ -14,6 +13,7 @@ import { PlaceholderPlugin } from '../PlaceholderPlugin';
 import { UploadErrorCode } from '../type';
 import { createUploadError, isUploadError } from '../utils/createUploadError';
 import { getMediaType } from '../utils/getMediaType';
+import { withHistoryMark } from '../utils/history';
 import { validateFiles } from '../utils/validateFiles';
 
 export const insertMedia = (
@@ -94,8 +94,7 @@ export const insertMedia = (
     );
 
     if (disableEmptyPlaceholder) {
-      withoutSavingHistory(editor, insert);
-      // insert();
+      withHistoryMark(editor, insert);
     } else {
       withoutNormalizing(editor, insert);
     }
diff --git a/packages/media/src/react/placeholder/utils/history.ts b/packages/media/src/react/placeholder/utils/history.ts
new file mode 100644
index 0000000000..c1ef274429
--- /dev/null
+++ b/packages/media/src/react/placeholder/utils/history.ts
@@ -0,0 +1,50 @@
+import type { TElement } from '@udecode/plate-common';
+import type { PlateEditor } from '@udecode/plate-common/react';
+
+import { PlaceholderPlugin } from '../PlaceholderPlugin';
+
+const historyMarks = new WeakMap<PlateEditor, boolean>();
+
+export const withHistoryMark = (editor: PlateEditor, fn: () => void) => {
+  historyMarks.set(editor, true);
+  fn();
+  historyMarks.set(editor, false);
+};
+
+export const isHistoryMarked = (editor: PlateEditor): boolean => {
+  return historyMarks.get(editor) ?? false;
+};
+
+export const updateUploadHistory = (editor: PlateEditor, node: TElement) => {
+  const index = editor.history.undos.findIndex(
+    (batch: any) => batch[PlaceholderPlugin.key]
+  );
+
+  const batch = editor.history.undos[index];
+
+  const newOperations: any[] = [];
+
+  for (const operation of batch.operations) {
+    if (
+      (operation.type === 'insert_node' && (operation.node as any)).id ===
+      node.placeholderId
+    ) {
+      newOperations.push({
+        ...operation,
+        node,
+      });
+
+      continue;
+    }
+
+    newOperations.push(operation);
+  }
+
+  const newBatch = {
+    ...batch,
+    [PlaceholderPlugin.key]: false,
+    operations: newOperations,
+  };
+
+  editor.history.undos[index] = newBatch;
+};
diff --git a/packages/media/src/react/placeholder/utils/index.ts b/packages/media/src/react/placeholder/utils/index.ts
index 1229070e05..5364a4aab8 100644
--- a/packages/media/src/react/placeholder/utils/index.ts
+++ b/packages/media/src/react/placeholder/utils/index.ts
@@ -6,6 +6,7 @@ export * from './createUploadError';
 export * from './fileSizeToBytes';
 export * from './getMediaType';
 export * from './groupFilesByType';
+export * from './history';
 export * from './matchFileType';
 export * from './validateFileItem';
 export * from './validateFiles';
diff --git a/yarn.lock b/yarn.lock
index e94a94eec5..0577aafa47 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -9275,7 +9275,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"deepmerge@npm:^4.2.2, deepmerge@npm:^4.3.1":
+"deepmerge@npm:^4.0.0, deepmerge@npm:^4.2.2, deepmerge@npm:^4.3.1":
   version: 4.3.1
   resolution: "deepmerge@npm:4.3.1"
   checksum: 10c0/e53481aaf1aa2c4082b5342be6b6d8ad9dfe387bc92ce197a66dea08bd4265904a087e75e464f14d1347cf2ac8afe1e4c16b266e0561cc5df29382d3c5f80044
@@ -14216,6 +14216,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"load-script@npm:^1.0.0":
+  version: 1.0.0
+  resolution: "load-script@npm:1.0.0"
+  checksum: 10c0/9919c777fe83f8a3a917f65c9c3ab186ad8b194248c57f413ef6e610194abc8484d123a6838d77ab33e5fa1a05a676b5dfe779c38cfe602bdd27c239423d0acd
+  languageName: node
+  linkType: hard
+
 "load-tsconfig@npm:^0.2.3":
   version: 0.2.5
   resolution: "load-tsconfig@npm:0.2.5"
@@ -14902,6 +14909,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"memoize-one@npm:^5.1.1":
+  version: 5.2.1
+  resolution: "memoize-one@npm:5.2.1"
+  checksum: 10c0/fd22dbe9a978a2b4f30d6a491fc02fb90792432ad0dab840dc96c1734d2bd7c9cdeb6a26130ec60507eb43230559523615873168bcbe8fafab221c30b11d54c1
+  languageName: node
+  linkType: hard
+
 "mensch@npm:^0.3.4":
   version: 0.3.4
   resolution: "mensch@npm:0.3.4"
@@ -17497,7 +17511,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"prop-types@npm:^15.8.1":
+"prop-types@npm:^15.7.2, prop-types@npm:^15.8.1":
   version: 15.8.1
   resolution: "prop-types@npm:15.8.1"
   dependencies:
@@ -17783,6 +17797,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-fast-compare@npm:^3.0.1":
+  version: 3.2.2
+  resolution: "react-fast-compare@npm:3.2.2"
+  checksum: 10c0/0bbd2f3eb41ab2ff7380daaa55105db698d965c396df73e6874831dbafec8c4b5b08ba36ff09df01526caa3c61595247e3269558c284e37646241cba2b90a367
+  languageName: node
+  linkType: hard
+
 "react-is@npm:18.3.1, react-is@npm:^16.12.0 || ^17.0.0 || ^18.0.0, react-is@npm:^18.0.0, react-is@npm:^18.3.1":
   version: 18.3.1
   resolution: "react-is@npm:18.3.1"
@@ -17835,6 +17856,21 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-player@npm:2.16.0":
+  version: 2.16.0
+  resolution: "react-player@npm:2.16.0"
+  dependencies:
+    deepmerge: "npm:^4.0.0"
+    load-script: "npm:^1.0.0"
+    memoize-one: "npm:^5.1.1"
+    prop-types: "npm:^15.7.2"
+    react-fast-compare: "npm:^3.0.1"
+  peerDependencies:
+    react: ">=16.6.0"
+  checksum: 10c0/ee0f4cd3bd468b28af38dbbb65cae1659218153956f43c0bdd15cd8b38aaaf151deec43b93b7dd887c0ac28242a4ba7e9d01823351e78ba60ae04d5fb51defb4
+  languageName: node
+  linkType: hard
+
 "react-remove-scroll-bar@npm:^2.3.3, react-remove-scroll-bar@npm:^2.3.6":
   version: 2.3.6
   resolution: "react-remove-scroll-bar@npm:2.3.6"
@@ -22078,6 +22114,7 @@ __metadata:
     react-dom: "npm:^18.3.1"
     react-lite-youtube-embed: "npm:^2.4.0"
     react-markdown: "npm:9.0.1"
+    react-player: "npm:2.16.0"
     react-resizable-panels: "npm:^2.0.22"
     react-syntax-highlighter: "npm:^15.5.0"
     react-tweet: "npm:^3.2.1"

From 65eaf88f5fc046021fb57bffab24a3a37509725e Mon Sep 17 00:00:00 2001
From: Felix Feng <felixfeng33@gmail.com>
Date: Mon, 11 Nov 2024 20:54:56 +0800
Subject: [PATCH 03/34] icons

---
 .../plate-ui/fixed-toolbar-buttons.tsx        | 15 ++++++-
 .../default/plate-ui/media-toolbar-button.tsx | 45 ++++++++++++++++---
 2 files changed, 52 insertions(+), 8 deletions(-)

diff --git a/apps/www/src/registry/default/plate-ui/fixed-toolbar-buttons.tsx b/apps/www/src/registry/default/plate-ui/fixed-toolbar-buttons.tsx
index 19f8f00f93..aaae0beaad 100644
--- a/apps/www/src/registry/default/plate-ui/fixed-toolbar-buttons.tsx
+++ b/apps/www/src/registry/default/plate-ui/fixed-toolbar-buttons.tsx
@@ -15,7 +15,12 @@ import {
   FontColorPlugin,
 } from '@udecode/plate-font/react';
 import { ListStyleType } from '@udecode/plate-indent-list';
-import { ImagePlugin } from '@udecode/plate-media/react';
+import {
+  AudioPlugin,
+  FilePlugin,
+  ImagePlugin,
+  VideoPlugin,
+} from '@udecode/plate-media/react';
 import {
   BaselineIcon,
   BoldIcon,
@@ -127,10 +132,16 @@ export function FixedToolbarButtons() {
             <IndentToolbarButton />
           </ToolbarGroup>
 
+          <ToolbarGroup>
+            <MediaToolbarButton nodeType={ImagePlugin.key} />
+            <MediaToolbarButton nodeType={VideoPlugin.key} />
+            <MediaToolbarButton nodeType={AudioPlugin.key} />
+            <MediaToolbarButton nodeType={FilePlugin.key} />
+          </ToolbarGroup>
+
           <ToolbarGroup>
             <LinkToolbarButton />
             <ToggleToolbarButton />
-            <MediaToolbarButton nodeType={ImagePlugin.key} />
             <TableDropdownMenu />
             <EmojiDropdownMenu />
             <MoreDropdownMenu />
diff --git a/apps/www/src/registry/default/plate-ui/media-toolbar-button.tsx b/apps/www/src/registry/default/plate-ui/media-toolbar-button.tsx
index 4f6ada9d88..87df3693e5 100644
--- a/apps/www/src/registry/default/plate-ui/media-toolbar-button.tsx
+++ b/apps/www/src/registry/default/plate-ui/media-toolbar-button.tsx
@@ -2,26 +2,59 @@
 
 import React from 'react';
 
-import type { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react';
-
 import { withRef } from '@udecode/cn';
 import { useEditorRef } from '@udecode/plate-common/react';
-import { ImageIcon } from 'lucide-react';
+import {
+  AudioPlugin,
+  FilePlugin,
+  ImagePlugin,
+  VideoPlugin,
+} from '@udecode/plate-media/react';
+import { AudioLinesIcon, FileUpIcon, Film, ImageIcon } from 'lucide-react';
 import { useFilePicker } from 'use-file-picker';
 
 import { ToolbarButton } from './toolbar';
 
+const MEDIA_CONFIG: Record<
+  string,
+  {
+    accept: string[];
+    icon: React.ReactNode;
+  }
+> = {
+  [AudioPlugin.key]: {
+    accept: ['audio/*'],
+    icon: <AudioLinesIcon />,
+  },
+  [FilePlugin.key]: {
+    accept: ['*'],
+    icon: <FileUpIcon />,
+  },
+  [ImagePlugin.key]: {
+    accept: ['image/*'],
+    icon: <ImageIcon />,
+  },
+  [VideoPlugin.key]: {
+    accept: ['video/*'],
+    icon: <Film />,
+  },
+};
+
 export const MediaToolbarButton = withRef<
   typeof ToolbarButton,
   {
-    nodeType?: typeof ImagePlugin.key | typeof MediaEmbedPlugin.key;
+    nodeType:
+      | typeof AudioPlugin.key
+      | typeof FilePlugin.key
+      | typeof ImagePlugin.key
+      | typeof VideoPlugin.key;
   }
 >(({ nodeType, ...rest }, ref) => {
   const editor = useEditorRef();
 
   /** Open file picker */
   const { openFilePicker } = useFilePicker({
-    accept: ['image/*'],
+    accept: MEDIA_CONFIG[nodeType].accept,
     multiple: true,
     onFilesSelected: ({ plainFiles: updatedFiles }) => {
       (editor as any).tf.insert.media(updatedFiles);
@@ -30,7 +63,7 @@ export const MediaToolbarButton = withRef<
 
   return (
     <ToolbarButton ref={ref} onClick={openFilePicker} {...rest}>
-      <ImageIcon />
+      {MEDIA_CONFIG[nodeType].icon}
     </ToolbarButton>
   );
 });

From 918f38e0bb0086b6222e032471f4c3513550a1f4 Mon Sep 17 00:00:00 2001
From: Felix Feng <felixfeng33@gmail.com>
Date: Tue, 12 Nov 2024 12:00:30 +0800
Subject: [PATCH 04/34] fix style

---
 .../plate-ui/media-placeholder-popover.tsx    | 42 ++-----------------
 1 file changed, 4 insertions(+), 38 deletions(-)

diff --git a/apps/www/src/registry/default/plate-ui/media-placeholder-popover.tsx b/apps/www/src/registry/default/plate-ui/media-placeholder-popover.tsx
index dfc0ccc226..8755b9ab47 100644
--- a/apps/www/src/registry/default/plate-ui/media-placeholder-popover.tsx
+++ b/apps/www/src/registry/default/plate-ui/media-placeholder-popover.tsx
@@ -145,22 +145,6 @@ export const MediaPlaceholderPopover = ({ children }: MediaPopoverProps) => {
 
     const path = findNodePath(editor, element);
 
-    // replaceNode<TImageElement>(editor, {
-    //   at: path!,
-    //   nodes: [
-    //     {
-    //       children: [],
-    //       initialHeight: size!.height,
-    //       initialWidth: size!.width,
-    //       isUpload: true,
-    //       name: mediaType === FilePlugin.key ? fileInfo.name : '',
-    //       placeholderId: element.id as string,
-    //       type: mediaType!,
-    //       url: fileInfo.url,
-    //     },
-    //   ],
-    // });
-
     withoutSavingHistory(editor, () => {
       removeNodes(editor, { at: path });
 
@@ -180,21 +164,6 @@ export const MediaPlaceholderPopover = ({ children }: MediaPopoverProps) => {
       updateUploadHistory(editor, node);
     });
 
-    // setMediaNode(
-    //   editor,
-    //   {
-    //     id: nanoid(),
-    //     initialHeight: size?.height,
-    //     initialWidth: size?.width,
-    //     isUpload: true,
-    //     name: mediaType === FilePlugin.key ? fileInfo.name : '',
-    //     placeholderId: element.id as string,
-    //     type: mediaType!,
-    //     url: fileInfo.url,
-    //   },
-    //   { at: path }
-    // );
-
     api.placeholder.removeUploadingFile(element.id as string);
 
     // mergeMarkedBatch(editor, PlaceholderPlugin.key);
@@ -237,7 +206,7 @@ export const MediaPlaceholderPopover = ({ children }: MediaPopoverProps) => {
       <PopoverTrigger asChild>{children}</PopoverTrigger>
 
       <PopoverContent
-        className="flex flex-col"
+        className="flex w-fit flex-col"
         onOpenAutoFocus={(e) => e.preventDefault()}
       >
         <Tabs className="w-full shrink-0" defaultValue="account">
@@ -245,7 +214,7 @@ export const MediaPlaceholderPopover = ({ children }: MediaPopoverProps) => {
             <TabsTrigger value="account">Upload</TabsTrigger>
             <TabsTrigger value="password">Embed link</TabsTrigger>
           </TabsList>
-          <TabsContent className="w-[300px] px-3 py-2" value="account">
+          <TabsContent className=" px-3 py-2" value="account">
             <Button className="w-full" onClick={openFilePicker}>
               {currentMedia.buttonText}
             </Button>
@@ -254,10 +223,7 @@ export const MediaPlaceholderPopover = ({ children }: MediaPopoverProps) => {
             </div>
           </TabsContent>
 
-          <TabsContent
-            className="w-[300px] px-3 pb-3 pt-2 text-center"
-            value="password"
-          >
+          <TabsContent className="px-3 pb-3 pt-2 text-center" value="password">
             <Input
               value={embedValue}
               onChange={(e) => setEmbedValue(e.target.value)}
@@ -265,7 +231,7 @@ export const MediaPlaceholderPopover = ({ children }: MediaPopoverProps) => {
             />
 
             <Button
-              className="mt-2 w-full max-w-[300px]"
+              className="mt-2 w-full "
               onClick={() => onEmbed(embedValue)}
             >
               {currentMedia.embedText}

From cd1343d935e1b2f301850f914a20d7404225e5b3 Mon Sep 17 00:00:00 2001
From: Felix Feng <felixfeng33@gmail.com>
Date: Tue, 12 Nov 2024 12:14:42 +0800
Subject: [PATCH 05/34] undo & redo

---
 .../plate-ui/fixed-toolbar-buttons.tsx        |  7 ++++
 .../default/plate-ui/redo-toolbar-button.tsx  | 32 +++++++++++++++++++
 .../default/plate-ui/undo-toolbar-button.tsx  | 32 +++++++++++++++++++
 3 files changed, 71 insertions(+)
 create mode 100644 apps/www/src/registry/default/plate-ui/redo-toolbar-button.tsx
 create mode 100644 apps/www/src/registry/default/plate-ui/undo-toolbar-button.tsx

diff --git a/apps/www/src/registry/default/plate-ui/fixed-toolbar-buttons.tsx b/apps/www/src/registry/default/plate-ui/fixed-toolbar-buttons.tsx
index aaae0beaad..fe8c0885c3 100644
--- a/apps/www/src/registry/default/plate-ui/fixed-toolbar-buttons.tsx
+++ b/apps/www/src/registry/default/plate-ui/fixed-toolbar-buttons.tsx
@@ -48,10 +48,12 @@ import { MediaToolbarButton } from './media-toolbar-button';
 import { ModeDropdownMenu } from './mode-dropdown-menu';
 import { MoreDropdownMenu } from './more-dropdown-menu';
 import { OutdentToolbarButton } from './outdent-toolbar-button';
+import { RedoToolbarButton } from './redo-toolbar-button';
 import { TableDropdownMenu } from './table-dropdown-menu';
 import { ToggleToolbarButton } from './toggle-toolbar-button';
 import { ToolbarGroup } from './toolbar';
 import { TurnIntoDropdownMenu } from './turn-into-dropdown-menu';
+import { UndoToolbarButton } from './undo-toolbar-button';
 
 export function FixedToolbarButtons() {
   const readOnly = useEditorReadOnly();
@@ -60,6 +62,11 @@ export function FixedToolbarButtons() {
     <div className="flex w-full">
       {!readOnly && (
         <>
+          <ToolbarGroup>
+            <UndoToolbarButton />
+            <RedoToolbarButton />
+          </ToolbarGroup>
+
           <ToolbarGroup>
             <AIToolbarButton
               className="gap-1.5 text-purple-600 hover:text-purple-700 dark:text-purple-400 dark:hover:text-purple-500"
diff --git a/apps/www/src/registry/default/plate-ui/redo-toolbar-button.tsx b/apps/www/src/registry/default/plate-ui/redo-toolbar-button.tsx
new file mode 100644
index 0000000000..9e8de9cfb2
--- /dev/null
+++ b/apps/www/src/registry/default/plate-ui/redo-toolbar-button.tsx
@@ -0,0 +1,32 @@
+import React from 'react';
+
+import { useEditorRef, useEditorSelector } from '@udecode/plate-core/react';
+import { withRef } from '@udecode/react-utils';
+import { focusEditor } from '@udecode/slate-react';
+import { Redo2 } from 'lucide-react';
+
+import { ToolbarButton } from './toolbar';
+
+export const RedoToolbarButton = withRef<typeof ToolbarButton>((props, ref) => {
+  const editor = useEditorRef();
+  const redoAble = useEditorSelector(
+    (editor) => editor.history.redos.length > 0,
+    []
+  );
+
+  return (
+    <ToolbarButton
+      ref={ref}
+      disabled={!redoAble}
+      onMouseDown={(e) => {
+        e.preventDefault();
+        editor.redo();
+        focusEditor(editor);
+      }}
+      tooltip="Redo"
+      {...props}
+    >
+      <Redo2 />
+    </ToolbarButton>
+  );
+});
diff --git a/apps/www/src/registry/default/plate-ui/undo-toolbar-button.tsx b/apps/www/src/registry/default/plate-ui/undo-toolbar-button.tsx
new file mode 100644
index 0000000000..80b01bd137
--- /dev/null
+++ b/apps/www/src/registry/default/plate-ui/undo-toolbar-button.tsx
@@ -0,0 +1,32 @@
+import React from 'react';
+
+import { useEditorRef, useEditorSelector } from '@udecode/plate-core/react';
+import { withRef } from '@udecode/react-utils';
+import { focusEditor } from '@udecode/slate-react';
+import { Undo2 } from 'lucide-react';
+
+import { ToolbarButton } from './toolbar';
+
+export const UndoToolbarButton = withRef<typeof ToolbarButton>((props, ref) => {
+  const editor = useEditorRef();
+  const undoAble = useEditorSelector(
+    (editor) => editor.history.undos.length > 0,
+    []
+  );
+
+  return (
+    <ToolbarButton
+      ref={ref}
+      disabled={!undoAble}
+      onMouseDown={(e) => {
+        e.preventDefault();
+        editor.undo();
+        focusEditor(editor);
+      }}
+      tooltip="Undo"
+      {...props}
+    >
+      <Undo2 />
+    </ToolbarButton>
+  );
+});

From c92ad8df833f9cfe34267c71269257e93a8d4367 Mon Sep 17 00:00:00 2001
From: Felix Feng <felixfeng33@gmail.com>
Date: Tue, 12 Nov 2024 21:04:28 +0800
Subject: [PATCH 06/34] fix test

---
 apps/www/content/docs/upload.mdx              |   3 +
 .../styles/default/fixed-toolbar-buttons.json |   2 +-
 .../styles/default/media-toolbar-button.json  |   2 +-
 apps/www/public/r/styles/default/upload.json  |  13 ++
 apps/www/src/__registry__/index.tsx           |  12 ++
 apps/www/src/lib/plate/create-plate-ui.ts     |   5 +-
 .../editor/plugins/media-plugins.tsx          |   2 -
 .../default/example/playground-demo.tsx       |   5 +
 .../registry/default/example/upload-demo.tsx  |  19 ++
 .../plate-ui/fixed-toolbar-buttons.tsx        |   2 +
 .../plate-ui/font-size-toolbar-butoon.tsx     | 173 ++++++++++++++++++
 apps/www/src/registry/registry-examples.ts    |   6 +
 .../react/placeholder/PlaceholderPlugin.tsx   |   8 +-
 13 files changed, 237 insertions(+), 15 deletions(-)
 create mode 100644 apps/www/public/r/styles/default/upload.json
 create mode 100644 apps/www/src/registry/default/example/upload-demo.tsx
 create mode 100644 apps/www/src/registry/default/plate-ui/font-size-toolbar-butoon.tsx

diff --git a/apps/www/content/docs/upload.mdx b/apps/www/content/docs/upload.mdx
index 943184b4e1..750cf37bdd 100644
--- a/apps/www/content/docs/upload.mdx
+++ b/apps/www/content/docs/upload.mdx
@@ -6,6 +6,9 @@ docs:
     title: Upload
 ---
 
+
+<ComponentPreview name="playground-demo" id="upload" />
+
 {/* ### UploadThing Integration
 
 This component uses UploadThing for file uploads. UploadThing provides a simple and efficient way to handle file uploads in your application.
diff --git a/apps/www/public/r/styles/default/fixed-toolbar-buttons.json b/apps/www/public/r/styles/default/fixed-toolbar-buttons.json
index e94e4727ef..8e8767f05c 100644
--- a/apps/www/public/r/styles/default/fixed-toolbar-buttons.json
+++ b/apps/www/public/r/styles/default/fixed-toolbar-buttons.json
@@ -13,7 +13,7 @@
   },
   "files": [
     {
-      "content": "'use client';\n\nimport React from 'react';\n\nimport {\n  BoldPlugin,\n  CodePlugin,\n  ItalicPlugin,\n  StrikethroughPlugin,\n  UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { useEditorReadOnly } from '@udecode/plate-common/react';\nimport {\n  FontBackgroundColorPlugin,\n  FontColorPlugin,\n} from '@udecode/plate-font/react';\nimport { ListStyleType } from '@udecode/plate-indent-list';\nimport { ImagePlugin } from '@udecode/plate-media/react';\nimport {\n  BaselineIcon,\n  BoldIcon,\n  Code2Icon,\n  ItalicIcon,\n  PaintBucketIcon,\n  SparklesIcon,\n  StrikethroughIcon,\n  UnderlineIcon,\n} from 'lucide-react';\n\nimport { AIToolbarButton } from './ai-toolbar-button';\nimport { AlignDropdownMenu } from './align-dropdown-menu';\nimport { ColorDropdownMenu } from './color-dropdown-menu';\nimport { CommentToolbarButton } from './comment-toolbar-button';\nimport { EmojiDropdownMenu } from './emoji-dropdown-menu';\nimport { IndentListToolbarButton } from './indent-list-toolbar-button';\nimport { IndentTodoToolbarButton } from './indent-todo-toolbar-button';\nimport { IndentToolbarButton } from './indent-toolbar-button';\nimport { InsertDropdownMenu } from './insert-dropdown-menu';\nimport { LineHeightDropdownMenu } from './line-height-dropdown-menu';\nimport { LinkToolbarButton } from './link-toolbar-button';\nimport { MarkToolbarButton } from './mark-toolbar-button';\nimport { MediaToolbarButton } from './media-toolbar-button';\nimport { ModeDropdownMenu } from './mode-dropdown-menu';\nimport { MoreDropdownMenu } from './more-dropdown-menu';\nimport { OutdentToolbarButton } from './outdent-toolbar-button';\nimport { TableDropdownMenu } from './table-dropdown-menu';\nimport { ToggleToolbarButton } from './toggle-toolbar-button';\nimport { ToolbarGroup } from './toolbar';\nimport { TurnIntoDropdownMenu } from './turn-into-dropdown-menu';\n\nexport function FixedToolbarButtons() {\n  const readOnly = useEditorReadOnly();\n\n  return (\n    <div className=\"flex w-full\">\n      {!readOnly && (\n        <>\n          <ToolbarGroup>\n            <AIToolbarButton\n              className=\"gap-1.5 text-purple-600 hover:text-purple-700 dark:text-purple-400 dark:hover:text-purple-500\"\n              tooltip=\"Edit, generate, and more\"\n            >\n              <SparklesIcon className=\"!size-3.5\" />\n              Ask AI\n            </AIToolbarButton>\n          </ToolbarGroup>\n\n          <ToolbarGroup>\n            <InsertDropdownMenu />\n            <TurnIntoDropdownMenu />\n          </ToolbarGroup>\n\n          <ToolbarGroup>\n            <MarkToolbarButton nodeType={BoldPlugin.key} tooltip=\"Bold (⌘+B)\">\n              <BoldIcon />\n            </MarkToolbarButton>\n\n            <MarkToolbarButton\n              nodeType={ItalicPlugin.key}\n              tooltip=\"Italic (⌘+I)\"\n            >\n              <ItalicIcon />\n            </MarkToolbarButton>\n\n            <MarkToolbarButton\n              nodeType={UnderlinePlugin.key}\n              tooltip=\"Underline (⌘+U)\"\n            >\n              <UnderlineIcon />\n            </MarkToolbarButton>\n\n            <MarkToolbarButton\n              nodeType={StrikethroughPlugin.key}\n              tooltip=\"Strikethrough (⌘+⇧+M)\"\n            >\n              <StrikethroughIcon />\n            </MarkToolbarButton>\n\n            <MarkToolbarButton nodeType={CodePlugin.key} tooltip=\"Code (⌘+E)\">\n              <Code2Icon />\n            </MarkToolbarButton>\n\n            <ColorDropdownMenu\n              nodeType={FontColorPlugin.key}\n              tooltip=\"Text color\"\n            >\n              <BaselineIcon />\n            </ColorDropdownMenu>\n\n            <ColorDropdownMenu\n              nodeType={FontBackgroundColorPlugin.key}\n              tooltip=\"Background color\"\n            >\n              <PaintBucketIcon />\n            </ColorDropdownMenu>\n          </ToolbarGroup>\n\n          <ToolbarGroup>\n            <AlignDropdownMenu />\n            <LineHeightDropdownMenu />\n\n            <IndentListToolbarButton nodeType={ListStyleType.Disc} />\n            <IndentListToolbarButton nodeType={ListStyleType.Decimal} />\n            <IndentTodoToolbarButton />\n\n            <OutdentToolbarButton />\n            <IndentToolbarButton />\n          </ToolbarGroup>\n\n          <ToolbarGroup>\n            <LinkToolbarButton />\n            <ToggleToolbarButton />\n            <MediaToolbarButton nodeType={ImagePlugin.key} />\n            <TableDropdownMenu />\n            <EmojiDropdownMenu />\n            <MoreDropdownMenu />\n          </ToolbarGroup>\n        </>\n      )}\n\n      <div className=\"grow\" />\n\n      <ToolbarGroup>\n        <CommentToolbarButton />\n        <ModeDropdownMenu />\n      </ToolbarGroup>\n    </div>\n  );\n}\n",
+      "content": "'use client';\n\nimport React from 'react';\n\nimport {\n  BoldPlugin,\n  CodePlugin,\n  ItalicPlugin,\n  StrikethroughPlugin,\n  UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { useEditorReadOnly } from '@udecode/plate-common/react';\nimport {\n  FontBackgroundColorPlugin,\n  FontColorPlugin,\n} from '@udecode/plate-font/react';\nimport { ListStyleType } from '@udecode/plate-indent-list';\nimport {\n  AudioPlugin,\n  FilePlugin,\n  ImagePlugin,\n  VideoPlugin,\n} from '@udecode/plate-media/react';\nimport {\n  BaselineIcon,\n  BoldIcon,\n  Code2Icon,\n  ItalicIcon,\n  PaintBucketIcon,\n  SparklesIcon,\n  StrikethroughIcon,\n  UnderlineIcon,\n} from 'lucide-react';\n\nimport { AIToolbarButton } from './ai-toolbar-button';\nimport { AlignDropdownMenu } from './align-dropdown-menu';\nimport { ColorDropdownMenu } from './color-dropdown-menu';\nimport { CommentToolbarButton } from './comment-toolbar-button';\nimport { EmojiDropdownMenu } from './emoji-dropdown-menu';\nimport { FontSizeToolbarButton } from './font-size-toolbar-butoon';\nimport { IndentListToolbarButton } from './indent-list-toolbar-button';\nimport { IndentTodoToolbarButton } from './indent-todo-toolbar-button';\nimport { IndentToolbarButton } from './indent-toolbar-button';\nimport { InsertDropdownMenu } from './insert-dropdown-menu';\nimport { LineHeightDropdownMenu } from './line-height-dropdown-menu';\nimport { LinkToolbarButton } from './link-toolbar-button';\nimport { MarkToolbarButton } from './mark-toolbar-button';\nimport { MediaToolbarButton } from './media-toolbar-button';\nimport { ModeDropdownMenu } from './mode-dropdown-menu';\nimport { MoreDropdownMenu } from './more-dropdown-menu';\nimport { OutdentToolbarButton } from './outdent-toolbar-button';\nimport { RedoToolbarButton } from './redo-toolbar-button';\nimport { TableDropdownMenu } from './table-dropdown-menu';\nimport { ToggleToolbarButton } from './toggle-toolbar-button';\nimport { ToolbarGroup } from './toolbar';\nimport { TurnIntoDropdownMenu } from './turn-into-dropdown-menu';\nimport { UndoToolbarButton } from './undo-toolbar-button';\n\nexport function FixedToolbarButtons() {\n  const readOnly = useEditorReadOnly();\n\n  return (\n    <div className=\"flex w-full\">\n      {!readOnly && (\n        <>\n          <ToolbarGroup>\n            <UndoToolbarButton />\n            <RedoToolbarButton />\n          </ToolbarGroup>\n\n          <ToolbarGroup>\n            <AIToolbarButton\n              className=\"gap-1.5 text-purple-600 hover:text-purple-700 dark:text-purple-400 dark:hover:text-purple-500\"\n              tooltip=\"Edit, generate, and more\"\n            >\n              <SparklesIcon className=\"!size-3.5\" />\n              Ask AI\n            </AIToolbarButton>\n          </ToolbarGroup>\n\n          <ToolbarGroup>\n            <InsertDropdownMenu />\n            <TurnIntoDropdownMenu />\n            <FontSizeToolbarButton />\n          </ToolbarGroup>\n\n          <ToolbarGroup>\n            <MarkToolbarButton nodeType={BoldPlugin.key} tooltip=\"Bold (⌘+B)\">\n              <BoldIcon />\n            </MarkToolbarButton>\n\n            <MarkToolbarButton\n              nodeType={ItalicPlugin.key}\n              tooltip=\"Italic (⌘+I)\"\n            >\n              <ItalicIcon />\n            </MarkToolbarButton>\n\n            <MarkToolbarButton\n              nodeType={UnderlinePlugin.key}\n              tooltip=\"Underline (⌘+U)\"\n            >\n              <UnderlineIcon />\n            </MarkToolbarButton>\n\n            <MarkToolbarButton\n              nodeType={StrikethroughPlugin.key}\n              tooltip=\"Strikethrough (⌘+⇧+M)\"\n            >\n              <StrikethroughIcon />\n            </MarkToolbarButton>\n\n            <MarkToolbarButton nodeType={CodePlugin.key} tooltip=\"Code (⌘+E)\">\n              <Code2Icon />\n            </MarkToolbarButton>\n\n            <ColorDropdownMenu\n              nodeType={FontColorPlugin.key}\n              tooltip=\"Text color\"\n            >\n              <BaselineIcon />\n            </ColorDropdownMenu>\n\n            <ColorDropdownMenu\n              nodeType={FontBackgroundColorPlugin.key}\n              tooltip=\"Background color\"\n            >\n              <PaintBucketIcon />\n            </ColorDropdownMenu>\n          </ToolbarGroup>\n\n          <ToolbarGroup>\n            <AlignDropdownMenu />\n            <LineHeightDropdownMenu />\n\n            <IndentListToolbarButton nodeType={ListStyleType.Disc} />\n            <IndentListToolbarButton nodeType={ListStyleType.Decimal} />\n            <IndentTodoToolbarButton />\n\n            <OutdentToolbarButton />\n            <IndentToolbarButton />\n          </ToolbarGroup>\n\n          <ToolbarGroup>\n            <MediaToolbarButton nodeType={ImagePlugin.key} />\n            <MediaToolbarButton nodeType={VideoPlugin.key} />\n            <MediaToolbarButton nodeType={AudioPlugin.key} />\n            <MediaToolbarButton nodeType={FilePlugin.key} />\n          </ToolbarGroup>\n\n          <ToolbarGroup>\n            <LinkToolbarButton />\n            <ToggleToolbarButton />\n            <TableDropdownMenu />\n            <EmojiDropdownMenu />\n            <MoreDropdownMenu />\n          </ToolbarGroup>\n        </>\n      )}\n\n      <div className=\"grow\" />\n\n      <ToolbarGroup>\n        <CommentToolbarButton />\n        <ModeDropdownMenu />\n      </ToolbarGroup>\n    </div>\n  );\n}\n",
       "path": "plate-ui/fixed-toolbar-buttons.tsx",
       "target": "components/plate-ui/fixed-toolbar-buttons.tsx",
       "type": "registry:ui"
diff --git a/apps/www/public/r/styles/default/media-toolbar-button.json b/apps/www/public/r/styles/default/media-toolbar-button.json
index c01cdcf4f3..11b25c030e 100644
--- a/apps/www/public/r/styles/default/media-toolbar-button.json
+++ b/apps/www/public/r/styles/default/media-toolbar-button.json
@@ -17,7 +17,7 @@
   },
   "files": [
     {
-      "content": "'use client';\n\nimport React from 'react';\n\nimport { withRef } from '@udecode/cn';\nimport {\n  type ImagePlugin,\n  type MediaEmbedPlugin,\n  useMediaToolbarButton,\n} from '@udecode/plate-media/react';\nimport { ImageIcon } from 'lucide-react';\n\nimport { ToolbarButton } from './toolbar';\n\nexport const MediaToolbarButton = withRef<\n  typeof ToolbarButton,\n  {\n    nodeType?: typeof ImagePlugin.key | typeof MediaEmbedPlugin.key;\n  }\n>(({ nodeType, ...rest }, ref) => {\n  const { props } = useMediaToolbarButton({ nodeType });\n\n  return (\n    <ToolbarButton ref={ref} {...props} {...rest}>\n      <ImageIcon />\n    </ToolbarButton>\n  );\n});\n",
+      "content": "'use client';\n\nimport React from 'react';\n\nimport { withRef } from '@udecode/cn';\nimport { useEditorRef } from '@udecode/plate-common/react';\nimport {\n  AudioPlugin,\n  FilePlugin,\n  ImagePlugin,\n  VideoPlugin,\n} from '@udecode/plate-media/react';\nimport { AudioLinesIcon, FileUpIcon, Film, ImageIcon } from 'lucide-react';\nimport { useFilePicker } from 'use-file-picker';\n\nimport { ToolbarButton } from './toolbar';\n\nconst MEDIA_CONFIG: Record<\n  string,\n  {\n    accept: string[];\n    icon: React.ReactNode;\n  }\n> = {\n  [AudioPlugin.key]: {\n    accept: ['audio/*'],\n    icon: <AudioLinesIcon />,\n  },\n  [FilePlugin.key]: {\n    accept: ['*'],\n    icon: <FileUpIcon />,\n  },\n  [ImagePlugin.key]: {\n    accept: ['image/*'],\n    icon: <ImageIcon />,\n  },\n  [VideoPlugin.key]: {\n    accept: ['video/*'],\n    icon: <Film />,\n  },\n};\n\nexport const MediaToolbarButton = withRef<\n  typeof ToolbarButton,\n  {\n    nodeType:\n      | typeof AudioPlugin.key\n      | typeof FilePlugin.key\n      | typeof ImagePlugin.key\n      | typeof VideoPlugin.key;\n  }\n>(({ nodeType, ...rest }, ref) => {\n  const editor = useEditorRef();\n\n  /** Open file picker */\n  const { openFilePicker } = useFilePicker({\n    accept: MEDIA_CONFIG[nodeType].accept,\n    multiple: true,\n    onFilesSelected: ({ plainFiles: updatedFiles }) => {\n      (editor as any).tf.insert.media(updatedFiles);\n    },\n  });\n\n  return (\n    <ToolbarButton ref={ref} onClick={openFilePicker} {...rest}>\n      {MEDIA_CONFIG[nodeType].icon}\n    </ToolbarButton>\n  );\n});\n",
       "path": "plate-ui/media-toolbar-button.tsx",
       "target": "components/plate-ui/media-toolbar-button.tsx",
       "type": "registry:ui"
diff --git a/apps/www/public/r/styles/default/upload.json b/apps/www/public/r/styles/default/upload.json
new file mode 100644
index 0000000000..e4c38ebf09
--- /dev/null
+++ b/apps/www/public/r/styles/default/upload.json
@@ -0,0 +1,13 @@
+{
+  "files": [
+    {
+      "content": "'use client';\n\nimport React from 'react';\n\nimport {\n  Plate,\n  PlateContent,\n  usePlateEditor,\n} from '@udecode/plate-common/react';\n\nexport default function BasicEditorDefaultDemo() {\n  const editor = usePlateEditor();\n\n  return (\n    <Plate editor={editor}>\n      <PlateContent placeholder=\"Type...\" />\n    </Plate>\n  );\n}\n",
+      "path": "example/upload-demo.tsx",
+      "target": "components/upload-demo.tsx",
+      "type": "registry:example"
+    }
+  ],
+  "name": "upload",
+  "registryDependencies": [],
+  "type": "registry:example"
+}
\ No newline at end of file
diff --git a/apps/www/src/__registry__/index.tsx b/apps/www/src/__registry__/index.tsx
index fef1673add..34f5089d2c 100644
--- a/apps/www/src/__registry__/index.tsx
+++ b/apps/www/src/__registry__/index.tsx
@@ -2081,6 +2081,18 @@ export const Index: Record<string, any> = {
       subcategory: "",
       chunks: []
     },
+    "upload": {
+      name: "upload",
+      description: "",
+      type: "registry:example",
+      registryDependencies: [],
+      files: ["registry/default/example/upload-demo.tsx"],
+      component: React.lazy(() => import("@/registry/default/example/upload-demo.tsx")),
+      source: "",
+      category: "",
+      subcategory: "",
+      chunks: []
+    },
     "editor-ai": {
       name: "editor-ai",
       description: "An AI editor.",
diff --git a/apps/www/src/lib/plate/create-plate-ui.ts b/apps/www/src/lib/plate/create-plate-ui.ts
index 240b319f17..824129783a 100644
--- a/apps/www/src/lib/plate/create-plate-ui.ts
+++ b/apps/www/src/lib/plate/create-plate-ui.ts
@@ -45,7 +45,6 @@ import {
   FilePlugin,
   ImagePlugin,
   MediaEmbedPlugin,
-  PlaceholderPlugin,
   VideoPlugin,
 } from '@udecode/plate-media/react';
 import {
@@ -82,7 +81,6 @@ import { LinkElement } from '@/registry/default/plate-ui/link-element';
 import { ListElement } from '@/registry/default/plate-ui/list-element';
 import { MediaEmbedElement } from '@/registry/default/plate-ui/media-embed-element';
 import { MediaFileElement } from '@/registry/default/plate-ui/media-file-element';
-import { MediaPlaceholderElement } from '@/registry/default/plate-ui/media-placeholder-element';
 import { MediaVideoElement } from '@/registry/default/plate-ui/media-video-element';
 import { MentionElement } from '@/registry/default/plate-ui/mention-element';
 import { MentionInputElement } from '@/registry/default/plate-ui/mention-input-element';
@@ -104,7 +102,7 @@ import { withDraggables } from '@/registry/default/plate-ui/with-draggables';
 export const createPlateUI = ({
   draggable,
   placeholder,
-}: { draggable?: boolean; placeholder?: boolean } = {}) => {
+}: { draggable?: boolean; placeholder?: boolean; upload?: boolean } = {}) => {
   let components: Record<string, NodeComponent> = {
     [AIPlugin.key]: AILeaf,
     [BlockquotePlugin.key]: BlockquoteElement,
@@ -140,7 +138,6 @@ export const createPlateUI = ({
     [MentionPlugin.key]: MentionElement,
     [NumberedListPlugin.key]: withProps(ListElement, { variant: 'ol' }),
     [ParagraphPlugin.key]: ParagraphElement,
-    [PlaceholderPlugin.key]: MediaPlaceholderElement,
     [SlashInputPlugin.key]: SlashInputElement,
     [StrikethroughPlugin.key]: withProps(PlateLeaf, { as: 's' }),
     [SubscriptPlugin.key]: withProps(PlateLeaf, { as: 'sub' }),
diff --git a/apps/www/src/registry/default/components/editor/plugins/media-plugins.tsx b/apps/www/src/registry/default/components/editor/plugins/media-plugins.tsx
index 66bdf19a57..4badeef343 100644
--- a/apps/www/src/registry/default/components/editor/plugins/media-plugins.tsx
+++ b/apps/www/src/registry/default/components/editor/plugins/media-plugins.tsx
@@ -6,14 +6,12 @@ import {
   FilePlugin,
   ImagePlugin,
   MediaEmbedPlugin,
-  PlaceholderPlugin,
   VideoPlugin,
 } from '@udecode/plate-media/react';
 
 import { ImagePreview } from '@/registry/default/plate-ui/image-preview';
 
 export const mediaPlugins = [
-  PlaceholderPlugin,
   ImagePlugin.extend({
     options: {
       disableUploadInsert: true,
diff --git a/apps/www/src/registry/default/example/playground-demo.tsx b/apps/www/src/registry/default/example/playground-demo.tsx
index fa77eda40e..ac8c04efcc 100644
--- a/apps/www/src/registry/default/example/playground-demo.tsx
+++ b/apps/www/src/registry/default/example/playground-demo.tsx
@@ -12,6 +12,7 @@ import { Plate, usePlateEditor } from '@udecode/plate-common/react';
 import { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';
 import { HEADING_KEYS } from '@udecode/plate-heading';
 import { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';
+import { PlaceholderPlugin } from '@udecode/plate-media/react';
 import { NormalizeTypesPlugin } from '@udecode/plate-normalizers';
 import { PlaywrightPlugin } from '@udecode/plate-playwright';
 import { TablePlugin } from '@udecode/plate-table/react';
@@ -34,6 +35,7 @@ import { FixedToolbarButtonsList } from '@/registry/default/plate-ui/fixed-toolb
 import { FloatingToolbar } from '@/registry/default/plate-ui/floating-toolbar';
 import { FloatingToolbarButtons } from '@/registry/default/plate-ui/floating-toolbar-buttons';
 
+import { MediaPlaceholderElement } from '../plate-ui/media-placeholder-element';
 import { usePlaygroundEnabled } from './usePlaygroundEnabled';
 
 export const usePlaygroundEditor = (id: any = '') => {
@@ -76,6 +78,9 @@ export const usePlaygroundEditor = (id: any = '') => {
         }),
         SingleLinePlugin,
 
+        PlaceholderPlugin.configure({ enabled: id === 'upload' }).withComponent(
+          MediaPlaceholderElement
+        ),
         // Testing
         PlaywrightPlugin.configure({
           enabled: process.env.NODE_ENV !== 'production',
diff --git a/apps/www/src/registry/default/example/upload-demo.tsx b/apps/www/src/registry/default/example/upload-demo.tsx
new file mode 100644
index 0000000000..354919f26b
--- /dev/null
+++ b/apps/www/src/registry/default/example/upload-demo.tsx
@@ -0,0 +1,19 @@
+'use client';
+
+import React from 'react';
+
+import {
+  Plate,
+  PlateContent,
+  usePlateEditor,
+} from '@udecode/plate-common/react';
+
+export default function BasicEditorDefaultDemo() {
+  const editor = usePlateEditor();
+
+  return (
+    <Plate editor={editor}>
+      <PlateContent placeholder="Type..." />
+    </Plate>
+  );
+}
diff --git a/apps/www/src/registry/default/plate-ui/fixed-toolbar-buttons.tsx b/apps/www/src/registry/default/plate-ui/fixed-toolbar-buttons.tsx
index fe8c0885c3..24d16b6b4e 100644
--- a/apps/www/src/registry/default/plate-ui/fixed-toolbar-buttons.tsx
+++ b/apps/www/src/registry/default/plate-ui/fixed-toolbar-buttons.tsx
@@ -37,6 +37,7 @@ import { AlignDropdownMenu } from './align-dropdown-menu';
 import { ColorDropdownMenu } from './color-dropdown-menu';
 import { CommentToolbarButton } from './comment-toolbar-button';
 import { EmojiDropdownMenu } from './emoji-dropdown-menu';
+import { FontSizeToolbarButton } from './font-size-toolbar-butoon';
 import { IndentListToolbarButton } from './indent-list-toolbar-button';
 import { IndentTodoToolbarButton } from './indent-todo-toolbar-button';
 import { IndentToolbarButton } from './indent-toolbar-button';
@@ -80,6 +81,7 @@ export function FixedToolbarButtons() {
           <ToolbarGroup>
             <InsertDropdownMenu />
             <TurnIntoDropdownMenu />
+            <FontSizeToolbarButton />
           </ToolbarGroup>
 
           <ToolbarGroup>
diff --git a/apps/www/src/registry/default/plate-ui/font-size-toolbar-butoon.tsx b/apps/www/src/registry/default/plate-ui/font-size-toolbar-butoon.tsx
new file mode 100644
index 0000000000..a30448f519
--- /dev/null
+++ b/apps/www/src/registry/default/plate-ui/font-size-toolbar-butoon.tsx
@@ -0,0 +1,173 @@
+import { useEditorRef, useEditorSelector } from '@udecode/plate-core/react';
+import { FontSizePlugin } from '@udecode/plate-font/react';
+import { HEADING_KEYS } from '@udecode/plate-heading';
+import {
+  type TElement,
+  type TText,
+  getAboveNode,
+  getMarks,
+  getNodeEntry,
+} from '@udecode/slate';
+import { focusEditor, toDOMNode } from '@udecode/slate-react';
+import { setMarks } from '@udecode/slate-utils';
+import { Minus, Plus } from 'lucide-react';
+
+import { ToolbarButton } from './toolbar';
+
+const FONT_SIZE_MAP = {
+  [HEADING_KEYS.h1]: '36px',
+  [HEADING_KEYS.h2]: '24px',
+  [HEADING_KEYS.h3]: '20px',
+};
+
+export const FontSizeToolbarButton = () => {
+  const fontSize = useEditorSelector((editor) => {
+    const marks = getMarks(editor) || {};
+
+    if (marks[FontSizePlugin.key]) return marks[FontSizePlugin.key];
+
+    const entry = getAboveNode<TElement>(editor, {
+      at: editor.selection?.focus,
+    });
+
+    if (!entry) return '16px';
+
+    const [node] = entry;
+
+    if (node.type in FONT_SIZE_MAP)
+      return FONT_SIZE_MAP[node.type as keyof typeof FONT_SIZE_MAP];
+
+    return '16px';
+  }, []);
+
+  const editor = useEditorRef();
+
+  const getFontSize = (textNode: TText): string => {
+    const fontSize = textNode[FontSizePlugin.key];
+
+    if (typeof fontSize === 'string') return fontSize;
+
+    const dom = toDOMNode(editor, textNode);
+
+    return window.getComputedStyle(dom as HTMLSpanElement).fontSize;
+  };
+
+  const getIncreasedFontSize = (fontSize: string): string => {
+    // 如果输入为空返回默认值
+    if (!fontSize) return '16px';
+
+    // 提取数字和单位
+    const match = /^([\d.]+)([%a-z]*)$/i.exec(fontSize);
+
+    if (!match) return fontSize;
+
+    const [, value, unit] = match;
+    const numericValue = Number.parseFloat(value);
+
+    // 相对长度单位的增加比例
+    const relativeUnits: Record<string, number> = {
+      '%': 12.5, // 百分比
+      cap: 0.125, // 相对于大写字母的高度
+      ch: 0.5, // 相对于数字"0"的宽度
+      em: 0.125, // 相对于父元素的字体大小
+      ex: 0.25, // 相对于字符'x'的高度
+      ic: 0.125, // 相对于表意字符的宽度
+      lh: 0.125, // 相对于行高
+      rem: 0.125, // 相对于根元素的字体大小
+      rlh: 0.125, // 相对于根元素的行高
+    };
+
+    // 绝对长度单位的增加值
+    const absoluteUnits: Record<string, number> = {
+      Q: 1.28, // 四分之一毫米
+      cm: 0.032, // 厘米
+      in: 0.0125, // 英寸
+      mm: 0.32, // 毫米
+      pc: 0.125, // 派卡
+      pt: 1.5, // 点
+      px: 2, // 像素
+    };
+
+    // 视口相关单位的增加比例
+    const viewportUnits: Record<string, number> = {
+      dvb: 0.125, // 动态视口块方向尺寸的1%
+      dvh: 0.125, // 动态视口高度的1%
+      dvi: 0.125, // 动态视口内联方向尺寸的1%
+      dvmax: 0.125, // 动态视口较大尺寸的1%
+      dvmin: 0.125, // 动态视口较小尺寸的1%
+      dvw: 0.125, // 动态视口宽度的1%
+      vb: 0.125, // 视口块方向尺寸的1%
+      vh: 0.125, // 视口高度的1%
+      vi: 0.125, // 视口内联方向尺寸的1%
+      vmax: 0.125, // 视口较大尺寸的1%
+      vmin: 0.125, // 视口较小尺寸的1%
+      vw: 0.125, // 视口宽度的1%
+    };
+
+    // 容器查询单位的增加比例
+    const containerUnits: Record<string, number> = {
+      cqb: 0.125, // 容器查询块尺寸的1%
+      cqh: 0.125, // 容器查询高度的1%
+      cqi: 0.125, // 容器查询内联尺寸的1%
+      cqmax: 0.125, // 容器查询较大尺寸的1%
+      cqmin: 0.125, // 容器查询较小尺寸的1%
+      cqw: 0.125, // 容器查询宽度的1%
+    };
+
+    // 合并所有单位的处理规则
+    const allUnits = {
+      ...relativeUnits,
+      ...absoluteUnits,
+      ...viewportUnits,
+      ...containerUnits,
+    };
+
+    if (unit in allUnits) {
+      const increment = allUnits[unit];
+
+      // 对于绝对单位直接加上增量，对于相对单位增加相应比例
+      const newValue =
+        unit in absoluteUnits
+          ? numericValue + increment
+          : numericValue * (1 + increment);
+
+      // 移除末尾的零和不必要的小数点
+      return `${Number(newValue.toFixed(3))}${unit}`;
+    }
+
+    // 对于未知单位，返回原值
+    return fontSize;
+  };
+
+  const onIncreaseFontSize = (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.preventDefault();
+
+    if (!editor.selection) return;
+
+    const entry = getNodeEntry<TText>(editor, editor.selection.focus);
+
+    if (!entry) return;
+
+    const [text] = entry;
+
+    const fontSize = getFontSize(text);
+
+    setMarks(editor, { [FontSizePlugin.key]: getIncreasedFontSize(fontSize) });
+
+    focusEditor(editor);
+  };
+
+  const onDecreaseFontSize = () => {};
+
+  return (
+    <div className="flex items-center gap-1 rounded-md bg-muted/70 p-0">
+      <ToolbarButton onClick={onIncreaseFontSize}>
+        <Plus />
+      </ToolbarButton>
+      <ToolbarButton>{fontSize as string}</ToolbarButton>
+      <ToolbarButton onClick={onDecreaseFontSize}>
+        <Minus />
+      </ToolbarButton>
+    </div>
+  );
+};
diff --git a/apps/www/src/registry/registry-examples.ts b/apps/www/src/registry/registry-examples.ts
index 2231ea3485..d5eeadfd42 100644
--- a/apps/www/src/registry/registry-examples.ts
+++ b/apps/www/src/registry/registry-examples.ts
@@ -752,6 +752,12 @@ export const examples: Registry = [
     registryDependencies: [],
     type: 'registry:example',
   },
+  {
+    files: ['example/upload-demo.tsx'],
+    name: 'upload',
+    registryDependencies: [],
+    type: 'registry:example',
+  },
   // {
   //   external: true,
   //   files: ['lib/plate-types.ts'],
diff --git a/packages/media/src/react/placeholder/PlaceholderPlugin.tsx b/packages/media/src/react/placeholder/PlaceholderPlugin.tsx
index 0c000fb394..30a32a9d6f 100644
--- a/packages/media/src/react/placeholder/PlaceholderPlugin.tsx
+++ b/packages/media/src/react/placeholder/PlaceholderPlugin.tsx
@@ -44,7 +44,7 @@ export const PlaceholderPlugin = toTPlatePlugin<
   >
 >(BasePlaceholderPlugin, {
   extendEditor: ({ editor }) => {
-    const { apply, writeHistory } = editor;
+    const { writeHistory } = editor;
 
     editor.writeHistory = (stack, batch) => {
       if (isHistoryMarked(editor)) {
@@ -59,12 +59,6 @@ export const PlaceholderPlugin = toTPlatePlugin<
       writeHistory(stack, batch);
     };
 
-    editor.apply = (op) => {
-      console.log(editor.history.undos);
-
-      return apply(op);
-    };
-
     return editor;
   },
   options: {

From 7ef898453ef7124d01f5fbed9e56245bceb5c118 Mon Sep 17 00:00:00 2001
From: Felix Feng <felixfeng33@gmail.com>
Date: Tue, 12 Nov 2024 21:26:02 +0800
Subject: [PATCH 07/34] wip

---
 .../registry/default/example/playground-demo.tsx |  4 +---
 .../default/plate-ui/fixed-toolbar-buttons.tsx   |  3 +--
 .../registry/default/plate-ui/image-element.tsx  | 16 ++++++++++++++--
 3 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/apps/www/src/registry/default/example/playground-demo.tsx b/apps/www/src/registry/default/example/playground-demo.tsx
index ac8c04efcc..019c8a8d7a 100644
--- a/apps/www/src/registry/default/example/playground-demo.tsx
+++ b/apps/www/src/registry/default/example/playground-demo.tsx
@@ -78,9 +78,7 @@ export const usePlaygroundEditor = (id: any = '') => {
         }),
         SingleLinePlugin,
 
-        PlaceholderPlugin.configure({ enabled: id === 'upload' }).withComponent(
-          MediaPlaceholderElement
-        ),
+        PlaceholderPlugin.withComponent(MediaPlaceholderElement),
         // Testing
         PlaywrightPlugin.configure({
           enabled: process.env.NODE_ENV !== 'production',
diff --git a/apps/www/src/registry/default/plate-ui/fixed-toolbar-buttons.tsx b/apps/www/src/registry/default/plate-ui/fixed-toolbar-buttons.tsx
index 24d16b6b4e..107fcb6f11 100644
--- a/apps/www/src/registry/default/plate-ui/fixed-toolbar-buttons.tsx
+++ b/apps/www/src/registry/default/plate-ui/fixed-toolbar-buttons.tsx
@@ -37,7 +37,6 @@ import { AlignDropdownMenu } from './align-dropdown-menu';
 import { ColorDropdownMenu } from './color-dropdown-menu';
 import { CommentToolbarButton } from './comment-toolbar-button';
 import { EmojiDropdownMenu } from './emoji-dropdown-menu';
-import { FontSizeToolbarButton } from './font-size-toolbar-butoon';
 import { IndentListToolbarButton } from './indent-list-toolbar-button';
 import { IndentTodoToolbarButton } from './indent-todo-toolbar-button';
 import { IndentToolbarButton } from './indent-toolbar-button';
@@ -81,7 +80,7 @@ export function FixedToolbarButtons() {
           <ToolbarGroup>
             <InsertDropdownMenu />
             <TurnIntoDropdownMenu />
-            <FontSizeToolbarButton />
+            {/* <FontSizeToolbarButton /> */}
           </ToolbarGroup>
 
           <ToolbarGroup>
diff --git a/apps/www/src/registry/default/plate-ui/image-element.tsx b/apps/www/src/registry/default/plate-ui/image-element.tsx
index d5915ce915..248bd2b905 100644
--- a/apps/www/src/registry/default/plate-ui/image-element.tsx
+++ b/apps/www/src/registry/default/plate-ui/image-element.tsx
@@ -3,7 +3,8 @@
 import React from 'react';
 
 import { cn, withRef } from '@udecode/cn';
-import { withHOC } from '@udecode/plate-common/react';
+import { useEditorRef, withHOC } from '@udecode/plate-common/react';
+import { useDraggable, useDraggableState } from '@udecode/plate-dnd';
 import { Image, ImagePlugin, useMediaState } from '@udecode/plate-media/react';
 import { ResizableProvider, useResizableStore } from '@udecode/plate-resizable';
 
@@ -20,10 +21,19 @@ export const ImageElement = withHOC(
   ResizableProvider,
   withRef<typeof PlateElement>(
     ({ children, className, nodeProps, ...props }, ref) => {
+      const editor = useEditorRef();
+
       const { align = 'center', focused, readOnly, selected } = useMediaState();
 
       const width = useResizableStore().get.width();
 
+      const state = editor.plugins.dnd
+        ? useDraggableState({ element: props.element })
+        : ({} as any);
+
+      const { isDragging } = state;
+      const { handleRef } = useDraggable(state);
+
       return (
         <MediaPopover plugin={ImagePlugin}>
           <PlateElement
@@ -44,10 +54,12 @@ export const ImageElement = withHOC(
                   options={{ direction: 'left' }}
                 />
                 <Image
+                  ref={handleRef}
                   className={cn(
                     'block w-full max-w-full cursor-pointer object-cover px-0',
                     'rounded-sm',
-                    focused && selected && 'ring-2 ring-ring ring-offset-2'
+                    focused && selected && 'ring-2 ring-ring ring-offset-2',
+                    isDragging && 'opacity-50'
                   )}
                   alt=""
                   {...nodeProps}

From 1c80a9d1598409e80a073f23e4d93a91c56f4bae Mon Sep 17 00:00:00 2001
From: zbeyens <zbeyens@udecode.dev>
Date: Wed, 13 Nov 2024 02:49:15 +0100
Subject: [PATCH 08/34] fix

---
 .../src/app/(app)/_components/installation-tab.tsx  | 13 -------------
 .../src/lib/__tests__/setAlign/center.spec.tsx      |  6 +++---
 .../src/lib/__tests__/setAlign/left.spec.tsx        |  6 +++---
 .../src/lib/__tests__/setAlign/no-type.spec.tsx     |  6 +++---
 .../withAutoformat/block/blockquote.spec.tsx        |  6 +++---
 .../withAutoformat/block/code-block.spec.tsx        |  6 +++---
 .../__tests__/withAutoformat/block/heading.spec.tsx |  6 +++---
 .../__tests__/withAutoformat/block/list.spec.tsx    |  6 +++---
 .../withAutoformat/block/preFormat.spec.tsx         |  6 +++---
 .../withAutoformat/block/singleCharTrigger.spec.tsx |  6 +++---
 .../__tests__/withAutoformat/ignoreTrim.spec.tsx    |  6 +++---
 .../lib/__tests__/withAutoformat/invalid.spec.tsx   |  6 +++---
 .../lib/__tests__/withAutoformat/mark/bold.spec.tsx |  6 +++---
 .../lib/__tests__/withAutoformat/mark/code.spec.tsx |  6 +++---
 .../__tests__/withAutoformat/mark/italic.spec.tsx   |  6 +++---
 .../withAutoformat/mark/multiple-marks.spec.tsx     |  6 +++---
 .../withAutoformat/mark/strikethrough.spec.tsx      |  6 +++---
 .../lib/__tests__/withAutoformat/markup.spec.tsx    |  6 +++---
 .../src/lib/__tests__/withAutoformat/text.spec.tsx  |  6 +++---
 .../lib/__tests__/withAutoformat/trigger.spec.tsx   |  6 +++---
 .../__tests__/onKeyDownExitBreak/end.spec.tsx       |  6 +++---
 .../onKeyDownExitBreak/invalid-hotkey.spec.tsx      |  6 +++---
 .../onKeyDownExitBreak/invalid-query.spec.tsx       |  6 +++---
 .../onKeyDownExitBreak/start-end-not-valid.spec.tsx |  6 +++---
 .../__tests__/onKeyDownExitBreak/start.spec.tsx     |  6 +++---
 .../onKeyDownExitBreak/valid-before.spec.tsx        |  6 +++---
 .../__tests__/onKeyDownExitBreak/valid.spec.tsx     |  6 +++---
 .../onKeyDownExitBreak/without-selection.spec.tsx   |  6 +++---
 .../__tests__/onKeyDownSingleLine/enter.spec.tsx    |  6 +++---
 .../onKeyDownSoftBreak/invalid-hotkey.spec.tsx      |  6 +++---
 .../onKeyDownSoftBreak/invalid-query.spec.tsx       |  6 +++---
 .../__tests__/onKeyDownSoftBreak/valid.spec.tsx     |  6 +++---
 .../code-block/src/lib/insertDataCodeBlock.spec.tsx |  6 +++---
 .../src/lib/insertFragmentCodeBlock.spec.tsx        |  6 +++---
 .../src/lib/normalizers/normalizeCodeBlock.spec.tsx |  6 +++---
 .../src/lib/queries/isCodeBlockEmpty.spec.tsx       |  6 +++---
 .../queries/isSelectionAtCodeBlockStart.spec.tsx    |  6 +++---
 .../src/lib/transforms/indentCodeLine.spec.tsx      |  6 +++---
 .../src/lib/transforms/insertCodeBlock.spec.tsx     |  6 +++---
 .../src/lib/transforms/insertCodeLine.spec.tsx      |  6 +++---
 .../lib/transforms/insertEmptyCodeBlock.spec.tsx    |  6 +++---
 .../src/lib/transforms/outdentCodeLine.spec.tsx     |  6 +++---
 .../src/lib/transforms/toggleCodeBlock.spec.tsx     |  6 +++---
 .../src/lib/transforms/unwrapCodeBlock.spec.tsx     |  6 +++---
 packages/code-block/src/lib/withCodeBlock.spec.tsx  |  6 +++---
 .../code-block/src/react/CodeBlockPlugin.spec.tsx   |  6 +++---
 .../combobox/src/lib/withTriggerCombobox.spec.tsx   |  6 +++---
 .../editor-protocol/SlateNextPlugin.spec.tsx        |  6 +++---
 .../core/src/lib/plugins/html/HtmlPlugin.spec.tsx   |  6 +++---
 .../lib/plugins/html/utils/deserializeHtml.spec.tsx |  6 +++---
 .../html/utils/deserializeHtmlElement.spec.tsx      |  6 +++---
 .../plugins/html/utils/deserializeHtmlNode.spec.tsx |  6 +++---
 .../plugins/html/utils/htmlBodyToFragment.spec.tsx  |  6 +++---
 .../html/utils/htmlElementToElement.spec.tsx        |  6 +++---
 .../plugins/html/utils/htmlElementToLeaf.spec.tsx   |  6 +++---
 .../mergeDeepToNodes/default-options.spec.tsx       |  6 +++---
 .../descendant-editor-elements-nested.spec.tsx      |  6 +++---
 .../descendant-elements-nested.spec.tsx             |  6 +++---
 .../descendant-text-factory.spec.tsx                |  6 +++---
 .../mergeDeepToNodes/descendant-text.spec.tsx       |  6 +++---
 .../elements-editor-elements-nested.spec.tsx        |  6 +++---
 .../mergeDeepToNodes/elements-nested.spec.tsx       |  6 +++---
 .../mergeDeepToNodes/elements-text.spec.tsx         |  6 +++---
 .../selectEndOfBlockAboveSelection/default.spec.tsx |  6 +++---
 .../transforms/__tests__/toggleMark/active.spec.tsx |  6 +++---
 .../transforms/__tests__/toggleMark/clear.spec.tsx  |  6 +++---
 .../__tests__/toggleMark/inactive.spec.tsx          |  6 +++---
 .../__tests__/toggleNodeType/active.spec.tsx        |  6 +++---
 .../__tests__/toggleNodeType/inactive.spec.tsx      |  6 +++---
 .../__tests__/toggleWrapNodes/active.spec.tsx       |  6 +++---
 .../__tests__/toggleWrapNodes/not-active.spec.tsx   |  6 +++---
 .../normalizeDescendantsToDocumentFragment.spec.tsx |  6 +++---
 packages/core/src/react/utils/shortcuts.spec.tsx    |  6 +++---
 .../date/src/lib/queries/isPointNextToNode.spec.tsx |  6 +++---
 packages/date/src/lib/withDate.spec.tsx             |  6 +++---
 packages/docx/src/lib/__tests__/align.spec.tsx      |  6 +++---
 .../lib/__tests__/alternate_document_path.spec.tsx  |  6 +++---
 .../docx/src/lib/__tests__/block_quotes.spec.tsx    |  6 +++---
 .../docx/src/lib/__tests__/char_styles.spec.tsx     |  6 +++---
 packages/docx/src/lib/__tests__/codeblock.spec.tsx  |  6 +++---
 .../lib/__tests__/custom-style-reference.spec.tsx   |  6 +++---
 .../__tests__/dummy_item_after_list_item.spec.tsx   |  6 +++---
 .../__tests__/dummy_item_after_paragraph.spec.tsx   |  6 +++---
 packages/docx/src/lib/__tests__/font.spec.tsx       |  6 +++---
 packages/docx/src/lib/__tests__/headers.spec.tsx    |  6 +++---
 .../docx/src/lib/__tests__/inline_code.spec.tsx     |  6 +++---
 .../src/lib/__tests__/inline_formatting.spec.tsx    |  6 +++---
 packages/docx/src/lib/__tests__/legal-in.spec.tsx   |  6 +++---
 packages/docx/src/lib/__tests__/legal.spec.tsx      |  6 +++---
 .../docx/src/lib/__tests__/line-height.spec.tsx     |  6 +++---
 packages/docx/src/lib/__tests__/lists.spec.tsx      |  6 +++---
 .../src/lib/__tests__/lists_sublist_reset.spec.tsx  |  6 +++---
 .../docx/src/lib/__tests__/numbered_header.spec.tsx |  6 +++---
 .../src/lib/__tests__/numbered_sublist.spec.tsx     |  6 +++---
 packages/docx/src/lib/__tests__/tables.spec.tsx     |  6 +++---
 packages/docx/src/lib/__tests__/tabs.spec.tsx       |  6 +++---
 .../indent-list/src/lib/IndentListPlugin.spec.tsx   |  6 +++---
 .../normalizeFirstIndentListStart.spec.tsx          |  6 +++---
 .../normalizeIndentListNotIndented.spec.tsx         |  6 +++---
 .../normalizers/normalizeIndentListStart.spec.tsx   |  6 +++---
 .../src/lib/queries/getIndentListSiblings.spec.tsx  |  6 +++---
 .../src/lib/transforms/toggleIndentList.spec.tsx    |  6 +++---
 .../indent-list/src/lib/withIndentList.spec.tsx     |  6 +++---
 .../src/react/onKeyDownIndentList.spec.tsx          |  6 +++---
 .../link/src/lib/transforms/upsertLink.spec.tsx     |  6 +++---
 packages/link/src/lib/withLink.spec.tsx             |  6 +++---
 .../components/FloatingLink/useFloatingLinkEdit.ts  |  2 +-
 .../src/lib/normalizers/normalizeListItem.spec.tsx  |  6 +++---
 .../list/src/lib/queries/getListItemEntry.spec.tsx  |  6 +++---
 packages/list/src/lib/queries/getListRoot.spec.tsx  |  6 +++---
 packages/list/src/lib/queries/hasListChild.spec.tsx |  6 +++---
 packages/list/src/lib/queries/isListNested.spec.tsx |  6 +++---
 ...veListItemSublistItemsToListItemSublist.spec.tsx |  6 +++---
 .../src/lib/transforms/moveListItemsToList.spec.tsx |  6 +++---
 .../list/src/lib/transforms/removeListItem.spec.tsx |  6 +++---
 .../list/src/lib/transforms/toggleList.spec.tsx     |  6 +++---
 .../list/src/lib/transforms/unwrapList.spec.tsx     |  6 +++---
 .../list/src/lib/withDeleteForwardList.spec.tsx     |  6 +++---
 .../list/src/lib/withInsertFragmentList.spec.tsx    |  6 +++---
 packages/list/src/lib/withNormalizeList.spec.tsx    |  6 +++---
 packages/list/src/react/onKeyDownList.spec.tsx      |  6 +++---
 .../list/src/react/withDeleteBackwardList.spec.tsx  |  6 +++---
 packages/list/src/react/withList.spec.tsx           |  6 +++---
 .../lib/deserializer/utils/deserializeMd.spec.tsx   |  6 +++---
 .../src/lib/serializer/serializeMd.spec.tsx         |  6 +++---
 .../media/src/lib/image/withImageEmbed.spec.tsx     |  6 +++---
 .../media/src/lib/image/withImageUpload.spec.tsx    |  6 +++---
 packages/mention/src/lib/BaseMentionPlugin.ts       |  4 ++--
 packages/mention/src/lib/types.ts                   |  2 +-
 packages/node-id/src/lib/NodeIdPlugin.spec.tsx      |  6 +++---
 .../withNormalizeType/invalid-path.spec.tsx         |  6 +++---
 .../src/__tests__/withNormalizeType/nested.spec.tsx |  6 +++---
 .../withNormalizeType/strictType/insert.spec.tsx    |  6 +++---
 .../withNormalizeType/strictType/set.spec.tsx       |  6 +++---
 .../withNormalizeType/type/insert.spec.tsx          |  6 +++---
 .../__tests__/withNormalizeType/type/set.spec.tsx   |  6 +++---
 .../withRemoveEmptyNodes/empty-link.spec.tsx        |  6 +++---
 .../plate-utils/src/react/selectEditor.spec.tsx     |  6 +++---
 .../reset-node/src/lib/BaseResetNodePlugin.spec.tsx |  6 +++---
 .../src/react/onKeyDownResetNode.spec.tsx           |  6 +++---
 packages/select/src/lib/DeletePlugin.spec.tsx       |  6 +++---
 .../selection/src/react/onKeyDownSelection.spec.tsx |  6 +++---
 .../__tests__/getBlockAboveSelection/block.spec.tsx |  6 +++---
 .../queries/__tests__/getLastNode/level-1.spec.tsx  |  6 +++---
 .../getNextSiblingNodes/no-sibling.spec.tsx         |  6 +++---
 .../getNextSiblingNodes/two-siblings.spec.tsx       |  6 +++---
 .../src/queries/__tests__/getNode/found.spec.tsx    |  6 +++---
 .../queries/__tests__/getNode/not-found.spec.tsx    |  6 +++---
 .../getPointBefore/afterMatch/character.spec.tsx    |  6 +++---
 .../getPointBefore/afterMatch/string.spec.tsx       |  6 +++---
 .../__tests__/getPointBefore/default.spec.tsx       |  6 +++---
 .../__tests__/getPointBefore/match/default.spec.tsx |  6 +++---
 .../__tests__/getPointBefore/matchString.spec.tsx   |  6 +++---
 .../getPointBefore/multiPaths/true.spec.tsx         |  6 +++---
 .../getPointBefore/skipInvalid/false.spec.tsx       |  6 +++---
 .../getPointBefore/skipInvalid/true.spec.tsx        |  6 +++---
 .../__tests__/getPointBefore/unit/word.spec.tsx     |  6 +++---
 .../__tests__/getPointFromLocation/path.spec.tsx    |  6 +++---
 .../__tests__/getPointFromLocation/point.spec.tsx   |  6 +++---
 .../getPointFromLocation/range-focus.spec.tsx       |  6 +++---
 .../__tests__/getPointFromLocation/range.spec.tsx   |  6 +++---
 .../__tests__/getRangeBefore/default.spec.tsx       |  6 +++---
 .../__tests__/getRangeBefore/undefined.spec.tsx     |  6 +++---
 .../getRangeFromBlockStart/no-block.spec.tsx        |  6 +++---
 .../getRangeFromBlockStart/no-selection.spec.tsx    |  6 +++---
 .../getRangeFromBlockStart/selection.spec.tsx       |  6 +++---
 .../__tests__/getSelectionText/true.spec.tsx        |  6 +++---
 .../__tests__/isAncestorEmpty/empty.spec.tsx        |  6 +++---
 .../__tests__/isAncestorEmpty/string.spec.tsx       |  6 +++---
 .../cursor-not-at-end.spec.tsx                      |  6 +++---
 .../empty-text-after.spec.tsx                       |  6 +++---
 .../no-selection.spec.tsx                           |  6 +++---
 .../no-text-after.spec.tsx                          |  6 +++---
 .../text-after.spec.tsx                             |  6 +++---
 .../src/queries/__tests__/isCollapsed/true.spec.tsx |  6 +++---
 .../queries/__tests__/isMarkActive/active.spec.tsx  |  6 +++---
 .../__tests__/isPointAtWordEnd/element-end.spec.tsx |  6 +++---
 .../__tests__/isPointAtWordEnd/word-end.spec.tsx    |  6 +++---
 .../__tests__/isPointAtWordEnd/word-middle.spec.tsx |  6 +++---
 .../__tests__/isSelectionExpanded/true.spec.tsx     |  6 +++---
 .../queries/__tests__/isTextByPath/element.spec.tsx |  6 +++---
 .../queries/__tests__/isTextByPath/text.spec.tsx    |  6 +++---
 .../src/queries/__tests__/isType/type.spec.tsx      |  6 +++---
 .../isWordAfterTrigger/no-trigger.spec.tsx          |  6 +++---
 .../isWordAfterTrigger/trigger-accent.spec.tsx      |  6 +++---
 .../isWordAfterTrigger/trigger-space-word.spec.tsx  |  6 +++---
 .../__tests__/isWordAfterTrigger/trigger.spec.tsx   |  6 +++---
 .../src/queries/isRangeAcrossBlocks.spec.tsx        |  6 +++---
 .../src/transforms/moveChildren.spec.tsx            |  6 +++---
 packages/slate/src/queries/findNode.spec.tsx        |  6 +++---
 packages/slate/src/slate-history/with-history.ts    |  2 +-
 .../src/lib/transforms/addSuggestionMark.spec.tsx   |  6 +++---
 packages/suggestion/src/lib/withSuggestion.spec.tsx |  6 +++---
 .../tabbable/src/lib/findTabDestination.spec.tsx    |  6 +++---
 .../table/src/lib/queries/getTopTableCell.spec.tsx  |  6 +++---
 .../src/lib/queries/isTableBorderHidden.spec.tsx    |  6 +++---
 .../src/lib/transforms/insertTableColumn.spec.tsx   |  6 +++---
 .../src/lib/transforms/insertTableRow.spec.tsx      |  6 +++---
 .../table/src/lib/transforms/setBorderSize.spec.tsx |  6 +++---
 packages/table/src/lib/withNormalizeTable.spec.tsx  |  6 +++---
 packages/table/src/react/onKeyDownTable.spec.tsx    |  6 +++---
 .../src/react/queries/getTableGridByRange.spec.tsx  |  6 +++---
 .../src/react/transforms/deleteColumn.spec.tsx      |  6 +++---
 packages/table/src/react/withDeleteTable.spec.tsx   |  6 +++---
 .../table/src/react/withGetFragmentTable.spec.tsx   |  6 +++---
 .../src/react/withInsertFragmentTable.spec.tsx      |  6 +++---
 .../table/src/react/withInsertTextTable.spec.tsx    |  6 +++---
 .../src/{internals => }/createDataTransfer.ts       |  0
 packages/test-utils/src/index.ts                    |  1 +
 packages/test-utils/src/jsx.ts                      |  8 ++++++++
 .../src/lib/TrailingBlockPlugin.spec.tsx            |  6 +++---
 211 files changed, 623 insertions(+), 627 deletions(-)
 rename packages/test-utils/src/{internals => }/createDataTransfer.ts (100%)

diff --git a/apps/www/src/app/(app)/_components/installation-tab.tsx b/apps/www/src/app/(app)/_components/installation-tab.tsx
index 1f046cc5e3..f24c25efe7 100644
--- a/apps/www/src/app/(app)/_components/installation-tab.tsx
+++ b/apps/www/src/app/(app)/_components/installation-tab.tsx
@@ -333,19 +333,6 @@ export default function InstallationTab() {
 
   const hasDnd = plugins.some((plugin) => plugin.id === DndPlugin.key);
 
-  const hasFixedToolbar = components.some(
-    (comp) => comp.id === 'fixed-toolbar'
-  );
-  const hasFixedToolbarButtons = components.some(
-    (comp) => comp.id === 'fixed-toolbar-buttons'
-  );
-  const hasFloatingToolbar = components.some(
-    (comp) => comp.id === 'floating-toolbar'
-  );
-  const hasFloatingToolbarButtons = components.some(
-    (comp) => comp.id === 'floating-toolbar-buttons'
-  );
-
   let indentLevel = 0;
 
   const addLine = (line: string, opensBlock = false, closesBlock = false) => {
diff --git a/packages/alignment/src/lib/__tests__/setAlign/center.spec.tsx b/packages/alignment/src/lib/__tests__/setAlign/center.spec.tsx
index 0941027bbf..9d922c11f7 100644
--- a/packages/alignment/src/lib/__tests__/setAlign/center.spec.tsx
+++ b/packages/alignment/src/lib/__tests__/setAlign/center.spec.tsx
@@ -1,14 +1,14 @@
-/** @jsx jsx */
+/** @jsx jsxt */
 
 import type { SlateEditor } from '@udecode/plate-common';
 
 import { createSlateEditor } from '@udecode/plate-common';
-import { jsx } from '@udecode/plate-test-utils';
+import { jsxt } from '@udecode/plate-test-utils';
 
 import { BaseAlignPlugin } from '../../BaseAlignPlugin';
 import { setAlign } from '../../transforms';
 
-jsx;
+jsxt;
 
 const input = (
   <editor>
diff --git a/packages/alignment/src/lib/__tests__/setAlign/left.spec.tsx b/packages/alignment/src/lib/__tests__/setAlign/left.spec.tsx
index ac14aa45b6..ac313aaae7 100644
--- a/packages/alignment/src/lib/__tests__/setAlign/left.spec.tsx
+++ b/packages/alignment/src/lib/__tests__/setAlign/left.spec.tsx
@@ -1,14 +1,14 @@
-/** @jsx jsx */
+/** @jsx jsxt */
 
 import type { SlateEditor } from '@udecode/plate-common';
 
 import { createSlateEditor } from '@udecode/plate-common';
-import { jsx } from '@udecode/plate-test-utils';
+import { jsxt } from '@udecode/plate-test-utils';
 
 import { BaseAlignPlugin } from '../../BaseAlignPlugin';
 import { setAlign } from '../../transforms';
 
-jsx;
+jsxt;
 
 const input = (
   <editor>
diff --git a/packages/alignment/src/lib/__tests__/setAlign/no-type.spec.tsx b/packages/alignment/src/lib/__tests__/setAlign/no-type.spec.tsx
index 57e4f77a14..77cecdf79e 100644
--- a/packages/alignment/src/lib/__tests__/setAlign/no-type.spec.tsx
+++ b/packages/alignment/src/lib/__tests__/setAlign/no-type.spec.tsx
@@ -1,14 +1,14 @@
-/** @jsx jsx */
+/** @jsx jsxt */
 
 import type { SlateEditor } from '@udecode/plate-common';
 
 import { createSlateEditor } from '@udecode/plate-common';
-import { jsx } from '@udecode/plate-test-utils';
+import { jsxt } from '@udecode/plate-test-utils';
 
 import { BaseAlignPlugin } from '../../BaseAlignPlugin';
 import { setAlign } from '../../transforms';
 
-jsx;
+jsxt;
 
 describe('when type (h1) is not in types', () => {
   const input = (
diff --git a/packages/autoformat/src/lib/__tests__/withAutoformat/block/blockquote.spec.tsx b/packages/autoformat/src/lib/__tests__/withAutoformat/block/blockquote.spec.tsx
index ec65ccfb8c..fd45b84734 100644
--- a/packages/autoformat/src/lib/__tests__/withAutoformat/block/blockquote.spec.tsx
+++ b/packages/autoformat/src/lib/__tests__/withAutoformat/block/blockquote.spec.tsx
@@ -1,12 +1,12 @@
-/** @jsx jsx */
+/** @jsx jsxt */
 
 import { createSlateEditor } from '@udecode/plate-common';
-import { jsx } from '@udecode/plate-test-utils';
+import { jsxt } from '@udecode/plate-test-utils';
 import { getAutoformatOptions } from 'www/src/lib/plate/demo/plugins/autoformatOptions';
 
 import { BaseAutoformatPlugin } from '../../../BaseAutoformatPlugin';
 
-jsx;
+jsxt;
 
 const input = (
   <fragment>
diff --git a/packages/autoformat/src/lib/__tests__/withAutoformat/block/code-block.spec.tsx b/packages/autoformat/src/lib/__tests__/withAutoformat/block/code-block.spec.tsx
index 76be0e5395..85799c14f2 100644
--- a/packages/autoformat/src/lib/__tests__/withAutoformat/block/code-block.spec.tsx
+++ b/packages/autoformat/src/lib/__tests__/withAutoformat/block/code-block.spec.tsx
@@ -1,4 +1,4 @@
-/** @jsx jsx */
+/** @jsx jsxt */
 
 import type { Range } from 'slate';
 
@@ -12,7 +12,7 @@ import {
   getRangeFromBlockStart,
 } from '@udecode/plate-common';
 import { createSlateEditor } from '@udecode/plate-common';
-import { jsx } from '@udecode/plate-test-utils';
+import { jsxt } from '@udecode/plate-test-utils';
 import {
   getAutoformatOptions,
   preFormat,
@@ -20,7 +20,7 @@ import {
 
 import { BaseAutoformatPlugin } from '../../../BaseAutoformatPlugin';
 
-jsx;
+jsxt;
 
 describe('when ``` at block start', () => {
   it('should insert a code block below', () => {
diff --git a/packages/autoformat/src/lib/__tests__/withAutoformat/block/heading.spec.tsx b/packages/autoformat/src/lib/__tests__/withAutoformat/block/heading.spec.tsx
index c122fdc371..9928cc15ad 100644
--- a/packages/autoformat/src/lib/__tests__/withAutoformat/block/heading.spec.tsx
+++ b/packages/autoformat/src/lib/__tests__/withAutoformat/block/heading.spec.tsx
@@ -1,8 +1,8 @@
-/** @jsx jsx */
+/** @jsx jsxt */
 
 import { createSlateEditor } from '@udecode/plate-common';
 import { HEADING_KEYS } from '@udecode/plate-heading';
-import { jsx } from '@udecode/plate-test-utils';
+import { jsxt } from '@udecode/plate-test-utils';
 import {
   getAutoformatOptions,
   preFormat,
@@ -10,7 +10,7 @@ import {
 
 import { BaseAutoformatPlugin } from '../../../BaseAutoformatPlugin';
 
-jsx;
+jsxt;
 
 describe('when #space', () => {
   it('should set block type to h1', () => {
diff --git a/packages/autoformat/src/lib/__tests__/withAutoformat/block/list.spec.tsx b/packages/autoformat/src/lib/__tests__/withAutoformat/block/list.spec.tsx
index 88ae237fe0..2353b01794 100644
--- a/packages/autoformat/src/lib/__tests__/withAutoformat/block/list.spec.tsx
+++ b/packages/autoformat/src/lib/__tests__/withAutoformat/block/list.spec.tsx
@@ -1,7 +1,7 @@
-/** @jsx jsx */
+/** @jsx jsxt */
 
 import { createSlateEditor } from '@udecode/plate-common';
-import { jsx } from '@udecode/plate-test-utils';
+import { jsxt } from '@udecode/plate-test-utils';
 import { getAutoformatOptions } from 'www/src/lib/plate/demo/plugins/autoformatOptions';
 
 import type {
@@ -11,7 +11,7 @@ import type {
 
 import { BaseAutoformatPlugin } from '../../../BaseAutoformatPlugin';
 
-jsx;
+jsxt;
 
 describe('when -space', () => {
   it('should format to ul', () => {
diff --git a/packages/autoformat/src/lib/__tests__/withAutoformat/block/preFormat.spec.tsx b/packages/autoformat/src/lib/__tests__/withAutoformat/block/preFormat.spec.tsx
index 41afe06945..24077027e0 100644
--- a/packages/autoformat/src/lib/__tests__/withAutoformat/block/preFormat.spec.tsx
+++ b/packages/autoformat/src/lib/__tests__/withAutoformat/block/preFormat.spec.tsx
@@ -1,12 +1,12 @@
-/** @jsx jsx */
+/** @jsx jsxt */
 
 import { createSlateEditor } from '@udecode/plate-common';
-import { jsx } from '@udecode/plate-test-utils';
+import { jsxt } from '@udecode/plate-test-utils';
 import { getAutoformatOptions } from 'www/src/lib/plate/demo/plugins/autoformatOptions';
 
 import { BaseAutoformatPlugin } from '../../../BaseAutoformatPlugin';
 
-jsx;
+jsxt;
 
 const input = (
   <fragment>
diff --git a/packages/autoformat/src/lib/__tests__/withAutoformat/block/singleCharTrigger.spec.tsx b/packages/autoformat/src/lib/__tests__/withAutoformat/block/singleCharTrigger.spec.tsx
index 08016bdb68..1fd561a304 100644
--- a/packages/autoformat/src/lib/__tests__/withAutoformat/block/singleCharTrigger.spec.tsx
+++ b/packages/autoformat/src/lib/__tests__/withAutoformat/block/singleCharTrigger.spec.tsx
@@ -1,4 +1,4 @@
-/** @jsx jsx */
+/** @jsx jsxt */
 
 import {
   createSlatePlugin,
@@ -8,11 +8,11 @@ import {
 } from '@udecode/plate-common';
 import { createSlateEditor } from '@udecode/plate-common';
 import { LinkPlugin } from '@udecode/plate-link/react';
-import { jsx } from '@udecode/plate-test-utils';
+import { jsxt } from '@udecode/plate-test-utils';
 
 import type { AutoformatPluginOptions } from '../../../types';
 
-jsx;
+jsxt;
 
 const input = (
   <fragment>
diff --git a/packages/autoformat/src/lib/__tests__/withAutoformat/ignoreTrim.spec.tsx b/packages/autoformat/src/lib/__tests__/withAutoformat/ignoreTrim.spec.tsx
index 1c98756da6..78e6b02fa0 100644
--- a/packages/autoformat/src/lib/__tests__/withAutoformat/ignoreTrim.spec.tsx
+++ b/packages/autoformat/src/lib/__tests__/withAutoformat/ignoreTrim.spec.tsx
@@ -1,4 +1,4 @@
-/** @jsx jsx */
+/** @jsx jsxt */
 
 import {
   BoldPlugin,
@@ -6,11 +6,11 @@ import {
   UnderlinePlugin,
 } from '@udecode/plate-basic-marks/react';
 import { createSlateEditor } from '@udecode/plate-common';
-import { jsx } from '@udecode/plate-test-utils';
+import { jsxt } from '@udecode/plate-test-utils';
 
 import { BaseAutoformatPlugin } from '../../BaseAutoformatPlugin';
 
-jsx;
+jsxt;
 
 describe('when ignoreTrim is true', () => {
   it('should autoformat', () => {
diff --git a/packages/autoformat/src/lib/__tests__/withAutoformat/invalid.spec.tsx b/packages/autoformat/src/lib/__tests__/withAutoformat/invalid.spec.tsx
index bde4dbbbb1..9fed36bfaa 100644
--- a/packages/autoformat/src/lib/__tests__/withAutoformat/invalid.spec.tsx
+++ b/packages/autoformat/src/lib/__tests__/withAutoformat/invalid.spec.tsx
@@ -1,12 +1,12 @@
-/** @jsx jsx */
+/** @jsx jsxt */
 
 import { createSlateEditor } from '@udecode/plate-common';
-import { jsx } from '@udecode/plate-test-utils';
+import { jsxt } from '@udecode/plate-test-utils';
 import { getAutoformatOptions } from 'www/src/lib/plate/demo/plugins/autoformatOptions';
 
 import { BaseAutoformatPlugin } from '../../BaseAutoformatPlugin';
 
-jsx;
+jsxt;
 
 describe('when the start match is not present and the end match is present', () => {
   it('should run default', () => {
diff --git a/packages/autoformat/src/lib/__tests__/withAutoformat/mark/bold.spec.tsx b/packages/autoformat/src/lib/__tests__/withAutoformat/mark/bold.spec.tsx
index 477af82ec0..86878ccde4 100644
--- a/packages/autoformat/src/lib/__tests__/withAutoformat/mark/bold.spec.tsx
+++ b/packages/autoformat/src/lib/__tests__/withAutoformat/mark/bold.spec.tsx
@@ -1,12 +1,12 @@
-/** @jsx jsx */
+/** @jsx jsxt */
 
 import { createSlateEditor } from '@udecode/plate-common';
-import { jsx } from '@udecode/plate-test-utils';
+import { jsxt } from '@udecode/plate-test-utils';
 import { getAutoformatOptions } from 'www/src/lib/plate/demo/plugins/autoformatOptions';
 
 import { BaseAutoformatPlugin } from '../../../BaseAutoformatPlugin';
 
-jsx;
+jsxt;
 
 const input = (
   <fragment>
diff --git a/packages/autoformat/src/lib/__tests__/withAutoformat/mark/code.spec.tsx b/packages/autoformat/src/lib/__tests__/withAutoformat/mark/code.spec.tsx
index dbb5be175a..e798f27aeb 100644
--- a/packages/autoformat/src/lib/__tests__/withAutoformat/mark/code.spec.tsx
+++ b/packages/autoformat/src/lib/__tests__/withAutoformat/mark/code.spec.tsx
@@ -1,12 +1,12 @@
-/** @jsx jsx */
+/** @jsx jsxt */
 
 import { createSlateEditor } from '@udecode/plate-common';
-import { jsx } from '@udecode/plate-test-utils';
+import { jsxt } from '@udecode/plate-test-utils';
 import { getAutoformatOptions } from 'www/src/lib/plate/demo/plugins/autoformatOptions';
 
 import { BaseAutoformatPlugin } from '../../../BaseAutoformatPlugin';
 
-jsx;
+jsxt;
 
 const input = (
   <fragment>
diff --git a/packages/autoformat/src/lib/__tests__/withAutoformat/mark/italic.spec.tsx b/packages/autoformat/src/lib/__tests__/withAutoformat/mark/italic.spec.tsx
index 09cd919cfa..f4d22f58cb 100644
--- a/packages/autoformat/src/lib/__tests__/withAutoformat/mark/italic.spec.tsx
+++ b/packages/autoformat/src/lib/__tests__/withAutoformat/mark/italic.spec.tsx
@@ -1,12 +1,12 @@
-/** @jsx jsx */
+/** @jsx jsxt */
 
 import { createSlateEditor } from '@udecode/plate-common';
-import { jsx } from '@udecode/plate-test-utils';
+import { jsxt } from '@udecode/plate-test-utils';
 import { getAutoformatOptions } from 'www/src/lib/plate/demo/plugins/autoformatOptions';
 
 import { BaseAutoformatPlugin } from '../../../BaseAutoformatPlugin';
 
-jsx;
+jsxt;
 
 const input = (
   <fragment>
diff --git a/packages/autoformat/src/lib/__tests__/withAutoformat/mark/multiple-marks.spec.tsx b/packages/autoformat/src/lib/__tests__/withAutoformat/mark/multiple-marks.spec.tsx
index 99b0e9eb1b..0c6ac370f8 100644
--- a/packages/autoformat/src/lib/__tests__/withAutoformat/mark/multiple-marks.spec.tsx
+++ b/packages/autoformat/src/lib/__tests__/withAutoformat/mark/multiple-marks.spec.tsx
@@ -1,4 +1,4 @@
-/** @jsx jsx */
+/** @jsx jsxt */
 
 import {
   BoldPlugin,
@@ -6,12 +6,12 @@ import {
   UnderlinePlugin,
 } from '@udecode/plate-basic-marks/react';
 import { createSlateEditor } from '@udecode/plate-common';
-import { jsx } from '@udecode/plate-test-utils';
+import { jsxt } from '@udecode/plate-test-utils';
 import { getAutoformatOptions } from 'www/src/lib/plate/demo/plugins/autoformatOptions';
 
 import { BaseAutoformatPlugin } from '../../../BaseAutoformatPlugin';
 
-jsx;
+jsxt;
 
 describe('when inserting ***', () => {
   it('should autoformat to italic bold', () => {
diff --git a/packages/autoformat/src/lib/__tests__/withAutoformat/mark/strikethrough.spec.tsx b/packages/autoformat/src/lib/__tests__/withAutoformat/mark/strikethrough.spec.tsx
index 42a5e5afea..6255add2c3 100644
--- a/packages/autoformat/src/lib/__tests__/withAutoformat/mark/strikethrough.spec.tsx
+++ b/packages/autoformat/src/lib/__tests__/withAutoformat/mark/strikethrough.spec.tsx
@@ -1,12 +1,12 @@
-/** @jsx jsx */
+/** @jsx jsxt */
 
 import { createSlateEditor } from '@udecode/plate-common';
-import { jsx } from '@udecode/plate-test-utils';
+import { jsxt } from '@udecode/plate-test-utils';
 import { getAutoformatOptions } from 'www/src/lib/plate/demo/plugins/autoformatOptions';
 
 import { BaseAutoformatPlugin } from '../../../BaseAutoformatPlugin';
 
-jsx;
+jsxt;
 
 const input = (
   <fragment>
diff --git a/packages/autoformat/src/lib/__tests__/withAutoformat/markup.spec.tsx b/packages/autoformat/src/lib/__tests__/withAutoformat/markup.spec.tsx
index 67ef45017b..85296e0dd4 100644
--- a/packages/autoformat/src/lib/__tests__/withAutoformat/markup.spec.tsx
+++ b/packages/autoformat/src/lib/__tests__/withAutoformat/markup.spec.tsx
@@ -1,4 +1,4 @@
-/** @jsx jsx */
+/** @jsx jsxt */
 
 import {
   BoldPlugin,
@@ -6,11 +6,11 @@ import {
   UnderlinePlugin,
 } from '@udecode/plate-basic-marks/react';
 import { createSlateEditor } from '@udecode/plate-common';
-import { jsx } from '@udecode/plate-test-utils';
+import { jsxt } from '@udecode/plate-test-utils';
 
 import { BaseAutoformatPlugin } from '../../BaseAutoformatPlugin';
 
-jsx;
+jsxt;
 
 describe('when match is an array', () => {
   it('should autoformat', () => {
diff --git a/packages/autoformat/src/lib/__tests__/withAutoformat/text.spec.tsx b/packages/autoformat/src/lib/__tests__/withAutoformat/text.spec.tsx
index c2139169b2..1d0bd7b12a 100644
--- a/packages/autoformat/src/lib/__tests__/withAutoformat/text.spec.tsx
+++ b/packages/autoformat/src/lib/__tests__/withAutoformat/text.spec.tsx
@@ -1,12 +1,12 @@
-/** @jsx jsx */
+/** @jsx jsxt */
 
 import { createSlateEditor } from '@udecode/plate-common';
-import { jsx } from '@udecode/plate-test-utils';
+import { jsxt } from '@udecode/plate-test-utils';
 import { getAutoformatOptions } from 'www/src/lib/plate/demo/plugins/autoformatOptions';
 
 import { BaseAutoformatPlugin } from '../../BaseAutoformatPlugin';
 
-jsx;
+jsxt;
 
 describe('when --space', () => {
   it('should insert —', () => {
diff --git a/packages/autoformat/src/lib/__tests__/withAutoformat/trigger.spec.tsx b/packages/autoformat/src/lib/__tests__/withAutoformat/trigger.spec.tsx
index c27824681d..daddee24fd 100644
--- a/packages/autoformat/src/lib/__tests__/withAutoformat/trigger.spec.tsx
+++ b/packages/autoformat/src/lib/__tests__/withAutoformat/trigger.spec.tsx
@@ -1,4 +1,4 @@
-/** @jsx jsx */
+/** @jsx jsxt */
 
 import {
   BoldPlugin,
@@ -9,12 +9,12 @@ import {
   createPlateEditor,
   getEditorPlugin,
 } from '@udecode/plate-common/react';
-import { jsx } from '@udecode/plate-test-utils';
+import { jsxt } from '@udecode/plate-test-utils';
 
 import { onKeyDownAutoformat } from '../../../react/onKeyDownAutoformat';
 import { BaseAutoformatPlugin } from '../../BaseAutoformatPlugin';
 
-jsx;
+jsxt;
 
 const input = (
   <fragment>
diff --git a/packages/break/src/react/exit-break/__tests__/onKeyDownExitBreak/end.spec.tsx b/packages/break/src/react/exit-break/__tests__/onKeyDownExitBreak/end.spec.tsx
index aae81acd95..5d99402d14 100644
--- a/packages/break/src/react/exit-break/__tests__/onKeyDownExitBreak/end.spec.tsx
+++ b/packages/break/src/react/exit-break/__tests__/onKeyDownExitBreak/end.spec.tsx
@@ -1,16 +1,16 @@
-/** @jsx jsx */
+/** @jsx jsxt */
 
 import {
   createPlateEditor,
   getEditorPlugin,
 } from '@udecode/plate-common/react';
 import * as isHotkey from '@udecode/plate-core';
-import { jsx } from '@udecode/plate-test-utils';
+import { jsxt } from '@udecode/plate-test-utils';
 
 import { ExitBreakPlugin } from '../../ExitBreakPlugin';
 import { onKeyDownExitBreak } from '../../onKeyDownExitBreak';
 
-jsx;
+jsxt;
 
 const input = (
   <editor>
diff --git a/packages/break/src/react/exit-break/__tests__/onKeyDownExitBreak/invalid-hotkey.spec.tsx b/packages/break/src/react/exit-break/__tests__/onKeyDownExitBreak/invalid-hotkey.spec.tsx
index 2d054e786a..0fe2515562 100644
--- a/packages/break/src/react/exit-break/__tests__/onKeyDownExitBreak/invalid-hotkey.spec.tsx
+++ b/packages/break/src/react/exit-break/__tests__/onKeyDownExitBreak/invalid-hotkey.spec.tsx
@@ -1,15 +1,15 @@
-/** @jsx jsx */
+/** @jsx jsxt */
 
 import {
   createPlateEditor,
   getEditorPlugin,
 } from '@udecode/plate-common/react';
-import { jsx } from '@udecode/plate-test-utils';
+import { jsxt } from '@udecode/plate-test-utils';
 
 import { ExitBreakPlugin } from '../../ExitBreakPlugin';
 import { onKeyDownExitBreak } from '../../onKeyDownExitBreak';
 
-jsx;
+jsxt;
 
 const input = (
   <editor>
diff --git a/packages/break/src/react/exit-break/__tests__/onKeyDownExitBreak/invalid-query.spec.tsx b/packages/break/src/react/exit-break/__tests__/onKeyDownExitBreak/invalid-query.spec.tsx
index 1b0b669964..ab9ec6e07d 100644
--- a/packages/break/src/react/exit-break/__tests__/onKeyDownExitBreak/invalid-query.spec.tsx
+++ b/packages/break/src/react/exit-break/__tests__/onKeyDownExitBreak/invalid-query.spec.tsx
@@ -1,4 +1,4 @@
-/** @jsx jsx */
+/** @jsx jsxt */
 
 import {
   createPlateEditor,
@@ -6,12 +6,12 @@ import {
 } from '@udecode/plate-common/react';
 import * as isHotkey from '@udecode/plate-core';
 import { HEADING_KEYS } from '@udecode/plate-heading';
-import { jsx } from '@udecode/plate-test-utils';
+import { jsxt } from '@udecode/plate-test-utils';
 
 import { ExitBreakPlugin } from '../../ExitBreakPlugin';
 import { onKeyDownExitBreak } from '../../onKeyDownExitBreak';
 
-jsx;
+jsxt;
 
 const input = (
   <editor>
diff --git a/packages/break/src/react/exit-break/__tests__/onKeyDownExitBreak/start-end-not-valid.spec.tsx b/packages/break/src/react/exit-break/__tests__/onKeyDownExitBreak/start-end-not-valid.spec.tsx
index d4dcebdb4b..7881f8d262 100644
--- a/packages/break/src/react/exit-break/__tests__/onKeyDownExitBreak/start-end-not-valid.spec.tsx
+++ b/packages/break/src/react/exit-break/__tests__/onKeyDownExitBreak/start-end-not-valid.spec.tsx
@@ -1,16 +1,16 @@
-/** @jsx jsx */
+/** @jsx jsxt */
 
 import {
   createPlateEditor,
   getEditorPlugin,
 } from '@udecode/plate-common/react';
 import * as isHotkey from '@udecode/plate-core';
-import { jsx } from '@udecode/plate-test-utils';
+import { jsxt } from '@udecode/plate-test-utils';
 
 import { ExitBreakPlugin } from '../../ExitBreakPlugin';
 import { onKeyDownExitBreak } from '../../onKeyDownExitBreak';
 
-jsx;
+jsxt;
 
 const input = (
   <editor>
diff --git a/packages/break/src/react/exit-break/__tests__/onKeyDownExitBreak/start.spec.tsx b/packages/break/src/react/exit-break/__tests__/onKeyDownExitBreak/start.spec.tsx
index d235d00c8d..175f3367d4 100644
--- a/packages/break/src/react/exit-break/__tests__/onKeyDownExitBreak/start.spec.tsx
+++ b/packages/break/src/react/exit-break/__tests__/onKeyDownExitBreak/start.spec.tsx
@@ -1,16 +1,16 @@
-/** @jsx jsx */
+/** @jsx jsxt */
 
 import {
   createPlateEditor,
   getEditorPlugin,
 } from '@udecode/plate-common/react';
 import * as isHotkey from '@udecode/plate-core';
-import { jsx } from '@udecode/plate-test-utils';
+import { jsxt } from '@udecode/plate-test-utils';
 
 import { ExitBreakPlugin } from '../../ExitBreakPlugin';
 import { onKeyDownExitBreak } from '../../onKeyDownExitBreak';
 
-jsx;
+jsxt;
 
 const input = (
   <editor>
diff --git a/packages/break/src/react/exit-break/__tests__/onKeyDownExitBreak/valid-before.spec.tsx b/packages/break/src/react/exit-break/__tests__/onKeyDownExitBreak/valid-before.spec.tsx
index 7c3acb08b4..9b893168b5 100644
--- a/packages/break/src/react/exit-break/__tests__/onKeyDownExitBreak/valid-before.spec.tsx
+++ b/packages/break/src/react/exit-break/__tests__/onKeyDownExitBreak/valid-before.spec.tsx
@@ -1,16 +1,16 @@
-/** @jsx jsx */
+/** @jsx jsxt */
 
 import {
   createPlateEditor,
   getEditorPlugin,
 } from '@udecode/plate-common/react';
 import * as isHotkey from '@udecode/plate-core';
-import { jsx } from '@udecode/plate-test-utils';
+import { jsxt } from '@udecode/plate-test-utils';
 
 import { ExitBreakPlugin } from '../../ExitBreakPlugin';
 import { onKeyDownExitBreak } from '../../onKeyDownExitBreak';
 
-jsx;
+jsxt;
 
 const input = (
   <editor>
diff --git a/packages/break/src/react/exit-break/__tests__/onKeyDownExitBreak/valid.spec.tsx b/packages/break/src/react/exit-break/__tests__/onKeyDownExitBreak/valid.spec.tsx
index f0889c316b..b29ef2daa2 100644
--- a/packages/break/src/react/exit-break/__tests__/onKeyDownExitBreak/valid.spec.tsx
+++ b/packages/break/src/react/exit-break/__tests__/onKeyDownExitBreak/valid.spec.tsx
@@ -1,16 +1,16 @@
-/** @jsx jsx */
+/** @jsx jsxt */
 
 import {
   createPlateEditor,
   getEditorPlugin,
 } from '@udecode/plate-common/react';
 import * as isHotkey from '@udecode/plate-core';
-import { jsx } from '@udecode/plate-test-utils';
+import { jsxt } from '@udecode/plate-test-utils';
 
 import { ExitBreakPlugin } from '../../ExitBreakPlugin';
 import { onKeyDownExitBreak } from '../../onKeyDownExitBreak';
 
-jsx;
+jsxt;
 
 const input = (
   <editor>
diff --git a/packages/break/src/react/exit-break/__tests__/onKeyDownExitBreak/without-selection.spec.tsx b/packages/break/src/react/exit-break/__tests__/onKeyDownExitBreak/without-selection.spec.tsx
index f3892957ef..5d1ea136fb 100644
--- a/packages/break/src/react/exit-break/__tests__/onKeyDownExitBreak/without-selection.spec.tsx
+++ b/packages/break/src/react/exit-break/__tests__/onKeyDownExitBreak/without-selection.spec.tsx
@@ -1,14 +1,14 @@
-/** @jsx jsx */
+/** @jsx jsxt */
 
 import { getEditorPlugin } from '@udecode/plate-common/react';
 import { createPlateEditor } from '@udecode/plate-common/react';
 import * as isHotkey from '@udecode/plate-core';
-import { jsx } from '@udecode/plate-test-utils';
+import { jsxt } from '@udecode/plate-test-utils';
 
 import { ExitBreakPlugin } from '../../ExitBreakPlugin';
 import { onKeyDownExitBreak } from '../../onKeyDownExitBreak';
 
-jsx;
+jsxt;
 
 const input = (
   <editor>
diff --git a/packages/break/src/react/single-line/__tests__/onKeyDownSingleLine/enter.spec.tsx b/packages/break/src/react/single-line/__tests__/onKeyDownSingleLine/enter.spec.tsx
index b647a0a131..1ff738330f 100644
--- a/packages/break/src/react/single-line/__tests__/onKeyDownSingleLine/enter.spec.tsx
+++ b/packages/break/src/react/single-line/__tests__/onKeyDownSingleLine/enter.spec.tsx
@@ -1,10 +1,10 @@
-/** @jsx jsx */
+/** @jsx jsxt */
 
-import { jsx } from '@udecode/plate-test-utils';
+import { jsxt } from '@udecode/plate-test-utils';
 
 import { onKeyDownSingleLine } from '../../onKeyDownSingleLine';
 
-jsx;
+jsxt;
 
 const input = (
   <editor>
diff --git a/packages/break/src/react/soft-break/__tests__/onKeyDownSoftBreak/invalid-hotkey.spec.tsx b/packages/break/src/react/soft-break/__tests__/onKeyDownSoftBreak/invalid-hotkey.spec.tsx
index 9c6813c512..6e404dc66f 100644
--- a/packages/break/src/react/soft-break/__tests__/onKeyDownSoftBreak/invalid-hotkey.spec.tsx
+++ b/packages/break/src/react/soft-break/__tests__/onKeyDownSoftBreak/invalid-hotkey.spec.tsx
@@ -1,15 +1,15 @@
-/** @jsx jsx */
+/** @jsx jsxt */
 
 import {
   createPlateEditor,
   getEditorPlugin,
 } from '@udecode/plate-common/react';
-import { jsx } from '@udecode/plate-test-utils';
+import { jsxt } from '@udecode/plate-test-utils';
 
 import { SoftBreakPlugin } from '../../SoftBreakPlugin';
 import { onKeyDownSoftBreak } from '../../onKeyDownSoftBreak';
 
-jsx;
+jsxt;
 
 const input = (
   <editor>
diff --git a/packages/break/src/react/soft-break/__tests__/onKeyDownSoftBreak/invalid-query.spec.tsx b/packages/break/src/react/soft-break/__tests__/onKeyDownSoftBreak/invalid-query.spec.tsx
index 60cf633434..600958b437 100644
--- a/packages/break/src/react/soft-break/__tests__/onKeyDownSoftBreak/invalid-query.spec.tsx
+++ b/packages/break/src/react/soft-break/__tests__/onKeyDownSoftBreak/invalid-query.spec.tsx
@@ -1,4 +1,4 @@
-/** @jsx jsx */
+/** @jsx jsxt */
 
 import { CodeBlockPlugin } from '@udecode/plate-code-block/react';
 import {
@@ -6,12 +6,12 @@ import {
   getEditorPlugin,
 } from '@udecode/plate-common/react';
 import * as isHotkey from '@udecode/plate-core';
-import { jsx } from '@udecode/plate-test-utils';
+import { jsxt } from '@udecode/plate-test-utils';
 
 import { SoftBreakPlugin } from '../../SoftBreakPlugin';
 import { onKeyDownSoftBreak } from '../../onKeyDownSoftBreak';
 
-jsx;
+jsxt;
 
 const input = (
   <editor>
diff --git a/packages/break/src/react/soft-break/__tests__/onKeyDownSoftBreak/valid.spec.tsx b/packages/break/src/react/soft-break/__tests__/onKeyDownSoftBreak/valid.spec.tsx
index efdb0c7151..249bba6fb6 100644
--- a/packages/break/src/react/soft-break/__tests__/onKeyDownSoftBreak/valid.spec.tsx
+++ b/packages/break/src/react/soft-break/__tests__/onKeyDownSoftBreak/valid.spec.tsx
@@ -1,16 +1,16 @@
-/** @jsx jsx */
+/** @jsx jsxt */
 
 import {
   createPlateEditor,
   getEditorPlugin,
 } from '@udecode/plate-common/react';
 import * as isHotkey from '@udecode/plate-core';
-import { jsx } from '@udecode/plate-test-utils';
+import { jsxt } from '@udecode/plate-test-utils';
 
 import { SoftBreakPlugin } from '../../SoftBreakPlugin';
 import { onKeyDownSoftBreak } from '../../onKeyDownSoftBreak';
 
-jsx;
+jsxt;
 
 const input = (
   <editor>
diff --git a/packages/code-block/src/lib/insertDataCodeBlock.spec.tsx b/packages/code-block/src/lib/insertDataCodeBlock.spec.tsx
index 395872c413..3b71404e1e 100644
--- a/packages/code-block/src/lib/insertDataCodeBlock.spec.tsx
+++ b/packages/code-block/src/lib/insertDataCodeBlock.spec.tsx
@@ -1,14 +1,14 @@
-/** @jsx jsx */
+/** @jsx jsxt */
 
 import type { SlateEditor } from '@udecode/plate-common';
 
 import { BaseParagraphPlugin } from '@udecode/plate-common';
 import { createPlateEditor } from '@udecode/plate-common/react';
-import { createDataTransfer, jsx } from '@udecode/plate-test-utils';
+import { createDataTransfer, jsxt } from '@udecode/plate-test-utils';
 
 import { CodeBlockPlugin } from '../react/CodeBlockPlugin';
 
-jsx;
+jsxt;
 
 const editorTest = (input: any, data: DataTransfer, expected: any) => {
   const plugins = [BaseParagraphPlugin, CodeBlockPlugin];
diff --git a/packages/code-block/src/lib/insertFragmentCodeBlock.spec.tsx b/packages/code-block/src/lib/insertFragmentCodeBlock.spec.tsx
index 3b479f2cc5..0a8c1784e3 100644
--- a/packages/code-block/src/lib/insertFragmentCodeBlock.spec.tsx
+++ b/packages/code-block/src/lib/insertFragmentCodeBlock.spec.tsx
@@ -1,14 +1,14 @@
-/** @jsx jsx */
+/** @jsx jsxt */
 
 import type { SlateEditor, TDescendant } from '@udecode/plate-common';
 
 import { BaseParagraphPlugin } from '@udecode/plate-common';
 import { createPlateEditor } from '@udecode/plate-common/react';
-import { jsx } from '@udecode/plate-test-utils';
+import { jsxt } from '@udecode/plate-test-utils';
 
 import { CodeBlockPlugin } from '../react/CodeBlockPlugin';
 
-jsx;
+jsxt;
 
 const editorTest = (input: any, fragment: any, expected: any) => {
   const editor = createPlateEditor({
diff --git a/packages/code-block/src/lib/normalizers/normalizeCodeBlock.spec.tsx b/packages/code-block/src/lib/normalizers/normalizeCodeBlock.spec.tsx
index cc598a34fe..7aeea4dd80 100644
--- a/packages/code-block/src/lib/normalizers/normalizeCodeBlock.spec.tsx
+++ b/packages/code-block/src/lib/normalizers/normalizeCodeBlock.spec.tsx
@@ -1,12 +1,12 @@
-/** @jsx jsx */
+/** @jsx jsxt */
 
 import { type SlateEditor, getNode } from '@udecode/plate-common';
 import { createPlateEditor } from '@udecode/plate-common/react';
-import { jsx } from '@udecode/plate-test-utils';
+import { jsxt } from '@udecode/plate-test-utils';
 
 import { CodeBlockPlugin } from '../../react/CodeBlockPlugin';
 
-jsx;
+jsxt;
 
 describe('clean up code block', () => {
   it('should turn children of code block to code lines', () => {
diff --git a/packages/code-block/src/lib/queries/isCodeBlockEmpty.spec.tsx b/packages/code-block/src/lib/queries/isCodeBlockEmpty.spec.tsx
index d453cdba29..282da2fd8e 100644
--- a/packages/code-block/src/lib/queries/isCodeBlockEmpty.spec.tsx
+++ b/packages/code-block/src/lib/queries/isCodeBlockEmpty.spec.tsx
@@ -1,13 +1,13 @@
-/** @jsx jsx */
+/** @jsx jsxt */
 
 import type { SlateEditor } from '@udecode/plate-common';
 
 import { createPlateEditor } from '@udecode/plate-common/react';
-import { jsx } from '@udecode/plate-test-utils';
+import { jsxt } from '@udecode/plate-test-utils';
 
 import { isCodeBlockEmpty } from './isCodeBlockEmpty';
 
-jsx;
+jsxt;
 
 describe('isCodeBlockEmpty', () => {
   it('should be false when not in a code block', () => {
diff --git a/packages/code-block/src/lib/queries/isSelectionAtCodeBlockStart.spec.tsx b/packages/code-block/src/lib/queries/isSelectionAtCodeBlockStart.spec.tsx
index 44f6c9ca4b..62f3e564e9 100644
--- a/packages/code-block/src/lib/queries/isSelectionAtCodeBlockStart.spec.tsx
+++ b/packages/code-block/src/lib/queries/isSelectionAtCodeBlockStart.spec.tsx
@@ -1,13 +1,13 @@
-/** @jsx jsx */
+/** @jsx jsxt */
 
 import type { SlateEditor } from '@udecode/plate-common';
 
 import { createPlateEditor } from '@udecode/plate-common/react';
-import { jsx } from '@udecode/plate-test-utils';
+import { jsxt } from '@udecode/plate-test-utils';
 
 import { isSelectionAtCodeBlockStart } from './isSelectionAtCodeBlockStart';
 
-jsx;
+jsxt;
 
 describe('isSelectionAtCodeBlockStart', () => {
   it('should be false when not in a code block', () => {
diff --git a/packages/code-block/src/lib/transforms/indentCodeLine.spec.tsx b/packages/code-block/src/lib/transforms/indentCodeLine.spec.tsx
index 10f4237aeb..474ffea7d5 100644
--- a/packages/code-block/src/lib/transforms/indentCodeLine.spec.tsx
+++ b/packages/code-block/src/lib/transforms/indentCodeLine.spec.tsx
@@ -1,4 +1,4 @@
-/** @jsx jsx */
+/** @jsx jsxt */
 
 import {
   type SlateEditor,
@@ -6,12 +6,12 @@ import {
   getNodeEntry,
 } from '@udecode/plate-common';
 import { createPlateEditor } from '@udecode/plate-common/react';
-import { jsx } from '@udecode/plate-test-utils';
+import { jsxt } from '@udecode/plate-test-utils';
 
 import { CodeBlockPlugin } from '../../react/CodeBlockPlugin';
 import { indentCodeLine } from './indentCodeLine';
 
-jsx;
+jsxt;
 
 describe('indent code line', () => {
   describe('when the selection is expanded', () => {
diff --git a/packages/code-block/src/lib/transforms/insertCodeBlock.spec.tsx b/packages/code-block/src/lib/transforms/insertCodeBlock.spec.tsx
index a48a108614..9210883f6c 100644
--- a/packages/code-block/src/lib/transforms/insertCodeBlock.spec.tsx
+++ b/packages/code-block/src/lib/transforms/insertCodeBlock.spec.tsx
@@ -1,14 +1,14 @@
-/** @jsx jsx */
+/** @jsx jsxt */
 
 import type { SlateEditor } from '@udecode/plate-common';
 
 import { createPlateEditor } from '@udecode/plate-common/react';
-import { jsx } from '@udecode/plate-test-utils';
+import { jsxt } from '@udecode/plate-test-utils';
 
 import { CodeBlockPlugin } from '../../react/CodeBlockPlugin';
 import { insertCodeBlock } from './insertCodeBlock';
 
-jsx;
+jsxt;
 
 describe('insert code block', () => {
   describe('when selection is at start of block', () => {
diff --git a/packages/code-block/src/lib/transforms/insertCodeLine.spec.tsx b/packages/code-block/src/lib/transforms/insertCodeLine.spec.tsx
index aa5f1234fe..3a7f92721a 100644
--- a/packages/code-block/src/lib/transforms/insertCodeLine.spec.tsx
+++ b/packages/code-block/src/lib/transforms/insertCodeLine.spec.tsx
@@ -1,14 +1,14 @@
-/** @jsx jsx */
+/** @jsx jsxt */
 
 import type { SlateEditor } from '@udecode/plate-common';
 
 import { createPlateEditor } from '@udecode/plate-common/react';
-import { jsx } from '@udecode/plate-test-utils';
+import { jsxt } from '@udecode/plate-test-utils';
 
 import { CodeBlockPlugin } from '../../react/CodeBlockPlugin';
 import { insertCodeLine } from './insertCodeLine';
 
-jsx;
+jsxt;
 
 describe('insert code line', () => {
   it('should insert code line below selected line', () => {
diff --git a/packages/code-block/src/lib/transforms/insertEmptyCodeBlock.spec.tsx b/packages/code-block/src/lib/transforms/insertEmptyCodeBlock.spec.tsx
index abbe66b5f7..c5937b918e 100644
--- a/packages/code-block/src/lib/transforms/insertEmptyCodeBlock.spec.tsx
+++ b/packages/code-block/src/lib/transforms/insertEmptyCodeBlock.spec.tsx
@@ -1,14 +1,14 @@
-/** @jsx jsx */
+/** @jsx jsxt */
 
 import type { SlateEditor } from '@udecode/plate-common';
 
 import { createPlateEditor } from '@udecode/plate-common/react';
-import { jsx } from '@udecode/plate-test-utils';
+import { jsxt } from '@udecode/plate-test-utils';
 
 import { CodeBlockPlugin } from '../../react/CodeBlockPlugin';
 import { insertEmptyCodeBlock } from './insertEmptyCodeBlock';
 
-jsx;
+jsxt;
 
 describe('insert empty code block', () => {
   it('should insert empty code block on selected empty line', () => {
diff --git a/packages/code-block/src/lib/transforms/outdentCodeLine.spec.tsx b/packages/code-block/src/lib/transforms/outdentCodeLine.spec.tsx
index 5c95d34874..6834fb2824 100644
--- a/packages/code-block/src/lib/transforms/outdentCodeLine.spec.tsx
+++ b/packages/code-block/src/lib/transforms/outdentCodeLine.spec.tsx
@@ -1,4 +1,4 @@
-/** @jsx jsx */
+/** @jsx jsxt */
 
 import {
   type SlateEditor,
@@ -6,12 +6,12 @@ import {
   getNodeEntry,
 } from '@udecode/plate-common';
 import { createPlateEditor } from '@udecode/plate-common/react';
-import { jsx } from '@udecode/plate-test-utils';
+import { jsxt } from '@udecode/plate-test-utils';
 
 import { CodeBlockPlugin } from '../../react/CodeBlockPlugin';
 import { outdentCodeLine } from './outdentCodeLine';
 
-jsx;
+jsxt;
 
 describe('outdent code line', () => {
   describe('when line is indented', () => {
diff --git a/packages/code-block/src/lib/transforms/toggleCodeBlock.spec.tsx b/packages/code-block/src/lib/transforms/toggleCodeBlock.spec.tsx
index d25c4d7dcf..d19e89589c 100644
--- a/packages/code-block/src/lib/transforms/toggleCodeBlock.spec.tsx
+++ b/packages/code-block/src/lib/transforms/toggleCodeBlock.spec.tsx
@@ -1,14 +1,14 @@
-/** @jsx jsx */
+/** @jsx jsxt */
 
 import type { SlateEditor } from '@udecode/plate-common';
 
 import { createPlateEditor } from '@udecode/plate-common/react';
-import { jsx } from '@udecode/plate-test-utils';
+import { jsxt } from '@udecode/plate-test-utils';
 
 import { CodeBlockPlugin } from '../../react/CodeBlockPlugin';
 import { toggleCodeBlock } from './toggleCodeBlock';
 
-jsx;
+jsxt;
 
 describe('toggle on', () => {
   it('should turn a p to a code block', () => {
diff --git a/packages/code-block/src/lib/transforms/unwrapCodeBlock.spec.tsx b/packages/code-block/src/lib/transforms/unwrapCodeBlock.spec.tsx
index f7c9b7e61e..fae47d3466 100644
--- a/packages/code-block/src/lib/transforms/unwrapCodeBlock.spec.tsx
+++ b/packages/code-block/src/lib/transforms/unwrapCodeBlock.spec.tsx
@@ -1,14 +1,14 @@
-/** @jsx jsx */
+/** @jsx jsxt */
 
 import type { SlateEditor } from '@udecode/plate-common';
 
 import { createPlateEditor } from '@udecode/plate-common/react';
-import { jsx } from '@udecode/plate-test-utils';
+import { jsxt } from '@udecode/plate-test-utils';
 
 import { CodeBlockPlugin } from '../../react/CodeBlockPlugin';
 import { unwrapCodeBlock } from './unwrapCodeBlock';
 
-jsx;
+jsxt;
 
 describe('unwrap code block', () => {
   it('should turn a code block to multiple p', () => {
diff --git a/packages/code-block/src/lib/withCodeBlock.spec.tsx b/packages/code-block/src/lib/withCodeBlock.spec.tsx
index 0092cbfb9e..27e05fbda9 100644
--- a/packages/code-block/src/lib/withCodeBlock.spec.tsx
+++ b/packages/code-block/src/lib/withCodeBlock.spec.tsx
@@ -1,13 +1,13 @@
-/** @jsx jsx */
+/** @jsx jsxt */
 
 import type { SlateEditor } from '@udecode/plate-common';
 
 import { createPlateEditor } from '@udecode/plate-common/react';
-import { jsx } from '@udecode/plate-test-utils';
+import { jsxt } from '@udecode/plate-test-utils';
 
 import { CodeBlockPlugin } from '../react/CodeBlockPlugin';
 
-jsx;
+jsxt;
 
 describe('insert break', () => {
   describe('when cursor is inside code line', () => {
diff --git a/packages/code-block/src/react/CodeBlockPlugin.spec.tsx b/packages/code-block/src/react/CodeBlockPlugin.spec.tsx
index 79846fe9dd..c214f14669 100644
--- a/packages/code-block/src/react/CodeBlockPlugin.spec.tsx
+++ b/packages/code-block/src/react/CodeBlockPlugin.spec.tsx
@@ -1,15 +1,15 @@
-/** @jsx jsx */
+/** @jsx jsxt */
 
 import type { SlateEditor } from '@udecode/plate-common';
 
 import { createSlatePlugin } from '@udecode/plate-common';
 import { BaseParagraphPlugin } from '@udecode/plate-common';
 import { createPlateEditor } from '@udecode/plate-common/react';
-import { jsx } from '@udecode/plate-test-utils';
+import { jsxt } from '@udecode/plate-test-utils';
 
 import { CodeBlockPlugin } from './CodeBlockPlugin';
 
-jsx;
+jsxt;
 
 describe('code block deserialization', () => {
   describe('when selection in code line', () => {
diff --git a/packages/combobox/src/lib/withTriggerCombobox.spec.tsx b/packages/combobox/src/lib/withTriggerCombobox.spec.tsx
index c60c3a4714..727909d642 100644
--- a/packages/combobox/src/lib/withTriggerCombobox.spec.tsx
+++ b/packages/combobox/src/lib/withTriggerCombobox.spec.tsx
@@ -1,4 +1,4 @@
-/** @jsx jsx */
+/** @jsx jsxt */
 
 import {
   type TriggerComboboxPluginOptions,
@@ -7,7 +7,7 @@ import {
 import { createSlatePlugin } from '@udecode/plate-common';
 import { createSlateEditor } from '@udecode/plate-common';
 import { ParagraphPlugin } from '@udecode/plate-common/react';
-import { jsx } from '@udecode/plate-test-utils';
+import { jsxt } from '@udecode/plate-test-utils';
 
 const ExampleComboboxPlugin = createSlatePlugin<
   string,
@@ -59,7 +59,7 @@ const createEditorWithCombobox = (chidren: any) =>
     plugins,
   });
 
-jsx;
+jsxt;
 
 describe('withTriggerCombobox', () => {
   ['@', '#', ':'].forEach((trigger) => {
diff --git a/packages/core/src/lib/plugins/editor-protocol/SlateNextPlugin.spec.tsx b/packages/core/src/lib/plugins/editor-protocol/SlateNextPlugin.spec.tsx
index 973ab4f5a6..bcf52e182e 100644
--- a/packages/core/src/lib/plugins/editor-protocol/SlateNextPlugin.spec.tsx
+++ b/packages/core/src/lib/plugins/editor-protocol/SlateNextPlugin.spec.tsx
@@ -1,10 +1,10 @@
-/** @jsx jsx */
+/** @jsx jsxt */
 
-import { jsx } from '@udecode/plate-test-utils';
+import { jsxt } from '@udecode/plate-test-utils';
 
 import { createPlateEditor } from '../../../react';
 
-jsx;
+jsxt;
 
 // https://github.com/udecode/editor-protocol/issues/81
 describe('delete marked text at block start', () => {
diff --git a/packages/core/src/lib/plugins/html/HtmlPlugin.spec.tsx b/packages/core/src/lib/plugins/html/HtmlPlugin.spec.tsx
index 40d999b0ad..c4171ab252 100644
--- a/packages/core/src/lib/plugins/html/HtmlPlugin.spec.tsx
+++ b/packages/core/src/lib/plugins/html/HtmlPlugin.spec.tsx
@@ -1,17 +1,17 @@
-/** @jsx jsx */
+/** @jsx jsxt */
 
 import { BoldPlugin } from '@udecode/plate-basic-marks/react';
 import { HeadingPlugin } from '@udecode/plate-heading/react';
 import { LinkPlugin } from '@udecode/plate-link/react';
 import { MediaEmbedPlugin } from '@udecode/plate-media/react';
-import { jsx } from '@udecode/plate-test-utils';
+import { jsxt } from '@udecode/plate-test-utils';
 
 import type { SlateEditor } from '../../editor';
 
 import { createPlateEditor } from '../../../react';
 import { BaseParagraphPlugin } from '../paragraph';
 
-jsx;
+jsxt;
 
 describe('when inserting html', () => {
   // noinspection CheckTagEmptyBody
diff --git a/packages/core/src/lib/plugins/html/utils/deserializeHtml.spec.tsx b/packages/core/src/lib/plugins/html/utils/deserializeHtml.spec.tsx
index d96bb674df..eec5b62d05 100644
--- a/packages/core/src/lib/plugins/html/utils/deserializeHtml.spec.tsx
+++ b/packages/core/src/lib/plugins/html/utils/deserializeHtml.spec.tsx
@@ -1,4 +1,4 @@
-/** @jsx jsx */
+/** @jsx jsxt */
 
 import { AlignPlugin } from '@udecode/plate-alignment/react';
 import {
@@ -21,14 +21,14 @@ import { LinkPlugin } from '@udecode/plate-link/react';
 import { ListPlugin } from '@udecode/plate-list/react';
 import { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react';
 import { TablePlugin } from '@udecode/plate-table/react';
-import { getHtmlDocument, jsx } from '@udecode/plate-test-utils';
+import { getHtmlDocument, jsxt } from '@udecode/plate-test-utils';
 
 import { createPlateEditor } from '../../../../react';
 import { BaseParagraphPlugin } from '../../paragraph';
 import { deserializeHtml } from './deserializeHtml';
 import { deserializeHtmlElement } from './deserializeHtmlElement';
 
-jsx;
+jsxt;
 
 describe('type', () => {});
 
diff --git a/packages/core/src/lib/plugins/html/utils/deserializeHtmlElement.spec.tsx b/packages/core/src/lib/plugins/html/utils/deserializeHtmlElement.spec.tsx
index 854bb6e759..830077ccbc 100644
--- a/packages/core/src/lib/plugins/html/utils/deserializeHtmlElement.spec.tsx
+++ b/packages/core/src/lib/plugins/html/utils/deserializeHtmlElement.spec.tsx
@@ -1,17 +1,17 @@
-/** @jsx jsx */
+/** @jsx jsxt */
 
 import { BoldPlugin } from '@udecode/plate-basic-marks/react';
 import { LinkPlugin } from '@udecode/plate-link/react';
 import { ImagePlugin } from '@udecode/plate-media/react';
 import { TablePlugin } from '@udecode/plate-table/react';
-import { getHtmlDocument, jsx } from '@udecode/plate-test-utils';
+import { getHtmlDocument, jsxt } from '@udecode/plate-test-utils';
 
 import { createPlateEditor } from '../../../../react';
 import { createSlatePlugin } from '../../../plugin';
 import { BaseParagraphPlugin } from '../../paragraph';
 import { deserializeHtmlElement } from './deserializeHtmlElement';
 
-jsx;
+jsxt;
 
 describe('when element has class and attribute, and plugin has deserialize type, getNode and className', () => {
   const html = '<html><body><div class="poll" data-id="456" /></body></html>';
diff --git a/packages/core/src/lib/plugins/html/utils/deserializeHtmlNode.spec.tsx b/packages/core/src/lib/plugins/html/utils/deserializeHtmlNode.spec.tsx
index d5fe007a6d..b0d5d9e562 100644
--- a/packages/core/src/lib/plugins/html/utils/deserializeHtmlNode.spec.tsx
+++ b/packages/core/src/lib/plugins/html/utils/deserializeHtmlNode.spec.tsx
@@ -1,11 +1,11 @@
-/** @jsx jsx */
+/** @jsx jsxt */
 
-import { getHtmlDocument, jsx } from '@udecode/plate-test-utils';
+import { getHtmlDocument, jsxt } from '@udecode/plate-test-utils';
 
 import { createPlateEditor } from '../../../../react';
 import { deserializeHtmlNode } from './deserializeHtmlNode';
 
-jsx;
+jsxt;
 
 describe('when element has a br', () => {
   const editor = createPlateEditor({ plugins: [] });
diff --git a/packages/core/src/lib/plugins/html/utils/htmlBodyToFragment.spec.tsx b/packages/core/src/lib/plugins/html/utils/htmlBodyToFragment.spec.tsx
index 405f20f6e8..50d6dd9114 100644
--- a/packages/core/src/lib/plugins/html/utils/htmlBodyToFragment.spec.tsx
+++ b/packages/core/src/lib/plugins/html/utils/htmlBodyToFragment.spec.tsx
@@ -1,12 +1,12 @@
-/** @jsx jsx */
+/** @jsx jsxt */
 
-import { jsx } from '@udecode/plate-test-utils';
+import { jsxt } from '@udecode/plate-test-utils';
 
 import { ParagraphPlugin, createPlateEditor } from '../../../../react';
 import { htmlBodyToFragment } from './htmlBodyToFragment';
 import { parseHtmlElement } from './parseHtmlElement';
 
-jsx;
+jsxt;
 
 describe('when element is a body', () => {
   it('should be a fragment with the children', () => {
diff --git a/packages/core/src/lib/plugins/html/utils/htmlElementToElement.spec.tsx b/packages/core/src/lib/plugins/html/utils/htmlElementToElement.spec.tsx
index d110184391..38cf410da5 100644
--- a/packages/core/src/lib/plugins/html/utils/htmlElementToElement.spec.tsx
+++ b/packages/core/src/lib/plugins/html/utils/htmlElementToElement.spec.tsx
@@ -1,14 +1,14 @@
 /* eslint-disable react-hooks/rules-of-hooks */
-/** @jsx jsx */
+/** @jsx jsxt */
 
-import { jsx } from '@udecode/plate-test-utils';
+import { jsxt } from '@udecode/plate-test-utils';
 
 import { ParagraphPlugin } from '../../../../react';
 import { createPlateEditor } from '../../../../react/editor/withPlate';
 import { htmlElementToElement } from './htmlElementToElement';
 import { parseHtmlElement } from './parseHtmlElement';
 
-jsx;
+jsxt;
 
 const output = (
   <hp>
diff --git a/packages/core/src/lib/plugins/html/utils/htmlElementToLeaf.spec.tsx b/packages/core/src/lib/plugins/html/utils/htmlElementToLeaf.spec.tsx
index fca2632d77..f408e57c45 100644
--- a/packages/core/src/lib/plugins/html/utils/htmlElementToLeaf.spec.tsx
+++ b/packages/core/src/lib/plugins/html/utils/htmlElementToLeaf.spec.tsx
@@ -1,9 +1,9 @@
 /* eslint-disable react-hooks/rules-of-hooks */
-/** @jsx jsx */
+/** @jsx jsxt */
 
 import { BoldPlugin, ItalicPlugin } from '@udecode/plate-basic-marks/react';
 import { ListPlugin } from '@udecode/plate-list/react';
-import { jsx } from '@udecode/plate-test-utils';
+import { jsxt } from '@udecode/plate-test-utils';
 
 import { createPlateEditor } from '../../../../react';
 import { createSlatePlugin } from '../../../plugin';
@@ -11,7 +11,7 @@ import { BaseParagraphPlugin } from '../../paragraph';
 import { htmlElementToLeaf } from './htmlElementToLeaf';
 import { parseHtmlElement } from './parseHtmlElement';
 
-jsx;
+jsxt;
 
 describe('when children is a text', () => {
   const output = (
diff --git a/packages/core/src/lib/transforms/__tests__/mergeDeepToNodes/default-options.spec.tsx b/packages/core/src/lib/transforms/__tests__/mergeDeepToNodes/default-options.spec.tsx
index 54ee1f63f6..6027c52d03 100644
--- a/packages/core/src/lib/transforms/__tests__/mergeDeepToNodes/default-options.spec.tsx
+++ b/packages/core/src/lib/transforms/__tests__/mergeDeepToNodes/default-options.spec.tsx
@@ -1,14 +1,14 @@
-/** @jsx jsx */
+/** @jsx jsxt */
 
 import type { TNode } from '@udecode/slate';
 
-import { jsx } from '@udecode/plate-test-utils';
+import { jsxt } from '@udecode/plate-test-utils';
 
 import type { SlateEditor } from '../../../editor';
 
 import { mergeDeepToNodes } from '../../../utils';
 
-jsx;
+jsxt;
 
 const editor = (
   <editor>
diff --git a/packages/core/src/lib/transforms/__tests__/mergeDeepToNodes/descendant-editor-elements-nested.spec.tsx b/packages/core/src/lib/transforms/__tests__/mergeDeepToNodes/descendant-editor-elements-nested.spec.tsx
index 9db80d23ad..2fe89615b7 100644
--- a/packages/core/src/lib/transforms/__tests__/mergeDeepToNodes/descendant-editor-elements-nested.spec.tsx
+++ b/packages/core/src/lib/transforms/__tests__/mergeDeepToNodes/descendant-editor-elements-nested.spec.tsx
@@ -1,13 +1,13 @@
-/** @jsx jsx */
+/** @jsx jsxt */
 
 import { ListItemPlugin } from '@udecode/plate-list/react';
-import { jsx } from '@udecode/plate-test-utils';
+import { jsxt } from '@udecode/plate-test-utils';
 import { isDescendant } from '@udecode/slate';
 
 import { BaseParagraphPlugin } from '../../../plugins';
 import { mergeDeepToNodes } from '../../../utils';
 
-jsx;
+jsxt;
 
 const node = (
   <editor>
diff --git a/packages/core/src/lib/transforms/__tests__/mergeDeepToNodes/descendant-elements-nested.spec.tsx b/packages/core/src/lib/transforms/__tests__/mergeDeepToNodes/descendant-elements-nested.spec.tsx
index f32775d3fd..6b06a8af2f 100644
--- a/packages/core/src/lib/transforms/__tests__/mergeDeepToNodes/descendant-elements-nested.spec.tsx
+++ b/packages/core/src/lib/transforms/__tests__/mergeDeepToNodes/descendant-elements-nested.spec.tsx
@@ -1,13 +1,13 @@
-/** @jsx jsx */
+/** @jsx jsxt */
 
 import { ListItemPlugin } from '@udecode/plate-list/react';
-import { jsx } from '@udecode/plate-test-utils';
+import { jsxt } from '@udecode/plate-test-utils';
 import { isDescendant } from '@udecode/slate';
 
 import { BaseParagraphPlugin } from '../../../plugins';
 import { mergeDeepToNodes } from '../../../utils';
 
-jsx;
+jsxt;
 
 const node = (
   <hli>
diff --git a/packages/core/src/lib/transforms/__tests__/mergeDeepToNodes/descendant-text-factory.spec.tsx b/packages/core/src/lib/transforms/__tests__/mergeDeepToNodes/descendant-text-factory.spec.tsx
index 370958622a..0b8ec9cbde 100644
--- a/packages/core/src/lib/transforms/__tests__/mergeDeepToNodes/descendant-text-factory.spec.tsx
+++ b/packages/core/src/lib/transforms/__tests__/mergeDeepToNodes/descendant-text-factory.spec.tsx
@@ -1,11 +1,11 @@
-/** @jsx jsx */
+/** @jsx jsxt */
 
-import { jsx } from '@udecode/plate-test-utils';
+import { jsxt } from '@udecode/plate-test-utils';
 import { isDescendant } from '@udecode/slate';
 
 import { mergeDeepToNodes } from '../../../utils';
 
-jsx;
+jsxt;
 
 const node = (<htext>test</htext>) as any;
 
diff --git a/packages/core/src/lib/transforms/__tests__/mergeDeepToNodes/descendant-text.spec.tsx b/packages/core/src/lib/transforms/__tests__/mergeDeepToNodes/descendant-text.spec.tsx
index 5d34205b66..c7087dfc11 100644
--- a/packages/core/src/lib/transforms/__tests__/mergeDeepToNodes/descendant-text.spec.tsx
+++ b/packages/core/src/lib/transforms/__tests__/mergeDeepToNodes/descendant-text.spec.tsx
@@ -1,11 +1,11 @@
-/** @jsx jsx */
+/** @jsx jsxt */
 
-import { jsx } from '@udecode/plate-test-utils';
+import { jsxt } from '@udecode/plate-test-utils';
 import { isDescendant } from '@udecode/slate';
 
 import { mergeDeepToNodes } from '../../../utils';
 
-jsx;
+jsxt;
 
 const node = (<htext>test</htext>) as any;
 
diff --git a/packages/core/src/lib/transforms/__tests__/mergeDeepToNodes/elements-editor-elements-nested.spec.tsx b/packages/core/src/lib/transforms/__tests__/mergeDeepToNodes/elements-editor-elements-nested.spec.tsx
index 225a8218b7..927e1b9638 100644
--- a/packages/core/src/lib/transforms/__tests__/mergeDeepToNodes/elements-editor-elements-nested.spec.tsx
+++ b/packages/core/src/lib/transforms/__tests__/mergeDeepToNodes/elements-editor-elements-nested.spec.tsx
@@ -1,13 +1,13 @@
-/** @jsx jsx */
+/** @jsx jsxt */
 
 import { ListItemPlugin } from '@udecode/plate-list/react';
-import { jsx } from '@udecode/plate-test-utils';
+import { jsxt } from '@udecode/plate-test-utils';
 import { isElement } from '@udecode/slate';
 
 import { BaseParagraphPlugin } from '../../../plugins';
 import { mergeDeepToNodes } from '../../../utils';
 
-jsx;
+jsxt;
 
 const node = (
   <editor>
diff --git a/packages/core/src/lib/transforms/__tests__/mergeDeepToNodes/elements-nested.spec.tsx b/packages/core/src/lib/transforms/__tests__/mergeDeepToNodes/elements-nested.spec.tsx
index 4656049234..feae8ff8a2 100644
--- a/packages/core/src/lib/transforms/__tests__/mergeDeepToNodes/elements-nested.spec.tsx
+++ b/packages/core/src/lib/transforms/__tests__/mergeDeepToNodes/elements-nested.spec.tsx
@@ -1,13 +1,13 @@
-/** @jsx jsx */
+/** @jsx jsxt */
 
 import { ListItemPlugin } from '@udecode/plate-list/react';
-import { jsx } from '@udecode/plate-test-utils';
+import { jsxt } from '@udecode/plate-test-utils';
 import { isElement } from '@udecode/slate';
 
 import { BaseParagraphPlugin } from '../../../plugins';
 import { mergeDeepToNodes } from '../../../utils';
 
-jsx;
+jsxt;
 
 const node = (
   <hli>
diff --git a/packages/core/src/lib/transforms/__tests__/mergeDeepToNodes/elements-text.spec.tsx b/packages/core/src/lib/transforms/__tests__/mergeDeepToNodes/elements-text.spec.tsx
index be3ff1f20e..cb756c628e 100644
--- a/packages/core/src/lib/transforms/__tests__/mergeDeepToNodes/elements-text.spec.tsx
+++ b/packages/core/src/lib/transforms/__tests__/mergeDeepToNodes/elements-text.spec.tsx
@@ -1,11 +1,11 @@
-/** @jsx jsx */
+/** @jsx jsxt */
 
-import { jsx } from '@udecode/plate-test-utils';
+import { jsxt } from '@udecode/plate-test-utils';
 import { isElement } from '@udecode/slate';
 
 import { mergeDeepToNodes } from '../../../utils';
 
-jsx;
+jsxt;
 
 const node = (<htext>test</htext>) as any;
 
diff --git a/packages/core/src/lib/transforms/__tests__/selectEndOfBlockAboveSelection/default.spec.tsx b/packages/core/src/lib/transforms/__tests__/selectEndOfBlockAboveSelection/default.spec.tsx
index 5492555c59..8a0c0114d9 100644
--- a/packages/core/src/lib/transforms/__tests__/selectEndOfBlockAboveSelection/default.spec.tsx
+++ b/packages/core/src/lib/transforms/__tests__/selectEndOfBlockAboveSelection/default.spec.tsx
@@ -1,11 +1,11 @@
-/** @jsx jsx */
+/** @jsx jsxt */
 
-import { jsx } from '@udecode/plate-test-utils';
+import { jsxt } from '@udecode/plate-test-utils';
 import { selectEndOfBlockAboveSelection } from '@udecode/slate-utils';
 
 import type { SlateEditor } from '../../../editor';
 
-jsx;
+jsxt;
 
 const input = (
   <editor>
diff --git a/packages/core/src/lib/transforms/__tests__/toggleMark/active.spec.tsx b/packages/core/src/lib/transforms/__tests__/toggleMark/active.spec.tsx
index f6d4d62aec..bba19174e6 100644
--- a/packages/core/src/lib/transforms/__tests__/toggleMark/active.spec.tsx
+++ b/packages/core/src/lib/transforms/__tests__/toggleMark/active.spec.tsx
@@ -1,10 +1,10 @@
-/** @jsx jsx */
+/** @jsx jsxt */
 
 import { BoldPlugin } from '@udecode/plate-basic-marks/react';
-import { jsx } from '@udecode/plate-test-utils';
+import { jsxt } from '@udecode/plate-test-utils';
 import { toggleMark } from '@udecode/slate-utils';
 
-jsx;
+jsxt;
 
 const input = (
   <editor>
diff --git a/packages/core/src/lib/transforms/__tests__/toggleMark/clear.spec.tsx b/packages/core/src/lib/transforms/__tests__/toggleMark/clear.spec.tsx
index 80bc2f1b05..381e3ca416 100644
--- a/packages/core/src/lib/transforms/__tests__/toggleMark/clear.spec.tsx
+++ b/packages/core/src/lib/transforms/__tests__/toggleMark/clear.spec.tsx
@@ -1,10 +1,10 @@
-/** @jsx jsx */
+/** @jsx jsxt */
 
 import { BoldPlugin, ItalicPlugin } from '@udecode/plate-basic-marks/react';
-import { jsx } from '@udecode/plate-test-utils';
+import { jsxt } from '@udecode/plate-test-utils';
 import { toggleMark } from '@udecode/slate-utils';
 
-jsx;
+jsxt;
 
 const input = (
   <editor>
diff --git a/packages/core/src/lib/transforms/__tests__/toggleMark/inactive.spec.tsx b/packages/core/src/lib/transforms/__tests__/toggleMark/inactive.spec.tsx
index 660b185ac2..59471fa6d2 100644
--- a/packages/core/src/lib/transforms/__tests__/toggleMark/inactive.spec.tsx
+++ b/packages/core/src/lib/transforms/__tests__/toggleMark/inactive.spec.tsx
@@ -1,10 +1,10 @@
-/** @jsx jsx */
+/** @jsx jsxt */
 
 import { BoldPlugin } from '@udecode/plate-basic-marks/react';
-import { jsx } from '@udecode/plate-test-utils';
+import { jsxt } from '@udecode/plate-test-utils';
 import { toggleMark } from '@udecode/slate-utils';
 
-jsx;
+jsxt;
 
 const input = (
   <editor>
diff --git a/packages/core/src/lib/transforms/__tests__/toggleNodeType/active.spec.tsx b/packages/core/src/lib/transforms/__tests__/toggleNodeType/active.spec.tsx
index ecc770de05..427cb4ec35 100644
--- a/packages/core/src/lib/transforms/__tests__/toggleNodeType/active.spec.tsx
+++ b/packages/core/src/lib/transforms/__tests__/toggleNodeType/active.spec.tsx
@@ -1,12 +1,12 @@
-/** @jsx jsx */
+/** @jsx jsxt */
 
-import { jsx } from '@udecode/plate-test-utils';
+import { jsxt } from '@udecode/plate-test-utils';
 
 import type { SlateEditor } from '../../../editor';
 
 import { createPlateEditor } from '../../../../react';
 
-jsx;
+jsxt;
 
 const input = (
   <editor>
diff --git a/packages/core/src/lib/transforms/__tests__/toggleNodeType/inactive.spec.tsx b/packages/core/src/lib/transforms/__tests__/toggleNodeType/inactive.spec.tsx
index 609562087f..c74ed07132 100644
--- a/packages/core/src/lib/transforms/__tests__/toggleNodeType/inactive.spec.tsx
+++ b/packages/core/src/lib/transforms/__tests__/toggleNodeType/inactive.spec.tsx
@@ -1,13 +1,13 @@
-/** @jsx jsx */
+/** @jsx jsxt */
 
 import { BlockquotePlugin } from '@udecode/plate-block-quote/react';
-import { jsx } from '@udecode/plate-test-utils';
+import { jsxt } from '@udecode/plate-test-utils';
 
 import type { SlateEditor } from '../../../editor';
 
 import { createPlateEditor } from '../../../../react';
 
-jsx;
+jsxt;
 
 const input = (
   <editor>
diff --git a/packages/core/src/lib/transforms/__tests__/toggleWrapNodes/active.spec.tsx b/packages/core/src/lib/transforms/__tests__/toggleWrapNodes/active.spec.tsx
index f1c66d84c7..efb39e59a9 100644
--- a/packages/core/src/lib/transforms/__tests__/toggleWrapNodes/active.spec.tsx
+++ b/packages/core/src/lib/transforms/__tests__/toggleWrapNodes/active.spec.tsx
@@ -1,10 +1,10 @@
-/** @jsx jsx */
+/** @jsx jsxt */
 
 import { CodeBlockPlugin } from '@udecode/plate-code-block/react';
-import { jsx } from '@udecode/plate-test-utils';
+import { jsxt } from '@udecode/plate-test-utils';
 import { toggleWrapNodes } from '@udecode/slate-utils';
 
-jsx;
+jsxt;
 
 const input = (
   <editor>
diff --git a/packages/core/src/lib/transforms/__tests__/toggleWrapNodes/not-active.spec.tsx b/packages/core/src/lib/transforms/__tests__/toggleWrapNodes/not-active.spec.tsx
index b89fad34c6..1ffde9bb4f 100644
--- a/packages/core/src/lib/transforms/__tests__/toggleWrapNodes/not-active.spec.tsx
+++ b/packages/core/src/lib/transforms/__tests__/toggleWrapNodes/not-active.spec.tsx
@@ -1,10 +1,10 @@
-/** @jsx jsx */
+/** @jsx jsxt */
 
 import { CodeBlockPlugin } from '@udecode/plate-code-block/react';
-import { jsx } from '@udecode/plate-test-utils';
+import { jsxt } from '@udecode/plate-test-utils';
 import { toggleWrapNodes } from '@udecode/slate-utils';
 
-jsx;
+jsxt;
 
 const input = (
   <editor>
diff --git a/packages/core/src/lib/utils/normalizeDescendantsToDocumentFragment.spec.tsx b/packages/core/src/lib/utils/normalizeDescendantsToDocumentFragment.spec.tsx
index 8020f4a2e0..c23abc344d 100644
--- a/packages/core/src/lib/utils/normalizeDescendantsToDocumentFragment.spec.tsx
+++ b/packages/core/src/lib/utils/normalizeDescendantsToDocumentFragment.spec.tsx
@@ -1,11 +1,11 @@
-/** @jsx jsx */
+/** @jsx jsxt */
 import { LinkPlugin } from '@udecode/plate-link/react';
-import { jsx } from '@udecode/plate-test-utils';
+import { jsxt } from '@udecode/plate-test-utils';
 
 import { createPlateEditor } from '../../react';
 import { normalizeDescendantsToDocumentFragment } from './index';
 
-jsx;
+jsxt;
 
 describe('normalizeDescendantsToDocumentFragment()', () => {
   it.each([
diff --git a/packages/core/src/react/utils/shortcuts.spec.tsx b/packages/core/src/react/utils/shortcuts.spec.tsx
index ee4b4a787b..e61ec9bac1 100644
--- a/packages/core/src/react/utils/shortcuts.spec.tsx
+++ b/packages/core/src/react/utils/shortcuts.spec.tsx
@@ -1,11 +1,11 @@
-/** @jsx jsx */
+/** @jsx jsxt */
 
 import { BoldPlugin } from '@udecode/plate-basic-marks/react';
-import { jsx } from '@udecode/plate-test-utils';
+import { jsxt } from '@udecode/plate-test-utils';
 
 import { createPlateTestEditor } from '../__tests__/createPlateTestEditor';
 
-jsx;
+jsxt;
 import { type PlateEditor, createPlateEditor } from '../editor';
 import { createPlatePlugin } from '../plugin';
 
diff --git a/packages/date/src/lib/queries/isPointNextToNode.spec.tsx b/packages/date/src/lib/queries/isPointNextToNode.spec.tsx
index c34365a00a..8cc0c89d62 100644
--- a/packages/date/src/lib/queries/isPointNextToNode.spec.tsx
+++ b/packages/date/src/lib/queries/isPointNextToNode.spec.tsx
@@ -1,12 +1,12 @@
-/** @jsx jsx */
+/** @jsx jsxt */
 
 import type { SlateEditor } from '@udecode/plate-common';
 
-import { jsx } from '@udecode/plate-test-utils';
+import { jsxt } from '@udecode/plate-test-utils';
 
 import { isPointNextToNode } from './isPointNextToNode';
 
-jsx;
+jsxt;
 
 describe('isPointNextToNode', () => {
   const createEditor = (input: JSX.Element): SlateEditor =>
diff --git a/packages/date/src/lib/withDate.spec.tsx b/packages/date/src/lib/withDate.spec.tsx
index c1c6092249..143d76e316 100644
--- a/packages/date/src/lib/withDate.spec.tsx
+++ b/packages/date/src/lib/withDate.spec.tsx
@@ -1,13 +1,13 @@
-/** @jsx jsx */
+/** @jsx jsxt */
 
 import type { PlateEditor } from '@udecode/plate-common/react';
 
-import { jsx } from '@udecode/plate-test-utils';
+import { jsxt } from '@udecode/plate-test-utils';
 
 import { createPlateTestEditor } from '../../../core/src/react/__tests__/createPlateTestEditor';
 import { BaseDatePlugin } from './BaseDatePlugin';
 
-jsx;
+jsxt;
 
 describe('On keydown', () => {
   it('inline date should not be selected on keydown arrow right', async () => {
diff --git a/packages/docx/src/lib/__tests__/align.spec.tsx b/packages/docx/src/lib/__tests__/align.spec.tsx
index 2692172524..caf48271e8 100644
--- a/packages/docx/src/lib/__tests__/align.spec.tsx
+++ b/packages/docx/src/lib/__tests__/align.spec.tsx
@@ -1,9 +1,9 @@
-/** @jsx jsx */
-import { jsx } from '@udecode/plate-test-utils';
+/** @jsx jsxt */
+import { jsxt } from '@udecode/plate-test-utils';
 
 import { getDocxTestName, testDocxDeserializer } from './testDocxDeserializer';
 
-jsx;
+jsxt;
 
 const name = 'align';
 
diff --git a/packages/docx/src/lib/__tests__/alternate_document_path.spec.tsx b/packages/docx/src/lib/__tests__/alternate_document_path.spec.tsx
index 69d0aaee65..f046edcc9e 100644
--- a/packages/docx/src/lib/__tests__/alternate_document_path.spec.tsx
+++ b/packages/docx/src/lib/__tests__/alternate_document_path.spec.tsx
@@ -1,9 +1,9 @@
-/** @jsx jsx */
-import { jsx } from '@udecode/plate-test-utils';
+/** @jsx jsxt */
+import { jsxt } from '@udecode/plate-test-utils';
 
 import { getDocxTestName, testDocxDeserializer } from './testDocxDeserializer';
 
-jsx;
+jsxt;
 
 const name = 'alternate_document_path';
 
diff --git a/packages/docx/src/lib/__tests__/block_quotes.spec.tsx b/packages/docx/src/lib/__tests__/block_quotes.spec.tsx
index e2e0c249f7..21f95c92cf 100644
--- a/packages/docx/src/lib/__tests__/block_quotes.spec.tsx
+++ b/packages/docx/src/lib/__tests__/block_quotes.spec.tsx
@@ -1,9 +1,9 @@
-/** @jsx jsx */
-import { jsx } from '@udecode/plate-test-utils';
+/** @jsx jsxt */
+import { jsxt } from '@udecode/plate-test-utils';
 
 import { getDocxTestName, testDocxDeserializer } from './testDocxDeserializer';
 
-jsx;
+jsxt;
 
 const name = 'block_quotes';
 
diff --git a/packages/docx/src/lib/__tests__/char_styles.spec.tsx b/packages/docx/src/lib/__tests__/char_styles.spec.tsx
index c005d9f3bc..3af67696b5 100644
--- a/packages/docx/src/lib/__tests__/char_styles.spec.tsx
+++ b/packages/docx/src/lib/__tests__/char_styles.spec.tsx
@@ -1,9 +1,9 @@
-/** @jsx jsx */
-import { jsx } from '@udecode/plate-test-utils';
+/** @jsx jsxt */
+import { jsxt } from '@udecode/plate-test-utils';
 
 import { getDocxTestName, testDocxDeserializer } from './testDocxDeserializer';
 
-jsx;
+jsxt;
 
 const name = 'char_styles';
 
diff --git a/packages/docx/src/lib/__tests__/codeblock.spec.tsx b/packages/docx/src/lib/__tests__/codeblock.spec.tsx
index 8cfd1cc7b4..39b1bc9468 100644
--- a/packages/docx/src/lib/__tests__/codeblock.spec.tsx
+++ b/packages/docx/src/lib/__tests__/codeblock.spec.tsx
@@ -1,9 +1,9 @@
-/** @jsx jsx */
-import { jsx } from '@udecode/plate-test-utils';
+/** @jsx jsxt */
+import { jsxt } from '@udecode/plate-test-utils';
 
 import { getDocxTestName, testDocxDeserializer } from './testDocxDeserializer';
 
-jsx;
+jsxt;
 
 const name = 'codeblock';
 
diff --git a/packages/docx/src/lib/__tests__/custom-style-reference.spec.tsx b/packages/docx/src/lib/__tests__/custom-style-reference.spec.tsx
index 1c7aceccb3..b43acc9cb2 100644
--- a/packages/docx/src/lib/__tests__/custom-style-reference.spec.tsx
+++ b/packages/docx/src/lib/__tests__/custom-style-reference.spec.tsx
@@ -1,9 +1,9 @@
-/** @jsx jsx */
-import { jsx } from '@udecode/plate-test-utils';
+/** @jsx jsxt */
+import { jsxt } from '@udecode/plate-test-utils';
 
 import { getDocxTestName, testDocxDeserializer } from './testDocxDeserializer';
 
-jsx;
+jsxt;
 
 const name = 'custom-style-reference';
 
diff --git a/packages/docx/src/lib/__tests__/dummy_item_after_list_item.spec.tsx b/packages/docx/src/lib/__tests__/dummy_item_after_list_item.spec.tsx
index 26330d6c51..048afc1b08 100644
--- a/packages/docx/src/lib/__tests__/dummy_item_after_list_item.spec.tsx
+++ b/packages/docx/src/lib/__tests__/dummy_item_after_list_item.spec.tsx
@@ -1,9 +1,9 @@
-/** @jsx jsx */
-import { jsx } from '@udecode/plate-test-utils';
+/** @jsx jsxt */
+import { jsxt } from '@udecode/plate-test-utils';
 
 import { getDocxTestName, testDocxDeserializer } from './testDocxDeserializer';
 
-jsx;
+jsxt;
 
 const name = 'dummy_item_after_list_item';
 
diff --git a/packages/docx/src/lib/__tests__/dummy_item_after_paragraph.spec.tsx b/packages/docx/src/lib/__tests__/dummy_item_after_paragraph.spec.tsx
index 5f6500a85b..e7e7fa1278 100644
--- a/packages/docx/src/lib/__tests__/dummy_item_after_paragraph.spec.tsx
+++ b/packages/docx/src/lib/__tests__/dummy_item_after_paragraph.spec.tsx
@@ -1,9 +1,9 @@
-/** @jsx jsx */
-import { jsx } from '@udecode/plate-test-utils';
+/** @jsx jsxt */
+import { jsxt } from '@udecode/plate-test-utils';
 
 import { getDocxTestName, testDocxDeserializer } from './testDocxDeserializer';
 
-jsx;
+jsxt;
 
 const name = 'dummy_item_after_paragraph';
 
diff --git a/packages/docx/src/lib/__tests__/font.spec.tsx b/packages/docx/src/lib/__tests__/font.spec.tsx
index 3fea88e928..212acc3e7c 100644
--- a/packages/docx/src/lib/__tests__/font.spec.tsx
+++ b/packages/docx/src/lib/__tests__/font.spec.tsx
@@ -1,4 +1,4 @@
-/** @jsx jsx */
+/** @jsx jsxt */
 
 import {
   FontBackgroundColorPlugin,
@@ -7,11 +7,11 @@ import {
   FontSizePlugin,
   FontWeightPlugin,
 } from '@udecode/plate-font/react';
-import { jsx } from '@udecode/plate-test-utils';
+import { jsxt } from '@udecode/plate-test-utils';
 
 import { getDocxTestName, testDocxDeserializer } from './testDocxDeserializer';
 
-jsx;
+jsxt;
 
 const name = 'font';
 
diff --git a/packages/docx/src/lib/__tests__/headers.spec.tsx b/packages/docx/src/lib/__tests__/headers.spec.tsx
index f2fced632c..57f48c8abd 100644
--- a/packages/docx/src/lib/__tests__/headers.spec.tsx
+++ b/packages/docx/src/lib/__tests__/headers.spec.tsx
@@ -1,4 +1,4 @@
-/** @jsx jsx */
+/** @jsx jsxt */
 
 import {
   FontBackgroundColorPlugin,
@@ -7,11 +7,11 @@ import {
   FontSizePlugin,
   FontWeightPlugin,
 } from '@udecode/plate-font/react';
-import { jsx } from '@udecode/plate-test-utils';
+import { jsxt } from '@udecode/plate-test-utils';
 
 import { getDocxTestName, testDocxDeserializer } from './testDocxDeserializer';
 
-jsx;
+jsxt;
 
 const name = 'headers';
 
diff --git a/packages/docx/src/lib/__tests__/inline_code.spec.tsx b/packages/docx/src/lib/__tests__/inline_code.spec.tsx
index 0397947e4c..75f8da6d41 100644
--- a/packages/docx/src/lib/__tests__/inline_code.spec.tsx
+++ b/packages/docx/src/lib/__tests__/inline_code.spec.tsx
@@ -1,9 +1,9 @@
-/** @jsx jsx */
-import { jsx } from '@udecode/plate-test-utils';
+/** @jsx jsxt */
+import { jsxt } from '@udecode/plate-test-utils';
 
 import { getDocxTestName, testDocxDeserializer } from './testDocxDeserializer';
 
-jsx;
+jsxt;
 
 const name = 'inline_code';
 
diff --git a/packages/docx/src/lib/__tests__/inline_formatting.spec.tsx b/packages/docx/src/lib/__tests__/inline_formatting.spec.tsx
index 024b42597e..214a53caaf 100644
--- a/packages/docx/src/lib/__tests__/inline_formatting.spec.tsx
+++ b/packages/docx/src/lib/__tests__/inline_formatting.spec.tsx
@@ -1,9 +1,9 @@
-/** @jsx jsx */
-import { jsx } from '@udecode/plate-test-utils';
+/** @jsx jsxt */
+import { jsxt } from '@udecode/plate-test-utils';
 
 import { getDocxTestName, testDocxDeserializer } from './testDocxDeserializer';
 
-jsx;
+jsxt;
 
 const name = 'inline_formatting';
 
diff --git a/packages/docx/src/lib/__tests__/legal-in.spec.tsx b/packages/docx/src/lib/__tests__/legal-in.spec.tsx
index 054d424815..43f26d7983 100644
--- a/packages/docx/src/lib/__tests__/legal-in.spec.tsx
+++ b/packages/docx/src/lib/__tests__/legal-in.spec.tsx
@@ -1,11 +1,11 @@
-/** @jsx jsx */
+/** @jsx jsxt */
 
 import { BaseIndentListPlugin } from '@udecode/plate-indent-list';
-import { jsx } from '@udecode/plate-test-utils';
+import { jsxt } from '@udecode/plate-test-utils';
 
 import { getDocxTestName, testDocxDeserializer } from './testDocxDeserializer';
 
-jsx;
+jsxt;
 
 const name = 'legal-in';
 
diff --git a/packages/docx/src/lib/__tests__/legal.spec.tsx b/packages/docx/src/lib/__tests__/legal.spec.tsx
index 781ed55959..243bd98ae4 100644
--- a/packages/docx/src/lib/__tests__/legal.spec.tsx
+++ b/packages/docx/src/lib/__tests__/legal.spec.tsx
@@ -1,11 +1,11 @@
-/** @jsx jsx */
+/** @jsx jsxt */
 
 import { BaseIndentListPlugin } from '@udecode/plate-indent-list';
-import { jsx } from '@udecode/plate-test-utils';
+import { jsxt } from '@udecode/plate-test-utils';
 
 import { getDocxTestName, testDocxDeserializer } from './testDocxDeserializer';
 
-jsx;
+jsxt;
 
 const name = 'legal';
 
diff --git a/packages/docx/src/lib/__tests__/line-height.spec.tsx b/packages/docx/src/lib/__tests__/line-height.spec.tsx
index f05fc81c13..a536bcc710 100644
--- a/packages/docx/src/lib/__tests__/line-height.spec.tsx
+++ b/packages/docx/src/lib/__tests__/line-height.spec.tsx
@@ -1,9 +1,9 @@
-/** @jsx jsx */
-import { jsx } from '@udecode/plate-test-utils';
+/** @jsx jsxt */
+import { jsxt } from '@udecode/plate-test-utils';
 
 import { getDocxTestName, testDocxDeserializer } from './testDocxDeserializer';
 
-jsx;
+jsxt;
 
 const name = 'line-height';
 
diff --git a/packages/docx/src/lib/__tests__/lists.spec.tsx b/packages/docx/src/lib/__tests__/lists.spec.tsx
index 29714cbfcc..875a59678b 100644
--- a/packages/docx/src/lib/__tests__/lists.spec.tsx
+++ b/packages/docx/src/lib/__tests__/lists.spec.tsx
@@ -1,11 +1,11 @@
-/** @jsx jsx */
+/** @jsx jsxt */
 
 import { BaseIndentListPlugin } from '@udecode/plate-indent-list';
-import { jsx } from '@udecode/plate-test-utils';
+import { jsxt } from '@udecode/plate-test-utils';
 
 import { getDocxTestName, testDocxDeserializer } from './testDocxDeserializer';
 
-jsx;
+jsxt;
 
 const name = 'lists';
 
diff --git a/packages/docx/src/lib/__tests__/lists_sublist_reset.spec.tsx b/packages/docx/src/lib/__tests__/lists_sublist_reset.spec.tsx
index bcda0a7775..87bb0e7829 100644
--- a/packages/docx/src/lib/__tests__/lists_sublist_reset.spec.tsx
+++ b/packages/docx/src/lib/__tests__/lists_sublist_reset.spec.tsx
@@ -1,11 +1,11 @@
-/** @jsx jsx */
+/** @jsx jsxt */
 
 import { BaseIndentListPlugin } from '@udecode/plate-indent-list';
-import { jsx } from '@udecode/plate-test-utils';
+import { jsxt } from '@udecode/plate-test-utils';
 
 import { getDocxTestName, testDocxDeserializer } from './testDocxDeserializer';
 
-jsx;
+jsxt;
 
 const name = 'lists_sublist_reset';
 
diff --git a/packages/docx/src/lib/__tests__/numbered_header.spec.tsx b/packages/docx/src/lib/__tests__/numbered_header.spec.tsx
index d797c8339a..3a08b2e27d 100644
--- a/packages/docx/src/lib/__tests__/numbered_header.spec.tsx
+++ b/packages/docx/src/lib/__tests__/numbered_header.spec.tsx
@@ -1,11 +1,11 @@
-/** @jsx jsx */
+/** @jsx jsxt */
 
 import { BaseIndentListPlugin } from '@udecode/plate-indent-list';
-import { jsx } from '@udecode/plate-test-utils';
+import { jsxt } from '@udecode/plate-test-utils';
 
 import { getDocxTestName, testDocxDeserializer } from './testDocxDeserializer';
 
-jsx;
+jsxt;
 
 const name = 'numbered_header';
 
diff --git a/packages/docx/src/lib/__tests__/numbered_sublist.spec.tsx b/packages/docx/src/lib/__tests__/numbered_sublist.spec.tsx
index 43264b18e5..664c1612f9 100644
--- a/packages/docx/src/lib/__tests__/numbered_sublist.spec.tsx
+++ b/packages/docx/src/lib/__tests__/numbered_sublist.spec.tsx
@@ -1,11 +1,11 @@
-/** @jsx jsx */
+/** @jsx jsxt */
 
 import { BaseIndentListPlugin } from '@udecode/plate-indent-list';
-import { jsx } from '@udecode/plate-test-utils';
+import { jsxt } from '@udecode/plate-test-utils';
 
 import { getDocxTestName, testDocxDeserializer } from './testDocxDeserializer';
 
-jsx;
+jsxt;
 
 const name = 'numbered_sublist';
 
diff --git a/packages/docx/src/lib/__tests__/tables.spec.tsx b/packages/docx/src/lib/__tests__/tables.spec.tsx
index 8f29b0077b..1cddf1fbee 100644
--- a/packages/docx/src/lib/__tests__/tables.spec.tsx
+++ b/packages/docx/src/lib/__tests__/tables.spec.tsx
@@ -1,11 +1,11 @@
-/** @jsx jsx */
+/** @jsx jsxt */
 
 import { BaseIndentListPlugin } from '@udecode/plate-indent-list';
-import { jsx } from '@udecode/plate-test-utils';
+import { jsxt } from '@udecode/plate-test-utils';
 
 import { getDocxTestName, testDocxDeserializer } from './testDocxDeserializer';
 
-jsx;
+jsxt;
 
 const name = 'tables';
 
diff --git a/packages/docx/src/lib/__tests__/tabs.spec.tsx b/packages/docx/src/lib/__tests__/tabs.spec.tsx
index 7646d43e48..86b67427ae 100644
--- a/packages/docx/src/lib/__tests__/tabs.spec.tsx
+++ b/packages/docx/src/lib/__tests__/tabs.spec.tsx
@@ -1,9 +1,9 @@
-/** @jsx jsx */
-import { jsx } from '@udecode/plate-test-utils';
+/** @jsx jsxt */
+import { jsxt } from '@udecode/plate-test-utils';
 
 import { getDocxTestName, testDocxDeserializer } from './testDocxDeserializer';
 
-jsx;
+jsxt;
 
 const name = 'tabs';
 
diff --git a/packages/indent-list/src/lib/IndentListPlugin.spec.tsx b/packages/indent-list/src/lib/IndentListPlugin.spec.tsx
index d5499a3aec..39888e87b9 100644
--- a/packages/indent-list/src/lib/IndentListPlugin.spec.tsx
+++ b/packages/indent-list/src/lib/IndentListPlugin.spec.tsx
@@ -1,4 +1,4 @@
-/** @jsx jsx */
+/** @jsx jsxt */
 
 import { AlignPlugin } from '@udecode/plate-alignment/react';
 import { BasicElementsPlugin } from '@udecode/plate-basic-elements/react';
@@ -14,11 +14,11 @@ import { LineHeightPlugin } from '@udecode/plate-line-height/react';
 import { LinkPlugin } from '@udecode/plate-link/react';
 import { ImagePlugin } from '@udecode/plate-media/react';
 import { TablePlugin } from '@udecode/plate-table/react';
-import { jsx } from '@udecode/plate-test-utils';
+import { jsxt } from '@udecode/plate-test-utils';
 
 import { BaseIndentListPlugin } from './BaseIndentListPlugin';
 
-jsx;
+jsxt;
 
 const injectConfig = {
   inject: {
diff --git a/packages/indent-list/src/lib/normalizers/normalizeFirstIndentListStart.spec.tsx b/packages/indent-list/src/lib/normalizers/normalizeFirstIndentListStart.spec.tsx
index 175c95995d..46818a3944 100644
--- a/packages/indent-list/src/lib/normalizers/normalizeFirstIndentListStart.spec.tsx
+++ b/packages/indent-list/src/lib/normalizers/normalizeFirstIndentListStart.spec.tsx
@@ -1,15 +1,15 @@
-/** @jsx jsx */
+/** @jsx jsxt */
 
 import type { SlateEditor } from '@udecode/plate-common';
 
 import { BaseParagraphPlugin } from '@udecode/plate-common';
 import { createPlateEditor } from '@udecode/plate-common/react';
 import { IndentPlugin } from '@udecode/plate-indent/react';
-import { jsx } from '@udecode/plate-test-utils';
+import { jsxt } from '@udecode/plate-test-utils';
 
 import { BaseIndentListPlugin } from '../BaseIndentListPlugin';
 
-jsx;
+jsxt;
 
 const input = (
   <editor>
diff --git a/packages/indent-list/src/lib/normalizers/normalizeIndentListNotIndented.spec.tsx b/packages/indent-list/src/lib/normalizers/normalizeIndentListNotIndented.spec.tsx
index 0b3e968cf4..af3f1f6129 100644
--- a/packages/indent-list/src/lib/normalizers/normalizeIndentListNotIndented.spec.tsx
+++ b/packages/indent-list/src/lib/normalizers/normalizeIndentListNotIndented.spec.tsx
@@ -1,14 +1,14 @@
-/** @jsx jsx */
+/** @jsx jsxt */
 
 import type { SlateEditor } from '@udecode/plate-common';
 
 import { createPlateEditor } from '@udecode/plate-common/react';
 import { IndentPlugin } from '@udecode/plate-indent/react';
-import { jsx } from '@udecode/plate-test-utils';
+import { jsxt } from '@udecode/plate-test-utils';
 
 import { BaseIndentListPlugin } from '../BaseIndentListPlugin';
 
-jsx;
+jsxt;
 
 describe('normalizeIndentList', () => {
   describe('when listStyleType without indent', () => {
diff --git a/packages/indent-list/src/lib/normalizers/normalizeIndentListStart.spec.tsx b/packages/indent-list/src/lib/normalizers/normalizeIndentListStart.spec.tsx
index b8db14a13d..211e3e9903 100644
--- a/packages/indent-list/src/lib/normalizers/normalizeIndentListStart.spec.tsx
+++ b/packages/indent-list/src/lib/normalizers/normalizeIndentListStart.spec.tsx
@@ -1,16 +1,16 @@
-/** @jsx jsx */
+/** @jsx jsxt */
 
 import type { SlateEditor } from '@udecode/plate-common';
 
 import { ParagraphPlugin } from '@udecode/plate-common/react';
 import { createPlateEditor } from '@udecode/plate-common/react';
 import { IndentPlugin } from '@udecode/plate-indent/react';
-import { jsx } from '@udecode/plate-test-utils';
+import { jsxt } from '@udecode/plate-test-utils';
 
 import { indentListPluginPage } from '../../__tests__/indentListPluginPage';
 import { BaseIndentListPlugin } from '../BaseIndentListPlugin';
 
-jsx;
+jsxt;
 
 describe('normalizeIndentListStart', () => {
   describe('when all cases', () => {
diff --git a/packages/indent-list/src/lib/queries/getIndentListSiblings.spec.tsx b/packages/indent-list/src/lib/queries/getIndentListSiblings.spec.tsx
index c298aa81a8..72e82f685f 100644
--- a/packages/indent-list/src/lib/queries/getIndentListSiblings.spec.tsx
+++ b/packages/indent-list/src/lib/queries/getIndentListSiblings.spec.tsx
@@ -1,4 +1,4 @@
-/** @jsx jsx */
+/** @jsx jsxt */
 
 import {
   type SlateEditor,
@@ -6,11 +6,11 @@ import {
   type TElement,
   getBlockAbove,
 } from '@udecode/plate-common';
-import { jsx } from '@udecode/plate-test-utils';
+import { jsxt } from '@udecode/plate-test-utils';
 
 import { getIndentListSiblings } from './getIndentListSiblings';
 
-jsx;
+jsxt;
 
 describe('getIndentListSiblings', () => {
   describe('listStyleType is not defined', () => {
diff --git a/packages/indent-list/src/lib/transforms/toggleIndentList.spec.tsx b/packages/indent-list/src/lib/transforms/toggleIndentList.spec.tsx
index 0293e52fb4..7bf23cf6e8 100644
--- a/packages/indent-list/src/lib/transforms/toggleIndentList.spec.tsx
+++ b/packages/indent-list/src/lib/transforms/toggleIndentList.spec.tsx
@@ -1,16 +1,16 @@
-/** @jsx jsx */
+/** @jsx jsxt */
 
 import type { SlateEditor } from '@udecode/plate-common';
 
 import { createPlateEditor } from '@udecode/plate-common/react';
 import { IndentPlugin } from '@udecode/plate-indent/react';
-import { jsx } from '@udecode/plate-test-utils';
+import { jsxt } from '@udecode/plate-test-utils';
 
 import { indentListPluginPage } from '../../__tests__/indentListPluginPage';
 import { BaseIndentListPlugin } from '../BaseIndentListPlugin';
 import { toggleIndentList } from './toggleIndentList';
 
-jsx;
+jsxt;
 
 describe('toggleIndentList', () => {
   describe('when listStyleType is not defined', () => {
diff --git a/packages/indent-list/src/lib/withIndentList.spec.tsx b/packages/indent-list/src/lib/withIndentList.spec.tsx
index 1a331bcd76..09c9869347 100644
--- a/packages/indent-list/src/lib/withIndentList.spec.tsx
+++ b/packages/indent-list/src/lib/withIndentList.spec.tsx
@@ -1,14 +1,14 @@
-/** @jsx jsx */
+/** @jsx jsxt */
 
 import type { SlateEditor } from '@udecode/plate-common';
 
 import { createPlateEditor } from '@udecode/plate-common/react';
 import { IndentPlugin } from '@udecode/plate-indent/react';
-import { jsx } from '@udecode/plate-test-utils';
+import { jsxt } from '@udecode/plate-test-utils';
 
 import { BaseIndentListPlugin } from './BaseIndentListPlugin';
 
-jsx;
+jsxt;
 
 describe('normalizeIndentList', () => {
   describe('when listStyleType without indent', () => {
diff --git a/packages/indent-list/src/react/onKeyDownIndentList.spec.tsx b/packages/indent-list/src/react/onKeyDownIndentList.spec.tsx
index 602265ed80..7b8c0b2c0b 100644
--- a/packages/indent-list/src/react/onKeyDownIndentList.spec.tsx
+++ b/packages/indent-list/src/react/onKeyDownIndentList.spec.tsx
@@ -1,15 +1,15 @@
-/** @jsx jsx */
+/** @jsx jsxt */
 
 import { ParagraphPlugin, getEditorPlugin } from '@udecode/plate-common/react';
 import { createPlateEditor } from '@udecode/plate-common/react';
 import * as isHotkey from '@udecode/plate-core';
 import { IndentPlugin } from '@udecode/plate-indent/react';
-import { jsx } from '@udecode/plate-test-utils';
+import { jsxt } from '@udecode/plate-test-utils';
 
 import { IndentListPlugin } from './IndentListPlugin';
 import { onKeyDownIndentList } from './onKeyDownIndentList';
 
-jsx;
+jsxt;
 
 jest.spyOn(isHotkey, 'isHotkey').mockReturnValue(true);
 
diff --git a/packages/link/src/lib/transforms/upsertLink.spec.tsx b/packages/link/src/lib/transforms/upsertLink.spec.tsx
index 10b10d7839..9086246de1 100644
--- a/packages/link/src/lib/transforms/upsertLink.spec.tsx
+++ b/packages/link/src/lib/transforms/upsertLink.spec.tsx
@@ -1,12 +1,12 @@
-/** @jsx jsx */
+/** @jsx jsxt */
 
 import { createSlateEditor } from '@udecode/plate-common';
-import { jsx } from '@udecode/plate-test-utils';
+import { jsxt } from '@udecode/plate-test-utils';
 
 import { type BaseLinkConfig, BaseLinkPlugin } from '../BaseLinkPlugin';
 import { upsertLink } from './upsertLink';
 
-jsx;
+jsxt;
 
 const url = 'http://google.com';
 const urlOutput = 'http://output.com';
diff --git a/packages/link/src/lib/withLink.spec.tsx b/packages/link/src/lib/withLink.spec.tsx
index bbd81f2aa5..ba3a86c1fc 100644
--- a/packages/link/src/lib/withLink.spec.tsx
+++ b/packages/link/src/lib/withLink.spec.tsx
@@ -1,11 +1,11 @@
-/** @jsx jsx */
+/** @jsx jsxt */
 
 import { createPlateEditor } from '@udecode/plate-common/react';
-import { jsx } from '@udecode/plate-test-utils';
+import { jsxt } from '@udecode/plate-test-utils';
 
 import { BaseLinkPlugin } from './BaseLinkPlugin';
 
-jsx;
+jsxt;
 
 /**
  * TODO: test react: https://github.com/udecode/editor-protocol/issues/44
diff --git a/packages/link/src/react/components/FloatingLink/useFloatingLinkEdit.ts b/packages/link/src/react/components/FloatingLink/useFloatingLinkEdit.ts
index 228ff21bc7..710bbb020e 100644
--- a/packages/link/src/react/components/FloatingLink/useFloatingLinkEdit.ts
+++ b/packages/link/src/react/components/FloatingLink/useFloatingLinkEdit.ts
@@ -31,7 +31,7 @@ import { useVirtualFloatingLink } from './useVirtualFloatingLink';
 export const useFloatingLinkEditState = ({
   floatingOptions,
 }: LinkFloatingToolbarState = {}) => {
-  const { api, editor, getOptions, type, useOption } =
+  const { editor, getOptions, type, useOption } =
     useEditorPlugin(LinkPlugin);
 
   const { triggerFloatingLinkHotkeys } = getOptions();
diff --git a/packages/list/src/lib/normalizers/normalizeListItem.spec.tsx b/packages/list/src/lib/normalizers/normalizeListItem.spec.tsx
index 34486be294..5d89dd1bf0 100644
--- a/packages/list/src/lib/normalizers/normalizeListItem.spec.tsx
+++ b/packages/list/src/lib/normalizers/normalizeListItem.spec.tsx
@@ -1,15 +1,15 @@
-/** @jsx jsx */
+/** @jsx jsxt */
 
 import {
   type SlateEditor,
   createSlateEditor,
   getNode,
 } from '@udecode/plate-common';
-import { jsx } from '@udecode/plate-test-utils';
+import { jsxt } from '@udecode/plate-test-utils';
 
 import { ListPlugin } from '../../react';
 
-jsx;
+jsxt;
 
 describe('clean up list items', () => {
   it('should move children up from sublis if their parent has no lic', () => {
diff --git a/packages/list/src/lib/queries/getListItemEntry.spec.tsx b/packages/list/src/lib/queries/getListItemEntry.spec.tsx
index 374e0b0128..c61b8ed0e5 100644
--- a/packages/list/src/lib/queries/getListItemEntry.spec.tsx
+++ b/packages/list/src/lib/queries/getListItemEntry.spec.tsx
@@ -1,13 +1,13 @@
-/** @jsx jsx */
+/** @jsx jsxt */
 
 import type { SlateEditor } from '@udecode/plate-common';
 
 import { createPlateEditor } from '@udecode/plate-common/react';
-import { jsx } from '@udecode/plate-test-utils';
+import { jsxt } from '@udecode/plate-test-utils';
 
 import { getListItemEntry } from './getListItemEntry';
 
-jsx;
+jsxt;
 
 describe('when the cursor is in a list item paragraph', () => {
   const input = (
diff --git a/packages/list/src/lib/queries/getListRoot.spec.tsx b/packages/list/src/lib/queries/getListRoot.spec.tsx
index 45ce90375f..c98de1889a 100644
--- a/packages/list/src/lib/queries/getListRoot.spec.tsx
+++ b/packages/list/src/lib/queries/getListRoot.spec.tsx
@@ -1,11 +1,11 @@
-/** @jsx jsx */
+/** @jsx jsxt */
 
 import { createPlateEditor } from '@udecode/plate-common/react';
-import { jsx } from '@udecode/plate-test-utils';
+import { jsxt } from '@udecode/plate-test-utils';
 
 import { getListRoot } from './getListRoot';
 
-jsx;
+jsxt;
 
 const listRoot = (
   <hul>
diff --git a/packages/list/src/lib/queries/hasListChild.spec.tsx b/packages/list/src/lib/queries/hasListChild.spec.tsx
index c0b72c555a..7b8aec38f4 100644
--- a/packages/list/src/lib/queries/hasListChild.spec.tsx
+++ b/packages/list/src/lib/queries/hasListChild.spec.tsx
@@ -1,11 +1,11 @@
-/** @jsx jsx */
+/** @jsx jsxt */
 
 import { createSlateEditor, findNode } from '@udecode/plate-common';
-import { jsx } from '@udecode/plate-test-utils';
+import { jsxt } from '@udecode/plate-test-utils';
 
 import { hasListChild } from './hasListChild';
 
-jsx;
+jsxt;
 
 describe('when there is a sublist', () => {
   const input = (
diff --git a/packages/list/src/lib/queries/isListNested.spec.tsx b/packages/list/src/lib/queries/isListNested.spec.tsx
index 324bdf93a7..c0f12eee81 100644
--- a/packages/list/src/lib/queries/isListNested.spec.tsx
+++ b/packages/list/src/lib/queries/isListNested.spec.tsx
@@ -1,12 +1,12 @@
-/** @jsx jsx */
+/** @jsx jsxt */
 
 import { findNode } from '@udecode/plate-common';
 import { createPlateEditor } from '@udecode/plate-common/react';
-import { jsx } from '@udecode/plate-test-utils';
+import { jsxt } from '@udecode/plate-test-utils';
 
 import { isListNested } from './isListNested';
 
-jsx;
+jsxt;
 
 describe('when the list is nested', () => {
   const input = (
diff --git a/packages/list/src/lib/transforms/moveListItemSublistItemsToListItemSublist.spec.tsx b/packages/list/src/lib/transforms/moveListItemSublistItemsToListItemSublist.spec.tsx
index 0010a5f5bd..02b6255370 100644
--- a/packages/list/src/lib/transforms/moveListItemSublistItemsToListItemSublist.spec.tsx
+++ b/packages/list/src/lib/transforms/moveListItemSublistItemsToListItemSublist.spec.tsx
@@ -1,15 +1,15 @@
-/** @jsx jsx */
+/** @jsx jsxt */
 
 import {
   type SlateEditor,
   createSlateEditor,
   findNode,
 } from '@udecode/plate-common';
-import { jsx } from '@udecode/plate-test-utils';
+import { jsxt } from '@udecode/plate-test-utils';
 
 import { moveListItemSublistItemsToListItemSublist } from './moveListItemSublistItemsToListItemSublist';
 
-jsx;
+jsxt;
 
 describe('when there is toListItem sublist', () => {
   const input = (
diff --git a/packages/list/src/lib/transforms/moveListItemsToList.spec.tsx b/packages/list/src/lib/transforms/moveListItemsToList.spec.tsx
index b1aab668bc..46c7aa9466 100644
--- a/packages/list/src/lib/transforms/moveListItemsToList.spec.tsx
+++ b/packages/list/src/lib/transforms/moveListItemsToList.spec.tsx
@@ -1,15 +1,15 @@
-/** @jsx jsx */
+/** @jsx jsxt */
 
 import {
   type SlateEditor,
   createSlateEditor,
   findNode,
 } from '@udecode/plate-common';
-import { jsx } from '@udecode/plate-test-utils';
+import { jsxt } from '@udecode/plate-test-utils';
 
 import { moveListItemsToList } from './moveListItemsToList';
 
-jsx;
+jsxt;
 
 const input = (
   <editor>
diff --git a/packages/list/src/lib/transforms/removeListItem.spec.tsx b/packages/list/src/lib/transforms/removeListItem.spec.tsx
index 6c725b0937..eb0aaf6ee7 100644
--- a/packages/list/src/lib/transforms/removeListItem.spec.tsx
+++ b/packages/list/src/lib/transforms/removeListItem.spec.tsx
@@ -1,12 +1,12 @@
-/** @jsx jsx */
+/** @jsx jsxt */
 
 import { type SlateEditor, findNode } from '@udecode/plate-common';
 import { createPlateEditor } from '@udecode/plate-common/react';
-import { jsx } from '@udecode/plate-test-utils';
+import { jsxt } from '@udecode/plate-test-utils';
 
 import { removeListItem } from './removeListItem';
 
-jsx;
+jsxt;
 
 const input = (
   <editor>
diff --git a/packages/list/src/lib/transforms/toggleList.spec.tsx b/packages/list/src/lib/transforms/toggleList.spec.tsx
index b37d94f6a4..8575a35087 100644
--- a/packages/list/src/lib/transforms/toggleList.spec.tsx
+++ b/packages/list/src/lib/transforms/toggleList.spec.tsx
@@ -1,8 +1,8 @@
-/** @jsx jsx */
+/** @jsx jsxt */
 
 import { type SlateEditor, createSlateEditor } from '@udecode/plate-common';
 import { ImagePlugin } from '@udecode/plate-media/react';
-import { jsx } from '@udecode/plate-test-utils';
+import { jsxt } from '@udecode/plate-test-utils';
 
 import {
   BulletedListPlugin,
@@ -11,7 +11,7 @@ import {
 } from '../../react';
 import { toggleList } from './toggleList';
 
-jsx;
+jsxt;
 
 describe('toggle on', () => {
   it('should turn a p to list', () => {
diff --git a/packages/list/src/lib/transforms/unwrapList.spec.tsx b/packages/list/src/lib/transforms/unwrapList.spec.tsx
index b4f3c61df2..35d3b90e7f 100644
--- a/packages/list/src/lib/transforms/unwrapList.spec.tsx
+++ b/packages/list/src/lib/transforms/unwrapList.spec.tsx
@@ -1,14 +1,14 @@
-/** @jsx jsx */
+/** @jsx jsxt */
 
 import type { SlateEditor } from '@udecode/plate-common';
 
 import { createPlateEditor } from '@udecode/plate-common/react';
-import { jsx } from '@udecode/plate-test-utils';
+import { jsxt } from '@udecode/plate-test-utils';
 
 import { ListPlugin } from '../../react';
 import { unwrapList } from './unwrapList';
 
-jsx;
+jsxt;
 
 describe('li list unwrapping', () => {
   it('should unwrap a nested list ul > single li', () => {
diff --git a/packages/list/src/lib/withDeleteForwardList.spec.tsx b/packages/list/src/lib/withDeleteForwardList.spec.tsx
index b1b2484411..9fd55a825d 100644
--- a/packages/list/src/lib/withDeleteForwardList.spec.tsx
+++ b/packages/list/src/lib/withDeleteForwardList.spec.tsx
@@ -1,13 +1,13 @@
-/** @jsx jsx */
+/** @jsx jsxt */
 
 import type { SlateEditor } from '@udecode/plate-common';
 
 import { createPlateEditor } from '@udecode/plate-common/react';
-import { jsx } from '@udecode/plate-test-utils';
+import { jsxt } from '@udecode/plate-test-utils';
 
 import { ListPlugin } from '../react';
 
-jsx;
+jsxt;
 
 describe('p (empty) + list when selection not in list', () => {
   it('should remove the p', () => {
diff --git a/packages/list/src/lib/withInsertFragmentList.spec.tsx b/packages/list/src/lib/withInsertFragmentList.spec.tsx
index 21221abf7b..305cb5486b 100644
--- a/packages/list/src/lib/withInsertFragmentList.spec.tsx
+++ b/packages/list/src/lib/withInsertFragmentList.spec.tsx
@@ -1,15 +1,15 @@
-/** @jsx jsx */
+/** @jsx jsxt */
 
 import {
   type SlateEditor,
   type TDescendant,
   createSlateEditor,
 } from '@udecode/plate-common';
-import { jsx } from '@udecode/plate-test-utils';
+import { jsxt } from '@udecode/plate-test-utils';
 
 import { ListPlugin } from '../react';
 
-jsx;
+jsxt;
 
 const editorTest = (input: any, fragment: any, expected: any) => {
   const editor = createSlateEditor({
diff --git a/packages/list/src/lib/withNormalizeList.spec.tsx b/packages/list/src/lib/withNormalizeList.spec.tsx
index a45b3346d0..095e70ddc2 100644
--- a/packages/list/src/lib/withNormalizeList.spec.tsx
+++ b/packages/list/src/lib/withNormalizeList.spec.tsx
@@ -1,15 +1,15 @@
-/** @jsx jsx */
+/** @jsx jsxt */
 
 import {
   type SlateEditor,
   createSlateEditor,
   normalizeEditor,
 } from '@udecode/plate-common';
-import { jsx } from '@udecode/plate-test-utils';
+import { jsxt } from '@udecode/plate-test-utils';
 
 import { ListPlugin } from '../react';
 
-jsx;
+jsxt;
 
 const testNormalize = (input: SlateEditor, output: SlateEditor): void => {
   const editor = createSlateEditor({
diff --git a/packages/list/src/react/onKeyDownList.spec.tsx b/packages/list/src/react/onKeyDownList.spec.tsx
index f4eebb16b9..7b3ff6c02f 100644
--- a/packages/list/src/react/onKeyDownList.spec.tsx
+++ b/packages/list/src/react/onKeyDownList.spec.tsx
@@ -1,13 +1,13 @@
-/** @jsx jsx */
+/** @jsx jsxt */
 
 import { getEditorPlugin } from '@udecode/plate-common/react';
 import { createPlateEditor } from '@udecode/plate-common/react';
-import { jsx } from '@udecode/plate-test-utils';
+import { jsxt } from '@udecode/plate-test-utils';
 
 import { BulletedListPlugin, ListPlugin } from './ListPlugin';
 import { onKeyDownList } from './onKeyDownList';
 
-jsx;
+jsxt;
 
 /*
 input:
diff --git a/packages/list/src/react/withDeleteBackwardList.spec.tsx b/packages/list/src/react/withDeleteBackwardList.spec.tsx
index cc49083303..01e8dea4df 100644
--- a/packages/list/src/react/withDeleteBackwardList.spec.tsx
+++ b/packages/list/src/react/withDeleteBackwardList.spec.tsx
@@ -1,13 +1,13 @@
-/** @jsx jsx */
+/** @jsx jsxt */
 
 import type { SlateEditor } from '@udecode/plate-common';
 
 import { createPlateEditor } from '@udecode/plate-common/react';
-import { jsx } from '@udecode/plate-test-utils';
+import { jsxt } from '@udecode/plate-test-utils';
 
 import { ListPlugin } from './ListPlugin';
 
-jsx;
+jsxt;
 
 describe('li > lic * 2 with selection at second child start', () => {
   it('should merge the children', () => {
diff --git a/packages/list/src/react/withList.spec.tsx b/packages/list/src/react/withList.spec.tsx
index 277f183f0e..e31c8e260f 100644
--- a/packages/list/src/react/withList.spec.tsx
+++ b/packages/list/src/react/withList.spec.tsx
@@ -1,4 +1,4 @@
-/** @jsx jsx */
+/** @jsx jsxt */
 
 import type { SlateEditor } from '@udecode/plate-common';
 
@@ -7,11 +7,11 @@ import {
   createPlateEditor,
 } from '@udecode/plate-common/react';
 import { LinkPlugin } from '@udecode/plate-link/react';
-import { jsx } from '@udecode/plate-test-utils';
+import { jsxt } from '@udecode/plate-test-utils';
 
 import { ListPlugin } from './ListPlugin';
 
-jsx;
+jsxt;
 
 const testInsertText = (
   input: any,
diff --git a/packages/markdown/src/lib/deserializer/utils/deserializeMd.spec.tsx b/packages/markdown/src/lib/deserializer/utils/deserializeMd.spec.tsx
index eda5de53f4..3e5f9fa847 100644
--- a/packages/markdown/src/lib/deserializer/utils/deserializeMd.spec.tsx
+++ b/packages/markdown/src/lib/deserializer/utils/deserializeMd.spec.tsx
@@ -1,13 +1,13 @@
-/** @jsx jsx */
+/** @jsx jsxt */
 
 import { createSlateEditor } from '@udecode/plate-common';
 import { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';
-import { jsx } from '@udecode/plate-test-utils';
+import { jsxt } from '@udecode/plate-test-utils';
 
 import { MarkdownPlugin } from '../../MarkdownPlugin';
 import { deserializeMd } from './deserializeMd';
 
-jsx;
+jsxt;
 
 describe('deserializeMd', () => {
   const editor = createSlateEditor({
diff --git a/packages/markdown/src/lib/serializer/serializeMd.spec.tsx b/packages/markdown/src/lib/serializer/serializeMd.spec.tsx
index 402cfe1709..2c5fffd1c1 100644
--- a/packages/markdown/src/lib/serializer/serializeMd.spec.tsx
+++ b/packages/markdown/src/lib/serializer/serializeMd.spec.tsx
@@ -1,12 +1,12 @@
-/** @jsx jsx */
+/** @jsx jsxt */
 
 import { createSlateEditor } from '@udecode/plate-common';
-import { jsx } from '@udecode/plate-test-utils';
+import { jsxt } from '@udecode/plate-test-utils';
 
 import { editorValueMock } from './__tests__/data';
 import { serializeMd } from './serializeMd';
 
-jsx;
+jsxt;
 
 describe('deserializeMd', () => {
   const editor = createSlateEditor();
diff --git a/packages/media/src/lib/image/withImageEmbed.spec.tsx b/packages/media/src/lib/image/withImageEmbed.spec.tsx
index 31316e543a..e46e32d841 100644
--- a/packages/media/src/lib/image/withImageEmbed.spec.tsx
+++ b/packages/media/src/lib/image/withImageEmbed.spec.tsx
@@ -1,13 +1,13 @@
-/** @jsx jsx */
+/** @jsx jsxt */
 
 import { getEditorPlugin } from '@udecode/plate-common';
 import { createSlateEditor } from '@udecode/plate-common';
-import { jsx } from '@udecode/plate-test-utils';
+import { jsxt } from '@udecode/plate-test-utils';
 
 import { BaseImagePlugin } from './BaseImagePlugin';
 import { withImageEmbed } from './withImageEmbed';
 
-jsx;
+jsxt;
 
 describe('withImageEmbed', () => {
   const input = (
diff --git a/packages/media/src/lib/image/withImageUpload.spec.tsx b/packages/media/src/lib/image/withImageUpload.spec.tsx
index 0d2eb8135e..12917280be 100644
--- a/packages/media/src/lib/image/withImageUpload.spec.tsx
+++ b/packages/media/src/lib/image/withImageUpload.spec.tsx
@@ -1,11 +1,11 @@
-/** @jsx jsx */
+/** @jsx jsxt */
 
 import { createPlateEditor } from '@udecode/plate-common/react';
-import { jsx } from '@udecode/plate-test-utils';
+import { jsxt } from '@udecode/plate-test-utils';
 
 import { BaseImagePlugin } from './BaseImagePlugin';
 
-jsx;
+jsxt;
 
 describe('withImageUpload', () => {
   describe('when inserting a png image', () => {
diff --git a/packages/mention/src/lib/BaseMentionPlugin.ts b/packages/mention/src/lib/BaseMentionPlugin.ts
index 494f10832e..b85c9cb91e 100644
--- a/packages/mention/src/lib/BaseMentionPlugin.ts
+++ b/packages/mention/src/lib/BaseMentionPlugin.ts
@@ -18,7 +18,7 @@ export type MentionConfig = PluginConfig<
   {},
   {
     insert: {
-      mention: (options: { key?: any; search: string; value: any; }) => void;
+      mention: (options: { search: string; value: any; key?: any }) => void;
     };
   }
 >;
@@ -47,8 +47,8 @@ export const BaseMentionPlugin = createSlatePlugin({
   insert: {
     mention: ({ key, value }) => {
       insertNodes<TMentionElement>(editor, {
-        children: [{ text: '' }],
         key,
+        children: [{ text: '' }],
         type,
         value,
       });
diff --git a/packages/mention/src/lib/types.ts b/packages/mention/src/lib/types.ts
index 28c93100d4..752709869e 100644
--- a/packages/mention/src/lib/types.ts
+++ b/packages/mention/src/lib/types.ts
@@ -1,8 +1,8 @@
 import type { TElement } from '@udecode/plate-common';
 
 export interface TMentionItemBase {
-  key?: any;
   text: string;
+  key?: any;
 }
 
 export interface TMentionInputElement extends TElement {
diff --git a/packages/node-id/src/lib/NodeIdPlugin.spec.tsx b/packages/node-id/src/lib/NodeIdPlugin.spec.tsx
index 8369ee97c9..603d6bd04e 100644
--- a/packages/node-id/src/lib/NodeIdPlugin.spec.tsx
+++ b/packages/node-id/src/lib/NodeIdPlugin.spec.tsx
@@ -1,4 +1,4 @@
-/** @jsx jsx */
+/** @jsx jsxt */
 
 import {
   type SlateEditor,
@@ -10,11 +10,11 @@ import {
 import { ParagraphPlugin } from '@udecode/plate-common/react';
 import { LinkPlugin } from '@udecode/plate-link/react';
 import { BulletedListPlugin, ListItemPlugin } from '@udecode/plate-list/react';
-import { jsx } from '@udecode/plate-test-utils';
+import { jsxt } from '@udecode/plate-test-utils';
 
 import { NodeIdPlugin } from './NodeIdPlugin';
 
-jsx;
+jsxt;
 
 const getIdFactory = () => {
   let id = 1;
diff --git a/packages/normalizers/src/__tests__/withNormalizeType/invalid-path.spec.tsx b/packages/normalizers/src/__tests__/withNormalizeType/invalid-path.spec.tsx
index cabc366e55..f4a0536183 100644
--- a/packages/normalizers/src/__tests__/withNormalizeType/invalid-path.spec.tsx
+++ b/packages/normalizers/src/__tests__/withNormalizeType/invalid-path.spec.tsx
@@ -1,13 +1,13 @@
-/** @jsx jsx */
+/** @jsx jsxt */
 
 import { createSlateEditor } from '@udecode/plate-common';
 import { ParagraphPlugin } from '@udecode/plate-common/react';
 import { HEADING_KEYS } from '@udecode/plate-heading';
-import { jsx } from '@udecode/plate-test-utils';
+import { jsxt } from '@udecode/plate-test-utils';
 
 import { NormalizeTypesPlugin } from '../../lib/NormalizeTypesPlugin';
 
-jsx;
+jsxt;
 
 const input = (
   <editor>
diff --git a/packages/normalizers/src/__tests__/withNormalizeType/nested.spec.tsx b/packages/normalizers/src/__tests__/withNormalizeType/nested.spec.tsx
index 1f18f232ff..88b1b93ba1 100644
--- a/packages/normalizers/src/__tests__/withNormalizeType/nested.spec.tsx
+++ b/packages/normalizers/src/__tests__/withNormalizeType/nested.spec.tsx
@@ -1,13 +1,13 @@
-/** @jsx jsx */
+/** @jsx jsxt */
 
 import { createSlateEditor } from '@udecode/plate-common';
 import { ParagraphPlugin } from '@udecode/plate-common/react';
 import { HEADING_KEYS } from '@udecode/plate-heading';
-import { jsx } from '@udecode/plate-test-utils';
+import { jsxt } from '@udecode/plate-test-utils';
 
 import { NormalizeTypesPlugin } from '../../lib/NormalizeTypesPlugin';
 
-jsx;
+jsxt;
 
 const input = (
   <editor>
diff --git a/packages/normalizers/src/__tests__/withNormalizeType/strictType/insert.spec.tsx b/packages/normalizers/src/__tests__/withNormalizeType/strictType/insert.spec.tsx
index 7774c262d2..6cfd4e61ad 100644
--- a/packages/normalizers/src/__tests__/withNormalizeType/strictType/insert.spec.tsx
+++ b/packages/normalizers/src/__tests__/withNormalizeType/strictType/insert.spec.tsx
@@ -1,12 +1,12 @@
-/** @jsx jsx */
+/** @jsx jsxt */
 
 import { createSlateEditor } from '@udecode/plate-common';
 import { HEADING_KEYS } from '@udecode/plate-heading';
-import { jsx } from '@udecode/plate-test-utils';
+import { jsxt } from '@udecode/plate-test-utils';
 
 import { NormalizeTypesPlugin } from '../../../lib/NormalizeTypesPlugin';
 
-jsx;
+jsxt;
 
 const input = (
   <editor>
diff --git a/packages/normalizers/src/__tests__/withNormalizeType/strictType/set.spec.tsx b/packages/normalizers/src/__tests__/withNormalizeType/strictType/set.spec.tsx
index b3c7094f57..f3acd071a0 100644
--- a/packages/normalizers/src/__tests__/withNormalizeType/strictType/set.spec.tsx
+++ b/packages/normalizers/src/__tests__/withNormalizeType/strictType/set.spec.tsx
@@ -1,12 +1,12 @@
-/** @jsx jsx */
+/** @jsx jsxt */
 
 import { createSlateEditor } from '@udecode/plate-common';
 import { HEADING_KEYS } from '@udecode/plate-heading';
-import { jsx } from '@udecode/plate-test-utils';
+import { jsxt } from '@udecode/plate-test-utils';
 
 import { NormalizeTypesPlugin } from '../../../lib/NormalizeTypesPlugin';
 
-jsx;
+jsxt;
 
 const input = (
   <editor>
diff --git a/packages/normalizers/src/__tests__/withNormalizeType/type/insert.spec.tsx b/packages/normalizers/src/__tests__/withNormalizeType/type/insert.spec.tsx
index 2be5defd23..f8a479ac5c 100644
--- a/packages/normalizers/src/__tests__/withNormalizeType/type/insert.spec.tsx
+++ b/packages/normalizers/src/__tests__/withNormalizeType/type/insert.spec.tsx
@@ -1,12 +1,12 @@
-/** @jsx jsx */
+/** @jsx jsxt */
 
 import { createSlateEditor } from '@udecode/plate-common';
 import { HEADING_KEYS } from '@udecode/plate-heading';
-import { jsx } from '@udecode/plate-test-utils';
+import { jsxt } from '@udecode/plate-test-utils';
 
 import { NormalizeTypesPlugin } from '../../../lib/NormalizeTypesPlugin';
 
-jsx;
+jsxt;
 
 const input = (
   <editor>
diff --git a/packages/normalizers/src/__tests__/withNormalizeType/type/set.spec.tsx b/packages/normalizers/src/__tests__/withNormalizeType/type/set.spec.tsx
index f1c2dd3614..bf7f4dca60 100644
--- a/packages/normalizers/src/__tests__/withNormalizeType/type/set.spec.tsx
+++ b/packages/normalizers/src/__tests__/withNormalizeType/type/set.spec.tsx
@@ -1,12 +1,12 @@
-/** @jsx jsx */
+/** @jsx jsxt */
 
 import { createSlateEditor } from '@udecode/plate-common';
 import { HEADING_KEYS } from '@udecode/plate-heading';
-import { jsx } from '@udecode/plate-test-utils';
+import { jsxt } from '@udecode/plate-test-utils';
 
 import { NormalizeTypesPlugin } from '../../../lib/NormalizeTypesPlugin';
 
-jsx;
+jsxt;
 
 const input = (
   <editor>
diff --git a/packages/normalizers/src/__tests__/withRemoveEmptyNodes/empty-link.spec.tsx b/packages/normalizers/src/__tests__/withRemoveEmptyNodes/empty-link.spec.tsx
index b019e74577..cfe43b6452 100644
--- a/packages/normalizers/src/__tests__/withRemoveEmptyNodes/empty-link.spec.tsx
+++ b/packages/normalizers/src/__tests__/withRemoveEmptyNodes/empty-link.spec.tsx
@@ -1,14 +1,14 @@
-/** @jsx jsx */
+/** @jsx jsxt */
 
 import type { SlateEditor } from '@udecode/plate-common';
 
 import { createSlateEditor } from '@udecode/plate-common';
 import { LinkPlugin } from '@udecode/plate-link/react';
-import { jsx } from '@udecode/plate-test-utils';
+import { jsxt } from '@udecode/plate-test-utils';
 
 import { RemoveEmptyNodesPlugin } from '../../lib/RemoveEmptyNodesPlugin';
 
-jsx;
+jsxt;
 
 const input = (
   <editor>
diff --git a/packages/plate-utils/src/react/selectEditor.spec.tsx b/packages/plate-utils/src/react/selectEditor.spec.tsx
index abe84a6376..6de55c6a82 100644
--- a/packages/plate-utils/src/react/selectEditor.spec.tsx
+++ b/packages/plate-utils/src/react/selectEditor.spec.tsx
@@ -1,12 +1,12 @@
-/** @jsx jsx */
+/** @jsx jsxt */
 
 import type { SlateEditor } from '@udecode/plate-core';
 
-import { jsx } from '@udecode/plate-test-utils';
+import { jsxt } from '@udecode/plate-test-utils';
 
 import { selectEditor } from './selectEditor';
 
-jsx;
+jsxt;
 
 describe('selectEditor', () => {
   describe('when edge is end', () => {});
diff --git a/packages/reset-node/src/lib/BaseResetNodePlugin.spec.tsx b/packages/reset-node/src/lib/BaseResetNodePlugin.spec.tsx
index 339d1103a4..403c8de524 100644
--- a/packages/reset-node/src/lib/BaseResetNodePlugin.spec.tsx
+++ b/packages/reset-node/src/lib/BaseResetNodePlugin.spec.tsx
@@ -1,11 +1,11 @@
-/** @jsx jsx */
+/** @jsx jsxt */
 
 import { createSlateEditor } from '@udecode/plate-common';
-import { jsx } from '@udecode/plate-test-utils';
+import { jsxt } from '@udecode/plate-test-utils';
 
 import { BaseResetNodePlugin } from './BaseResetNodePlugin';
 
-jsx;
+jsxt;
 
 describe('ResetNodePlugin', () => {
   describe('when delete from start to end of editor', () => {
diff --git a/packages/reset-node/src/react/onKeyDownResetNode.spec.tsx b/packages/reset-node/src/react/onKeyDownResetNode.spec.tsx
index c303c3cf59..a8bf076d29 100644
--- a/packages/reset-node/src/react/onKeyDownResetNode.spec.tsx
+++ b/packages/reset-node/src/react/onKeyDownResetNode.spec.tsx
@@ -1,4 +1,4 @@
-/** @jsx jsx */
+/** @jsx jsxt */
 
 import { BlockquotePlugin } from '@udecode/plate-block-quote/react';
 import {
@@ -19,13 +19,13 @@ import {
 } from '@udecode/plate-common/react';
 import * as isHotkey from '@udecode/plate-core';
 import { BaseListItemPlugin, unwrapList } from '@udecode/plate-list';
-import { jsx } from '@udecode/plate-test-utils';
+import { jsxt } from '@udecode/plate-test-utils';
 
 import type { ResetNodeConfig } from '../lib/BaseResetNodePlugin';
 
 import { onKeyDownResetNode } from './onKeyDownResetNode';
 
-jsx;
+jsxt;
 
 describe('onKeyDownResetNode', () => {
   const enterRule = {
diff --git a/packages/select/src/lib/DeletePlugin.spec.tsx b/packages/select/src/lib/DeletePlugin.spec.tsx
index bc5efc809d..45991ee678 100644
--- a/packages/select/src/lib/DeletePlugin.spec.tsx
+++ b/packages/select/src/lib/DeletePlugin.spec.tsx
@@ -1,13 +1,13 @@
-/** @jsx jsx */
+/** @jsx jsxt */
 
 import type { SlateEditor } from '@udecode/plate-common';
 
 import { createSlateEditor } from '@udecode/plate-common';
-import { jsx } from '@udecode/plate-test-utils';
+import { jsxt } from '@udecode/plate-test-utils';
 
 import { DeletePlugin } from './DeletePlugin';
 
-jsx;
+jsxt;
 
 describe('p (empty) + codeblock when selection not in code block', () => {
   it('should remove the p', () => {
diff --git a/packages/selection/src/react/onKeyDownSelection.spec.tsx b/packages/selection/src/react/onKeyDownSelection.spec.tsx
index 864f19f8b9..df20975c6d 100644
--- a/packages/selection/src/react/onKeyDownSelection.spec.tsx
+++ b/packages/selection/src/react/onKeyDownSelection.spec.tsx
@@ -1,8 +1,8 @@
-/** @jsx jsx */
+/** @jsx jsxt */
 
-import { jsx } from '@udecode/plate-test-utils';
+import { jsxt } from '@udecode/plate-test-utils';
 
-jsx;
+jsxt;
 
 // FIXME
 describe('onKeyDownSelection', () => {
diff --git a/packages/slate-utils/src/queries/__tests__/getBlockAboveSelection/block.spec.tsx b/packages/slate-utils/src/queries/__tests__/getBlockAboveSelection/block.spec.tsx
index b19f562d55..54eec93b5a 100644
--- a/packages/slate-utils/src/queries/__tests__/getBlockAboveSelection/block.spec.tsx
+++ b/packages/slate-utils/src/queries/__tests__/getBlockAboveSelection/block.spec.tsx
@@ -1,12 +1,12 @@
-/** @jsx jsx */
+/** @jsx jsxt */
 
 import type { SlateEditor } from '@udecode/plate-common';
 
-import { jsx } from '@udecode/plate-test-utils';
+import { jsxt } from '@udecode/plate-test-utils';
 
 import { getBlockAbove } from '../../getBlockAbove';
 
-jsx;
+jsxt;
 
 const input = (
   <editor>
diff --git a/packages/slate-utils/src/queries/__tests__/getLastNode/level-1.spec.tsx b/packages/slate-utils/src/queries/__tests__/getLastNode/level-1.spec.tsx
index 2b27ee9b3a..a82a487936 100644
--- a/packages/slate-utils/src/queries/__tests__/getLastNode/level-1.spec.tsx
+++ b/packages/slate-utils/src/queries/__tests__/getLastNode/level-1.spec.tsx
@@ -1,10 +1,10 @@
-/** @jsx jsx */
+/** @jsx jsxt */
 
-import { jsx } from '@udecode/plate-test-utils';
+import { jsxt } from '@udecode/plate-test-utils';
 
 import { getLastNodeByLevel } from '../../getLastNodeByLevel';
 
-jsx;
+jsxt;
 
 const input = (
   <editor>
diff --git a/packages/slate-utils/src/queries/__tests__/getNextSiblingNodes/no-sibling.spec.tsx b/packages/slate-utils/src/queries/__tests__/getNextSiblingNodes/no-sibling.spec.tsx
index fcfe1e76cf..115bd6f246 100644
--- a/packages/slate-utils/src/queries/__tests__/getNextSiblingNodes/no-sibling.spec.tsx
+++ b/packages/slate-utils/src/queries/__tests__/getNextSiblingNodes/no-sibling.spec.tsx
@@ -1,4 +1,4 @@
-/** @jsx jsx */
+/** @jsx jsxt */
 
 import type { SlateEditor } from '@udecode/plate-common';
 import type { TDescendant } from '@udecode/slate';
@@ -6,12 +6,12 @@ import type { Range } from 'slate';
 
 import { createPlateEditor } from '@udecode/plate-common/react';
 import { LinkPlugin } from '@udecode/plate-link/react';
-import { jsx } from '@udecode/plate-test-utils';
+import { jsxt } from '@udecode/plate-test-utils';
 
 import { getBlockAbove } from '../../getBlockAbove';
 import { getNextSiblingNodes } from '../../getNextSiblingNodes';
 
-jsx;
+jsxt;
 
 const input = (
   <editor>
diff --git a/packages/slate-utils/src/queries/__tests__/getNextSiblingNodes/two-siblings.spec.tsx b/packages/slate-utils/src/queries/__tests__/getNextSiblingNodes/two-siblings.spec.tsx
index 994e747588..b278ec7f6d 100644
--- a/packages/slate-utils/src/queries/__tests__/getNextSiblingNodes/two-siblings.spec.tsx
+++ b/packages/slate-utils/src/queries/__tests__/getNextSiblingNodes/two-siblings.spec.tsx
@@ -1,15 +1,15 @@
-/** @jsx jsx */
+/** @jsx jsxt */
 
 import type { Range } from 'slate';
 
 import { type SlateEditor, getBlockAbove } from '@udecode/plate-common';
 import { createPlateEditor } from '@udecode/plate-common/react';
 import { LinkPlugin } from '@udecode/plate-link/react';
-import { jsx } from '@udecode/plate-test-utils';
+import { jsxt } from '@udecode/plate-test-utils';
 
 import { getNextSiblingNodes } from '../../getNextSiblingNodes';
 
-jsx;
+jsxt;
 
 const input = (
   <editor>
diff --git a/packages/slate-utils/src/queries/__tests__/getNode/found.spec.tsx b/packages/slate-utils/src/queries/__tests__/getNode/found.spec.tsx
index ce8bc8a1bf..8e44d027dc 100644
--- a/packages/slate-utils/src/queries/__tests__/getNode/found.spec.tsx
+++ b/packages/slate-utils/src/queries/__tests__/getNode/found.spec.tsx
@@ -1,11 +1,11 @@
-/** @jsx jsx */
+/** @jsx jsxt */
 
 import type { SlateEditor } from '@udecode/plate-core';
 
-import { jsx } from '@udecode/plate-test-utils';
+import { jsxt } from '@udecode/plate-test-utils';
 import { getNode } from '@udecode/slate';
 
-jsx;
+jsxt;
 
 const input = (
   <editor>
diff --git a/packages/slate-utils/src/queries/__tests__/getNode/not-found.spec.tsx b/packages/slate-utils/src/queries/__tests__/getNode/not-found.spec.tsx
index cfed310f58..b2db2d25e9 100644
--- a/packages/slate-utils/src/queries/__tests__/getNode/not-found.spec.tsx
+++ b/packages/slate-utils/src/queries/__tests__/getNode/not-found.spec.tsx
@@ -1,11 +1,11 @@
-/** @jsx jsx */
+/** @jsx jsxt */
 
 import type { SlateEditor } from '@udecode/plate-core';
 
-import { jsx } from '@udecode/plate-test-utils';
+import { jsxt } from '@udecode/plate-test-utils';
 import { getNode } from '@udecode/slate';
 
-jsx;
+jsxt;
 
 const input = (
   <editor>
diff --git a/packages/slate-utils/src/queries/__tests__/getPointBefore/afterMatch/character.spec.tsx b/packages/slate-utils/src/queries/__tests__/getPointBefore/afterMatch/character.spec.tsx
index 8d662a483e..2c687b5ae3 100644
--- a/packages/slate-utils/src/queries/__tests__/getPointBefore/afterMatch/character.spec.tsx
+++ b/packages/slate-utils/src/queries/__tests__/getPointBefore/afterMatch/character.spec.tsx
@@ -1,12 +1,12 @@
-/** @jsx jsx */
+/** @jsx jsxt */
 
 import type { SlateEditor } from '@udecode/plate-core';
 
-import { jsx } from '@udecode/plate-test-utils';
+import { jsxt } from '@udecode/plate-test-utils';
 
 import { getPointBeforeLocation } from '../../../getPointBeforeLocation';
 
-jsx;
+jsxt;
 
 const input = (
   <editor>
diff --git a/packages/slate-utils/src/queries/__tests__/getPointBefore/afterMatch/string.spec.tsx b/packages/slate-utils/src/queries/__tests__/getPointBefore/afterMatch/string.spec.tsx
index 73dc4894d3..e1dcd201aa 100644
--- a/packages/slate-utils/src/queries/__tests__/getPointBefore/afterMatch/string.spec.tsx
+++ b/packages/slate-utils/src/queries/__tests__/getPointBefore/afterMatch/string.spec.tsx
@@ -1,12 +1,12 @@
-/** @jsx jsx */
+/** @jsx jsxt */
 
 import type { SlateEditor } from '@udecode/plate-core';
 
-import { jsx } from '@udecode/plate-test-utils';
+import { jsxt } from '@udecode/plate-test-utils';
 
 import { getPointBeforeLocation } from '../../../getPointBeforeLocation';
 
-jsx;
+jsxt;
 
 const input = (
   <editor>
diff --git a/packages/slate-utils/src/queries/__tests__/getPointBefore/default.spec.tsx b/packages/slate-utils/src/queries/__tests__/getPointBefore/default.spec.tsx
index cb9ee76f84..f50bcb86a5 100644
--- a/packages/slate-utils/src/queries/__tests__/getPointBefore/default.spec.tsx
+++ b/packages/slate-utils/src/queries/__tests__/getPointBefore/default.spec.tsx
@@ -1,12 +1,12 @@
-/** @jsx jsx */
+/** @jsx jsxt */
 
 import type { SlateEditor } from '@udecode/plate-core';
 
-import { jsx } from '@udecode/plate-test-utils';
+import { jsxt } from '@udecode/plate-test-utils';
 
 import { getPointBeforeLocation } from '../../getPointBeforeLocation';
 
-jsx;
+jsxt;
 
 const input = (
   <editor>
diff --git a/packages/slate-utils/src/queries/__tests__/getPointBefore/match/default.spec.tsx b/packages/slate-utils/src/queries/__tests__/getPointBefore/match/default.spec.tsx
index 9c2d023ca7..e2f03716ae 100644
--- a/packages/slate-utils/src/queries/__tests__/getPointBefore/match/default.spec.tsx
+++ b/packages/slate-utils/src/queries/__tests__/getPointBefore/match/default.spec.tsx
@@ -1,12 +1,12 @@
-/** @jsx jsx */
+/** @jsx jsxt */
 
 import type { SlateEditor } from '@udecode/plate-core';
 
-import { jsx } from '@udecode/plate-test-utils';
+import { jsxt } from '@udecode/plate-test-utils';
 
 import { getPointBeforeLocation } from '../../../getPointBeforeLocation';
 
-jsx;
+jsxt;
 
 const input = (
   <editor>
diff --git a/packages/slate-utils/src/queries/__tests__/getPointBefore/matchString.spec.tsx b/packages/slate-utils/src/queries/__tests__/getPointBefore/matchString.spec.tsx
index 8b9ee90c0a..24d9441753 100644
--- a/packages/slate-utils/src/queries/__tests__/getPointBefore/matchString.spec.tsx
+++ b/packages/slate-utils/src/queries/__tests__/getPointBefore/matchString.spec.tsx
@@ -1,12 +1,12 @@
-/** @jsx jsx */
+/** @jsx jsxt */
 
 import type { SlateEditor } from '@udecode/plate-core';
 
-import { jsx } from '@udecode/plate-test-utils';
+import { jsxt } from '@udecode/plate-test-utils';
 
 import { getPointBeforeLocation } from '../../getPointBeforeLocation';
 
-jsx;
+jsxt;
 
 describe('when skipInvalid is true', () => {
   describe('when matchString is a character', () => {
diff --git a/packages/slate-utils/src/queries/__tests__/getPointBefore/multiPaths/true.spec.tsx b/packages/slate-utils/src/queries/__tests__/getPointBefore/multiPaths/true.spec.tsx
index 95bfcc3029..8b3c4b6a18 100644
--- a/packages/slate-utils/src/queries/__tests__/getPointBefore/multiPaths/true.spec.tsx
+++ b/packages/slate-utils/src/queries/__tests__/getPointBefore/multiPaths/true.spec.tsx
@@ -1,12 +1,12 @@
-/** @jsx jsx */
+/** @jsx jsxt */
 
 import type { SlateEditor } from '@udecode/plate-core';
 
-import { jsx } from '@udecode/plate-test-utils';
+import { jsxt } from '@udecode/plate-test-utils';
 
 import { getPointBeforeLocation } from '../../../getPointBeforeLocation';
 
-jsx;
+jsxt;
 
 const input = (
   <editor>
diff --git a/packages/slate-utils/src/queries/__tests__/getPointBefore/skipInvalid/false.spec.tsx b/packages/slate-utils/src/queries/__tests__/getPointBefore/skipInvalid/false.spec.tsx
index 930fcdd981..d06cfc0323 100644
--- a/packages/slate-utils/src/queries/__tests__/getPointBefore/skipInvalid/false.spec.tsx
+++ b/packages/slate-utils/src/queries/__tests__/getPointBefore/skipInvalid/false.spec.tsx
@@ -1,12 +1,12 @@
-/** @jsx jsx */
+/** @jsx jsxt */
 
 import type { SlateEditor } from '@udecode/plate-core';
 
-import { jsx } from '@udecode/plate-test-utils';
+import { jsxt } from '@udecode/plate-test-utils';
 
 import { getPointBeforeLocation } from '../../../getPointBeforeLocation';
 
-jsx;
+jsxt;
 
 const input = (
   <editor>
diff --git a/packages/slate-utils/src/queries/__tests__/getPointBefore/skipInvalid/true.spec.tsx b/packages/slate-utils/src/queries/__tests__/getPointBefore/skipInvalid/true.spec.tsx
index 700b73fd7c..5bef6c9e4e 100644
--- a/packages/slate-utils/src/queries/__tests__/getPointBefore/skipInvalid/true.spec.tsx
+++ b/packages/slate-utils/src/queries/__tests__/getPointBefore/skipInvalid/true.spec.tsx
@@ -1,12 +1,12 @@
-/** @jsx jsx */
+/** @jsx jsxt */
 
 import type { SlateEditor } from '@udecode/plate-common';
 
-import { jsx } from '@udecode/plate-test-utils';
+import { jsxt } from '@udecode/plate-test-utils';
 
 import { getPointBeforeLocation } from '../../../getPointBeforeLocation';
 
-jsx;
+jsxt;
 
 const input = (
   <editor>
diff --git a/packages/slate-utils/src/queries/__tests__/getPointBefore/unit/word.spec.tsx b/packages/slate-utils/src/queries/__tests__/getPointBefore/unit/word.spec.tsx
index 633d2886ef..180c2d0065 100644
--- a/packages/slate-utils/src/queries/__tests__/getPointBefore/unit/word.spec.tsx
+++ b/packages/slate-utils/src/queries/__tests__/getPointBefore/unit/word.spec.tsx
@@ -1,12 +1,12 @@
-/** @jsx jsx */
+/** @jsx jsxt */
 
 import type { SlateEditor } from '@udecode/plate-common';
 
-import { jsx } from '@udecode/plate-test-utils';
+import { jsxt } from '@udecode/plate-test-utils';
 
 import { getPointBeforeLocation } from '../../../getPointBeforeLocation';
 
-jsx;
+jsxt;
 
 const input = (
   <editor>
diff --git a/packages/slate-utils/src/queries/__tests__/getPointFromLocation/path.spec.tsx b/packages/slate-utils/src/queries/__tests__/getPointFromLocation/path.spec.tsx
index c92fd43330..7154c9093b 100644
--- a/packages/slate-utils/src/queries/__tests__/getPointFromLocation/path.spec.tsx
+++ b/packages/slate-utils/src/queries/__tests__/getPointFromLocation/path.spec.tsx
@@ -1,12 +1,12 @@
-/** @jsx jsx */
+/** @jsx jsxt */
 
 import type { SlateEditor } from '@udecode/plate-common';
 
-import { jsx } from '@udecode/plate-test-utils';
+import { jsxt } from '@udecode/plate-test-utils';
 
 import { getPointFromLocation } from '../../getPointFromLocation';
 
-jsx;
+jsxt;
 
 const input = (
   <editor>
diff --git a/packages/slate-utils/src/queries/__tests__/getPointFromLocation/point.spec.tsx b/packages/slate-utils/src/queries/__tests__/getPointFromLocation/point.spec.tsx
index 4748854a75..b577a8efac 100644
--- a/packages/slate-utils/src/queries/__tests__/getPointFromLocation/point.spec.tsx
+++ b/packages/slate-utils/src/queries/__tests__/getPointFromLocation/point.spec.tsx
@@ -1,12 +1,12 @@
-/** @jsx jsx */
+/** @jsx jsxt */
 
 import type { SlateEditor } from '@udecode/plate-common';
 
-import { jsx } from '@udecode/plate-test-utils';
+import { jsxt } from '@udecode/plate-test-utils';
 
 import { getPointFromLocation } from '../../getPointFromLocation';
 
-jsx;
+jsxt;
 
 const input = (
   <editor>
diff --git a/packages/slate-utils/src/queries/__tests__/getPointFromLocation/range-focus.spec.tsx b/packages/slate-utils/src/queries/__tests__/getPointFromLocation/range-focus.spec.tsx
index 3aa4dda5bc..4c070f8cca 100644
--- a/packages/slate-utils/src/queries/__tests__/getPointFromLocation/range-focus.spec.tsx
+++ b/packages/slate-utils/src/queries/__tests__/getPointFromLocation/range-focus.spec.tsx
@@ -1,12 +1,12 @@
-/** @jsx jsx */
+/** @jsx jsxt */
 
 import type { SlateEditor } from '@udecode/plate-core';
 
-import { jsx } from '@udecode/plate-test-utils';
+import { jsxt } from '@udecode/plate-test-utils';
 
 import { getPointFromLocation } from '../../getPointFromLocation';
 
-jsx;
+jsxt;
 
 const input = (
   <editor>
diff --git a/packages/slate-utils/src/queries/__tests__/getPointFromLocation/range.spec.tsx b/packages/slate-utils/src/queries/__tests__/getPointFromLocation/range.spec.tsx
index 24ff540c3f..a74150a310 100644
--- a/packages/slate-utils/src/queries/__tests__/getPointFromLocation/range.spec.tsx
+++ b/packages/slate-utils/src/queries/__tests__/getPointFromLocation/range.spec.tsx
@@ -1,12 +1,12 @@
-/** @jsx jsx */
+/** @jsx jsxt */
 
 import type { SlateEditor } from '@udecode/plate-common';
 
-import { jsx } from '@udecode/plate-test-utils';
+import { jsxt } from '@udecode/plate-test-utils';
 
 import { getPointFromLocation } from '../../getPointFromLocation';
 
-jsx;
+jsxt;
 
 const input = (
   <editor>
diff --git a/packages/slate-utils/src/queries/__tests__/getRangeBefore/default.spec.tsx b/packages/slate-utils/src/queries/__tests__/getRangeBefore/default.spec.tsx
index 3dacedc0fc..a3f6fb665a 100644
--- a/packages/slate-utils/src/queries/__tests__/getRangeBefore/default.spec.tsx
+++ b/packages/slate-utils/src/queries/__tests__/getRangeBefore/default.spec.tsx
@@ -1,12 +1,12 @@
-/** @jsx jsx */
+/** @jsx jsxt */
 
 import type { SlateEditor } from '@udecode/plate-core';
 
-import { jsx } from '@udecode/plate-test-utils';
+import { jsxt } from '@udecode/plate-test-utils';
 
 import { getRangeBefore } from '../../getRangeBefore';
 
-jsx;
+jsxt;
 
 const input = (
   <editor>
diff --git a/packages/slate-utils/src/queries/__tests__/getRangeBefore/undefined.spec.tsx b/packages/slate-utils/src/queries/__tests__/getRangeBefore/undefined.spec.tsx
index 68fde2e569..d2584aba75 100644
--- a/packages/slate-utils/src/queries/__tests__/getRangeBefore/undefined.spec.tsx
+++ b/packages/slate-utils/src/queries/__tests__/getRangeBefore/undefined.spec.tsx
@@ -1,12 +1,12 @@
-/** @jsx jsx */
+/** @jsx jsxt */
 
 import type { SlateEditor } from '@udecode/plate-core';
 
-import { jsx } from '@udecode/plate-test-utils';
+import { jsxt } from '@udecode/plate-test-utils';
 
 import { getRangeBefore } from '../../getRangeBefore';
 
-jsx;
+jsxt;
 
 const input = (
   <editor>
diff --git a/packages/slate-utils/src/queries/__tests__/getRangeFromBlockStart/no-block.spec.tsx b/packages/slate-utils/src/queries/__tests__/getRangeFromBlockStart/no-block.spec.tsx
index 5e840a6f17..41fbc5ccaa 100644
--- a/packages/slate-utils/src/queries/__tests__/getRangeFromBlockStart/no-block.spec.tsx
+++ b/packages/slate-utils/src/queries/__tests__/getRangeFromBlockStart/no-block.spec.tsx
@@ -1,12 +1,12 @@
-/** @jsx jsx */
+/** @jsx jsxt */
 
 import type { SlateEditor } from '@udecode/plate-common';
 
-import { jsx } from '@udecode/plate-test-utils';
+import { jsxt } from '@udecode/plate-test-utils';
 
 import { getRangeFromBlockStart } from '../../getRangeFromBlockStart';
 
-jsx;
+jsxt;
 
 const input = (
   <editor>
diff --git a/packages/slate-utils/src/queries/__tests__/getRangeFromBlockStart/no-selection.spec.tsx b/packages/slate-utils/src/queries/__tests__/getRangeFromBlockStart/no-selection.spec.tsx
index 8ef0278ce3..d348d7e149 100644
--- a/packages/slate-utils/src/queries/__tests__/getRangeFromBlockStart/no-selection.spec.tsx
+++ b/packages/slate-utils/src/queries/__tests__/getRangeFromBlockStart/no-selection.spec.tsx
@@ -1,12 +1,12 @@
-/** @jsx jsx */
+/** @jsx jsxt */
 
 import type { SlateEditor } from '@udecode/plate-core';
 
-import { jsx } from '@udecode/plate-test-utils';
+import { jsxt } from '@udecode/plate-test-utils';
 
 import { getRangeFromBlockStart } from '../../getRangeFromBlockStart';
 
-jsx;
+jsxt;
 
 const input = (
   <editor>
diff --git a/packages/slate-utils/src/queries/__tests__/getRangeFromBlockStart/selection.spec.tsx b/packages/slate-utils/src/queries/__tests__/getRangeFromBlockStart/selection.spec.tsx
index 77c656a8ad..0c6b5855c6 100644
--- a/packages/slate-utils/src/queries/__tests__/getRangeFromBlockStart/selection.spec.tsx
+++ b/packages/slate-utils/src/queries/__tests__/getRangeFromBlockStart/selection.spec.tsx
@@ -1,12 +1,12 @@
-/** @jsx jsx */
+/** @jsx jsxt */
 
 import type { SlateEditor } from '@udecode/plate-common';
 
-import { jsx } from '@udecode/plate-test-utils';
+import { jsxt } from '@udecode/plate-test-utils';
 
 import { getRangeFromBlockStart } from '../../getRangeFromBlockStart';
 
-jsx;
+jsxt;
 
 const input = (
   <editor>
diff --git a/packages/slate-utils/src/queries/__tests__/getSelectionText/true.spec.tsx b/packages/slate-utils/src/queries/__tests__/getSelectionText/true.spec.tsx
index 5064743705..7552692b8e 100644
--- a/packages/slate-utils/src/queries/__tests__/getSelectionText/true.spec.tsx
+++ b/packages/slate-utils/src/queries/__tests__/getSelectionText/true.spec.tsx
@@ -1,12 +1,12 @@
-/** @jsx jsx */
+/** @jsx jsxt */
 
 import type { SlateEditor } from '@udecode/plate-core';
 
-import { jsx } from '@udecode/plate-test-utils';
+import { jsxt } from '@udecode/plate-test-utils';
 
 import { getSelectionText } from '../../getSelectionText';
 
-jsx;
+jsxt;
 
 const input = (
   <editor>
diff --git a/packages/slate-utils/src/queries/__tests__/isAncestorEmpty/empty.spec.tsx b/packages/slate-utils/src/queries/__tests__/isAncestorEmpty/empty.spec.tsx
index a62a08ffad..ab4c6a533c 100644
--- a/packages/slate-utils/src/queries/__tests__/isAncestorEmpty/empty.spec.tsx
+++ b/packages/slate-utils/src/queries/__tests__/isAncestorEmpty/empty.spec.tsx
@@ -1,12 +1,12 @@
-/** @jsx jsx */
+/** @jsx jsxt */
 
 import type { SlateEditor } from '@udecode/plate-common';
 
-import { jsx } from '@udecode/plate-test-utils';
+import { jsxt } from '@udecode/plate-test-utils';
 
 import { isAncestorEmpty } from '../../isAncestorEmpty';
 
-jsx;
+jsxt;
 
 const input = (
   <hp>
diff --git a/packages/slate-utils/src/queries/__tests__/isAncestorEmpty/string.spec.tsx b/packages/slate-utils/src/queries/__tests__/isAncestorEmpty/string.spec.tsx
index 3205b80168..a4c485e8ac 100644
--- a/packages/slate-utils/src/queries/__tests__/isAncestorEmpty/string.spec.tsx
+++ b/packages/slate-utils/src/queries/__tests__/isAncestorEmpty/string.spec.tsx
@@ -1,12 +1,12 @@
-/** @jsx jsx */
+/** @jsx jsxt */
 
 import type { SlateEditor } from '@udecode/plate-core';
 
-import { jsx } from '@udecode/plate-test-utils';
+import { jsxt } from '@udecode/plate-test-utils';
 
 import { isAncestorEmpty } from '../../isAncestorEmpty';
 
-jsx;
+jsxt;
 
 const input = (
   <hp>
diff --git a/packages/slate-utils/src/queries/__tests__/isBlockTextEmptyAfterSelection/cursor-not-at-end.spec.tsx b/packages/slate-utils/src/queries/__tests__/isBlockTextEmptyAfterSelection/cursor-not-at-end.spec.tsx
index ed83ffb2e0..22265d6d4e 100644
--- a/packages/slate-utils/src/queries/__tests__/isBlockTextEmptyAfterSelection/cursor-not-at-end.spec.tsx
+++ b/packages/slate-utils/src/queries/__tests__/isBlockTextEmptyAfterSelection/cursor-not-at-end.spec.tsx
@@ -1,14 +1,14 @@
-/** @jsx jsx */
+/** @jsx jsxt */
 
 import type { SlateEditor } from '@udecode/plate-common';
 
 import { createPlateEditor } from '@udecode/plate-common/react';
 import { LinkPlugin } from '@udecode/plate-link/react';
-import { jsx } from '@udecode/plate-test-utils';
+import { jsxt } from '@udecode/plate-test-utils';
 
 import { isBlockTextEmptyAfterSelection } from '../../isBlockTextEmptyAfterSelection';
 
-jsx;
+jsxt;
 
 const input = (
   <editor>
diff --git a/packages/slate-utils/src/queries/__tests__/isBlockTextEmptyAfterSelection/empty-text-after.spec.tsx b/packages/slate-utils/src/queries/__tests__/isBlockTextEmptyAfterSelection/empty-text-after.spec.tsx
index 0f9e8d0868..1af2c1cacc 100644
--- a/packages/slate-utils/src/queries/__tests__/isBlockTextEmptyAfterSelection/empty-text-after.spec.tsx
+++ b/packages/slate-utils/src/queries/__tests__/isBlockTextEmptyAfterSelection/empty-text-after.spec.tsx
@@ -1,12 +1,12 @@
-/** @jsx jsx */
+/** @jsx jsxt */
 
 import type { TEditor } from '@udecode/slate';
 
-import { jsx } from '@udecode/plate-test-utils';
+import { jsxt } from '@udecode/plate-test-utils';
 
 import { isBlockTextEmptyAfterSelection } from '../../isBlockTextEmptyAfterSelection';
 
-jsx;
+jsxt;
 
 const editor = (
   <editor>
diff --git a/packages/slate-utils/src/queries/__tests__/isBlockTextEmptyAfterSelection/no-selection.spec.tsx b/packages/slate-utils/src/queries/__tests__/isBlockTextEmptyAfterSelection/no-selection.spec.tsx
index a207e8adaf..a89d654836 100644
--- a/packages/slate-utils/src/queries/__tests__/isBlockTextEmptyAfterSelection/no-selection.spec.tsx
+++ b/packages/slate-utils/src/queries/__tests__/isBlockTextEmptyAfterSelection/no-selection.spec.tsx
@@ -1,12 +1,12 @@
-/** @jsx jsx */
+/** @jsx jsxt */
 
 import type { TEditor } from '@udecode/slate';
 
-import { jsx } from '@udecode/plate-test-utils';
+import { jsxt } from '@udecode/plate-test-utils';
 
 import { isBlockTextEmptyAfterSelection } from '../../isBlockTextEmptyAfterSelection';
 
-jsx;
+jsxt;
 
 const editor = (
   <editor>
diff --git a/packages/slate-utils/src/queries/__tests__/isBlockTextEmptyAfterSelection/no-text-after.spec.tsx b/packages/slate-utils/src/queries/__tests__/isBlockTextEmptyAfterSelection/no-text-after.spec.tsx
index 46da8a85ed..31e4a71fdf 100644
--- a/packages/slate-utils/src/queries/__tests__/isBlockTextEmptyAfterSelection/no-text-after.spec.tsx
+++ b/packages/slate-utils/src/queries/__tests__/isBlockTextEmptyAfterSelection/no-text-after.spec.tsx
@@ -1,14 +1,14 @@
-/** @jsx jsx */
+/** @jsx jsxt */
 
 import type { SlateEditor } from '@udecode/plate-common';
 
 import { createPlateEditor } from '@udecode/plate-common/react';
 import { LinkPlugin } from '@udecode/plate-link/react';
-import { jsx } from '@udecode/plate-test-utils';
+import { jsxt } from '@udecode/plate-test-utils';
 
 import { isBlockTextEmptyAfterSelection } from '../../isBlockTextEmptyAfterSelection';
 
-jsx;
+jsxt;
 
 const input = (
   <editor>
diff --git a/packages/slate-utils/src/queries/__tests__/isBlockTextEmptyAfterSelection/text-after.spec.tsx b/packages/slate-utils/src/queries/__tests__/isBlockTextEmptyAfterSelection/text-after.spec.tsx
index b1e672c3ae..f59b44d030 100644
--- a/packages/slate-utils/src/queries/__tests__/isBlockTextEmptyAfterSelection/text-after.spec.tsx
+++ b/packages/slate-utils/src/queries/__tests__/isBlockTextEmptyAfterSelection/text-after.spec.tsx
@@ -1,14 +1,14 @@
-/** @jsx jsx */
+/** @jsx jsxt */
 
 import type { SlateEditor } from '@udecode/plate-common';
 
 import { createPlateEditor } from '@udecode/plate-common/react';
 import { LinkPlugin } from '@udecode/plate-link/react';
-import { jsx } from '@udecode/plate-test-utils';
+import { jsxt } from '@udecode/plate-test-utils';
 
 import { isBlockTextEmptyAfterSelection } from '../../isBlockTextEmptyAfterSelection';
 
-jsx;
+jsxt;
 
 const input = (
   <editor>
diff --git a/packages/slate-utils/src/queries/__tests__/isCollapsed/true.spec.tsx b/packages/slate-utils/src/queries/__tests__/isCollapsed/true.spec.tsx
index ff31743764..e92f516be2 100644
--- a/packages/slate-utils/src/queries/__tests__/isCollapsed/true.spec.tsx
+++ b/packages/slate-utils/src/queries/__tests__/isCollapsed/true.spec.tsx
@@ -1,11 +1,11 @@
-/** @jsx jsx */
+/** @jsx jsxt */
 
 import type { SlateEditor } from '@udecode/plate-core';
 
-import { jsx } from '@udecode/plate-test-utils';
+import { jsxt } from '@udecode/plate-test-utils';
 import { isCollapsed } from '@udecode/slate';
 
-jsx;
+jsxt;
 
 const input = (
   <editor>
diff --git a/packages/slate-utils/src/queries/__tests__/isMarkActive/active.spec.tsx b/packages/slate-utils/src/queries/__tests__/isMarkActive/active.spec.tsx
index a0e56d3626..e63954dd92 100644
--- a/packages/slate-utils/src/queries/__tests__/isMarkActive/active.spec.tsx
+++ b/packages/slate-utils/src/queries/__tests__/isMarkActive/active.spec.tsx
@@ -1,10 +1,10 @@
-/** @jsx jsx */
+/** @jsx jsxt */
 
-import { jsx } from '@udecode/plate-test-utils';
+import { jsxt } from '@udecode/plate-test-utils';
 
 import { isMarkActive } from '../../isMarkActive';
 
-jsx;
+jsxt;
 
 const input = (
   <editor>
diff --git a/packages/slate-utils/src/queries/__tests__/isPointAtWordEnd/element-end.spec.tsx b/packages/slate-utils/src/queries/__tests__/isPointAtWordEnd/element-end.spec.tsx
index 4965649213..e2adc7ee38 100644
--- a/packages/slate-utils/src/queries/__tests__/isPointAtWordEnd/element-end.spec.tsx
+++ b/packages/slate-utils/src/queries/__tests__/isPointAtWordEnd/element-end.spec.tsx
@@ -1,13 +1,13 @@
-/** @jsx jsx */
+/** @jsx jsxt */
 
 import type { SlateEditor } from '@udecode/plate-core';
 
-import { jsx } from '@udecode/plate-test-utils';
+import { jsxt } from '@udecode/plate-test-utils';
 import { Range } from 'slate';
 
 import { isPointAtWordEnd } from '../../isPointAtWordEnd';
 
-jsx;
+jsxt;
 
 const input = (
   <editor>
diff --git a/packages/slate-utils/src/queries/__tests__/isPointAtWordEnd/word-end.spec.tsx b/packages/slate-utils/src/queries/__tests__/isPointAtWordEnd/word-end.spec.tsx
index 769e759375..8a4bcf18ff 100644
--- a/packages/slate-utils/src/queries/__tests__/isPointAtWordEnd/word-end.spec.tsx
+++ b/packages/slate-utils/src/queries/__tests__/isPointAtWordEnd/word-end.spec.tsx
@@ -1,13 +1,13 @@
-/** @jsx jsx */
+/** @jsx jsxt */
 
 import type { SlateEditor } from '@udecode/plate-core';
 
-import { jsx } from '@udecode/plate-test-utils';
+import { jsxt } from '@udecode/plate-test-utils';
 import { Range } from 'slate';
 
 import { isPointAtWordEnd } from '../../isPointAtWordEnd';
 
-jsx;
+jsxt;
 
 const input = (
   <editor>
diff --git a/packages/slate-utils/src/queries/__tests__/isPointAtWordEnd/word-middle.spec.tsx b/packages/slate-utils/src/queries/__tests__/isPointAtWordEnd/word-middle.spec.tsx
index b9fe47931a..7c7ff11248 100644
--- a/packages/slate-utils/src/queries/__tests__/isPointAtWordEnd/word-middle.spec.tsx
+++ b/packages/slate-utils/src/queries/__tests__/isPointAtWordEnd/word-middle.spec.tsx
@@ -1,13 +1,13 @@
-/** @jsx jsx */
+/** @jsx jsxt */
 
 import type { SlateEditor } from '@udecode/plate-common';
 
-import { jsx } from '@udecode/plate-test-utils';
+import { jsxt } from '@udecode/plate-test-utils';
 import { Range } from 'slate';
 
 import { isPointAtWordEnd } from '../../isPointAtWordEnd';
 
-jsx;
+jsxt;
 
 const input = (
   <editor>
diff --git a/packages/slate-utils/src/queries/__tests__/isSelectionExpanded/true.spec.tsx b/packages/slate-utils/src/queries/__tests__/isSelectionExpanded/true.spec.tsx
index 6c07dad996..8379bfd151 100644
--- a/packages/slate-utils/src/queries/__tests__/isSelectionExpanded/true.spec.tsx
+++ b/packages/slate-utils/src/queries/__tests__/isSelectionExpanded/true.spec.tsx
@@ -1,10 +1,10 @@
-/** @jsx jsx */
+/** @jsx jsxt */
 
-import { jsx } from '@udecode/plate-test-utils';
+import { jsxt } from '@udecode/plate-test-utils';
 
 import { isSelectionExpanded } from '../../isSelectionExpanded';
 
-jsx;
+jsxt;
 
 const input = (
   <editor>
diff --git a/packages/slate-utils/src/queries/__tests__/isTextByPath/element.spec.tsx b/packages/slate-utils/src/queries/__tests__/isTextByPath/element.spec.tsx
index c5ad151beb..ea8bc4a290 100644
--- a/packages/slate-utils/src/queries/__tests__/isTextByPath/element.spec.tsx
+++ b/packages/slate-utils/src/queries/__tests__/isTextByPath/element.spec.tsx
@@ -1,12 +1,12 @@
-/** @jsx jsx */
+/** @jsx jsxt */
 
 import type { SlateEditor } from '@udecode/plate-core';
 
-import { jsx } from '@udecode/plate-test-utils';
+import { jsxt } from '@udecode/plate-test-utils';
 
 import { isTextByPath } from '../../isTextByPath';
 
-jsx;
+jsxt;
 
 const editor = (
   <editor>
diff --git a/packages/slate-utils/src/queries/__tests__/isTextByPath/text.spec.tsx b/packages/slate-utils/src/queries/__tests__/isTextByPath/text.spec.tsx
index ec6e9e7bf2..8f2fb5e9eb 100644
--- a/packages/slate-utils/src/queries/__tests__/isTextByPath/text.spec.tsx
+++ b/packages/slate-utils/src/queries/__tests__/isTextByPath/text.spec.tsx
@@ -1,12 +1,12 @@
-/** @jsx jsx */
+/** @jsx jsxt */
 
 import type { SlateEditor } from '@udecode/plate-core';
 
-import { jsx } from '@udecode/plate-test-utils';
+import { jsxt } from '@udecode/plate-test-utils';
 
 import { isTextByPath } from '../../isTextByPath';
 
-jsx;
+jsxt;
 
 const editor = (
   <editor>
diff --git a/packages/slate-utils/src/queries/__tests__/isType/type.spec.tsx b/packages/slate-utils/src/queries/__tests__/isType/type.spec.tsx
index 1a87961e7b..32f49bb1d9 100644
--- a/packages/slate-utils/src/queries/__tests__/isType/type.spec.tsx
+++ b/packages/slate-utils/src/queries/__tests__/isType/type.spec.tsx
@@ -1,9 +1,9 @@
-/** @jsx jsx */
+/** @jsx jsxt */
 import { type SlateEditor, createSlateEditor } from '@udecode/plate-core';
-import { jsx } from '@udecode/plate-test-utils';
+import { jsxt } from '@udecode/plate-test-utils';
 import { isType } from '@udecode/plate-utils';
 
-jsx;
+jsxt;
 
 const editor = (
   <editor>
diff --git a/packages/slate-utils/src/queries/__tests__/isWordAfterTrigger/no-trigger.spec.tsx b/packages/slate-utils/src/queries/__tests__/isWordAfterTrigger/no-trigger.spec.tsx
index d1b677f219..b9640022ff 100644
--- a/packages/slate-utils/src/queries/__tests__/isWordAfterTrigger/no-trigger.spec.tsx
+++ b/packages/slate-utils/src/queries/__tests__/isWordAfterTrigger/no-trigger.spec.tsx
@@ -1,13 +1,13 @@
-/** @jsx jsx */
+/** @jsx jsxt */
 
 import type { SlateEditor } from '@udecode/plate-common';
 
-import { jsx } from '@udecode/plate-test-utils';
+import { jsxt } from '@udecode/plate-test-utils';
 import { Range } from 'slate';
 
 import { isWordAfterTrigger } from '../../isWordAfterTrigger';
 
-jsx;
+jsxt;
 
 const input = (
   <editor>
diff --git a/packages/slate-utils/src/queries/__tests__/isWordAfterTrigger/trigger-accent.spec.tsx b/packages/slate-utils/src/queries/__tests__/isWordAfterTrigger/trigger-accent.spec.tsx
index e6b30d0206..8a3ea034de 100644
--- a/packages/slate-utils/src/queries/__tests__/isWordAfterTrigger/trigger-accent.spec.tsx
+++ b/packages/slate-utils/src/queries/__tests__/isWordAfterTrigger/trigger-accent.spec.tsx
@@ -1,13 +1,13 @@
-/** @jsx jsx */
+/** @jsx jsxt */
 
 import type { SlateEditor } from '@udecode/plate-core';
 
-import { jsx } from '@udecode/plate-test-utils';
+import { jsxt } from '@udecode/plate-test-utils';
 import { Range } from 'slate';
 
 import { isWordAfterTrigger } from '../../isWordAfterTrigger';
 
-jsx;
+jsxt;
 
 const input = (
   <editor>
diff --git a/packages/slate-utils/src/queries/__tests__/isWordAfterTrigger/trigger-space-word.spec.tsx b/packages/slate-utils/src/queries/__tests__/isWordAfterTrigger/trigger-space-word.spec.tsx
index bcc16345b9..5c2cde3390 100644
--- a/packages/slate-utils/src/queries/__tests__/isWordAfterTrigger/trigger-space-word.spec.tsx
+++ b/packages/slate-utils/src/queries/__tests__/isWordAfterTrigger/trigger-space-word.spec.tsx
@@ -1,13 +1,13 @@
-/** @jsx jsx */
+/** @jsx jsxt */
 
 import type { SlateEditor } from '@udecode/plate-core';
 
-import { jsx } from '@udecode/plate-test-utils';
+import { jsxt } from '@udecode/plate-test-utils';
 import { Range } from 'slate';
 
 import { isWordAfterTrigger } from '../../isWordAfterTrigger';
 
-jsx;
+jsxt;
 
 const input = (
   <editor>
diff --git a/packages/slate-utils/src/queries/__tests__/isWordAfterTrigger/trigger.spec.tsx b/packages/slate-utils/src/queries/__tests__/isWordAfterTrigger/trigger.spec.tsx
index 1c493ee8e2..563dd02639 100644
--- a/packages/slate-utils/src/queries/__tests__/isWordAfterTrigger/trigger.spec.tsx
+++ b/packages/slate-utils/src/queries/__tests__/isWordAfterTrigger/trigger.spec.tsx
@@ -1,13 +1,13 @@
-/** @jsx jsx */
+/** @jsx jsxt */
 
 import type { SlateEditor } from '@udecode/plate-core';
 
-import { jsx } from '@udecode/plate-test-utils';
+import { jsxt } from '@udecode/plate-test-utils';
 import { Range } from 'slate';
 
 import { isWordAfterTrigger } from '../../isWordAfterTrigger';
 
-jsx;
+jsxt;
 
 const input = (
   <editor>
diff --git a/packages/slate-utils/src/queries/isRangeAcrossBlocks.spec.tsx b/packages/slate-utils/src/queries/isRangeAcrossBlocks.spec.tsx
index 3f34250dcd..1a1b4a616e 100644
--- a/packages/slate-utils/src/queries/isRangeAcrossBlocks.spec.tsx
+++ b/packages/slate-utils/src/queries/isRangeAcrossBlocks.spec.tsx
@@ -1,12 +1,12 @@
-/** @jsx jsx */
+/** @jsx jsxt */
 
 import type { TEditor } from '@udecode/slate';
 
-import { jsx } from '@udecode/plate-test-utils';
+import { jsxt } from '@udecode/plate-test-utils';
 
 import { isRangeAcrossBlocks } from './isRangeAcrossBlocks';
 
-jsx;
+jsxt;
 
 describe('when selection is in the same block', () => {
   describe('when one text', () => {
diff --git a/packages/slate-utils/src/transforms/moveChildren.spec.tsx b/packages/slate-utils/src/transforms/moveChildren.spec.tsx
index 0e9c893da7..8a6d47b1c7 100644
--- a/packages/slate-utils/src/transforms/moveChildren.spec.tsx
+++ b/packages/slate-utils/src/transforms/moveChildren.spec.tsx
@@ -1,14 +1,14 @@
-/** @jsx jsx */
+/** @jsx jsxt */
 
 import type { SlateEditor } from '@udecode/plate-core';
 
-import { jsx } from '@udecode/plate-test-utils';
+import { jsxt } from '@udecode/plate-test-utils';
 import { findNode } from '@udecode/slate';
 import { Path } from 'slate';
 
 import { moveChildren } from './moveChildren';
 
-jsx;
+jsxt;
 
 const input = (
   <editor>
diff --git a/packages/slate/src/queries/findNode.spec.tsx b/packages/slate/src/queries/findNode.spec.tsx
index 49e49086d2..9a1069bad9 100644
--- a/packages/slate/src/queries/findNode.spec.tsx
+++ b/packages/slate/src/queries/findNode.spec.tsx
@@ -1,12 +1,12 @@
-/** @jsx jsx */
+/** @jsx jsxt */
 
 import type { SlateEditor } from '@udecode/plate-core';
 
-import { jsx } from '@udecode/plate-test-utils';
+import { jsxt } from '@udecode/plate-test-utils';
 
 import { findNode } from './findNode';
 
-jsx;
+jsxt;
 
 describe('when the cursor is in a list item paragraph', () => {
   const input = (
diff --git a/packages/slate/src/slate-history/with-history.ts b/packages/slate/src/slate-history/with-history.ts
index be2d2199ca..bf487b1643 100644
--- a/packages/slate/src/slate-history/with-history.ts
+++ b/packages/slate/src/slate-history/with-history.ts
@@ -146,7 +146,7 @@ const shouldMerge = (op: Operation, prev: Operation | undefined): boolean => {
 
 /** Check whether an operation needs to be saved to the history. */
 
-const shouldSave = (op: Operation, prev: Operation | undefined): boolean => {
+const shouldSave = (op: Operation, _: Operation | undefined): boolean => {
   if (op.type === 'set_selection') {
     return false;
   }
diff --git a/packages/suggestion/src/lib/transforms/addSuggestionMark.spec.tsx b/packages/suggestion/src/lib/transforms/addSuggestionMark.spec.tsx
index 3b63ff04ed..0942ec5e6f 100644
--- a/packages/suggestion/src/lib/transforms/addSuggestionMark.spec.tsx
+++ b/packages/suggestion/src/lib/transforms/addSuggestionMark.spec.tsx
@@ -1,15 +1,15 @@
-/** @jsx jsx */
+/** @jsx jsxt */
 
 import type { SlateEditor } from '@udecode/plate-common';
 
 import { createSlateEditor } from '@udecode/plate-common';
-import { jsx } from '@udecode/plate-test-utils';
+import { jsxt } from '@udecode/plate-test-utils';
 
 import { SUGGESTION_KEYS } from '../BaseSuggestionPlugin';
 import { BaseSuggestionPlugin } from '../BaseSuggestionPlugin';
 import { addSuggestionMark } from './addSuggestionMark';
 
-jsx;
+jsxt;
 
 describe('addSuggestionMark', () => {
   // describe('when editor.activeSuggestionId is defined', () => {
diff --git a/packages/suggestion/src/lib/withSuggestion.spec.tsx b/packages/suggestion/src/lib/withSuggestion.spec.tsx
index 3744079b76..1d1aaeb519 100644
--- a/packages/suggestion/src/lib/withSuggestion.spec.tsx
+++ b/packages/suggestion/src/lib/withSuggestion.spec.tsx
@@ -1,13 +1,13 @@
-/** @jsx jsx */
+/** @jsx jsxt */
 
 import { type SlateEditor, normalizeEditor } from '@udecode/plate-common';
 import { createSlateEditor } from '@udecode/plate-common';
-import { jsx } from '@udecode/plate-test-utils';
+import { jsxt } from '@udecode/plate-test-utils';
 
 import { SUGGESTION_KEYS } from './BaseSuggestionPlugin';
 import { BaseSuggestionPlugin } from './BaseSuggestionPlugin';
 
-jsx;
+jsxt;
 
 describe('withSuggestion', () => {
   describe('insertText', () => {
diff --git a/packages/tabbable/src/lib/findTabDestination.spec.tsx b/packages/tabbable/src/lib/findTabDestination.spec.tsx
index 5617187baa..3135c405be 100644
--- a/packages/tabbable/src/lib/findTabDestination.spec.tsx
+++ b/packages/tabbable/src/lib/findTabDestination.spec.tsx
@@ -1,8 +1,8 @@
-/** @jsx jsx */
+/** @jsx jsxt */
 
 import { type SlateEditor, type TNode, getNode } from '@udecode/plate-common';
 import { createSlateEditor } from '@udecode/plate-common';
-import { jsx } from '@udecode/plate-test-utils';
+import { jsxt } from '@udecode/plate-test-utils';
 
 import type { TabbableEntry } from './types';
 
@@ -11,7 +11,7 @@ import {
   findTabDestination,
 } from './findTabDestination';
 
-jsx;
+jsxt;
 
 describe('findTabDestination', () => {
   const editor = createSlateEditor({
diff --git a/packages/table/src/lib/queries/getTopTableCell.spec.tsx b/packages/table/src/lib/queries/getTopTableCell.spec.tsx
index de2d87d453..72cfee76f9 100644
--- a/packages/table/src/lib/queries/getTopTableCell.spec.tsx
+++ b/packages/table/src/lib/queries/getTopTableCell.spec.tsx
@@ -1,16 +1,16 @@
-/** @jsx jsx */
+/** @jsx jsxt */
 
 import {
   type SlateEditor,
   type TElement,
   createSlateEditor,
 } from '@udecode/plate-common';
-import { jsx } from '@udecode/plate-test-utils';
+import { jsxt } from '@udecode/plate-test-utils';
 
 import { BaseTablePlugin } from '../BaseTablePlugin';
 import { getTopTableCell } from './getTopTableCell';
 
-jsx;
+jsxt;
 
 const createTablePluginWithOptions = () => BaseTablePlugin;
 
diff --git a/packages/table/src/lib/queries/isTableBorderHidden.spec.tsx b/packages/table/src/lib/queries/isTableBorderHidden.spec.tsx
index 5cc08295bd..34cd748704 100644
--- a/packages/table/src/lib/queries/isTableBorderHidden.spec.tsx
+++ b/packages/table/src/lib/queries/isTableBorderHidden.spec.tsx
@@ -1,14 +1,14 @@
-/** @jsx jsx */
+/** @jsx jsxt */
 
 import type { SlateEditor } from '@udecode/plate-common';
 
 import { createPlateEditor } from '@udecode/plate-common/react';
-import { jsx } from '@udecode/plate-test-utils';
+import { jsxt } from '@udecode/plate-test-utils';
 
 import { TablePlugin } from '../../react';
 import { isTableBorderHidden } from './isTableBorderHidden';
 
-jsx;
+jsxt;
 
 const createTablePluginWithOptions = () => TablePlugin;
 
diff --git a/packages/table/src/lib/transforms/insertTableColumn.spec.tsx b/packages/table/src/lib/transforms/insertTableColumn.spec.tsx
index 6baaa9ff3a..38afcaa9ef 100644
--- a/packages/table/src/lib/transforms/insertTableColumn.spec.tsx
+++ b/packages/table/src/lib/transforms/insertTableColumn.spec.tsx
@@ -1,15 +1,15 @@
 /* eslint-disable react/jsx-key */
-/** @jsx jsx */
+/** @jsx jsxt */
 
 import type { TEditor } from '@udecode/plate-common';
 
 import { createPlateEditor } from '@udecode/plate-common/react';
-import { jsx } from '@udecode/plate-test-utils';
+import { jsxt } from '@udecode/plate-test-utils';
 
 import { BaseTablePlugin } from '../BaseTablePlugin';
 import { insertTableColumn } from './insertTableColumn';
 
-jsx;
+jsxt;
 
 type MakeTableWithColsOptions = {
   rowCols: string[][];
diff --git a/packages/table/src/lib/transforms/insertTableRow.spec.tsx b/packages/table/src/lib/transforms/insertTableRow.spec.tsx
index 01ecf652bc..064040bad2 100644
--- a/packages/table/src/lib/transforms/insertTableRow.spec.tsx
+++ b/packages/table/src/lib/transforms/insertTableRow.spec.tsx
@@ -1,14 +1,14 @@
-/** @jsx jsx */
+/** @jsx jsxt */
 
 import type { SlateEditor } from '@udecode/plate-common';
 
 import { createPlateEditor } from '@udecode/plate-common/react';
-import { jsx } from '@udecode/plate-test-utils';
+import { jsxt } from '@udecode/plate-test-utils';
 
 import { BaseTablePlugin } from '../BaseTablePlugin';
 import { insertTableRow } from './insertTableRow';
 
-jsx;
+jsxt;
 
 describe('insertTableRow', () => {
   describe('when inserting a table row', () => {
diff --git a/packages/table/src/lib/transforms/setBorderSize.spec.tsx b/packages/table/src/lib/transforms/setBorderSize.spec.tsx
index 5db697e190..9952666c98 100644
--- a/packages/table/src/lib/transforms/setBorderSize.spec.tsx
+++ b/packages/table/src/lib/transforms/setBorderSize.spec.tsx
@@ -1,14 +1,14 @@
-/** @jsx jsx */
+/** @jsx jsxt */
 
 import type { SlateEditor } from '@udecode/plate-common';
 
 import { createPlateEditor } from '@udecode/plate-common/react';
-import { jsx } from '@udecode/plate-test-utils';
+import { jsxt } from '@udecode/plate-test-utils';
 
 import { BaseTablePlugin } from '../BaseTablePlugin';
 import { setBorderSize } from './setBorderSize';
 
-jsx;
+jsxt;
 
 // These tests cover the various border cases: top, bottom, left, and right.
 // Each test creates an input editor with a cursor in a specific cell,
diff --git a/packages/table/src/lib/withNormalizeTable.spec.tsx b/packages/table/src/lib/withNormalizeTable.spec.tsx
index 8cf040809f..b1aa016fd3 100644
--- a/packages/table/src/lib/withNormalizeTable.spec.tsx
+++ b/packages/table/src/lib/withNormalizeTable.spec.tsx
@@ -1,15 +1,15 @@
-/** @jsx jsx */
+/** @jsx jsxt */
 
 import {
   type Value,
   createSlateEditor,
   normalizeEditor,
 } from '@udecode/plate-common';
-import { jsx } from '@udecode/plate-test-utils';
+import { jsxt } from '@udecode/plate-test-utils';
 
 import { BaseTablePlugin } from './BaseTablePlugin';
 
-jsx;
+jsxt;
 
 describe('withNormalizeTable', () => {
   // https://github.com/udecode/editor-protocol/issues/65
diff --git a/packages/table/src/react/onKeyDownTable.spec.tsx b/packages/table/src/react/onKeyDownTable.spec.tsx
index 1d379705d1..9b812228e5 100644
--- a/packages/table/src/react/onKeyDownTable.spec.tsx
+++ b/packages/table/src/react/onKeyDownTable.spec.tsx
@@ -1,13 +1,13 @@
-/** @jsx jsx */
+/** @jsx jsxt */
 
 import type { SlateEditor } from '@udecode/plate-common';
 
-import { jsx } from '@udecode/plate-test-utils';
+import { jsxt } from '@udecode/plate-test-utils';
 
 import { createPlateTestEditor } from '../../../core/src/react/__tests__/createPlateTestEditor';
 import { TablePlugin } from './TablePlugin';
 
-jsx;
+jsxt;
 
 /**
  * TODO: test e2e? https://github.com/udecode/editor-protocol/issues/71
diff --git a/packages/table/src/react/queries/getTableGridByRange.spec.tsx b/packages/table/src/react/queries/getTableGridByRange.spec.tsx
index 8651a73e2d..75bfa3fdf2 100644
--- a/packages/table/src/react/queries/getTableGridByRange.spec.tsx
+++ b/packages/table/src/react/queries/getTableGridByRange.spec.tsx
@@ -1,16 +1,16 @@
-/** @jsx jsx */
+/** @jsx jsxt */
 
 import {
   type SlateEditor,
   type TElement,
   createSlateEditor,
 } from '@udecode/plate-common';
-import { jsx } from '@udecode/plate-test-utils';
+import { jsxt } from '@udecode/plate-test-utils';
 
 import { BaseTablePlugin } from '../../lib/BaseTablePlugin';
 import { getTableGridAbove } from './getTableGridAbove';
 
-jsx;
+jsxt;
 
 // https://github.com/udecode/editor-protocol/issues/12
 describe('getTableGridByRange', () => {
diff --git a/packages/table/src/react/transforms/deleteColumn.spec.tsx b/packages/table/src/react/transforms/deleteColumn.spec.tsx
index 62872602e3..6edafbe8d2 100644
--- a/packages/table/src/react/transforms/deleteColumn.spec.tsx
+++ b/packages/table/src/react/transforms/deleteColumn.spec.tsx
@@ -1,14 +1,14 @@
-/** @jsx jsx */
+/** @jsx jsxt */
 
 import type { SlateEditor } from '@udecode/plate-common';
 
 import { createPlateEditor } from '@udecode/plate-common/react';
-import { jsx } from '@udecode/plate-test-utils';
+import { jsxt } from '@udecode/plate-test-utils';
 
 import { BaseTablePlugin } from '../../lib/BaseTablePlugin';
 import { deleteColumn } from './deleteColumn';
 
-jsx;
+jsxt;
 
 describe('deleteColumn', () => {
   describe('when 2x2', () => {
diff --git a/packages/table/src/react/withDeleteTable.spec.tsx b/packages/table/src/react/withDeleteTable.spec.tsx
index 9d37d97b9f..fdc4df4eb6 100644
--- a/packages/table/src/react/withDeleteTable.spec.tsx
+++ b/packages/table/src/react/withDeleteTable.spec.tsx
@@ -1,4 +1,4 @@
-/** @jsx jsx */
+/** @jsx jsxt */
 
 import type { SlateEditor } from '@udecode/plate-common';
 
@@ -7,12 +7,12 @@ import {
   createPlateEditor,
   getEditorPlugin,
 } from '@udecode/plate-common/react';
-import { jsx } from '@udecode/plate-test-utils';
+import { jsxt } from '@udecode/plate-test-utils';
 
 import { BaseTablePlugin } from '../lib/BaseTablePlugin';
 import { withDeleteTable } from './withDeleteTable';
 
-jsx;
+jsxt;
 
 describe('withDeleteTable', () => {
   // https://github.com/udecode/editor-protocol/issues/22
diff --git a/packages/table/src/react/withGetFragmentTable.spec.tsx b/packages/table/src/react/withGetFragmentTable.spec.tsx
index 1b9775fcf1..01e715afb1 100644
--- a/packages/table/src/react/withGetFragmentTable.spec.tsx
+++ b/packages/table/src/react/withGetFragmentTable.spec.tsx
@@ -1,14 +1,14 @@
-/** @jsx jsx */
+/** @jsx jsxt */
 
 import type { SlateEditor } from '@udecode/plate-common';
 
 import { createPlateEditor } from '@udecode/plate-common/react';
-import { jsx } from '@udecode/plate-test-utils';
+import { jsxt } from '@udecode/plate-test-utils';
 
 import { TablePlugin } from '.';
 import { getTableGridAbove } from './queries/getTableGridAbove';
 
-jsx;
+jsxt;
 
 describe('withGetFragmentTable', () => {
   // https://github.com/udecode/editor-protocol/issues/19
diff --git a/packages/table/src/react/withInsertFragmentTable.spec.tsx b/packages/table/src/react/withInsertFragmentTable.spec.tsx
index b28bf0df8a..9c8a9727d5 100644
--- a/packages/table/src/react/withInsertFragmentTable.spec.tsx
+++ b/packages/table/src/react/withInsertFragmentTable.spec.tsx
@@ -1,15 +1,15 @@
-/** @jsx jsx */
+/** @jsx jsxt */
 
 import {
   type SlateEditor,
   type TElement,
   createSlateEditor,
 } from '@udecode/plate-common';
-import { jsx } from '@udecode/plate-test-utils';
+import { jsxt } from '@udecode/plate-test-utils';
 
 import { TablePlugin } from './TablePlugin';
 
-jsx;
+jsxt;
 
 describe('withInsertFragmentTable', () => {
   // https://github.com/udecode/editor-protocol/issues/13
diff --git a/packages/table/src/react/withInsertTextTable.spec.tsx b/packages/table/src/react/withInsertTextTable.spec.tsx
index 38a7c141e3..d14f97dabb 100644
--- a/packages/table/src/react/withInsertTextTable.spec.tsx
+++ b/packages/table/src/react/withInsertTextTable.spec.tsx
@@ -1,13 +1,13 @@
-/** @jsx jsx */
+/** @jsx jsxt */
 
 import type { SlateEditor } from '@udecode/plate-common';
 
 import { createPlateEditor } from '@udecode/plate-common/react';
-import { jsx } from '@udecode/plate-test-utils';
+import { jsxt } from '@udecode/plate-test-utils';
 
 import { TablePlugin } from './TablePlugin';
 
-jsx;
+jsxt;
 
 describe('withInsertTextTable', () => {
   // https://github.com/udecode/editor-protocol/issues/65
diff --git a/packages/test-utils/src/internals/createDataTransfer.ts b/packages/test-utils/src/createDataTransfer.ts
similarity index 100%
rename from packages/test-utils/src/internals/createDataTransfer.ts
rename to packages/test-utils/src/createDataTransfer.ts
diff --git a/packages/test-utils/src/index.ts b/packages/test-utils/src/index.ts
index 58e031f637..176faecae0 100644
--- a/packages/test-utils/src/index.ts
+++ b/packages/test-utils/src/index.ts
@@ -2,5 +2,6 @@
  * @file Automatically generated by barrelsby.
  */
 
+export * from './createDataTransfer';
 export * from './getHtmlDocument';
 export * from './jsx';
diff --git a/packages/test-utils/src/jsx.ts b/packages/test-utils/src/jsx.ts
index c28b68109d..b771791130 100644
--- a/packages/test-utils/src/jsx.ts
+++ b/packages/test-utils/src/jsx.ts
@@ -2,6 +2,7 @@
 
 import {
   type HyperscriptShorthands,
+  createHyperscript as createHyperscriptBase,
   createText as createTestText,
 } from 'slate-hyperscript';
 
@@ -90,6 +91,13 @@ export const jsx = createHyperscript({
   elements,
 });
 
+export const jsxt = createHyperscriptBase({
+  creators: {
+    htext: createTestText,
+  },
+  elements,
+});
+
 export const hjsx = createHyperscript({
   creators: {
     htext: createText,
diff --git a/packages/trailing-block/src/lib/TrailingBlockPlugin.spec.tsx b/packages/trailing-block/src/lib/TrailingBlockPlugin.spec.tsx
index 5506009139..05e5cdedb9 100644
--- a/packages/trailing-block/src/lib/TrailingBlockPlugin.spec.tsx
+++ b/packages/trailing-block/src/lib/TrailingBlockPlugin.spec.tsx
@@ -1,13 +1,13 @@
-/** @jsx jsx */
+/** @jsx jsxt */
 
 import { createSlateEditor } from '@udecode/plate-common';
 import { ParagraphPlugin } from '@udecode/plate-common/react';
 import { HEADING_KEYS } from '@udecode/plate-heading';
-import { jsx } from '@udecode/plate-test-utils';
+import { jsxt } from '@udecode/plate-test-utils';
 
 import { TrailingBlockPlugin } from './TrailingBlockPlugin';
 
-jsx;
+jsxt;
 
 describe('when last node is invalid', () => {
   const input = (

From 61768087fa9e57d9b433dd377150c5939bef9215 Mon Sep 17 00:00:00 2001
From: Felix Feng <felixfeng33@gmail.com>
Date: Wed, 13 Nov 2024 15:34:33 +0800
Subject: [PATCH 09/34] upload

---
 .../lib/uploadthing/use-upload-file.ts        |  48 +--
 .../plate-ui/media-placeholder-element.tsx    | 162 ++++++---
 .../plate-ui/media-placeholder-popover.tsx    | 302 ----------------
 .../react/placeholder/PlaceholderPlugin.tsx   |   4 +-
 .../src/react/placeholder/utils/history.ts    |  13 +-
 yarn.lock                                     | 342 +++++++++---------
 6 files changed, 319 insertions(+), 552 deletions(-)
 delete mode 100644 apps/www/src/registry/default/plate-ui/media-placeholder-popover.tsx

diff --git a/apps/www/src/registry/default/lib/uploadthing/use-upload-file.ts b/apps/www/src/registry/default/lib/uploadthing/use-upload-file.ts
index 9c2d867d2c..d4d62b6aef 100644
--- a/apps/www/src/registry/default/lib/uploadthing/use-upload-file.ts
+++ b/apps/www/src/registry/default/lib/uploadthing/use-upload-file.ts
@@ -18,49 +18,37 @@ interface UseUploadFileProps
     UploadFilesOptions<OurFileRouter, keyof OurFileRouter>,
     'headers' | 'onUploadBegin' | 'onUploadProgress' | 'skipPolling'
   > {
-  defaultUploadedFiles?: UploadedFile[];
-  onUploadComplete?: (files: UploadedFile[]) => void;
+  onUploadComplete?: (file: UploadedFile) => void;
   onUploadError?: (error: unknown) => void;
 }
 
 export function useUploadFile(
   endpoint: keyof OurFileRouter,
-  {
-    defaultUploadedFiles = [],
-    onUploadComplete,
-    onUploadError,
-    ...props
-  }: UseUploadFileProps = {}
+  { onUploadComplete, onUploadError, ...props }: UseUploadFileProps = {}
 ) {
-  const [uploadedFiles, setUploadedFiles] =
-    React.useState<UploadedFile[]>(defaultUploadedFiles);
-  const [progresses, setProgresses] = React.useState<Record<string, number>>(
-    {}
-  );
+  const [uploadedFile, setUploadedFile] = React.useState<UploadedFile>();
+  const [uploadingFile, setUploadingFile] = React.useState<File>();
+  const [progress, setProgress] = React.useState<number>(0);
   const [isUploading, setIsUploading] = React.useState(false);
 
-  async function uploadThings(files: File[]) {
+  async function uploadThing(file: File) {
     setIsUploading(true);
+    setUploadingFile(file);
 
     try {
       const res = await uploadFiles(endpoint, {
         ...props,
-        files,
-        onUploadProgress: ({ file, progress }) => {
-          setProgresses((prev) => {
-            return {
-              ...prev,
-              [file.name]: Math.min(progress, 100),
-            };
-          });
+        files: [file],
+        onUploadProgress: ({ progress }) => {
+          setProgress(Math.min(progress, 100));
         },
       });
 
-      setUploadedFiles((prev) => (prev ? [...prev, ...res] : res));
+      setUploadedFile(res[0]);
 
-      onUploadComplete?.(res);
+      onUploadComplete?.(res[0]);
 
-      return uploadedFiles;
+      return uploadedFile;
     } catch (error) {
       const errorMessage = getErrorMessage(error);
 
@@ -72,15 +60,17 @@ export function useUploadFile(
       toast.error(message);
       onUploadError?.(error);
     } finally {
-      setProgresses({});
+      setProgress(0);
       setIsUploading(false);
+      setUploadingFile(undefined);
     }
   }
 
   return {
     isUploading,
-    progresses,
-    uploadFiles: uploadThings,
-    uploadedFiles,
+    progress,
+    uploadFile: uploadThing,
+    uploadedFile,
+    uploadingFile,
   };
 }
diff --git a/apps/www/src/registry/default/plate-ui/media-placeholder-element.tsx b/apps/www/src/registry/default/plate-ui/media-placeholder-element.tsx
index 63df78723e..b79b0d57ea 100644
--- a/apps/www/src/registry/default/plate-ui/media-placeholder-element.tsx
+++ b/apps/www/src/registry/default/plate-ui/media-placeholder-element.tsx
@@ -1,44 +1,59 @@
 'use client';
 
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import type { ReactNode } from 'react';
 
+import type { TPlaceholderElement } from '@udecode/plate-media';
+
 import { cn } from '@udecode/cn';
-import { withHOC, withRef } from '@udecode/plate-common/react';
+import {
+  findNodePath,
+  useEditorPlugin,
+  withHOC,
+  withRef,
+} from '@udecode/plate-common/react';
 import {
   AudioPlugin,
   FilePlugin,
   ImagePlugin,
+  PlaceholderPlugin,
   PlaceholderProvider,
   VideoPlugin,
-  usePlaceholderElementState,
+  updateUploadHistory,
 } from '@udecode/plate-media/react';
+import { insertNodes, removeNodes, withoutSavingHistory } from '@udecode/slate';
 import { AudioLines, FileUp, Film, ImageIcon } from 'lucide-react';
+import { useFilePicker } from 'use-file-picker';
 
-import { MediaPlaceholderPopover } from './media-placeholder-popover';
+import { useUploadFile } from '../lib/uploadthing';
 import { PlateElement } from './plate-element';
 import { Spinner } from './spinner';
 
 const CONTENT: Record<
   string,
   {
+    accept: string[];
     content: ReactNode;
     icon: ReactNode;
   }
 > = {
   [AudioPlugin.key]: {
+    accept: ['audio/*'],
     content: 'Add an audio file',
     icon: <AudioLines />,
   },
   [FilePlugin.key]: {
+    accept: ['*'],
     content: 'Add a file',
     icon: <FileUp />,
   },
   [ImagePlugin.key]: {
+    accept: ['image/*'],
     content: 'Add an image',
     icon: <ImageIcon />,
   },
   [VideoPlugin.key]: {
+    accept: ['video/*'],
     content: 'Add a video',
     icon: <Film />,
   },
@@ -48,28 +63,87 @@ export const MediaPlaceholderElement = withHOC(
   PlaceholderProvider,
   withRef<typeof PlateElement>(
     ({ children, className, editor, nodeProps, ...props }, ref) => {
-      const { mediaType, progresses, progressing, setSize, updatedFiles } =
-        usePlaceholderElementState();
+      const element = props.element as TPlaceholderElement;
+
+      const { api } = useEditorPlugin(PlaceholderPlugin);
+
+      const { isUploading, progress, uploadFile, uploadedFile, uploadingFile } =
+        useUploadFile('imageUploader');
 
-      const currentContent = CONTENT[mediaType];
+      const loading = isUploading && uploadingFile;
 
-      const isImage = mediaType === ImagePlugin.key;
+      const currentContent = CONTENT[element.mediaType];
 
-      const file: File | undefined = updatedFiles?.[0];
-      const progress = file ? progresses?.[file.name] : undefined;
+      const isImage = element.mediaType === ImagePlugin.key;
 
       const imageRef = useRef<HTMLImageElement>(null);
+
+      const { openFilePicker } = useFilePicker({
+        accept: currentContent.accept,
+        multiple: true,
+        onFilesSelected: ({ plainFiles: updatedFiles }) => {
+          const firstFile = updatedFiles[0];
+          const restFiles = updatedFiles.slice(1);
+
+          replaceCurrentPlaceholder(firstFile);
+
+          restFiles.length > 0 && (editor as any).tf.insert.media(restFiles);
+        },
+      });
+
+      const replaceCurrentPlaceholder = useCallback(
+        (file: File) => {
+          void uploadFile(file);
+          api.placeholder.addUploadingFile(element.id as string, file);
+        },
+        [api.placeholder, element.id, uploadFile]
+      );
+
       useEffect(() => {
-        if (!imageRef.current) return;
+        if (!uploadedFile) return;
+
+        const path = findNodePath(editor, element);
 
-        const { height, width } = imageRef.current;
+        withoutSavingHistory(editor, () => {
+          removeNodes(editor, { at: path });
 
-        setSize?.({
-          height,
-          width,
+          const node = {
+            children: [{ text: '' }],
+            initialHeight: imageRef.current?.height,
+            initialWidth: imageRef.current?.width,
+            isUpload: true,
+            name: element.mediaType === FilePlugin.key ? uploadedFile.name : '',
+            placeholderId: element.id as string,
+            type: element.mediaType!,
+            url: uploadedFile.url,
+          };
+
+          insertNodes(editor, node, { at: path });
+
+          updateUploadHistory(editor, node);
         });
+
+        api.placeholder.removeUploadingFile(element.id as string);
         // eslint-disable-next-line react-hooks/exhaustive-deps
-      }, [imageRef.current]);
+      }, [uploadedFile, element.id]);
+
+      // React dev mode will call useEffect twice
+      const isReplaced = useRef(false);
+      /** Paste and drop */
+      useEffect(() => {
+        if (isReplaced.current) return;
+
+        isReplaced.current = true;
+        const currentFiles = api.placeholder.getUploadingFile(
+          element.id as string
+        );
+
+        if (!currentFiles) return;
+
+        replaceCurrentPlaceholder(currentFiles);
+
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+      }, [isReplaced]);
 
       return (
         <PlateElement
@@ -78,39 +152,39 @@ export const MediaPlaceholderElement = withHOC(
           editor={editor}
           {...props}
         >
-          <MediaPlaceholderPopover>
-            {(!progressing || !isImage) && (
-              <div
-                className={cn(
-                  'flex cursor-pointer select-none items-center rounded-sm bg-muted p-3 pr-9 hover:bg-primary/10'
-                )}
-                contentEditable={false}
-                role="button"
-              >
-                <div className="relative mr-3 flex text-muted-foreground/80 [&_svg]:size-6">
-                  {currentContent.icon}
+          {(!loading || !isImage) && (
+            <div
+              className={cn(
+                'flex cursor-pointer select-none items-center rounded-sm bg-muted p-3 pr-9 hover:bg-primary/10'
+              )}
+              onClick={() => !loading && openFilePicker()}
+              contentEditable={false}
+            >
+              <div className="relative mr-3 flex text-muted-foreground/80 [&_svg]:size-6">
+                {currentContent.icon}
+              </div>
+              <div className="whitespace-nowrap text-sm text-muted-foreground">
+                <div>
+                  {loading ? uploadingFile?.name : currentContent.content}
                 </div>
-                <div className="whitespace-nowrap text-sm text-muted-foreground">
-                  <div>{progressing ? file?.name : currentContent.content}</div>
-
-                  {progressing && !isImage && (
-                    <div className="mt-1 flex items-center gap-1.5">
-                      <div>{formatBytes(file.size)}</div>
-                      <div>–</div>
-                      <div className="flex items-center">
-                        <Spinner className="mr-1 size-3.5" />
-                        {progress ?? 0}%
-                      </div>
+
+                {loading && !isImage && (
+                  <div className="mt-1 flex items-center gap-1.5">
+                    <div>{formatBytes(uploadingFile?.size ?? 0)}</div>
+                    <div>–</div>
+                    <div className="flex items-center">
+                      <Spinner className="mr-1 size-3.5" />
+                      {progress ?? 0}%
                     </div>
-                  )}
-                </div>
+                  </div>
+                )}
               </div>
-            )}
-          </MediaPlaceholderPopover>
+            </div>
+          )}
 
-          {isImage && progressing && file && (
+          {isImage && loading && (
             <ImageProgress
-              file={file}
+              file={uploadingFile}
               imageRef={imageRef}
               progress={progress}
             />
diff --git a/apps/www/src/registry/default/plate-ui/media-placeholder-popover.tsx b/apps/www/src/registry/default/plate-ui/media-placeholder-popover.tsx
deleted file mode 100644
index 8755b9ab47..0000000000
--- a/apps/www/src/registry/default/plate-ui/media-placeholder-popover.tsx
+++ /dev/null
@@ -1,302 +0,0 @@
-'use client';
-
-import React, { useCallback, useEffect, useRef, useState } from 'react';
-
-import {
-  insertNodes,
-  removeNodes,
-  withoutSavingHistory,
-} from '@udecode/plate-common';
-import {
-  findNodePath,
-  useEditorPlugin,
-  useEditorRef,
-} from '@udecode/plate-common/react';
-import { setMediaNode } from '@udecode/plate-media';
-import {
-  AudioPlugin,
-  FilePlugin,
-  ImagePlugin,
-  PlaceholderPlugin,
-  UploadErrorCode,
-  VideoPlugin,
-  updateUploadHistory,
-  usePlaceholderPopoverState,
-} from '@udecode/plate-media/react';
-import { toast } from 'sonner';
-import { useFilePicker } from 'use-file-picker';
-
-import { useUploadFile } from '../lib/uploadthing';
-import { Button } from './button';
-import { Input } from './input';
-import { Popover, PopoverContent, PopoverTrigger } from './popover';
-import { Tabs, TabsContent, TabsList, TabsTrigger } from './tabs';
-
-const MEDIA_CONFIG: Record<
-  string,
-  {
-    accept: string[];
-    buttonText: string;
-    embedText: string;
-  }
-> = {
-  [AudioPlugin.key]: {
-    accept: ['audio/*'],
-    buttonText: 'Upload Audio',
-    embedText: 'Embed audio',
-  },
-  [FilePlugin.key]: {
-    accept: ['*'],
-    buttonText: 'Choose a file',
-    embedText: 'Embed file',
-  },
-  [ImagePlugin.key]: {
-    accept: ['image/*'],
-    buttonText: 'Upload file',
-    embedText: 'Embed image',
-  },
-  [VideoPlugin.key]: {
-    accept: ['video/*'],
-    buttonText: 'Upload video',
-    embedText: 'Embed video',
-  },
-};
-
-export interface MediaPopoverProps {
-  children: React.ReactNode;
-}
-
-export const MediaPlaceholderPopover = ({ children }: MediaPopoverProps) => {
-  const editor = useEditorRef();
-
-  const {
-    id,
-    element,
-    mediaType,
-    readOnly,
-    selected,
-    setIsUploading,
-    setProgresses,
-    setUpdatedFiles,
-    size,
-  } = usePlaceholderPopoverState();
-  const [open, setOpen] = useState(false);
-
-  const currentMedia = MEDIA_CONFIG[mediaType];
-
-  const { api, getOption } = useEditorPlugin(PlaceholderPlugin);
-
-  // const mediaConfig = api.placeholder.getMediaConfig(mediaType as MediaKeys);
-  const multiple = getOption('multiple') ?? true;
-
-  const { isUploading, progresses, uploadFiles, uploadedFiles } = useUploadFile(
-    'imageUploader',
-    {
-      defaultUploadedFiles: [],
-    }
-  );
-
-  const replaceCurrentPlaceholder = useCallback(
-    (file: File) => {
-      setUpdatedFiles([file]);
-      void uploadFiles([file]);
-      api.placeholder.addUploadingFile(element.id as string, file);
-    },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [element.id]
-  );
-
-  /** Open file picker */
-  const { openFilePicker } = useFilePicker({
-    accept: currentMedia.accept,
-    multiple,
-    onFilesSelected: ({ plainFiles: updatedFiles }) => {
-      const firstFile = updatedFiles[0];
-      const restFiles = updatedFiles.slice(1);
-
-      replaceCurrentPlaceholder(firstFile);
-
-      restFiles.length > 0 && (editor as any).tf.insert.media(restFiles);
-    },
-  });
-
-  // React dev mode will call useEffect twice
-  const isReplaced = useRef(false);
-  /** Paste and drop */
-  useEffect(() => {
-    if (isReplaced.current) return;
-
-    isReplaced.current = true;
-    const currentFiles = api.placeholder.getUploadingFile(element.id as string);
-
-    if (!currentFiles) return;
-
-    replaceCurrentPlaceholder(currentFiles);
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isReplaced]);
-
-  useEffect(() => {
-    const uploaded = uploadedFiles.length;
-
-    if (!uploaded) return;
-
-    const fileInfo = uploadedFiles[0];
-
-    const path = findNodePath(editor, element);
-
-    withoutSavingHistory(editor, () => {
-      removeNodes(editor, { at: path });
-
-      const node = {
-        children: [{ text: '' }],
-        initialHeight: size?.height,
-        initialWidth: size?.width,
-        isUpload: true,
-        name: mediaType === FilePlugin.key ? fileInfo.name : '',
-        placeholderId: element.id as string,
-        type: mediaType!,
-        url: fileInfo.url,
-      };
-
-      insertNodes(editor, node, { at: path });
-
-      updateUploadHistory(editor, node);
-    });
-
-    api.placeholder.removeUploadingFile(element.id as string);
-
-    // mergeMarkedBatch(editor, PlaceholderPlugin.key);
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [uploadedFiles, element.id, size]);
-
-  const [embedValue, setEmbedValue] = useState('');
-
-  const onEmbed = useCallback(
-    (value: string) => {
-      setMediaNode(editor, {
-        type: mediaType,
-        url: value,
-      });
-    },
-    [editor, mediaType]
-  );
-
-  useEffect(() => {
-    setOpen(selected);
-  }, [selected, setOpen]);
-
-  useEffect(() => {
-    if (isUploading) {
-      setOpen(false);
-    }
-  }, [isUploading]);
-
-  useEffect(() => {
-    setProgresses(progresses);
-    setIsUploading(isUploading);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [id, progresses, isUploading]);
-
-  if (readOnly) return <>{children}</>;
-
-  return (
-    <Popover open={open} onOpenChange={setOpen} modal={false}>
-      <PopoverTrigger asChild>{children}</PopoverTrigger>
-
-      <PopoverContent
-        className="flex w-fit flex-col"
-        onOpenAutoFocus={(e) => e.preventDefault()}
-      >
-        <Tabs className="w-full shrink-0" defaultValue="account">
-          <TabsList className="px-2" onMouseDown={(e) => e.preventDefault()}>
-            <TabsTrigger value="account">Upload</TabsTrigger>
-            <TabsTrigger value="password">Embed link</TabsTrigger>
-          </TabsList>
-          <TabsContent className=" px-3 py-2" value="account">
-            <Button className="w-full" onClick={openFilePicker}>
-              {currentMedia.buttonText}
-            </Button>
-            <div className="mt-3 text-xs text-muted-foreground">
-              The maximum size per file is 5MB
-            </div>
-          </TabsContent>
-
-          <TabsContent className="px-3 pb-3 pt-2 text-center" value="password">
-            <Input
-              value={embedValue}
-              onChange={(e) => setEmbedValue(e.target.value)}
-              placeholder="Paste the link..."
-            />
-
-            <Button
-              className="mt-2 w-full "
-              onClick={() => onEmbed(embedValue)}
-            >
-              {currentMedia.embedText}
-            </Button>
-          </TabsContent>
-        </Tabs>
-      </PopoverContent>
-    </Popover>
-  );
-};
-
-export const useUploadErrorToast = () => {
-  const editor = useEditorRef();
-
-  const uploadError = editor.useOption(PlaceholderPlugin, 'error');
-
-  useEffect(() => {
-    if (!uploadError) return;
-
-    const { code, data } = uploadError;
-
-    switch (code) {
-      case UploadErrorCode.INVALID_FILE_SIZE: {
-        toast.error(
-          `The size of files ${data.files
-            .map((f) => f.name)
-            .join(', ')} is invalid`
-        );
-
-        break;
-      }
-      case UploadErrorCode.INVALID_FILE_TYPE: {
-        toast.error(
-          `The type of files ${data.files
-            .map((f) => f.name)
-            .join(', ')} is invalid`
-        );
-
-        break;
-      }
-      case UploadErrorCode.TOO_LARGE: {
-        toast.error(
-          `The size of files ${data.files
-            .map((f) => f.name)
-            .join(', ')} is too large than ${data.maxFileSize}`
-        );
-
-        break;
-      }
-      case UploadErrorCode.TOO_LESS_FILES: {
-        toast.error(
-          `The mini um number of files is ${data.minFileCount} for ${data.fileType}`
-        );
-
-        break;
-      }
-      case UploadErrorCode.TOO_MANY_FILES: {
-        toast.error(
-          `The maximum number of files is ${data.maxFileCount} ${
-            data.fileType ? `for ${data.fileType}` : ''
-          }`
-        );
-
-        break;
-      }
-    }
-  }, [uploadError]);
-};
diff --git a/packages/media/src/react/placeholder/PlaceholderPlugin.tsx b/packages/media/src/react/placeholder/PlaceholderPlugin.tsx
index 30a32a9d6f..397ca7ab00 100644
--- a/packages/media/src/react/placeholder/PlaceholderPlugin.tsx
+++ b/packages/media/src/react/placeholder/PlaceholderPlugin.tsx
@@ -13,7 +13,7 @@ import type { MediaItemConfig, UploadError } from './type';
 import { type PlaceholderConfig, BasePlaceholderPlugin } from '../../lib';
 import { AudioPlugin, FilePlugin, ImagePlugin, VideoPlugin } from '../plugins';
 import { insertMedia } from './transforms/insertMedia';
-import { isHistoryMarked } from './utils/history';
+import { isHistoryMarking } from './utils/history';
 
 export type PlaceholderApi = {
   addUploadingFile: (id: string, file: File) => void;
@@ -47,7 +47,7 @@ export const PlaceholderPlugin = toTPlatePlugin<
     const { writeHistory } = editor;
 
     editor.writeHistory = (stack, batch) => {
-      if (isHistoryMarked(editor)) {
+      if (isHistoryMarking(editor)) {
         const newBatch = {
           ...batch,
           [PlaceholderPlugin.key]: true,
diff --git a/packages/media/src/react/placeholder/utils/history.ts b/packages/media/src/react/placeholder/utils/history.ts
index c1ef274429..4e6596472d 100644
--- a/packages/media/src/react/placeholder/utils/history.ts
+++ b/packages/media/src/react/placeholder/utils/history.ts
@@ -11,13 +11,19 @@ export const withHistoryMark = (editor: PlateEditor, fn: () => void) => {
   historyMarks.set(editor, false);
 };
 
-export const isHistoryMarked = (editor: PlateEditor): boolean => {
+export const isHistoryMarking = (editor: PlateEditor): boolean => {
   return historyMarks.get(editor) ?? false;
 };
 
 export const updateUploadHistory = (editor: PlateEditor, node: TElement) => {
-  const index = editor.history.undos.findIndex(
-    (batch: any) => batch[PlaceholderPlugin.key]
+  const index = editor.history.undos.findLastIndex(
+    (batch: any) =>
+      batch[PlaceholderPlugin.key] &&
+      batch.operations.some(
+        (operation: any) =>
+          operation.type === 'insert_node' &&
+          operation.node.id === node.placeholderId
+      )
   );
 
   const batch = editor.history.undos[index];
@@ -42,7 +48,6 @@ export const updateUploadHistory = (editor: PlateEditor, node: TElement) => {
 
   const newBatch = {
     ...batch,
-    [PlaceholderPlugin.key]: false,
     operations: newOperations,
   };
 
diff --git a/yarn.lock b/yarn.lock
index 9e50c6174f..b3bf94d1a4 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6207,13 +6207,13 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@udecode/plate-ai@workspace:packages/ai"
   dependencies:
-    "@udecode/plate-combobox": "npm:39.0.0"
-    "@udecode/plate-markdown": "npm:39.2.0"
-    "@udecode/plate-selection": "npm:39.3.7"
+    "@udecode/plate-combobox": "npm:40.0.0"
+    "@udecode/plate-markdown": "npm:40.0.0"
+    "@udecode/plate-selection": "npm:40.0.0"
     ai: "npm:^3.4.10"
     lodash: "npm:^4.17.21"
   peerDependencies:
-    "@udecode/plate-common": ">=39.2.13"
+    "@udecode/plate-common": ">=40.0.0"
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
     slate: ">=0.103.0"
@@ -6224,13 +6224,13 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@udecode/plate-alignment@npm:39.0.0, @udecode/plate-alignment@workspace:^, @udecode/plate-alignment@workspace:packages/alignment":
+"@udecode/plate-alignment@npm:40.0.0, @udecode/plate-alignment@workspace:^, @udecode/plate-alignment@workspace:packages/alignment":
   version: 0.0.0-use.local
   resolution: "@udecode/plate-alignment@workspace:packages/alignment"
   dependencies:
     "@udecode/plate-common": "workspace:^"
   peerDependencies:
-    "@udecode/plate-common": ">=39.2.21"
+    "@udecode/plate-common": ">=40.0.0"
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
     slate: ">=0.103.0"
@@ -6241,14 +6241,14 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@udecode/plate-autoformat@npm:39.0.0, @udecode/plate-autoformat@workspace:^, @udecode/plate-autoformat@workspace:packages/autoformat":
+"@udecode/plate-autoformat@npm:40.0.0, @udecode/plate-autoformat@workspace:^, @udecode/plate-autoformat@workspace:packages/autoformat":
   version: 0.0.0-use.local
   resolution: "@udecode/plate-autoformat@workspace:packages/autoformat"
   dependencies:
     "@udecode/plate-common": "workspace:^"
     lodash: "npm:^4.17.21"
   peerDependencies:
-    "@udecode/plate-common": ">=39.2.21"
+    "@udecode/plate-common": ">=40.0.0"
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
     slate: ">=0.103.0"
@@ -6259,16 +6259,16 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@udecode/plate-basic-elements@npm:39.0.0, @udecode/plate-basic-elements@workspace:^, @udecode/plate-basic-elements@workspace:packages/basic-elements":
+"@udecode/plate-basic-elements@npm:40.0.0, @udecode/plate-basic-elements@workspace:^, @udecode/plate-basic-elements@workspace:packages/basic-elements":
   version: 0.0.0-use.local
   resolution: "@udecode/plate-basic-elements@workspace:packages/basic-elements"
   dependencies:
-    "@udecode/plate-block-quote": "npm:39.0.0"
-    "@udecode/plate-code-block": "npm:39.0.0"
+    "@udecode/plate-block-quote": "npm:40.0.0"
+    "@udecode/plate-code-block": "npm:40.0.0"
     "@udecode/plate-common": "workspace:^"
-    "@udecode/plate-heading": "npm:39.0.0"
+    "@udecode/plate-heading": "npm:40.0.0"
   peerDependencies:
-    "@udecode/plate-common": ">=39.2.21"
+    "@udecode/plate-common": ">=40.0.0"
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
     slate: ">=0.103.0"
@@ -6279,13 +6279,13 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@udecode/plate-basic-marks@npm:39.0.0, @udecode/plate-basic-marks@workspace:^, @udecode/plate-basic-marks@workspace:packages/basic-marks":
+"@udecode/plate-basic-marks@npm:40.0.0, @udecode/plate-basic-marks@workspace:^, @udecode/plate-basic-marks@workspace:packages/basic-marks":
   version: 0.0.0-use.local
   resolution: "@udecode/plate-basic-marks@workspace:packages/basic-marks"
   dependencies:
     "@udecode/plate-common": "workspace:^"
   peerDependencies:
-    "@udecode/plate-common": ">=39.2.21"
+    "@udecode/plate-common": ">=40.0.0"
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
     slate: ">=0.103.0"
@@ -6296,13 +6296,13 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@udecode/plate-block-quote@npm:39.0.0, @udecode/plate-block-quote@workspace:^, @udecode/plate-block-quote@workspace:packages/block-quote":
+"@udecode/plate-block-quote@npm:40.0.0, @udecode/plate-block-quote@workspace:^, @udecode/plate-block-quote@workspace:packages/block-quote":
   version: 0.0.0-use.local
   resolution: "@udecode/plate-block-quote@workspace:packages/block-quote"
   dependencies:
     "@udecode/plate-common": "workspace:^"
   peerDependencies:
-    "@udecode/plate-common": ">=39.2.21"
+    "@udecode/plate-common": ">=40.0.0"
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
     slate: ">=0.103.0"
@@ -6313,13 +6313,13 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@udecode/plate-break@npm:39.0.0, @udecode/plate-break@workspace:^, @udecode/plate-break@workspace:packages/break":
+"@udecode/plate-break@npm:40.0.0, @udecode/plate-break@workspace:^, @udecode/plate-break@workspace:packages/break":
   version: 0.0.0-use.local
   resolution: "@udecode/plate-break@workspace:packages/break"
   dependencies:
     "@udecode/plate-common": "workspace:^"
   peerDependencies:
-    "@udecode/plate-common": ">=39.2.21"
+    "@udecode/plate-common": ">=40.0.0"
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
     slate: ">=0.103.0"
@@ -6336,7 +6336,7 @@ __metadata:
   dependencies:
     "@udecode/plate-common": "workspace:^"
   peerDependencies:
-    "@udecode/plate-common": ">=39.2.21"
+    "@udecode/plate-common": ">=40.0.0"
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
     slate: ">=0.103.0"
@@ -6354,7 +6354,7 @@ __metadata:
     "@udecode/plate-common": "workspace:^"
     react-textarea-autosize: "npm:^8.5.3"
   peerDependencies:
-    "@udecode/plate-common": ">=39.2.21"
+    "@udecode/plate-common": ">=40.0.0"
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
     slate: ">=0.103.0"
@@ -6374,7 +6374,7 @@ __metadata:
     delay: "npm:5.0.0"
     p-defer: "npm:^4.0.1"
   peerDependencies:
-    "@udecode/plate-common": ">=39.2.21"
+    "@udecode/plate-common": ">=40.0.0"
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
     slate: ">=0.103.0"
@@ -6385,14 +6385,14 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@udecode/plate-code-block@npm:39.0.0, @udecode/plate-code-block@workspace:^, @udecode/plate-code-block@workspace:packages/code-block":
+"@udecode/plate-code-block@npm:40.0.0, @udecode/plate-code-block@workspace:^, @udecode/plate-code-block@workspace:packages/code-block":
   version: 0.0.0-use.local
   resolution: "@udecode/plate-code-block@workspace:packages/code-block"
   dependencies:
     "@udecode/plate-common": "workspace:^"
     prismjs: "npm:^1.29.0"
   peerDependencies:
-    "@udecode/plate-common": ">=39.2.21"
+    "@udecode/plate-common": ">=40.0.0"
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
     slate: ">=0.103.0"
@@ -6403,13 +6403,13 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@udecode/plate-combobox@npm:39.0.0, @udecode/plate-combobox@workspace:^, @udecode/plate-combobox@workspace:packages/combobox":
+"@udecode/plate-combobox@npm:40.0.0, @udecode/plate-combobox@workspace:^, @udecode/plate-combobox@workspace:packages/combobox":
   version: 0.0.0-use.local
   resolution: "@udecode/plate-combobox@workspace:packages/combobox"
   dependencies:
     "@udecode/plate-common": "workspace:^"
   peerDependencies:
-    "@udecode/plate-common": ">=39.2.21"
+    "@udecode/plate-common": ">=40.0.0"
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
     slate: ">=0.103.0"
@@ -6420,14 +6420,14 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@udecode/plate-comments@npm:39.0.0, @udecode/plate-comments@workspace:^, @udecode/plate-comments@workspace:packages/comments":
+"@udecode/plate-comments@npm:40.0.0, @udecode/plate-comments@workspace:^, @udecode/plate-comments@workspace:packages/comments":
   version: 0.0.0-use.local
   resolution: "@udecode/plate-comments@workspace:packages/comments"
   dependencies:
     "@udecode/plate-common": "workspace:^"
     lodash: "npm:^4.17.21"
   peerDependencies:
-    "@udecode/plate-common": ">=39.2.21"
+    "@udecode/plate-common": ">=40.0.0"
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
     slate: ">=0.103.0"
@@ -6438,16 +6438,16 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@udecode/plate-common@npm:39.2.21, @udecode/plate-common@workspace:^, @udecode/plate-common@workspace:packages/common":
+"@udecode/plate-common@npm:40.0.0, @udecode/plate-common@workspace:^, @udecode/plate-common@workspace:packages/common":
   version: 0.0.0-use.local
   resolution: "@udecode/plate-common@workspace:packages/common"
   dependencies:
-    "@udecode/plate-core": "npm:39.2.21"
-    "@udecode/plate-utils": "npm:39.2.21"
+    "@udecode/plate-core": "npm:40.0.0"
+    "@udecode/plate-utils": "npm:40.0.0"
     "@udecode/react-hotkeys": "npm:37.0.0"
     "@udecode/react-utils": "npm:39.0.0"
     "@udecode/slate": "npm:39.2.1"
-    "@udecode/slate-react": "npm:39.2.1"
+    "@udecode/slate-react": "npm:40.0.0"
     "@udecode/slate-utils": "npm:39.2.20"
     "@udecode/utils": "npm:37.0.0"
   peerDependencies:
@@ -6461,14 +6461,14 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@udecode/plate-core@npm:39.2.21, @udecode/plate-core@workspace:^, @udecode/plate-core@workspace:packages/core":
+"@udecode/plate-core@npm:40.0.0, @udecode/plate-core@workspace:^, @udecode/plate-core@workspace:packages/core":
   version: 0.0.0-use.local
   resolution: "@udecode/plate-core@workspace:packages/core"
   dependencies:
     "@udecode/react-hotkeys": "npm:37.0.0"
     "@udecode/react-utils": "npm:39.0.0"
     "@udecode/slate": "npm:39.2.1"
-    "@udecode/slate-react": "npm:39.2.1"
+    "@udecode/slate-react": "npm:40.0.0"
     "@udecode/slate-utils": "npm:39.2.20"
     "@udecode/utils": "npm:37.0.0"
     clsx: "npm:^2.1.1"
@@ -6493,16 +6493,16 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@udecode/plate-csv@npm:39.1.6, @udecode/plate-csv@workspace:^, @udecode/plate-csv@workspace:packages/csv":
+"@udecode/plate-csv@npm:40.0.0, @udecode/plate-csv@workspace:^, @udecode/plate-csv@workspace:packages/csv":
   version: 0.0.0-use.local
   resolution: "@udecode/plate-csv@workspace:packages/csv"
   dependencies:
     "@types/papaparse": "npm:^5.3.14"
     "@udecode/plate-common": "workspace:^"
-    "@udecode/plate-table": "npm:39.1.6"
+    "@udecode/plate-table": "npm:40.0.0"
     papaparse: "npm:^5.4.1"
   peerDependencies:
-    "@udecode/plate-common": ">=39.2.21"
+    "@udecode/plate-common": ">=40.0.0"
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
     slate: ">=0.103.0"
@@ -6519,7 +6519,7 @@ __metadata:
   dependencies:
     "@udecode/plate-common": "workspace:^"
   peerDependencies:
-    "@udecode/plate-common": ">=39.2.21"
+    "@udecode/plate-common": ">=40.0.0"
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
     slate: ">=0.103.0"
@@ -6536,7 +6536,7 @@ __metadata:
   dependencies:
     "@udecode/plate-common": "workspace:^"
   peerDependencies:
-    "@udecode/plate-common": ">=39.2.21"
+    "@udecode/plate-common": ">=40.0.0"
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
     slate: ">=0.94.0"
@@ -6546,7 +6546,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@udecode/plate-diff@npm:39.0.0, @udecode/plate-diff@workspace:^, @udecode/plate-diff@workspace:packages/diff":
+"@udecode/plate-diff@npm:40.0.0, @udecode/plate-diff@workspace:^, @udecode/plate-diff@workspace:packages/diff":
   version: 0.0.0-use.local
   resolution: "@udecode/plate-diff@workspace:packages/diff"
   dependencies:
@@ -6554,7 +6554,7 @@ __metadata:
     diff-match-patch-ts: "npm:^0.6.0"
     lodash: "npm:^4.17.21"
   peerDependencies:
-    "@udecode/plate-common": ">=39.2.21"
+    "@udecode/plate-common": ">=40.0.0"
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
     slate: ">=0.103.0"
@@ -6573,7 +6573,7 @@ __metadata:
     lodash: "npm:^4.17.21"
     raf: "npm:^3.4.1"
   peerDependencies:
-    "@udecode/plate-common": ">=39.2.21"
+    "@udecode/plate-common": ">=40.0.0"
     react: ">=16.8.0"
     react-dnd: ">=14.0.0"
     react-dnd-html5-backend: ">=14.0.0"
@@ -6586,19 +6586,19 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@udecode/plate-docx@npm:39.3.3, @udecode/plate-docx@workspace:^, @udecode/plate-docx@workspace:packages/docx":
+"@udecode/plate-docx@npm:40.0.0, @udecode/plate-docx@workspace:^, @udecode/plate-docx@workspace:packages/docx":
   version: 0.0.0-use.local
   resolution: "@udecode/plate-docx@workspace:packages/docx"
   dependencies:
     "@udecode/plate-common": "workspace:^"
-    "@udecode/plate-heading": "npm:39.0.0"
-    "@udecode/plate-indent": "npm:39.0.0"
-    "@udecode/plate-indent-list": "npm:39.1.10"
-    "@udecode/plate-media": "npm:39.3.3"
-    "@udecode/plate-table": "npm:39.1.6"
+    "@udecode/plate-heading": "npm:40.0.0"
+    "@udecode/plate-indent": "npm:40.0.0"
+    "@udecode/plate-indent-list": "npm:40.0.0"
+    "@udecode/plate-media": "npm:40.0.0"
+    "@udecode/plate-table": "npm:40.0.0"
     validator: "npm:^13.12.0"
   peerDependencies:
-    "@udecode/plate-common": ">=39.2.21"
+    "@udecode/plate-common": ">=40.0.0"
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
     slate: ">=0.103.0"
@@ -6614,10 +6614,10 @@ __metadata:
   resolution: "@udecode/plate-emoji@workspace:packages/emoji"
   dependencies:
     "@emoji-mart/data": "npm:^1.2.1"
-    "@udecode/plate-combobox": "npm:39.0.0"
+    "@udecode/plate-combobox": "npm:40.0.0"
     "@udecode/plate-common": "workspace:^"
   peerDependencies:
-    "@udecode/plate-common": ">=39.2.21"
+    "@udecode/plate-common": ">=40.0.0"
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
     slate: ">=0.103.0"
@@ -6635,7 +6635,7 @@ __metadata:
     "@excalidraw/excalidraw": "npm:0.16.4"
     "@udecode/plate-common": "workspace:^"
   peerDependencies:
-    "@udecode/plate-common": ">=39.2.21"
+    "@udecode/plate-common": ">=40.0.0"
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
     slate: ">=0.103.0"
@@ -6646,13 +6646,13 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@udecode/plate-find-replace@npm:39.0.0, @udecode/plate-find-replace@workspace:^, @udecode/plate-find-replace@workspace:packages/find-replace":
+"@udecode/plate-find-replace@npm:40.0.0, @udecode/plate-find-replace@workspace:^, @udecode/plate-find-replace@workspace:packages/find-replace":
   version: 0.0.0-use.local
   resolution: "@udecode/plate-find-replace@workspace:packages/find-replace"
   dependencies:
     "@udecode/plate-common": "workspace:^"
   peerDependencies:
-    "@udecode/plate-common": ">=39.2.21"
+    "@udecode/plate-common": ">=40.0.0"
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
     slate: ">=0.103.0"
@@ -6663,7 +6663,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@udecode/plate-floating@npm:39.1.6, @udecode/plate-floating@workspace:^, @udecode/plate-floating@workspace:packages/floating":
+"@udecode/plate-floating@npm:40.0.0, @udecode/plate-floating@workspace:^, @udecode/plate-floating@workspace:packages/floating":
   version: 0.0.0-use.local
   resolution: "@udecode/plate-floating@workspace:packages/floating"
   dependencies:
@@ -6671,7 +6671,7 @@ __metadata:
     "@floating-ui/react": "npm:^0.26.23"
     "@udecode/plate-common": "workspace:^"
   peerDependencies:
-    "@udecode/plate-common": ">=39.2.21"
+    "@udecode/plate-common": ">=40.0.0"
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
     slate: ">=0.103.0"
@@ -6682,14 +6682,14 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@udecode/plate-font@npm:39.0.0, @udecode/plate-font@workspace:^, @udecode/plate-font@workspace:packages/font":
+"@udecode/plate-font@npm:40.0.0, @udecode/plate-font@workspace:^, @udecode/plate-font@workspace:packages/font":
   version: 0.0.0-use.local
   resolution: "@udecode/plate-font@workspace:packages/font"
   dependencies:
     "@udecode/plate-common": "workspace:^"
     lodash: "npm:^4.17.21"
   peerDependencies:
-    "@udecode/plate-common": ">=39.2.21"
+    "@udecode/plate-common": ">=40.0.0"
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
     slate: ">=0.103.0"
@@ -6700,13 +6700,13 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@udecode/plate-heading@npm:39.0.0, @udecode/plate-heading@workspace:^, @udecode/plate-heading@workspace:packages/heading":
+"@udecode/plate-heading@npm:40.0.0, @udecode/plate-heading@workspace:^, @udecode/plate-heading@workspace:packages/heading":
   version: 0.0.0-use.local
   resolution: "@udecode/plate-heading@workspace:packages/heading"
   dependencies:
     "@udecode/plate-common": "workspace:^"
   peerDependencies:
-    "@udecode/plate-common": ">=39.2.21"
+    "@udecode/plate-common": ">=40.0.0"
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
     slate: ">=0.103.0"
@@ -6717,13 +6717,13 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@udecode/plate-highlight@npm:39.0.0, @udecode/plate-highlight@workspace:^, @udecode/plate-highlight@workspace:packages/highlight":
+"@udecode/plate-highlight@npm:40.0.0, @udecode/plate-highlight@workspace:^, @udecode/plate-highlight@workspace:packages/highlight":
   version: 0.0.0-use.local
   resolution: "@udecode/plate-highlight@workspace:packages/highlight"
   dependencies:
     "@udecode/plate-common": "workspace:^"
   peerDependencies:
-    "@udecode/plate-common": ">=39.2.21"
+    "@udecode/plate-common": ">=40.0.0"
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
     slate: ">=0.103.0"
@@ -6734,13 +6734,13 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@udecode/plate-horizontal-rule@npm:39.0.0, @udecode/plate-horizontal-rule@workspace:^, @udecode/plate-horizontal-rule@workspace:packages/horizontal-rule":
+"@udecode/plate-horizontal-rule@npm:40.0.0, @udecode/plate-horizontal-rule@workspace:^, @udecode/plate-horizontal-rule@workspace:packages/horizontal-rule":
   version: 0.0.0-use.local
   resolution: "@udecode/plate-horizontal-rule@workspace:packages/horizontal-rule"
   dependencies:
     "@udecode/plate-common": "workspace:^"
   peerDependencies:
-    "@udecode/plate-common": ">=39.2.21"
+    "@udecode/plate-common": ">=40.0.0"
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
     slate: ">=0.103.0"
@@ -6751,7 +6751,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@udecode/plate-html@npm:39.0.0, @udecode/plate-html@workspace:^, @udecode/plate-html@workspace:packages/html":
+"@udecode/plate-html@npm:40.0.0, @udecode/plate-html@workspace:^, @udecode/plate-html@workspace:packages/html":
   version: 0.0.0-use.local
   resolution: "@udecode/plate-html@workspace:packages/html"
   dependencies:
@@ -6759,7 +6759,7 @@ __metadata:
     "@udecode/plate-common": "workspace:^"
     html-entities: "npm:^2.5.2"
   peerDependencies:
-    "@udecode/plate-common": ">=39.2.21"
+    "@udecode/plate-common": ">=40.0.0"
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
     slate: ">=0.103.0"
@@ -6770,16 +6770,16 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@udecode/plate-indent-list@npm:39.1.10, @udecode/plate-indent-list@workspace:^, @udecode/plate-indent-list@workspace:packages/indent-list":
+"@udecode/plate-indent-list@npm:40.0.0, @udecode/plate-indent-list@workspace:^, @udecode/plate-indent-list@workspace:packages/indent-list":
   version: 0.0.0-use.local
   resolution: "@udecode/plate-indent-list@workspace:packages/indent-list"
   dependencies:
     "@udecode/plate-common": "workspace:^"
-    "@udecode/plate-indent": "npm:39.0.0"
-    "@udecode/plate-list": "npm:39.0.0"
+    "@udecode/plate-indent": "npm:40.0.0"
+    "@udecode/plate-list": "npm:40.0.0"
     clsx: "npm:^2.1.1"
   peerDependencies:
-    "@udecode/plate-common": ">=39.2.21"
+    "@udecode/plate-common": ">=40.0.0"
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
     slate: ">=0.103.0"
@@ -6790,13 +6790,13 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@udecode/plate-indent@npm:39.0.0, @udecode/plate-indent@workspace:^, @udecode/plate-indent@workspace:packages/indent":
+"@udecode/plate-indent@npm:40.0.0, @udecode/plate-indent@workspace:^, @udecode/plate-indent@workspace:packages/indent":
   version: 0.0.0-use.local
   resolution: "@udecode/plate-indent@workspace:packages/indent"
   dependencies:
     "@udecode/plate-common": "workspace:^"
   peerDependencies:
-    "@udecode/plate-common": ">=39.2.21"
+    "@udecode/plate-common": ">=40.0.0"
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
     slate: ">=0.103.0"
@@ -6814,7 +6814,7 @@ __metadata:
     "@udecode/plate-common": "workspace:^"
     juice: "npm:^8.1.0"
   peerDependencies:
-    "@udecode/plate-common": ">=39.2.21"
+    "@udecode/plate-common": ">=40.0.0"
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
     slate: ">=0.103.0"
@@ -6825,13 +6825,13 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@udecode/plate-kbd@npm:39.0.0, @udecode/plate-kbd@workspace:^, @udecode/plate-kbd@workspace:packages/kbd":
+"@udecode/plate-kbd@npm:40.0.0, @udecode/plate-kbd@workspace:^, @udecode/plate-kbd@workspace:packages/kbd":
   version: 0.0.0-use.local
   resolution: "@udecode/plate-kbd@workspace:packages/kbd"
   dependencies:
     "@udecode/plate-common": "workspace:^"
   peerDependencies:
-    "@udecode/plate-common": ">=39.2.21"
+    "@udecode/plate-common": ">=40.0.0"
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
     slate: ">=0.103.0"
@@ -6842,13 +6842,13 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@udecode/plate-layout@npm:39.0.0, @udecode/plate-layout@workspace:^, @udecode/plate-layout@workspace:packages/layout":
+"@udecode/plate-layout@npm:40.0.0, @udecode/plate-layout@workspace:^, @udecode/plate-layout@workspace:packages/layout":
   version: 0.0.0-use.local
   resolution: "@udecode/plate-layout@workspace:packages/layout"
   dependencies:
     "@udecode/plate-common": "workspace:^"
   peerDependencies:
-    "@udecode/plate-common": ">=39.2.21"
+    "@udecode/plate-common": ">=40.0.0"
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
     slate: ">=0.103.0"
@@ -6859,13 +6859,13 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@udecode/plate-line-height@npm:39.0.0, @udecode/plate-line-height@workspace:^, @udecode/plate-line-height@workspace:packages/line-height":
+"@udecode/plate-line-height@npm:40.0.0, @udecode/plate-line-height@workspace:^, @udecode/plate-line-height@workspace:packages/line-height":
   version: 0.0.0-use.local
   resolution: "@udecode/plate-line-height@workspace:packages/line-height"
   dependencies:
     "@udecode/plate-common": "workspace:^"
   peerDependencies:
-    "@udecode/plate-common": ">=39.2.21"
+    "@udecode/plate-common": ">=40.0.0"
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
     slate: ">=0.103.0"
@@ -6876,15 +6876,15 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@udecode/plate-link@npm:39.1.9, @udecode/plate-link@workspace:^, @udecode/plate-link@workspace:packages/link":
+"@udecode/plate-link@npm:40.0.0, @udecode/plate-link@workspace:^, @udecode/plate-link@workspace:packages/link":
   version: 0.0.0-use.local
   resolution: "@udecode/plate-link@workspace:packages/link"
   dependencies:
     "@udecode/plate-common": "workspace:^"
-    "@udecode/plate-floating": "npm:39.1.6"
-    "@udecode/plate-normalizers": "npm:39.0.0"
+    "@udecode/plate-floating": "npm:40.0.0"
+    "@udecode/plate-normalizers": "npm:40.0.0"
   peerDependencies:
-    "@udecode/plate-common": ">=39.2.21"
+    "@udecode/plate-common": ">=40.0.0"
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
     slate: ">=0.103.0"
@@ -6895,15 +6895,15 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@udecode/plate-list@npm:39.0.0, @udecode/plate-list@workspace:^, @udecode/plate-list@workspace:packages/list":
+"@udecode/plate-list@npm:40.0.0, @udecode/plate-list@workspace:^, @udecode/plate-list@workspace:packages/list":
   version: 0.0.0-use.local
   resolution: "@udecode/plate-list@workspace:packages/list"
   dependencies:
     "@udecode/plate-common": "workspace:^"
-    "@udecode/plate-reset-node": "npm:39.0.0"
+    "@udecode/plate-reset-node": "npm:40.0.0"
     lodash: "npm:^4.17.21"
   peerDependencies:
-    "@udecode/plate-common": ">=39.2.21"
+    "@udecode/plate-common": ">=40.0.0"
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
     slate: ">=0.103.0"
@@ -6914,7 +6914,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@udecode/plate-markdown@npm:39.2.0, @udecode/plate-markdown@workspace:^, @udecode/plate-markdown@workspace:packages/markdown":
+"@udecode/plate-markdown@npm:40.0.0, @udecode/plate-markdown@workspace:^, @udecode/plate-markdown@workspace:packages/markdown":
   version: 0.0.0-use.local
   resolution: "@udecode/plate-markdown@workspace:packages/markdown"
   dependencies:
@@ -6924,7 +6924,7 @@ __metadata:
     remark-parse: "npm:^9.0.0"
     unified: "npm:^11.0.5"
   peerDependencies:
-    "@udecode/plate-common": ">=39.2.21"
+    "@udecode/plate-common": ">=40.0.0"
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
     slate: ">=0.103.0"
@@ -6943,7 +6943,7 @@ __metadata:
     "@udecode/plate-common": "workspace:^"
     katex: "npm:0.16.11"
   peerDependencies:
-    "@udecode/plate-common": ">=39.2.21"
+    "@udecode/plate-common": ">=40.0.0"
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
     slate: ">=0.103.0"
@@ -6954,14 +6954,14 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@udecode/plate-media@npm:39.3.3, @udecode/plate-media@workspace:^, @udecode/plate-media@workspace:packages/media":
+"@udecode/plate-media@npm:40.0.0, @udecode/plate-media@workspace:^, @udecode/plate-media@workspace:packages/media":
   version: 0.0.0-use.local
   resolution: "@udecode/plate-media@workspace:packages/media"
   dependencies:
     "@udecode/plate-common": "workspace:^"
     js-video-url-parser: "npm:^0.5.1"
   peerDependencies:
-    "@udecode/plate-common": ">=39.2.21"
+    "@udecode/plate-common": ">=40.0.0"
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
     slate: ">=0.103.0"
@@ -6972,14 +6972,14 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@udecode/plate-mention@npm:39.3.4, @udecode/plate-mention@workspace:^, @udecode/plate-mention@workspace:packages/mention":
+"@udecode/plate-mention@npm:40.0.0, @udecode/plate-mention@workspace:^, @udecode/plate-mention@workspace:packages/mention":
   version: 0.0.0-use.local
   resolution: "@udecode/plate-mention@workspace:packages/mention"
   dependencies:
-    "@udecode/plate-combobox": "npm:39.0.0"
+    "@udecode/plate-combobox": "npm:40.0.0"
     "@udecode/plate-common": "workspace:^"
   peerDependencies:
-    "@udecode/plate-common": ">=39.2.21"
+    "@udecode/plate-common": ">=40.0.0"
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
     slate: ">=0.103.0"
@@ -6990,14 +6990,14 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@udecode/plate-node-id@npm:39.0.0, @udecode/plate-node-id@workspace:^, @udecode/plate-node-id@workspace:packages/node-id":
+"@udecode/plate-node-id@npm:40.0.0, @udecode/plate-node-id@workspace:^, @udecode/plate-node-id@workspace:packages/node-id":
   version: 0.0.0-use.local
   resolution: "@udecode/plate-node-id@workspace:packages/node-id"
   dependencies:
     "@udecode/plate-common": "workspace:^"
     lodash: "npm:^4.17.21"
   peerDependencies:
-    "@udecode/plate-common": ">=39.2.21"
+    "@udecode/plate-common": ">=40.0.0"
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
     slate: ">=0.103.0"
@@ -7008,14 +7008,14 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@udecode/plate-normalizers@npm:39.0.0, @udecode/plate-normalizers@workspace:^, @udecode/plate-normalizers@workspace:packages/normalizers":
+"@udecode/plate-normalizers@npm:40.0.0, @udecode/plate-normalizers@workspace:^, @udecode/plate-normalizers@workspace:packages/normalizers":
   version: 0.0.0-use.local
   resolution: "@udecode/plate-normalizers@workspace:packages/normalizers"
   dependencies:
     "@udecode/plate-common": "workspace:^"
     lodash: "npm:^4.17.21"
   peerDependencies:
-    "@udecode/plate-common": ">=39.2.21"
+    "@udecode/plate-common": ">=40.0.0"
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
     slate: ">=0.103.0"
@@ -7033,7 +7033,7 @@ __metadata:
     "@udecode/plate-common": "workspace:^"
   peerDependencies:
     "@playwright/test": ">=1.42.1"
-    "@udecode/plate-common": ">=39.2.21"
+    "@udecode/plate-common": ">=40.0.0"
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
     slate: ">=0.103.0"
@@ -7044,13 +7044,13 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@udecode/plate-reset-node@npm:39.0.0, @udecode/plate-reset-node@workspace:^, @udecode/plate-reset-node@workspace:packages/reset-node":
+"@udecode/plate-reset-node@npm:40.0.0, @udecode/plate-reset-node@workspace:^, @udecode/plate-reset-node@workspace:packages/reset-node":
   version: 0.0.0-use.local
   resolution: "@udecode/plate-reset-node@workspace:packages/reset-node"
   dependencies:
     "@udecode/plate-common": "workspace:^"
   peerDependencies:
-    "@udecode/plate-common": ">=39.2.21"
+    "@udecode/plate-common": ">=40.0.0"
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
     slate: ">=0.103.0"
@@ -7061,13 +7061,13 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@udecode/plate-resizable@npm:39.1.6, @udecode/plate-resizable@workspace:^, @udecode/plate-resizable@workspace:packages/resizable":
+"@udecode/plate-resizable@npm:40.0.0, @udecode/plate-resizable@workspace:^, @udecode/plate-resizable@workspace:packages/resizable":
   version: 0.0.0-use.local
   resolution: "@udecode/plate-resizable@workspace:packages/resizable"
   dependencies:
     "@udecode/plate-common": "workspace:^"
   peerDependencies:
-    "@udecode/plate-common": ">=39.2.21"
+    "@udecode/plate-common": ">=40.0.0"
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
     slate: ">=0.103.0"
@@ -7078,13 +7078,13 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@udecode/plate-select@npm:39.0.0, @udecode/plate-select@workspace:^, @udecode/plate-select@workspace:packages/select":
+"@udecode/plate-select@npm:40.0.0, @udecode/plate-select@workspace:^, @udecode/plate-select@workspace:packages/select":
   version: 0.0.0-use.local
   resolution: "@udecode/plate-select@workspace:packages/select"
   dependencies:
     "@udecode/plate-common": "workspace:^"
   peerDependencies:
-    "@udecode/plate-common": ">=39.2.21"
+    "@udecode/plate-common": ">=40.0.0"
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
     slate: ">=0.103.0"
@@ -7095,14 +7095,14 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@udecode/plate-selection@npm:39.3.7, @udecode/plate-selection@workspace:^, @udecode/plate-selection@workspace:packages/selection":
+"@udecode/plate-selection@npm:40.0.0, @udecode/plate-selection@workspace:^, @udecode/plate-selection@workspace:packages/selection":
   version: 0.0.0-use.local
   resolution: "@udecode/plate-selection@workspace:packages/selection"
   dependencies:
     "@udecode/plate-common": "workspace:^"
     copy-to-clipboard: "npm:^3.3.3"
   peerDependencies:
-    "@udecode/plate-common": ">=39.2.21"
+    "@udecode/plate-common": ">=40.0.0"
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
     slate: ">=0.103.0"
@@ -7113,14 +7113,14 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@udecode/plate-slash-command@npm:39.0.0, @udecode/plate-slash-command@workspace:^, @udecode/plate-slash-command@workspace:packages/slash-command":
+"@udecode/plate-slash-command@npm:40.0.0, @udecode/plate-slash-command@workspace:^, @udecode/plate-slash-command@workspace:packages/slash-command":
   version: 0.0.0-use.local
   resolution: "@udecode/plate-slash-command@workspace:packages/slash-command"
   dependencies:
-    "@udecode/plate-combobox": "npm:39.0.0"
+    "@udecode/plate-combobox": "npm:40.0.0"
     "@udecode/plate-common": "workspace:^"
   peerDependencies:
-    "@udecode/plate-common": ">=39.2.21"
+    "@udecode/plate-common": ">=40.0.0"
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
     slate: ">=0.103.0"
@@ -7131,15 +7131,15 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@udecode/plate-suggestion@npm:39.0.0, @udecode/plate-suggestion@workspace:^, @udecode/plate-suggestion@workspace:packages/suggestion":
+"@udecode/plate-suggestion@npm:40.0.0, @udecode/plate-suggestion@workspace:^, @udecode/plate-suggestion@workspace:packages/suggestion":
   version: 0.0.0-use.local
   resolution: "@udecode/plate-suggestion@workspace:packages/suggestion"
   dependencies:
     "@udecode/plate-common": "workspace:^"
-    "@udecode/plate-diff": "npm:39.0.0"
+    "@udecode/plate-diff": "npm:40.0.0"
     lodash: "npm:^4.17.21"
   peerDependencies:
-    "@udecode/plate-common": ">=39.2.21"
+    "@udecode/plate-common": ">=40.0.0"
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
     slate: ">=0.103.0"
@@ -7150,14 +7150,14 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@udecode/plate-tabbable@npm:39.0.0, @udecode/plate-tabbable@workspace:^, @udecode/plate-tabbable@workspace:packages/tabbable":
+"@udecode/plate-tabbable@npm:40.0.0, @udecode/plate-tabbable@workspace:^, @udecode/plate-tabbable@workspace:packages/tabbable":
   version: 0.0.0-use.local
   resolution: "@udecode/plate-tabbable@workspace:packages/tabbable"
   dependencies:
     "@udecode/plate-common": "workspace:^"
     tabbable: "npm:^6.2.0"
   peerDependencies:
-    "@udecode/plate-common": ">=39.2.21"
+    "@udecode/plate-common": ">=40.0.0"
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
     slate: ">=0.103.0"
@@ -7168,15 +7168,15 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@udecode/plate-table@npm:39.1.6, @udecode/plate-table@workspace:^, @udecode/plate-table@workspace:packages/table":
+"@udecode/plate-table@npm:40.0.0, @udecode/plate-table@workspace:^, @udecode/plate-table@workspace:packages/table":
   version: 0.0.0-use.local
   resolution: "@udecode/plate-table@workspace:packages/table"
   dependencies:
     "@udecode/plate-common": "workspace:^"
-    "@udecode/plate-resizable": "npm:39.1.6"
+    "@udecode/plate-resizable": "npm:40.0.0"
     lodash: "npm:^4.17.21"
   peerDependencies:
-    "@udecode/plate-common": ">=39.2.21"
+    "@udecode/plate-common": ">=40.0.0"
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
     slate: ">=0.103.0"
@@ -7195,16 +7195,16 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@udecode/plate-toggle@npm:39.0.0, @udecode/plate-toggle@workspace:^, @udecode/plate-toggle@workspace:packages/toggle":
+"@udecode/plate-toggle@npm:40.0.0, @udecode/plate-toggle@workspace:^, @udecode/plate-toggle@workspace:packages/toggle":
   version: 0.0.0-use.local
   resolution: "@udecode/plate-toggle@workspace:packages/toggle"
   dependencies:
     "@udecode/plate-common": "workspace:^"
-    "@udecode/plate-indent": "npm:39.0.0"
-    "@udecode/plate-node-id": "npm:39.0.0"
+    "@udecode/plate-indent": "npm:40.0.0"
+    "@udecode/plate-node-id": "npm:40.0.0"
     lodash: "npm:^4.17.21"
   peerDependencies:
-    "@udecode/plate-common": ">=39.2.21"
+    "@udecode/plate-common": ">=40.0.0"
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
     slate: ">=0.103.0"
@@ -7215,13 +7215,13 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@udecode/plate-trailing-block@npm:39.0.0, @udecode/plate-trailing-block@workspace:^, @udecode/plate-trailing-block@workspace:packages/trailing-block":
+"@udecode/plate-trailing-block@npm:40.0.0, @udecode/plate-trailing-block@workspace:^, @udecode/plate-trailing-block@workspace:packages/trailing-block":
   version: 0.0.0-use.local
   resolution: "@udecode/plate-trailing-block@workspace:packages/trailing-block"
   dependencies:
     "@udecode/plate-common": "workspace:^"
   peerDependencies:
-    "@udecode/plate-common": ">=39.2.21"
+    "@udecode/plate-common": ">=40.0.0"
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
     slate: ">=0.103.0"
@@ -7232,14 +7232,14 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@udecode/plate-utils@npm:39.2.21, @udecode/plate-utils@workspace:^, @udecode/plate-utils@workspace:packages/plate-utils":
+"@udecode/plate-utils@npm:40.0.0, @udecode/plate-utils@workspace:^, @udecode/plate-utils@workspace:packages/plate-utils":
   version: 0.0.0-use.local
   resolution: "@udecode/plate-utils@workspace:packages/plate-utils"
   dependencies:
-    "@udecode/plate-core": "npm:39.2.21"
+    "@udecode/plate-core": "npm:40.0.0"
     "@udecode/react-utils": "npm:39.0.0"
     "@udecode/slate": "npm:39.2.1"
-    "@udecode/slate-react": "npm:39.2.1"
+    "@udecode/slate-react": "npm:40.0.0"
     "@udecode/slate-utils": "npm:39.2.20"
     "@udecode/utils": "npm:37.0.0"
     clsx: "npm:^2.1.1"
@@ -7263,7 +7263,7 @@ __metadata:
     "@udecode/plate-common": "workspace:^"
     yjs: "npm:^13.6.19"
   peerDependencies:
-    "@udecode/plate-common": ">=39.2.21"
+    "@udecode/plate-common": ">=40.0.0"
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
     slate: ">=0.103.0"
@@ -7278,48 +7278,48 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@udecode/plate@workspace:packages/plate"
   dependencies:
-    "@udecode/plate-alignment": "npm:39.0.0"
-    "@udecode/plate-autoformat": "npm:39.0.0"
-    "@udecode/plate-basic-elements": "npm:39.0.0"
-    "@udecode/plate-basic-marks": "npm:39.0.0"
-    "@udecode/plate-block-quote": "npm:39.0.0"
-    "@udecode/plate-break": "npm:39.0.0"
-    "@udecode/plate-code-block": "npm:39.0.0"
-    "@udecode/plate-combobox": "npm:39.0.0"
-    "@udecode/plate-comments": "npm:39.0.0"
-    "@udecode/plate-common": "npm:39.2.21"
-    "@udecode/plate-csv": "npm:39.1.6"
-    "@udecode/plate-diff": "npm:39.0.0"
-    "@udecode/plate-docx": "npm:39.3.3"
-    "@udecode/plate-find-replace": "npm:39.0.0"
-    "@udecode/plate-floating": "npm:39.1.6"
-    "@udecode/plate-font": "npm:39.0.0"
-    "@udecode/plate-heading": "npm:39.0.0"
-    "@udecode/plate-highlight": "npm:39.0.0"
-    "@udecode/plate-horizontal-rule": "npm:39.0.0"
-    "@udecode/plate-html": "npm:39.0.0"
-    "@udecode/plate-indent": "npm:39.0.0"
-    "@udecode/plate-indent-list": "npm:39.1.10"
-    "@udecode/plate-kbd": "npm:39.0.0"
-    "@udecode/plate-layout": "npm:39.0.0"
-    "@udecode/plate-line-height": "npm:39.0.0"
-    "@udecode/plate-link": "npm:39.1.9"
-    "@udecode/plate-list": "npm:39.0.0"
-    "@udecode/plate-markdown": "npm:39.2.0"
-    "@udecode/plate-media": "npm:39.3.3"
-    "@udecode/plate-mention": "npm:39.3.4"
-    "@udecode/plate-node-id": "npm:39.0.0"
-    "@udecode/plate-normalizers": "npm:39.0.0"
-    "@udecode/plate-reset-node": "npm:39.0.0"
-    "@udecode/plate-resizable": "npm:39.1.6"
-    "@udecode/plate-select": "npm:39.0.0"
-    "@udecode/plate-selection": "npm:39.3.7"
-    "@udecode/plate-slash-command": "npm:39.0.0"
-    "@udecode/plate-suggestion": "npm:39.0.0"
-    "@udecode/plate-tabbable": "npm:39.0.0"
-    "@udecode/plate-table": "npm:39.1.6"
-    "@udecode/plate-toggle": "npm:39.0.0"
-    "@udecode/plate-trailing-block": "npm:39.0.0"
+    "@udecode/plate-alignment": "npm:40.0.0"
+    "@udecode/plate-autoformat": "npm:40.0.0"
+    "@udecode/plate-basic-elements": "npm:40.0.0"
+    "@udecode/plate-basic-marks": "npm:40.0.0"
+    "@udecode/plate-block-quote": "npm:40.0.0"
+    "@udecode/plate-break": "npm:40.0.0"
+    "@udecode/plate-code-block": "npm:40.0.0"
+    "@udecode/plate-combobox": "npm:40.0.0"
+    "@udecode/plate-comments": "npm:40.0.0"
+    "@udecode/plate-common": "npm:40.0.0"
+    "@udecode/plate-csv": "npm:40.0.0"
+    "@udecode/plate-diff": "npm:40.0.0"
+    "@udecode/plate-docx": "npm:40.0.0"
+    "@udecode/plate-find-replace": "npm:40.0.0"
+    "@udecode/plate-floating": "npm:40.0.0"
+    "@udecode/plate-font": "npm:40.0.0"
+    "@udecode/plate-heading": "npm:40.0.0"
+    "@udecode/plate-highlight": "npm:40.0.0"
+    "@udecode/plate-horizontal-rule": "npm:40.0.0"
+    "@udecode/plate-html": "npm:40.0.0"
+    "@udecode/plate-indent": "npm:40.0.0"
+    "@udecode/plate-indent-list": "npm:40.0.0"
+    "@udecode/plate-kbd": "npm:40.0.0"
+    "@udecode/plate-layout": "npm:40.0.0"
+    "@udecode/plate-line-height": "npm:40.0.0"
+    "@udecode/plate-link": "npm:40.0.0"
+    "@udecode/plate-list": "npm:40.0.0"
+    "@udecode/plate-markdown": "npm:40.0.0"
+    "@udecode/plate-media": "npm:40.0.0"
+    "@udecode/plate-mention": "npm:40.0.0"
+    "@udecode/plate-node-id": "npm:40.0.0"
+    "@udecode/plate-normalizers": "npm:40.0.0"
+    "@udecode/plate-reset-node": "npm:40.0.0"
+    "@udecode/plate-resizable": "npm:40.0.0"
+    "@udecode/plate-select": "npm:40.0.0"
+    "@udecode/plate-selection": "npm:40.0.0"
+    "@udecode/plate-slash-command": "npm:40.0.0"
+    "@udecode/plate-suggestion": "npm:40.0.0"
+    "@udecode/plate-tabbable": "npm:40.0.0"
+    "@udecode/plate-table": "npm:40.0.0"
+    "@udecode/plate-toggle": "npm:40.0.0"
+    "@udecode/plate-trailing-block": "npm:40.0.0"
   peerDependencies:
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
@@ -7353,7 +7353,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@udecode/slate-react@npm:39.2.1, @udecode/slate-react@workspace:^, @udecode/slate-react@workspace:packages/slate-react":
+"@udecode/slate-react@npm:40.0.0, @udecode/slate-react@workspace:^, @udecode/slate-react@workspace:packages/slate-react":
   version: 0.0.0-use.local
   resolution: "@udecode/slate-react@workspace:packages/slate-react"
   dependencies:

From a63c4c82db8565a28424d5aabf2f787638ad99be Mon Sep 17 00:00:00 2001
From: Felix Feng <felixfeng33@gmail.com>
Date: Wed, 13 Nov 2024 20:57:37 +0800
Subject: [PATCH 10/34] fix

---
 apps/www/src/app/api/uploadthing/core.ts      |  26 ----
 apps/www/src/app/api/uploadthing/route.ts     |  11 --
 .../components/editor/plugins/dnd-plugins.tsx |   9 +-
 .../default/example/playground-demo.tsx       |   5 +-
 .../registry/default/lib/uploadthing/index.ts |   1 -
 .../default/lib/uploadthing/uploadthing.ts    |   6 -
 .../lib/uploadthing/use-upload-file.ts        |  54 ++++----
 .../plate-ui/fixed-toolbar-buttons.tsx        |  13 +-
 .../plate-ui/fixed-toolbar-list-buttons.tsx   |   5 +-
 .../plate-ui/media-floating-toolbar.tsx       |  57 ++++++++
 .../default/plate-ui/media-toolbar-button.tsx | 107 +++++++--------
 .../src/registry/default/plate-ui/toolbar.tsx | 122 ++++++++++++++++++
 12 files changed, 272 insertions(+), 144 deletions(-)
 delete mode 100644 apps/www/src/app/api/uploadthing/core.ts
 delete mode 100644 apps/www/src/app/api/uploadthing/route.ts
 delete mode 100644 apps/www/src/registry/default/lib/uploadthing/uploadthing.ts
 create mode 100644 apps/www/src/registry/default/plate-ui/media-floating-toolbar.tsx

diff --git a/apps/www/src/app/api/uploadthing/core.ts b/apps/www/src/app/api/uploadthing/core.ts
deleted file mode 100644
index 3233c7cb10..0000000000
--- a/apps/www/src/app/api/uploadthing/core.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import type { FileRouter } from 'uploadthing/next';
-
-import { createUploadthing } from 'uploadthing/next';
-
-const f = createUploadthing();
-
-// FileRouter for your app, can contain multiple FileRoutes
-export const ourFileRouter = {
-  // Define as many FileRoutes as you like, each with a unique routeSlug
-  imageUploader: f(['image', 'text', 'blob', 'pdf', 'video', 'audio'])
-    // Set permissions and file types for this FileRoute
-    .middleware(async ({ req }) => {
-      // This code runs on your server before upload
-
-      // Whatever is returned here is accessible in onUploadComplete as `metadata`
-      return {};
-    })
-    .onUploadComplete(({ file, metadata }) => {
-      // This code RUNS ON YOUR SERVER after upload
-
-      // !!! Whatever is returned here is sent to the clientside `onClientUploadComplete` callback
-      return { file };
-    }),
-} satisfies FileRouter;
-
-export type OurFileRouter = typeof ourFileRouter;
diff --git a/apps/www/src/app/api/uploadthing/route.ts b/apps/www/src/app/api/uploadthing/route.ts
deleted file mode 100644
index 379d038d96..0000000000
--- a/apps/www/src/app/api/uploadthing/route.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { createRouteHandler } from 'uploadthing/next';
-
-import { ourFileRouter } from './core';
-
-// Export routes for Next App Router
-export const { GET, POST } = createRouteHandler({
-  router: ourFileRouter,
-
-  // Apply an (optional) custom config:
-  // config: { ... },
-});
diff --git a/apps/www/src/registry/default/components/editor/plugins/dnd-plugins.tsx b/apps/www/src/registry/default/components/editor/plugins/dnd-plugins.tsx
index 6b0db41ba1..f5569c0f58 100644
--- a/apps/www/src/registry/default/components/editor/plugins/dnd-plugins.tsx
+++ b/apps/www/src/registry/default/components/editor/plugins/dnd-plugins.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import { DndPlugin } from '@udecode/plate-dnd';
-import { ImagePlugin } from '@udecode/plate-media/react';
+import { PlaceholderPlugin } from '@udecode/plate-media/react';
 import { NodeIdPlugin } from '@udecode/plate-node-id';
 
 export const dndPlugins = [
@@ -11,11 +11,8 @@ export const dndPlugins = [
       enableScroller: true,
       onDropFiles: ({ dragItem, editor, target }) => {
         editor
-          .getTransforms(ImagePlugin)
-          .insert.imageFromFiles(dragItem.files, {
-            at: target,
-            nextBlock: false,
-          });
+          .getTransforms(PlaceholderPlugin)
+          .insert.media(dragItem.files, { at: target, nextBlock: false });
       },
     },
   }),
diff --git a/apps/www/src/registry/default/example/playground-demo.tsx b/apps/www/src/registry/default/example/playground-demo.tsx
index 3a79108184..db5b47c0cd 100644
--- a/apps/www/src/registry/default/example/playground-demo.tsx
+++ b/apps/www/src/registry/default/example/playground-demo.tsx
@@ -30,6 +30,7 @@ import { tabbablePlugin } from '@/registry/default/components/editor/plugins/tab
 import { Editor, EditorContainer } from '@/registry/default/plate-ui/editor';
 import { MediaPlaceholderElement } from '@/registry/default/plate-ui/media-placeholder-element';
 
+import { MediaFloatingToolbar } from '../plate-ui/media-floating-toolbar';
 import { usePlaygroundEnabled } from './usePlaygroundEnabled';
 
 export const usePlaygroundEditor = (id: any = '') => {
@@ -60,7 +61,9 @@ export const usePlaygroundEditor = (id: any = '') => {
       },
     }),
     SingleLinePlugin,
-    PlaceholderPlugin.withComponent(MediaPlaceholderElement),
+    PlaceholderPlugin.withComponent(MediaPlaceholderElement).configure({
+      render: { afterEditable: () => <MediaFloatingToolbar /> },
+    }),
     // Testing
     PlaywrightPlugin.configure({
       enabled: process.env.NODE_ENV !== 'production',
diff --git a/apps/www/src/registry/default/lib/uploadthing/index.ts b/apps/www/src/registry/default/lib/uploadthing/index.ts
index 55dcc822a3..b8e8734c65 100644
--- a/apps/www/src/registry/default/lib/uploadthing/index.ts
+++ b/apps/www/src/registry/default/lib/uploadthing/index.ts
@@ -1,5 +1,4 @@
 export * from './handle-error';
 
-export * from './uploadthing';
 
 export * from './use-upload-file';
diff --git a/apps/www/src/registry/default/lib/uploadthing/uploadthing.ts b/apps/www/src/registry/default/lib/uploadthing/uploadthing.ts
deleted file mode 100644
index 90f48864d6..0000000000
--- a/apps/www/src/registry/default/lib/uploadthing/uploadthing.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import type { OurFileRouter } from '@/app/api/uploadthing/core';
-
-import { generateReactHelpers } from '@uploadthing/react';
-
-export const { uploadFiles, useUploadThing } =
-  generateReactHelpers<OurFileRouter>();
diff --git a/apps/www/src/registry/default/lib/uploadthing/use-upload-file.ts b/apps/www/src/registry/default/lib/uploadthing/use-upload-file.ts
index d4d62b6aef..bbf76aebb2 100644
--- a/apps/www/src/registry/default/lib/uploadthing/use-upload-file.ts
+++ b/apps/www/src/registry/default/lib/uploadthing/use-upload-file.ts
@@ -1,31 +1,14 @@
 import * as React from 'react';
 
-import type { OurFileRouter } from '@/app/api/uploadthing/core';
-import type {
-  ClientUploadedFileData,
-  UploadFilesOptions,
-} from 'uploadthing/types';
+import type { ClientUploadedFileData } from 'uploadthing/types';
 
 import { toast } from 'sonner';
 
 import { getErrorMessage } from './handle-error';
-import { uploadFiles } from './uploadthing';
 
 export interface UploadedFile<T = unknown> extends ClientUploadedFileData<T> {}
 
-interface UseUploadFileProps
-  extends Pick<
-    UploadFilesOptions<OurFileRouter, keyof OurFileRouter>,
-    'headers' | 'onUploadBegin' | 'onUploadProgress' | 'skipPolling'
-  > {
-  onUploadComplete?: (file: UploadedFile) => void;
-  onUploadError?: (error: unknown) => void;
-}
-
-export function useUploadFile(
-  endpoint: keyof OurFileRouter,
-  { onUploadComplete, onUploadError, ...props }: UseUploadFileProps = {}
-) {
+export function useUploadFile() {
   const [uploadedFile, setUploadedFile] = React.useState<UploadedFile>();
   const [uploadingFile, setUploadingFile] = React.useState<File>();
   const [progress, setProgress] = React.useState<number>(0);
@@ -36,19 +19,33 @@ export function useUploadFile(
     setUploadingFile(file);
 
     try {
-      const res = await uploadFiles(endpoint, {
-        ...props,
-        files: [file],
-        onUploadProgress: ({ progress }) => {
+      // Mock upload for unauthenticated users
+      // toast.info('User not logged in. Mocking upload process.');
+      const mockUploadedFile = {
+        key: 'mock-key-0',
+        appUrl: `https://mock-app-url.com/${file.name}`,
+        name: file.name,
+        size: file.size,
+        type: file.type,
+        url: URL.createObjectURL(file),
+      } as UploadedFile;
+
+      // Simulate upload progress
+      let progress = 0;
+
+      const simulateProgress = async () => {
+        while (progress < 100) {
+          await new Promise((resolve) => setTimeout(resolve, 100));
+          progress += 2;
           setProgress(Math.min(progress, 100));
-        },
-      });
+        }
+      };
 
-      setUploadedFile(res[0]);
+      await simulateProgress();
 
-      onUploadComplete?.(res[0]);
+      setUploadedFile(mockUploadedFile);
 
-      return uploadedFile;
+      return mockUploadedFile;
     } catch (error) {
       const errorMessage = getErrorMessage(error);
 
@@ -58,7 +55,6 @@ export function useUploadFile(
           : 'Something went wrong, please try again later.';
 
       toast.error(message);
-      onUploadError?.(error);
     } finally {
       setProgress(0);
       setIsUploading(false);
diff --git a/apps/www/src/registry/default/plate-ui/fixed-toolbar-buttons.tsx b/apps/www/src/registry/default/plate-ui/fixed-toolbar-buttons.tsx
index 107fcb6f11..fb6f549992 100644
--- a/apps/www/src/registry/default/plate-ui/fixed-toolbar-buttons.tsx
+++ b/apps/www/src/registry/default/plate-ui/fixed-toolbar-buttons.tsx
@@ -15,12 +15,6 @@ import {
   FontColorPlugin,
 } from '@udecode/plate-font/react';
 import { ListStyleType } from '@udecode/plate-indent-list';
-import {
-  AudioPlugin,
-  FilePlugin,
-  ImagePlugin,
-  VideoPlugin,
-} from '@udecode/plate-media/react';
 import {
   BaselineIcon,
   BoldIcon,
@@ -44,7 +38,7 @@ import { InsertDropdownMenu } from './insert-dropdown-menu';
 import { LineHeightDropdownMenu } from './line-height-dropdown-menu';
 import { LinkToolbarButton } from './link-toolbar-button';
 import { MarkToolbarButton } from './mark-toolbar-button';
-import { MediaToolbarButton } from './media-toolbar-button';
+import { ImageDropdownMenu } from './media-toolbar-button';
 import { ModeDropdownMenu } from './mode-dropdown-menu';
 import { MoreDropdownMenu } from './more-dropdown-menu';
 import { OutdentToolbarButton } from './outdent-toolbar-button';
@@ -141,10 +135,11 @@ export function FixedToolbarButtons() {
           </ToolbarGroup>
 
           <ToolbarGroup>
-            <MediaToolbarButton nodeType={ImagePlugin.key} />
+            <ImageDropdownMenu />
+            {/* <MediaToolbarButton nodeType={ImagePlugin.key} />
             <MediaToolbarButton nodeType={VideoPlugin.key} />
             <MediaToolbarButton nodeType={AudioPlugin.key} />
-            <MediaToolbarButton nodeType={FilePlugin.key} />
+            <MediaToolbarButton nodeType={FilePlugin.key} /> */}
           </ToolbarGroup>
 
           <ToolbarGroup>
diff --git a/apps/www/src/registry/default/plate-ui/fixed-toolbar-list-buttons.tsx b/apps/www/src/registry/default/plate-ui/fixed-toolbar-list-buttons.tsx
index 2cd9e9d853..f56765b3ec 100644
--- a/apps/www/src/registry/default/plate-ui/fixed-toolbar-list-buttons.tsx
+++ b/apps/www/src/registry/default/plate-ui/fixed-toolbar-list-buttons.tsx
@@ -18,7 +18,6 @@ import {
   BulletedListPlugin,
   NumberedListPlugin,
 } from '@udecode/plate-list/react';
-import { ImagePlugin } from '@udecode/plate-media/react';
 import {
   BaselineIcon,
   BoldIcon,
@@ -41,7 +40,7 @@ import { LinkToolbarButton } from './link-toolbar-button';
 import { ListIndentToolbarButton } from './list-indent-toolbar-button';
 import { ListToolbarButton } from './list-toolbar-button';
 import { MarkToolbarButton } from './mark-toolbar-button';
-import { MediaToolbarButton } from './media-toolbar-button';
+// import { MediaToolbarButton } from './media-toolbar-button';
 import { ModeDropdownMenu } from './mode-dropdown-menu';
 import { MoreDropdownMenu } from './more-dropdown-menu';
 import { TableDropdownMenu } from './table-dropdown-menu';
@@ -130,7 +129,7 @@ export function FixedToolbarListButtons() {
           <ToolbarGroup>
             <LinkToolbarButton />
             <ToggleToolbarButton />
-            <MediaToolbarButton nodeType={ImagePlugin.key} />
+            {/* <MediaToolbarButton nodeType={ImagePlugin.key} /> */}
             <TableDropdownMenu />
             <EmojiDropdownMenu />
             <MoreDropdownMenu />
diff --git a/apps/www/src/registry/default/plate-ui/media-floating-toolbar.tsx b/apps/www/src/registry/default/plate-ui/media-floating-toolbar.tsx
new file mode 100644
index 0000000000..de7eb4600f
--- /dev/null
+++ b/apps/www/src/registry/default/plate-ui/media-floating-toolbar.tsx
@@ -0,0 +1,57 @@
+'use client';
+
+import React from 'react';
+
+import { cn } from '@udecode/cn';
+import { useEditorRef } from '@udecode/plate-core/react';
+import {
+  type UseVirtualFloatingOptions,
+  flip,
+  getDOMSelectionBoundingClientRect,
+  offset,
+} from '@udecode/plate-floating';
+import {
+  type LinkFloatingToolbarState,
+  useVirtualFloatingLink,
+} from '@udecode/plate-link/react';
+
+import { popoverVariants } from './popover';
+
+const floatingOptions: UseVirtualFloatingOptions = {
+  middleware: [
+    offset(12),
+    flip({
+      fallbackPlacements: ['bottom-end', 'top-start', 'top-end'],
+      padding: 12,
+    }),
+  ],
+  placement: 'bottom-start',
+};
+
+export interface LinkFloatingToolbarProps {
+  state?: LinkFloatingToolbarState;
+}
+
+export function MediaFloatingToolbar() {
+  const editor = useEditorRef();
+
+  const isOpen = true;
+
+  const floating = useVirtualFloatingLink({
+    editorId: editor.id,
+    getBoundingClientRect: getDOMSelectionBoundingClientRect,
+    open: isOpen,
+    whileElementsMounted: () => () => {},
+    ...floatingOptions,
+  });
+
+  return (
+    <div
+      id="asdas"
+      ref={floating.refs.setFloating}
+      className={cn(popoverVariants(), 'w-auto p-1')}
+    >
+      <span>123</span>
+    </div>
+  );
+}
diff --git a/apps/www/src/registry/default/plate-ui/media-toolbar-button.tsx b/apps/www/src/registry/default/plate-ui/media-toolbar-button.tsx
index 87df3693e5..b41959ae33 100644
--- a/apps/www/src/registry/default/plate-ui/media-toolbar-button.tsx
+++ b/apps/www/src/registry/default/plate-ui/media-toolbar-button.tsx
@@ -2,68 +2,71 @@
 
 import React from 'react';
 
-import { withRef } from '@udecode/cn';
-import { useEditorRef } from '@udecode/plate-common/react';
-import {
-  AudioPlugin,
-  FilePlugin,
-  ImagePlugin,
-  VideoPlugin,
-} from '@udecode/plate-media/react';
-import { AudioLinesIcon, FileUpIcon, Film, ImageIcon } from 'lucide-react';
-import { useFilePicker } from 'use-file-picker';
-
-import { ToolbarButton } from './toolbar';
+import type { DropdownMenuProps } from '@radix-ui/react-dropdown-menu';
 
-const MEDIA_CONFIG: Record<
-  string,
-  {
-    accept: string[];
-    icon: React.ReactNode;
-  }
-> = {
-  [AudioPlugin.key]: {
-    accept: ['audio/*'],
-    icon: <AudioLinesIcon />,
-  },
-  [FilePlugin.key]: {
-    accept: ['*'],
-    icon: <FileUpIcon />,
-  },
-  [ImagePlugin.key]: {
-    accept: ['image/*'],
-    icon: <ImageIcon />,
-  },
-  [VideoPlugin.key]: {
-    accept: ['video/*'],
-    icon: <Film />,
-  },
-};
+import { useEditorRef } from '@udecode/plate-core/react';
+import { ImageUp, LinkIcon } from 'lucide-react';
+import { useFilePicker } from 'use-file-picker';
 
-export const MediaToolbarButton = withRef<
-  typeof ToolbarButton,
-  {
-    nodeType:
-      | typeof AudioPlugin.key
-      | typeof FilePlugin.key
-      | typeof ImagePlugin.key
-      | typeof VideoPlugin.key;
-  }
->(({ nodeType, ...rest }, ref) => {
-  const editor = useEditorRef();
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuTrigger,
+  useOpenState,
+} from './dropdown-menu';
+import { ToolbarSplitButton } from './toolbar';
 
+export function ImageDropdownMenu({ children, ...props }: DropdownMenuProps) {
   /** Open file picker */
+  const editor = useEditorRef();
   const { openFilePicker } = useFilePicker({
-    accept: MEDIA_CONFIG[nodeType].accept,
+    accept: 'image/*',
     multiple: true,
     onFilesSelected: ({ plainFiles: updatedFiles }) => {
       (editor as any).tf.insert.media(updatedFiles);
     },
   });
 
+  const openState = useOpenState();
+
   return (
-    <ToolbarButton ref={ref} onClick={openFilePicker} {...rest}>
-      {MEDIA_CONFIG[nodeType].icon}
-    </ToolbarButton>
+    <DropdownMenu modal={false} {...openState} {...props}>
+      <DropdownMenuTrigger asChild>
+        <ToolbarSplitButton
+          onMainButtonClick={() => openFilePicker()}
+          pressed={openState.open}
+          tooltip="Align"
+        >
+          <ImageUp />
+        </ToolbarSplitButton>
+      </DropdownMenuTrigger>
+
+      <DropdownMenuContent className="min-w-0" align="start">
+        <DropdownMenuRadioGroup>
+          <DropdownMenuRadioItem
+            value="upload"
+            onSelect={() => openFilePicker()}
+            hideIcon
+          >
+            <div className="flex items-center gap-2">
+              <ImageUp />
+              <span className="text-sm">Upload from computer</span>
+            </div>
+          </DropdownMenuRadioItem>
+          <DropdownMenuRadioItem
+            value="url"
+            onSelect={() => console.log('url')}
+            hideIcon
+          >
+            <div className="flex items-center gap-2">
+              <LinkIcon />
+              <span className="text-sm">Insert via URL</span>
+            </div>
+          </DropdownMenuRadioItem>
+        </DropdownMenuRadioGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
   );
-});
+}
diff --git a/apps/www/src/registry/default/plate-ui/toolbar.tsx b/apps/www/src/registry/default/plate-ui/toolbar.tsx
index 9720c3624f..6eca2a73d7 100644
--- a/apps/www/src/registry/default/plate-ui/toolbar.tsx
+++ b/apps/www/src/registry/default/plate-ui/toolbar.tsx
@@ -55,6 +55,31 @@ const toolbarButtonVariants = cva(
   }
 );
 
+const dropdownArrowVariants = cva(
+  cn(
+    'inline-flex items-center justify-center rounded-r-md text-sm font-medium text-foreground transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50'
+  ),
+  {
+    defaultVariants: {
+      size: 'sm',
+      variant: 'default',
+    },
+    variants: {
+      size: {
+        default: 'h-10 w-6',
+        lg: 'h-11 w-8',
+        sm: 'h-7 w-4',
+      },
+      variant: {
+        default:
+          'bg-transparent hover:bg-muted hover:text-muted-foreground aria-checked:bg-accent aria-checked:text-accent-foreground',
+        outline:
+          'border border-l-0 border-input bg-transparent hover:bg-accent hover:text-accent-foreground',
+      },
+    },
+  }
+);
+
 const ToolbarButton = withTooltip(
   // eslint-disable-next-line react/display-name
   React.forwardRef<
@@ -131,6 +156,103 @@ ToolbarButton.displayName = 'ToolbarButton';
 
 export { ToolbarButton };
 
+const ToolbarSplitButton = withTooltip(
+  React.forwardRef<
+    React.ElementRef<typeof ToolbarToggleItem>,
+    {
+      pressed?: boolean;
+      onMainButtonClick?: () => void;
+    } & Omit<
+      React.ComponentPropsWithoutRef<typeof ToolbarToggleItem>,
+      'asChild' | 'value'
+    > &
+      VariantProps<typeof toolbarButtonVariants>
+  >(
+    (
+      {
+        children,
+        className,
+        pressed,
+        size,
+        variant,
+        onMainButtonClick,
+        ...props
+      },
+      ref
+    ) => {
+      const mainButtonClass = cn(
+        toolbarButtonVariants({
+          size,
+          variant,
+        }),
+        'rounded-r-none',
+        className
+      );
+
+      const dropdownButtonClass = dropdownArrowVariants({
+        size,
+        variant,
+      });
+
+      return typeof pressed === 'boolean' ? (
+        <ToolbarToggleGroup
+          disabled={props.disabled}
+          value="single"
+          type="single"
+        >
+          <div className="flex">
+            <ToolbarToggleItem
+              className={mainButtonClass}
+              value={pressed ? 'single' : ''}
+              onClick={onMainButtonClick}
+            >
+              <div className="flex flex-1 items-center gap-2 whitespace-nowrap">
+                {children}
+              </div>
+            </ToolbarToggleItem>
+
+            <button
+              ref={ref}
+              className={cn(
+                dropdownButtonClass,
+                pressed && 'bg-accent text-accent-foreground'
+              )}
+              disabled={props.disabled}
+              value={pressed ? 'single' : ''}
+              type="reset"
+              {...props}
+            >
+              <ChevronDown
+                className="size-3.5 text-muted-foreground"
+                data-icon
+              />
+            </button>
+          </div>
+        </ToolbarToggleGroup>
+      ) : (
+        <div className="flex">
+          <ToolbarPrimitive.Button className={mainButtonClass}>
+            {children}
+          </ToolbarPrimitive.Button>
+
+          <button
+            ref={ref}
+            {...props}
+            className={dropdownButtonClass}
+            disabled={props.disabled}
+            type="button"
+          >
+            <ChevronDown className="size-2.5 text-muted-foreground" data-icon />
+          </button>
+        </div>
+      );
+    }
+  )
+);
+ToolbarSplitButton.displayName = 'ToolbarButton';
+
+export { ToolbarSplitButton };
+
 export const ToolbarToggleItem = withVariants(
   ToolbarPrimitive.ToggleItem,
   toolbarButtonVariants,

From eed9d957204938900259cba9828df2d4d9412e23 Mon Sep 17 00:00:00 2001
From: Felix Feng <felixfeng33@gmail.com>
Date: Wed, 13 Nov 2024 22:47:01 +0800
Subject: [PATCH 11/34] media-floating

---
 .../editor/plugins/media-plugins.tsx          |   5 +
 .../default/example/playground-demo.tsx       |   5 +-
 .../default/plate-ui/dropdown-menu.tsx        |   1 +
 .../plate-ui/media-floating-toolbar.tsx       | 126 +++++++++++++++---
 .../default/plate-ui/media-toolbar-button.tsx |  19 ++-
 .../FloatingLink/useFloatingLinkEdit.ts       |   3 +-
 .../media/src/lib/BaseMediaFloatingPlugin.ts  |  23 ++++
 packages/media/src/lib/index.ts               |   1 +
 packages/media/src/react/plugins.ts           |   3 +
 9 files changed, 153 insertions(+), 33 deletions(-)
 create mode 100644 packages/media/src/lib/BaseMediaFloatingPlugin.ts

diff --git a/apps/www/src/registry/default/components/editor/plugins/media-plugins.tsx b/apps/www/src/registry/default/components/editor/plugins/media-plugins.tsx
index 645ec6f49a..ea648c3779 100644
--- a/apps/www/src/registry/default/components/editor/plugins/media-plugins.tsx
+++ b/apps/www/src/registry/default/components/editor/plugins/media-plugins.tsx
@@ -6,10 +6,12 @@ import {
   FilePlugin,
   ImagePlugin,
   MediaEmbedPlugin,
+  MediaFloatingPlugin,
   VideoPlugin,
 } from '@udecode/plate-media/react';
 
 import { ImagePreview } from '@/registry/default/plate-ui/image-preview';
+import { MediaFloatingToolbar } from '@/registry/default/plate-ui/media-floating-toolbar';
 
 export const mediaPlugins = [
   ImagePlugin.extend({
@@ -25,4 +27,7 @@ export const mediaPlugins = [
   CaptionPlugin.configure({
     options: { plugins: [ImagePlugin, MediaEmbedPlugin] },
   }),
+  MediaFloatingPlugin.configure({
+    render: { afterEditable: () => <MediaFloatingToolbar /> },
+  }),
 ] as const;
diff --git a/apps/www/src/registry/default/example/playground-demo.tsx b/apps/www/src/registry/default/example/playground-demo.tsx
index db5b47c0cd..3a79108184 100644
--- a/apps/www/src/registry/default/example/playground-demo.tsx
+++ b/apps/www/src/registry/default/example/playground-demo.tsx
@@ -30,7 +30,6 @@ import { tabbablePlugin } from '@/registry/default/components/editor/plugins/tab
 import { Editor, EditorContainer } from '@/registry/default/plate-ui/editor';
 import { MediaPlaceholderElement } from '@/registry/default/plate-ui/media-placeholder-element';
 
-import { MediaFloatingToolbar } from '../plate-ui/media-floating-toolbar';
 import { usePlaygroundEnabled } from './usePlaygroundEnabled';
 
 export const usePlaygroundEditor = (id: any = '') => {
@@ -61,9 +60,7 @@ export const usePlaygroundEditor = (id: any = '') => {
       },
     }),
     SingleLinePlugin,
-    PlaceholderPlugin.withComponent(MediaPlaceholderElement).configure({
-      render: { afterEditable: () => <MediaFloatingToolbar /> },
-    }),
+    PlaceholderPlugin.withComponent(MediaPlaceholderElement),
     // Testing
     PlaywrightPlugin.configure({
       enabled: process.env.NODE_ENV !== 'production',
diff --git a/apps/www/src/registry/default/plate-ui/dropdown-menu.tsx b/apps/www/src/registry/default/plate-ui/dropdown-menu.tsx
index 2f4eb47a5f..30ae688943 100644
--- a/apps/www/src/registry/default/plate-ui/dropdown-menu.tsx
+++ b/apps/www/src/registry/default/plate-ui/dropdown-menu.tsx
@@ -125,6 +125,7 @@ export const DropdownMenuContent = withRef<
       ref={ref}
       onCloseAutoFocus={(e) => {
         e.preventDefault();
+        e.stopPropagation();
       }}
       {...props}
     />
diff --git a/apps/www/src/registry/default/plate-ui/media-floating-toolbar.tsx b/apps/www/src/registry/default/plate-ui/media-floating-toolbar.tsx
index de7eb4600f..80436be029 100644
--- a/apps/www/src/registry/default/plate-ui/media-floating-toolbar.tsx
+++ b/apps/www/src/registry/default/plate-ui/media-floating-toolbar.tsx
@@ -1,21 +1,27 @@
 'use client';
 
-import React from 'react';
+import React, { useCallback, useEffect } from 'react';
 
-import { cn } from '@udecode/cn';
-import { useEditorRef } from '@udecode/plate-core/react';
+import { cn, useComposedRef, useOnClickOutside } from '@udecode/cn';
+import { useEditorPlugin } from '@udecode/plate-core/react';
 import {
   type UseVirtualFloatingOptions,
   flip,
   getDOMSelectionBoundingClientRect,
+  getRangeBoundingClientRect,
   offset,
+  useVirtualFloating,
 } from '@udecode/plate-floating';
-import {
-  type LinkFloatingToolbarState,
-  useVirtualFloatingLink,
-} from '@udecode/plate-link/react';
+import { insertImage } from '@udecode/plate-media';
+import { MediaFloatingPlugin } from '@udecode/plate-media/react';
+import { getAboveNode, getEndPoint, getStartPoint } from '@udecode/slate';
+import { mergeProps } from '@udecode/utils';
+import { ImageIcon } from 'lucide-react';
 
+import { Button } from './button';
+import { Input } from './input';
 import { popoverVariants } from './popover';
+import { Separator } from './separator';
 
 const floatingOptions: UseVirtualFloatingOptions = {
   middleware: [
@@ -28,30 +34,106 @@ const floatingOptions: UseVirtualFloatingOptions = {
   placement: 'bottom-start',
 };
 
-export interface LinkFloatingToolbarProps {
-  state?: LinkFloatingToolbarState;
-}
-
 export function MediaFloatingToolbar() {
-  const editor = useEditorRef();
+  const { api, editor, setOption, type, useOption } =
+    useEditorPlugin(MediaFloatingPlugin);
+
+  const isOpen = useOption('isOpen');
+  const url = useOption('url');
+
+  const getBoundingClientRect = React.useCallback(() => {
+    const entry = getAboveNode(editor, {
+      match: { type },
+    });
 
-  const isOpen = true;
+    if (entry) {
+      const [, path] = entry;
 
-  const floating = useVirtualFloatingLink({
-    editorId: editor.id,
-    getBoundingClientRect: getDOMSelectionBoundingClientRect,
-    open: isOpen,
-    whileElementsMounted: () => () => {},
-    ...floatingOptions,
+      return getRangeBoundingClientRect(editor, {
+        anchor: getStartPoint(editor, path),
+        focus: getEndPoint(editor, path),
+      });
+    }
+
+    return getDOMSelectionBoundingClientRect();
+  }, [editor, type]);
+
+  const clickOutsideRef = useOnClickOutside(() => {
+    if (!isOpen) return;
+
+    api.mediaFloating.hide();
   });
 
+  const floating = useVirtualFloating(
+    mergeProps(
+      {
+        getBoundingClientRect,
+        open: isOpen,
+      },
+      floatingOptions
+    )
+  );
+
+  const onEmbed = useCallback(
+    (value: string) => {
+      insertImage(editor, value);
+      api.mediaFloating.hide();
+    },
+    [editor, api.mediaFloating]
+  );
+
+  const handleCancel = () => {
+    api.mediaFloating.hide();
+  };
+
+  const inputRef = React.useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    if (!isOpen) return;
+
+    setTimeout(() => {
+      inputRef.current?.focus({ preventScroll: true });
+
+      setTimeout(() => {
+        console.log(document.activeElement, 'fj');
+      }, 1000);
+    }, 0);
+  }, [isOpen]);
+
   return (
     <div
-      id="asdas"
-      ref={floating.refs.setFloating}
+      ref={useComposedRef<HTMLElement | null>(
+        floating.refs.setFloating,
+        clickOutsideRef
+      )}
       className={cn(popoverVariants(), 'w-auto p-1')}
+      style={floating.style}
     >
-      <span>123</span>
+      <div className="flex w-[330px] flex-col">
+        <div className="flex items-center">
+          <div className="flex items-center pl-2 pr-1">
+            <ImageIcon className="size-4" />
+          </div>
+
+          <Input
+            ref={inputRef}
+            variant="ghost"
+            value={url}
+            onChange={(e) => setOption('url', e.target.value)}
+            placeholder="https://example.com/image.jpg"
+            h="sm"
+          />
+        </div>
+        <Separator className="my-1" />
+        <div className="flex items-center justify-end gap-2 pt-2">
+          <Button size="sm" variant="secondary" onClick={handleCancel}>
+            Cancel
+          </Button>
+          <Button size="sm" variant="default" onClick={() => onEmbed(url)}>
+            Accept
+          </Button>
+        </div>
+      </div>
     </div>
   );
 }
diff --git a/apps/www/src/registry/default/plate-ui/media-toolbar-button.tsx b/apps/www/src/registry/default/plate-ui/media-toolbar-button.tsx
index b41959ae33..51d4c93a23 100644
--- a/apps/www/src/registry/default/plate-ui/media-toolbar-button.tsx
+++ b/apps/www/src/registry/default/plate-ui/media-toolbar-button.tsx
@@ -4,7 +4,10 @@ import React from 'react';
 
 import type { DropdownMenuProps } from '@radix-ui/react-dropdown-menu';
 
-import { useEditorRef } from '@udecode/plate-core/react';
+import { cn } from '@udecode/cn';
+import { useEditorPlugin } from '@udecode/plate-core/react';
+import { MediaFloatingPlugin } from '@udecode/plate-media/react';
+import { focusEditor } from '@udecode/slate-react';
 import { ImageUp, LinkIcon } from 'lucide-react';
 import { useFilePicker } from 'use-file-picker';
 
@@ -20,7 +23,7 @@ import { ToolbarSplitButton } from './toolbar';
 
 export function ImageDropdownMenu({ children, ...props }: DropdownMenuProps) {
   /** Open file picker */
-  const editor = useEditorRef();
+  const { editor, setOption } = useEditorPlugin(MediaFloatingPlugin);
   const { openFilePicker } = useFilePicker({
     accept: 'image/*',
     multiple: true,
@@ -32,7 +35,7 @@ export function ImageDropdownMenu({ children, ...props }: DropdownMenuProps) {
   const openState = useOpenState();
 
   return (
-    <DropdownMenu modal={false} {...openState} {...props}>
+    <DropdownMenu {...openState} modal={false} {...props}>
       <DropdownMenuTrigger asChild>
         <ToolbarSplitButton
           onMainButtonClick={() => openFilePicker()}
@@ -43,7 +46,10 @@ export function ImageDropdownMenu({ children, ...props }: DropdownMenuProps) {
         </ToolbarSplitButton>
       </DropdownMenuTrigger>
 
-      <DropdownMenuContent className="min-w-0" align="start">
+      <DropdownMenuContent
+        className={cn('min-w-0 data-[state=closed]:hidden')}
+        align="start"
+      >
         <DropdownMenuRadioGroup>
           <DropdownMenuRadioItem
             value="upload"
@@ -57,7 +63,10 @@ export function ImageDropdownMenu({ children, ...props }: DropdownMenuProps) {
           </DropdownMenuRadioItem>
           <DropdownMenuRadioItem
             value="url"
-            onSelect={() => console.log('url')}
+            onSelect={() => {
+              focusEditor(editor);
+              setOption('isOpen', true);
+            }}
             hideIcon
           >
             <div className="flex items-center gap-2">
diff --git a/packages/link/src/react/components/FloatingLink/useFloatingLinkEdit.ts b/packages/link/src/react/components/FloatingLink/useFloatingLinkEdit.ts
index 710bbb020e..29bba59d87 100644
--- a/packages/link/src/react/components/FloatingLink/useFloatingLinkEdit.ts
+++ b/packages/link/src/react/components/FloatingLink/useFloatingLinkEdit.ts
@@ -31,8 +31,7 @@ import { useVirtualFloatingLink } from './useVirtualFloatingLink';
 export const useFloatingLinkEditState = ({
   floatingOptions,
 }: LinkFloatingToolbarState = {}) => {
-  const { editor, getOptions, type, useOption } =
-    useEditorPlugin(LinkPlugin);
+  const { editor, getOptions, type, useOption } = useEditorPlugin(LinkPlugin);
 
   const { triggerFloatingLinkHotkeys } = getOptions();
   const readOnly = useEditorReadOnly();
diff --git a/packages/media/src/lib/BaseMediaFloatingPlugin.ts b/packages/media/src/lib/BaseMediaFloatingPlugin.ts
new file mode 100644
index 0000000000..3702e4abee
--- /dev/null
+++ b/packages/media/src/lib/BaseMediaFloatingPlugin.ts
@@ -0,0 +1,23 @@
+import { type PluginConfig, createTSlatePlugin } from '@udecode/plate-common';
+import { focusEditor } from '@udecode/plate-common/react';
+
+export type MediaFloatingConfig = PluginConfig<
+  'mediaFloating',
+  {
+    isOpen: boolean;
+    url: string;
+  }
+>;
+
+export const BaseMediaFloatingPlugin = createTSlatePlugin<MediaFloatingConfig>({
+  key: 'mediaFloating',
+  options: {
+    isOpen: false,
+    url: '',
+  },
+}).extendApi(({ editor, setOptions }) => ({
+  hide: () => {
+    setOptions({ isOpen: false, url: '' });
+    focusEditor(editor);
+  },
+}));
diff --git a/packages/media/src/lib/index.ts b/packages/media/src/lib/index.ts
index 11b9ec0f8b..61a220b6bc 100644
--- a/packages/media/src/lib/index.ts
+++ b/packages/media/src/lib/index.ts
@@ -4,6 +4,7 @@
 
 export * from './BaseAudioPlugin';
 export * from './BaseFilePlugin';
+export * from './BaseMediaFloatingPlugin';
 export * from './BaseVideoPlugin';
 export * from './image/index';
 export * from './media/index';
diff --git a/packages/media/src/react/plugins.ts b/packages/media/src/react/plugins.ts
index c154d9fbfb..e247e8462b 100644
--- a/packages/media/src/react/plugins.ts
+++ b/packages/media/src/react/plugins.ts
@@ -7,6 +7,7 @@ import {
   BaseMediaEmbedPlugin,
   BaseVideoPlugin,
 } from '../lib';
+import { BaseMediaFloatingPlugin } from '../lib/BaseMediaFloatingPlugin';
 
 export const ImagePlugin = toPlatePlugin(BaseImagePlugin);
 
@@ -17,3 +18,5 @@ export const AudioPlugin = toPlatePlugin(BaseAudioPlugin);
 export const FilePlugin = toPlatePlugin(BaseFilePlugin);
 
 export const VideoPlugin = toPlatePlugin(BaseVideoPlugin);
+
+export const MediaFloatingPlugin = toPlatePlugin(BaseMediaFloatingPlugin);

From a6eb415e21482dd3a9c15b3a791559c1d4c8ba35 Mon Sep 17 00:00:00 2001
From: Felix Feng <felixfeng33@gmail.com>
Date: Thu, 14 Nov 2024 16:45:02 +0800
Subject: [PATCH 12/34] feat

---
 .../editor/plugins/media-plugins.tsx          |   8 +-
 .../src/registry/default/plate-ui/editor.tsx  |   4 +
 .../plate-ui/fixed-toolbar-buttons.tsx        |  17 +-
 .../plate-ui/media-floating-toolbar.tsx       | 138 ++++++---------
 .../plate-ui/media-placeholder-element.tsx    |  63 ++++++-
 .../default/plate-ui/media-toolbar-button.tsx |  69 ++++++--
 .../src/registry/default/plate-ui/toolbar.tsx | 157 +++++++++---------
 packages/media/package.json                   |   1 +
 .../media/src/lib/BaseMediaFloatingPlugin.ts  |  23 ---
 packages/media/src/lib/index.ts               |   1 -
 .../lib/media-embed/BaseMediaEmbedPlugin.ts   |  89 +++++++---
 .../media/src/lib/media-embed/hooks/index.ts  |   7 +
 .../media-embed/hooks/useMediaEmbedEnter.ts   |  22 +++
 .../media-embed/hooks/useMediaEmbedEscape.ts  |  21 +++
 .../hooks/useMediaFloatingToolbar.ts          | 103 ++++++++++++
 packages/media/src/lib/media-embed/index.ts   |   1 +
 packages/media/src/lib/media/types.ts         |   4 +
 packages/media/src/react/plugins.ts           |   3 -
 yarn.lock                                     |   1 +
 19 files changed, 494 insertions(+), 238 deletions(-)
 delete mode 100644 packages/media/src/lib/BaseMediaFloatingPlugin.ts
 create mode 100644 packages/media/src/lib/media-embed/hooks/index.ts
 create mode 100644 packages/media/src/lib/media-embed/hooks/useMediaEmbedEnter.ts
 create mode 100644 packages/media/src/lib/media-embed/hooks/useMediaEmbedEscape.ts
 create mode 100644 packages/media/src/lib/media-embed/hooks/useMediaFloatingToolbar.ts

diff --git a/apps/www/src/registry/default/components/editor/plugins/media-plugins.tsx b/apps/www/src/registry/default/components/editor/plugins/media-plugins.tsx
index ea648c3779..d90023081e 100644
--- a/apps/www/src/registry/default/components/editor/plugins/media-plugins.tsx
+++ b/apps/www/src/registry/default/components/editor/plugins/media-plugins.tsx
@@ -6,7 +6,6 @@ import {
   FilePlugin,
   ImagePlugin,
   MediaEmbedPlugin,
-  MediaFloatingPlugin,
   VideoPlugin,
 } from '@udecode/plate-media/react';
 
@@ -20,14 +19,13 @@ export const mediaPlugins = [
     },
     render: { afterEditable: ImagePreview },
   }),
-  MediaEmbedPlugin,
+  MediaEmbedPlugin.configure({
+    render: { afterEditable: () => <MediaFloatingToolbar /> },
+  }),
   VideoPlugin,
   AudioPlugin,
   FilePlugin,
   CaptionPlugin.configure({
     options: { plugins: [ImagePlugin, MediaEmbedPlugin] },
   }),
-  MediaFloatingPlugin.configure({
-    render: { afterEditable: () => <MediaFloatingToolbar /> },
-  }),
 ] as const;
diff --git a/apps/www/src/registry/default/plate-ui/editor.tsx b/apps/www/src/registry/default/plate-ui/editor.tsx
index c17d66e8de..8825c1fb12 100644
--- a/apps/www/src/registry/default/plate-ui/editor.tsx
+++ b/apps/www/src/registry/default/plate-ui/editor.tsx
@@ -13,6 +13,8 @@ import {
 } from '@udecode/plate-common/react';
 import { cva } from 'class-variance-authority';
 
+import { useUploadErrorToast } from './media-placeholder-element';
+
 const editorContainerVariants = cva(
   'relative w-full cursor-text overflow-y-auto caret-primary selection:bg-brand/25 [&_.slate-selection-area]:border [&_.slate-selection-area]:border-brand/25 [&_.slate-selection-area]:bg-brand/15',
   {
@@ -37,6 +39,8 @@ export const EditorContainer = ({
   const editor = useEditorRef();
   const containerRef = useEditorContainerRef();
 
+  useUploadErrorToast();
+
   return (
     <div
       id={editor.uid}
diff --git a/apps/www/src/registry/default/plate-ui/fixed-toolbar-buttons.tsx b/apps/www/src/registry/default/plate-ui/fixed-toolbar-buttons.tsx
index fb6f549992..7d9fe9555b 100644
--- a/apps/www/src/registry/default/plate-ui/fixed-toolbar-buttons.tsx
+++ b/apps/www/src/registry/default/plate-ui/fixed-toolbar-buttons.tsx
@@ -15,6 +15,12 @@ import {
   FontColorPlugin,
 } from '@udecode/plate-font/react';
 import { ListStyleType } from '@udecode/plate-indent-list';
+import {
+  AudioPlugin,
+  FilePlugin,
+  ImagePlugin,
+  VideoPlugin,
+} from '@udecode/plate-media/react';
 import {
   BaselineIcon,
   BoldIcon,
@@ -38,7 +44,7 @@ import { InsertDropdownMenu } from './insert-dropdown-menu';
 import { LineHeightDropdownMenu } from './line-height-dropdown-menu';
 import { LinkToolbarButton } from './link-toolbar-button';
 import { MarkToolbarButton } from './mark-toolbar-button';
-import { ImageDropdownMenu } from './media-toolbar-button';
+import { MediaDropdownMenu } from './media-toolbar-button';
 import { ModeDropdownMenu } from './mode-dropdown-menu';
 import { MoreDropdownMenu } from './more-dropdown-menu';
 import { OutdentToolbarButton } from './outdent-toolbar-button';
@@ -135,11 +141,10 @@ export function FixedToolbarButtons() {
           </ToolbarGroup>
 
           <ToolbarGroup>
-            <ImageDropdownMenu />
-            {/* <MediaToolbarButton nodeType={ImagePlugin.key} />
-            <MediaToolbarButton nodeType={VideoPlugin.key} />
-            <MediaToolbarButton nodeType={AudioPlugin.key} />
-            <MediaToolbarButton nodeType={FilePlugin.key} /> */}
+            <MediaDropdownMenu nodeType={ImagePlugin.key} />
+            <MediaDropdownMenu nodeType={VideoPlugin.key} />
+            <MediaDropdownMenu nodeType={AudioPlugin.key} />
+            <MediaDropdownMenu nodeType={FilePlugin.key} />
           </ToolbarGroup>
 
           <ToolbarGroup>
diff --git a/apps/www/src/registry/default/plate-ui/media-floating-toolbar.tsx b/apps/www/src/registry/default/plate-ui/media-floating-toolbar.tsx
index 80436be029..38b5e7587d 100644
--- a/apps/www/src/registry/default/plate-ui/media-floating-toolbar.tsx
+++ b/apps/www/src/registry/default/plate-ui/media-floating-toolbar.tsx
@@ -1,22 +1,23 @@
 'use client';
 
-import React, { useCallback, useEffect } from 'react';
+import React, { useMemo } from 'react';
 
-import { cn, useComposedRef, useOnClickOutside } from '@udecode/cn';
+import { cn } from '@udecode/cn';
+import { useMediaFloatingToolbar } from '@udecode/plate';
 import { useEditorPlugin } from '@udecode/plate-core/react';
 import {
   type UseVirtualFloatingOptions,
   flip,
-  getDOMSelectionBoundingClientRect,
-  getRangeBoundingClientRect,
   offset,
-  useVirtualFloating,
 } from '@udecode/plate-floating';
-import { insertImage } from '@udecode/plate-media';
-import { MediaFloatingPlugin } from '@udecode/plate-media/react';
-import { getAboveNode, getEndPoint, getStartPoint } from '@udecode/slate';
-import { mergeProps } from '@udecode/utils';
-import { ImageIcon } from 'lucide-react';
+import {
+  AudioPlugin,
+  FilePlugin,
+  ImagePlugin,
+  MediaEmbedPlugin,
+  VideoPlugin,
+} from '@udecode/plate-media/react';
+import { AudioLinesIcon, FileUpIcon, FilmIcon, ImageIcon } from 'lucide-react';
 
 import { Button } from './button';
 import { Input } from './input';
@@ -34,102 +35,63 @@ const floatingOptions: UseVirtualFloatingOptions = {
   placement: 'bottom-start',
 };
 
-export function MediaFloatingToolbar() {
-  const { api, editor, setOption, type, useOption } =
-    useEditorPlugin(MediaFloatingPlugin);
-
-  const isOpen = useOption('isOpen');
-  const url = useOption('url');
-
-  const getBoundingClientRect = React.useCallback(() => {
-    const entry = getAboveNode(editor, {
-      match: { type },
-    });
-
-    if (entry) {
-      const [, path] = entry;
-
-      return getRangeBoundingClientRect(editor, {
-        anchor: getStartPoint(editor, path),
-        focus: getEndPoint(editor, path),
-      });
-    }
-
-    return getDOMSelectionBoundingClientRect();
-  }, [editor, type]);
-
-  const clickOutsideRef = useOnClickOutside(() => {
-    if (!isOpen) return;
-
-    api.mediaFloating.hide();
-  });
-
-  const floating = useVirtualFloating(
-    mergeProps(
-      {
-        getBoundingClientRect,
-        open: isOpen,
-      },
-      floatingOptions
-    )
-  );
-
-  const onEmbed = useCallback(
-    (value: string) => {
-      insertImage(editor, value);
-      api.mediaFloating.hide();
-    },
-    [editor, api.mediaFloating]
-  );
+const MEDIA_CONFIG: Record<
+  string,
+  {
+    icon: React.ReactNode;
+    placeholder: string;
+  }
+> = {
+  [AudioPlugin.key]: {
+    icon: <AudioLinesIcon className="size-4" />,
+    placeholder: 'https://example.com/audio.mp3',
+  },
+  [FilePlugin.key]: {
+    icon: <FileUpIcon className="size-4" />,
+    placeholder: 'https://example.com/file.pdf',
+  },
+  [ImagePlugin.key]: {
+    icon: <ImageIcon className="size-4" />,
+    placeholder: 'https://example.com/image.jpg',
+  },
+  [VideoPlugin.key]: {
+    icon: <FilmIcon className="size-4" />,
+    placeholder: 'https://example.com/video.mp4',
+  },
+};
 
-  const handleCancel = () => {
-    api.mediaFloating.hide();
-  };
+export function MediaFloatingToolbar() {
+  const { useOption } = useEditorPlugin(MediaEmbedPlugin);
 
-  const inputRef = React.useRef<HTMLInputElement>(null);
+  const mediaType = useOption('mediaType');
 
-  useEffect(() => {
-    if (!isOpen) return;
+  const mediaConfig = useMemo(() => {
+    if (!mediaType) return null;
 
-    setTimeout(() => {
-      inputRef.current?.focus({ preventScroll: true });
+    return MEDIA_CONFIG[mediaType];
+  }, [mediaType]);
 
-      setTimeout(() => {
-        console.log(document.activeElement, 'fj');
-      }, 1000);
-    }, 0);
-  }, [isOpen]);
+  const { acceptProps, cancelProps, inputProps, rootProps } =
+    useMediaFloatingToolbar(floatingOptions);
 
   return (
-    <div
-      ref={useComposedRef<HTMLElement | null>(
-        floating.refs.setFloating,
-        clickOutsideRef
-      )}
-      className={cn(popoverVariants(), 'w-auto p-1')}
-      style={floating.style}
-    >
+    <div {...rootProps} className={cn(popoverVariants(), 'w-auto p-1')}>
       <div className="flex w-[330px] flex-col">
         <div className="flex items-center">
-          <div className="flex items-center pl-2 pr-1">
-            <ImageIcon className="size-4" />
-          </div>
-
+          <div className="flex items-center pl-2 pr-1">{mediaConfig?.icon}</div>
           <Input
-            ref={inputRef}
             variant="ghost"
-            value={url}
-            onChange={(e) => setOption('url', e.target.value)}
-            placeholder="https://example.com/image.jpg"
+            {...inputProps}
+            placeholder={mediaConfig?.placeholder}
             h="sm"
           />
         </div>
         <Separator className="my-1" />
         <div className="flex items-center justify-end gap-2 pt-2">
-          <Button size="sm" variant="secondary" onClick={handleCancel}>
+          <Button size="sm" variant="secondary" {...cancelProps}>
             Cancel
           </Button>
-          <Button size="sm" variant="default" onClick={() => onEmbed(url)}>
+          <Button size="sm" variant="default" {...acceptProps}>
             Accept
           </Button>
         </div>
diff --git a/apps/www/src/registry/default/plate-ui/media-placeholder-element.tsx b/apps/www/src/registry/default/plate-ui/media-placeholder-element.tsx
index b79b0d57ea..8d8ed691c2 100644
--- a/apps/www/src/registry/default/plate-ui/media-placeholder-element.tsx
+++ b/apps/www/src/registry/default/plate-ui/media-placeholder-element.tsx
@@ -9,6 +9,7 @@ import { cn } from '@udecode/cn';
 import {
   findNodePath,
   useEditorPlugin,
+  useEditorRef,
   withHOC,
   withRef,
 } from '@udecode/plate-common/react';
@@ -18,11 +19,13 @@ import {
   ImagePlugin,
   PlaceholderPlugin,
   PlaceholderProvider,
+  UploadErrorCode,
   VideoPlugin,
   updateUploadHistory,
 } from '@udecode/plate-media/react';
 import { insertNodes, removeNodes, withoutSavingHistory } from '@udecode/slate';
 import { AudioLines, FileUp, Film, ImageIcon } from 'lucide-react';
+import { toast } from 'sonner';
 import { useFilePicker } from 'use-file-picker';
 
 import { useUploadFile } from '../lib/uploadthing';
@@ -68,7 +71,7 @@ export const MediaPlaceholderElement = withHOC(
       const { api } = useEditorPlugin(PlaceholderPlugin);
 
       const { isUploading, progress, uploadFile, uploadedFile, uploadingFile } =
-        useUploadFile('imageUploader');
+        useUploadFile();
 
       const loading = isUploading && uploadingFile;
 
@@ -265,3 +268,61 @@ export function formatBytes(
       : (sizes[i] ?? 'Bytes')
   }`;
 }
+
+export const useUploadErrorToast = () => {
+  const editor = useEditorRef();
+
+  const uploadError = editor.useOption(PlaceholderPlugin, 'error');
+
+  useEffect(() => {
+    if (!uploadError) return;
+
+    const { code, data } = uploadError;
+
+    switch (code) {
+      case UploadErrorCode.INVALID_FILE_SIZE: {
+        toast.error(
+          `The size of files ${data.files
+            .map((f) => f.name)
+            .join(', ')} is invalid`
+        );
+
+        break;
+      }
+      case UploadErrorCode.INVALID_FILE_TYPE: {
+        toast.error(
+          `The type of files ${data.files
+            .map((f) => f.name)
+            .join(', ')} is invalid`
+        );
+
+        break;
+      }
+      case UploadErrorCode.TOO_LARGE: {
+        toast.error(
+          `The size of files ${data.files
+            .map((f) => f.name)
+            .join(', ')} is too large than ${data.maxFileSize}`
+        );
+
+        break;
+      }
+      case UploadErrorCode.TOO_LESS_FILES: {
+        toast.error(
+          `The mini um number of files is ${data.minFileCount} for ${data.fileType}`
+        );
+
+        break;
+      }
+      case UploadErrorCode.TOO_MANY_FILES: {
+        toast.error(
+          `The maximum number of files is ${data.maxFileCount} ${
+            data.fileType ? `for ${data.fileType}` : ''
+          }`
+        );
+
+        break;
+      }
+    }
+  }, [uploadError]);
+};
diff --git a/apps/www/src/registry/default/plate-ui/media-toolbar-button.tsx b/apps/www/src/registry/default/plate-ui/media-toolbar-button.tsx
index 51d4c93a23..67d44326f9 100644
--- a/apps/www/src/registry/default/plate-ui/media-toolbar-button.tsx
+++ b/apps/www/src/registry/default/plate-ui/media-toolbar-button.tsx
@@ -6,9 +6,20 @@ import type { DropdownMenuProps } from '@radix-ui/react-dropdown-menu';
 
 import { cn } from '@udecode/cn';
 import { useEditorPlugin } from '@udecode/plate-core/react';
-import { MediaFloatingPlugin } from '@udecode/plate-media/react';
-import { focusEditor } from '@udecode/slate-react';
-import { ImageUp, LinkIcon } from 'lucide-react';
+import {
+  AudioPlugin,
+  FilePlugin,
+  ImagePlugin,
+  MediaEmbedPlugin,
+  VideoPlugin,
+} from '@udecode/plate-media/react';
+import {
+  AudioLinesIcon,
+  FileUpIcon,
+  FilmIcon,
+  ImageIcon,
+  LinkIcon,
+} from 'lucide-react';
 import { useFilePicker } from 'use-file-picker';
 
 import {
@@ -21,11 +32,46 @@ import {
 } from './dropdown-menu';
 import { ToolbarSplitButton } from './toolbar';
 
-export function ImageDropdownMenu({ children, ...props }: DropdownMenuProps) {
-  /** Open file picker */
-  const { editor, setOption } = useEditorPlugin(MediaFloatingPlugin);
+const MEDIA_CONFIG: Record<
+  string,
+  {
+    accept: string[];
+    icon: React.ReactNode;
+    tooltip: string;
+  }
+> = {
+  [AudioPlugin.key]: {
+    accept: ['audio/*'],
+    icon: <AudioLinesIcon />,
+    tooltip: 'Audio',
+  },
+  [FilePlugin.key]: {
+    accept: ['*'],
+    icon: <FileUpIcon />,
+    tooltip: 'File',
+  },
+  [ImagePlugin.key]: {
+    accept: ['image/*'],
+    icon: <ImageIcon />,
+    tooltip: 'Image',
+  },
+  [VideoPlugin.key]: {
+    accept: ['video/*'],
+    icon: <FilmIcon />,
+    tooltip: 'Video',
+  },
+};
+
+export function MediaDropdownMenu({
+  children,
+  nodeType,
+  ...props
+}: DropdownMenuProps & { nodeType: string }) {
+  const currentConfig = MEDIA_CONFIG[nodeType];
+
+  const { api, editor } = useEditorPlugin(MediaEmbedPlugin);
   const { openFilePicker } = useFilePicker({
-    accept: 'image/*',
+    accept: currentConfig.accept,
     multiple: true,
     onFilesSelected: ({ plainFiles: updatedFiles }) => {
       (editor as any).tf.insert.media(updatedFiles);
@@ -40,9 +86,9 @@ export function ImageDropdownMenu({ children, ...props }: DropdownMenuProps) {
         <ToolbarSplitButton
           onMainButtonClick={() => openFilePicker()}
           pressed={openState.open}
-          tooltip="Align"
+          tooltip={currentConfig.tooltip}
         >
-          <ImageUp />
+          {currentConfig.icon}
         </ToolbarSplitButton>
       </DropdownMenuTrigger>
 
@@ -57,15 +103,14 @@ export function ImageDropdownMenu({ children, ...props }: DropdownMenuProps) {
             hideIcon
           >
             <div className="flex items-center gap-2">
-              <ImageUp />
+              {currentConfig.icon}
               <span className="text-sm">Upload from computer</span>
             </div>
           </DropdownMenuRadioItem>
           <DropdownMenuRadioItem
             value="url"
             onSelect={() => {
-              focusEditor(editor);
-              setOption('isOpen', true);
+              api.media_embed.openFloating(nodeType);
             }}
             hideIcon
           >
diff --git a/apps/www/src/registry/default/plate-ui/toolbar.tsx b/apps/www/src/registry/default/plate-ui/toolbar.tsx
index 6eca2a73d7..e30259d880 100644
--- a/apps/www/src/registry/default/plate-ui/toolbar.tsx
+++ b/apps/www/src/registry/default/plate-ui/toolbar.tsx
@@ -156,98 +156,101 @@ ToolbarButton.displayName = 'ToolbarButton';
 
 export { ToolbarButton };
 
-const ToolbarSplitButton = withTooltip(
-  React.forwardRef<
-    React.ElementRef<typeof ToolbarToggleItem>,
+const ToolbarSplitButton = React.forwardRef<
+  React.ElementRef<typeof ToolbarToggleItem>,
+  {
+    pressed?: boolean;
+    tooltip?: string;
+    onMainButtonClick?: () => void;
+  } & Omit<
+    React.ComponentPropsWithoutRef<typeof ToolbarToggleItem>,
+    'asChild' | 'value'
+  > &
+    VariantProps<typeof toolbarButtonVariants>
+>(
+  (
     {
-      pressed?: boolean;
-      onMainButtonClick?: () => void;
-    } & Omit<
-      React.ComponentPropsWithoutRef<typeof ToolbarToggleItem>,
-      'asChild' | 'value'
-    > &
-      VariantProps<typeof toolbarButtonVariants>
-  >(
-    (
-      {
-        children,
-        className,
-        pressed,
+      children,
+      className,
+      pressed,
+      size,
+      tooltip,
+      variant,
+      onMainButtonClick,
+      ...props
+    },
+    ref
+  ) => {
+    const mainButtonClass = cn(
+      toolbarButtonVariants({
         size,
         variant,
-        onMainButtonClick,
-        ...props
-      },
-      ref
-    ) => {
-      const mainButtonClass = cn(
-        toolbarButtonVariants({
-          size,
-          variant,
-        }),
-        'rounded-r-none',
-        className
-      );
+      }),
+      'rounded-r-none',
+      className
+    );
 
-      const dropdownButtonClass = dropdownArrowVariants({
-        size,
-        variant,
-      });
+    const dropdownButtonClass = dropdownArrowVariants({
+      size,
+      variant,
+    });
 
-      return typeof pressed === 'boolean' ? (
-        <ToolbarToggleGroup
-          disabled={props.disabled}
-          value="single"
-          type="single"
+    const MainButton = withTooltip(
+      React.forwardRef<HTMLButtonElement>((mainProps, mainRef) => (
+        <ToolbarToggleItem
+          {...mainProps}
+          ref={mainRef}
+          className={mainButtonClass}
+          value={pressed ? 'single' : ''}
+          onClick={onMainButtonClick}
         >
-          <div className="flex">
-            <ToolbarToggleItem
-              className={mainButtonClass}
-              value={pressed ? 'single' : ''}
-              onClick={onMainButtonClick}
-            >
-              <div className="flex flex-1 items-center gap-2 whitespace-nowrap">
-                {children}
-              </div>
-            </ToolbarToggleItem>
-
-            <button
-              ref={ref}
-              className={cn(
-                dropdownButtonClass,
-                pressed && 'bg-accent text-accent-foreground'
-              )}
-              disabled={props.disabled}
-              value={pressed ? 'single' : ''}
-              type="reset"
-              {...props}
-            >
-              <ChevronDown
-                className="size-3.5 text-muted-foreground"
-                data-icon
-              />
-            </button>
+          <div className="flex flex-1 items-center gap-2 whitespace-nowrap">
+            {children}
           </div>
-        </ToolbarToggleGroup>
-      ) : (
+        </ToolbarToggleItem>
+      ))
+    );
+
+    return typeof pressed === 'boolean' ? (
+      <ToolbarToggleGroup
+        disabled={props.disabled}
+        value="single"
+        type="single"
+      >
         <div className="flex">
-          <ToolbarPrimitive.Button className={mainButtonClass}>
-            {children}
-          </ToolbarPrimitive.Button>
+          <MainButton tooltip={tooltip} />
 
           <button
             ref={ref}
-            {...props}
-            className={dropdownButtonClass}
+            className={cn(
+              dropdownButtonClass,
+              pressed && 'bg-accent text-accent-foreground'
+            )}
             disabled={props.disabled}
-            type="button"
+            value={pressed ? 'single' : ''}
+            type="reset"
+            {...props}
           >
-            <ChevronDown className="size-2.5 text-muted-foreground" data-icon />
+            <ChevronDown className="size-3.5 text-muted-foreground" data-icon />
           </button>
         </div>
-      );
-    }
-  )
+      </ToolbarToggleGroup>
+    ) : (
+      <div className="flex">
+        <MainButton tooltip={tooltip} />
+
+        <button
+          ref={ref}
+          {...props}
+          className={dropdownButtonClass}
+          disabled={props.disabled}
+          type="button"
+        >
+          <ChevronDown className="size-2.5 text-muted-foreground" data-icon />
+        </button>
+      </div>
+    );
+  }
 );
 ToolbarSplitButton.displayName = 'ToolbarButton';
 
diff --git a/packages/media/package.json b/packages/media/package.json
index 20df695e13..11616ba4a1 100644
--- a/packages/media/package.json
+++ b/packages/media/package.json
@@ -50,6 +50,7 @@
     "typecheck": "yarn p:typecheck"
   },
   "dependencies": {
+    "@udecode/plate-floating": "40.0.0",
     "js-video-url-parser": "^0.5.1"
   },
   "devDependencies": {
diff --git a/packages/media/src/lib/BaseMediaFloatingPlugin.ts b/packages/media/src/lib/BaseMediaFloatingPlugin.ts
deleted file mode 100644
index 3702e4abee..0000000000
--- a/packages/media/src/lib/BaseMediaFloatingPlugin.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { type PluginConfig, createTSlatePlugin } from '@udecode/plate-common';
-import { focusEditor } from '@udecode/plate-common/react';
-
-export type MediaFloatingConfig = PluginConfig<
-  'mediaFloating',
-  {
-    isOpen: boolean;
-    url: string;
-  }
->;
-
-export const BaseMediaFloatingPlugin = createTSlatePlugin<MediaFloatingConfig>({
-  key: 'mediaFloating',
-  options: {
-    isOpen: false,
-    url: '',
-  },
-}).extendApi(({ editor, setOptions }) => ({
-  hide: () => {
-    setOptions({ isOpen: false, url: '' });
-    focusEditor(editor);
-  },
-}));
diff --git a/packages/media/src/lib/index.ts b/packages/media/src/lib/index.ts
index 61a220b6bc..11b9ec0f8b 100644
--- a/packages/media/src/lib/index.ts
+++ b/packages/media/src/lib/index.ts
@@ -4,7 +4,6 @@
 
 export * from './BaseAudioPlugin';
 export * from './BaseFilePlugin';
-export * from './BaseMediaFloatingPlugin';
 export * from './BaseVideoPlugin';
 export * from './image/index';
 export * from './media/index';
diff --git a/packages/media/src/lib/media-embed/BaseMediaEmbedPlugin.ts b/packages/media/src/lib/media-embed/BaseMediaEmbedPlugin.ts
index 9cfe21f11d..2e9c5313a0 100644
--- a/packages/media/src/lib/media-embed/BaseMediaEmbedPlugin.ts
+++ b/packages/media/src/lib/media-embed/BaseMediaEmbedPlugin.ts
@@ -1,12 +1,29 @@
-import { type PluginConfig, createTSlatePlugin } from '@udecode/plate-common';
+import {
+  type PluginConfig,
+  createTSlatePlugin,
+  isUrl,
+} from '@udecode/plate-common';
+import { focusEditor } from '@udecode/plate-common/react';
 
 import type { MediaPluginOptions, TMediaElement } from '../media/index';
 
+import { insertImage } from '../image';
 import { parseIframeUrl } from './parseIframeUrl';
 
 export interface TMediaEmbedElement extends TMediaElement {}
 
-export type MediaEmbedConfig = PluginConfig<'media_embed', MediaPluginOptions>;
+export type MediaEmbedApi = {
+  hideFloating: () => void;
+  openFloating: (mediaType: string) => void;
+};
+
+export type MediaEmbedConfig = PluginConfig<
+  'media_embed',
+  MediaPluginOptions,
+  {
+    media_embed: MediaEmbedApi;
+  }
+>;
 
 /**
  * Enables support for embeddable media such as YouTube or Vimeo videos,
@@ -16,28 +33,56 @@ export const BaseMediaEmbedPlugin = createTSlatePlugin<MediaEmbedConfig>({
   key: 'media_embed',
   node: { isElement: true, isVoid: true },
   options: {
+    isFloatingOpen: false,
+    isUrl: isUrl,
+    mediaType: null,
     transformUrl: parseIframeUrl,
+    url: '',
   },
-}).extend(({ type }) => ({
-  parsers: {
-    html: {
-      deserializer: {
-        parse: ({ element }) => {
-          const url = element.getAttribute('src');
-
-          if (url) {
-            return {
-              type,
-              url,
-            };
-          }
-        },
-        rules: [
-          {
-            validNodeName: 'IFRAME',
+})
+  .extendApi<Partial<MediaEmbedApi>>(({ editor, setOptions }) => ({
+    hideFloating: () => {
+      setOptions({ isFloatingOpen: false, url: '' });
+      focusEditor(editor);
+    },
+    openFloating: (mediaType: string) => {
+      focusEditor(editor);
+      setOptions({ isFloatingOpen: true, mediaType });
+    },
+  }))
+  .extendTransforms(({ api, editor, getOptions, setOptions }) => ({
+    embed: (url: string) => {
+      setOptions({ isFloatingOpen: false, url });
+
+      const isUrl = getOptions().isUrl;
+
+      if (!isUrl?.(url)) return;
+
+      insertImage(editor, url);
+
+      api.media_embed.hideFloating();
+    },
+  }))
+  .extend(({ type }) => ({
+    parsers: {
+      html: {
+        deserializer: {
+          parse: ({ element }) => {
+            const url = element.getAttribute('src');
+
+            if (url) {
+              return {
+                type,
+                url,
+              };
+            }
           },
-        ],
+          rules: [
+            {
+              validNodeName: 'IFRAME',
+            },
+          ],
+        },
       },
     },
-  },
-}));
+  }));
diff --git a/packages/media/src/lib/media-embed/hooks/index.ts b/packages/media/src/lib/media-embed/hooks/index.ts
new file mode 100644
index 0000000000..7ce0fc15bd
--- /dev/null
+++ b/packages/media/src/lib/media-embed/hooks/index.ts
@@ -0,0 +1,7 @@
+/**
+ * @file Automatically generated by barrelsby.
+ */
+
+export * from './useMediaEmbedEnter';
+export * from './useMediaEmbedEscape';
+export * from './useMediaFloatingToolbar';
diff --git a/packages/media/src/lib/media-embed/hooks/useMediaEmbedEnter.ts b/packages/media/src/lib/media-embed/hooks/useMediaEmbedEnter.ts
new file mode 100644
index 0000000000..0118e8565a
--- /dev/null
+++ b/packages/media/src/lib/media-embed/hooks/useMediaEmbedEnter.ts
@@ -0,0 +1,22 @@
+import { useEditorPlugin, useHotkeys } from '@udecode/plate-common/react';
+
+import { MediaEmbedPlugin } from '../../../react';
+
+export const useMediaEmbedEnter = () => {
+  const { tf, useOption } = useEditorPlugin(MediaEmbedPlugin);
+
+  const isOpen = useOption('isFloatingOpen');
+  const url = useOption('url');
+
+  useHotkeys(
+    'enter',
+    () => {
+      tf.media_embed.embed(url!);
+    },
+    {
+      enableOnFormTags: ['INPUT'],
+      enabled: isOpen,
+    },
+    [url]
+  );
+};
diff --git a/packages/media/src/lib/media-embed/hooks/useMediaEmbedEscape.ts b/packages/media/src/lib/media-embed/hooks/useMediaEmbedEscape.ts
new file mode 100644
index 0000000000..c5f03b3e02
--- /dev/null
+++ b/packages/media/src/lib/media-embed/hooks/useMediaEmbedEscape.ts
@@ -0,0 +1,21 @@
+import { useEditorPlugin, useHotkeys } from '@udecode/plate-common/react';
+
+import { MediaEmbedPlugin } from '../../../react';
+
+export const useMediaEmbedEscape = () => {
+  const { api, useOption } = useEditorPlugin(MediaEmbedPlugin);
+
+  const isOpen = useOption('isFloatingOpen');
+
+  useHotkeys(
+    'escape',
+    () => {
+      api.media_embed.hideFloating();
+    },
+    {
+      enableOnFormTags: ['INPUT'],
+      enabled: isOpen,
+    },
+    []
+  );
+};
diff --git a/packages/media/src/lib/media-embed/hooks/useMediaFloatingToolbar.ts b/packages/media/src/lib/media-embed/hooks/useMediaFloatingToolbar.ts
new file mode 100644
index 0000000000..879792da04
--- /dev/null
+++ b/packages/media/src/lib/media-embed/hooks/useMediaFloatingToolbar.ts
@@ -0,0 +1,103 @@
+import React, { useEffect } from 'react';
+
+import {
+  getAboveNode,
+  getEndPoint,
+  getStartPoint,
+  mergeProps,
+} from '@udecode/plate-common';
+import {
+  useComposedRef,
+  useEditorPlugin,
+  useOnClickOutside,
+} from '@udecode/plate-common/react';
+import {
+  type UseVirtualFloatingOptions,
+  getDOMSelectionBoundingClientRect,
+  getRangeBoundingClientRect,
+  useVirtualFloating,
+} from '@udecode/plate-floating';
+
+import { MediaEmbedPlugin } from '../../../react';
+import { useMediaEmbedEnter } from './useMediaEmbedEnter';
+import { useMediaEmbedEscape } from './useMediaEmbedEscape';
+
+export const useMediaFloatingToolbar = (
+  floatingOptions: UseVirtualFloatingOptions
+) => {
+  const { api, editor, setOption, tf, type, useOption } =
+    useEditorPlugin(MediaEmbedPlugin);
+  const isOpen = useOption('isFloatingOpen');
+  const url = useOption('url');
+  const getBoundingClientRect = React.useCallback(() => {
+    const entry = getAboveNode(editor, {
+      match: { type },
+    });
+
+    if (entry) {
+      const [, path] = entry;
+
+      return getRangeBoundingClientRect(editor, {
+        anchor: getStartPoint(editor, path),
+        focus: getEndPoint(editor, path),
+      });
+    }
+
+    return getDOMSelectionBoundingClientRect();
+  }, [editor, type]);
+
+  const clickOutsideRef = useOnClickOutside(() => {
+    if (!isOpen) return;
+
+    api.media_embed.hideFloating();
+  });
+
+  const floating = useVirtualFloating(
+    mergeProps(
+      {
+        getBoundingClientRect,
+        open: isOpen,
+      },
+      floatingOptions
+    )
+  );
+
+  const handleCancel = () => {
+    api.media_embed.hideFloating();
+  };
+
+  const inputRef = React.useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    if (!isOpen) return;
+
+    setTimeout(() => {
+      inputRef.current?.focus({ preventScroll: true });
+    }, 0);
+  }, [isOpen]);
+
+  useMediaEmbedEscape();
+  useMediaEmbedEnter();
+
+  return {
+    acceptProps: {
+      onClick: () => tf.media_embed.embed(url!),
+    },
+    cancelProps: {
+      onClick: handleCancel,
+    },
+    inputProps: {
+      ref: inputRef,
+      value: useOption('url'),
+      onChange: (e: React.ChangeEvent<HTMLInputElement>) =>
+        setOption('url', e.target.value),
+    },
+    rootProps: {
+      ref: useComposedRef<HTMLElement | null>(
+        floating.refs.setFloating,
+        clickOutsideRef
+      ),
+      style: floating.style,
+    },
+  };
+};
diff --git a/packages/media/src/lib/media-embed/index.ts b/packages/media/src/lib/media-embed/index.ts
index 24ec4a2967..36ea71c3ae 100644
--- a/packages/media/src/lib/media-embed/index.ts
+++ b/packages/media/src/lib/media-embed/index.ts
@@ -6,4 +6,5 @@ export * from './BaseMediaEmbedPlugin';
 export * from './parseIframeUrl';
 export * from './parseTwitterUrl';
 export * from './parseVideoUrl';
+export * from './hooks/index';
 export * from './transforms/index';
diff --git a/packages/media/src/lib/media/types.ts b/packages/media/src/lib/media/types.ts
index 6f8dc576b6..8149ccf06d 100644
--- a/packages/media/src/lib/media/types.ts
+++ b/packages/media/src/lib/media/types.ts
@@ -10,8 +10,12 @@ export interface TMediaElement extends TElement {
 }
 
 export interface MediaPluginOptions {
+  isFloatingOpen?: boolean;
   isUrl?: (text: string) => boolean;
+  mediaType?: string | null;
 
   /** Transforms the url. */
   transformUrl?: (url: string) => string;
+
+  url?: string;
 }
diff --git a/packages/media/src/react/plugins.ts b/packages/media/src/react/plugins.ts
index e247e8462b..c154d9fbfb 100644
--- a/packages/media/src/react/plugins.ts
+++ b/packages/media/src/react/plugins.ts
@@ -7,7 +7,6 @@ import {
   BaseMediaEmbedPlugin,
   BaseVideoPlugin,
 } from '../lib';
-import { BaseMediaFloatingPlugin } from '../lib/BaseMediaFloatingPlugin';
 
 export const ImagePlugin = toPlatePlugin(BaseImagePlugin);
 
@@ -18,5 +17,3 @@ export const AudioPlugin = toPlatePlugin(BaseAudioPlugin);
 export const FilePlugin = toPlatePlugin(BaseFilePlugin);
 
 export const VideoPlugin = toPlatePlugin(BaseVideoPlugin);
-
-export const MediaFloatingPlugin = toPlatePlugin(BaseMediaFloatingPlugin);
diff --git a/yarn.lock b/yarn.lock
index b3bf94d1a4..9f3010b155 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6959,6 +6959,7 @@ __metadata:
   resolution: "@udecode/plate-media@workspace:packages/media"
   dependencies:
     "@udecode/plate-common": "workspace:^"
+    "@udecode/plate-floating": "npm:40.0.0"
     js-video-url-parser: "npm:^0.5.1"
   peerDependencies:
     "@udecode/plate-common": ">=40.0.0"

From 2557ca70f3d0efd3c564d81bc628ce5ae3396b49 Mon Sep 17 00:00:00 2001
From: Felix Feng <felixfeng33@gmail.com>
Date: Thu, 14 Nov 2024 16:56:40 +0800
Subject: [PATCH 13/34] fix

---
 apps/www/package.json                         |   2 -
 apps/www/src/lib/plate/create-plate-ui.ts     |   2 +-
 .../default/plate-ui/dropdown-menu.tsx        |   1 -
 .../plate-ui/fixed-toolbar-buttons.tsx        |   1 -
 .../plate-ui/fixed-toolbar-list-buttons.tsx   |  16 +-
 .../plate-ui/font-size-toolbar-butoon.tsx     | 173 ------------------
 yarn.lock                                     | 128 +------------
 7 files changed, 17 insertions(+), 306 deletions(-)
 delete mode 100644 apps/www/src/registry/default/plate-ui/font-size-toolbar-butoon.tsx

diff --git a/apps/www/package.json b/apps/www/package.json
index 0eb5086efb..5c7fc29db3 100644
--- a/apps/www/package.json
+++ b/apps/www/package.json
@@ -131,7 +131,6 @@
     "@udecode/slate-react": "workspace:^",
     "@udecode/slate-utils": "workspace:^",
     "@udecode/utils": "workspace:^",
-    "@uploadthing/react": "7.1.0",
     "@vercel/og": "^0.6.2",
     "ai": "^3.4.10",
     "class-variance-authority": "^0.7.0",
@@ -172,7 +171,6 @@
     "ts-morph": "^22.0.0",
     "unist-builder": "4.0.0",
     "unist-util-visit": "^5.0.0",
-    "uploadthing": "7.2.0",
     "use-file-picker": "2.1.2",
     "vaul": "0.9.0"
   },
diff --git a/apps/www/src/lib/plate/create-plate-ui.ts b/apps/www/src/lib/plate/create-plate-ui.ts
index 454afadb26..e7e0b1c92c 100644
--- a/apps/www/src/lib/plate/create-plate-ui.ts
+++ b/apps/www/src/lib/plate/create-plate-ui.ts
@@ -104,7 +104,7 @@ import { withDraggables } from '@/registry/default/plate-ui/with-draggables';
 export const createPlateUI = ({
   draggable,
   placeholder,
-}: { draggable?: boolean; placeholder?: boolean; upload?: boolean } = {}) => {
+}: { draggable?: boolean; placeholder?: boolean } = {}) => {
   let components: Record<string, NodeComponent> = {
     [AIPlugin.key]: AILeaf,
     [BlockquotePlugin.key]: BlockquoteElement,
diff --git a/apps/www/src/registry/default/plate-ui/dropdown-menu.tsx b/apps/www/src/registry/default/plate-ui/dropdown-menu.tsx
index 30ae688943..2f4eb47a5f 100644
--- a/apps/www/src/registry/default/plate-ui/dropdown-menu.tsx
+++ b/apps/www/src/registry/default/plate-ui/dropdown-menu.tsx
@@ -125,7 +125,6 @@ export const DropdownMenuContent = withRef<
       ref={ref}
       onCloseAutoFocus={(e) => {
         e.preventDefault();
-        e.stopPropagation();
       }}
       {...props}
     />
diff --git a/apps/www/src/registry/default/plate-ui/fixed-toolbar-buttons.tsx b/apps/www/src/registry/default/plate-ui/fixed-toolbar-buttons.tsx
index 7d9fe9555b..7505fb79ba 100644
--- a/apps/www/src/registry/default/plate-ui/fixed-toolbar-buttons.tsx
+++ b/apps/www/src/registry/default/plate-ui/fixed-toolbar-buttons.tsx
@@ -80,7 +80,6 @@ export function FixedToolbarButtons() {
           <ToolbarGroup>
             <InsertDropdownMenu />
             <TurnIntoDropdownMenu />
-            {/* <FontSizeToolbarButton /> */}
           </ToolbarGroup>
 
           <ToolbarGroup>
diff --git a/apps/www/src/registry/default/plate-ui/fixed-toolbar-list-buttons.tsx b/apps/www/src/registry/default/plate-ui/fixed-toolbar-list-buttons.tsx
index f56765b3ec..3ca99216b7 100644
--- a/apps/www/src/registry/default/plate-ui/fixed-toolbar-list-buttons.tsx
+++ b/apps/www/src/registry/default/plate-ui/fixed-toolbar-list-buttons.tsx
@@ -18,6 +18,12 @@ import {
   BulletedListPlugin,
   NumberedListPlugin,
 } from '@udecode/plate-list/react';
+import {
+  AudioPlugin,
+  FilePlugin,
+  ImagePlugin,
+  VideoPlugin,
+} from '@udecode/plate-media/react';
 import {
   BaselineIcon,
   BoldIcon,
@@ -40,6 +46,8 @@ import { LinkToolbarButton } from './link-toolbar-button';
 import { ListIndentToolbarButton } from './list-indent-toolbar-button';
 import { ListToolbarButton } from './list-toolbar-button';
 import { MarkToolbarButton } from './mark-toolbar-button';
+import { MediaDropdownMenu } from './media-toolbar-button';
+
 // import { MediaToolbarButton } from './media-toolbar-button';
 import { ModeDropdownMenu } from './mode-dropdown-menu';
 import { MoreDropdownMenu } from './more-dropdown-menu';
@@ -126,10 +134,16 @@ export function FixedToolbarListButtons() {
             <ListIndentToolbarButton />
           </ToolbarGroup>
 
+          <ToolbarGroup>
+            <MediaDropdownMenu nodeType={ImagePlugin.key} />
+            <MediaDropdownMenu nodeType={VideoPlugin.key} />
+            <MediaDropdownMenu nodeType={AudioPlugin.key} />
+            <MediaDropdownMenu nodeType={FilePlugin.key} />
+          </ToolbarGroup>
+
           <ToolbarGroup>
             <LinkToolbarButton />
             <ToggleToolbarButton />
-            {/* <MediaToolbarButton nodeType={ImagePlugin.key} /> */}
             <TableDropdownMenu />
             <EmojiDropdownMenu />
             <MoreDropdownMenu />
diff --git a/apps/www/src/registry/default/plate-ui/font-size-toolbar-butoon.tsx b/apps/www/src/registry/default/plate-ui/font-size-toolbar-butoon.tsx
deleted file mode 100644
index a30448f519..0000000000
--- a/apps/www/src/registry/default/plate-ui/font-size-toolbar-butoon.tsx
+++ /dev/null
@@ -1,173 +0,0 @@
-import { useEditorRef, useEditorSelector } from '@udecode/plate-core/react';
-import { FontSizePlugin } from '@udecode/plate-font/react';
-import { HEADING_KEYS } from '@udecode/plate-heading';
-import {
-  type TElement,
-  type TText,
-  getAboveNode,
-  getMarks,
-  getNodeEntry,
-} from '@udecode/slate';
-import { focusEditor, toDOMNode } from '@udecode/slate-react';
-import { setMarks } from '@udecode/slate-utils';
-import { Minus, Plus } from 'lucide-react';
-
-import { ToolbarButton } from './toolbar';
-
-const FONT_SIZE_MAP = {
-  [HEADING_KEYS.h1]: '36px',
-  [HEADING_KEYS.h2]: '24px',
-  [HEADING_KEYS.h3]: '20px',
-};
-
-export const FontSizeToolbarButton = () => {
-  const fontSize = useEditorSelector((editor) => {
-    const marks = getMarks(editor) || {};
-
-    if (marks[FontSizePlugin.key]) return marks[FontSizePlugin.key];
-
-    const entry = getAboveNode<TElement>(editor, {
-      at: editor.selection?.focus,
-    });
-
-    if (!entry) return '16px';
-
-    const [node] = entry;
-
-    if (node.type in FONT_SIZE_MAP)
-      return FONT_SIZE_MAP[node.type as keyof typeof FONT_SIZE_MAP];
-
-    return '16px';
-  }, []);
-
-  const editor = useEditorRef();
-
-  const getFontSize = (textNode: TText): string => {
-    const fontSize = textNode[FontSizePlugin.key];
-
-    if (typeof fontSize === 'string') return fontSize;
-
-    const dom = toDOMNode(editor, textNode);
-
-    return window.getComputedStyle(dom as HTMLSpanElement).fontSize;
-  };
-
-  const getIncreasedFontSize = (fontSize: string): string => {
-    // 如果输入为空返回默认值
-    if (!fontSize) return '16px';
-
-    // 提取数字和单位
-    const match = /^([\d.]+)([%a-z]*)$/i.exec(fontSize);
-
-    if (!match) return fontSize;
-
-    const [, value, unit] = match;
-    const numericValue = Number.parseFloat(value);
-
-    // 相对长度单位的增加比例
-    const relativeUnits: Record<string, number> = {
-      '%': 12.5, // 百分比
-      cap: 0.125, // 相对于大写字母的高度
-      ch: 0.5, // 相对于数字"0"的宽度
-      em: 0.125, // 相对于父元素的字体大小
-      ex: 0.25, // 相对于字符'x'的高度
-      ic: 0.125, // 相对于表意字符的宽度
-      lh: 0.125, // 相对于行高
-      rem: 0.125, // 相对于根元素的字体大小
-      rlh: 0.125, // 相对于根元素的行高
-    };
-
-    // 绝对长度单位的增加值
-    const absoluteUnits: Record<string, number> = {
-      Q: 1.28, // 四分之一毫米
-      cm: 0.032, // 厘米
-      in: 0.0125, // 英寸
-      mm: 0.32, // 毫米
-      pc: 0.125, // 派卡
-      pt: 1.5, // 点
-      px: 2, // 像素
-    };
-
-    // 视口相关单位的增加比例
-    const viewportUnits: Record<string, number> = {
-      dvb: 0.125, // 动态视口块方向尺寸的1%
-      dvh: 0.125, // 动态视口高度的1%
-      dvi: 0.125, // 动态视口内联方向尺寸的1%
-      dvmax: 0.125, // 动态视口较大尺寸的1%
-      dvmin: 0.125, // 动态视口较小尺寸的1%
-      dvw: 0.125, // 动态视口宽度的1%
-      vb: 0.125, // 视口块方向尺寸的1%
-      vh: 0.125, // 视口高度的1%
-      vi: 0.125, // 视口内联方向尺寸的1%
-      vmax: 0.125, // 视口较大尺寸的1%
-      vmin: 0.125, // 视口较小尺寸的1%
-      vw: 0.125, // 视口宽度的1%
-    };
-
-    // 容器查询单位的增加比例
-    const containerUnits: Record<string, number> = {
-      cqb: 0.125, // 容器查询块尺寸的1%
-      cqh: 0.125, // 容器查询高度的1%
-      cqi: 0.125, // 容器查询内联尺寸的1%
-      cqmax: 0.125, // 容器查询较大尺寸的1%
-      cqmin: 0.125, // 容器查询较小尺寸的1%
-      cqw: 0.125, // 容器查询宽度的1%
-    };
-
-    // 合并所有单位的处理规则
-    const allUnits = {
-      ...relativeUnits,
-      ...absoluteUnits,
-      ...viewportUnits,
-      ...containerUnits,
-    };
-
-    if (unit in allUnits) {
-      const increment = allUnits[unit];
-
-      // 对于绝对单位直接加上增量，对于相对单位增加相应比例
-      const newValue =
-        unit in absoluteUnits
-          ? numericValue + increment
-          : numericValue * (1 + increment);
-
-      // 移除末尾的零和不必要的小数点
-      return `${Number(newValue.toFixed(3))}${unit}`;
-    }
-
-    // 对于未知单位，返回原值
-    return fontSize;
-  };
-
-  const onIncreaseFontSize = (e: React.MouseEvent<HTMLButtonElement>) => {
-    e.preventDefault();
-
-    if (!editor.selection) return;
-
-    const entry = getNodeEntry<TText>(editor, editor.selection.focus);
-
-    if (!entry) return;
-
-    const [text] = entry;
-
-    const fontSize = getFontSize(text);
-
-    setMarks(editor, { [FontSizePlugin.key]: getIncreasedFontSize(fontSize) });
-
-    focusEditor(editor);
-  };
-
-  const onDecreaseFontSize = () => {};
-
-  return (
-    <div className="flex items-center gap-1 rounded-md bg-muted/70 p-0">
-      <ToolbarButton onClick={onIncreaseFontSize}>
-        <Plus />
-      </ToolbarButton>
-      <ToolbarButton>{fontSize as string}</ToolbarButton>
-      <ToolbarButton onClick={onDecreaseFontSize}>
-        <Minus />
-      </ToolbarButton>
-    </div>
-  );
-};
diff --git a/yarn.lock b/yarn.lock
index 9f3010b155..d260d60980 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1135,18 +1135,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@effect/platform@npm:0.69.8":
-  version: 0.69.8
-  resolution: "@effect/platform@npm:0.69.8"
-  dependencies:
-    find-my-way-ts: "npm:^0.1.5"
-    multipasta: "npm:^0.2.5"
-  peerDependencies:
-    effect: ^3.10.3
-  checksum: 10c0/23028c02a15d8504369d301ed49f42157ebcee2bc4caddf473f35231a725dfa75eb5363add2d686d5dec58bd500559b787a61827d423fb448a6b2dddf65d605c
-  languageName: node
-  linkType: hard
-
 "@emnapi/runtime@npm:^1.2.0":
   version: 1.3.1
   resolution: "@emnapi/runtime@npm:1.3.1"
@@ -7408,41 +7396,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@uploadthing/mime-types@npm:0.3.1":
-  version: 0.3.1
-  resolution: "@uploadthing/mime-types@npm:0.3.1"
-  checksum: 10c0/40acf3ce6427c979e8e8a9fc60169fee35c6b6b504d8ed462d62579f9f57a940c3b0afd9e387cec03247b86772fcfc93ba7539fa07cb43a9698c18dbdff5802f
-  languageName: node
-  linkType: hard
-
-"@uploadthing/react@npm:7.1.0":
-  version: 7.1.0
-  resolution: "@uploadthing/react@npm:7.1.0"
-  dependencies:
-    "@uploadthing/shared": "npm:7.1.0"
-    file-selector: "npm:0.6.0"
-  peerDependencies:
-    next: "*"
-    react: ^17.0.2 || ^18.0.0
-    uploadthing: 7.2.0
-  peerDependenciesMeta:
-    next:
-      optional: true
-  checksum: 10c0/4ef6353e38a9dcbaf3078943ddb111b5a9cc682bc4436ba3c124a8b92afcfad39c195a77592bffab567abb296598e804254b47b6507e28fd73872f4ac853c7de
-  languageName: node
-  linkType: hard
-
-"@uploadthing/shared@npm:7.1.0":
-  version: 7.1.0
-  resolution: "@uploadthing/shared@npm:7.1.0"
-  dependencies:
-    "@uploadthing/mime-types": "npm:0.3.1"
-    effect: "npm:3.10.3"
-    sqids: "npm:^0.3.0"
-  checksum: 10c0/655d316470c288a237f6e4c749f45d81ebdaed1b3d2dc6813180fc0e500029874130b2adf9b29681cc395f435c4b4ec4061bb38c6d3abbbbb88af5282c12925c
-  languageName: node
-  linkType: hard
-
 "@vercel/og@npm:^0.6.2":
   version: 0.6.3
   resolution: "@vercel/og@npm:0.6.3"
@@ -9687,15 +9640,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"effect@npm:3.10.3":
-  version: 3.10.3
-  resolution: "effect@npm:3.10.3"
-  dependencies:
-    fast-check: "npm:^3.21.0"
-  checksum: 10c0/aa09e50b67c9bf90e4ab11e34d8c9163de46d1ec2baa84ff8ce180f06e3b45798578cb5dca3051bb42596404f8978e24bc912790a984af1921618aef22570ee7
-  languageName: node
-  linkType: hard
-
 "ejs@npm:^3.1.10":
   version: 3.1.10
   resolution: "ejs@npm:3.1.10"
@@ -11154,15 +11098,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"fast-check@npm:^3.21.0":
-  version: 3.23.1
-  resolution: "fast-check@npm:3.23.1"
-  dependencies:
-    pure-rand: "npm:^6.1.0"
-  checksum: 10c0/d61ee4a7a2e1abc5126bf2f1894413f532f686b3d1fc15c67fefb60dcca66024934b69a6454d3eba92e6568ac1abbb9882080e212d255865c3b3bbe52c5bf702
-  languageName: node
-  linkType: hard
-
 "fast-deep-equal@npm:^3.1.1, fast-deep-equal@npm:^3.1.3":
   version: 3.1.3
   resolution: "fast-deep-equal@npm:3.1.3"
@@ -11328,15 +11263,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"file-selector@npm:0.6.0":
-  version: 0.6.0
-  resolution: "file-selector@npm:0.6.0"
-  dependencies:
-    tslib: "npm:^2.4.0"
-  checksum: 10c0/477ca1b56274db9fee1a8a623c4bfef580389726a5fef843af8c1f2f17f70ec2d1e41b29115777c92e120a15f1cca734c6ef36bb48bfa2ee027c68da16cd0d28
-  languageName: node
-  linkType: hard
-
 "filelist@npm:^1.0.4":
   version: 1.0.4
   resolution: "filelist@npm:1.0.4"
@@ -11364,13 +11290,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"find-my-way-ts@npm:^0.1.5":
-  version: 0.1.5
-  resolution: "find-my-way-ts@npm:0.1.5"
-  checksum: 10c0/703797b8466e1fbf437f0a6f7e100e02ca5922c0d7afb0548b5e77fa9c7b4e4a5bed5d2589e27cc037a516b144e3ba334acce5369387a79975ffaf61b2900398
-  languageName: node
-  linkType: hard
-
 "find-process@npm:^1.4.7":
   version: 1.4.7
   resolution: "find-process@npm:1.4.7"
@@ -15974,13 +15893,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"multipasta@npm:^0.2.5":
-  version: 0.2.5
-  resolution: "multipasta@npm:0.2.5"
-  checksum: 10c0/f0790b1bdfc6b84ae6139982ead353957b668fe54fec8a4d93c19e9d051b02c837c93fbdff10b26bff2dbfcf7792c6435c27786c14ad82a0fb33b939c1bf96c6
-  languageName: node
-  linkType: hard
-
 "mz@npm:^2.7.0":
   version: 2.7.0
   resolution: "mz@npm:2.7.0"
@@ -17719,7 +17631,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"pure-rand@npm:^6.0.0, pure-rand@npm:^6.1.0":
+"pure-rand@npm:^6.0.0":
   version: 6.1.0
   resolution: "pure-rand@npm:6.1.0"
   checksum: 10c0/1abe217897bf74dcb3a0c9aba3555fe975023147b48db540aa2faf507aee91c03bf54f6aef0eb2bf59cc259a16d06b28eca37f0dc426d94f4692aeff02fb0e65
@@ -19703,13 +19615,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"sqids@npm:^0.3.0":
-  version: 0.3.0
-  resolution: "sqids@npm:0.3.0"
-  checksum: 10c0/2ce528b83f2780166b2e8025ece1e8262ee217ed51ab5656959cb6e1a885eee5b6ea86627ce6b0321d7b0eeb34a2ed455476c01c44e6e55e18cee52b3e1b9eb3
-  languageName: node
-  linkType: hard
-
 "ssri@npm:^10.0.0":
   version: 10.0.6
   resolution: "ssri@npm:10.0.6"
@@ -21376,35 +21281,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"uploadthing@npm:7.2.0":
-  version: 7.2.0
-  resolution: "uploadthing@npm:7.2.0"
-  dependencies:
-    "@effect/platform": "npm:0.69.8"
-    "@uploadthing/mime-types": "npm:0.3.1"
-    "@uploadthing/shared": "npm:7.1.0"
-    effect: "npm:3.10.3"
-  peerDependencies:
-    express: "*"
-    fastify: "*"
-    h3: "*"
-    next: "*"
-    tailwindcss: "*"
-  peerDependenciesMeta:
-    express:
-      optional: true
-    fastify:
-      optional: true
-    h3:
-      optional: true
-    next:
-      optional: true
-    tailwindcss:
-      optional: true
-  checksum: 10c0/49ee09f7fefd676c02597a618cff98c08b113398571ca9ab5748c69f3b56868e0c99579639aa0e59a496377b5de533b24fc38b65ea2fa95b97d82769f05b78b8
-  languageName: node
-  linkType: hard
-
 "uri-js@npm:^4.2.2":
   version: 4.4.1
   resolution: "uri-js@npm:4.4.1"
@@ -22168,7 +22044,6 @@ __metadata:
     "@udecode/slate-react": "workspace:^"
     "@udecode/slate-utils": "workspace:^"
     "@udecode/utils": "workspace:^"
-    "@uploadthing/react": "npm:7.1.0"
     "@vercel/og": "npm:^0.6.2"
     ai: "npm:^3.4.10"
     autoprefixer: "npm:^10.4.20"
@@ -22230,7 +22105,6 @@ __metadata:
     typescript: "npm:5.6.2"
     unist-builder: "npm:4.0.0"
     unist-util-visit: "npm:^5.0.0"
-    uploadthing: "npm:7.2.0"
     use-file-picker: "npm:2.1.2"
     vaul: "npm:0.9.0"
   languageName: unknown

From 54365e745ba9bed7bec8717b23c06add99e871ae Mon Sep 17 00:00:00 2001
From: Felix Feng <felixfeng33@gmail.com>
Date: Thu, 14 Nov 2024 18:59:08 +0800
Subject: [PATCH 14/34] fix ci

---
 apps/www/public/r/styles/default/ai-demo.json |  2 +-
 .../public/r/styles/default/align-demo.json   |  2 +-
 .../r/styles/default/basic-elements-demo.json |  2 +-
 .../r/styles/default/basic-marks-demo.json    |  2 +-
 .../r/styles/default/basic-nodes-demo.json    |  2 +-
 .../r/styles/default/block-menu-demo.json     |  2 +-
 .../styles/default/block-selection-demo.json  |  2 +-
 .../public/r/styles/default/column-demo.json  |  2 +-
 .../public/r/styles/default/comment-demo.json |  2 +-
 .../public/r/styles/default/copilot-demo.json |  2 +-
 .../public/r/styles/default/date-demo.json    |  2 +-
 .../www/public/r/styles/default/dnd-demo.json |  2 +-
 .../public/r/styles/default/dnd-plugins.json  |  2 +-
 apps/www/public/r/styles/default/editor.json  |  2 +-
 .../public/r/styles/default/emoji-demo.json   |  2 +-
 .../r/styles/default/excalidraw-demo.json     |  2 +-
 .../styles/default/fixed-toolbar-buttons.json |  2 +-
 .../default/fixed-toolbar-list-buttons.json   |  2 +-
 .../styles/default/floating-toolbar-demo.json |  2 +-
 .../public/r/styles/default/font-demo.json    |  2 +-
 .../r/styles/default/highlight-demo.json      |  2 +-
 apps/www/public/r/styles/default/hr-demo.json |  2 +-
 .../r/styles/default/image-element.json       |  2 +-
 .../public/r/styles/default/indent-demo.json  |  2 +-
 .../www/public/r/styles/default/kbd-demo.json |  2 +-
 .../r/styles/default/line-height-demo.json    |  2 +-
 .../public/r/styles/default/link-demo.json    |  2 +-
 .../public/r/styles/default/list-demo.json    |  2 +-
 .../public/r/styles/default/media-demo.json   |  2 +-
 .../r/styles/default/media-plugins.json       |  2 +-
 .../styles/default/media-toolbar-button.json  |  2 +-
 .../public/r/styles/default/mention-demo.json |  2 +-
 .../public/r/styles/default/mode-demo.json    |  2 +-
 .../r/styles/default/placeholder-demo.json    |  2 +-
 .../r/styles/default/playground-demo.json     |  2 +-
 .../r/styles/default/resizable-demo.json      |  2 +-
 .../r/styles/default/slash-command-demo.json  |  2 +-
 .../public/r/styles/default/table-demo.json   |  2 +-
 .../www/public/r/styles/default/toc-demo.json |  2 +-
 .../public/r/styles/default/toggle-demo.json  |  2 +-
 .../public/r/styles/default/toolbar-demo.json |  2 +-
 apps/www/public/r/styles/default/toolbar.json |  2 +-
 .../public/r/styles/default/upload-demo.json  |  2 +-
 .../default/example/cards/cards-toolbar.tsx   | 18 +++-
 .../plate-ui/media-floating-toolbar.tsx       |  2 +-
 .../lib/media-embed/BaseMediaEmbedPlugin.ts   | 83 +++++--------------
 packages/media/src/lib/media-embed/index.ts   |  1 -
 packages/media/src/lib/media/types.ts         |  4 -
 .../src/react/media/MediaEmbedPlugin.tsx      | 60 ++++++++++++++
 .../media}/hooks/index.ts                     |  0
 .../media}/hooks/useMediaEmbedEnter.ts        |  0
 .../media}/hooks/useMediaEmbedEscape.ts       |  2 +-
 .../media}/hooks/useMediaFloatingToolbar.ts   |  2 +-
 packages/media/src/react/media/index.ts       |  2 +
 packages/media/src/react/plugins.ts           |  3 -
 55 files changed, 145 insertions(+), 118 deletions(-)
 create mode 100644 packages/media/src/react/media/MediaEmbedPlugin.tsx
 rename packages/media/src/{lib/media-embed => react/media}/hooks/index.ts (100%)
 rename packages/media/src/{lib/media-embed => react/media}/hooks/useMediaEmbedEnter.ts (100%)
 rename packages/media/src/{lib/media-embed => react/media}/hooks/useMediaEmbedEscape.ts (87%)
 rename packages/media/src/{lib/media-embed => react/media}/hooks/useMediaFloatingToolbar.ts (97%)

diff --git a/apps/www/public/r/styles/default/ai-demo.json b/apps/www/public/r/styles/default/ai-demo.json
index ecff6d9e43..a4896c42f9 100644
--- a/apps/www/public/r/styles/default/ai-demo.json
+++ b/apps/www/public/r/styles/default/ai-demo.json
@@ -9,7 +9,7 @@
   },
   "files": [
     {
-      "content": "'use client';\n\nimport React from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { TablePlugin } from '@udecode/plate-table/react';\n\nimport { settingsStore } from '@/components/context/settings-store';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { autoformatPlugin as autoformatListPlugin } from '@/components/editor/plugins/autoformat-list-plugin';\nimport { autoformatPlugin } from '@/components/editor/plugins/autoformat-plugin';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { FixedToolbarListPlugin } from '@/components/editor/plugins/fixed-toolbar-list-plugin';\nimport { FixedToolbarPlugin } from '@/components/editor/plugins/fixed-toolbar-plugin';\nimport { FloatingToolbarPlugin } from '@/components/editor/plugins/floating-toolbar-plugin';\nimport { tabbablePlugin } from '@/components/editor/plugins/tabbable-plugin';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '') => {\n  const overridePlugins = usePlaygroundEnabled(id);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  const plugins: any[] = [\n    ...copilotPlugins,\n    ...editorPlugins,\n    id === 'list' ? FixedToolbarListPlugin : FixedToolbarPlugin,\n    FloatingToolbarPlugin,\n\n    id === 'list' ? autoformatListPlugin : autoformatPlugin,\n    TablePlugin.configure({\n      options: {\n        enableMerging: id === 'tableMerge',\n      },\n    }),\n    ListPlugin,\n    TodoListPlugin,\n    ExcalidrawPlugin,\n    NormalizeTypesPlugin.configure({\n      options: {\n        rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n      },\n    }),\n    SingleLinePlugin,\n\n    // Testing\n    PlaywrightPlugin.configure({\n      enabled: process.env.NODE_ENV !== 'production',\n    }),\n  ];\n\n  if (id === 'tabbable') {\n    plugins.push(tabbablePlugin);\n  }\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins,\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const editor = usePlaygroundEditor(id);\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <EditorContainer className={cn(id && 'h-[500px]', className)}>\n          <Editor\n            variant=\"demo\"\n            className={cn(id ? 'h-[calc(100%-37px)] pb-8' : 'pb-[20vh]')}\n            spellCheck={false}\n          />\n        </EditorContainer>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
+      "content": "'use client';\n\nimport React from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { PlaceholderPlugin } from '@udecode/plate-media/react';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { TablePlugin } from '@udecode/plate-table/react';\n\nimport { settingsStore } from '@/components/context/settings-store';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { autoformatPlugin as autoformatListPlugin } from '@/components/editor/plugins/autoformat-list-plugin';\nimport { autoformatPlugin } from '@/components/editor/plugins/autoformat-plugin';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { FixedToolbarListPlugin } from '@/components/editor/plugins/fixed-toolbar-list-plugin';\nimport { FixedToolbarPlugin } from '@/components/editor/plugins/fixed-toolbar-plugin';\nimport { FloatingToolbarPlugin } from '@/components/editor/plugins/floating-toolbar-plugin';\nimport { tabbablePlugin } from '@/components/editor/plugins/tabbable-plugin';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { MediaPlaceholderElement } from '@/components/plate-ui/media-placeholder-element';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '') => {\n  const overridePlugins = usePlaygroundEnabled(id);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  const plugins: any[] = [\n    ...copilotPlugins,\n    ...editorPlugins,\n    id === 'list' ? FixedToolbarListPlugin : FixedToolbarPlugin,\n    FloatingToolbarPlugin,\n\n    id === 'list' ? autoformatListPlugin : autoformatPlugin,\n    TablePlugin.configure({\n      options: {\n        enableMerging: id === 'tableMerge',\n      },\n    }),\n    ListPlugin,\n    TodoListPlugin,\n    ExcalidrawPlugin,\n    NormalizeTypesPlugin.configure({\n      options: {\n        rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n      },\n    }),\n    SingleLinePlugin,\n    PlaceholderPlugin.withComponent(MediaPlaceholderElement),\n    // Testing\n    PlaywrightPlugin.configure({\n      enabled: process.env.NODE_ENV !== 'production',\n    }),\n  ];\n\n  if (id === 'tabbable') {\n    plugins.push(tabbablePlugin);\n  }\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins,\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const editor = usePlaygroundEditor(id);\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <EditorContainer className={cn(id && 'h-[500px]', className)}>\n          <Editor\n            variant=\"demo\"\n            className={cn(id ? 'h-[calc(100%-37px)] pb-8' : 'pb-[20vh]')}\n            spellCheck={false}\n          />\n        </EditorContainer>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
       "path": "example/playground-demo.tsx",
       "target": "components/playground-demo.tsx",
       "type": "registry:example"
diff --git a/apps/www/public/r/styles/default/align-demo.json b/apps/www/public/r/styles/default/align-demo.json
index c5b322ef98..c81a4bbca8 100644
--- a/apps/www/public/r/styles/default/align-demo.json
+++ b/apps/www/public/r/styles/default/align-demo.json
@@ -4,7 +4,7 @@
   },
   "files": [
     {
-      "content": "'use client';\n\nimport React from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { TablePlugin } from '@udecode/plate-table/react';\n\nimport { settingsStore } from '@/components/context/settings-store';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { autoformatPlugin as autoformatListPlugin } from '@/components/editor/plugins/autoformat-list-plugin';\nimport { autoformatPlugin } from '@/components/editor/plugins/autoformat-plugin';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { FixedToolbarListPlugin } from '@/components/editor/plugins/fixed-toolbar-list-plugin';\nimport { FixedToolbarPlugin } from '@/components/editor/plugins/fixed-toolbar-plugin';\nimport { FloatingToolbarPlugin } from '@/components/editor/plugins/floating-toolbar-plugin';\nimport { tabbablePlugin } from '@/components/editor/plugins/tabbable-plugin';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '') => {\n  const overridePlugins = usePlaygroundEnabled(id);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  const plugins: any[] = [\n    ...copilotPlugins,\n    ...editorPlugins,\n    id === 'list' ? FixedToolbarListPlugin : FixedToolbarPlugin,\n    FloatingToolbarPlugin,\n\n    id === 'list' ? autoformatListPlugin : autoformatPlugin,\n    TablePlugin.configure({\n      options: {\n        enableMerging: id === 'tableMerge',\n      },\n    }),\n    ListPlugin,\n    TodoListPlugin,\n    ExcalidrawPlugin,\n    NormalizeTypesPlugin.configure({\n      options: {\n        rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n      },\n    }),\n    SingleLinePlugin,\n\n    // Testing\n    PlaywrightPlugin.configure({\n      enabled: process.env.NODE_ENV !== 'production',\n    }),\n  ];\n\n  if (id === 'tabbable') {\n    plugins.push(tabbablePlugin);\n  }\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins,\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const editor = usePlaygroundEditor(id);\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <EditorContainer className={cn(id && 'h-[500px]', className)}>\n          <Editor\n            variant=\"demo\"\n            className={cn(id ? 'h-[calc(100%-37px)] pb-8' : 'pb-[20vh]')}\n            spellCheck={false}\n          />\n        </EditorContainer>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
+      "content": "'use client';\n\nimport React from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { PlaceholderPlugin } from '@udecode/plate-media/react';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { TablePlugin } from '@udecode/plate-table/react';\n\nimport { settingsStore } from '@/components/context/settings-store';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { autoformatPlugin as autoformatListPlugin } from '@/components/editor/plugins/autoformat-list-plugin';\nimport { autoformatPlugin } from '@/components/editor/plugins/autoformat-plugin';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { FixedToolbarListPlugin } from '@/components/editor/plugins/fixed-toolbar-list-plugin';\nimport { FixedToolbarPlugin } from '@/components/editor/plugins/fixed-toolbar-plugin';\nimport { FloatingToolbarPlugin } from '@/components/editor/plugins/floating-toolbar-plugin';\nimport { tabbablePlugin } from '@/components/editor/plugins/tabbable-plugin';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { MediaPlaceholderElement } from '@/components/plate-ui/media-placeholder-element';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '') => {\n  const overridePlugins = usePlaygroundEnabled(id);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  const plugins: any[] = [\n    ...copilotPlugins,\n    ...editorPlugins,\n    id === 'list' ? FixedToolbarListPlugin : FixedToolbarPlugin,\n    FloatingToolbarPlugin,\n\n    id === 'list' ? autoformatListPlugin : autoformatPlugin,\n    TablePlugin.configure({\n      options: {\n        enableMerging: id === 'tableMerge',\n      },\n    }),\n    ListPlugin,\n    TodoListPlugin,\n    ExcalidrawPlugin,\n    NormalizeTypesPlugin.configure({\n      options: {\n        rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n      },\n    }),\n    SingleLinePlugin,\n    PlaceholderPlugin.withComponent(MediaPlaceholderElement),\n    // Testing\n    PlaywrightPlugin.configure({\n      enabled: process.env.NODE_ENV !== 'production',\n    }),\n  ];\n\n  if (id === 'tabbable') {\n    plugins.push(tabbablePlugin);\n  }\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins,\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const editor = usePlaygroundEditor(id);\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <EditorContainer className={cn(id && 'h-[500px]', className)}>\n          <Editor\n            variant=\"demo\"\n            className={cn(id ? 'h-[calc(100%-37px)] pb-8' : 'pb-[20vh]')}\n            spellCheck={false}\n          />\n        </EditorContainer>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
       "path": "example/playground-demo.tsx",
       "target": "components/playground-demo.tsx",
       "type": "registry:example"
diff --git a/apps/www/public/r/styles/default/basic-elements-demo.json b/apps/www/public/r/styles/default/basic-elements-demo.json
index c54d260ca4..f4efe8772b 100644
--- a/apps/www/public/r/styles/default/basic-elements-demo.json
+++ b/apps/www/public/r/styles/default/basic-elements-demo.json
@@ -4,7 +4,7 @@
   },
   "files": [
     {
-      "content": "'use client';\n\nimport React from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { TablePlugin } from '@udecode/plate-table/react';\n\nimport { settingsStore } from '@/components/context/settings-store';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { autoformatPlugin as autoformatListPlugin } from '@/components/editor/plugins/autoformat-list-plugin';\nimport { autoformatPlugin } from '@/components/editor/plugins/autoformat-plugin';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { FixedToolbarListPlugin } from '@/components/editor/plugins/fixed-toolbar-list-plugin';\nimport { FixedToolbarPlugin } from '@/components/editor/plugins/fixed-toolbar-plugin';\nimport { FloatingToolbarPlugin } from '@/components/editor/plugins/floating-toolbar-plugin';\nimport { tabbablePlugin } from '@/components/editor/plugins/tabbable-plugin';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '') => {\n  const overridePlugins = usePlaygroundEnabled(id);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  const plugins: any[] = [\n    ...copilotPlugins,\n    ...editorPlugins,\n    id === 'list' ? FixedToolbarListPlugin : FixedToolbarPlugin,\n    FloatingToolbarPlugin,\n\n    id === 'list' ? autoformatListPlugin : autoformatPlugin,\n    TablePlugin.configure({\n      options: {\n        enableMerging: id === 'tableMerge',\n      },\n    }),\n    ListPlugin,\n    TodoListPlugin,\n    ExcalidrawPlugin,\n    NormalizeTypesPlugin.configure({\n      options: {\n        rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n      },\n    }),\n    SingleLinePlugin,\n\n    // Testing\n    PlaywrightPlugin.configure({\n      enabled: process.env.NODE_ENV !== 'production',\n    }),\n  ];\n\n  if (id === 'tabbable') {\n    plugins.push(tabbablePlugin);\n  }\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins,\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const editor = usePlaygroundEditor(id);\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <EditorContainer className={cn(id && 'h-[500px]', className)}>\n          <Editor\n            variant=\"demo\"\n            className={cn(id ? 'h-[calc(100%-37px)] pb-8' : 'pb-[20vh]')}\n            spellCheck={false}\n          />\n        </EditorContainer>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
+      "content": "'use client';\n\nimport React from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { PlaceholderPlugin } from '@udecode/plate-media/react';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { TablePlugin } from '@udecode/plate-table/react';\n\nimport { settingsStore } from '@/components/context/settings-store';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { autoformatPlugin as autoformatListPlugin } from '@/components/editor/plugins/autoformat-list-plugin';\nimport { autoformatPlugin } from '@/components/editor/plugins/autoformat-plugin';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { FixedToolbarListPlugin } from '@/components/editor/plugins/fixed-toolbar-list-plugin';\nimport { FixedToolbarPlugin } from '@/components/editor/plugins/fixed-toolbar-plugin';\nimport { FloatingToolbarPlugin } from '@/components/editor/plugins/floating-toolbar-plugin';\nimport { tabbablePlugin } from '@/components/editor/plugins/tabbable-plugin';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { MediaPlaceholderElement } from '@/components/plate-ui/media-placeholder-element';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '') => {\n  const overridePlugins = usePlaygroundEnabled(id);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  const plugins: any[] = [\n    ...copilotPlugins,\n    ...editorPlugins,\n    id === 'list' ? FixedToolbarListPlugin : FixedToolbarPlugin,\n    FloatingToolbarPlugin,\n\n    id === 'list' ? autoformatListPlugin : autoformatPlugin,\n    TablePlugin.configure({\n      options: {\n        enableMerging: id === 'tableMerge',\n      },\n    }),\n    ListPlugin,\n    TodoListPlugin,\n    ExcalidrawPlugin,\n    NormalizeTypesPlugin.configure({\n      options: {\n        rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n      },\n    }),\n    SingleLinePlugin,\n    PlaceholderPlugin.withComponent(MediaPlaceholderElement),\n    // Testing\n    PlaywrightPlugin.configure({\n      enabled: process.env.NODE_ENV !== 'production',\n    }),\n  ];\n\n  if (id === 'tabbable') {\n    plugins.push(tabbablePlugin);\n  }\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins,\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const editor = usePlaygroundEditor(id);\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <EditorContainer className={cn(id && 'h-[500px]', className)}>\n          <Editor\n            variant=\"demo\"\n            className={cn(id ? 'h-[calc(100%-37px)] pb-8' : 'pb-[20vh]')}\n            spellCheck={false}\n          />\n        </EditorContainer>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
       "path": "example/playground-demo.tsx",
       "target": "components/playground-demo.tsx",
       "type": "registry:example"
diff --git a/apps/www/public/r/styles/default/basic-marks-demo.json b/apps/www/public/r/styles/default/basic-marks-demo.json
index 65af5ecb00..3b164047f1 100644
--- a/apps/www/public/r/styles/default/basic-marks-demo.json
+++ b/apps/www/public/r/styles/default/basic-marks-demo.json
@@ -4,7 +4,7 @@
   },
   "files": [
     {
-      "content": "'use client';\n\nimport React from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { TablePlugin } from '@udecode/plate-table/react';\n\nimport { settingsStore } from '@/components/context/settings-store';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { autoformatPlugin as autoformatListPlugin } from '@/components/editor/plugins/autoformat-list-plugin';\nimport { autoformatPlugin } from '@/components/editor/plugins/autoformat-plugin';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { FixedToolbarListPlugin } from '@/components/editor/plugins/fixed-toolbar-list-plugin';\nimport { FixedToolbarPlugin } from '@/components/editor/plugins/fixed-toolbar-plugin';\nimport { FloatingToolbarPlugin } from '@/components/editor/plugins/floating-toolbar-plugin';\nimport { tabbablePlugin } from '@/components/editor/plugins/tabbable-plugin';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '') => {\n  const overridePlugins = usePlaygroundEnabled(id);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  const plugins: any[] = [\n    ...copilotPlugins,\n    ...editorPlugins,\n    id === 'list' ? FixedToolbarListPlugin : FixedToolbarPlugin,\n    FloatingToolbarPlugin,\n\n    id === 'list' ? autoformatListPlugin : autoformatPlugin,\n    TablePlugin.configure({\n      options: {\n        enableMerging: id === 'tableMerge',\n      },\n    }),\n    ListPlugin,\n    TodoListPlugin,\n    ExcalidrawPlugin,\n    NormalizeTypesPlugin.configure({\n      options: {\n        rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n      },\n    }),\n    SingleLinePlugin,\n\n    // Testing\n    PlaywrightPlugin.configure({\n      enabled: process.env.NODE_ENV !== 'production',\n    }),\n  ];\n\n  if (id === 'tabbable') {\n    plugins.push(tabbablePlugin);\n  }\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins,\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const editor = usePlaygroundEditor(id);\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <EditorContainer className={cn(id && 'h-[500px]', className)}>\n          <Editor\n            variant=\"demo\"\n            className={cn(id ? 'h-[calc(100%-37px)] pb-8' : 'pb-[20vh]')}\n            spellCheck={false}\n          />\n        </EditorContainer>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
+      "content": "'use client';\n\nimport React from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { PlaceholderPlugin } from '@udecode/plate-media/react';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { TablePlugin } from '@udecode/plate-table/react';\n\nimport { settingsStore } from '@/components/context/settings-store';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { autoformatPlugin as autoformatListPlugin } from '@/components/editor/plugins/autoformat-list-plugin';\nimport { autoformatPlugin } from '@/components/editor/plugins/autoformat-plugin';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { FixedToolbarListPlugin } from '@/components/editor/plugins/fixed-toolbar-list-plugin';\nimport { FixedToolbarPlugin } from '@/components/editor/plugins/fixed-toolbar-plugin';\nimport { FloatingToolbarPlugin } from '@/components/editor/plugins/floating-toolbar-plugin';\nimport { tabbablePlugin } from '@/components/editor/plugins/tabbable-plugin';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { MediaPlaceholderElement } from '@/components/plate-ui/media-placeholder-element';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '') => {\n  const overridePlugins = usePlaygroundEnabled(id);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  const plugins: any[] = [\n    ...copilotPlugins,\n    ...editorPlugins,\n    id === 'list' ? FixedToolbarListPlugin : FixedToolbarPlugin,\n    FloatingToolbarPlugin,\n\n    id === 'list' ? autoformatListPlugin : autoformatPlugin,\n    TablePlugin.configure({\n      options: {\n        enableMerging: id === 'tableMerge',\n      },\n    }),\n    ListPlugin,\n    TodoListPlugin,\n    ExcalidrawPlugin,\n    NormalizeTypesPlugin.configure({\n      options: {\n        rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n      },\n    }),\n    SingleLinePlugin,\n    PlaceholderPlugin.withComponent(MediaPlaceholderElement),\n    // Testing\n    PlaywrightPlugin.configure({\n      enabled: process.env.NODE_ENV !== 'production',\n    }),\n  ];\n\n  if (id === 'tabbable') {\n    plugins.push(tabbablePlugin);\n  }\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins,\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const editor = usePlaygroundEditor(id);\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <EditorContainer className={cn(id && 'h-[500px]', className)}>\n          <Editor\n            variant=\"demo\"\n            className={cn(id ? 'h-[calc(100%-37px)] pb-8' : 'pb-[20vh]')}\n            spellCheck={false}\n          />\n        </EditorContainer>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
       "path": "example/playground-demo.tsx",
       "target": "components/playground-demo.tsx",
       "type": "registry:example"
diff --git a/apps/www/public/r/styles/default/basic-nodes-demo.json b/apps/www/public/r/styles/default/basic-nodes-demo.json
index 28e91fbc43..60a4019cb4 100644
--- a/apps/www/public/r/styles/default/basic-nodes-demo.json
+++ b/apps/www/public/r/styles/default/basic-nodes-demo.json
@@ -8,7 +8,7 @@
   },
   "files": [
     {
-      "content": "'use client';\n\nimport React from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { TablePlugin } from '@udecode/plate-table/react';\n\nimport { settingsStore } from '@/components/context/settings-store';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { autoformatPlugin as autoformatListPlugin } from '@/components/editor/plugins/autoformat-list-plugin';\nimport { autoformatPlugin } from '@/components/editor/plugins/autoformat-plugin';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { FixedToolbarListPlugin } from '@/components/editor/plugins/fixed-toolbar-list-plugin';\nimport { FixedToolbarPlugin } from '@/components/editor/plugins/fixed-toolbar-plugin';\nimport { FloatingToolbarPlugin } from '@/components/editor/plugins/floating-toolbar-plugin';\nimport { tabbablePlugin } from '@/components/editor/plugins/tabbable-plugin';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '') => {\n  const overridePlugins = usePlaygroundEnabled(id);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  const plugins: any[] = [\n    ...copilotPlugins,\n    ...editorPlugins,\n    id === 'list' ? FixedToolbarListPlugin : FixedToolbarPlugin,\n    FloatingToolbarPlugin,\n\n    id === 'list' ? autoformatListPlugin : autoformatPlugin,\n    TablePlugin.configure({\n      options: {\n        enableMerging: id === 'tableMerge',\n      },\n    }),\n    ListPlugin,\n    TodoListPlugin,\n    ExcalidrawPlugin,\n    NormalizeTypesPlugin.configure({\n      options: {\n        rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n      },\n    }),\n    SingleLinePlugin,\n\n    // Testing\n    PlaywrightPlugin.configure({\n      enabled: process.env.NODE_ENV !== 'production',\n    }),\n  ];\n\n  if (id === 'tabbable') {\n    plugins.push(tabbablePlugin);\n  }\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins,\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const editor = usePlaygroundEditor(id);\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <EditorContainer className={cn(id && 'h-[500px]', className)}>\n          <Editor\n            variant=\"demo\"\n            className={cn(id ? 'h-[calc(100%-37px)] pb-8' : 'pb-[20vh]')}\n            spellCheck={false}\n          />\n        </EditorContainer>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
+      "content": "'use client';\n\nimport React from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { PlaceholderPlugin } from '@udecode/plate-media/react';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { TablePlugin } from '@udecode/plate-table/react';\n\nimport { settingsStore } from '@/components/context/settings-store';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { autoformatPlugin as autoformatListPlugin } from '@/components/editor/plugins/autoformat-list-plugin';\nimport { autoformatPlugin } from '@/components/editor/plugins/autoformat-plugin';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { FixedToolbarListPlugin } from '@/components/editor/plugins/fixed-toolbar-list-plugin';\nimport { FixedToolbarPlugin } from '@/components/editor/plugins/fixed-toolbar-plugin';\nimport { FloatingToolbarPlugin } from '@/components/editor/plugins/floating-toolbar-plugin';\nimport { tabbablePlugin } from '@/components/editor/plugins/tabbable-plugin';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { MediaPlaceholderElement } from '@/components/plate-ui/media-placeholder-element';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '') => {\n  const overridePlugins = usePlaygroundEnabled(id);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  const plugins: any[] = [\n    ...copilotPlugins,\n    ...editorPlugins,\n    id === 'list' ? FixedToolbarListPlugin : FixedToolbarPlugin,\n    FloatingToolbarPlugin,\n\n    id === 'list' ? autoformatListPlugin : autoformatPlugin,\n    TablePlugin.configure({\n      options: {\n        enableMerging: id === 'tableMerge',\n      },\n    }),\n    ListPlugin,\n    TodoListPlugin,\n    ExcalidrawPlugin,\n    NormalizeTypesPlugin.configure({\n      options: {\n        rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n      },\n    }),\n    SingleLinePlugin,\n    PlaceholderPlugin.withComponent(MediaPlaceholderElement),\n    // Testing\n    PlaywrightPlugin.configure({\n      enabled: process.env.NODE_ENV !== 'production',\n    }),\n  ];\n\n  if (id === 'tabbable') {\n    plugins.push(tabbablePlugin);\n  }\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins,\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const editor = usePlaygroundEditor(id);\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <EditorContainer className={cn(id && 'h-[500px]', className)}>\n          <Editor\n            variant=\"demo\"\n            className={cn(id ? 'h-[calc(100%-37px)] pb-8' : 'pb-[20vh]')}\n            spellCheck={false}\n          />\n        </EditorContainer>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
       "path": "example/playground-demo.tsx",
       "target": "components/playground-demo.tsx",
       "type": "registry:example"
diff --git a/apps/www/public/r/styles/default/block-menu-demo.json b/apps/www/public/r/styles/default/block-menu-demo.json
index 27ede9fd07..31962b2388 100644
--- a/apps/www/public/r/styles/default/block-menu-demo.json
+++ b/apps/www/public/r/styles/default/block-menu-demo.json
@@ -4,7 +4,7 @@
   },
   "files": [
     {
-      "content": "'use client';\n\nimport React from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { TablePlugin } from '@udecode/plate-table/react';\n\nimport { settingsStore } from '@/components/context/settings-store';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { autoformatPlugin as autoformatListPlugin } from '@/components/editor/plugins/autoformat-list-plugin';\nimport { autoformatPlugin } from '@/components/editor/plugins/autoformat-plugin';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { FixedToolbarListPlugin } from '@/components/editor/plugins/fixed-toolbar-list-plugin';\nimport { FixedToolbarPlugin } from '@/components/editor/plugins/fixed-toolbar-plugin';\nimport { FloatingToolbarPlugin } from '@/components/editor/plugins/floating-toolbar-plugin';\nimport { tabbablePlugin } from '@/components/editor/plugins/tabbable-plugin';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '') => {\n  const overridePlugins = usePlaygroundEnabled(id);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  const plugins: any[] = [\n    ...copilotPlugins,\n    ...editorPlugins,\n    id === 'list' ? FixedToolbarListPlugin : FixedToolbarPlugin,\n    FloatingToolbarPlugin,\n\n    id === 'list' ? autoformatListPlugin : autoformatPlugin,\n    TablePlugin.configure({\n      options: {\n        enableMerging: id === 'tableMerge',\n      },\n    }),\n    ListPlugin,\n    TodoListPlugin,\n    ExcalidrawPlugin,\n    NormalizeTypesPlugin.configure({\n      options: {\n        rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n      },\n    }),\n    SingleLinePlugin,\n\n    // Testing\n    PlaywrightPlugin.configure({\n      enabled: process.env.NODE_ENV !== 'production',\n    }),\n  ];\n\n  if (id === 'tabbable') {\n    plugins.push(tabbablePlugin);\n  }\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins,\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const editor = usePlaygroundEditor(id);\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <EditorContainer className={cn(id && 'h-[500px]', className)}>\n          <Editor\n            variant=\"demo\"\n            className={cn(id ? 'h-[calc(100%-37px)] pb-8' : 'pb-[20vh]')}\n            spellCheck={false}\n          />\n        </EditorContainer>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
+      "content": "'use client';\n\nimport React from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { PlaceholderPlugin } from '@udecode/plate-media/react';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { TablePlugin } from '@udecode/plate-table/react';\n\nimport { settingsStore } from '@/components/context/settings-store';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { autoformatPlugin as autoformatListPlugin } from '@/components/editor/plugins/autoformat-list-plugin';\nimport { autoformatPlugin } from '@/components/editor/plugins/autoformat-plugin';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { FixedToolbarListPlugin } from '@/components/editor/plugins/fixed-toolbar-list-plugin';\nimport { FixedToolbarPlugin } from '@/components/editor/plugins/fixed-toolbar-plugin';\nimport { FloatingToolbarPlugin } from '@/components/editor/plugins/floating-toolbar-plugin';\nimport { tabbablePlugin } from '@/components/editor/plugins/tabbable-plugin';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { MediaPlaceholderElement } from '@/components/plate-ui/media-placeholder-element';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '') => {\n  const overridePlugins = usePlaygroundEnabled(id);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  const plugins: any[] = [\n    ...copilotPlugins,\n    ...editorPlugins,\n    id === 'list' ? FixedToolbarListPlugin : FixedToolbarPlugin,\n    FloatingToolbarPlugin,\n\n    id === 'list' ? autoformatListPlugin : autoformatPlugin,\n    TablePlugin.configure({\n      options: {\n        enableMerging: id === 'tableMerge',\n      },\n    }),\n    ListPlugin,\n    TodoListPlugin,\n    ExcalidrawPlugin,\n    NormalizeTypesPlugin.configure({\n      options: {\n        rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n      },\n    }),\n    SingleLinePlugin,\n    PlaceholderPlugin.withComponent(MediaPlaceholderElement),\n    // Testing\n    PlaywrightPlugin.configure({\n      enabled: process.env.NODE_ENV !== 'production',\n    }),\n  ];\n\n  if (id === 'tabbable') {\n    plugins.push(tabbablePlugin);\n  }\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins,\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const editor = usePlaygroundEditor(id);\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <EditorContainer className={cn(id && 'h-[500px]', className)}>\n          <Editor\n            variant=\"demo\"\n            className={cn(id ? 'h-[calc(100%-37px)] pb-8' : 'pb-[20vh]')}\n            spellCheck={false}\n          />\n        </EditorContainer>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
       "path": "example/playground-demo.tsx",
       "target": "components/playground-demo.tsx",
       "type": "registry:example"
diff --git a/apps/www/public/r/styles/default/block-selection-demo.json b/apps/www/public/r/styles/default/block-selection-demo.json
index 78272559ff..6eabe6b51e 100644
--- a/apps/www/public/r/styles/default/block-selection-demo.json
+++ b/apps/www/public/r/styles/default/block-selection-demo.json
@@ -4,7 +4,7 @@
   },
   "files": [
     {
-      "content": "'use client';\n\nimport React from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { TablePlugin } from '@udecode/plate-table/react';\n\nimport { settingsStore } from '@/components/context/settings-store';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { autoformatPlugin as autoformatListPlugin } from '@/components/editor/plugins/autoformat-list-plugin';\nimport { autoformatPlugin } from '@/components/editor/plugins/autoformat-plugin';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { FixedToolbarListPlugin } from '@/components/editor/plugins/fixed-toolbar-list-plugin';\nimport { FixedToolbarPlugin } from '@/components/editor/plugins/fixed-toolbar-plugin';\nimport { FloatingToolbarPlugin } from '@/components/editor/plugins/floating-toolbar-plugin';\nimport { tabbablePlugin } from '@/components/editor/plugins/tabbable-plugin';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '') => {\n  const overridePlugins = usePlaygroundEnabled(id);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  const plugins: any[] = [\n    ...copilotPlugins,\n    ...editorPlugins,\n    id === 'list' ? FixedToolbarListPlugin : FixedToolbarPlugin,\n    FloatingToolbarPlugin,\n\n    id === 'list' ? autoformatListPlugin : autoformatPlugin,\n    TablePlugin.configure({\n      options: {\n        enableMerging: id === 'tableMerge',\n      },\n    }),\n    ListPlugin,\n    TodoListPlugin,\n    ExcalidrawPlugin,\n    NormalizeTypesPlugin.configure({\n      options: {\n        rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n      },\n    }),\n    SingleLinePlugin,\n\n    // Testing\n    PlaywrightPlugin.configure({\n      enabled: process.env.NODE_ENV !== 'production',\n    }),\n  ];\n\n  if (id === 'tabbable') {\n    plugins.push(tabbablePlugin);\n  }\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins,\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const editor = usePlaygroundEditor(id);\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <EditorContainer className={cn(id && 'h-[500px]', className)}>\n          <Editor\n            variant=\"demo\"\n            className={cn(id ? 'h-[calc(100%-37px)] pb-8' : 'pb-[20vh]')}\n            spellCheck={false}\n          />\n        </EditorContainer>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
+      "content": "'use client';\n\nimport React from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { PlaceholderPlugin } from '@udecode/plate-media/react';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { TablePlugin } from '@udecode/plate-table/react';\n\nimport { settingsStore } from '@/components/context/settings-store';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { autoformatPlugin as autoformatListPlugin } from '@/components/editor/plugins/autoformat-list-plugin';\nimport { autoformatPlugin } from '@/components/editor/plugins/autoformat-plugin';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { FixedToolbarListPlugin } from '@/components/editor/plugins/fixed-toolbar-list-plugin';\nimport { FixedToolbarPlugin } from '@/components/editor/plugins/fixed-toolbar-plugin';\nimport { FloatingToolbarPlugin } from '@/components/editor/plugins/floating-toolbar-plugin';\nimport { tabbablePlugin } from '@/components/editor/plugins/tabbable-plugin';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { MediaPlaceholderElement } from '@/components/plate-ui/media-placeholder-element';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '') => {\n  const overridePlugins = usePlaygroundEnabled(id);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  const plugins: any[] = [\n    ...copilotPlugins,\n    ...editorPlugins,\n    id === 'list' ? FixedToolbarListPlugin : FixedToolbarPlugin,\n    FloatingToolbarPlugin,\n\n    id === 'list' ? autoformatListPlugin : autoformatPlugin,\n    TablePlugin.configure({\n      options: {\n        enableMerging: id === 'tableMerge',\n      },\n    }),\n    ListPlugin,\n    TodoListPlugin,\n    ExcalidrawPlugin,\n    NormalizeTypesPlugin.configure({\n      options: {\n        rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n      },\n    }),\n    SingleLinePlugin,\n    PlaceholderPlugin.withComponent(MediaPlaceholderElement),\n    // Testing\n    PlaywrightPlugin.configure({\n      enabled: process.env.NODE_ENV !== 'production',\n    }),\n  ];\n\n  if (id === 'tabbable') {\n    plugins.push(tabbablePlugin);\n  }\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins,\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const editor = usePlaygroundEditor(id);\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <EditorContainer className={cn(id && 'h-[500px]', className)}>\n          <Editor\n            variant=\"demo\"\n            className={cn(id ? 'h-[calc(100%-37px)] pb-8' : 'pb-[20vh]')}\n            spellCheck={false}\n          />\n        </EditorContainer>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
       "path": "example/playground-demo.tsx",
       "target": "components/playground-demo.tsx",
       "type": "registry:example"
diff --git a/apps/www/public/r/styles/default/column-demo.json b/apps/www/public/r/styles/default/column-demo.json
index 15e295e1b0..8afe6e143e 100644
--- a/apps/www/public/r/styles/default/column-demo.json
+++ b/apps/www/public/r/styles/default/column-demo.json
@@ -4,7 +4,7 @@
   },
   "files": [
     {
-      "content": "'use client';\n\nimport React from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { TablePlugin } from '@udecode/plate-table/react';\n\nimport { settingsStore } from '@/components/context/settings-store';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { autoformatPlugin as autoformatListPlugin } from '@/components/editor/plugins/autoformat-list-plugin';\nimport { autoformatPlugin } from '@/components/editor/plugins/autoformat-plugin';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { FixedToolbarListPlugin } from '@/components/editor/plugins/fixed-toolbar-list-plugin';\nimport { FixedToolbarPlugin } from '@/components/editor/plugins/fixed-toolbar-plugin';\nimport { FloatingToolbarPlugin } from '@/components/editor/plugins/floating-toolbar-plugin';\nimport { tabbablePlugin } from '@/components/editor/plugins/tabbable-plugin';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '') => {\n  const overridePlugins = usePlaygroundEnabled(id);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  const plugins: any[] = [\n    ...copilotPlugins,\n    ...editorPlugins,\n    id === 'list' ? FixedToolbarListPlugin : FixedToolbarPlugin,\n    FloatingToolbarPlugin,\n\n    id === 'list' ? autoformatListPlugin : autoformatPlugin,\n    TablePlugin.configure({\n      options: {\n        enableMerging: id === 'tableMerge',\n      },\n    }),\n    ListPlugin,\n    TodoListPlugin,\n    ExcalidrawPlugin,\n    NormalizeTypesPlugin.configure({\n      options: {\n        rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n      },\n    }),\n    SingleLinePlugin,\n\n    // Testing\n    PlaywrightPlugin.configure({\n      enabled: process.env.NODE_ENV !== 'production',\n    }),\n  ];\n\n  if (id === 'tabbable') {\n    plugins.push(tabbablePlugin);\n  }\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins,\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const editor = usePlaygroundEditor(id);\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <EditorContainer className={cn(id && 'h-[500px]', className)}>\n          <Editor\n            variant=\"demo\"\n            className={cn(id ? 'h-[calc(100%-37px)] pb-8' : 'pb-[20vh]')}\n            spellCheck={false}\n          />\n        </EditorContainer>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
+      "content": "'use client';\n\nimport React from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { PlaceholderPlugin } from '@udecode/plate-media/react';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { TablePlugin } from '@udecode/plate-table/react';\n\nimport { settingsStore } from '@/components/context/settings-store';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { autoformatPlugin as autoformatListPlugin } from '@/components/editor/plugins/autoformat-list-plugin';\nimport { autoformatPlugin } from '@/components/editor/plugins/autoformat-plugin';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { FixedToolbarListPlugin } from '@/components/editor/plugins/fixed-toolbar-list-plugin';\nimport { FixedToolbarPlugin } from '@/components/editor/plugins/fixed-toolbar-plugin';\nimport { FloatingToolbarPlugin } from '@/components/editor/plugins/floating-toolbar-plugin';\nimport { tabbablePlugin } from '@/components/editor/plugins/tabbable-plugin';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { MediaPlaceholderElement } from '@/components/plate-ui/media-placeholder-element';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '') => {\n  const overridePlugins = usePlaygroundEnabled(id);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  const plugins: any[] = [\n    ...copilotPlugins,\n    ...editorPlugins,\n    id === 'list' ? FixedToolbarListPlugin : FixedToolbarPlugin,\n    FloatingToolbarPlugin,\n\n    id === 'list' ? autoformatListPlugin : autoformatPlugin,\n    TablePlugin.configure({\n      options: {\n        enableMerging: id === 'tableMerge',\n      },\n    }),\n    ListPlugin,\n    TodoListPlugin,\n    ExcalidrawPlugin,\n    NormalizeTypesPlugin.configure({\n      options: {\n        rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n      },\n    }),\n    SingleLinePlugin,\n    PlaceholderPlugin.withComponent(MediaPlaceholderElement),\n    // Testing\n    PlaywrightPlugin.configure({\n      enabled: process.env.NODE_ENV !== 'production',\n    }),\n  ];\n\n  if (id === 'tabbable') {\n    plugins.push(tabbablePlugin);\n  }\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins,\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const editor = usePlaygroundEditor(id);\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <EditorContainer className={cn(id && 'h-[500px]', className)}>\n          <Editor\n            variant=\"demo\"\n            className={cn(id ? 'h-[calc(100%-37px)] pb-8' : 'pb-[20vh]')}\n            spellCheck={false}\n          />\n        </EditorContainer>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
       "path": "example/playground-demo.tsx",
       "target": "components/playground-demo.tsx",
       "type": "registry:example"
diff --git a/apps/www/public/r/styles/default/comment-demo.json b/apps/www/public/r/styles/default/comment-demo.json
index 9fed06d4cd..0514c3b10e 100644
--- a/apps/www/public/r/styles/default/comment-demo.json
+++ b/apps/www/public/r/styles/default/comment-demo.json
@@ -4,7 +4,7 @@
   },
   "files": [
     {
-      "content": "'use client';\n\nimport React from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { TablePlugin } from '@udecode/plate-table/react';\n\nimport { settingsStore } from '@/components/context/settings-store';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { autoformatPlugin as autoformatListPlugin } from '@/components/editor/plugins/autoformat-list-plugin';\nimport { autoformatPlugin } from '@/components/editor/plugins/autoformat-plugin';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { FixedToolbarListPlugin } from '@/components/editor/plugins/fixed-toolbar-list-plugin';\nimport { FixedToolbarPlugin } from '@/components/editor/plugins/fixed-toolbar-plugin';\nimport { FloatingToolbarPlugin } from '@/components/editor/plugins/floating-toolbar-plugin';\nimport { tabbablePlugin } from '@/components/editor/plugins/tabbable-plugin';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '') => {\n  const overridePlugins = usePlaygroundEnabled(id);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  const plugins: any[] = [\n    ...copilotPlugins,\n    ...editorPlugins,\n    id === 'list' ? FixedToolbarListPlugin : FixedToolbarPlugin,\n    FloatingToolbarPlugin,\n\n    id === 'list' ? autoformatListPlugin : autoformatPlugin,\n    TablePlugin.configure({\n      options: {\n        enableMerging: id === 'tableMerge',\n      },\n    }),\n    ListPlugin,\n    TodoListPlugin,\n    ExcalidrawPlugin,\n    NormalizeTypesPlugin.configure({\n      options: {\n        rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n      },\n    }),\n    SingleLinePlugin,\n\n    // Testing\n    PlaywrightPlugin.configure({\n      enabled: process.env.NODE_ENV !== 'production',\n    }),\n  ];\n\n  if (id === 'tabbable') {\n    plugins.push(tabbablePlugin);\n  }\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins,\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const editor = usePlaygroundEditor(id);\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <EditorContainer className={cn(id && 'h-[500px]', className)}>\n          <Editor\n            variant=\"demo\"\n            className={cn(id ? 'h-[calc(100%-37px)] pb-8' : 'pb-[20vh]')}\n            spellCheck={false}\n          />\n        </EditorContainer>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
+      "content": "'use client';\n\nimport React from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { PlaceholderPlugin } from '@udecode/plate-media/react';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { TablePlugin } from '@udecode/plate-table/react';\n\nimport { settingsStore } from '@/components/context/settings-store';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { autoformatPlugin as autoformatListPlugin } from '@/components/editor/plugins/autoformat-list-plugin';\nimport { autoformatPlugin } from '@/components/editor/plugins/autoformat-plugin';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { FixedToolbarListPlugin } from '@/components/editor/plugins/fixed-toolbar-list-plugin';\nimport { FixedToolbarPlugin } from '@/components/editor/plugins/fixed-toolbar-plugin';\nimport { FloatingToolbarPlugin } from '@/components/editor/plugins/floating-toolbar-plugin';\nimport { tabbablePlugin } from '@/components/editor/plugins/tabbable-plugin';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { MediaPlaceholderElement } from '@/components/plate-ui/media-placeholder-element';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '') => {\n  const overridePlugins = usePlaygroundEnabled(id);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  const plugins: any[] = [\n    ...copilotPlugins,\n    ...editorPlugins,\n    id === 'list' ? FixedToolbarListPlugin : FixedToolbarPlugin,\n    FloatingToolbarPlugin,\n\n    id === 'list' ? autoformatListPlugin : autoformatPlugin,\n    TablePlugin.configure({\n      options: {\n        enableMerging: id === 'tableMerge',\n      },\n    }),\n    ListPlugin,\n    TodoListPlugin,\n    ExcalidrawPlugin,\n    NormalizeTypesPlugin.configure({\n      options: {\n        rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n      },\n    }),\n    SingleLinePlugin,\n    PlaceholderPlugin.withComponent(MediaPlaceholderElement),\n    // Testing\n    PlaywrightPlugin.configure({\n      enabled: process.env.NODE_ENV !== 'production',\n    }),\n  ];\n\n  if (id === 'tabbable') {\n    plugins.push(tabbablePlugin);\n  }\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins,\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const editor = usePlaygroundEditor(id);\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <EditorContainer className={cn(id && 'h-[500px]', className)}>\n          <Editor\n            variant=\"demo\"\n            className={cn(id ? 'h-[calc(100%-37px)] pb-8' : 'pb-[20vh]')}\n            spellCheck={false}\n          />\n        </EditorContainer>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
       "path": "example/playground-demo.tsx",
       "target": "components/playground-demo.tsx",
       "type": "registry:example"
diff --git a/apps/www/public/r/styles/default/copilot-demo.json b/apps/www/public/r/styles/default/copilot-demo.json
index f7bb7756a5..4b02b23110 100644
--- a/apps/www/public/r/styles/default/copilot-demo.json
+++ b/apps/www/public/r/styles/default/copilot-demo.json
@@ -4,7 +4,7 @@
   },
   "files": [
     {
-      "content": "'use client';\n\nimport React from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { TablePlugin } from '@udecode/plate-table/react';\n\nimport { settingsStore } from '@/components/context/settings-store';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { autoformatPlugin as autoformatListPlugin } from '@/components/editor/plugins/autoformat-list-plugin';\nimport { autoformatPlugin } from '@/components/editor/plugins/autoformat-plugin';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { FixedToolbarListPlugin } from '@/components/editor/plugins/fixed-toolbar-list-plugin';\nimport { FixedToolbarPlugin } from '@/components/editor/plugins/fixed-toolbar-plugin';\nimport { FloatingToolbarPlugin } from '@/components/editor/plugins/floating-toolbar-plugin';\nimport { tabbablePlugin } from '@/components/editor/plugins/tabbable-plugin';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '') => {\n  const overridePlugins = usePlaygroundEnabled(id);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  const plugins: any[] = [\n    ...copilotPlugins,\n    ...editorPlugins,\n    id === 'list' ? FixedToolbarListPlugin : FixedToolbarPlugin,\n    FloatingToolbarPlugin,\n\n    id === 'list' ? autoformatListPlugin : autoformatPlugin,\n    TablePlugin.configure({\n      options: {\n        enableMerging: id === 'tableMerge',\n      },\n    }),\n    ListPlugin,\n    TodoListPlugin,\n    ExcalidrawPlugin,\n    NormalizeTypesPlugin.configure({\n      options: {\n        rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n      },\n    }),\n    SingleLinePlugin,\n\n    // Testing\n    PlaywrightPlugin.configure({\n      enabled: process.env.NODE_ENV !== 'production',\n    }),\n  ];\n\n  if (id === 'tabbable') {\n    plugins.push(tabbablePlugin);\n  }\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins,\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const editor = usePlaygroundEditor(id);\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <EditorContainer className={cn(id && 'h-[500px]', className)}>\n          <Editor\n            variant=\"demo\"\n            className={cn(id ? 'h-[calc(100%-37px)] pb-8' : 'pb-[20vh]')}\n            spellCheck={false}\n          />\n        </EditorContainer>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
+      "content": "'use client';\n\nimport React from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { PlaceholderPlugin } from '@udecode/plate-media/react';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { TablePlugin } from '@udecode/plate-table/react';\n\nimport { settingsStore } from '@/components/context/settings-store';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { autoformatPlugin as autoformatListPlugin } from '@/components/editor/plugins/autoformat-list-plugin';\nimport { autoformatPlugin } from '@/components/editor/plugins/autoformat-plugin';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { FixedToolbarListPlugin } from '@/components/editor/plugins/fixed-toolbar-list-plugin';\nimport { FixedToolbarPlugin } from '@/components/editor/plugins/fixed-toolbar-plugin';\nimport { FloatingToolbarPlugin } from '@/components/editor/plugins/floating-toolbar-plugin';\nimport { tabbablePlugin } from '@/components/editor/plugins/tabbable-plugin';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { MediaPlaceholderElement } from '@/components/plate-ui/media-placeholder-element';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '') => {\n  const overridePlugins = usePlaygroundEnabled(id);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  const plugins: any[] = [\n    ...copilotPlugins,\n    ...editorPlugins,\n    id === 'list' ? FixedToolbarListPlugin : FixedToolbarPlugin,\n    FloatingToolbarPlugin,\n\n    id === 'list' ? autoformatListPlugin : autoformatPlugin,\n    TablePlugin.configure({\n      options: {\n        enableMerging: id === 'tableMerge',\n      },\n    }),\n    ListPlugin,\n    TodoListPlugin,\n    ExcalidrawPlugin,\n    NormalizeTypesPlugin.configure({\n      options: {\n        rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n      },\n    }),\n    SingleLinePlugin,\n    PlaceholderPlugin.withComponent(MediaPlaceholderElement),\n    // Testing\n    PlaywrightPlugin.configure({\n      enabled: process.env.NODE_ENV !== 'production',\n    }),\n  ];\n\n  if (id === 'tabbable') {\n    plugins.push(tabbablePlugin);\n  }\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins,\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const editor = usePlaygroundEditor(id);\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <EditorContainer className={cn(id && 'h-[500px]', className)}>\n          <Editor\n            variant=\"demo\"\n            className={cn(id ? 'h-[calc(100%-37px)] pb-8' : 'pb-[20vh]')}\n            spellCheck={false}\n          />\n        </EditorContainer>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
       "path": "example/playground-demo.tsx",
       "target": "components/playground-demo.tsx",
       "type": "registry:example"
diff --git a/apps/www/public/r/styles/default/date-demo.json b/apps/www/public/r/styles/default/date-demo.json
index 19b18901f4..731334f9ae 100644
--- a/apps/www/public/r/styles/default/date-demo.json
+++ b/apps/www/public/r/styles/default/date-demo.json
@@ -5,7 +5,7 @@
   },
   "files": [
     {
-      "content": "'use client';\n\nimport React from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { TablePlugin } from '@udecode/plate-table/react';\n\nimport { settingsStore } from '@/components/context/settings-store';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { autoformatPlugin as autoformatListPlugin } from '@/components/editor/plugins/autoformat-list-plugin';\nimport { autoformatPlugin } from '@/components/editor/plugins/autoformat-plugin';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { FixedToolbarListPlugin } from '@/components/editor/plugins/fixed-toolbar-list-plugin';\nimport { FixedToolbarPlugin } from '@/components/editor/plugins/fixed-toolbar-plugin';\nimport { FloatingToolbarPlugin } from '@/components/editor/plugins/floating-toolbar-plugin';\nimport { tabbablePlugin } from '@/components/editor/plugins/tabbable-plugin';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '') => {\n  const overridePlugins = usePlaygroundEnabled(id);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  const plugins: any[] = [\n    ...copilotPlugins,\n    ...editorPlugins,\n    id === 'list' ? FixedToolbarListPlugin : FixedToolbarPlugin,\n    FloatingToolbarPlugin,\n\n    id === 'list' ? autoformatListPlugin : autoformatPlugin,\n    TablePlugin.configure({\n      options: {\n        enableMerging: id === 'tableMerge',\n      },\n    }),\n    ListPlugin,\n    TodoListPlugin,\n    ExcalidrawPlugin,\n    NormalizeTypesPlugin.configure({\n      options: {\n        rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n      },\n    }),\n    SingleLinePlugin,\n\n    // Testing\n    PlaywrightPlugin.configure({\n      enabled: process.env.NODE_ENV !== 'production',\n    }),\n  ];\n\n  if (id === 'tabbable') {\n    plugins.push(tabbablePlugin);\n  }\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins,\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const editor = usePlaygroundEditor(id);\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <EditorContainer className={cn(id && 'h-[500px]', className)}>\n          <Editor\n            variant=\"demo\"\n            className={cn(id ? 'h-[calc(100%-37px)] pb-8' : 'pb-[20vh]')}\n            spellCheck={false}\n          />\n        </EditorContainer>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
+      "content": "'use client';\n\nimport React from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { PlaceholderPlugin } from '@udecode/plate-media/react';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { TablePlugin } from '@udecode/plate-table/react';\n\nimport { settingsStore } from '@/components/context/settings-store';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { autoformatPlugin as autoformatListPlugin } from '@/components/editor/plugins/autoformat-list-plugin';\nimport { autoformatPlugin } from '@/components/editor/plugins/autoformat-plugin';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { FixedToolbarListPlugin } from '@/components/editor/plugins/fixed-toolbar-list-plugin';\nimport { FixedToolbarPlugin } from '@/components/editor/plugins/fixed-toolbar-plugin';\nimport { FloatingToolbarPlugin } from '@/components/editor/plugins/floating-toolbar-plugin';\nimport { tabbablePlugin } from '@/components/editor/plugins/tabbable-plugin';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { MediaPlaceholderElement } from '@/components/plate-ui/media-placeholder-element';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '') => {\n  const overridePlugins = usePlaygroundEnabled(id);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  const plugins: any[] = [\n    ...copilotPlugins,\n    ...editorPlugins,\n    id === 'list' ? FixedToolbarListPlugin : FixedToolbarPlugin,\n    FloatingToolbarPlugin,\n\n    id === 'list' ? autoformatListPlugin : autoformatPlugin,\n    TablePlugin.configure({\n      options: {\n        enableMerging: id === 'tableMerge',\n      },\n    }),\n    ListPlugin,\n    TodoListPlugin,\n    ExcalidrawPlugin,\n    NormalizeTypesPlugin.configure({\n      options: {\n        rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n      },\n    }),\n    SingleLinePlugin,\n    PlaceholderPlugin.withComponent(MediaPlaceholderElement),\n    // Testing\n    PlaywrightPlugin.configure({\n      enabled: process.env.NODE_ENV !== 'production',\n    }),\n  ];\n\n  if (id === 'tabbable') {\n    plugins.push(tabbablePlugin);\n  }\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins,\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const editor = usePlaygroundEditor(id);\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <EditorContainer className={cn(id && 'h-[500px]', className)}>\n          <Editor\n            variant=\"demo\"\n            className={cn(id ? 'h-[calc(100%-37px)] pb-8' : 'pb-[20vh]')}\n            spellCheck={false}\n          />\n        </EditorContainer>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
       "path": "example/playground-demo.tsx",
       "target": "components/playground-demo.tsx",
       "type": "registry:example"
diff --git a/apps/www/public/r/styles/default/dnd-demo.json b/apps/www/public/r/styles/default/dnd-demo.json
index ab4c35c74b..c4f13e431c 100644
--- a/apps/www/public/r/styles/default/dnd-demo.json
+++ b/apps/www/public/r/styles/default/dnd-demo.json
@@ -5,7 +5,7 @@
   },
   "files": [
     {
-      "content": "'use client';\n\nimport React from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { TablePlugin } from '@udecode/plate-table/react';\n\nimport { settingsStore } from '@/components/context/settings-store';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { autoformatPlugin as autoformatListPlugin } from '@/components/editor/plugins/autoformat-list-plugin';\nimport { autoformatPlugin } from '@/components/editor/plugins/autoformat-plugin';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { FixedToolbarListPlugin } from '@/components/editor/plugins/fixed-toolbar-list-plugin';\nimport { FixedToolbarPlugin } from '@/components/editor/plugins/fixed-toolbar-plugin';\nimport { FloatingToolbarPlugin } from '@/components/editor/plugins/floating-toolbar-plugin';\nimport { tabbablePlugin } from '@/components/editor/plugins/tabbable-plugin';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '') => {\n  const overridePlugins = usePlaygroundEnabled(id);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  const plugins: any[] = [\n    ...copilotPlugins,\n    ...editorPlugins,\n    id === 'list' ? FixedToolbarListPlugin : FixedToolbarPlugin,\n    FloatingToolbarPlugin,\n\n    id === 'list' ? autoformatListPlugin : autoformatPlugin,\n    TablePlugin.configure({\n      options: {\n        enableMerging: id === 'tableMerge',\n      },\n    }),\n    ListPlugin,\n    TodoListPlugin,\n    ExcalidrawPlugin,\n    NormalizeTypesPlugin.configure({\n      options: {\n        rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n      },\n    }),\n    SingleLinePlugin,\n\n    // Testing\n    PlaywrightPlugin.configure({\n      enabled: process.env.NODE_ENV !== 'production',\n    }),\n  ];\n\n  if (id === 'tabbable') {\n    plugins.push(tabbablePlugin);\n  }\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins,\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const editor = usePlaygroundEditor(id);\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <EditorContainer className={cn(id && 'h-[500px]', className)}>\n          <Editor\n            variant=\"demo\"\n            className={cn(id ? 'h-[calc(100%-37px)] pb-8' : 'pb-[20vh]')}\n            spellCheck={false}\n          />\n        </EditorContainer>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
+      "content": "'use client';\n\nimport React from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { PlaceholderPlugin } from '@udecode/plate-media/react';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { TablePlugin } from '@udecode/plate-table/react';\n\nimport { settingsStore } from '@/components/context/settings-store';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { autoformatPlugin as autoformatListPlugin } from '@/components/editor/plugins/autoformat-list-plugin';\nimport { autoformatPlugin } from '@/components/editor/plugins/autoformat-plugin';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { FixedToolbarListPlugin } from '@/components/editor/plugins/fixed-toolbar-list-plugin';\nimport { FixedToolbarPlugin } from '@/components/editor/plugins/fixed-toolbar-plugin';\nimport { FloatingToolbarPlugin } from '@/components/editor/plugins/floating-toolbar-plugin';\nimport { tabbablePlugin } from '@/components/editor/plugins/tabbable-plugin';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { MediaPlaceholderElement } from '@/components/plate-ui/media-placeholder-element';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '') => {\n  const overridePlugins = usePlaygroundEnabled(id);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  const plugins: any[] = [\n    ...copilotPlugins,\n    ...editorPlugins,\n    id === 'list' ? FixedToolbarListPlugin : FixedToolbarPlugin,\n    FloatingToolbarPlugin,\n\n    id === 'list' ? autoformatListPlugin : autoformatPlugin,\n    TablePlugin.configure({\n      options: {\n        enableMerging: id === 'tableMerge',\n      },\n    }),\n    ListPlugin,\n    TodoListPlugin,\n    ExcalidrawPlugin,\n    NormalizeTypesPlugin.configure({\n      options: {\n        rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n      },\n    }),\n    SingleLinePlugin,\n    PlaceholderPlugin.withComponent(MediaPlaceholderElement),\n    // Testing\n    PlaywrightPlugin.configure({\n      enabled: process.env.NODE_ENV !== 'production',\n    }),\n  ];\n\n  if (id === 'tabbable') {\n    plugins.push(tabbablePlugin);\n  }\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins,\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const editor = usePlaygroundEditor(id);\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <EditorContainer className={cn(id && 'h-[500px]', className)}>\n          <Editor\n            variant=\"demo\"\n            className={cn(id ? 'h-[calc(100%-37px)] pb-8' : 'pb-[20vh]')}\n            spellCheck={false}\n          />\n        </EditorContainer>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
       "path": "example/playground-demo.tsx",
       "target": "components/playground-demo.tsx",
       "type": "registry:example"
diff --git a/apps/www/public/r/styles/default/dnd-plugins.json b/apps/www/public/r/styles/default/dnd-plugins.json
index 43965110a5..e5b4109735 100644
--- a/apps/www/public/r/styles/default/dnd-plugins.json
+++ b/apps/www/public/r/styles/default/dnd-plugins.json
@@ -6,7 +6,7 @@
   ],
   "files": [
     {
-      "content": "'use client';\n\nimport { DndPlugin } from '@udecode/plate-dnd';\nimport { ImagePlugin } from '@udecode/plate-media/react';\nimport { NodeIdPlugin } from '@udecode/plate-node-id';\n\nexport const dndPlugins = [\n  NodeIdPlugin,\n  DndPlugin.configure({\n    options: {\n      enableScroller: true,\n      onDropFiles: ({ dragItem, editor, target }) => {\n        editor\n          .getTransforms(ImagePlugin)\n          .insert.imageFromFiles(dragItem.files, {\n            at: target,\n            nextBlock: false,\n          });\n      },\n    },\n  }),\n] as const;\n",
+      "content": "'use client';\n\nimport { DndPlugin } from '@udecode/plate-dnd';\nimport { PlaceholderPlugin } from '@udecode/plate-media/react';\nimport { NodeIdPlugin } from '@udecode/plate-node-id';\n\nexport const dndPlugins = [\n  NodeIdPlugin,\n  DndPlugin.configure({\n    options: {\n      enableScroller: true,\n      onDropFiles: ({ dragItem, editor, target }) => {\n        editor\n          .getTransforms(PlaceholderPlugin)\n          .insert.media(dragItem.files, { at: target, nextBlock: false });\n      },\n    },\n  }),\n] as const;\n",
       "path": "components/editor/plugins/dnd-plugins.tsx",
       "target": "components/editor/plugins/dnd-plugins.tsx",
       "type": "registry:component"
diff --git a/apps/www/public/r/styles/default/editor.json b/apps/www/public/r/styles/default/editor.json
index de927dbb03..b958f1618a 100644
--- a/apps/www/public/r/styles/default/editor.json
+++ b/apps/www/public/r/styles/default/editor.json
@@ -16,7 +16,7 @@
   },
   "files": [
     {
-      "content": "'use client';\n\nimport React from 'react';\n\nimport type { PlateContentProps } from '@udecode/plate-common/react';\nimport type { VariantProps } from 'class-variance-authority';\n\nimport { cn } from '@udecode/cn';\nimport {\n  PlateContent,\n  useEditorContainerRef,\n  useEditorRef,\n} from '@udecode/plate-common/react';\nimport { cva } from 'class-variance-authority';\n\nconst editorContainerVariants = cva(\n  'relative w-full cursor-text overflow-y-auto caret-primary selection:bg-brand/25 [&_.slate-selection-area]:border [&_.slate-selection-area]:border-brand/25 [&_.slate-selection-area]:bg-brand/15',\n  {\n    defaultVariants: {\n      variant: 'default',\n    },\n    variants: {\n      variant: {\n        default: 'h-full',\n        demo: 'h-[650px]',\n      },\n    },\n  }\n);\n\nexport const EditorContainer = ({\n  className,\n  variant,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement> &\n  VariantProps<typeof editorContainerVariants>) => {\n  const editor = useEditorRef();\n  const containerRef = useEditorContainerRef();\n\n  return (\n    <div\n      id={editor.uid}\n      ref={containerRef}\n      className={cn(\n        'ignore-click-outside/toolbar',\n        editorContainerVariants({ variant }),\n        className\n      )}\n      role=\"button\"\n      {...props}\n    />\n  );\n};\n\nEditorContainer.displayName = 'EditorContainer';\n\nconst editorVariants = cva(\n  cn(\n    'group/editor',\n    'relative w-full overflow-x-hidden whitespace-pre-wrap break-words',\n    'rounded-md ring-offset-background placeholder:text-muted-foreground/80 focus-visible:outline-none',\n    '[&_[data-slate-placeholder]]:text-muted-foreground/80 [&_[data-slate-placeholder]]:!opacity-100',\n    '[&_[data-slate-placeholder]]:top-[auto_!important]',\n    '[&_strong]:font-bold'\n  ),\n  {\n    defaultVariants: {\n      variant: 'default',\n    },\n    variants: {\n      disabled: {\n        true: 'cursor-not-allowed opacity-50',\n      },\n      focused: {\n        true: 'ring-2 ring-ring ring-offset-2',\n      },\n      variant: {\n        ai: 'w-full px-0 text-sm',\n        aiChat:\n          'max-h-[min(70vh,320px)] w-full max-w-[700px] overflow-y-auto px-3 py-2 text-sm',\n        default:\n          'size-full px-16 pb-72 pt-4 text-base sm:px-[max(64px,calc(50%-350px))]',\n        demo: 'size-full px-16 pb-72 pt-4 text-base sm:px-[max(64px,calc(50%-350px))]',\n        fullWidth: 'size-full px-16 pb-72 pt-4 text-base sm:px-24',\n      },\n    },\n  }\n);\n\nexport type EditorProps = PlateContentProps &\n  VariantProps<typeof editorVariants>;\n\nexport const Editor = React.forwardRef<HTMLDivElement, EditorProps>(\n  ({ className, disabled, focused, variant, ...props }, ref) => {\n    return (\n      <PlateContent\n        ref={ref}\n        className={cn(\n          editorVariants({\n            disabled,\n            focused,\n            variant,\n          }),\n          className\n        )}\n        disabled={disabled}\n        disableDefaultStyles\n        {...props}\n      />\n    );\n  }\n);\n\nEditor.displayName = 'Editor';\n",
+      "content": "'use client';\n\nimport React from 'react';\n\nimport type { PlateContentProps } from '@udecode/plate-common/react';\nimport type { VariantProps } from 'class-variance-authority';\n\nimport { cn } from '@udecode/cn';\nimport {\n  PlateContent,\n  useEditorContainerRef,\n  useEditorRef,\n} from '@udecode/plate-common/react';\nimport { cva } from 'class-variance-authority';\n\nimport { useUploadErrorToast } from './media-placeholder-element';\n\nconst editorContainerVariants = cva(\n  'relative w-full cursor-text overflow-y-auto caret-primary selection:bg-brand/25 [&_.slate-selection-area]:border [&_.slate-selection-area]:border-brand/25 [&_.slate-selection-area]:bg-brand/15',\n  {\n    defaultVariants: {\n      variant: 'default',\n    },\n    variants: {\n      variant: {\n        default: 'h-full',\n        demo: 'h-[650px]',\n      },\n    },\n  }\n);\n\nexport const EditorContainer = ({\n  className,\n  variant,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement> &\n  VariantProps<typeof editorContainerVariants>) => {\n  const editor = useEditorRef();\n  const containerRef = useEditorContainerRef();\n\n  useUploadErrorToast();\n\n  return (\n    <div\n      id={editor.uid}\n      ref={containerRef}\n      className={cn(\n        'ignore-click-outside/toolbar',\n        editorContainerVariants({ variant }),\n        className\n      )}\n      role=\"button\"\n      {...props}\n    />\n  );\n};\n\nEditorContainer.displayName = 'EditorContainer';\n\nconst editorVariants = cva(\n  cn(\n    'group/editor',\n    'relative w-full overflow-x-hidden whitespace-pre-wrap break-words',\n    'rounded-md ring-offset-background placeholder:text-muted-foreground/80 focus-visible:outline-none',\n    '[&_[data-slate-placeholder]]:text-muted-foreground/80 [&_[data-slate-placeholder]]:!opacity-100',\n    '[&_[data-slate-placeholder]]:top-[auto_!important]',\n    '[&_strong]:font-bold'\n  ),\n  {\n    defaultVariants: {\n      variant: 'default',\n    },\n    variants: {\n      disabled: {\n        true: 'cursor-not-allowed opacity-50',\n      },\n      focused: {\n        true: 'ring-2 ring-ring ring-offset-2',\n      },\n      variant: {\n        ai: 'w-full px-0 text-sm',\n        aiChat:\n          'max-h-[min(70vh,320px)] w-full max-w-[700px] overflow-y-auto px-3 py-2 text-sm',\n        default:\n          'size-full px-16 pb-72 pt-4 text-base sm:px-[max(64px,calc(50%-350px))]',\n        demo: 'size-full px-16 pb-72 pt-4 text-base sm:px-[max(64px,calc(50%-350px))]',\n        fullWidth: 'size-full px-16 pb-72 pt-4 text-base sm:px-24',\n      },\n    },\n  }\n);\n\nexport type EditorProps = PlateContentProps &\n  VariantProps<typeof editorVariants>;\n\nexport const Editor = React.forwardRef<HTMLDivElement, EditorProps>(\n  ({ className, disabled, focused, variant, ...props }, ref) => {\n    return (\n      <PlateContent\n        ref={ref}\n        className={cn(\n          editorVariants({\n            disabled,\n            focused,\n            variant,\n          }),\n          className\n        )}\n        disabled={disabled}\n        disableDefaultStyles\n        {...props}\n      />\n    );\n  }\n);\n\nEditor.displayName = 'Editor';\n",
       "path": "plate-ui/editor.tsx",
       "target": "components/plate-ui/editor.tsx",
       "type": "registry:ui"
diff --git a/apps/www/public/r/styles/default/emoji-demo.json b/apps/www/public/r/styles/default/emoji-demo.json
index 40fa5b2d06..8201eaf8a9 100644
--- a/apps/www/public/r/styles/default/emoji-demo.json
+++ b/apps/www/public/r/styles/default/emoji-demo.json
@@ -4,7 +4,7 @@
   },
   "files": [
     {
-      "content": "'use client';\n\nimport React from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { TablePlugin } from '@udecode/plate-table/react';\n\nimport { settingsStore } from '@/components/context/settings-store';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { autoformatPlugin as autoformatListPlugin } from '@/components/editor/plugins/autoformat-list-plugin';\nimport { autoformatPlugin } from '@/components/editor/plugins/autoformat-plugin';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { FixedToolbarListPlugin } from '@/components/editor/plugins/fixed-toolbar-list-plugin';\nimport { FixedToolbarPlugin } from '@/components/editor/plugins/fixed-toolbar-plugin';\nimport { FloatingToolbarPlugin } from '@/components/editor/plugins/floating-toolbar-plugin';\nimport { tabbablePlugin } from '@/components/editor/plugins/tabbable-plugin';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '') => {\n  const overridePlugins = usePlaygroundEnabled(id);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  const plugins: any[] = [\n    ...copilotPlugins,\n    ...editorPlugins,\n    id === 'list' ? FixedToolbarListPlugin : FixedToolbarPlugin,\n    FloatingToolbarPlugin,\n\n    id === 'list' ? autoformatListPlugin : autoformatPlugin,\n    TablePlugin.configure({\n      options: {\n        enableMerging: id === 'tableMerge',\n      },\n    }),\n    ListPlugin,\n    TodoListPlugin,\n    ExcalidrawPlugin,\n    NormalizeTypesPlugin.configure({\n      options: {\n        rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n      },\n    }),\n    SingleLinePlugin,\n\n    // Testing\n    PlaywrightPlugin.configure({\n      enabled: process.env.NODE_ENV !== 'production',\n    }),\n  ];\n\n  if (id === 'tabbable') {\n    plugins.push(tabbablePlugin);\n  }\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins,\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const editor = usePlaygroundEditor(id);\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <EditorContainer className={cn(id && 'h-[500px]', className)}>\n          <Editor\n            variant=\"demo\"\n            className={cn(id ? 'h-[calc(100%-37px)] pb-8' : 'pb-[20vh]')}\n            spellCheck={false}\n          />\n        </EditorContainer>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
+      "content": "'use client';\n\nimport React from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { PlaceholderPlugin } from '@udecode/plate-media/react';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { TablePlugin } from '@udecode/plate-table/react';\n\nimport { settingsStore } from '@/components/context/settings-store';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { autoformatPlugin as autoformatListPlugin } from '@/components/editor/plugins/autoformat-list-plugin';\nimport { autoformatPlugin } from '@/components/editor/plugins/autoformat-plugin';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { FixedToolbarListPlugin } from '@/components/editor/plugins/fixed-toolbar-list-plugin';\nimport { FixedToolbarPlugin } from '@/components/editor/plugins/fixed-toolbar-plugin';\nimport { FloatingToolbarPlugin } from '@/components/editor/plugins/floating-toolbar-plugin';\nimport { tabbablePlugin } from '@/components/editor/plugins/tabbable-plugin';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { MediaPlaceholderElement } from '@/components/plate-ui/media-placeholder-element';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '') => {\n  const overridePlugins = usePlaygroundEnabled(id);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  const plugins: any[] = [\n    ...copilotPlugins,\n    ...editorPlugins,\n    id === 'list' ? FixedToolbarListPlugin : FixedToolbarPlugin,\n    FloatingToolbarPlugin,\n\n    id === 'list' ? autoformatListPlugin : autoformatPlugin,\n    TablePlugin.configure({\n      options: {\n        enableMerging: id === 'tableMerge',\n      },\n    }),\n    ListPlugin,\n    TodoListPlugin,\n    ExcalidrawPlugin,\n    NormalizeTypesPlugin.configure({\n      options: {\n        rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n      },\n    }),\n    SingleLinePlugin,\n    PlaceholderPlugin.withComponent(MediaPlaceholderElement),\n    // Testing\n    PlaywrightPlugin.configure({\n      enabled: process.env.NODE_ENV !== 'production',\n    }),\n  ];\n\n  if (id === 'tabbable') {\n    plugins.push(tabbablePlugin);\n  }\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins,\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const editor = usePlaygroundEditor(id);\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <EditorContainer className={cn(id && 'h-[500px]', className)}>\n          <Editor\n            variant=\"demo\"\n            className={cn(id ? 'h-[calc(100%-37px)] pb-8' : 'pb-[20vh]')}\n            spellCheck={false}\n          />\n        </EditorContainer>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
       "path": "example/playground-demo.tsx",
       "target": "components/playground-demo.tsx",
       "type": "registry:example"
diff --git a/apps/www/public/r/styles/default/excalidraw-demo.json b/apps/www/public/r/styles/default/excalidraw-demo.json
index a4016950d6..14849cfbbe 100644
--- a/apps/www/public/r/styles/default/excalidraw-demo.json
+++ b/apps/www/public/r/styles/default/excalidraw-demo.json
@@ -5,7 +5,7 @@
   },
   "files": [
     {
-      "content": "'use client';\n\nimport React from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { TablePlugin } from '@udecode/plate-table/react';\n\nimport { settingsStore } from '@/components/context/settings-store';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { autoformatPlugin as autoformatListPlugin } from '@/components/editor/plugins/autoformat-list-plugin';\nimport { autoformatPlugin } from '@/components/editor/plugins/autoformat-plugin';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { FixedToolbarListPlugin } from '@/components/editor/plugins/fixed-toolbar-list-plugin';\nimport { FixedToolbarPlugin } from '@/components/editor/plugins/fixed-toolbar-plugin';\nimport { FloatingToolbarPlugin } from '@/components/editor/plugins/floating-toolbar-plugin';\nimport { tabbablePlugin } from '@/components/editor/plugins/tabbable-plugin';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '') => {\n  const overridePlugins = usePlaygroundEnabled(id);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  const plugins: any[] = [\n    ...copilotPlugins,\n    ...editorPlugins,\n    id === 'list' ? FixedToolbarListPlugin : FixedToolbarPlugin,\n    FloatingToolbarPlugin,\n\n    id === 'list' ? autoformatListPlugin : autoformatPlugin,\n    TablePlugin.configure({\n      options: {\n        enableMerging: id === 'tableMerge',\n      },\n    }),\n    ListPlugin,\n    TodoListPlugin,\n    ExcalidrawPlugin,\n    NormalizeTypesPlugin.configure({\n      options: {\n        rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n      },\n    }),\n    SingleLinePlugin,\n\n    // Testing\n    PlaywrightPlugin.configure({\n      enabled: process.env.NODE_ENV !== 'production',\n    }),\n  ];\n\n  if (id === 'tabbable') {\n    plugins.push(tabbablePlugin);\n  }\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins,\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const editor = usePlaygroundEditor(id);\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <EditorContainer className={cn(id && 'h-[500px]', className)}>\n          <Editor\n            variant=\"demo\"\n            className={cn(id ? 'h-[calc(100%-37px)] pb-8' : 'pb-[20vh]')}\n            spellCheck={false}\n          />\n        </EditorContainer>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
+      "content": "'use client';\n\nimport React from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { PlaceholderPlugin } from '@udecode/plate-media/react';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { TablePlugin } from '@udecode/plate-table/react';\n\nimport { settingsStore } from '@/components/context/settings-store';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { autoformatPlugin as autoformatListPlugin } from '@/components/editor/plugins/autoformat-list-plugin';\nimport { autoformatPlugin } from '@/components/editor/plugins/autoformat-plugin';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { FixedToolbarListPlugin } from '@/components/editor/plugins/fixed-toolbar-list-plugin';\nimport { FixedToolbarPlugin } from '@/components/editor/plugins/fixed-toolbar-plugin';\nimport { FloatingToolbarPlugin } from '@/components/editor/plugins/floating-toolbar-plugin';\nimport { tabbablePlugin } from '@/components/editor/plugins/tabbable-plugin';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { MediaPlaceholderElement } from '@/components/plate-ui/media-placeholder-element';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '') => {\n  const overridePlugins = usePlaygroundEnabled(id);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  const plugins: any[] = [\n    ...copilotPlugins,\n    ...editorPlugins,\n    id === 'list' ? FixedToolbarListPlugin : FixedToolbarPlugin,\n    FloatingToolbarPlugin,\n\n    id === 'list' ? autoformatListPlugin : autoformatPlugin,\n    TablePlugin.configure({\n      options: {\n        enableMerging: id === 'tableMerge',\n      },\n    }),\n    ListPlugin,\n    TodoListPlugin,\n    ExcalidrawPlugin,\n    NormalizeTypesPlugin.configure({\n      options: {\n        rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n      },\n    }),\n    SingleLinePlugin,\n    PlaceholderPlugin.withComponent(MediaPlaceholderElement),\n    // Testing\n    PlaywrightPlugin.configure({\n      enabled: process.env.NODE_ENV !== 'production',\n    }),\n  ];\n\n  if (id === 'tabbable') {\n    plugins.push(tabbablePlugin);\n  }\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins,\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const editor = usePlaygroundEditor(id);\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <EditorContainer className={cn(id && 'h-[500px]', className)}>\n          <Editor\n            variant=\"demo\"\n            className={cn(id ? 'h-[calc(100%-37px)] pb-8' : 'pb-[20vh]')}\n            spellCheck={false}\n          />\n        </EditorContainer>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
       "path": "example/playground-demo.tsx",
       "target": "components/playground-demo.tsx",
       "type": "registry:example"
diff --git a/apps/www/public/r/styles/default/fixed-toolbar-buttons.json b/apps/www/public/r/styles/default/fixed-toolbar-buttons.json
index 8e8767f05c..91ec091494 100644
--- a/apps/www/public/r/styles/default/fixed-toolbar-buttons.json
+++ b/apps/www/public/r/styles/default/fixed-toolbar-buttons.json
@@ -13,7 +13,7 @@
   },
   "files": [
     {
-      "content": "'use client';\n\nimport React from 'react';\n\nimport {\n  BoldPlugin,\n  CodePlugin,\n  ItalicPlugin,\n  StrikethroughPlugin,\n  UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { useEditorReadOnly } from '@udecode/plate-common/react';\nimport {\n  FontBackgroundColorPlugin,\n  FontColorPlugin,\n} from '@udecode/plate-font/react';\nimport { ListStyleType } from '@udecode/plate-indent-list';\nimport {\n  AudioPlugin,\n  FilePlugin,\n  ImagePlugin,\n  VideoPlugin,\n} from '@udecode/plate-media/react';\nimport {\n  BaselineIcon,\n  BoldIcon,\n  Code2Icon,\n  ItalicIcon,\n  PaintBucketIcon,\n  SparklesIcon,\n  StrikethroughIcon,\n  UnderlineIcon,\n} from 'lucide-react';\n\nimport { AIToolbarButton } from './ai-toolbar-button';\nimport { AlignDropdownMenu } from './align-dropdown-menu';\nimport { ColorDropdownMenu } from './color-dropdown-menu';\nimport { CommentToolbarButton } from './comment-toolbar-button';\nimport { EmojiDropdownMenu } from './emoji-dropdown-menu';\nimport { FontSizeToolbarButton } from './font-size-toolbar-butoon';\nimport { IndentListToolbarButton } from './indent-list-toolbar-button';\nimport { IndentTodoToolbarButton } from './indent-todo-toolbar-button';\nimport { IndentToolbarButton } from './indent-toolbar-button';\nimport { InsertDropdownMenu } from './insert-dropdown-menu';\nimport { LineHeightDropdownMenu } from './line-height-dropdown-menu';\nimport { LinkToolbarButton } from './link-toolbar-button';\nimport { MarkToolbarButton } from './mark-toolbar-button';\nimport { MediaToolbarButton } from './media-toolbar-button';\nimport { ModeDropdownMenu } from './mode-dropdown-menu';\nimport { MoreDropdownMenu } from './more-dropdown-menu';\nimport { OutdentToolbarButton } from './outdent-toolbar-button';\nimport { RedoToolbarButton } from './redo-toolbar-button';\nimport { TableDropdownMenu } from './table-dropdown-menu';\nimport { ToggleToolbarButton } from './toggle-toolbar-button';\nimport { ToolbarGroup } from './toolbar';\nimport { TurnIntoDropdownMenu } from './turn-into-dropdown-menu';\nimport { UndoToolbarButton } from './undo-toolbar-button';\n\nexport function FixedToolbarButtons() {\n  const readOnly = useEditorReadOnly();\n\n  return (\n    <div className=\"flex w-full\">\n      {!readOnly && (\n        <>\n          <ToolbarGroup>\n            <UndoToolbarButton />\n            <RedoToolbarButton />\n          </ToolbarGroup>\n\n          <ToolbarGroup>\n            <AIToolbarButton\n              className=\"gap-1.5 text-purple-600 hover:text-purple-700 dark:text-purple-400 dark:hover:text-purple-500\"\n              tooltip=\"Edit, generate, and more\"\n            >\n              <SparklesIcon className=\"!size-3.5\" />\n              Ask AI\n            </AIToolbarButton>\n          </ToolbarGroup>\n\n          <ToolbarGroup>\n            <InsertDropdownMenu />\n            <TurnIntoDropdownMenu />\n            <FontSizeToolbarButton />\n          </ToolbarGroup>\n\n          <ToolbarGroup>\n            <MarkToolbarButton nodeType={BoldPlugin.key} tooltip=\"Bold (⌘+B)\">\n              <BoldIcon />\n            </MarkToolbarButton>\n\n            <MarkToolbarButton\n              nodeType={ItalicPlugin.key}\n              tooltip=\"Italic (⌘+I)\"\n            >\n              <ItalicIcon />\n            </MarkToolbarButton>\n\n            <MarkToolbarButton\n              nodeType={UnderlinePlugin.key}\n              tooltip=\"Underline (⌘+U)\"\n            >\n              <UnderlineIcon />\n            </MarkToolbarButton>\n\n            <MarkToolbarButton\n              nodeType={StrikethroughPlugin.key}\n              tooltip=\"Strikethrough (⌘+⇧+M)\"\n            >\n              <StrikethroughIcon />\n            </MarkToolbarButton>\n\n            <MarkToolbarButton nodeType={CodePlugin.key} tooltip=\"Code (⌘+E)\">\n              <Code2Icon />\n            </MarkToolbarButton>\n\n            <ColorDropdownMenu\n              nodeType={FontColorPlugin.key}\n              tooltip=\"Text color\"\n            >\n              <BaselineIcon />\n            </ColorDropdownMenu>\n\n            <ColorDropdownMenu\n              nodeType={FontBackgroundColorPlugin.key}\n              tooltip=\"Background color\"\n            >\n              <PaintBucketIcon />\n            </ColorDropdownMenu>\n          </ToolbarGroup>\n\n          <ToolbarGroup>\n            <AlignDropdownMenu />\n            <LineHeightDropdownMenu />\n\n            <IndentListToolbarButton nodeType={ListStyleType.Disc} />\n            <IndentListToolbarButton nodeType={ListStyleType.Decimal} />\n            <IndentTodoToolbarButton />\n\n            <OutdentToolbarButton />\n            <IndentToolbarButton />\n          </ToolbarGroup>\n\n          <ToolbarGroup>\n            <MediaToolbarButton nodeType={ImagePlugin.key} />\n            <MediaToolbarButton nodeType={VideoPlugin.key} />\n            <MediaToolbarButton nodeType={AudioPlugin.key} />\n            <MediaToolbarButton nodeType={FilePlugin.key} />\n          </ToolbarGroup>\n\n          <ToolbarGroup>\n            <LinkToolbarButton />\n            <ToggleToolbarButton />\n            <TableDropdownMenu />\n            <EmojiDropdownMenu />\n            <MoreDropdownMenu />\n          </ToolbarGroup>\n        </>\n      )}\n\n      <div className=\"grow\" />\n\n      <ToolbarGroup>\n        <CommentToolbarButton />\n        <ModeDropdownMenu />\n      </ToolbarGroup>\n    </div>\n  );\n}\n",
+      "content": "'use client';\n\nimport React from 'react';\n\nimport {\n  BoldPlugin,\n  CodePlugin,\n  ItalicPlugin,\n  StrikethroughPlugin,\n  UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { useEditorReadOnly } from '@udecode/plate-common/react';\nimport {\n  FontBackgroundColorPlugin,\n  FontColorPlugin,\n} from '@udecode/plate-font/react';\nimport { ListStyleType } from '@udecode/plate-indent-list';\nimport {\n  AudioPlugin,\n  FilePlugin,\n  ImagePlugin,\n  VideoPlugin,\n} from '@udecode/plate-media/react';\nimport {\n  BaselineIcon,\n  BoldIcon,\n  Code2Icon,\n  ItalicIcon,\n  PaintBucketIcon,\n  SparklesIcon,\n  StrikethroughIcon,\n  UnderlineIcon,\n} from 'lucide-react';\n\nimport { AIToolbarButton } from './ai-toolbar-button';\nimport { AlignDropdownMenu } from './align-dropdown-menu';\nimport { ColorDropdownMenu } from './color-dropdown-menu';\nimport { CommentToolbarButton } from './comment-toolbar-button';\nimport { EmojiDropdownMenu } from './emoji-dropdown-menu';\nimport { IndentListToolbarButton } from './indent-list-toolbar-button';\nimport { IndentTodoToolbarButton } from './indent-todo-toolbar-button';\nimport { IndentToolbarButton } from './indent-toolbar-button';\nimport { InsertDropdownMenu } from './insert-dropdown-menu';\nimport { LineHeightDropdownMenu } from './line-height-dropdown-menu';\nimport { LinkToolbarButton } from './link-toolbar-button';\nimport { MarkToolbarButton } from './mark-toolbar-button';\nimport { MediaDropdownMenu } from './media-toolbar-button';\nimport { ModeDropdownMenu } from './mode-dropdown-menu';\nimport { MoreDropdownMenu } from './more-dropdown-menu';\nimport { OutdentToolbarButton } from './outdent-toolbar-button';\nimport { RedoToolbarButton } from './redo-toolbar-button';\nimport { TableDropdownMenu } from './table-dropdown-menu';\nimport { ToggleToolbarButton } from './toggle-toolbar-button';\nimport { ToolbarGroup } from './toolbar';\nimport { TurnIntoDropdownMenu } from './turn-into-dropdown-menu';\nimport { UndoToolbarButton } from './undo-toolbar-button';\n\nexport function FixedToolbarButtons() {\n  const readOnly = useEditorReadOnly();\n\n  return (\n    <div className=\"flex w-full\">\n      {!readOnly && (\n        <>\n          <ToolbarGroup>\n            <UndoToolbarButton />\n            <RedoToolbarButton />\n          </ToolbarGroup>\n\n          <ToolbarGroup>\n            <AIToolbarButton\n              className=\"gap-1.5 text-purple-600 hover:text-purple-700 dark:text-purple-400 dark:hover:text-purple-500\"\n              tooltip=\"Edit, generate, and more\"\n            >\n              <SparklesIcon className=\"!size-3.5\" />\n              Ask AI\n            </AIToolbarButton>\n          </ToolbarGroup>\n\n          <ToolbarGroup>\n            <InsertDropdownMenu />\n            <TurnIntoDropdownMenu />\n          </ToolbarGroup>\n\n          <ToolbarGroup>\n            <MarkToolbarButton nodeType={BoldPlugin.key} tooltip=\"Bold (⌘+B)\">\n              <BoldIcon />\n            </MarkToolbarButton>\n\n            <MarkToolbarButton\n              nodeType={ItalicPlugin.key}\n              tooltip=\"Italic (⌘+I)\"\n            >\n              <ItalicIcon />\n            </MarkToolbarButton>\n\n            <MarkToolbarButton\n              nodeType={UnderlinePlugin.key}\n              tooltip=\"Underline (⌘+U)\"\n            >\n              <UnderlineIcon />\n            </MarkToolbarButton>\n\n            <MarkToolbarButton\n              nodeType={StrikethroughPlugin.key}\n              tooltip=\"Strikethrough (⌘+⇧+M)\"\n            >\n              <StrikethroughIcon />\n            </MarkToolbarButton>\n\n            <MarkToolbarButton nodeType={CodePlugin.key} tooltip=\"Code (⌘+E)\">\n              <Code2Icon />\n            </MarkToolbarButton>\n\n            <ColorDropdownMenu\n              nodeType={FontColorPlugin.key}\n              tooltip=\"Text color\"\n            >\n              <BaselineIcon />\n            </ColorDropdownMenu>\n\n            <ColorDropdownMenu\n              nodeType={FontBackgroundColorPlugin.key}\n              tooltip=\"Background color\"\n            >\n              <PaintBucketIcon />\n            </ColorDropdownMenu>\n          </ToolbarGroup>\n\n          <ToolbarGroup>\n            <AlignDropdownMenu />\n            <LineHeightDropdownMenu />\n\n            <IndentListToolbarButton nodeType={ListStyleType.Disc} />\n            <IndentListToolbarButton nodeType={ListStyleType.Decimal} />\n            <IndentTodoToolbarButton />\n\n            <OutdentToolbarButton />\n            <IndentToolbarButton />\n          </ToolbarGroup>\n\n          <ToolbarGroup>\n            <MediaDropdownMenu nodeType={ImagePlugin.key} />\n            <MediaDropdownMenu nodeType={VideoPlugin.key} />\n            <MediaDropdownMenu nodeType={AudioPlugin.key} />\n            <MediaDropdownMenu nodeType={FilePlugin.key} />\n          </ToolbarGroup>\n\n          <ToolbarGroup>\n            <LinkToolbarButton />\n            <ToggleToolbarButton />\n            <TableDropdownMenu />\n            <EmojiDropdownMenu />\n            <MoreDropdownMenu />\n          </ToolbarGroup>\n        </>\n      )}\n\n      <div className=\"grow\" />\n\n      <ToolbarGroup>\n        <CommentToolbarButton />\n        <ModeDropdownMenu />\n      </ToolbarGroup>\n    </div>\n  );\n}\n",
       "path": "plate-ui/fixed-toolbar-buttons.tsx",
       "target": "components/plate-ui/fixed-toolbar-buttons.tsx",
       "type": "registry:ui"
diff --git a/apps/www/public/r/styles/default/fixed-toolbar-list-buttons.json b/apps/www/public/r/styles/default/fixed-toolbar-list-buttons.json
index 6af2f13323..e2075d0849 100644
--- a/apps/www/public/r/styles/default/fixed-toolbar-list-buttons.json
+++ b/apps/www/public/r/styles/default/fixed-toolbar-list-buttons.json
@@ -7,7 +7,7 @@
   ],
   "files": [
     {
-      "content": "'use client';\n\nimport React from 'react';\n\nimport {\n  BoldPlugin,\n  CodePlugin,\n  ItalicPlugin,\n  StrikethroughPlugin,\n  UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { useEditorReadOnly } from '@udecode/plate-common/react';\nimport {\n  FontBackgroundColorPlugin,\n  FontColorPlugin,\n} from '@udecode/plate-font/react';\nimport {\n  BulletedListPlugin,\n  NumberedListPlugin,\n} from '@udecode/plate-list/react';\nimport { ImagePlugin } from '@udecode/plate-media/react';\nimport {\n  BaselineIcon,\n  BoldIcon,\n  Code2Icon,\n  ItalicIcon,\n  PaintBucketIcon,\n  SparklesIcon,\n  StrikethroughIcon,\n  UnderlineIcon,\n} from 'lucide-react';\n\nimport { AIToolbarButton } from './ai-toolbar-button';\nimport { AlignDropdownMenu } from './align-dropdown-menu';\nimport { ColorDropdownMenu } from './color-dropdown-menu';\nimport { CommentToolbarButton } from './comment-toolbar-button';\nimport { EmojiDropdownMenu } from './emoji-dropdown-menu';\nimport { InsertDropdownMenu } from './insert-dropdown-menu';\nimport { LineHeightDropdownMenu } from './line-height-dropdown-menu';\nimport { LinkToolbarButton } from './link-toolbar-button';\nimport { ListIndentToolbarButton } from './list-indent-toolbar-button';\nimport { ListToolbarButton } from './list-toolbar-button';\nimport { MarkToolbarButton } from './mark-toolbar-button';\nimport { MediaToolbarButton } from './media-toolbar-button';\nimport { ModeDropdownMenu } from './mode-dropdown-menu';\nimport { MoreDropdownMenu } from './more-dropdown-menu';\nimport { TableDropdownMenu } from './table-dropdown-menu';\nimport { ToggleToolbarButton } from './toggle-toolbar-button';\nimport { ToolbarGroup } from './toolbar';\nimport { TurnIntoDropdownMenu } from './turn-into-dropdown-menu';\n\nexport function FixedToolbarListButtons() {\n  const readOnly = useEditorReadOnly();\n\n  return (\n    <div className=\"flex w-full\">\n      {!readOnly && (\n        <>\n          <ToolbarGroup>\n            <AIToolbarButton\n              className=\"gap-1.5 text-purple-600 hover:text-purple-700 dark:text-purple-400 dark:hover:text-purple-500\"\n              tooltip=\"Edit, generate, and more\"\n            >\n              <SparklesIcon className=\"!size-3.5\" />\n              Ask AI\n            </AIToolbarButton>\n          </ToolbarGroup>\n\n          <ToolbarGroup>\n            <InsertDropdownMenu />\n            <TurnIntoDropdownMenu />\n          </ToolbarGroup>\n\n          <ToolbarGroup>\n            <MarkToolbarButton nodeType={BoldPlugin.key} tooltip=\"Bold (⌘+B)\">\n              <BoldIcon />\n            </MarkToolbarButton>\n\n            <MarkToolbarButton\n              nodeType={ItalicPlugin.key}\n              tooltip=\"Italic (⌘+I)\"\n            >\n              <ItalicIcon />\n            </MarkToolbarButton>\n\n            <MarkToolbarButton\n              nodeType={UnderlinePlugin.key}\n              tooltip=\"Underline (⌘+U)\"\n            >\n              <UnderlineIcon />\n            </MarkToolbarButton>\n\n            <MarkToolbarButton\n              nodeType={StrikethroughPlugin.key}\n              tooltip=\"Strikethrough (⌘+⇧+M)\"\n            >\n              <StrikethroughIcon />\n            </MarkToolbarButton>\n\n            <MarkToolbarButton nodeType={CodePlugin.key} tooltip=\"Code (⌘+E)\">\n              <Code2Icon />\n            </MarkToolbarButton>\n\n            <ColorDropdownMenu\n              nodeType={FontColorPlugin.key}\n              tooltip=\"Text color\"\n            >\n              <BaselineIcon />\n            </ColorDropdownMenu>\n\n            <ColorDropdownMenu\n              nodeType={FontBackgroundColorPlugin.key}\n              tooltip=\"Background color\"\n            >\n              <PaintBucketIcon />\n            </ColorDropdownMenu>\n          </ToolbarGroup>\n\n          <ToolbarGroup>\n            <AlignDropdownMenu />\n            <LineHeightDropdownMenu />\n\n            <ListToolbarButton nodeType={BulletedListPlugin.key} />\n            <ListToolbarButton nodeType={NumberedListPlugin.key} />\n\n            <ListIndentToolbarButton reverse />\n            <ListIndentToolbarButton />\n          </ToolbarGroup>\n\n          <ToolbarGroup>\n            <LinkToolbarButton />\n            <ToggleToolbarButton />\n            <MediaToolbarButton nodeType={ImagePlugin.key} />\n            <TableDropdownMenu />\n            <EmojiDropdownMenu />\n            <MoreDropdownMenu />\n          </ToolbarGroup>\n        </>\n      )}\n\n      <div className=\"grow\" />\n\n      <ToolbarGroup>\n        <CommentToolbarButton />\n        <ModeDropdownMenu />\n      </ToolbarGroup>\n    </div>\n  );\n}\n",
+      "content": "'use client';\n\nimport React from 'react';\n\nimport {\n  BoldPlugin,\n  CodePlugin,\n  ItalicPlugin,\n  StrikethroughPlugin,\n  UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { useEditorReadOnly } from '@udecode/plate-common/react';\nimport {\n  FontBackgroundColorPlugin,\n  FontColorPlugin,\n} from '@udecode/plate-font/react';\nimport {\n  BulletedListPlugin,\n  NumberedListPlugin,\n} from '@udecode/plate-list/react';\nimport {\n  AudioPlugin,\n  FilePlugin,\n  ImagePlugin,\n  VideoPlugin,\n} from '@udecode/plate-media/react';\nimport {\n  BaselineIcon,\n  BoldIcon,\n  Code2Icon,\n  ItalicIcon,\n  PaintBucketIcon,\n  SparklesIcon,\n  StrikethroughIcon,\n  UnderlineIcon,\n} from 'lucide-react';\n\nimport { AIToolbarButton } from './ai-toolbar-button';\nimport { AlignDropdownMenu } from './align-dropdown-menu';\nimport { ColorDropdownMenu } from './color-dropdown-menu';\nimport { CommentToolbarButton } from './comment-toolbar-button';\nimport { EmojiDropdownMenu } from './emoji-dropdown-menu';\nimport { InsertDropdownMenu } from './insert-dropdown-menu';\nimport { LineHeightDropdownMenu } from './line-height-dropdown-menu';\nimport { LinkToolbarButton } from './link-toolbar-button';\nimport { ListIndentToolbarButton } from './list-indent-toolbar-button';\nimport { ListToolbarButton } from './list-toolbar-button';\nimport { MarkToolbarButton } from './mark-toolbar-button';\nimport { MediaDropdownMenu } from './media-toolbar-button';\n\n// import { MediaToolbarButton } from './media-toolbar-button';\nimport { ModeDropdownMenu } from './mode-dropdown-menu';\nimport { MoreDropdownMenu } from './more-dropdown-menu';\nimport { TableDropdownMenu } from './table-dropdown-menu';\nimport { ToggleToolbarButton } from './toggle-toolbar-button';\nimport { ToolbarGroup } from './toolbar';\nimport { TurnIntoDropdownMenu } from './turn-into-dropdown-menu';\n\nexport function FixedToolbarListButtons() {\n  const readOnly = useEditorReadOnly();\n\n  return (\n    <div className=\"flex w-full\">\n      {!readOnly && (\n        <>\n          <ToolbarGroup>\n            <AIToolbarButton\n              className=\"gap-1.5 text-purple-600 hover:text-purple-700 dark:text-purple-400 dark:hover:text-purple-500\"\n              tooltip=\"Edit, generate, and more\"\n            >\n              <SparklesIcon className=\"!size-3.5\" />\n              Ask AI\n            </AIToolbarButton>\n          </ToolbarGroup>\n\n          <ToolbarGroup>\n            <InsertDropdownMenu />\n            <TurnIntoDropdownMenu />\n          </ToolbarGroup>\n\n          <ToolbarGroup>\n            <MarkToolbarButton nodeType={BoldPlugin.key} tooltip=\"Bold (⌘+B)\">\n              <BoldIcon />\n            </MarkToolbarButton>\n\n            <MarkToolbarButton\n              nodeType={ItalicPlugin.key}\n              tooltip=\"Italic (⌘+I)\"\n            >\n              <ItalicIcon />\n            </MarkToolbarButton>\n\n            <MarkToolbarButton\n              nodeType={UnderlinePlugin.key}\n              tooltip=\"Underline (⌘+U)\"\n            >\n              <UnderlineIcon />\n            </MarkToolbarButton>\n\n            <MarkToolbarButton\n              nodeType={StrikethroughPlugin.key}\n              tooltip=\"Strikethrough (⌘+⇧+M)\"\n            >\n              <StrikethroughIcon />\n            </MarkToolbarButton>\n\n            <MarkToolbarButton nodeType={CodePlugin.key} tooltip=\"Code (⌘+E)\">\n              <Code2Icon />\n            </MarkToolbarButton>\n\n            <ColorDropdownMenu\n              nodeType={FontColorPlugin.key}\n              tooltip=\"Text color\"\n            >\n              <BaselineIcon />\n            </ColorDropdownMenu>\n\n            <ColorDropdownMenu\n              nodeType={FontBackgroundColorPlugin.key}\n              tooltip=\"Background color\"\n            >\n              <PaintBucketIcon />\n            </ColorDropdownMenu>\n          </ToolbarGroup>\n\n          <ToolbarGroup>\n            <AlignDropdownMenu />\n            <LineHeightDropdownMenu />\n\n            <ListToolbarButton nodeType={BulletedListPlugin.key} />\n            <ListToolbarButton nodeType={NumberedListPlugin.key} />\n\n            <ListIndentToolbarButton reverse />\n            <ListIndentToolbarButton />\n          </ToolbarGroup>\n\n          <ToolbarGroup>\n            <MediaDropdownMenu nodeType={ImagePlugin.key} />\n            <MediaDropdownMenu nodeType={VideoPlugin.key} />\n            <MediaDropdownMenu nodeType={AudioPlugin.key} />\n            <MediaDropdownMenu nodeType={FilePlugin.key} />\n          </ToolbarGroup>\n\n          <ToolbarGroup>\n            <LinkToolbarButton />\n            <ToggleToolbarButton />\n            <TableDropdownMenu />\n            <EmojiDropdownMenu />\n            <MoreDropdownMenu />\n          </ToolbarGroup>\n        </>\n      )}\n\n      <div className=\"grow\" />\n\n      <ToolbarGroup>\n        <CommentToolbarButton />\n        <ModeDropdownMenu />\n      </ToolbarGroup>\n    </div>\n  );\n}\n",
       "path": "plate-ui/fixed-toolbar-list-buttons.tsx",
       "target": "components/plate-ui/fixed-toolbar-list-buttons.tsx",
       "type": "registry:ui"
diff --git a/apps/www/public/r/styles/default/floating-toolbar-demo.json b/apps/www/public/r/styles/default/floating-toolbar-demo.json
index 452a175f86..57d0acdd88 100644
--- a/apps/www/public/r/styles/default/floating-toolbar-demo.json
+++ b/apps/www/public/r/styles/default/floating-toolbar-demo.json
@@ -4,7 +4,7 @@
   },
   "files": [
     {
-      "content": "'use client';\n\nimport React from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { TablePlugin } from '@udecode/plate-table/react';\n\nimport { settingsStore } from '@/components/context/settings-store';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { autoformatPlugin as autoformatListPlugin } from '@/components/editor/plugins/autoformat-list-plugin';\nimport { autoformatPlugin } from '@/components/editor/plugins/autoformat-plugin';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { FixedToolbarListPlugin } from '@/components/editor/plugins/fixed-toolbar-list-plugin';\nimport { FixedToolbarPlugin } from '@/components/editor/plugins/fixed-toolbar-plugin';\nimport { FloatingToolbarPlugin } from '@/components/editor/plugins/floating-toolbar-plugin';\nimport { tabbablePlugin } from '@/components/editor/plugins/tabbable-plugin';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '') => {\n  const overridePlugins = usePlaygroundEnabled(id);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  const plugins: any[] = [\n    ...copilotPlugins,\n    ...editorPlugins,\n    id === 'list' ? FixedToolbarListPlugin : FixedToolbarPlugin,\n    FloatingToolbarPlugin,\n\n    id === 'list' ? autoformatListPlugin : autoformatPlugin,\n    TablePlugin.configure({\n      options: {\n        enableMerging: id === 'tableMerge',\n      },\n    }),\n    ListPlugin,\n    TodoListPlugin,\n    ExcalidrawPlugin,\n    NormalizeTypesPlugin.configure({\n      options: {\n        rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n      },\n    }),\n    SingleLinePlugin,\n\n    // Testing\n    PlaywrightPlugin.configure({\n      enabled: process.env.NODE_ENV !== 'production',\n    }),\n  ];\n\n  if (id === 'tabbable') {\n    plugins.push(tabbablePlugin);\n  }\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins,\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const editor = usePlaygroundEditor(id);\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <EditorContainer className={cn(id && 'h-[500px]', className)}>\n          <Editor\n            variant=\"demo\"\n            className={cn(id ? 'h-[calc(100%-37px)] pb-8' : 'pb-[20vh]')}\n            spellCheck={false}\n          />\n        </EditorContainer>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
+      "content": "'use client';\n\nimport React from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { PlaceholderPlugin } from '@udecode/plate-media/react';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { TablePlugin } from '@udecode/plate-table/react';\n\nimport { settingsStore } from '@/components/context/settings-store';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { autoformatPlugin as autoformatListPlugin } from '@/components/editor/plugins/autoformat-list-plugin';\nimport { autoformatPlugin } from '@/components/editor/plugins/autoformat-plugin';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { FixedToolbarListPlugin } from '@/components/editor/plugins/fixed-toolbar-list-plugin';\nimport { FixedToolbarPlugin } from '@/components/editor/plugins/fixed-toolbar-plugin';\nimport { FloatingToolbarPlugin } from '@/components/editor/plugins/floating-toolbar-plugin';\nimport { tabbablePlugin } from '@/components/editor/plugins/tabbable-plugin';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { MediaPlaceholderElement } from '@/components/plate-ui/media-placeholder-element';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '') => {\n  const overridePlugins = usePlaygroundEnabled(id);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  const plugins: any[] = [\n    ...copilotPlugins,\n    ...editorPlugins,\n    id === 'list' ? FixedToolbarListPlugin : FixedToolbarPlugin,\n    FloatingToolbarPlugin,\n\n    id === 'list' ? autoformatListPlugin : autoformatPlugin,\n    TablePlugin.configure({\n      options: {\n        enableMerging: id === 'tableMerge',\n      },\n    }),\n    ListPlugin,\n    TodoListPlugin,\n    ExcalidrawPlugin,\n    NormalizeTypesPlugin.configure({\n      options: {\n        rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n      },\n    }),\n    SingleLinePlugin,\n    PlaceholderPlugin.withComponent(MediaPlaceholderElement),\n    // Testing\n    PlaywrightPlugin.configure({\n      enabled: process.env.NODE_ENV !== 'production',\n    }),\n  ];\n\n  if (id === 'tabbable') {\n    plugins.push(tabbablePlugin);\n  }\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins,\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const editor = usePlaygroundEditor(id);\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <EditorContainer className={cn(id && 'h-[500px]', className)}>\n          <Editor\n            variant=\"demo\"\n            className={cn(id ? 'h-[calc(100%-37px)] pb-8' : 'pb-[20vh]')}\n            spellCheck={false}\n          />\n        </EditorContainer>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
       "path": "example/playground-demo.tsx",
       "target": "components/playground-demo.tsx",
       "type": "registry:example"
diff --git a/apps/www/public/r/styles/default/font-demo.json b/apps/www/public/r/styles/default/font-demo.json
index d906eae49f..bc7327af52 100644
--- a/apps/www/public/r/styles/default/font-demo.json
+++ b/apps/www/public/r/styles/default/font-demo.json
@@ -4,7 +4,7 @@
   },
   "files": [
     {
-      "content": "'use client';\n\nimport React from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { TablePlugin } from '@udecode/plate-table/react';\n\nimport { settingsStore } from '@/components/context/settings-store';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { autoformatPlugin as autoformatListPlugin } from '@/components/editor/plugins/autoformat-list-plugin';\nimport { autoformatPlugin } from '@/components/editor/plugins/autoformat-plugin';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { FixedToolbarListPlugin } from '@/components/editor/plugins/fixed-toolbar-list-plugin';\nimport { FixedToolbarPlugin } from '@/components/editor/plugins/fixed-toolbar-plugin';\nimport { FloatingToolbarPlugin } from '@/components/editor/plugins/floating-toolbar-plugin';\nimport { tabbablePlugin } from '@/components/editor/plugins/tabbable-plugin';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '') => {\n  const overridePlugins = usePlaygroundEnabled(id);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  const plugins: any[] = [\n    ...copilotPlugins,\n    ...editorPlugins,\n    id === 'list' ? FixedToolbarListPlugin : FixedToolbarPlugin,\n    FloatingToolbarPlugin,\n\n    id === 'list' ? autoformatListPlugin : autoformatPlugin,\n    TablePlugin.configure({\n      options: {\n        enableMerging: id === 'tableMerge',\n      },\n    }),\n    ListPlugin,\n    TodoListPlugin,\n    ExcalidrawPlugin,\n    NormalizeTypesPlugin.configure({\n      options: {\n        rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n      },\n    }),\n    SingleLinePlugin,\n\n    // Testing\n    PlaywrightPlugin.configure({\n      enabled: process.env.NODE_ENV !== 'production',\n    }),\n  ];\n\n  if (id === 'tabbable') {\n    plugins.push(tabbablePlugin);\n  }\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins,\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const editor = usePlaygroundEditor(id);\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <EditorContainer className={cn(id && 'h-[500px]', className)}>\n          <Editor\n            variant=\"demo\"\n            className={cn(id ? 'h-[calc(100%-37px)] pb-8' : 'pb-[20vh]')}\n            spellCheck={false}\n          />\n        </EditorContainer>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
+      "content": "'use client';\n\nimport React from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { PlaceholderPlugin } from '@udecode/plate-media/react';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { TablePlugin } from '@udecode/plate-table/react';\n\nimport { settingsStore } from '@/components/context/settings-store';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { autoformatPlugin as autoformatListPlugin } from '@/components/editor/plugins/autoformat-list-plugin';\nimport { autoformatPlugin } from '@/components/editor/plugins/autoformat-plugin';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { FixedToolbarListPlugin } from '@/components/editor/plugins/fixed-toolbar-list-plugin';\nimport { FixedToolbarPlugin } from '@/components/editor/plugins/fixed-toolbar-plugin';\nimport { FloatingToolbarPlugin } from '@/components/editor/plugins/floating-toolbar-plugin';\nimport { tabbablePlugin } from '@/components/editor/plugins/tabbable-plugin';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { MediaPlaceholderElement } from '@/components/plate-ui/media-placeholder-element';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '') => {\n  const overridePlugins = usePlaygroundEnabled(id);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  const plugins: any[] = [\n    ...copilotPlugins,\n    ...editorPlugins,\n    id === 'list' ? FixedToolbarListPlugin : FixedToolbarPlugin,\n    FloatingToolbarPlugin,\n\n    id === 'list' ? autoformatListPlugin : autoformatPlugin,\n    TablePlugin.configure({\n      options: {\n        enableMerging: id === 'tableMerge',\n      },\n    }),\n    ListPlugin,\n    TodoListPlugin,\n    ExcalidrawPlugin,\n    NormalizeTypesPlugin.configure({\n      options: {\n        rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n      },\n    }),\n    SingleLinePlugin,\n    PlaceholderPlugin.withComponent(MediaPlaceholderElement),\n    // Testing\n    PlaywrightPlugin.configure({\n      enabled: process.env.NODE_ENV !== 'production',\n    }),\n  ];\n\n  if (id === 'tabbable') {\n    plugins.push(tabbablePlugin);\n  }\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins,\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const editor = usePlaygroundEditor(id);\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <EditorContainer className={cn(id && 'h-[500px]', className)}>\n          <Editor\n            variant=\"demo\"\n            className={cn(id ? 'h-[calc(100%-37px)] pb-8' : 'pb-[20vh]')}\n            spellCheck={false}\n          />\n        </EditorContainer>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
       "path": "example/playground-demo.tsx",
       "target": "components/playground-demo.tsx",
       "type": "registry:example"
diff --git a/apps/www/public/r/styles/default/highlight-demo.json b/apps/www/public/r/styles/default/highlight-demo.json
index 7e7603ec06..b9f70455d5 100644
--- a/apps/www/public/r/styles/default/highlight-demo.json
+++ b/apps/www/public/r/styles/default/highlight-demo.json
@@ -4,7 +4,7 @@
   },
   "files": [
     {
-      "content": "'use client';\n\nimport React from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { TablePlugin } from '@udecode/plate-table/react';\n\nimport { settingsStore } from '@/components/context/settings-store';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { autoformatPlugin as autoformatListPlugin } from '@/components/editor/plugins/autoformat-list-plugin';\nimport { autoformatPlugin } from '@/components/editor/plugins/autoformat-plugin';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { FixedToolbarListPlugin } from '@/components/editor/plugins/fixed-toolbar-list-plugin';\nimport { FixedToolbarPlugin } from '@/components/editor/plugins/fixed-toolbar-plugin';\nimport { FloatingToolbarPlugin } from '@/components/editor/plugins/floating-toolbar-plugin';\nimport { tabbablePlugin } from '@/components/editor/plugins/tabbable-plugin';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '') => {\n  const overridePlugins = usePlaygroundEnabled(id);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  const plugins: any[] = [\n    ...copilotPlugins,\n    ...editorPlugins,\n    id === 'list' ? FixedToolbarListPlugin : FixedToolbarPlugin,\n    FloatingToolbarPlugin,\n\n    id === 'list' ? autoformatListPlugin : autoformatPlugin,\n    TablePlugin.configure({\n      options: {\n        enableMerging: id === 'tableMerge',\n      },\n    }),\n    ListPlugin,\n    TodoListPlugin,\n    ExcalidrawPlugin,\n    NormalizeTypesPlugin.configure({\n      options: {\n        rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n      },\n    }),\n    SingleLinePlugin,\n\n    // Testing\n    PlaywrightPlugin.configure({\n      enabled: process.env.NODE_ENV !== 'production',\n    }),\n  ];\n\n  if (id === 'tabbable') {\n    plugins.push(tabbablePlugin);\n  }\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins,\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const editor = usePlaygroundEditor(id);\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <EditorContainer className={cn(id && 'h-[500px]', className)}>\n          <Editor\n            variant=\"demo\"\n            className={cn(id ? 'h-[calc(100%-37px)] pb-8' : 'pb-[20vh]')}\n            spellCheck={false}\n          />\n        </EditorContainer>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
+      "content": "'use client';\n\nimport React from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { PlaceholderPlugin } from '@udecode/plate-media/react';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { TablePlugin } from '@udecode/plate-table/react';\n\nimport { settingsStore } from '@/components/context/settings-store';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { autoformatPlugin as autoformatListPlugin } from '@/components/editor/plugins/autoformat-list-plugin';\nimport { autoformatPlugin } from '@/components/editor/plugins/autoformat-plugin';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { FixedToolbarListPlugin } from '@/components/editor/plugins/fixed-toolbar-list-plugin';\nimport { FixedToolbarPlugin } from '@/components/editor/plugins/fixed-toolbar-plugin';\nimport { FloatingToolbarPlugin } from '@/components/editor/plugins/floating-toolbar-plugin';\nimport { tabbablePlugin } from '@/components/editor/plugins/tabbable-plugin';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { MediaPlaceholderElement } from '@/components/plate-ui/media-placeholder-element';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '') => {\n  const overridePlugins = usePlaygroundEnabled(id);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  const plugins: any[] = [\n    ...copilotPlugins,\n    ...editorPlugins,\n    id === 'list' ? FixedToolbarListPlugin : FixedToolbarPlugin,\n    FloatingToolbarPlugin,\n\n    id === 'list' ? autoformatListPlugin : autoformatPlugin,\n    TablePlugin.configure({\n      options: {\n        enableMerging: id === 'tableMerge',\n      },\n    }),\n    ListPlugin,\n    TodoListPlugin,\n    ExcalidrawPlugin,\n    NormalizeTypesPlugin.configure({\n      options: {\n        rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n      },\n    }),\n    SingleLinePlugin,\n    PlaceholderPlugin.withComponent(MediaPlaceholderElement),\n    // Testing\n    PlaywrightPlugin.configure({\n      enabled: process.env.NODE_ENV !== 'production',\n    }),\n  ];\n\n  if (id === 'tabbable') {\n    plugins.push(tabbablePlugin);\n  }\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins,\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const editor = usePlaygroundEditor(id);\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <EditorContainer className={cn(id && 'h-[500px]', className)}>\n          <Editor\n            variant=\"demo\"\n            className={cn(id ? 'h-[calc(100%-37px)] pb-8' : 'pb-[20vh]')}\n            spellCheck={false}\n          />\n        </EditorContainer>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
       "path": "example/playground-demo.tsx",
       "target": "components/playground-demo.tsx",
       "type": "registry:example"
diff --git a/apps/www/public/r/styles/default/hr-demo.json b/apps/www/public/r/styles/default/hr-demo.json
index fa179b1b4d..92f22408c0 100644
--- a/apps/www/public/r/styles/default/hr-demo.json
+++ b/apps/www/public/r/styles/default/hr-demo.json
@@ -5,7 +5,7 @@
   },
   "files": [
     {
-      "content": "'use client';\n\nimport React from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { TablePlugin } from '@udecode/plate-table/react';\n\nimport { settingsStore } from '@/components/context/settings-store';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { autoformatPlugin as autoformatListPlugin } from '@/components/editor/plugins/autoformat-list-plugin';\nimport { autoformatPlugin } from '@/components/editor/plugins/autoformat-plugin';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { FixedToolbarListPlugin } from '@/components/editor/plugins/fixed-toolbar-list-plugin';\nimport { FixedToolbarPlugin } from '@/components/editor/plugins/fixed-toolbar-plugin';\nimport { FloatingToolbarPlugin } from '@/components/editor/plugins/floating-toolbar-plugin';\nimport { tabbablePlugin } from '@/components/editor/plugins/tabbable-plugin';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '') => {\n  const overridePlugins = usePlaygroundEnabled(id);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  const plugins: any[] = [\n    ...copilotPlugins,\n    ...editorPlugins,\n    id === 'list' ? FixedToolbarListPlugin : FixedToolbarPlugin,\n    FloatingToolbarPlugin,\n\n    id === 'list' ? autoformatListPlugin : autoformatPlugin,\n    TablePlugin.configure({\n      options: {\n        enableMerging: id === 'tableMerge',\n      },\n    }),\n    ListPlugin,\n    TodoListPlugin,\n    ExcalidrawPlugin,\n    NormalizeTypesPlugin.configure({\n      options: {\n        rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n      },\n    }),\n    SingleLinePlugin,\n\n    // Testing\n    PlaywrightPlugin.configure({\n      enabled: process.env.NODE_ENV !== 'production',\n    }),\n  ];\n\n  if (id === 'tabbable') {\n    plugins.push(tabbablePlugin);\n  }\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins,\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const editor = usePlaygroundEditor(id);\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <EditorContainer className={cn(id && 'h-[500px]', className)}>\n          <Editor\n            variant=\"demo\"\n            className={cn(id ? 'h-[calc(100%-37px)] pb-8' : 'pb-[20vh]')}\n            spellCheck={false}\n          />\n        </EditorContainer>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
+      "content": "'use client';\n\nimport React from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { PlaceholderPlugin } from '@udecode/plate-media/react';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { TablePlugin } from '@udecode/plate-table/react';\n\nimport { settingsStore } from '@/components/context/settings-store';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { autoformatPlugin as autoformatListPlugin } from '@/components/editor/plugins/autoformat-list-plugin';\nimport { autoformatPlugin } from '@/components/editor/plugins/autoformat-plugin';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { FixedToolbarListPlugin } from '@/components/editor/plugins/fixed-toolbar-list-plugin';\nimport { FixedToolbarPlugin } from '@/components/editor/plugins/fixed-toolbar-plugin';\nimport { FloatingToolbarPlugin } from '@/components/editor/plugins/floating-toolbar-plugin';\nimport { tabbablePlugin } from '@/components/editor/plugins/tabbable-plugin';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { MediaPlaceholderElement } from '@/components/plate-ui/media-placeholder-element';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '') => {\n  const overridePlugins = usePlaygroundEnabled(id);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  const plugins: any[] = [\n    ...copilotPlugins,\n    ...editorPlugins,\n    id === 'list' ? FixedToolbarListPlugin : FixedToolbarPlugin,\n    FloatingToolbarPlugin,\n\n    id === 'list' ? autoformatListPlugin : autoformatPlugin,\n    TablePlugin.configure({\n      options: {\n        enableMerging: id === 'tableMerge',\n      },\n    }),\n    ListPlugin,\n    TodoListPlugin,\n    ExcalidrawPlugin,\n    NormalizeTypesPlugin.configure({\n      options: {\n        rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n      },\n    }),\n    SingleLinePlugin,\n    PlaceholderPlugin.withComponent(MediaPlaceholderElement),\n    // Testing\n    PlaywrightPlugin.configure({\n      enabled: process.env.NODE_ENV !== 'production',\n    }),\n  ];\n\n  if (id === 'tabbable') {\n    plugins.push(tabbablePlugin);\n  }\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins,\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const editor = usePlaygroundEditor(id);\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <EditorContainer className={cn(id && 'h-[500px]', className)}>\n          <Editor\n            variant=\"demo\"\n            className={cn(id ? 'h-[calc(100%-37px)] pb-8' : 'pb-[20vh]')}\n            spellCheck={false}\n          />\n        </EditorContainer>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
       "path": "example/playground-demo.tsx",
       "target": "components/playground-demo.tsx",
       "type": "registry:example"
diff --git a/apps/www/public/r/styles/default/image-element.json b/apps/www/public/r/styles/default/image-element.json
index fff20059b4..aa424e2baf 100644
--- a/apps/www/public/r/styles/default/image-element.json
+++ b/apps/www/public/r/styles/default/image-element.json
@@ -20,7 +20,7 @@
   },
   "files": [
     {
-      "content": "'use client';\n\nimport React from 'react';\n\nimport { cn, withRef } from '@udecode/cn';\nimport { withHOC } from '@udecode/plate-common/react';\nimport { Image, ImagePlugin, useMediaState } from '@udecode/plate-media/react';\nimport { ResizableProvider, useResizableStore } from '@udecode/plate-resizable';\n\nimport { Caption, CaptionTextarea } from './caption';\nimport { MediaPopover } from './media-popover';\nimport { PlateElement } from './plate-element';\nimport {\n  Resizable,\n  ResizeHandle,\n  mediaResizeHandleVariants,\n} from './resizable';\n\nexport const ImageElement = withHOC(\n  ResizableProvider,\n  withRef<typeof PlateElement>(\n    ({ children, className, nodeProps, ...props }, ref) => {\n      const { align = 'center', focused, readOnly, selected } = useMediaState();\n\n      const width = useResizableStore().get.width();\n\n      return (\n        <MediaPopover plugin={ImagePlugin}>\n          <PlateElement\n            ref={ref}\n            className={cn('py-2.5', className)}\n            {...props}\n          >\n            <figure className=\"group relative m-0\" contentEditable={false}>\n              <Resizable\n                align={align}\n                options={{\n                  align,\n                  readOnly,\n                }}\n              >\n                <ResizeHandle\n                  className={mediaResizeHandleVariants({ direction: 'left' })}\n                  options={{ direction: 'left' }}\n                />\n                <Image\n                  className={cn(\n                    'block w-full max-w-full cursor-pointer object-cover px-0',\n                    'rounded-sm',\n                    focused && selected && 'ring-2 ring-ring ring-offset-2'\n                  )}\n                  alt=\"\"\n                  {...nodeProps}\n                />\n                <ResizeHandle\n                  className={mediaResizeHandleVariants({\n                    direction: 'right',\n                  })}\n                  options={{ direction: 'right' }}\n                />\n              </Resizable>\n\n              <Caption style={{ width }} align={align}>\n                <CaptionTextarea\n                  readOnly={readOnly}\n                  onFocus={(e) => {\n                    e.preventDefault();\n                  }}\n                  placeholder=\"Write a caption...\"\n                />\n              </Caption>\n            </figure>\n\n            {children}\n          </PlateElement>\n        </MediaPopover>\n      );\n    }\n  )\n);\n",
+      "content": "'use client';\n\nimport React from 'react';\n\nimport { cn, withRef } from '@udecode/cn';\nimport { useEditorRef, withHOC } from '@udecode/plate-common/react';\nimport { useDraggable, useDraggableState } from '@udecode/plate-dnd';\nimport { Image, ImagePlugin, useMediaState } from '@udecode/plate-media/react';\nimport { ResizableProvider, useResizableStore } from '@udecode/plate-resizable';\n\nimport { Caption, CaptionTextarea } from './caption';\nimport { MediaPopover } from './media-popover';\nimport { PlateElement } from './plate-element';\nimport {\n  Resizable,\n  ResizeHandle,\n  mediaResizeHandleVariants,\n} from './resizable';\n\nexport const ImageElement = withHOC(\n  ResizableProvider,\n  withRef<typeof PlateElement>(\n    ({ children, className, nodeProps, ...props }, ref) => {\n      const editor = useEditorRef();\n\n      const { align = 'center', focused, readOnly, selected } = useMediaState();\n\n      const width = useResizableStore().get.width();\n\n      const state = editor.plugins.dnd\n        ? useDraggableState({ element: props.element })\n        : ({} as any);\n\n      const { isDragging } = state;\n      const { handleRef } = useDraggable(state);\n\n      return (\n        <MediaPopover plugin={ImagePlugin}>\n          <PlateElement\n            ref={ref}\n            className={cn('py-2.5', className)}\n            {...props}\n          >\n            <figure className=\"group relative m-0\" contentEditable={false}>\n              <Resizable\n                align={align}\n                options={{\n                  align,\n                  readOnly,\n                }}\n              >\n                <ResizeHandle\n                  className={mediaResizeHandleVariants({ direction: 'left' })}\n                  options={{ direction: 'left' }}\n                />\n                <Image\n                  ref={handleRef}\n                  className={cn(\n                    'block w-full max-w-full cursor-pointer object-cover px-0',\n                    'rounded-sm',\n                    focused && selected && 'ring-2 ring-ring ring-offset-2',\n                    isDragging && 'opacity-50'\n                  )}\n                  alt=\"\"\n                  {...nodeProps}\n                />\n                <ResizeHandle\n                  className={mediaResizeHandleVariants({\n                    direction: 'right',\n                  })}\n                  options={{ direction: 'right' }}\n                />\n              </Resizable>\n\n              <Caption style={{ width }} align={align}>\n                <CaptionTextarea\n                  readOnly={readOnly}\n                  onFocus={(e) => {\n                    e.preventDefault();\n                  }}\n                  placeholder=\"Write a caption...\"\n                />\n              </Caption>\n            </figure>\n\n            {children}\n          </PlateElement>\n        </MediaPopover>\n      );\n    }\n  )\n);\n",
       "path": "plate-ui/image-element.tsx",
       "target": "components/plate-ui/image-element.tsx",
       "type": "registry:ui"
diff --git a/apps/www/public/r/styles/default/indent-demo.json b/apps/www/public/r/styles/default/indent-demo.json
index 253354f338..89dad9aa96 100644
--- a/apps/www/public/r/styles/default/indent-demo.json
+++ b/apps/www/public/r/styles/default/indent-demo.json
@@ -4,7 +4,7 @@
   },
   "files": [
     {
-      "content": "'use client';\n\nimport React from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { TablePlugin } from '@udecode/plate-table/react';\n\nimport { settingsStore } from '@/components/context/settings-store';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { autoformatPlugin as autoformatListPlugin } from '@/components/editor/plugins/autoformat-list-plugin';\nimport { autoformatPlugin } from '@/components/editor/plugins/autoformat-plugin';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { FixedToolbarListPlugin } from '@/components/editor/plugins/fixed-toolbar-list-plugin';\nimport { FixedToolbarPlugin } from '@/components/editor/plugins/fixed-toolbar-plugin';\nimport { FloatingToolbarPlugin } from '@/components/editor/plugins/floating-toolbar-plugin';\nimport { tabbablePlugin } from '@/components/editor/plugins/tabbable-plugin';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '') => {\n  const overridePlugins = usePlaygroundEnabled(id);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  const plugins: any[] = [\n    ...copilotPlugins,\n    ...editorPlugins,\n    id === 'list' ? FixedToolbarListPlugin : FixedToolbarPlugin,\n    FloatingToolbarPlugin,\n\n    id === 'list' ? autoformatListPlugin : autoformatPlugin,\n    TablePlugin.configure({\n      options: {\n        enableMerging: id === 'tableMerge',\n      },\n    }),\n    ListPlugin,\n    TodoListPlugin,\n    ExcalidrawPlugin,\n    NormalizeTypesPlugin.configure({\n      options: {\n        rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n      },\n    }),\n    SingleLinePlugin,\n\n    // Testing\n    PlaywrightPlugin.configure({\n      enabled: process.env.NODE_ENV !== 'production',\n    }),\n  ];\n\n  if (id === 'tabbable') {\n    plugins.push(tabbablePlugin);\n  }\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins,\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const editor = usePlaygroundEditor(id);\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <EditorContainer className={cn(id && 'h-[500px]', className)}>\n          <Editor\n            variant=\"demo\"\n            className={cn(id ? 'h-[calc(100%-37px)] pb-8' : 'pb-[20vh]')}\n            spellCheck={false}\n          />\n        </EditorContainer>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
+      "content": "'use client';\n\nimport React from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { PlaceholderPlugin } from '@udecode/plate-media/react';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { TablePlugin } from '@udecode/plate-table/react';\n\nimport { settingsStore } from '@/components/context/settings-store';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { autoformatPlugin as autoformatListPlugin } from '@/components/editor/plugins/autoformat-list-plugin';\nimport { autoformatPlugin } from '@/components/editor/plugins/autoformat-plugin';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { FixedToolbarListPlugin } from '@/components/editor/plugins/fixed-toolbar-list-plugin';\nimport { FixedToolbarPlugin } from '@/components/editor/plugins/fixed-toolbar-plugin';\nimport { FloatingToolbarPlugin } from '@/components/editor/plugins/floating-toolbar-plugin';\nimport { tabbablePlugin } from '@/components/editor/plugins/tabbable-plugin';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { MediaPlaceholderElement } from '@/components/plate-ui/media-placeholder-element';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '') => {\n  const overridePlugins = usePlaygroundEnabled(id);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  const plugins: any[] = [\n    ...copilotPlugins,\n    ...editorPlugins,\n    id === 'list' ? FixedToolbarListPlugin : FixedToolbarPlugin,\n    FloatingToolbarPlugin,\n\n    id === 'list' ? autoformatListPlugin : autoformatPlugin,\n    TablePlugin.configure({\n      options: {\n        enableMerging: id === 'tableMerge',\n      },\n    }),\n    ListPlugin,\n    TodoListPlugin,\n    ExcalidrawPlugin,\n    NormalizeTypesPlugin.configure({\n      options: {\n        rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n      },\n    }),\n    SingleLinePlugin,\n    PlaceholderPlugin.withComponent(MediaPlaceholderElement),\n    // Testing\n    PlaywrightPlugin.configure({\n      enabled: process.env.NODE_ENV !== 'production',\n    }),\n  ];\n\n  if (id === 'tabbable') {\n    plugins.push(tabbablePlugin);\n  }\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins,\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const editor = usePlaygroundEditor(id);\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <EditorContainer className={cn(id && 'h-[500px]', className)}>\n          <Editor\n            variant=\"demo\"\n            className={cn(id ? 'h-[calc(100%-37px)] pb-8' : 'pb-[20vh]')}\n            spellCheck={false}\n          />\n        </EditorContainer>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
       "path": "example/playground-demo.tsx",
       "target": "components/playground-demo.tsx",
       "type": "registry:example"
diff --git a/apps/www/public/r/styles/default/kbd-demo.json b/apps/www/public/r/styles/default/kbd-demo.json
index aff2df94b4..62c2ebf005 100644
--- a/apps/www/public/r/styles/default/kbd-demo.json
+++ b/apps/www/public/r/styles/default/kbd-demo.json
@@ -4,7 +4,7 @@
   },
   "files": [
     {
-      "content": "'use client';\n\nimport React from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { TablePlugin } from '@udecode/plate-table/react';\n\nimport { settingsStore } from '@/components/context/settings-store';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { autoformatPlugin as autoformatListPlugin } from '@/components/editor/plugins/autoformat-list-plugin';\nimport { autoformatPlugin } from '@/components/editor/plugins/autoformat-plugin';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { FixedToolbarListPlugin } from '@/components/editor/plugins/fixed-toolbar-list-plugin';\nimport { FixedToolbarPlugin } from '@/components/editor/plugins/fixed-toolbar-plugin';\nimport { FloatingToolbarPlugin } from '@/components/editor/plugins/floating-toolbar-plugin';\nimport { tabbablePlugin } from '@/components/editor/plugins/tabbable-plugin';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '') => {\n  const overridePlugins = usePlaygroundEnabled(id);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  const plugins: any[] = [\n    ...copilotPlugins,\n    ...editorPlugins,\n    id === 'list' ? FixedToolbarListPlugin : FixedToolbarPlugin,\n    FloatingToolbarPlugin,\n\n    id === 'list' ? autoformatListPlugin : autoformatPlugin,\n    TablePlugin.configure({\n      options: {\n        enableMerging: id === 'tableMerge',\n      },\n    }),\n    ListPlugin,\n    TodoListPlugin,\n    ExcalidrawPlugin,\n    NormalizeTypesPlugin.configure({\n      options: {\n        rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n      },\n    }),\n    SingleLinePlugin,\n\n    // Testing\n    PlaywrightPlugin.configure({\n      enabled: process.env.NODE_ENV !== 'production',\n    }),\n  ];\n\n  if (id === 'tabbable') {\n    plugins.push(tabbablePlugin);\n  }\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins,\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const editor = usePlaygroundEditor(id);\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <EditorContainer className={cn(id && 'h-[500px]', className)}>\n          <Editor\n            variant=\"demo\"\n            className={cn(id ? 'h-[calc(100%-37px)] pb-8' : 'pb-[20vh]')}\n            spellCheck={false}\n          />\n        </EditorContainer>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
+      "content": "'use client';\n\nimport React from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { PlaceholderPlugin } from '@udecode/plate-media/react';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { TablePlugin } from '@udecode/plate-table/react';\n\nimport { settingsStore } from '@/components/context/settings-store';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { autoformatPlugin as autoformatListPlugin } from '@/components/editor/plugins/autoformat-list-plugin';\nimport { autoformatPlugin } from '@/components/editor/plugins/autoformat-plugin';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { FixedToolbarListPlugin } from '@/components/editor/plugins/fixed-toolbar-list-plugin';\nimport { FixedToolbarPlugin } from '@/components/editor/plugins/fixed-toolbar-plugin';\nimport { FloatingToolbarPlugin } from '@/components/editor/plugins/floating-toolbar-plugin';\nimport { tabbablePlugin } from '@/components/editor/plugins/tabbable-plugin';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { MediaPlaceholderElement } from '@/components/plate-ui/media-placeholder-element';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '') => {\n  const overridePlugins = usePlaygroundEnabled(id);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  const plugins: any[] = [\n    ...copilotPlugins,\n    ...editorPlugins,\n    id === 'list' ? FixedToolbarListPlugin : FixedToolbarPlugin,\n    FloatingToolbarPlugin,\n\n    id === 'list' ? autoformatListPlugin : autoformatPlugin,\n    TablePlugin.configure({\n      options: {\n        enableMerging: id === 'tableMerge',\n      },\n    }),\n    ListPlugin,\n    TodoListPlugin,\n    ExcalidrawPlugin,\n    NormalizeTypesPlugin.configure({\n      options: {\n        rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n      },\n    }),\n    SingleLinePlugin,\n    PlaceholderPlugin.withComponent(MediaPlaceholderElement),\n    // Testing\n    PlaywrightPlugin.configure({\n      enabled: process.env.NODE_ENV !== 'production',\n    }),\n  ];\n\n  if (id === 'tabbable') {\n    plugins.push(tabbablePlugin);\n  }\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins,\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const editor = usePlaygroundEditor(id);\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <EditorContainer className={cn(id && 'h-[500px]', className)}>\n          <Editor\n            variant=\"demo\"\n            className={cn(id ? 'h-[calc(100%-37px)] pb-8' : 'pb-[20vh]')}\n            spellCheck={false}\n          />\n        </EditorContainer>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
       "path": "example/playground-demo.tsx",
       "target": "components/playground-demo.tsx",
       "type": "registry:example"
diff --git a/apps/www/public/r/styles/default/line-height-demo.json b/apps/www/public/r/styles/default/line-height-demo.json
index aa639c5207..232417bfe4 100644
--- a/apps/www/public/r/styles/default/line-height-demo.json
+++ b/apps/www/public/r/styles/default/line-height-demo.json
@@ -4,7 +4,7 @@
   },
   "files": [
     {
-      "content": "'use client';\n\nimport React from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { TablePlugin } from '@udecode/plate-table/react';\n\nimport { settingsStore } from '@/components/context/settings-store';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { autoformatPlugin as autoformatListPlugin } from '@/components/editor/plugins/autoformat-list-plugin';\nimport { autoformatPlugin } from '@/components/editor/plugins/autoformat-plugin';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { FixedToolbarListPlugin } from '@/components/editor/plugins/fixed-toolbar-list-plugin';\nimport { FixedToolbarPlugin } from '@/components/editor/plugins/fixed-toolbar-plugin';\nimport { FloatingToolbarPlugin } from '@/components/editor/plugins/floating-toolbar-plugin';\nimport { tabbablePlugin } from '@/components/editor/plugins/tabbable-plugin';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '') => {\n  const overridePlugins = usePlaygroundEnabled(id);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  const plugins: any[] = [\n    ...copilotPlugins,\n    ...editorPlugins,\n    id === 'list' ? FixedToolbarListPlugin : FixedToolbarPlugin,\n    FloatingToolbarPlugin,\n\n    id === 'list' ? autoformatListPlugin : autoformatPlugin,\n    TablePlugin.configure({\n      options: {\n        enableMerging: id === 'tableMerge',\n      },\n    }),\n    ListPlugin,\n    TodoListPlugin,\n    ExcalidrawPlugin,\n    NormalizeTypesPlugin.configure({\n      options: {\n        rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n      },\n    }),\n    SingleLinePlugin,\n\n    // Testing\n    PlaywrightPlugin.configure({\n      enabled: process.env.NODE_ENV !== 'production',\n    }),\n  ];\n\n  if (id === 'tabbable') {\n    plugins.push(tabbablePlugin);\n  }\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins,\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const editor = usePlaygroundEditor(id);\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <EditorContainer className={cn(id && 'h-[500px]', className)}>\n          <Editor\n            variant=\"demo\"\n            className={cn(id ? 'h-[calc(100%-37px)] pb-8' : 'pb-[20vh]')}\n            spellCheck={false}\n          />\n        </EditorContainer>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
+      "content": "'use client';\n\nimport React from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { PlaceholderPlugin } from '@udecode/plate-media/react';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { TablePlugin } from '@udecode/plate-table/react';\n\nimport { settingsStore } from '@/components/context/settings-store';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { autoformatPlugin as autoformatListPlugin } from '@/components/editor/plugins/autoformat-list-plugin';\nimport { autoformatPlugin } from '@/components/editor/plugins/autoformat-plugin';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { FixedToolbarListPlugin } from '@/components/editor/plugins/fixed-toolbar-list-plugin';\nimport { FixedToolbarPlugin } from '@/components/editor/plugins/fixed-toolbar-plugin';\nimport { FloatingToolbarPlugin } from '@/components/editor/plugins/floating-toolbar-plugin';\nimport { tabbablePlugin } from '@/components/editor/plugins/tabbable-plugin';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { MediaPlaceholderElement } from '@/components/plate-ui/media-placeholder-element';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '') => {\n  const overridePlugins = usePlaygroundEnabled(id);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  const plugins: any[] = [\n    ...copilotPlugins,\n    ...editorPlugins,\n    id === 'list' ? FixedToolbarListPlugin : FixedToolbarPlugin,\n    FloatingToolbarPlugin,\n\n    id === 'list' ? autoformatListPlugin : autoformatPlugin,\n    TablePlugin.configure({\n      options: {\n        enableMerging: id === 'tableMerge',\n      },\n    }),\n    ListPlugin,\n    TodoListPlugin,\n    ExcalidrawPlugin,\n    NormalizeTypesPlugin.configure({\n      options: {\n        rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n      },\n    }),\n    SingleLinePlugin,\n    PlaceholderPlugin.withComponent(MediaPlaceholderElement),\n    // Testing\n    PlaywrightPlugin.configure({\n      enabled: process.env.NODE_ENV !== 'production',\n    }),\n  ];\n\n  if (id === 'tabbable') {\n    plugins.push(tabbablePlugin);\n  }\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins,\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const editor = usePlaygroundEditor(id);\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <EditorContainer className={cn(id && 'h-[500px]', className)}>\n          <Editor\n            variant=\"demo\"\n            className={cn(id ? 'h-[calc(100%-37px)] pb-8' : 'pb-[20vh]')}\n            spellCheck={false}\n          />\n        </EditorContainer>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
       "path": "example/playground-demo.tsx",
       "target": "components/playground-demo.tsx",
       "type": "registry:example"
diff --git a/apps/www/public/r/styles/default/link-demo.json b/apps/www/public/r/styles/default/link-demo.json
index 9109dcbf4b..ad0be45e82 100644
--- a/apps/www/public/r/styles/default/link-demo.json
+++ b/apps/www/public/r/styles/default/link-demo.json
@@ -4,7 +4,7 @@
   },
   "files": [
     {
-      "content": "'use client';\n\nimport React from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { TablePlugin } from '@udecode/plate-table/react';\n\nimport { settingsStore } from '@/components/context/settings-store';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { autoformatPlugin as autoformatListPlugin } from '@/components/editor/plugins/autoformat-list-plugin';\nimport { autoformatPlugin } from '@/components/editor/plugins/autoformat-plugin';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { FixedToolbarListPlugin } from '@/components/editor/plugins/fixed-toolbar-list-plugin';\nimport { FixedToolbarPlugin } from '@/components/editor/plugins/fixed-toolbar-plugin';\nimport { FloatingToolbarPlugin } from '@/components/editor/plugins/floating-toolbar-plugin';\nimport { tabbablePlugin } from '@/components/editor/plugins/tabbable-plugin';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '') => {\n  const overridePlugins = usePlaygroundEnabled(id);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  const plugins: any[] = [\n    ...copilotPlugins,\n    ...editorPlugins,\n    id === 'list' ? FixedToolbarListPlugin : FixedToolbarPlugin,\n    FloatingToolbarPlugin,\n\n    id === 'list' ? autoformatListPlugin : autoformatPlugin,\n    TablePlugin.configure({\n      options: {\n        enableMerging: id === 'tableMerge',\n      },\n    }),\n    ListPlugin,\n    TodoListPlugin,\n    ExcalidrawPlugin,\n    NormalizeTypesPlugin.configure({\n      options: {\n        rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n      },\n    }),\n    SingleLinePlugin,\n\n    // Testing\n    PlaywrightPlugin.configure({\n      enabled: process.env.NODE_ENV !== 'production',\n    }),\n  ];\n\n  if (id === 'tabbable') {\n    plugins.push(tabbablePlugin);\n  }\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins,\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const editor = usePlaygroundEditor(id);\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <EditorContainer className={cn(id && 'h-[500px]', className)}>\n          <Editor\n            variant=\"demo\"\n            className={cn(id ? 'h-[calc(100%-37px)] pb-8' : 'pb-[20vh]')}\n            spellCheck={false}\n          />\n        </EditorContainer>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
+      "content": "'use client';\n\nimport React from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { PlaceholderPlugin } from '@udecode/plate-media/react';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { TablePlugin } from '@udecode/plate-table/react';\n\nimport { settingsStore } from '@/components/context/settings-store';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { autoformatPlugin as autoformatListPlugin } from '@/components/editor/plugins/autoformat-list-plugin';\nimport { autoformatPlugin } from '@/components/editor/plugins/autoformat-plugin';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { FixedToolbarListPlugin } from '@/components/editor/plugins/fixed-toolbar-list-plugin';\nimport { FixedToolbarPlugin } from '@/components/editor/plugins/fixed-toolbar-plugin';\nimport { FloatingToolbarPlugin } from '@/components/editor/plugins/floating-toolbar-plugin';\nimport { tabbablePlugin } from '@/components/editor/plugins/tabbable-plugin';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { MediaPlaceholderElement } from '@/components/plate-ui/media-placeholder-element';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '') => {\n  const overridePlugins = usePlaygroundEnabled(id);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  const plugins: any[] = [\n    ...copilotPlugins,\n    ...editorPlugins,\n    id === 'list' ? FixedToolbarListPlugin : FixedToolbarPlugin,\n    FloatingToolbarPlugin,\n\n    id === 'list' ? autoformatListPlugin : autoformatPlugin,\n    TablePlugin.configure({\n      options: {\n        enableMerging: id === 'tableMerge',\n      },\n    }),\n    ListPlugin,\n    TodoListPlugin,\n    ExcalidrawPlugin,\n    NormalizeTypesPlugin.configure({\n      options: {\n        rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n      },\n    }),\n    SingleLinePlugin,\n    PlaceholderPlugin.withComponent(MediaPlaceholderElement),\n    // Testing\n    PlaywrightPlugin.configure({\n      enabled: process.env.NODE_ENV !== 'production',\n    }),\n  ];\n\n  if (id === 'tabbable') {\n    plugins.push(tabbablePlugin);\n  }\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins,\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const editor = usePlaygroundEditor(id);\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <EditorContainer className={cn(id && 'h-[500px]', className)}>\n          <Editor\n            variant=\"demo\"\n            className={cn(id ? 'h-[calc(100%-37px)] pb-8' : 'pb-[20vh]')}\n            spellCheck={false}\n          />\n        </EditorContainer>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
       "path": "example/playground-demo.tsx",
       "target": "components/playground-demo.tsx",
       "type": "registry:example"
diff --git a/apps/www/public/r/styles/default/list-demo.json b/apps/www/public/r/styles/default/list-demo.json
index 300b62a2af..98ed04cbe1 100644
--- a/apps/www/public/r/styles/default/list-demo.json
+++ b/apps/www/public/r/styles/default/list-demo.json
@@ -4,7 +4,7 @@
   },
   "files": [
     {
-      "content": "'use client';\n\nimport React from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { TablePlugin } from '@udecode/plate-table/react';\n\nimport { settingsStore } from '@/components/context/settings-store';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { autoformatPlugin as autoformatListPlugin } from '@/components/editor/plugins/autoformat-list-plugin';\nimport { autoformatPlugin } from '@/components/editor/plugins/autoformat-plugin';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { FixedToolbarListPlugin } from '@/components/editor/plugins/fixed-toolbar-list-plugin';\nimport { FixedToolbarPlugin } from '@/components/editor/plugins/fixed-toolbar-plugin';\nimport { FloatingToolbarPlugin } from '@/components/editor/plugins/floating-toolbar-plugin';\nimport { tabbablePlugin } from '@/components/editor/plugins/tabbable-plugin';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '') => {\n  const overridePlugins = usePlaygroundEnabled(id);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  const plugins: any[] = [\n    ...copilotPlugins,\n    ...editorPlugins,\n    id === 'list' ? FixedToolbarListPlugin : FixedToolbarPlugin,\n    FloatingToolbarPlugin,\n\n    id === 'list' ? autoformatListPlugin : autoformatPlugin,\n    TablePlugin.configure({\n      options: {\n        enableMerging: id === 'tableMerge',\n      },\n    }),\n    ListPlugin,\n    TodoListPlugin,\n    ExcalidrawPlugin,\n    NormalizeTypesPlugin.configure({\n      options: {\n        rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n      },\n    }),\n    SingleLinePlugin,\n\n    // Testing\n    PlaywrightPlugin.configure({\n      enabled: process.env.NODE_ENV !== 'production',\n    }),\n  ];\n\n  if (id === 'tabbable') {\n    plugins.push(tabbablePlugin);\n  }\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins,\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const editor = usePlaygroundEditor(id);\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <EditorContainer className={cn(id && 'h-[500px]', className)}>\n          <Editor\n            variant=\"demo\"\n            className={cn(id ? 'h-[calc(100%-37px)] pb-8' : 'pb-[20vh]')}\n            spellCheck={false}\n          />\n        </EditorContainer>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
+      "content": "'use client';\n\nimport React from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { PlaceholderPlugin } from '@udecode/plate-media/react';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { TablePlugin } from '@udecode/plate-table/react';\n\nimport { settingsStore } from '@/components/context/settings-store';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { autoformatPlugin as autoformatListPlugin } from '@/components/editor/plugins/autoformat-list-plugin';\nimport { autoformatPlugin } from '@/components/editor/plugins/autoformat-plugin';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { FixedToolbarListPlugin } from '@/components/editor/plugins/fixed-toolbar-list-plugin';\nimport { FixedToolbarPlugin } from '@/components/editor/plugins/fixed-toolbar-plugin';\nimport { FloatingToolbarPlugin } from '@/components/editor/plugins/floating-toolbar-plugin';\nimport { tabbablePlugin } from '@/components/editor/plugins/tabbable-plugin';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { MediaPlaceholderElement } from '@/components/plate-ui/media-placeholder-element';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '') => {\n  const overridePlugins = usePlaygroundEnabled(id);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  const plugins: any[] = [\n    ...copilotPlugins,\n    ...editorPlugins,\n    id === 'list' ? FixedToolbarListPlugin : FixedToolbarPlugin,\n    FloatingToolbarPlugin,\n\n    id === 'list' ? autoformatListPlugin : autoformatPlugin,\n    TablePlugin.configure({\n      options: {\n        enableMerging: id === 'tableMerge',\n      },\n    }),\n    ListPlugin,\n    TodoListPlugin,\n    ExcalidrawPlugin,\n    NormalizeTypesPlugin.configure({\n      options: {\n        rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n      },\n    }),\n    SingleLinePlugin,\n    PlaceholderPlugin.withComponent(MediaPlaceholderElement),\n    // Testing\n    PlaywrightPlugin.configure({\n      enabled: process.env.NODE_ENV !== 'production',\n    }),\n  ];\n\n  if (id === 'tabbable') {\n    plugins.push(tabbablePlugin);\n  }\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins,\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const editor = usePlaygroundEditor(id);\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <EditorContainer className={cn(id && 'h-[500px]', className)}>\n          <Editor\n            variant=\"demo\"\n            className={cn(id ? 'h-[calc(100%-37px)] pb-8' : 'pb-[20vh]')}\n            spellCheck={false}\n          />\n        </EditorContainer>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
       "path": "example/playground-demo.tsx",
       "target": "components/playground-demo.tsx",
       "type": "registry:example"
diff --git a/apps/www/public/r/styles/default/media-demo.json b/apps/www/public/r/styles/default/media-demo.json
index 88ff79917a..701698fc31 100644
--- a/apps/www/public/r/styles/default/media-demo.json
+++ b/apps/www/public/r/styles/default/media-demo.json
@@ -4,7 +4,7 @@
   },
   "files": [
     {
-      "content": "'use client';\n\nimport React from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { TablePlugin } from '@udecode/plate-table/react';\n\nimport { settingsStore } from '@/components/context/settings-store';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { autoformatPlugin as autoformatListPlugin } from '@/components/editor/plugins/autoformat-list-plugin';\nimport { autoformatPlugin } from '@/components/editor/plugins/autoformat-plugin';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { FixedToolbarListPlugin } from '@/components/editor/plugins/fixed-toolbar-list-plugin';\nimport { FixedToolbarPlugin } from '@/components/editor/plugins/fixed-toolbar-plugin';\nimport { FloatingToolbarPlugin } from '@/components/editor/plugins/floating-toolbar-plugin';\nimport { tabbablePlugin } from '@/components/editor/plugins/tabbable-plugin';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '') => {\n  const overridePlugins = usePlaygroundEnabled(id);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  const plugins: any[] = [\n    ...copilotPlugins,\n    ...editorPlugins,\n    id === 'list' ? FixedToolbarListPlugin : FixedToolbarPlugin,\n    FloatingToolbarPlugin,\n\n    id === 'list' ? autoformatListPlugin : autoformatPlugin,\n    TablePlugin.configure({\n      options: {\n        enableMerging: id === 'tableMerge',\n      },\n    }),\n    ListPlugin,\n    TodoListPlugin,\n    ExcalidrawPlugin,\n    NormalizeTypesPlugin.configure({\n      options: {\n        rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n      },\n    }),\n    SingleLinePlugin,\n\n    // Testing\n    PlaywrightPlugin.configure({\n      enabled: process.env.NODE_ENV !== 'production',\n    }),\n  ];\n\n  if (id === 'tabbable') {\n    plugins.push(tabbablePlugin);\n  }\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins,\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const editor = usePlaygroundEditor(id);\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <EditorContainer className={cn(id && 'h-[500px]', className)}>\n          <Editor\n            variant=\"demo\"\n            className={cn(id ? 'h-[calc(100%-37px)] pb-8' : 'pb-[20vh]')}\n            spellCheck={false}\n          />\n        </EditorContainer>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
+      "content": "'use client';\n\nimport React from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { PlaceholderPlugin } from '@udecode/plate-media/react';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { TablePlugin } from '@udecode/plate-table/react';\n\nimport { settingsStore } from '@/components/context/settings-store';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { autoformatPlugin as autoformatListPlugin } from '@/components/editor/plugins/autoformat-list-plugin';\nimport { autoformatPlugin } from '@/components/editor/plugins/autoformat-plugin';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { FixedToolbarListPlugin } from '@/components/editor/plugins/fixed-toolbar-list-plugin';\nimport { FixedToolbarPlugin } from '@/components/editor/plugins/fixed-toolbar-plugin';\nimport { FloatingToolbarPlugin } from '@/components/editor/plugins/floating-toolbar-plugin';\nimport { tabbablePlugin } from '@/components/editor/plugins/tabbable-plugin';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { MediaPlaceholderElement } from '@/components/plate-ui/media-placeholder-element';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '') => {\n  const overridePlugins = usePlaygroundEnabled(id);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  const plugins: any[] = [\n    ...copilotPlugins,\n    ...editorPlugins,\n    id === 'list' ? FixedToolbarListPlugin : FixedToolbarPlugin,\n    FloatingToolbarPlugin,\n\n    id === 'list' ? autoformatListPlugin : autoformatPlugin,\n    TablePlugin.configure({\n      options: {\n        enableMerging: id === 'tableMerge',\n      },\n    }),\n    ListPlugin,\n    TodoListPlugin,\n    ExcalidrawPlugin,\n    NormalizeTypesPlugin.configure({\n      options: {\n        rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n      },\n    }),\n    SingleLinePlugin,\n    PlaceholderPlugin.withComponent(MediaPlaceholderElement),\n    // Testing\n    PlaywrightPlugin.configure({\n      enabled: process.env.NODE_ENV !== 'production',\n    }),\n  ];\n\n  if (id === 'tabbable') {\n    plugins.push(tabbablePlugin);\n  }\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins,\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const editor = usePlaygroundEditor(id);\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <EditorContainer className={cn(id && 'h-[500px]', className)}>\n          <Editor\n            variant=\"demo\"\n            className={cn(id ? 'h-[calc(100%-37px)] pb-8' : 'pb-[20vh]')}\n            spellCheck={false}\n          />\n        </EditorContainer>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
       "path": "example/playground-demo.tsx",
       "target": "components/playground-demo.tsx",
       "type": "registry:example"
diff --git a/apps/www/public/r/styles/default/media-plugins.json b/apps/www/public/r/styles/default/media-plugins.json
index cdb2c821ce..bbfffe9811 100644
--- a/apps/www/public/r/styles/default/media-plugins.json
+++ b/apps/www/public/r/styles/default/media-plugins.json
@@ -5,7 +5,7 @@
   ],
   "files": [
     {
-      "content": "'use client';\n\nimport { CaptionPlugin } from '@udecode/plate-caption/react';\nimport {\n  AudioPlugin,\n  FilePlugin,\n  ImagePlugin,\n  MediaEmbedPlugin,\n  PlaceholderPlugin,\n  VideoPlugin,\n} from '@udecode/plate-media/react';\n\nimport { ImagePreview } from '@/components/plate-ui/image-preview';\n\nexport const mediaPlugins = [\n  PlaceholderPlugin,\n  ImagePlugin.extend({\n    options: {\n      disableUploadInsert: true,\n    },\n    render: { afterEditable: ImagePreview },\n  }),\n  MediaEmbedPlugin,\n  VideoPlugin,\n  AudioPlugin,\n  FilePlugin,\n  CaptionPlugin.configure({\n    options: { plugins: [ImagePlugin, MediaEmbedPlugin] },\n  }),\n] as const;\n",
+      "content": "'use client';\n\nimport { CaptionPlugin } from '@udecode/plate-caption/react';\nimport {\n  AudioPlugin,\n  FilePlugin,\n  ImagePlugin,\n  MediaEmbedPlugin,\n  VideoPlugin,\n} from '@udecode/plate-media/react';\n\nimport { ImagePreview } from '@/components/plate-ui/image-preview';\nimport { MediaFloatingToolbar } from '@/components/plate-ui/media-floating-toolbar';\n\nexport const mediaPlugins = [\n  ImagePlugin.extend({\n    options: {\n      disableUploadInsert: true,\n    },\n    render: { afterEditable: ImagePreview },\n  }),\n  MediaEmbedPlugin.configure({\n    render: { afterEditable: () => <MediaFloatingToolbar /> },\n  }),\n  VideoPlugin,\n  AudioPlugin,\n  FilePlugin,\n  CaptionPlugin.configure({\n    options: { plugins: [ImagePlugin, MediaEmbedPlugin] },\n  }),\n] as const;\n",
       "path": "components/editor/plugins/media-plugins.tsx",
       "target": "components/editor/plugins/media-plugins.tsx",
       "type": "registry:component"
diff --git a/apps/www/public/r/styles/default/media-toolbar-button.json b/apps/www/public/r/styles/default/media-toolbar-button.json
index 11b25c030e..10ca4373e3 100644
--- a/apps/www/public/r/styles/default/media-toolbar-button.json
+++ b/apps/www/public/r/styles/default/media-toolbar-button.json
@@ -17,7 +17,7 @@
   },
   "files": [
     {
-      "content": "'use client';\n\nimport React from 'react';\n\nimport { withRef } from '@udecode/cn';\nimport { useEditorRef } from '@udecode/plate-common/react';\nimport {\n  AudioPlugin,\n  FilePlugin,\n  ImagePlugin,\n  VideoPlugin,\n} from '@udecode/plate-media/react';\nimport { AudioLinesIcon, FileUpIcon, Film, ImageIcon } from 'lucide-react';\nimport { useFilePicker } from 'use-file-picker';\n\nimport { ToolbarButton } from './toolbar';\n\nconst MEDIA_CONFIG: Record<\n  string,\n  {\n    accept: string[];\n    icon: React.ReactNode;\n  }\n> = {\n  [AudioPlugin.key]: {\n    accept: ['audio/*'],\n    icon: <AudioLinesIcon />,\n  },\n  [FilePlugin.key]: {\n    accept: ['*'],\n    icon: <FileUpIcon />,\n  },\n  [ImagePlugin.key]: {\n    accept: ['image/*'],\n    icon: <ImageIcon />,\n  },\n  [VideoPlugin.key]: {\n    accept: ['video/*'],\n    icon: <Film />,\n  },\n};\n\nexport const MediaToolbarButton = withRef<\n  typeof ToolbarButton,\n  {\n    nodeType:\n      | typeof AudioPlugin.key\n      | typeof FilePlugin.key\n      | typeof ImagePlugin.key\n      | typeof VideoPlugin.key;\n  }\n>(({ nodeType, ...rest }, ref) => {\n  const editor = useEditorRef();\n\n  /** Open file picker */\n  const { openFilePicker } = useFilePicker({\n    accept: MEDIA_CONFIG[nodeType].accept,\n    multiple: true,\n    onFilesSelected: ({ plainFiles: updatedFiles }) => {\n      (editor as any).tf.insert.media(updatedFiles);\n    },\n  });\n\n  return (\n    <ToolbarButton ref={ref} onClick={openFilePicker} {...rest}>\n      {MEDIA_CONFIG[nodeType].icon}\n    </ToolbarButton>\n  );\n});\n",
+      "content": "'use client';\n\nimport React from 'react';\n\nimport type { DropdownMenuProps } from '@radix-ui/react-dropdown-menu';\n\nimport { cn } from '@udecode/cn';\nimport { useEditorPlugin } from '@udecode/plate-core/react';\nimport {\n  AudioPlugin,\n  FilePlugin,\n  ImagePlugin,\n  MediaEmbedPlugin,\n  VideoPlugin,\n} from '@udecode/plate-media/react';\nimport {\n  AudioLinesIcon,\n  FileUpIcon,\n  FilmIcon,\n  ImageIcon,\n  LinkIcon,\n} from 'lucide-react';\nimport { useFilePicker } from 'use-file-picker';\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuTrigger,\n  useOpenState,\n} from './dropdown-menu';\nimport { ToolbarSplitButton } from './toolbar';\n\nconst MEDIA_CONFIG: Record<\n  string,\n  {\n    accept: string[];\n    icon: React.ReactNode;\n    tooltip: string;\n  }\n> = {\n  [AudioPlugin.key]: {\n    accept: ['audio/*'],\n    icon: <AudioLinesIcon />,\n    tooltip: 'Audio',\n  },\n  [FilePlugin.key]: {\n    accept: ['*'],\n    icon: <FileUpIcon />,\n    tooltip: 'File',\n  },\n  [ImagePlugin.key]: {\n    accept: ['image/*'],\n    icon: <ImageIcon />,\n    tooltip: 'Image',\n  },\n  [VideoPlugin.key]: {\n    accept: ['video/*'],\n    icon: <FilmIcon />,\n    tooltip: 'Video',\n  },\n};\n\nexport function MediaDropdownMenu({\n  children,\n  nodeType,\n  ...props\n}: DropdownMenuProps & { nodeType: string }) {\n  const currentConfig = MEDIA_CONFIG[nodeType];\n\n  const { api, editor } = useEditorPlugin(MediaEmbedPlugin);\n  const { openFilePicker } = useFilePicker({\n    accept: currentConfig.accept,\n    multiple: true,\n    onFilesSelected: ({ plainFiles: updatedFiles }) => {\n      (editor as any).tf.insert.media(updatedFiles);\n    },\n  });\n\n  const openState = useOpenState();\n\n  return (\n    <DropdownMenu {...openState} modal={false} {...props}>\n      <DropdownMenuTrigger asChild>\n        <ToolbarSplitButton\n          onMainButtonClick={() => openFilePicker()}\n          pressed={openState.open}\n          tooltip={currentConfig.tooltip}\n        >\n          {currentConfig.icon}\n        </ToolbarSplitButton>\n      </DropdownMenuTrigger>\n\n      <DropdownMenuContent\n        className={cn('min-w-0 data-[state=closed]:hidden')}\n        align=\"start\"\n      >\n        <DropdownMenuRadioGroup>\n          <DropdownMenuRadioItem\n            value=\"upload\"\n            onSelect={() => openFilePicker()}\n            hideIcon\n          >\n            <div className=\"flex items-center gap-2\">\n              {currentConfig.icon}\n              <span className=\"text-sm\">Upload from computer</span>\n            </div>\n          </DropdownMenuRadioItem>\n          <DropdownMenuRadioItem\n            value=\"url\"\n            onSelect={() => {\n              api.media_embed.openFloating(nodeType);\n            }}\n            hideIcon\n          >\n            <div className=\"flex items-center gap-2\">\n              <LinkIcon />\n              <span className=\"text-sm\">Insert via URL</span>\n            </div>\n          </DropdownMenuRadioItem>\n        </DropdownMenuRadioGroup>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n}\n",
       "path": "plate-ui/media-toolbar-button.tsx",
       "target": "components/plate-ui/media-toolbar-button.tsx",
       "type": "registry:ui"
diff --git a/apps/www/public/r/styles/default/mention-demo.json b/apps/www/public/r/styles/default/mention-demo.json
index 533a1669b0..8f193ea3ac 100644
--- a/apps/www/public/r/styles/default/mention-demo.json
+++ b/apps/www/public/r/styles/default/mention-demo.json
@@ -4,7 +4,7 @@
   },
   "files": [
     {
-      "content": "'use client';\n\nimport React from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { TablePlugin } from '@udecode/plate-table/react';\n\nimport { settingsStore } from '@/components/context/settings-store';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { autoformatPlugin as autoformatListPlugin } from '@/components/editor/plugins/autoformat-list-plugin';\nimport { autoformatPlugin } from '@/components/editor/plugins/autoformat-plugin';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { FixedToolbarListPlugin } from '@/components/editor/plugins/fixed-toolbar-list-plugin';\nimport { FixedToolbarPlugin } from '@/components/editor/plugins/fixed-toolbar-plugin';\nimport { FloatingToolbarPlugin } from '@/components/editor/plugins/floating-toolbar-plugin';\nimport { tabbablePlugin } from '@/components/editor/plugins/tabbable-plugin';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '') => {\n  const overridePlugins = usePlaygroundEnabled(id);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  const plugins: any[] = [\n    ...copilotPlugins,\n    ...editorPlugins,\n    id === 'list' ? FixedToolbarListPlugin : FixedToolbarPlugin,\n    FloatingToolbarPlugin,\n\n    id === 'list' ? autoformatListPlugin : autoformatPlugin,\n    TablePlugin.configure({\n      options: {\n        enableMerging: id === 'tableMerge',\n      },\n    }),\n    ListPlugin,\n    TodoListPlugin,\n    ExcalidrawPlugin,\n    NormalizeTypesPlugin.configure({\n      options: {\n        rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n      },\n    }),\n    SingleLinePlugin,\n\n    // Testing\n    PlaywrightPlugin.configure({\n      enabled: process.env.NODE_ENV !== 'production',\n    }),\n  ];\n\n  if (id === 'tabbable') {\n    plugins.push(tabbablePlugin);\n  }\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins,\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const editor = usePlaygroundEditor(id);\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <EditorContainer className={cn(id && 'h-[500px]', className)}>\n          <Editor\n            variant=\"demo\"\n            className={cn(id ? 'h-[calc(100%-37px)] pb-8' : 'pb-[20vh]')}\n            spellCheck={false}\n          />\n        </EditorContainer>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
+      "content": "'use client';\n\nimport React from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { PlaceholderPlugin } from '@udecode/plate-media/react';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { TablePlugin } from '@udecode/plate-table/react';\n\nimport { settingsStore } from '@/components/context/settings-store';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { autoformatPlugin as autoformatListPlugin } from '@/components/editor/plugins/autoformat-list-plugin';\nimport { autoformatPlugin } from '@/components/editor/plugins/autoformat-plugin';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { FixedToolbarListPlugin } from '@/components/editor/plugins/fixed-toolbar-list-plugin';\nimport { FixedToolbarPlugin } from '@/components/editor/plugins/fixed-toolbar-plugin';\nimport { FloatingToolbarPlugin } from '@/components/editor/plugins/floating-toolbar-plugin';\nimport { tabbablePlugin } from '@/components/editor/plugins/tabbable-plugin';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { MediaPlaceholderElement } from '@/components/plate-ui/media-placeholder-element';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '') => {\n  const overridePlugins = usePlaygroundEnabled(id);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  const plugins: any[] = [\n    ...copilotPlugins,\n    ...editorPlugins,\n    id === 'list' ? FixedToolbarListPlugin : FixedToolbarPlugin,\n    FloatingToolbarPlugin,\n\n    id === 'list' ? autoformatListPlugin : autoformatPlugin,\n    TablePlugin.configure({\n      options: {\n        enableMerging: id === 'tableMerge',\n      },\n    }),\n    ListPlugin,\n    TodoListPlugin,\n    ExcalidrawPlugin,\n    NormalizeTypesPlugin.configure({\n      options: {\n        rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n      },\n    }),\n    SingleLinePlugin,\n    PlaceholderPlugin.withComponent(MediaPlaceholderElement),\n    // Testing\n    PlaywrightPlugin.configure({\n      enabled: process.env.NODE_ENV !== 'production',\n    }),\n  ];\n\n  if (id === 'tabbable') {\n    plugins.push(tabbablePlugin);\n  }\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins,\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const editor = usePlaygroundEditor(id);\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <EditorContainer className={cn(id && 'h-[500px]', className)}>\n          <Editor\n            variant=\"demo\"\n            className={cn(id ? 'h-[calc(100%-37px)] pb-8' : 'pb-[20vh]')}\n            spellCheck={false}\n          />\n        </EditorContainer>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
       "path": "example/playground-demo.tsx",
       "target": "components/playground-demo.tsx",
       "type": "registry:example"
diff --git a/apps/www/public/r/styles/default/mode-demo.json b/apps/www/public/r/styles/default/mode-demo.json
index 6b2b515482..b918322c49 100644
--- a/apps/www/public/r/styles/default/mode-demo.json
+++ b/apps/www/public/r/styles/default/mode-demo.json
@@ -4,7 +4,7 @@
   },
   "files": [
     {
-      "content": "'use client';\n\nimport React from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { TablePlugin } from '@udecode/plate-table/react';\n\nimport { settingsStore } from '@/components/context/settings-store';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { autoformatPlugin as autoformatListPlugin } from '@/components/editor/plugins/autoformat-list-plugin';\nimport { autoformatPlugin } from '@/components/editor/plugins/autoformat-plugin';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { FixedToolbarListPlugin } from '@/components/editor/plugins/fixed-toolbar-list-plugin';\nimport { FixedToolbarPlugin } from '@/components/editor/plugins/fixed-toolbar-plugin';\nimport { FloatingToolbarPlugin } from '@/components/editor/plugins/floating-toolbar-plugin';\nimport { tabbablePlugin } from '@/components/editor/plugins/tabbable-plugin';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '') => {\n  const overridePlugins = usePlaygroundEnabled(id);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  const plugins: any[] = [\n    ...copilotPlugins,\n    ...editorPlugins,\n    id === 'list' ? FixedToolbarListPlugin : FixedToolbarPlugin,\n    FloatingToolbarPlugin,\n\n    id === 'list' ? autoformatListPlugin : autoformatPlugin,\n    TablePlugin.configure({\n      options: {\n        enableMerging: id === 'tableMerge',\n      },\n    }),\n    ListPlugin,\n    TodoListPlugin,\n    ExcalidrawPlugin,\n    NormalizeTypesPlugin.configure({\n      options: {\n        rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n      },\n    }),\n    SingleLinePlugin,\n\n    // Testing\n    PlaywrightPlugin.configure({\n      enabled: process.env.NODE_ENV !== 'production',\n    }),\n  ];\n\n  if (id === 'tabbable') {\n    plugins.push(tabbablePlugin);\n  }\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins,\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const editor = usePlaygroundEditor(id);\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <EditorContainer className={cn(id && 'h-[500px]', className)}>\n          <Editor\n            variant=\"demo\"\n            className={cn(id ? 'h-[calc(100%-37px)] pb-8' : 'pb-[20vh]')}\n            spellCheck={false}\n          />\n        </EditorContainer>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
+      "content": "'use client';\n\nimport React from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { PlaceholderPlugin } from '@udecode/plate-media/react';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { TablePlugin } from '@udecode/plate-table/react';\n\nimport { settingsStore } from '@/components/context/settings-store';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { autoformatPlugin as autoformatListPlugin } from '@/components/editor/plugins/autoformat-list-plugin';\nimport { autoformatPlugin } from '@/components/editor/plugins/autoformat-plugin';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { FixedToolbarListPlugin } from '@/components/editor/plugins/fixed-toolbar-list-plugin';\nimport { FixedToolbarPlugin } from '@/components/editor/plugins/fixed-toolbar-plugin';\nimport { FloatingToolbarPlugin } from '@/components/editor/plugins/floating-toolbar-plugin';\nimport { tabbablePlugin } from '@/components/editor/plugins/tabbable-plugin';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { MediaPlaceholderElement } from '@/components/plate-ui/media-placeholder-element';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '') => {\n  const overridePlugins = usePlaygroundEnabled(id);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  const plugins: any[] = [\n    ...copilotPlugins,\n    ...editorPlugins,\n    id === 'list' ? FixedToolbarListPlugin : FixedToolbarPlugin,\n    FloatingToolbarPlugin,\n\n    id === 'list' ? autoformatListPlugin : autoformatPlugin,\n    TablePlugin.configure({\n      options: {\n        enableMerging: id === 'tableMerge',\n      },\n    }),\n    ListPlugin,\n    TodoListPlugin,\n    ExcalidrawPlugin,\n    NormalizeTypesPlugin.configure({\n      options: {\n        rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n      },\n    }),\n    SingleLinePlugin,\n    PlaceholderPlugin.withComponent(MediaPlaceholderElement),\n    // Testing\n    PlaywrightPlugin.configure({\n      enabled: process.env.NODE_ENV !== 'production',\n    }),\n  ];\n\n  if (id === 'tabbable') {\n    plugins.push(tabbablePlugin);\n  }\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins,\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const editor = usePlaygroundEditor(id);\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <EditorContainer className={cn(id && 'h-[500px]', className)}>\n          <Editor\n            variant=\"demo\"\n            className={cn(id ? 'h-[calc(100%-37px)] pb-8' : 'pb-[20vh]')}\n            spellCheck={false}\n          />\n        </EditorContainer>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
       "path": "example/playground-demo.tsx",
       "target": "components/playground-demo.tsx",
       "type": "registry:example"
diff --git a/apps/www/public/r/styles/default/placeholder-demo.json b/apps/www/public/r/styles/default/placeholder-demo.json
index 8a4d0fa111..e341e9d6e7 100644
--- a/apps/www/public/r/styles/default/placeholder-demo.json
+++ b/apps/www/public/r/styles/default/placeholder-demo.json
@@ -4,7 +4,7 @@
   },
   "files": [
     {
-      "content": "'use client';\n\nimport React from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { TablePlugin } from '@udecode/plate-table/react';\n\nimport { settingsStore } from '@/components/context/settings-store';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { autoformatPlugin as autoformatListPlugin } from '@/components/editor/plugins/autoformat-list-plugin';\nimport { autoformatPlugin } from '@/components/editor/plugins/autoformat-plugin';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { FixedToolbarListPlugin } from '@/components/editor/plugins/fixed-toolbar-list-plugin';\nimport { FixedToolbarPlugin } from '@/components/editor/plugins/fixed-toolbar-plugin';\nimport { FloatingToolbarPlugin } from '@/components/editor/plugins/floating-toolbar-plugin';\nimport { tabbablePlugin } from '@/components/editor/plugins/tabbable-plugin';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '') => {\n  const overridePlugins = usePlaygroundEnabled(id);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  const plugins: any[] = [\n    ...copilotPlugins,\n    ...editorPlugins,\n    id === 'list' ? FixedToolbarListPlugin : FixedToolbarPlugin,\n    FloatingToolbarPlugin,\n\n    id === 'list' ? autoformatListPlugin : autoformatPlugin,\n    TablePlugin.configure({\n      options: {\n        enableMerging: id === 'tableMerge',\n      },\n    }),\n    ListPlugin,\n    TodoListPlugin,\n    ExcalidrawPlugin,\n    NormalizeTypesPlugin.configure({\n      options: {\n        rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n      },\n    }),\n    SingleLinePlugin,\n\n    // Testing\n    PlaywrightPlugin.configure({\n      enabled: process.env.NODE_ENV !== 'production',\n    }),\n  ];\n\n  if (id === 'tabbable') {\n    plugins.push(tabbablePlugin);\n  }\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins,\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const editor = usePlaygroundEditor(id);\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <EditorContainer className={cn(id && 'h-[500px]', className)}>\n          <Editor\n            variant=\"demo\"\n            className={cn(id ? 'h-[calc(100%-37px)] pb-8' : 'pb-[20vh]')}\n            spellCheck={false}\n          />\n        </EditorContainer>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
+      "content": "'use client';\n\nimport React from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { PlaceholderPlugin } from '@udecode/plate-media/react';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { TablePlugin } from '@udecode/plate-table/react';\n\nimport { settingsStore } from '@/components/context/settings-store';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { autoformatPlugin as autoformatListPlugin } from '@/components/editor/plugins/autoformat-list-plugin';\nimport { autoformatPlugin } from '@/components/editor/plugins/autoformat-plugin';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { FixedToolbarListPlugin } from '@/components/editor/plugins/fixed-toolbar-list-plugin';\nimport { FixedToolbarPlugin } from '@/components/editor/plugins/fixed-toolbar-plugin';\nimport { FloatingToolbarPlugin } from '@/components/editor/plugins/floating-toolbar-plugin';\nimport { tabbablePlugin } from '@/components/editor/plugins/tabbable-plugin';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { MediaPlaceholderElement } from '@/components/plate-ui/media-placeholder-element';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '') => {\n  const overridePlugins = usePlaygroundEnabled(id);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  const plugins: any[] = [\n    ...copilotPlugins,\n    ...editorPlugins,\n    id === 'list' ? FixedToolbarListPlugin : FixedToolbarPlugin,\n    FloatingToolbarPlugin,\n\n    id === 'list' ? autoformatListPlugin : autoformatPlugin,\n    TablePlugin.configure({\n      options: {\n        enableMerging: id === 'tableMerge',\n      },\n    }),\n    ListPlugin,\n    TodoListPlugin,\n    ExcalidrawPlugin,\n    NormalizeTypesPlugin.configure({\n      options: {\n        rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n      },\n    }),\n    SingleLinePlugin,\n    PlaceholderPlugin.withComponent(MediaPlaceholderElement),\n    // Testing\n    PlaywrightPlugin.configure({\n      enabled: process.env.NODE_ENV !== 'production',\n    }),\n  ];\n\n  if (id === 'tabbable') {\n    plugins.push(tabbablePlugin);\n  }\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins,\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const editor = usePlaygroundEditor(id);\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <EditorContainer className={cn(id && 'h-[500px]', className)}>\n          <Editor\n            variant=\"demo\"\n            className={cn(id ? 'h-[calc(100%-37px)] pb-8' : 'pb-[20vh]')}\n            spellCheck={false}\n          />\n        </EditorContainer>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
       "path": "example/playground-demo.tsx",
       "target": "components/playground-demo.tsx",
       "type": "registry:example"
diff --git a/apps/www/public/r/styles/default/playground-demo.json b/apps/www/public/r/styles/default/playground-demo.json
index 3f6a71d027..09f45f6d71 100644
--- a/apps/www/public/r/styles/default/playground-demo.json
+++ b/apps/www/public/r/styles/default/playground-demo.json
@@ -1,7 +1,7 @@
 {
   "files": [
     {
-      "content": "'use client';\n\nimport React from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { TablePlugin } from '@udecode/plate-table/react';\n\nimport { settingsStore } from '@/components/context/settings-store';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { autoformatPlugin as autoformatListPlugin } from '@/components/editor/plugins/autoformat-list-plugin';\nimport { autoformatPlugin } from '@/components/editor/plugins/autoformat-plugin';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { FixedToolbarListPlugin } from '@/components/editor/plugins/fixed-toolbar-list-plugin';\nimport { FixedToolbarPlugin } from '@/components/editor/plugins/fixed-toolbar-plugin';\nimport { FloatingToolbarPlugin } from '@/components/editor/plugins/floating-toolbar-plugin';\nimport { tabbablePlugin } from '@/components/editor/plugins/tabbable-plugin';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '') => {\n  const overridePlugins = usePlaygroundEnabled(id);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  const plugins: any[] = [\n    ...copilotPlugins,\n    ...editorPlugins,\n    id === 'list' ? FixedToolbarListPlugin : FixedToolbarPlugin,\n    FloatingToolbarPlugin,\n\n    id === 'list' ? autoformatListPlugin : autoformatPlugin,\n    TablePlugin.configure({\n      options: {\n        enableMerging: id === 'tableMerge',\n      },\n    }),\n    ListPlugin,\n    TodoListPlugin,\n    ExcalidrawPlugin,\n    NormalizeTypesPlugin.configure({\n      options: {\n        rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n      },\n    }),\n    SingleLinePlugin,\n\n    // Testing\n    PlaywrightPlugin.configure({\n      enabled: process.env.NODE_ENV !== 'production',\n    }),\n  ];\n\n  if (id === 'tabbable') {\n    plugins.push(tabbablePlugin);\n  }\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins,\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const editor = usePlaygroundEditor(id);\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <EditorContainer className={cn(id && 'h-[500px]', className)}>\n          <Editor\n            variant=\"demo\"\n            className={cn(id ? 'h-[calc(100%-37px)] pb-8' : 'pb-[20vh]')}\n            spellCheck={false}\n          />\n        </EditorContainer>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
+      "content": "'use client';\n\nimport React from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { PlaceholderPlugin } from '@udecode/plate-media/react';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { TablePlugin } from '@udecode/plate-table/react';\n\nimport { settingsStore } from '@/components/context/settings-store';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { autoformatPlugin as autoformatListPlugin } from '@/components/editor/plugins/autoformat-list-plugin';\nimport { autoformatPlugin } from '@/components/editor/plugins/autoformat-plugin';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { FixedToolbarListPlugin } from '@/components/editor/plugins/fixed-toolbar-list-plugin';\nimport { FixedToolbarPlugin } from '@/components/editor/plugins/fixed-toolbar-plugin';\nimport { FloatingToolbarPlugin } from '@/components/editor/plugins/floating-toolbar-plugin';\nimport { tabbablePlugin } from '@/components/editor/plugins/tabbable-plugin';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { MediaPlaceholderElement } from '@/components/plate-ui/media-placeholder-element';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '') => {\n  const overridePlugins = usePlaygroundEnabled(id);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  const plugins: any[] = [\n    ...copilotPlugins,\n    ...editorPlugins,\n    id === 'list' ? FixedToolbarListPlugin : FixedToolbarPlugin,\n    FloatingToolbarPlugin,\n\n    id === 'list' ? autoformatListPlugin : autoformatPlugin,\n    TablePlugin.configure({\n      options: {\n        enableMerging: id === 'tableMerge',\n      },\n    }),\n    ListPlugin,\n    TodoListPlugin,\n    ExcalidrawPlugin,\n    NormalizeTypesPlugin.configure({\n      options: {\n        rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n      },\n    }),\n    SingleLinePlugin,\n    PlaceholderPlugin.withComponent(MediaPlaceholderElement),\n    // Testing\n    PlaywrightPlugin.configure({\n      enabled: process.env.NODE_ENV !== 'production',\n    }),\n  ];\n\n  if (id === 'tabbable') {\n    plugins.push(tabbablePlugin);\n  }\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins,\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const editor = usePlaygroundEditor(id);\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <EditorContainer className={cn(id && 'h-[500px]', className)}>\n          <Editor\n            variant=\"demo\"\n            className={cn(id ? 'h-[calc(100%-37px)] pb-8' : 'pb-[20vh]')}\n            spellCheck={false}\n          />\n        </EditorContainer>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
       "path": "example/playground-demo.tsx",
       "target": "components/playground-demo.tsx",
       "type": "registry:example"
diff --git a/apps/www/public/r/styles/default/resizable-demo.json b/apps/www/public/r/styles/default/resizable-demo.json
index 727ec8a065..4cd5bb158f 100644
--- a/apps/www/public/r/styles/default/resizable-demo.json
+++ b/apps/www/public/r/styles/default/resizable-demo.json
@@ -4,7 +4,7 @@
   },
   "files": [
     {
-      "content": "'use client';\n\nimport React from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { TablePlugin } from '@udecode/plate-table/react';\n\nimport { settingsStore } from '@/components/context/settings-store';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { autoformatPlugin as autoformatListPlugin } from '@/components/editor/plugins/autoformat-list-plugin';\nimport { autoformatPlugin } from '@/components/editor/plugins/autoformat-plugin';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { FixedToolbarListPlugin } from '@/components/editor/plugins/fixed-toolbar-list-plugin';\nimport { FixedToolbarPlugin } from '@/components/editor/plugins/fixed-toolbar-plugin';\nimport { FloatingToolbarPlugin } from '@/components/editor/plugins/floating-toolbar-plugin';\nimport { tabbablePlugin } from '@/components/editor/plugins/tabbable-plugin';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '') => {\n  const overridePlugins = usePlaygroundEnabled(id);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  const plugins: any[] = [\n    ...copilotPlugins,\n    ...editorPlugins,\n    id === 'list' ? FixedToolbarListPlugin : FixedToolbarPlugin,\n    FloatingToolbarPlugin,\n\n    id === 'list' ? autoformatListPlugin : autoformatPlugin,\n    TablePlugin.configure({\n      options: {\n        enableMerging: id === 'tableMerge',\n      },\n    }),\n    ListPlugin,\n    TodoListPlugin,\n    ExcalidrawPlugin,\n    NormalizeTypesPlugin.configure({\n      options: {\n        rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n      },\n    }),\n    SingleLinePlugin,\n\n    // Testing\n    PlaywrightPlugin.configure({\n      enabled: process.env.NODE_ENV !== 'production',\n    }),\n  ];\n\n  if (id === 'tabbable') {\n    plugins.push(tabbablePlugin);\n  }\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins,\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const editor = usePlaygroundEditor(id);\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <EditorContainer className={cn(id && 'h-[500px]', className)}>\n          <Editor\n            variant=\"demo\"\n            className={cn(id ? 'h-[calc(100%-37px)] pb-8' : 'pb-[20vh]')}\n            spellCheck={false}\n          />\n        </EditorContainer>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
+      "content": "'use client';\n\nimport React from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { PlaceholderPlugin } from '@udecode/plate-media/react';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { TablePlugin } from '@udecode/plate-table/react';\n\nimport { settingsStore } from '@/components/context/settings-store';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { autoformatPlugin as autoformatListPlugin } from '@/components/editor/plugins/autoformat-list-plugin';\nimport { autoformatPlugin } from '@/components/editor/plugins/autoformat-plugin';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { FixedToolbarListPlugin } from '@/components/editor/plugins/fixed-toolbar-list-plugin';\nimport { FixedToolbarPlugin } from '@/components/editor/plugins/fixed-toolbar-plugin';\nimport { FloatingToolbarPlugin } from '@/components/editor/plugins/floating-toolbar-plugin';\nimport { tabbablePlugin } from '@/components/editor/plugins/tabbable-plugin';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { MediaPlaceholderElement } from '@/components/plate-ui/media-placeholder-element';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '') => {\n  const overridePlugins = usePlaygroundEnabled(id);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  const plugins: any[] = [\n    ...copilotPlugins,\n    ...editorPlugins,\n    id === 'list' ? FixedToolbarListPlugin : FixedToolbarPlugin,\n    FloatingToolbarPlugin,\n\n    id === 'list' ? autoformatListPlugin : autoformatPlugin,\n    TablePlugin.configure({\n      options: {\n        enableMerging: id === 'tableMerge',\n      },\n    }),\n    ListPlugin,\n    TodoListPlugin,\n    ExcalidrawPlugin,\n    NormalizeTypesPlugin.configure({\n      options: {\n        rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n      },\n    }),\n    SingleLinePlugin,\n    PlaceholderPlugin.withComponent(MediaPlaceholderElement),\n    // Testing\n    PlaywrightPlugin.configure({\n      enabled: process.env.NODE_ENV !== 'production',\n    }),\n  ];\n\n  if (id === 'tabbable') {\n    plugins.push(tabbablePlugin);\n  }\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins,\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const editor = usePlaygroundEditor(id);\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <EditorContainer className={cn(id && 'h-[500px]', className)}>\n          <Editor\n            variant=\"demo\"\n            className={cn(id ? 'h-[calc(100%-37px)] pb-8' : 'pb-[20vh]')}\n            spellCheck={false}\n          />\n        </EditorContainer>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
       "path": "example/playground-demo.tsx",
       "target": "components/playground-demo.tsx",
       "type": "registry:example"
diff --git a/apps/www/public/r/styles/default/slash-command-demo.json b/apps/www/public/r/styles/default/slash-command-demo.json
index e1b3f74d3f..b375c0b945 100644
--- a/apps/www/public/r/styles/default/slash-command-demo.json
+++ b/apps/www/public/r/styles/default/slash-command-demo.json
@@ -4,7 +4,7 @@
   },
   "files": [
     {
-      "content": "'use client';\n\nimport React from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { TablePlugin } from '@udecode/plate-table/react';\n\nimport { settingsStore } from '@/components/context/settings-store';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { autoformatPlugin as autoformatListPlugin } from '@/components/editor/plugins/autoformat-list-plugin';\nimport { autoformatPlugin } from '@/components/editor/plugins/autoformat-plugin';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { FixedToolbarListPlugin } from '@/components/editor/plugins/fixed-toolbar-list-plugin';\nimport { FixedToolbarPlugin } from '@/components/editor/plugins/fixed-toolbar-plugin';\nimport { FloatingToolbarPlugin } from '@/components/editor/plugins/floating-toolbar-plugin';\nimport { tabbablePlugin } from '@/components/editor/plugins/tabbable-plugin';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '') => {\n  const overridePlugins = usePlaygroundEnabled(id);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  const plugins: any[] = [\n    ...copilotPlugins,\n    ...editorPlugins,\n    id === 'list' ? FixedToolbarListPlugin : FixedToolbarPlugin,\n    FloatingToolbarPlugin,\n\n    id === 'list' ? autoformatListPlugin : autoformatPlugin,\n    TablePlugin.configure({\n      options: {\n        enableMerging: id === 'tableMerge',\n      },\n    }),\n    ListPlugin,\n    TodoListPlugin,\n    ExcalidrawPlugin,\n    NormalizeTypesPlugin.configure({\n      options: {\n        rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n      },\n    }),\n    SingleLinePlugin,\n\n    // Testing\n    PlaywrightPlugin.configure({\n      enabled: process.env.NODE_ENV !== 'production',\n    }),\n  ];\n\n  if (id === 'tabbable') {\n    plugins.push(tabbablePlugin);\n  }\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins,\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const editor = usePlaygroundEditor(id);\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <EditorContainer className={cn(id && 'h-[500px]', className)}>\n          <Editor\n            variant=\"demo\"\n            className={cn(id ? 'h-[calc(100%-37px)] pb-8' : 'pb-[20vh]')}\n            spellCheck={false}\n          />\n        </EditorContainer>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
+      "content": "'use client';\n\nimport React from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { PlaceholderPlugin } from '@udecode/plate-media/react';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { TablePlugin } from '@udecode/plate-table/react';\n\nimport { settingsStore } from '@/components/context/settings-store';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { autoformatPlugin as autoformatListPlugin } from '@/components/editor/plugins/autoformat-list-plugin';\nimport { autoformatPlugin } from '@/components/editor/plugins/autoformat-plugin';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { FixedToolbarListPlugin } from '@/components/editor/plugins/fixed-toolbar-list-plugin';\nimport { FixedToolbarPlugin } from '@/components/editor/plugins/fixed-toolbar-plugin';\nimport { FloatingToolbarPlugin } from '@/components/editor/plugins/floating-toolbar-plugin';\nimport { tabbablePlugin } from '@/components/editor/plugins/tabbable-plugin';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { MediaPlaceholderElement } from '@/components/plate-ui/media-placeholder-element';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '') => {\n  const overridePlugins = usePlaygroundEnabled(id);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  const plugins: any[] = [\n    ...copilotPlugins,\n    ...editorPlugins,\n    id === 'list' ? FixedToolbarListPlugin : FixedToolbarPlugin,\n    FloatingToolbarPlugin,\n\n    id === 'list' ? autoformatListPlugin : autoformatPlugin,\n    TablePlugin.configure({\n      options: {\n        enableMerging: id === 'tableMerge',\n      },\n    }),\n    ListPlugin,\n    TodoListPlugin,\n    ExcalidrawPlugin,\n    NormalizeTypesPlugin.configure({\n      options: {\n        rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n      },\n    }),\n    SingleLinePlugin,\n    PlaceholderPlugin.withComponent(MediaPlaceholderElement),\n    // Testing\n    PlaywrightPlugin.configure({\n      enabled: process.env.NODE_ENV !== 'production',\n    }),\n  ];\n\n  if (id === 'tabbable') {\n    plugins.push(tabbablePlugin);\n  }\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins,\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const editor = usePlaygroundEditor(id);\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <EditorContainer className={cn(id && 'h-[500px]', className)}>\n          <Editor\n            variant=\"demo\"\n            className={cn(id ? 'h-[calc(100%-37px)] pb-8' : 'pb-[20vh]')}\n            spellCheck={false}\n          />\n        </EditorContainer>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
       "path": "example/playground-demo.tsx",
       "target": "components/playground-demo.tsx",
       "type": "registry:example"
diff --git a/apps/www/public/r/styles/default/table-demo.json b/apps/www/public/r/styles/default/table-demo.json
index a7b9e937ea..1a069a0d0d 100644
--- a/apps/www/public/r/styles/default/table-demo.json
+++ b/apps/www/public/r/styles/default/table-demo.json
@@ -4,7 +4,7 @@
   },
   "files": [
     {
-      "content": "'use client';\n\nimport React from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { TablePlugin } from '@udecode/plate-table/react';\n\nimport { settingsStore } from '@/components/context/settings-store';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { autoformatPlugin as autoformatListPlugin } from '@/components/editor/plugins/autoformat-list-plugin';\nimport { autoformatPlugin } from '@/components/editor/plugins/autoformat-plugin';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { FixedToolbarListPlugin } from '@/components/editor/plugins/fixed-toolbar-list-plugin';\nimport { FixedToolbarPlugin } from '@/components/editor/plugins/fixed-toolbar-plugin';\nimport { FloatingToolbarPlugin } from '@/components/editor/plugins/floating-toolbar-plugin';\nimport { tabbablePlugin } from '@/components/editor/plugins/tabbable-plugin';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '') => {\n  const overridePlugins = usePlaygroundEnabled(id);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  const plugins: any[] = [\n    ...copilotPlugins,\n    ...editorPlugins,\n    id === 'list' ? FixedToolbarListPlugin : FixedToolbarPlugin,\n    FloatingToolbarPlugin,\n\n    id === 'list' ? autoformatListPlugin : autoformatPlugin,\n    TablePlugin.configure({\n      options: {\n        enableMerging: id === 'tableMerge',\n      },\n    }),\n    ListPlugin,\n    TodoListPlugin,\n    ExcalidrawPlugin,\n    NormalizeTypesPlugin.configure({\n      options: {\n        rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n      },\n    }),\n    SingleLinePlugin,\n\n    // Testing\n    PlaywrightPlugin.configure({\n      enabled: process.env.NODE_ENV !== 'production',\n    }),\n  ];\n\n  if (id === 'tabbable') {\n    plugins.push(tabbablePlugin);\n  }\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins,\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const editor = usePlaygroundEditor(id);\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <EditorContainer className={cn(id && 'h-[500px]', className)}>\n          <Editor\n            variant=\"demo\"\n            className={cn(id ? 'h-[calc(100%-37px)] pb-8' : 'pb-[20vh]')}\n            spellCheck={false}\n          />\n        </EditorContainer>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
+      "content": "'use client';\n\nimport React from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { PlaceholderPlugin } from '@udecode/plate-media/react';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { TablePlugin } from '@udecode/plate-table/react';\n\nimport { settingsStore } from '@/components/context/settings-store';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { autoformatPlugin as autoformatListPlugin } from '@/components/editor/plugins/autoformat-list-plugin';\nimport { autoformatPlugin } from '@/components/editor/plugins/autoformat-plugin';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { FixedToolbarListPlugin } from '@/components/editor/plugins/fixed-toolbar-list-plugin';\nimport { FixedToolbarPlugin } from '@/components/editor/plugins/fixed-toolbar-plugin';\nimport { FloatingToolbarPlugin } from '@/components/editor/plugins/floating-toolbar-plugin';\nimport { tabbablePlugin } from '@/components/editor/plugins/tabbable-plugin';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { MediaPlaceholderElement } from '@/components/plate-ui/media-placeholder-element';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '') => {\n  const overridePlugins = usePlaygroundEnabled(id);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  const plugins: any[] = [\n    ...copilotPlugins,\n    ...editorPlugins,\n    id === 'list' ? FixedToolbarListPlugin : FixedToolbarPlugin,\n    FloatingToolbarPlugin,\n\n    id === 'list' ? autoformatListPlugin : autoformatPlugin,\n    TablePlugin.configure({\n      options: {\n        enableMerging: id === 'tableMerge',\n      },\n    }),\n    ListPlugin,\n    TodoListPlugin,\n    ExcalidrawPlugin,\n    NormalizeTypesPlugin.configure({\n      options: {\n        rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n      },\n    }),\n    SingleLinePlugin,\n    PlaceholderPlugin.withComponent(MediaPlaceholderElement),\n    // Testing\n    PlaywrightPlugin.configure({\n      enabled: process.env.NODE_ENV !== 'production',\n    }),\n  ];\n\n  if (id === 'tabbable') {\n    plugins.push(tabbablePlugin);\n  }\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins,\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const editor = usePlaygroundEditor(id);\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <EditorContainer className={cn(id && 'h-[500px]', className)}>\n          <Editor\n            variant=\"demo\"\n            className={cn(id ? 'h-[calc(100%-37px)] pb-8' : 'pb-[20vh]')}\n            spellCheck={false}\n          />\n        </EditorContainer>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
       "path": "example/playground-demo.tsx",
       "target": "components/playground-demo.tsx",
       "type": "registry:example"
diff --git a/apps/www/public/r/styles/default/toc-demo.json b/apps/www/public/r/styles/default/toc-demo.json
index 04ce0c28de..486608ff7a 100644
--- a/apps/www/public/r/styles/default/toc-demo.json
+++ b/apps/www/public/r/styles/default/toc-demo.json
@@ -4,7 +4,7 @@
   },
   "files": [
     {
-      "content": "'use client';\n\nimport React from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { TablePlugin } from '@udecode/plate-table/react';\n\nimport { settingsStore } from '@/components/context/settings-store';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { autoformatPlugin as autoformatListPlugin } from '@/components/editor/plugins/autoformat-list-plugin';\nimport { autoformatPlugin } from '@/components/editor/plugins/autoformat-plugin';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { FixedToolbarListPlugin } from '@/components/editor/plugins/fixed-toolbar-list-plugin';\nimport { FixedToolbarPlugin } from '@/components/editor/plugins/fixed-toolbar-plugin';\nimport { FloatingToolbarPlugin } from '@/components/editor/plugins/floating-toolbar-plugin';\nimport { tabbablePlugin } from '@/components/editor/plugins/tabbable-plugin';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '') => {\n  const overridePlugins = usePlaygroundEnabled(id);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  const plugins: any[] = [\n    ...copilotPlugins,\n    ...editorPlugins,\n    id === 'list' ? FixedToolbarListPlugin : FixedToolbarPlugin,\n    FloatingToolbarPlugin,\n\n    id === 'list' ? autoformatListPlugin : autoformatPlugin,\n    TablePlugin.configure({\n      options: {\n        enableMerging: id === 'tableMerge',\n      },\n    }),\n    ListPlugin,\n    TodoListPlugin,\n    ExcalidrawPlugin,\n    NormalizeTypesPlugin.configure({\n      options: {\n        rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n      },\n    }),\n    SingleLinePlugin,\n\n    // Testing\n    PlaywrightPlugin.configure({\n      enabled: process.env.NODE_ENV !== 'production',\n    }),\n  ];\n\n  if (id === 'tabbable') {\n    plugins.push(tabbablePlugin);\n  }\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins,\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const editor = usePlaygroundEditor(id);\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <EditorContainer className={cn(id && 'h-[500px]', className)}>\n          <Editor\n            variant=\"demo\"\n            className={cn(id ? 'h-[calc(100%-37px)] pb-8' : 'pb-[20vh]')}\n            spellCheck={false}\n          />\n        </EditorContainer>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
+      "content": "'use client';\n\nimport React from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { PlaceholderPlugin } from '@udecode/plate-media/react';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { TablePlugin } from '@udecode/plate-table/react';\n\nimport { settingsStore } from '@/components/context/settings-store';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { autoformatPlugin as autoformatListPlugin } from '@/components/editor/plugins/autoformat-list-plugin';\nimport { autoformatPlugin } from '@/components/editor/plugins/autoformat-plugin';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { FixedToolbarListPlugin } from '@/components/editor/plugins/fixed-toolbar-list-plugin';\nimport { FixedToolbarPlugin } from '@/components/editor/plugins/fixed-toolbar-plugin';\nimport { FloatingToolbarPlugin } from '@/components/editor/plugins/floating-toolbar-plugin';\nimport { tabbablePlugin } from '@/components/editor/plugins/tabbable-plugin';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { MediaPlaceholderElement } from '@/components/plate-ui/media-placeholder-element';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '') => {\n  const overridePlugins = usePlaygroundEnabled(id);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  const plugins: any[] = [\n    ...copilotPlugins,\n    ...editorPlugins,\n    id === 'list' ? FixedToolbarListPlugin : FixedToolbarPlugin,\n    FloatingToolbarPlugin,\n\n    id === 'list' ? autoformatListPlugin : autoformatPlugin,\n    TablePlugin.configure({\n      options: {\n        enableMerging: id === 'tableMerge',\n      },\n    }),\n    ListPlugin,\n    TodoListPlugin,\n    ExcalidrawPlugin,\n    NormalizeTypesPlugin.configure({\n      options: {\n        rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n      },\n    }),\n    SingleLinePlugin,\n    PlaceholderPlugin.withComponent(MediaPlaceholderElement),\n    // Testing\n    PlaywrightPlugin.configure({\n      enabled: process.env.NODE_ENV !== 'production',\n    }),\n  ];\n\n  if (id === 'tabbable') {\n    plugins.push(tabbablePlugin);\n  }\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins,\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const editor = usePlaygroundEditor(id);\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <EditorContainer className={cn(id && 'h-[500px]', className)}>\n          <Editor\n            variant=\"demo\"\n            className={cn(id ? 'h-[calc(100%-37px)] pb-8' : 'pb-[20vh]')}\n            spellCheck={false}\n          />\n        </EditorContainer>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
       "path": "example/playground-demo.tsx",
       "target": "components/playground-demo.tsx",
       "type": "registry:example"
diff --git a/apps/www/public/r/styles/default/toggle-demo.json b/apps/www/public/r/styles/default/toggle-demo.json
index c8c9a534a4..728a7a54fa 100644
--- a/apps/www/public/r/styles/default/toggle-demo.json
+++ b/apps/www/public/r/styles/default/toggle-demo.json
@@ -4,7 +4,7 @@
   },
   "files": [
     {
-      "content": "'use client';\n\nimport React from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { TablePlugin } from '@udecode/plate-table/react';\n\nimport { settingsStore } from '@/components/context/settings-store';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { autoformatPlugin as autoformatListPlugin } from '@/components/editor/plugins/autoformat-list-plugin';\nimport { autoformatPlugin } from '@/components/editor/plugins/autoformat-plugin';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { FixedToolbarListPlugin } from '@/components/editor/plugins/fixed-toolbar-list-plugin';\nimport { FixedToolbarPlugin } from '@/components/editor/plugins/fixed-toolbar-plugin';\nimport { FloatingToolbarPlugin } from '@/components/editor/plugins/floating-toolbar-plugin';\nimport { tabbablePlugin } from '@/components/editor/plugins/tabbable-plugin';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '') => {\n  const overridePlugins = usePlaygroundEnabled(id);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  const plugins: any[] = [\n    ...copilotPlugins,\n    ...editorPlugins,\n    id === 'list' ? FixedToolbarListPlugin : FixedToolbarPlugin,\n    FloatingToolbarPlugin,\n\n    id === 'list' ? autoformatListPlugin : autoformatPlugin,\n    TablePlugin.configure({\n      options: {\n        enableMerging: id === 'tableMerge',\n      },\n    }),\n    ListPlugin,\n    TodoListPlugin,\n    ExcalidrawPlugin,\n    NormalizeTypesPlugin.configure({\n      options: {\n        rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n      },\n    }),\n    SingleLinePlugin,\n\n    // Testing\n    PlaywrightPlugin.configure({\n      enabled: process.env.NODE_ENV !== 'production',\n    }),\n  ];\n\n  if (id === 'tabbable') {\n    plugins.push(tabbablePlugin);\n  }\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins,\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const editor = usePlaygroundEditor(id);\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <EditorContainer className={cn(id && 'h-[500px]', className)}>\n          <Editor\n            variant=\"demo\"\n            className={cn(id ? 'h-[calc(100%-37px)] pb-8' : 'pb-[20vh]')}\n            spellCheck={false}\n          />\n        </EditorContainer>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
+      "content": "'use client';\n\nimport React from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { PlaceholderPlugin } from '@udecode/plate-media/react';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { TablePlugin } from '@udecode/plate-table/react';\n\nimport { settingsStore } from '@/components/context/settings-store';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { autoformatPlugin as autoformatListPlugin } from '@/components/editor/plugins/autoformat-list-plugin';\nimport { autoformatPlugin } from '@/components/editor/plugins/autoformat-plugin';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { FixedToolbarListPlugin } from '@/components/editor/plugins/fixed-toolbar-list-plugin';\nimport { FixedToolbarPlugin } from '@/components/editor/plugins/fixed-toolbar-plugin';\nimport { FloatingToolbarPlugin } from '@/components/editor/plugins/floating-toolbar-plugin';\nimport { tabbablePlugin } from '@/components/editor/plugins/tabbable-plugin';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { MediaPlaceholderElement } from '@/components/plate-ui/media-placeholder-element';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '') => {\n  const overridePlugins = usePlaygroundEnabled(id);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  const plugins: any[] = [\n    ...copilotPlugins,\n    ...editorPlugins,\n    id === 'list' ? FixedToolbarListPlugin : FixedToolbarPlugin,\n    FloatingToolbarPlugin,\n\n    id === 'list' ? autoformatListPlugin : autoformatPlugin,\n    TablePlugin.configure({\n      options: {\n        enableMerging: id === 'tableMerge',\n      },\n    }),\n    ListPlugin,\n    TodoListPlugin,\n    ExcalidrawPlugin,\n    NormalizeTypesPlugin.configure({\n      options: {\n        rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n      },\n    }),\n    SingleLinePlugin,\n    PlaceholderPlugin.withComponent(MediaPlaceholderElement),\n    // Testing\n    PlaywrightPlugin.configure({\n      enabled: process.env.NODE_ENV !== 'production',\n    }),\n  ];\n\n  if (id === 'tabbable') {\n    plugins.push(tabbablePlugin);\n  }\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins,\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const editor = usePlaygroundEditor(id);\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <EditorContainer className={cn(id && 'h-[500px]', className)}>\n          <Editor\n            variant=\"demo\"\n            className={cn(id ? 'h-[calc(100%-37px)] pb-8' : 'pb-[20vh]')}\n            spellCheck={false}\n          />\n        </EditorContainer>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
       "path": "example/playground-demo.tsx",
       "target": "components/playground-demo.tsx",
       "type": "registry:example"
diff --git a/apps/www/public/r/styles/default/toolbar-demo.json b/apps/www/public/r/styles/default/toolbar-demo.json
index 066226ada9..a95511b0b0 100644
--- a/apps/www/public/r/styles/default/toolbar-demo.json
+++ b/apps/www/public/r/styles/default/toolbar-demo.json
@@ -4,7 +4,7 @@
   },
   "files": [
     {
-      "content": "'use client';\n\nimport React from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { TablePlugin } from '@udecode/plate-table/react';\n\nimport { settingsStore } from '@/components/context/settings-store';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { autoformatPlugin as autoformatListPlugin } from '@/components/editor/plugins/autoformat-list-plugin';\nimport { autoformatPlugin } from '@/components/editor/plugins/autoformat-plugin';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { FixedToolbarListPlugin } from '@/components/editor/plugins/fixed-toolbar-list-plugin';\nimport { FixedToolbarPlugin } from '@/components/editor/plugins/fixed-toolbar-plugin';\nimport { FloatingToolbarPlugin } from '@/components/editor/plugins/floating-toolbar-plugin';\nimport { tabbablePlugin } from '@/components/editor/plugins/tabbable-plugin';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '') => {\n  const overridePlugins = usePlaygroundEnabled(id);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  const plugins: any[] = [\n    ...copilotPlugins,\n    ...editorPlugins,\n    id === 'list' ? FixedToolbarListPlugin : FixedToolbarPlugin,\n    FloatingToolbarPlugin,\n\n    id === 'list' ? autoformatListPlugin : autoformatPlugin,\n    TablePlugin.configure({\n      options: {\n        enableMerging: id === 'tableMerge',\n      },\n    }),\n    ListPlugin,\n    TodoListPlugin,\n    ExcalidrawPlugin,\n    NormalizeTypesPlugin.configure({\n      options: {\n        rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n      },\n    }),\n    SingleLinePlugin,\n\n    // Testing\n    PlaywrightPlugin.configure({\n      enabled: process.env.NODE_ENV !== 'production',\n    }),\n  ];\n\n  if (id === 'tabbable') {\n    plugins.push(tabbablePlugin);\n  }\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins,\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const editor = usePlaygroundEditor(id);\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <EditorContainer className={cn(id && 'h-[500px]', className)}>\n          <Editor\n            variant=\"demo\"\n            className={cn(id ? 'h-[calc(100%-37px)] pb-8' : 'pb-[20vh]')}\n            spellCheck={false}\n          />\n        </EditorContainer>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
+      "content": "'use client';\n\nimport React from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { PlaceholderPlugin } from '@udecode/plate-media/react';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { TablePlugin } from '@udecode/plate-table/react';\n\nimport { settingsStore } from '@/components/context/settings-store';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { autoformatPlugin as autoformatListPlugin } from '@/components/editor/plugins/autoformat-list-plugin';\nimport { autoformatPlugin } from '@/components/editor/plugins/autoformat-plugin';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { FixedToolbarListPlugin } from '@/components/editor/plugins/fixed-toolbar-list-plugin';\nimport { FixedToolbarPlugin } from '@/components/editor/plugins/fixed-toolbar-plugin';\nimport { FloatingToolbarPlugin } from '@/components/editor/plugins/floating-toolbar-plugin';\nimport { tabbablePlugin } from '@/components/editor/plugins/tabbable-plugin';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { MediaPlaceholderElement } from '@/components/plate-ui/media-placeholder-element';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '') => {\n  const overridePlugins = usePlaygroundEnabled(id);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  const plugins: any[] = [\n    ...copilotPlugins,\n    ...editorPlugins,\n    id === 'list' ? FixedToolbarListPlugin : FixedToolbarPlugin,\n    FloatingToolbarPlugin,\n\n    id === 'list' ? autoformatListPlugin : autoformatPlugin,\n    TablePlugin.configure({\n      options: {\n        enableMerging: id === 'tableMerge',\n      },\n    }),\n    ListPlugin,\n    TodoListPlugin,\n    ExcalidrawPlugin,\n    NormalizeTypesPlugin.configure({\n      options: {\n        rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n      },\n    }),\n    SingleLinePlugin,\n    PlaceholderPlugin.withComponent(MediaPlaceholderElement),\n    // Testing\n    PlaywrightPlugin.configure({\n      enabled: process.env.NODE_ENV !== 'production',\n    }),\n  ];\n\n  if (id === 'tabbable') {\n    plugins.push(tabbablePlugin);\n  }\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins,\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const editor = usePlaygroundEditor(id);\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <EditorContainer className={cn(id && 'h-[500px]', className)}>\n          <Editor\n            variant=\"demo\"\n            className={cn(id ? 'h-[calc(100%-37px)] pb-8' : 'pb-[20vh]')}\n            spellCheck={false}\n          />\n        </EditorContainer>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
       "path": "example/playground-demo.tsx",
       "target": "components/playground-demo.tsx",
       "type": "registry:example"
diff --git a/apps/www/public/r/styles/default/toolbar.json b/apps/www/public/r/styles/default/toolbar.json
index d4a2c48de6..4794958123 100644
--- a/apps/www/public/r/styles/default/toolbar.json
+++ b/apps/www/public/r/styles/default/toolbar.json
@@ -7,7 +7,7 @@
   },
   "files": [
     {
-      "content": "'use client';\n\nimport * as React from 'react';\n\nimport * as ToolbarPrimitive from '@radix-ui/react-toolbar';\nimport { cn, withCn, withRef, withVariants } from '@udecode/cn';\nimport { type VariantProps, cva } from 'class-variance-authority';\nimport { ChevronDown } from 'lucide-react';\n\nimport { Separator } from './separator';\nimport { withTooltip } from './tooltip';\n\nexport const Toolbar = withCn(\n  ToolbarPrimitive.Root,\n  'relative flex select-none items-center'\n);\n\nexport const ToolbarToggleGroup = withCn(\n  ToolbarPrimitive.ToolbarToggleGroup,\n  'flex items-center'\n);\n\nexport const ToolbarLink = withCn(\n  ToolbarPrimitive.Link,\n  'font-medium underline underline-offset-4'\n);\n\nexport const ToolbarSeparator = withCn(\n  ToolbarPrimitive.Separator,\n  'mx-2 my-1 w-px shrink-0 bg-border'\n);\n\nconst toolbarButtonVariants = cva(\n  cn(\n    'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium text-foreground ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg:not([data-icon])]:size-4'\n  ),\n  {\n    defaultVariants: {\n      size: 'sm',\n      variant: 'default',\n    },\n    variants: {\n      size: {\n        default: 'h-10 px-3',\n        lg: 'h-11 px-5',\n        sm: 'h-7 px-2',\n      },\n      variant: {\n        default:\n          'bg-transparent hover:bg-muted hover:text-muted-foreground aria-checked:bg-accent aria-checked:text-accent-foreground',\n        outline:\n          'border border-input bg-transparent hover:bg-accent hover:text-accent-foreground',\n      },\n    },\n  }\n);\n\nconst ToolbarButton = withTooltip(\n  // eslint-disable-next-line react/display-name\n  React.forwardRef<\n    React.ElementRef<typeof ToolbarToggleItem>,\n    {\n      isDropdown?: boolean;\n      pressed?: boolean;\n    } & Omit<\n      React.ComponentPropsWithoutRef<typeof ToolbarToggleItem>,\n      'asChild' | 'value'\n    > &\n      VariantProps<typeof toolbarButtonVariants>\n  >(\n    (\n      { children, className, isDropdown, pressed, size, variant, ...props },\n      ref\n    ) => {\n      return typeof pressed === 'boolean' ? (\n        <ToolbarToggleGroup\n          disabled={props.disabled}\n          value=\"single\"\n          type=\"single\"\n        >\n          <ToolbarToggleItem\n            ref={ref}\n            className={cn(\n              toolbarButtonVariants({\n                size,\n                variant,\n              }),\n              isDropdown && 'justify-between gap-1 pr-1',\n              className\n            )}\n            value={pressed ? 'single' : ''}\n            {...props}\n          >\n            {isDropdown ? (\n              <>\n                <div className=\"flex flex-1 items-center gap-2 whitespace-nowrap\">\n                  {children}\n                </div>\n                <div>\n                  <ChevronDown\n                    className=\"size-3.5 text-muted-foreground\"\n                    data-icon\n                  />\n                </div>\n              </>\n            ) : (\n              children\n            )}\n          </ToolbarToggleItem>\n        </ToolbarToggleGroup>\n      ) : (\n        <ToolbarPrimitive.Button\n          ref={ref}\n          className={cn(\n            toolbarButtonVariants({\n              size,\n              variant,\n            }),\n            isDropdown && 'pr-1',\n            className\n          )}\n          {...props}\n        >\n          {children}\n        </ToolbarPrimitive.Button>\n      );\n    }\n  )\n);\nToolbarButton.displayName = 'ToolbarButton';\n\nexport { ToolbarButton };\n\nexport const ToolbarToggleItem = withVariants(\n  ToolbarPrimitive.ToggleItem,\n  toolbarButtonVariants,\n  ['variant', 'size']\n);\n\nexport const ToolbarGroup = withRef<'div'>(({ children, className }, ref) => {\n  return (\n    <div\n      ref={ref}\n      className={cn(\n        'group/toolbar-group',\n        'relative hidden has-[button]:flex',\n        className\n      )}\n    >\n      <div className=\"flex items-center\">{children}</div>\n\n      <div className=\"mx-1.5 py-0.5 group-last/toolbar-group:!hidden\">\n        <Separator orientation=\"vertical\" />\n      </div>\n    </div>\n  );\n});\n",
+      "content": "'use client';\n\nimport * as React from 'react';\n\nimport * as ToolbarPrimitive from '@radix-ui/react-toolbar';\nimport { cn, withCn, withRef, withVariants } from '@udecode/cn';\nimport { type VariantProps, cva } from 'class-variance-authority';\nimport { ChevronDown } from 'lucide-react';\n\nimport { Separator } from './separator';\nimport { withTooltip } from './tooltip';\n\nexport const Toolbar = withCn(\n  ToolbarPrimitive.Root,\n  'relative flex select-none items-center'\n);\n\nexport const ToolbarToggleGroup = withCn(\n  ToolbarPrimitive.ToolbarToggleGroup,\n  'flex items-center'\n);\n\nexport const ToolbarLink = withCn(\n  ToolbarPrimitive.Link,\n  'font-medium underline underline-offset-4'\n);\n\nexport const ToolbarSeparator = withCn(\n  ToolbarPrimitive.Separator,\n  'mx-2 my-1 w-px shrink-0 bg-border'\n);\n\nconst toolbarButtonVariants = cva(\n  cn(\n    'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium text-foreground ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg:not([data-icon])]:size-4'\n  ),\n  {\n    defaultVariants: {\n      size: 'sm',\n      variant: 'default',\n    },\n    variants: {\n      size: {\n        default: 'h-10 px-3',\n        lg: 'h-11 px-5',\n        sm: 'h-7 px-2',\n      },\n      variant: {\n        default:\n          'bg-transparent hover:bg-muted hover:text-muted-foreground aria-checked:bg-accent aria-checked:text-accent-foreground',\n        outline:\n          'border border-input bg-transparent hover:bg-accent hover:text-accent-foreground',\n      },\n    },\n  }\n);\n\nconst dropdownArrowVariants = cva(\n  cn(\n    'inline-flex items-center justify-center rounded-r-md text-sm font-medium text-foreground transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50'\n  ),\n  {\n    defaultVariants: {\n      size: 'sm',\n      variant: 'default',\n    },\n    variants: {\n      size: {\n        default: 'h-10 w-6',\n        lg: 'h-11 w-8',\n        sm: 'h-7 w-4',\n      },\n      variant: {\n        default:\n          'bg-transparent hover:bg-muted hover:text-muted-foreground aria-checked:bg-accent aria-checked:text-accent-foreground',\n        outline:\n          'border border-l-0 border-input bg-transparent hover:bg-accent hover:text-accent-foreground',\n      },\n    },\n  }\n);\n\nconst ToolbarButton = withTooltip(\n  // eslint-disable-next-line react/display-name\n  React.forwardRef<\n    React.ElementRef<typeof ToolbarToggleItem>,\n    {\n      isDropdown?: boolean;\n      pressed?: boolean;\n    } & Omit<\n      React.ComponentPropsWithoutRef<typeof ToolbarToggleItem>,\n      'asChild' | 'value'\n    > &\n      VariantProps<typeof toolbarButtonVariants>\n  >(\n    (\n      { children, className, isDropdown, pressed, size, variant, ...props },\n      ref\n    ) => {\n      return typeof pressed === 'boolean' ? (\n        <ToolbarToggleGroup\n          disabled={props.disabled}\n          value=\"single\"\n          type=\"single\"\n        >\n          <ToolbarToggleItem\n            ref={ref}\n            className={cn(\n              toolbarButtonVariants({\n                size,\n                variant,\n              }),\n              isDropdown && 'justify-between gap-1 pr-1',\n              className\n            )}\n            value={pressed ? 'single' : ''}\n            {...props}\n          >\n            {isDropdown ? (\n              <>\n                <div className=\"flex flex-1 items-center gap-2 whitespace-nowrap\">\n                  {children}\n                </div>\n                <div>\n                  <ChevronDown\n                    className=\"size-3.5 text-muted-foreground\"\n                    data-icon\n                  />\n                </div>\n              </>\n            ) : (\n              children\n            )}\n          </ToolbarToggleItem>\n        </ToolbarToggleGroup>\n      ) : (\n        <ToolbarPrimitive.Button\n          ref={ref}\n          className={cn(\n            toolbarButtonVariants({\n              size,\n              variant,\n            }),\n            isDropdown && 'pr-1',\n            className\n          )}\n          {...props}\n        >\n          {children}\n        </ToolbarPrimitive.Button>\n      );\n    }\n  )\n);\nToolbarButton.displayName = 'ToolbarButton';\n\nexport { ToolbarButton };\n\nconst ToolbarSplitButton = React.forwardRef<\n  React.ElementRef<typeof ToolbarToggleItem>,\n  {\n    pressed?: boolean;\n    tooltip?: string;\n    onMainButtonClick?: () => void;\n  } & Omit<\n    React.ComponentPropsWithoutRef<typeof ToolbarToggleItem>,\n    'asChild' | 'value'\n  > &\n    VariantProps<typeof toolbarButtonVariants>\n>(\n  (\n    {\n      children,\n      className,\n      pressed,\n      size,\n      tooltip,\n      variant,\n      onMainButtonClick,\n      ...props\n    },\n    ref\n  ) => {\n    const mainButtonClass = cn(\n      toolbarButtonVariants({\n        size,\n        variant,\n      }),\n      'rounded-r-none',\n      className\n    );\n\n    const dropdownButtonClass = dropdownArrowVariants({\n      size,\n      variant,\n    });\n\n    const MainButton = withTooltip(\n      React.forwardRef<HTMLButtonElement>((mainProps, mainRef) => (\n        <ToolbarToggleItem\n          {...mainProps}\n          ref={mainRef}\n          className={mainButtonClass}\n          value={pressed ? 'single' : ''}\n          onClick={onMainButtonClick}\n        >\n          <div className=\"flex flex-1 items-center gap-2 whitespace-nowrap\">\n            {children}\n          </div>\n        </ToolbarToggleItem>\n      ))\n    );\n\n    return typeof pressed === 'boolean' ? (\n      <ToolbarToggleGroup\n        disabled={props.disabled}\n        value=\"single\"\n        type=\"single\"\n      >\n        <div className=\"flex\">\n          <MainButton tooltip={tooltip} />\n\n          <button\n            ref={ref}\n            className={cn(\n              dropdownButtonClass,\n              pressed && 'bg-accent text-accent-foreground'\n            )}\n            disabled={props.disabled}\n            value={pressed ? 'single' : ''}\n            type=\"reset\"\n            {...props}\n          >\n            <ChevronDown className=\"size-3.5 text-muted-foreground\" data-icon />\n          </button>\n        </div>\n      </ToolbarToggleGroup>\n    ) : (\n      <div className=\"flex\">\n        <MainButton tooltip={tooltip} />\n\n        <button\n          ref={ref}\n          {...props}\n          className={dropdownButtonClass}\n          disabled={props.disabled}\n          type=\"button\"\n        >\n          <ChevronDown className=\"size-2.5 text-muted-foreground\" data-icon />\n        </button>\n      </div>\n    );\n  }\n);\nToolbarSplitButton.displayName = 'ToolbarButton';\n\nexport { ToolbarSplitButton };\n\nexport const ToolbarToggleItem = withVariants(\n  ToolbarPrimitive.ToggleItem,\n  toolbarButtonVariants,\n  ['variant', 'size']\n);\n\nexport const ToolbarGroup = withRef<'div'>(({ children, className }, ref) => {\n  return (\n    <div\n      ref={ref}\n      className={cn(\n        'group/toolbar-group',\n        'relative hidden has-[button]:flex',\n        className\n      )}\n    >\n      <div className=\"flex items-center\">{children}</div>\n\n      <div className=\"mx-1.5 py-0.5 group-last/toolbar-group:!hidden\">\n        <Separator orientation=\"vertical\" />\n      </div>\n    </div>\n  );\n});\n",
       "path": "plate-ui/toolbar.tsx",
       "target": "components/plate-ui/toolbar.tsx",
       "type": "registry:ui"
diff --git a/apps/www/public/r/styles/default/upload-demo.json b/apps/www/public/r/styles/default/upload-demo.json
index 197c7eaa57..053540a3be 100644
--- a/apps/www/public/r/styles/default/upload-demo.json
+++ b/apps/www/public/r/styles/default/upload-demo.json
@@ -4,7 +4,7 @@
   },
   "files": [
     {
-      "content": "'use client';\n\nimport React from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { TablePlugin } from '@udecode/plate-table/react';\n\nimport { settingsStore } from '@/components/context/settings-store';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { autoformatPlugin as autoformatListPlugin } from '@/components/editor/plugins/autoformat-list-plugin';\nimport { autoformatPlugin } from '@/components/editor/plugins/autoformat-plugin';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { FixedToolbarListPlugin } from '@/components/editor/plugins/fixed-toolbar-list-plugin';\nimport { FixedToolbarPlugin } from '@/components/editor/plugins/fixed-toolbar-plugin';\nimport { FloatingToolbarPlugin } from '@/components/editor/plugins/floating-toolbar-plugin';\nimport { tabbablePlugin } from '@/components/editor/plugins/tabbable-plugin';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '') => {\n  const overridePlugins = usePlaygroundEnabled(id);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  const plugins: any[] = [\n    ...copilotPlugins,\n    ...editorPlugins,\n    id === 'list' ? FixedToolbarListPlugin : FixedToolbarPlugin,\n    FloatingToolbarPlugin,\n\n    id === 'list' ? autoformatListPlugin : autoformatPlugin,\n    TablePlugin.configure({\n      options: {\n        enableMerging: id === 'tableMerge',\n      },\n    }),\n    ListPlugin,\n    TodoListPlugin,\n    ExcalidrawPlugin,\n    NormalizeTypesPlugin.configure({\n      options: {\n        rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n      },\n    }),\n    SingleLinePlugin,\n\n    // Testing\n    PlaywrightPlugin.configure({\n      enabled: process.env.NODE_ENV !== 'production',\n    }),\n  ];\n\n  if (id === 'tabbable') {\n    plugins.push(tabbablePlugin);\n  }\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins,\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const editor = usePlaygroundEditor(id);\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <EditorContainer className={cn(id && 'h-[500px]', className)}>\n          <Editor\n            variant=\"demo\"\n            className={cn(id ? 'h-[calc(100%-37px)] pb-8' : 'pb-[20vh]')}\n            spellCheck={false}\n          />\n        </EditorContainer>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
+      "content": "'use client';\n\nimport React from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { PlaceholderPlugin } from '@udecode/plate-media/react';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { TablePlugin } from '@udecode/plate-table/react';\n\nimport { settingsStore } from '@/components/context/settings-store';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { autoformatPlugin as autoformatListPlugin } from '@/components/editor/plugins/autoformat-list-plugin';\nimport { autoformatPlugin } from '@/components/editor/plugins/autoformat-plugin';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { FixedToolbarListPlugin } from '@/components/editor/plugins/fixed-toolbar-list-plugin';\nimport { FixedToolbarPlugin } from '@/components/editor/plugins/fixed-toolbar-plugin';\nimport { FloatingToolbarPlugin } from '@/components/editor/plugins/floating-toolbar-plugin';\nimport { tabbablePlugin } from '@/components/editor/plugins/tabbable-plugin';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { MediaPlaceholderElement } from '@/components/plate-ui/media-placeholder-element';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '') => {\n  const overridePlugins = usePlaygroundEnabled(id);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  const plugins: any[] = [\n    ...copilotPlugins,\n    ...editorPlugins,\n    id === 'list' ? FixedToolbarListPlugin : FixedToolbarPlugin,\n    FloatingToolbarPlugin,\n\n    id === 'list' ? autoformatListPlugin : autoformatPlugin,\n    TablePlugin.configure({\n      options: {\n        enableMerging: id === 'tableMerge',\n      },\n    }),\n    ListPlugin,\n    TodoListPlugin,\n    ExcalidrawPlugin,\n    NormalizeTypesPlugin.configure({\n      options: {\n        rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n      },\n    }),\n    SingleLinePlugin,\n    PlaceholderPlugin.withComponent(MediaPlaceholderElement),\n    // Testing\n    PlaywrightPlugin.configure({\n      enabled: process.env.NODE_ENV !== 'production',\n    }),\n  ];\n\n  if (id === 'tabbable') {\n    plugins.push(tabbablePlugin);\n  }\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins,\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const editor = usePlaygroundEditor(id);\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <EditorContainer className={cn(id && 'h-[500px]', className)}>\n          <Editor\n            variant=\"demo\"\n            className={cn(id ? 'h-[calc(100%-37px)] pb-8' : 'pb-[20vh]')}\n            spellCheck={false}\n          />\n        </EditorContainer>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
       "path": "example/playground-demo.tsx",
       "target": "components/playground-demo.tsx",
       "type": "registry:example"
diff --git a/apps/www/src/registry/default/example/cards/cards-toolbar.tsx b/apps/www/src/registry/default/example/cards/cards-toolbar.tsx
index 86a8c86593..512547d89b 100644
--- a/apps/www/src/registry/default/example/cards/cards-toolbar.tsx
+++ b/apps/www/src/registry/default/example/cards/cards-toolbar.tsx
@@ -12,7 +12,12 @@ import {
   FontColorPlugin,
 } from '@udecode/plate-font/react';
 import { ListStyleType } from '@udecode/plate-indent-list';
-import { ImagePlugin } from '@udecode/plate-media/react';
+import {
+  AudioPlugin,
+  FilePlugin,
+  ImagePlugin,
+  VideoPlugin,
+} from '@udecode/plate-media/react';
 import {
   BaselineIcon,
   BoldIcon,
@@ -34,7 +39,7 @@ import { InsertDropdownMenu } from '@/registry/default/plate-ui/insert-dropdown-
 import { LineHeightDropdownMenu } from '@/registry/default/plate-ui/line-height-dropdown-menu';
 import { LinkToolbarButton } from '@/registry/default/plate-ui/link-toolbar-button';
 import { MarkToolbarButton } from '@/registry/default/plate-ui/mark-toolbar-button';
-import { MediaToolbarButton } from '@/registry/default/plate-ui/media-toolbar-button';
+import { MediaDropdownMenu } from '@/registry/default/plate-ui/media-toolbar-button';
 import { ModeDropdownMenu } from '@/registry/default/plate-ui/mode-dropdown-menu';
 import { MoreDropdownMenu } from '@/registry/default/plate-ui/more-dropdown-menu';
 import { OutdentToolbarButton } from '@/registry/default/plate-ui/outdent-toolbar-button';
@@ -113,13 +118,18 @@ export function CardsToolbar() {
             <IndentToolbarButton />
           </ToolbarGroup>
 
+          <ToolbarGroup>
+            <MediaDropdownMenu nodeType={ImagePlugin.key} />
+            <MediaDropdownMenu nodeType={VideoPlugin.key} />
+            <MediaDropdownMenu nodeType={AudioPlugin.key} />
+            <MediaDropdownMenu nodeType={FilePlugin.key} />
+          </ToolbarGroup>
+
           <ToolbarGroup>
             <LinkToolbarButton />
 
             <ToggleToolbarButton />
 
-            <MediaToolbarButton nodeType={ImagePlugin.key} />
-
             <TableDropdownMenu />
 
             <EmojiDropdownMenu />
diff --git a/apps/www/src/registry/default/plate-ui/media-floating-toolbar.tsx b/apps/www/src/registry/default/plate-ui/media-floating-toolbar.tsx
index 38b5e7587d..f92966b268 100644
--- a/apps/www/src/registry/default/plate-ui/media-floating-toolbar.tsx
+++ b/apps/www/src/registry/default/plate-ui/media-floating-toolbar.tsx
@@ -3,7 +3,6 @@
 import React, { useMemo } from 'react';
 
 import { cn } from '@udecode/cn';
-import { useMediaFloatingToolbar } from '@udecode/plate';
 import { useEditorPlugin } from '@udecode/plate-core/react';
 import {
   type UseVirtualFloatingOptions,
@@ -16,6 +15,7 @@ import {
   ImagePlugin,
   MediaEmbedPlugin,
   VideoPlugin,
+  useMediaFloatingToolbar,
 } from '@udecode/plate-media/react';
 import { AudioLinesIcon, FileUpIcon, FilmIcon, ImageIcon } from 'lucide-react';
 
diff --git a/packages/media/src/lib/media-embed/BaseMediaEmbedPlugin.ts b/packages/media/src/lib/media-embed/BaseMediaEmbedPlugin.ts
index 2e9c5313a0..066e95db0c 100644
--- a/packages/media/src/lib/media-embed/BaseMediaEmbedPlugin.ts
+++ b/packages/media/src/lib/media-embed/BaseMediaEmbedPlugin.ts
@@ -3,86 +3,49 @@ import {
   createTSlatePlugin,
   isUrl,
 } from '@udecode/plate-common';
-import { focusEditor } from '@udecode/plate-common/react';
 
 import type { MediaPluginOptions, TMediaElement } from '../media/index';
 
-import { insertImage } from '../image';
 import { parseIframeUrl } from './parseIframeUrl';
 
 export interface TMediaEmbedElement extends TMediaElement {}
 
-export type MediaEmbedApi = {
-  hideFloating: () => void;
-  openFloating: (mediaType: string) => void;
-};
-
-export type MediaEmbedConfig = PluginConfig<
+export type BaseMediaEmbedConfig = PluginConfig<
   'media_embed',
-  MediaPluginOptions,
-  {
-    media_embed: MediaEmbedApi;
-  }
+  MediaPluginOptions
 >;
 
 /**
  * Enables support for embeddable media such as YouTube or Vimeo videos,
  * Instagram posts and tweets or Google Maps.
  */
-export const BaseMediaEmbedPlugin = createTSlatePlugin<MediaEmbedConfig>({
+export const BaseMediaEmbedPlugin = createTSlatePlugin<BaseMediaEmbedConfig>({
   key: 'media_embed',
   node: { isElement: true, isVoid: true },
   options: {
-    isFloatingOpen: false,
     isUrl: isUrl,
-    mediaType: null,
     transformUrl: parseIframeUrl,
-    url: '',
   },
-})
-  .extendApi<Partial<MediaEmbedApi>>(({ editor, setOptions }) => ({
-    hideFloating: () => {
-      setOptions({ isFloatingOpen: false, url: '' });
-      focusEditor(editor);
-    },
-    openFloating: (mediaType: string) => {
-      focusEditor(editor);
-      setOptions({ isFloatingOpen: true, mediaType });
-    },
-  }))
-  .extendTransforms(({ api, editor, getOptions, setOptions }) => ({
-    embed: (url: string) => {
-      setOptions({ isFloatingOpen: false, url });
-
-      const isUrl = getOptions().isUrl;
-
-      if (!isUrl?.(url)) return;
-
-      insertImage(editor, url);
-
-      api.media_embed.hideFloating();
-    },
-  }))
-  .extend(({ type }) => ({
-    parsers: {
-      html: {
-        deserializer: {
-          parse: ({ element }) => {
-            const url = element.getAttribute('src');
-
-            if (url) {
-              return {
-                type,
-                url,
-              };
-            }
-          },
-          rules: [
-            {
-              validNodeName: 'IFRAME',
-            },
-          ],
+}).extend(({ type }) => ({
+  parsers: {
+    html: {
+      deserializer: {
+        parse: ({ element }) => {
+          const url = element.getAttribute('src');
+
+          if (url) {
+            return {
+              type,
+              url,
+            };
+          }
         },
+        rules: [
+          {
+            validNodeName: 'IFRAME',
+          },
+        ],
       },
     },
-  }));
+  },
+}));
diff --git a/packages/media/src/lib/media-embed/index.ts b/packages/media/src/lib/media-embed/index.ts
index 36ea71c3ae..24ec4a2967 100644
--- a/packages/media/src/lib/media-embed/index.ts
+++ b/packages/media/src/lib/media-embed/index.ts
@@ -6,5 +6,4 @@ export * from './BaseMediaEmbedPlugin';
 export * from './parseIframeUrl';
 export * from './parseTwitterUrl';
 export * from './parseVideoUrl';
-export * from './hooks/index';
 export * from './transforms/index';
diff --git a/packages/media/src/lib/media/types.ts b/packages/media/src/lib/media/types.ts
index 8149ccf06d..6f8dc576b6 100644
--- a/packages/media/src/lib/media/types.ts
+++ b/packages/media/src/lib/media/types.ts
@@ -10,12 +10,8 @@ export interface TMediaElement extends TElement {
 }
 
 export interface MediaPluginOptions {
-  isFloatingOpen?: boolean;
   isUrl?: (text: string) => boolean;
-  mediaType?: string | null;
 
   /** Transforms the url. */
   transformUrl?: (url: string) => string;
-
-  url?: string;
 }
diff --git a/packages/media/src/react/media/MediaEmbedPlugin.tsx b/packages/media/src/react/media/MediaEmbedPlugin.tsx
new file mode 100644
index 0000000000..bcffee28ce
--- /dev/null
+++ b/packages/media/src/react/media/MediaEmbedPlugin.tsx
@@ -0,0 +1,60 @@
+import type { ExtendConfig } from '@udecode/plate-common';
+
+import { focusEditor, toTPlatePlugin } from '@udecode/plate-common/react';
+
+import {
+  type BaseMediaEmbedConfig,
+  BaseMediaEmbedPlugin,
+  insertImage,
+} from '../../lib';
+
+type MediaEmbedConfig = ExtendConfig<
+  BaseMediaEmbedConfig,
+  {
+    isFloatingOpen?: boolean;
+    mediaType?: string | null;
+    url?: string;
+  },
+  {
+    media_embed: MediaEmbedApi;
+  }
+>;
+
+export type MediaEmbedApi = {
+  hideFloating: () => void;
+  openFloating: (mediaType: string) => void;
+};
+
+export const MediaEmbedPlugin = toTPlatePlugin<MediaEmbedConfig>(
+  BaseMediaEmbedPlugin,
+  {
+    options: {
+      isFloatingOpen: false,
+      mediaType: null,
+      url: '',
+    },
+  }
+)
+  .extendApi<Partial<MediaEmbedApi>>(({ editor, setOptions }) => ({
+    hideFloating: () => {
+      setOptions({ isFloatingOpen: false, url: '' });
+      focusEditor(editor);
+    },
+    openFloating: (mediaType: string) => {
+      focusEditor(editor);
+      setOptions({ isFloatingOpen: true, mediaType });
+    },
+  }))
+  .extendTransforms(({ api, editor, getOptions, setOptions }) => ({
+    embed: (url: string) => {
+      setOptions({ isFloatingOpen: false, url });
+
+      const isUrl = getOptions().isUrl;
+
+      if (!isUrl?.(url)) return;
+
+      insertImage(editor, url);
+
+      api.media_embed.hideFloating();
+    },
+  }));
diff --git a/packages/media/src/lib/media-embed/hooks/index.ts b/packages/media/src/react/media/hooks/index.ts
similarity index 100%
rename from packages/media/src/lib/media-embed/hooks/index.ts
rename to packages/media/src/react/media/hooks/index.ts
diff --git a/packages/media/src/lib/media-embed/hooks/useMediaEmbedEnter.ts b/packages/media/src/react/media/hooks/useMediaEmbedEnter.ts
similarity index 100%
rename from packages/media/src/lib/media-embed/hooks/useMediaEmbedEnter.ts
rename to packages/media/src/react/media/hooks/useMediaEmbedEnter.ts
diff --git a/packages/media/src/lib/media-embed/hooks/useMediaEmbedEscape.ts b/packages/media/src/react/media/hooks/useMediaEmbedEscape.ts
similarity index 87%
rename from packages/media/src/lib/media-embed/hooks/useMediaEmbedEscape.ts
rename to packages/media/src/react/media/hooks/useMediaEmbedEscape.ts
index c5f03b3e02..a83194917b 100644
--- a/packages/media/src/lib/media-embed/hooks/useMediaEmbedEscape.ts
+++ b/packages/media/src/react/media/hooks/useMediaEmbedEscape.ts
@@ -1,6 +1,6 @@
 import { useEditorPlugin, useHotkeys } from '@udecode/plate-common/react';
 
-import { MediaEmbedPlugin } from '../../../react';
+import { MediaEmbedPlugin } from '../MediaEmbedPlugin';
 
 export const useMediaEmbedEscape = () => {
   const { api, useOption } = useEditorPlugin(MediaEmbedPlugin);
diff --git a/packages/media/src/lib/media-embed/hooks/useMediaFloatingToolbar.ts b/packages/media/src/react/media/hooks/useMediaFloatingToolbar.ts
similarity index 97%
rename from packages/media/src/lib/media-embed/hooks/useMediaFloatingToolbar.ts
rename to packages/media/src/react/media/hooks/useMediaFloatingToolbar.ts
index 879792da04..14c3a83749 100644
--- a/packages/media/src/lib/media-embed/hooks/useMediaFloatingToolbar.ts
+++ b/packages/media/src/react/media/hooks/useMediaFloatingToolbar.ts
@@ -18,7 +18,7 @@ import {
   useVirtualFloating,
 } from '@udecode/plate-floating';
 
-import { MediaEmbedPlugin } from '../../../react';
+import { MediaEmbedPlugin } from '../MediaEmbedPlugin';
 import { useMediaEmbedEnter } from './useMediaEmbedEnter';
 import { useMediaEmbedEscape } from './useMediaEmbedEscape';
 
diff --git a/packages/media/src/react/media/index.ts b/packages/media/src/react/media/index.ts
index 524227b5ce..a093270fc5 100644
--- a/packages/media/src/react/media/index.ts
+++ b/packages/media/src/react/media/index.ts
@@ -2,8 +2,10 @@
  * @file Automatically generated by barrelsby.
  */
 
+export * from './MediaEmbedPlugin';
 export * from './mediaStore';
 export * from './useMediaController';
 export * from './useMediaState';
 export * from './useMediaToolbarButton';
 export * from './FloatingMedia/index';
+export * from './hooks/index';
diff --git a/packages/media/src/react/plugins.ts b/packages/media/src/react/plugins.ts
index c154d9fbfb..253f5ff4a2 100644
--- a/packages/media/src/react/plugins.ts
+++ b/packages/media/src/react/plugins.ts
@@ -4,14 +4,11 @@ import {
   BaseAudioPlugin,
   BaseFilePlugin,
   BaseImagePlugin,
-  BaseMediaEmbedPlugin,
   BaseVideoPlugin,
 } from '../lib';
 
 export const ImagePlugin = toPlatePlugin(BaseImagePlugin);
 
-export const MediaEmbedPlugin = toPlatePlugin(BaseMediaEmbedPlugin);
-
 export const AudioPlugin = toPlatePlugin(BaseAudioPlugin);
 
 export const FilePlugin = toPlatePlugin(BaseFilePlugin);

From 2448a81550c778cbd8287700681bdd0ce63a2605 Mon Sep 17 00:00:00 2001
From: Felix Feng <felixfeng33@gmail.com>
Date: Thu, 14 Nov 2024 19:18:37 +0800
Subject: [PATCH 15/34] ci

---
 .../default/lib/uploadthing/use-upload-file.ts        | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/apps/www/src/registry/default/lib/uploadthing/use-upload-file.ts b/apps/www/src/registry/default/lib/uploadthing/use-upload-file.ts
index bbf76aebb2..1c708ec341 100644
--- a/apps/www/src/registry/default/lib/uploadthing/use-upload-file.ts
+++ b/apps/www/src/registry/default/lib/uploadthing/use-upload-file.ts
@@ -1,12 +1,17 @@
 import * as React from 'react';
 
-import type { ClientUploadedFileData } from 'uploadthing/types';
-
 import { toast } from 'sonner';
 
 import { getErrorMessage } from './handle-error';
 
-export interface UploadedFile<T = unknown> extends ClientUploadedFileData<T> {}
+export interface UploadedFile {
+  key: string;
+  appUrl: string;
+  name: string;
+  size: number;
+  type: string;
+  url: string;
+}
 
 export function useUploadFile() {
   const [uploadedFile, setUploadedFile] = React.useState<UploadedFile>();

From 6b069c784f540987e90163069671021d53be4fdc Mon Sep 17 00:00:00 2001
From: Felix Feng <felixfeng33@gmail.com>
Date: Thu, 14 Nov 2024 19:32:20 +0800
Subject: [PATCH 16/34] changeset

---
 .changeset/poor-doors-tease.md                      | 13 +++++++++++++
 .../src/react/placeholder/PlaceholderPlugin.tsx     |  3 ++-
 2 files changed, 15 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/poor-doors-tease.md

diff --git a/.changeset/poor-doors-tease.md b/.changeset/poor-doors-tease.md
new file mode 100644
index 0000000000..fa5e39b111
--- /dev/null
+++ b/.changeset/poor-doors-tease.md
@@ -0,0 +1,13 @@
+---
+'@udecode/plate-media': minor
+---
+
+PlaceholderPlugin:
+New `updateUploadHistory` `withHistoryMark` `isHistoryMarking` to fix undo to the loading state.
+`editor.insert.insertMedia` add options
+
+
+MediaEmbedPlugin:
+Added a floating media toolbar for entering URLs to embed media.
+New api `hideFloating` `openFloating` tf `embed` 
+New hooks `useMediaFloatingToolbar`
\ No newline at end of file
diff --git a/packages/media/src/react/placeholder/PlaceholderPlugin.tsx b/packages/media/src/react/placeholder/PlaceholderPlugin.tsx
index 397ca7ab00..2a77c3f776 100644
--- a/packages/media/src/react/placeholder/PlaceholderPlugin.tsx
+++ b/packages/media/src/react/placeholder/PlaceholderPlugin.tsx
@@ -1,5 +1,6 @@
 import {
   type ExtendConfig,
+  type InsertNodesOptions,
   bindFirst,
   getAncestorNode,
   getNodeString,
@@ -22,7 +23,7 @@ export type PlaceholderApi = {
 };
 
 export type PlaceholderTransforms = {
-  insertMedia: (files: FileList) => void;
+  insertMedia: (files: FileList, options?: InsertNodesOptions) => void;
 };
 
 export type UploadConfig = Partial<Record<AllowedFileType, MediaItemConfig>>;

From bab3acd10e0e0024223492f1632252902267eb79 Mon Sep 17 00:00:00 2001
From: Felix Feng <felixfeng33@gmail.com>
Date: Thu, 14 Nov 2024 19:38:00 +0800
Subject: [PATCH 17/34] docs

---
 .../www/content/docs/components/changelog.mdx |  6 ++++
 apps/www/public/r/index.json                  |  4 +--
 .../styles/default/fixed-toolbar-buttons.json |  2 +-
 .../default/fixed-toolbar-list-buttons.json   |  2 +-
 .../r/styles/default/media-dropdown-menu.json | 31 +++++++++++++++++++
 apps/www/src/__registry__/index.tsx           |  8 ++---
 .../default/example/cards/cards-toolbar.tsx   |  2 +-
 .../plate-ui/fixed-toolbar-buttons.tsx        |  2 +-
 .../plate-ui/fixed-toolbar-list-buttons.tsx   |  2 +-
 ...bar-button.tsx => media-dropdown-menu.tsx} |  0
 apps/www/src/registry/registry-ui.ts          |  4 +--
 11 files changed, 50 insertions(+), 13 deletions(-)
 create mode 100644 apps/www/public/r/styles/default/media-dropdown-menu.json
 rename apps/www/src/registry/default/plate-ui/{media-toolbar-button.tsx => media-dropdown-menu.tsx} (100%)

diff --git a/apps/www/content/docs/components/changelog.mdx b/apps/www/content/docs/components/changelog.mdx
index 3059826548..5955a8a5b4 100644
--- a/apps/www/content/docs/components/changelog.mdx
+++ b/apps/www/content/docs/components/changelog.mdx
@@ -11,6 +11,12 @@ Use the [CLI](https://platejs.org/docs/components/cli) to install the latest ver
 
 ## November 2024 #16
 
+### November 14 #16.6
+
+Remove `media-toolbar-button`, Use `media-dropdown-menu` instead.
+Add `ToolbarSplitButton` in `toolbar.tsx`.
+
+
 ### November 8 #16.5
 
 - Add this to your tailwind config: 
diff --git a/apps/www/public/r/index.json b/apps/www/public/r/index.json
index 75aafb645a..42760d4195 100644
--- a/apps/www/public/r/index.json
+++ b/apps/www/public/r/index.json
@@ -2332,11 +2332,11 @@
     },
     "files": [
       {
-        "path": "plate-ui/media-toolbar-button.tsx",
+        "path": "plate-ui/media-dropdown-menu.tsx",
         "type": "registry:ui"
       }
     ],
-    "name": "media-toolbar-button",
+    "name": "media-dropdown-menu",
     "registryDependencies": [
       "toolbar"
     ],
diff --git a/apps/www/public/r/styles/default/fixed-toolbar-buttons.json b/apps/www/public/r/styles/default/fixed-toolbar-buttons.json
index 91ec091494..d63fe9b940 100644
--- a/apps/www/public/r/styles/default/fixed-toolbar-buttons.json
+++ b/apps/www/public/r/styles/default/fixed-toolbar-buttons.json
@@ -13,7 +13,7 @@
   },
   "files": [
     {
-      "content": "'use client';\n\nimport React from 'react';\n\nimport {\n  BoldPlugin,\n  CodePlugin,\n  ItalicPlugin,\n  StrikethroughPlugin,\n  UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { useEditorReadOnly } from '@udecode/plate-common/react';\nimport {\n  FontBackgroundColorPlugin,\n  FontColorPlugin,\n} from '@udecode/plate-font/react';\nimport { ListStyleType } from '@udecode/plate-indent-list';\nimport {\n  AudioPlugin,\n  FilePlugin,\n  ImagePlugin,\n  VideoPlugin,\n} from '@udecode/plate-media/react';\nimport {\n  BaselineIcon,\n  BoldIcon,\n  Code2Icon,\n  ItalicIcon,\n  PaintBucketIcon,\n  SparklesIcon,\n  StrikethroughIcon,\n  UnderlineIcon,\n} from 'lucide-react';\n\nimport { AIToolbarButton } from './ai-toolbar-button';\nimport { AlignDropdownMenu } from './align-dropdown-menu';\nimport { ColorDropdownMenu } from './color-dropdown-menu';\nimport { CommentToolbarButton } from './comment-toolbar-button';\nimport { EmojiDropdownMenu } from './emoji-dropdown-menu';\nimport { IndentListToolbarButton } from './indent-list-toolbar-button';\nimport { IndentTodoToolbarButton } from './indent-todo-toolbar-button';\nimport { IndentToolbarButton } from './indent-toolbar-button';\nimport { InsertDropdownMenu } from './insert-dropdown-menu';\nimport { LineHeightDropdownMenu } from './line-height-dropdown-menu';\nimport { LinkToolbarButton } from './link-toolbar-button';\nimport { MarkToolbarButton } from './mark-toolbar-button';\nimport { MediaDropdownMenu } from './media-toolbar-button';\nimport { ModeDropdownMenu } from './mode-dropdown-menu';\nimport { MoreDropdownMenu } from './more-dropdown-menu';\nimport { OutdentToolbarButton } from './outdent-toolbar-button';\nimport { RedoToolbarButton } from './redo-toolbar-button';\nimport { TableDropdownMenu } from './table-dropdown-menu';\nimport { ToggleToolbarButton } from './toggle-toolbar-button';\nimport { ToolbarGroup } from './toolbar';\nimport { TurnIntoDropdownMenu } from './turn-into-dropdown-menu';\nimport { UndoToolbarButton } from './undo-toolbar-button';\n\nexport function FixedToolbarButtons() {\n  const readOnly = useEditorReadOnly();\n\n  return (\n    <div className=\"flex w-full\">\n      {!readOnly && (\n        <>\n          <ToolbarGroup>\n            <UndoToolbarButton />\n            <RedoToolbarButton />\n          </ToolbarGroup>\n\n          <ToolbarGroup>\n            <AIToolbarButton\n              className=\"gap-1.5 text-purple-600 hover:text-purple-700 dark:text-purple-400 dark:hover:text-purple-500\"\n              tooltip=\"Edit, generate, and more\"\n            >\n              <SparklesIcon className=\"!size-3.5\" />\n              Ask AI\n            </AIToolbarButton>\n          </ToolbarGroup>\n\n          <ToolbarGroup>\n            <InsertDropdownMenu />\n            <TurnIntoDropdownMenu />\n          </ToolbarGroup>\n\n          <ToolbarGroup>\n            <MarkToolbarButton nodeType={BoldPlugin.key} tooltip=\"Bold (⌘+B)\">\n              <BoldIcon />\n            </MarkToolbarButton>\n\n            <MarkToolbarButton\n              nodeType={ItalicPlugin.key}\n              tooltip=\"Italic (⌘+I)\"\n            >\n              <ItalicIcon />\n            </MarkToolbarButton>\n\n            <MarkToolbarButton\n              nodeType={UnderlinePlugin.key}\n              tooltip=\"Underline (⌘+U)\"\n            >\n              <UnderlineIcon />\n            </MarkToolbarButton>\n\n            <MarkToolbarButton\n              nodeType={StrikethroughPlugin.key}\n              tooltip=\"Strikethrough (⌘+⇧+M)\"\n            >\n              <StrikethroughIcon />\n            </MarkToolbarButton>\n\n            <MarkToolbarButton nodeType={CodePlugin.key} tooltip=\"Code (⌘+E)\">\n              <Code2Icon />\n            </MarkToolbarButton>\n\n            <ColorDropdownMenu\n              nodeType={FontColorPlugin.key}\n              tooltip=\"Text color\"\n            >\n              <BaselineIcon />\n            </ColorDropdownMenu>\n\n            <ColorDropdownMenu\n              nodeType={FontBackgroundColorPlugin.key}\n              tooltip=\"Background color\"\n            >\n              <PaintBucketIcon />\n            </ColorDropdownMenu>\n          </ToolbarGroup>\n\n          <ToolbarGroup>\n            <AlignDropdownMenu />\n            <LineHeightDropdownMenu />\n\n            <IndentListToolbarButton nodeType={ListStyleType.Disc} />\n            <IndentListToolbarButton nodeType={ListStyleType.Decimal} />\n            <IndentTodoToolbarButton />\n\n            <OutdentToolbarButton />\n            <IndentToolbarButton />\n          </ToolbarGroup>\n\n          <ToolbarGroup>\n            <MediaDropdownMenu nodeType={ImagePlugin.key} />\n            <MediaDropdownMenu nodeType={VideoPlugin.key} />\n            <MediaDropdownMenu nodeType={AudioPlugin.key} />\n            <MediaDropdownMenu nodeType={FilePlugin.key} />\n          </ToolbarGroup>\n\n          <ToolbarGroup>\n            <LinkToolbarButton />\n            <ToggleToolbarButton />\n            <TableDropdownMenu />\n            <EmojiDropdownMenu />\n            <MoreDropdownMenu />\n          </ToolbarGroup>\n        </>\n      )}\n\n      <div className=\"grow\" />\n\n      <ToolbarGroup>\n        <CommentToolbarButton />\n        <ModeDropdownMenu />\n      </ToolbarGroup>\n    </div>\n  );\n}\n",
+      "content": "'use client';\n\nimport React from 'react';\n\nimport {\n  BoldPlugin,\n  CodePlugin,\n  ItalicPlugin,\n  StrikethroughPlugin,\n  UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { useEditorReadOnly } from '@udecode/plate-common/react';\nimport {\n  FontBackgroundColorPlugin,\n  FontColorPlugin,\n} from '@udecode/plate-font/react';\nimport { ListStyleType } from '@udecode/plate-indent-list';\nimport {\n  AudioPlugin,\n  FilePlugin,\n  ImagePlugin,\n  VideoPlugin,\n} from '@udecode/plate-media/react';\nimport {\n  BaselineIcon,\n  BoldIcon,\n  Code2Icon,\n  ItalicIcon,\n  PaintBucketIcon,\n  SparklesIcon,\n  StrikethroughIcon,\n  UnderlineIcon,\n} from 'lucide-react';\n\nimport { AIToolbarButton } from './ai-toolbar-button';\nimport { AlignDropdownMenu } from './align-dropdown-menu';\nimport { ColorDropdownMenu } from './color-dropdown-menu';\nimport { CommentToolbarButton } from './comment-toolbar-button';\nimport { EmojiDropdownMenu } from './emoji-dropdown-menu';\nimport { IndentListToolbarButton } from './indent-list-toolbar-button';\nimport { IndentTodoToolbarButton } from './indent-todo-toolbar-button';\nimport { IndentToolbarButton } from './indent-toolbar-button';\nimport { InsertDropdownMenu } from './insert-dropdown-menu';\nimport { LineHeightDropdownMenu } from './line-height-dropdown-menu';\nimport { LinkToolbarButton } from './link-toolbar-button';\nimport { MarkToolbarButton } from './mark-toolbar-button';\nimport { MediaDropdownMenu } from './media-dropdown-menu';\nimport { ModeDropdownMenu } from './mode-dropdown-menu';\nimport { MoreDropdownMenu } from './more-dropdown-menu';\nimport { OutdentToolbarButton } from './outdent-toolbar-button';\nimport { RedoToolbarButton } from './redo-toolbar-button';\nimport { TableDropdownMenu } from './table-dropdown-menu';\nimport { ToggleToolbarButton } from './toggle-toolbar-button';\nimport { ToolbarGroup } from './toolbar';\nimport { TurnIntoDropdownMenu } from './turn-into-dropdown-menu';\nimport { UndoToolbarButton } from './undo-toolbar-button';\n\nexport function FixedToolbarButtons() {\n  const readOnly = useEditorReadOnly();\n\n  return (\n    <div className=\"flex w-full\">\n      {!readOnly && (\n        <>\n          <ToolbarGroup>\n            <UndoToolbarButton />\n            <RedoToolbarButton />\n          </ToolbarGroup>\n\n          <ToolbarGroup>\n            <AIToolbarButton\n              className=\"gap-1.5 text-purple-600 hover:text-purple-700 dark:text-purple-400 dark:hover:text-purple-500\"\n              tooltip=\"Edit, generate, and more\"\n            >\n              <SparklesIcon className=\"!size-3.5\" />\n              Ask AI\n            </AIToolbarButton>\n          </ToolbarGroup>\n\n          <ToolbarGroup>\n            <InsertDropdownMenu />\n            <TurnIntoDropdownMenu />\n          </ToolbarGroup>\n\n          <ToolbarGroup>\n            <MarkToolbarButton nodeType={BoldPlugin.key} tooltip=\"Bold (⌘+B)\">\n              <BoldIcon />\n            </MarkToolbarButton>\n\n            <MarkToolbarButton\n              nodeType={ItalicPlugin.key}\n              tooltip=\"Italic (⌘+I)\"\n            >\n              <ItalicIcon />\n            </MarkToolbarButton>\n\n            <MarkToolbarButton\n              nodeType={UnderlinePlugin.key}\n              tooltip=\"Underline (⌘+U)\"\n            >\n              <UnderlineIcon />\n            </MarkToolbarButton>\n\n            <MarkToolbarButton\n              nodeType={StrikethroughPlugin.key}\n              tooltip=\"Strikethrough (⌘+⇧+M)\"\n            >\n              <StrikethroughIcon />\n            </MarkToolbarButton>\n\n            <MarkToolbarButton nodeType={CodePlugin.key} tooltip=\"Code (⌘+E)\">\n              <Code2Icon />\n            </MarkToolbarButton>\n\n            <ColorDropdownMenu\n              nodeType={FontColorPlugin.key}\n              tooltip=\"Text color\"\n            >\n              <BaselineIcon />\n            </ColorDropdownMenu>\n\n            <ColorDropdownMenu\n              nodeType={FontBackgroundColorPlugin.key}\n              tooltip=\"Background color\"\n            >\n              <PaintBucketIcon />\n            </ColorDropdownMenu>\n          </ToolbarGroup>\n\n          <ToolbarGroup>\n            <AlignDropdownMenu />\n            <LineHeightDropdownMenu />\n\n            <IndentListToolbarButton nodeType={ListStyleType.Disc} />\n            <IndentListToolbarButton nodeType={ListStyleType.Decimal} />\n            <IndentTodoToolbarButton />\n\n            <OutdentToolbarButton />\n            <IndentToolbarButton />\n          </ToolbarGroup>\n\n          <ToolbarGroup>\n            <MediaDropdownMenu nodeType={ImagePlugin.key} />\n            <MediaDropdownMenu nodeType={VideoPlugin.key} />\n            <MediaDropdownMenu nodeType={AudioPlugin.key} />\n            <MediaDropdownMenu nodeType={FilePlugin.key} />\n          </ToolbarGroup>\n\n          <ToolbarGroup>\n            <LinkToolbarButton />\n            <ToggleToolbarButton />\n            <TableDropdownMenu />\n            <EmojiDropdownMenu />\n            <MoreDropdownMenu />\n          </ToolbarGroup>\n        </>\n      )}\n\n      <div className=\"grow\" />\n\n      <ToolbarGroup>\n        <CommentToolbarButton />\n        <ModeDropdownMenu />\n      </ToolbarGroup>\n    </div>\n  );\n}\n",
       "path": "plate-ui/fixed-toolbar-buttons.tsx",
       "target": "components/plate-ui/fixed-toolbar-buttons.tsx",
       "type": "registry:ui"
diff --git a/apps/www/public/r/styles/default/fixed-toolbar-list-buttons.json b/apps/www/public/r/styles/default/fixed-toolbar-list-buttons.json
index e2075d0849..e8b1911c1f 100644
--- a/apps/www/public/r/styles/default/fixed-toolbar-list-buttons.json
+++ b/apps/www/public/r/styles/default/fixed-toolbar-list-buttons.json
@@ -7,7 +7,7 @@
   ],
   "files": [
     {
-      "content": "'use client';\n\nimport React from 'react';\n\nimport {\n  BoldPlugin,\n  CodePlugin,\n  ItalicPlugin,\n  StrikethroughPlugin,\n  UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { useEditorReadOnly } from '@udecode/plate-common/react';\nimport {\n  FontBackgroundColorPlugin,\n  FontColorPlugin,\n} from '@udecode/plate-font/react';\nimport {\n  BulletedListPlugin,\n  NumberedListPlugin,\n} from '@udecode/plate-list/react';\nimport {\n  AudioPlugin,\n  FilePlugin,\n  ImagePlugin,\n  VideoPlugin,\n} from '@udecode/plate-media/react';\nimport {\n  BaselineIcon,\n  BoldIcon,\n  Code2Icon,\n  ItalicIcon,\n  PaintBucketIcon,\n  SparklesIcon,\n  StrikethroughIcon,\n  UnderlineIcon,\n} from 'lucide-react';\n\nimport { AIToolbarButton } from './ai-toolbar-button';\nimport { AlignDropdownMenu } from './align-dropdown-menu';\nimport { ColorDropdownMenu } from './color-dropdown-menu';\nimport { CommentToolbarButton } from './comment-toolbar-button';\nimport { EmojiDropdownMenu } from './emoji-dropdown-menu';\nimport { InsertDropdownMenu } from './insert-dropdown-menu';\nimport { LineHeightDropdownMenu } from './line-height-dropdown-menu';\nimport { LinkToolbarButton } from './link-toolbar-button';\nimport { ListIndentToolbarButton } from './list-indent-toolbar-button';\nimport { ListToolbarButton } from './list-toolbar-button';\nimport { MarkToolbarButton } from './mark-toolbar-button';\nimport { MediaDropdownMenu } from './media-toolbar-button';\n\n// import { MediaToolbarButton } from './media-toolbar-button';\nimport { ModeDropdownMenu } from './mode-dropdown-menu';\nimport { MoreDropdownMenu } from './more-dropdown-menu';\nimport { TableDropdownMenu } from './table-dropdown-menu';\nimport { ToggleToolbarButton } from './toggle-toolbar-button';\nimport { ToolbarGroup } from './toolbar';\nimport { TurnIntoDropdownMenu } from './turn-into-dropdown-menu';\n\nexport function FixedToolbarListButtons() {\n  const readOnly = useEditorReadOnly();\n\n  return (\n    <div className=\"flex w-full\">\n      {!readOnly && (\n        <>\n          <ToolbarGroup>\n            <AIToolbarButton\n              className=\"gap-1.5 text-purple-600 hover:text-purple-700 dark:text-purple-400 dark:hover:text-purple-500\"\n              tooltip=\"Edit, generate, and more\"\n            >\n              <SparklesIcon className=\"!size-3.5\" />\n              Ask AI\n            </AIToolbarButton>\n          </ToolbarGroup>\n\n          <ToolbarGroup>\n            <InsertDropdownMenu />\n            <TurnIntoDropdownMenu />\n          </ToolbarGroup>\n\n          <ToolbarGroup>\n            <MarkToolbarButton nodeType={BoldPlugin.key} tooltip=\"Bold (⌘+B)\">\n              <BoldIcon />\n            </MarkToolbarButton>\n\n            <MarkToolbarButton\n              nodeType={ItalicPlugin.key}\n              tooltip=\"Italic (⌘+I)\"\n            >\n              <ItalicIcon />\n            </MarkToolbarButton>\n\n            <MarkToolbarButton\n              nodeType={UnderlinePlugin.key}\n              tooltip=\"Underline (⌘+U)\"\n            >\n              <UnderlineIcon />\n            </MarkToolbarButton>\n\n            <MarkToolbarButton\n              nodeType={StrikethroughPlugin.key}\n              tooltip=\"Strikethrough (⌘+⇧+M)\"\n            >\n              <StrikethroughIcon />\n            </MarkToolbarButton>\n\n            <MarkToolbarButton nodeType={CodePlugin.key} tooltip=\"Code (⌘+E)\">\n              <Code2Icon />\n            </MarkToolbarButton>\n\n            <ColorDropdownMenu\n              nodeType={FontColorPlugin.key}\n              tooltip=\"Text color\"\n            >\n              <BaselineIcon />\n            </ColorDropdownMenu>\n\n            <ColorDropdownMenu\n              nodeType={FontBackgroundColorPlugin.key}\n              tooltip=\"Background color\"\n            >\n              <PaintBucketIcon />\n            </ColorDropdownMenu>\n          </ToolbarGroup>\n\n          <ToolbarGroup>\n            <AlignDropdownMenu />\n            <LineHeightDropdownMenu />\n\n            <ListToolbarButton nodeType={BulletedListPlugin.key} />\n            <ListToolbarButton nodeType={NumberedListPlugin.key} />\n\n            <ListIndentToolbarButton reverse />\n            <ListIndentToolbarButton />\n          </ToolbarGroup>\n\n          <ToolbarGroup>\n            <MediaDropdownMenu nodeType={ImagePlugin.key} />\n            <MediaDropdownMenu nodeType={VideoPlugin.key} />\n            <MediaDropdownMenu nodeType={AudioPlugin.key} />\n            <MediaDropdownMenu nodeType={FilePlugin.key} />\n          </ToolbarGroup>\n\n          <ToolbarGroup>\n            <LinkToolbarButton />\n            <ToggleToolbarButton />\n            <TableDropdownMenu />\n            <EmojiDropdownMenu />\n            <MoreDropdownMenu />\n          </ToolbarGroup>\n        </>\n      )}\n\n      <div className=\"grow\" />\n\n      <ToolbarGroup>\n        <CommentToolbarButton />\n        <ModeDropdownMenu />\n      </ToolbarGroup>\n    </div>\n  );\n}\n",
+      "content": "'use client';\n\nimport React from 'react';\n\nimport {\n  BoldPlugin,\n  CodePlugin,\n  ItalicPlugin,\n  StrikethroughPlugin,\n  UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { useEditorReadOnly } from '@udecode/plate-common/react';\nimport {\n  FontBackgroundColorPlugin,\n  FontColorPlugin,\n} from '@udecode/plate-font/react';\nimport {\n  BulletedListPlugin,\n  NumberedListPlugin,\n} from '@udecode/plate-list/react';\nimport {\n  AudioPlugin,\n  FilePlugin,\n  ImagePlugin,\n  VideoPlugin,\n} from '@udecode/plate-media/react';\nimport {\n  BaselineIcon,\n  BoldIcon,\n  Code2Icon,\n  ItalicIcon,\n  PaintBucketIcon,\n  SparklesIcon,\n  StrikethroughIcon,\n  UnderlineIcon,\n} from 'lucide-react';\n\nimport { AIToolbarButton } from './ai-toolbar-button';\nimport { AlignDropdownMenu } from './align-dropdown-menu';\nimport { ColorDropdownMenu } from './color-dropdown-menu';\nimport { CommentToolbarButton } from './comment-toolbar-button';\nimport { EmojiDropdownMenu } from './emoji-dropdown-menu';\nimport { InsertDropdownMenu } from './insert-dropdown-menu';\nimport { LineHeightDropdownMenu } from './line-height-dropdown-menu';\nimport { LinkToolbarButton } from './link-toolbar-button';\nimport { ListIndentToolbarButton } from './list-indent-toolbar-button';\nimport { ListToolbarButton } from './list-toolbar-button';\nimport { MarkToolbarButton } from './mark-toolbar-button';\nimport { MediaDropdownMenu } from './media-dropdown-menu';\n\n// import { MediaToolbarButton } from './media-toolbar-button';\nimport { ModeDropdownMenu } from './mode-dropdown-menu';\nimport { MoreDropdownMenu } from './more-dropdown-menu';\nimport { TableDropdownMenu } from './table-dropdown-menu';\nimport { ToggleToolbarButton } from './toggle-toolbar-button';\nimport { ToolbarGroup } from './toolbar';\nimport { TurnIntoDropdownMenu } from './turn-into-dropdown-menu';\n\nexport function FixedToolbarListButtons() {\n  const readOnly = useEditorReadOnly();\n\n  return (\n    <div className=\"flex w-full\">\n      {!readOnly && (\n        <>\n          <ToolbarGroup>\n            <AIToolbarButton\n              className=\"gap-1.5 text-purple-600 hover:text-purple-700 dark:text-purple-400 dark:hover:text-purple-500\"\n              tooltip=\"Edit, generate, and more\"\n            >\n              <SparklesIcon className=\"!size-3.5\" />\n              Ask AI\n            </AIToolbarButton>\n          </ToolbarGroup>\n\n          <ToolbarGroup>\n            <InsertDropdownMenu />\n            <TurnIntoDropdownMenu />\n          </ToolbarGroup>\n\n          <ToolbarGroup>\n            <MarkToolbarButton nodeType={BoldPlugin.key} tooltip=\"Bold (⌘+B)\">\n              <BoldIcon />\n            </MarkToolbarButton>\n\n            <MarkToolbarButton\n              nodeType={ItalicPlugin.key}\n              tooltip=\"Italic (⌘+I)\"\n            >\n              <ItalicIcon />\n            </MarkToolbarButton>\n\n            <MarkToolbarButton\n              nodeType={UnderlinePlugin.key}\n              tooltip=\"Underline (⌘+U)\"\n            >\n              <UnderlineIcon />\n            </MarkToolbarButton>\n\n            <MarkToolbarButton\n              nodeType={StrikethroughPlugin.key}\n              tooltip=\"Strikethrough (⌘+⇧+M)\"\n            >\n              <StrikethroughIcon />\n            </MarkToolbarButton>\n\n            <MarkToolbarButton nodeType={CodePlugin.key} tooltip=\"Code (⌘+E)\">\n              <Code2Icon />\n            </MarkToolbarButton>\n\n            <ColorDropdownMenu\n              nodeType={FontColorPlugin.key}\n              tooltip=\"Text color\"\n            >\n              <BaselineIcon />\n            </ColorDropdownMenu>\n\n            <ColorDropdownMenu\n              nodeType={FontBackgroundColorPlugin.key}\n              tooltip=\"Background color\"\n            >\n              <PaintBucketIcon />\n            </ColorDropdownMenu>\n          </ToolbarGroup>\n\n          <ToolbarGroup>\n            <AlignDropdownMenu />\n            <LineHeightDropdownMenu />\n\n            <ListToolbarButton nodeType={BulletedListPlugin.key} />\n            <ListToolbarButton nodeType={NumberedListPlugin.key} />\n\n            <ListIndentToolbarButton reverse />\n            <ListIndentToolbarButton />\n          </ToolbarGroup>\n\n          <ToolbarGroup>\n            <MediaDropdownMenu nodeType={ImagePlugin.key} />\n            <MediaDropdownMenu nodeType={VideoPlugin.key} />\n            <MediaDropdownMenu nodeType={AudioPlugin.key} />\n            <MediaDropdownMenu nodeType={FilePlugin.key} />\n          </ToolbarGroup>\n\n          <ToolbarGroup>\n            <LinkToolbarButton />\n            <ToggleToolbarButton />\n            <TableDropdownMenu />\n            <EmojiDropdownMenu />\n            <MoreDropdownMenu />\n          </ToolbarGroup>\n        </>\n      )}\n\n      <div className=\"grow\" />\n\n      <ToolbarGroup>\n        <CommentToolbarButton />\n        <ModeDropdownMenu />\n      </ToolbarGroup>\n    </div>\n  );\n}\n",
       "path": "plate-ui/fixed-toolbar-list-buttons.tsx",
       "target": "components/plate-ui/fixed-toolbar-list-buttons.tsx",
       "type": "registry:ui"
diff --git a/apps/www/public/r/styles/default/media-dropdown-menu.json b/apps/www/public/r/styles/default/media-dropdown-menu.json
new file mode 100644
index 0000000000..b20eae3945
--- /dev/null
+++ b/apps/www/public/r/styles/default/media-dropdown-menu.json
@@ -0,0 +1,31 @@
+{
+  "dependencies": [
+    "@udecode/plate-media"
+  ],
+  "doc": {
+    "description": "Toolbar button for inserting and managing media.",
+    "docs": [
+      {
+        "route": "/docs/media",
+        "title": "Media"
+      }
+    ],
+    "examples": [
+      "media-demo",
+      "upload-pro"
+    ]
+  },
+  "files": [
+    {
+      "content": "'use client';\n\nimport React from 'react';\n\nimport type { DropdownMenuProps } from '@radix-ui/react-dropdown-menu';\n\nimport { cn } from '@udecode/cn';\nimport { useEditorPlugin } from '@udecode/plate-core/react';\nimport {\n  AudioPlugin,\n  FilePlugin,\n  ImagePlugin,\n  MediaEmbedPlugin,\n  VideoPlugin,\n} from '@udecode/plate-media/react';\nimport {\n  AudioLinesIcon,\n  FileUpIcon,\n  FilmIcon,\n  ImageIcon,\n  LinkIcon,\n} from 'lucide-react';\nimport { useFilePicker } from 'use-file-picker';\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuTrigger,\n  useOpenState,\n} from './dropdown-menu';\nimport { ToolbarSplitButton } from './toolbar';\n\nconst MEDIA_CONFIG: Record<\n  string,\n  {\n    accept: string[];\n    icon: React.ReactNode;\n    tooltip: string;\n  }\n> = {\n  [AudioPlugin.key]: {\n    accept: ['audio/*'],\n    icon: <AudioLinesIcon />,\n    tooltip: 'Audio',\n  },\n  [FilePlugin.key]: {\n    accept: ['*'],\n    icon: <FileUpIcon />,\n    tooltip: 'File',\n  },\n  [ImagePlugin.key]: {\n    accept: ['image/*'],\n    icon: <ImageIcon />,\n    tooltip: 'Image',\n  },\n  [VideoPlugin.key]: {\n    accept: ['video/*'],\n    icon: <FilmIcon />,\n    tooltip: 'Video',\n  },\n};\n\nexport function MediaDropdownMenu({\n  children,\n  nodeType,\n  ...props\n}: DropdownMenuProps & { nodeType: string }) {\n  const currentConfig = MEDIA_CONFIG[nodeType];\n\n  const { api, editor } = useEditorPlugin(MediaEmbedPlugin);\n  const { openFilePicker } = useFilePicker({\n    accept: currentConfig.accept,\n    multiple: true,\n    onFilesSelected: ({ plainFiles: updatedFiles }) => {\n      (editor as any).tf.insert.media(updatedFiles);\n    },\n  });\n\n  const openState = useOpenState();\n\n  return (\n    <DropdownMenu {...openState} modal={false} {...props}>\n      <DropdownMenuTrigger asChild>\n        <ToolbarSplitButton\n          onMainButtonClick={() => openFilePicker()}\n          pressed={openState.open}\n          tooltip={currentConfig.tooltip}\n        >\n          {currentConfig.icon}\n        </ToolbarSplitButton>\n      </DropdownMenuTrigger>\n\n      <DropdownMenuContent\n        className={cn('min-w-0 data-[state=closed]:hidden')}\n        align=\"start\"\n      >\n        <DropdownMenuRadioGroup>\n          <DropdownMenuRadioItem\n            value=\"upload\"\n            onSelect={() => openFilePicker()}\n            hideIcon\n          >\n            <div className=\"flex items-center gap-2\">\n              {currentConfig.icon}\n              <span className=\"text-sm\">Upload from computer</span>\n            </div>\n          </DropdownMenuRadioItem>\n          <DropdownMenuRadioItem\n            value=\"url\"\n            onSelect={() => {\n              api.media_embed.openFloating(nodeType);\n            }}\n            hideIcon\n          >\n            <div className=\"flex items-center gap-2\">\n              <LinkIcon />\n              <span className=\"text-sm\">Insert via URL</span>\n            </div>\n          </DropdownMenuRadioItem>\n        </DropdownMenuRadioGroup>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n}\n",
+      "path": "plate-ui/media-dropdown-menu.tsx",
+      "target": "components/plate-ui/media-dropdown-menu.tsx",
+      "type": "registry:ui"
+    }
+  ],
+  "name": "media-dropdown-menu",
+  "registryDependencies": [
+    "toolbar"
+  ],
+  "type": "registry:ui"
+}
\ No newline at end of file
diff --git a/apps/www/src/__registry__/index.tsx b/apps/www/src/__registry__/index.tsx
index f87afa9db3..d159f4ada5 100644
--- a/apps/www/src/__registry__/index.tsx
+++ b/apps/www/src/__registry__/index.tsx
@@ -941,13 +941,13 @@ export const Index: Record<string, any> = {
       subcategory: "",
       chunks: []
     },
-    "media-toolbar-button": {
-      name: "media-toolbar-button",
+    "media-dropdown-menu": {
+      name: "media-dropdown-menu",
       description: "",
       type: "registry:ui",
       registryDependencies: ["toolbar"],
-      files: ["registry/default/plate-ui/media-toolbar-button.tsx"],
-      component: React.lazy(() => import("@/registry/default/plate-ui/media-toolbar-button.tsx")),
+      files: ["registry/default/plate-ui/media-dropdown-menu.tsx"],
+      component: React.lazy(() => import("@/registry/default/plate-ui/media-dropdown-menu.tsx")),
       source: "",
       category: "",
       subcategory: "",
diff --git a/apps/www/src/registry/default/example/cards/cards-toolbar.tsx b/apps/www/src/registry/default/example/cards/cards-toolbar.tsx
index 512547d89b..2e7b2fe3af 100644
--- a/apps/www/src/registry/default/example/cards/cards-toolbar.tsx
+++ b/apps/www/src/registry/default/example/cards/cards-toolbar.tsx
@@ -39,7 +39,7 @@ import { InsertDropdownMenu } from '@/registry/default/plate-ui/insert-dropdown-
 import { LineHeightDropdownMenu } from '@/registry/default/plate-ui/line-height-dropdown-menu';
 import { LinkToolbarButton } from '@/registry/default/plate-ui/link-toolbar-button';
 import { MarkToolbarButton } from '@/registry/default/plate-ui/mark-toolbar-button';
-import { MediaDropdownMenu } from '@/registry/default/plate-ui/media-toolbar-button';
+import { MediaDropdownMenu } from '@/registry/default/plate-ui/media-dropdown-menu';
 import { ModeDropdownMenu } from '@/registry/default/plate-ui/mode-dropdown-menu';
 import { MoreDropdownMenu } from '@/registry/default/plate-ui/more-dropdown-menu';
 import { OutdentToolbarButton } from '@/registry/default/plate-ui/outdent-toolbar-button';
diff --git a/apps/www/src/registry/default/plate-ui/fixed-toolbar-buttons.tsx b/apps/www/src/registry/default/plate-ui/fixed-toolbar-buttons.tsx
index 7505fb79ba..0561a087a5 100644
--- a/apps/www/src/registry/default/plate-ui/fixed-toolbar-buttons.tsx
+++ b/apps/www/src/registry/default/plate-ui/fixed-toolbar-buttons.tsx
@@ -44,7 +44,7 @@ import { InsertDropdownMenu } from './insert-dropdown-menu';
 import { LineHeightDropdownMenu } from './line-height-dropdown-menu';
 import { LinkToolbarButton } from './link-toolbar-button';
 import { MarkToolbarButton } from './mark-toolbar-button';
-import { MediaDropdownMenu } from './media-toolbar-button';
+import { MediaDropdownMenu } from './media-dropdown-menu';
 import { ModeDropdownMenu } from './mode-dropdown-menu';
 import { MoreDropdownMenu } from './more-dropdown-menu';
 import { OutdentToolbarButton } from './outdent-toolbar-button';
diff --git a/apps/www/src/registry/default/plate-ui/fixed-toolbar-list-buttons.tsx b/apps/www/src/registry/default/plate-ui/fixed-toolbar-list-buttons.tsx
index 3ca99216b7..82dfacc65f 100644
--- a/apps/www/src/registry/default/plate-ui/fixed-toolbar-list-buttons.tsx
+++ b/apps/www/src/registry/default/plate-ui/fixed-toolbar-list-buttons.tsx
@@ -46,7 +46,7 @@ import { LinkToolbarButton } from './link-toolbar-button';
 import { ListIndentToolbarButton } from './list-indent-toolbar-button';
 import { ListToolbarButton } from './list-toolbar-button';
 import { MarkToolbarButton } from './mark-toolbar-button';
-import { MediaDropdownMenu } from './media-toolbar-button';
+import { MediaDropdownMenu } from './media-dropdown-menu';
 
 // import { MediaToolbarButton } from './media-toolbar-button';
 import { ModeDropdownMenu } from './mode-dropdown-menu';
diff --git a/apps/www/src/registry/default/plate-ui/media-toolbar-button.tsx b/apps/www/src/registry/default/plate-ui/media-dropdown-menu.tsx
similarity index 100%
rename from apps/www/src/registry/default/plate-ui/media-toolbar-button.tsx
rename to apps/www/src/registry/default/plate-ui/media-dropdown-menu.tsx
diff --git a/apps/www/src/registry/registry-ui.ts b/apps/www/src/registry/registry-ui.ts
index 83530d89bd..78dbb00bcc 100644
--- a/apps/www/src/registry/registry-ui.ts
+++ b/apps/www/src/registry/registry-ui.ts
@@ -679,8 +679,8 @@ import { withDraggables } from './withDraggables';`,
       docs: [{ route: '/docs/media', title: 'Media' }],
       examples: ['media-demo', 'upload-pro'],
     },
-    files: ['plate-ui/media-toolbar-button.tsx'],
-    name: 'media-toolbar-button',
+    files: ['plate-ui/media-dropdown-menu.tsx'],
+    name: 'media-dropdown-menu',
     registryDependencies: ['toolbar'],
     type: 'registry:ui',
   },

From ae4af54bc6570a594027b45f323763dc74bc9e1b Mon Sep 17 00:00:00 2001
From: Felix Feng <felixfeng33@gmail.com>
Date: Fri, 15 Nov 2024 10:03:36 +0800
Subject: [PATCH 18/34] fix

---
 .../r/styles/default/media-dropdown-menu.json |   2 +-
 .../default/plate-ui/media-dropdown-menu.tsx  |  40 +++--
 .../plate-ui/media-floating-toolbar.tsx       |  96 ++++++-----
 .../src/registry/default/plate-ui/toolbar.tsx | 160 ++++++++----------
 4 files changed, 150 insertions(+), 148 deletions(-)

diff --git a/apps/www/public/r/styles/default/media-dropdown-menu.json b/apps/www/public/r/styles/default/media-dropdown-menu.json
index b20eae3945..291e1c9f48 100644
--- a/apps/www/public/r/styles/default/media-dropdown-menu.json
+++ b/apps/www/public/r/styles/default/media-dropdown-menu.json
@@ -17,7 +17,7 @@
   },
   "files": [
     {
-      "content": "'use client';\n\nimport React from 'react';\n\nimport type { DropdownMenuProps } from '@radix-ui/react-dropdown-menu';\n\nimport { cn } from '@udecode/cn';\nimport { useEditorPlugin } from '@udecode/plate-core/react';\nimport {\n  AudioPlugin,\n  FilePlugin,\n  ImagePlugin,\n  MediaEmbedPlugin,\n  VideoPlugin,\n} from '@udecode/plate-media/react';\nimport {\n  AudioLinesIcon,\n  FileUpIcon,\n  FilmIcon,\n  ImageIcon,\n  LinkIcon,\n} from 'lucide-react';\nimport { useFilePicker } from 'use-file-picker';\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuTrigger,\n  useOpenState,\n} from './dropdown-menu';\nimport { ToolbarSplitButton } from './toolbar';\n\nconst MEDIA_CONFIG: Record<\n  string,\n  {\n    accept: string[];\n    icon: React.ReactNode;\n    tooltip: string;\n  }\n> = {\n  [AudioPlugin.key]: {\n    accept: ['audio/*'],\n    icon: <AudioLinesIcon />,\n    tooltip: 'Audio',\n  },\n  [FilePlugin.key]: {\n    accept: ['*'],\n    icon: <FileUpIcon />,\n    tooltip: 'File',\n  },\n  [ImagePlugin.key]: {\n    accept: ['image/*'],\n    icon: <ImageIcon />,\n    tooltip: 'Image',\n  },\n  [VideoPlugin.key]: {\n    accept: ['video/*'],\n    icon: <FilmIcon />,\n    tooltip: 'Video',\n  },\n};\n\nexport function MediaDropdownMenu({\n  children,\n  nodeType,\n  ...props\n}: DropdownMenuProps & { nodeType: string }) {\n  const currentConfig = MEDIA_CONFIG[nodeType];\n\n  const { api, editor } = useEditorPlugin(MediaEmbedPlugin);\n  const { openFilePicker } = useFilePicker({\n    accept: currentConfig.accept,\n    multiple: true,\n    onFilesSelected: ({ plainFiles: updatedFiles }) => {\n      (editor as any).tf.insert.media(updatedFiles);\n    },\n  });\n\n  const openState = useOpenState();\n\n  return (\n    <DropdownMenu {...openState} modal={false} {...props}>\n      <DropdownMenuTrigger asChild>\n        <ToolbarSplitButton\n          onMainButtonClick={() => openFilePicker()}\n          pressed={openState.open}\n          tooltip={currentConfig.tooltip}\n        >\n          {currentConfig.icon}\n        </ToolbarSplitButton>\n      </DropdownMenuTrigger>\n\n      <DropdownMenuContent\n        className={cn('min-w-0 data-[state=closed]:hidden')}\n        align=\"start\"\n      >\n        <DropdownMenuRadioGroup>\n          <DropdownMenuRadioItem\n            value=\"upload\"\n            onSelect={() => openFilePicker()}\n            hideIcon\n          >\n            <div className=\"flex items-center gap-2\">\n              {currentConfig.icon}\n              <span className=\"text-sm\">Upload from computer</span>\n            </div>\n          </DropdownMenuRadioItem>\n          <DropdownMenuRadioItem\n            value=\"url\"\n            onSelect={() => {\n              api.media_embed.openFloating(nodeType);\n            }}\n            hideIcon\n          >\n            <div className=\"flex items-center gap-2\">\n              <LinkIcon />\n              <span className=\"text-sm\">Insert via URL</span>\n            </div>\n          </DropdownMenuRadioItem>\n        </DropdownMenuRadioGroup>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n}\n",
+      "content": "'use client';\n\nimport React from 'react';\n\nimport type { DropdownMenuProps } from '@radix-ui/react-dropdown-menu';\n\nimport { cn } from '@udecode/cn';\nimport { useEditorPlugin } from '@udecode/plate-core/react';\nimport {\n  AudioPlugin,\n  FilePlugin,\n  ImagePlugin,\n  MediaEmbedPlugin,\n  VideoPlugin,\n} from '@udecode/plate-media/react';\nimport { focusEditor } from '@udecode/slate-react';\nimport {\n  AudioLinesIcon,\n  FileUpIcon,\n  FilmIcon,\n  ImageIcon,\n  LinkIcon,\n} from 'lucide-react';\nimport { useFilePicker } from 'use-file-picker';\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuTrigger,\n  useOpenState,\n} from './dropdown-menu';\nimport { ToolbarSplitButton } from './toolbar';\n\nconst MEDIA_CONFIG: Record<\n  string,\n  {\n    accept: string[];\n    icon: React.ReactNode;\n    tooltip: string;\n  }\n> = {\n  [AudioPlugin.key]: {\n    accept: ['audio/*'],\n    icon: <AudioLinesIcon />,\n    tooltip: 'Audio',\n  },\n  [FilePlugin.key]: {\n    accept: ['*'],\n    icon: <FileUpIcon />,\n    tooltip: 'File',\n  },\n  [ImagePlugin.key]: {\n    accept: ['image/*'],\n    icon: <ImageIcon />,\n    tooltip: 'Image',\n  },\n  [VideoPlugin.key]: {\n    accept: ['video/*'],\n    icon: <FilmIcon />,\n    tooltip: 'Video',\n  },\n};\n\nexport function MediaDropdownMenu({\n  children,\n  nodeType,\n  ...props\n}: DropdownMenuProps & { nodeType: string }) {\n  const currentConfig = MEDIA_CONFIG[nodeType];\n\n  const { editor, setOptions } = useEditorPlugin(MediaEmbedPlugin);\n  const { openFilePicker } = useFilePicker({\n    accept: currentConfig.accept,\n    multiple: true,\n    onFilesSelected: ({ plainFiles: updatedFiles }) => {\n      (editor as any).tf.insert.media(updatedFiles);\n    },\n  });\n\n  const openState = useOpenState();\n\n  return (\n    <DropdownMenu {...openState} modal={false} {...props}>\n      <DropdownMenuTrigger asChild>\n        <ToolbarSplitButton\n          onMainButtonClick={() => openFilePicker()}\n          pressed={openState.open}\n          tooltip={currentConfig.tooltip}\n        >\n          {currentConfig.icon}\n        </ToolbarSplitButton>\n      </DropdownMenuTrigger>\n\n      <DropdownMenuContent\n        className={cn('min-w-0 data-[state=closed]:hidden')}\n        align=\"start\"\n      >\n        <DropdownMenuRadioGroup>\n          <DropdownMenuRadioItem\n            value=\"upload\"\n            onSelect={() => openFilePicker()}\n            hideIcon\n          >\n            <div className=\"flex items-center gap-2\">\n              {currentConfig.icon}\n              <span className=\"text-sm\">Upload from computer</span>\n            </div>\n          </DropdownMenuRadioItem>\n          <DropdownMenuRadioItem\n            value=\"url\"\n            onSelect={() => {\n              // api.media_embed.openFloating(nodeType);\n              focusEditor(editor);\n              setOptions({ isFloatingOpen: true, mediaType: nodeType });\n            }}\n            hideIcon\n          >\n            <div className=\"flex items-center gap-2\">\n              <LinkIcon />\n              <span className=\"text-sm\">Insert via URL</span>\n            </div>\n          </DropdownMenuRadioItem>\n        </DropdownMenuRadioGroup>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n}\n",
       "path": "plate-ui/media-dropdown-menu.tsx",
       "target": "components/plate-ui/media-dropdown-menu.tsx",
       "type": "registry:ui"
diff --git a/apps/www/src/registry/default/plate-ui/media-dropdown-menu.tsx b/apps/www/src/registry/default/plate-ui/media-dropdown-menu.tsx
index 67d44326f9..e1d6a91566 100644
--- a/apps/www/src/registry/default/plate-ui/media-dropdown-menu.tsx
+++ b/apps/www/src/registry/default/plate-ui/media-dropdown-menu.tsx
@@ -13,6 +13,7 @@ import {
   MediaEmbedPlugin,
   VideoPlugin,
 } from '@udecode/plate-media/react';
+import { focusEditor } from '@udecode/slate-react';
 import {
   AudioLinesIcon,
   FileUpIcon,
@@ -30,7 +31,11 @@ import {
   DropdownMenuTrigger,
   useOpenState,
 } from './dropdown-menu';
-import { ToolbarSplitButton } from './toolbar';
+import {
+  ToolbarSplitButton,
+  ToolbarSplitButtonPrimary,
+  ToolbarSplitButtonSecondary,
+} from './toolbar';
 
 const MEDIA_CONFIG: Record<
   string,
@@ -42,22 +47,22 @@ const MEDIA_CONFIG: Record<
 > = {
   [AudioPlugin.key]: {
     accept: ['audio/*'],
-    icon: <AudioLinesIcon />,
+    icon: <AudioLinesIcon className="size-4" />,
     tooltip: 'Audio',
   },
   [FilePlugin.key]: {
     accept: ['*'],
-    icon: <FileUpIcon />,
+    icon: <FileUpIcon className="size-4" />,
     tooltip: 'File',
   },
   [ImagePlugin.key]: {
     accept: ['image/*'],
-    icon: <ImageIcon />,
+    icon: <ImageIcon className="size-4" />,
     tooltip: 'Image',
   },
   [VideoPlugin.key]: {
     accept: ['video/*'],
-    icon: <FilmIcon />,
+    icon: <FilmIcon className="size-4" />,
     tooltip: 'Video',
   },
 };
@@ -69,7 +74,7 @@ export function MediaDropdownMenu({
 }: DropdownMenuProps & { nodeType: string }) {
   const currentConfig = MEDIA_CONFIG[nodeType];
 
-  const { api, editor } = useEditorPlugin(MediaEmbedPlugin);
+  const { api, editor, setOptions } = useEditorPlugin(MediaEmbedPlugin);
   const { openFilePicker } = useFilePicker({
     accept: currentConfig.accept,
     multiple: true,
@@ -82,15 +87,18 @@ export function MediaDropdownMenu({
 
   return (
     <DropdownMenu {...openState} modal={false} {...props}>
-      <DropdownMenuTrigger asChild>
-        <ToolbarSplitButton
-          onMainButtonClick={() => openFilePicker()}
-          pressed={openState.open}
-          tooltip={currentConfig.tooltip}
-        >
+      <ToolbarSplitButton
+        pressed={openState.open}
+        tooltip={currentConfig.tooltip}
+      >
+        <ToolbarSplitButtonPrimary onClick={() => openFilePicker()}>
           {currentConfig.icon}
-        </ToolbarSplitButton>
-      </DropdownMenuTrigger>
+        </ToolbarSplitButtonPrimary>
+
+        <DropdownMenuTrigger asChild>
+          <ToolbarSplitButtonSecondary />
+        </DropdownMenuTrigger>
+      </ToolbarSplitButton>
 
       <DropdownMenuContent
         className={cn('min-w-0 data-[state=closed]:hidden')}
@@ -110,7 +118,9 @@ export function MediaDropdownMenu({
           <DropdownMenuRadioItem
             value="url"
             onSelect={() => {
-              api.media_embed.openFloating(nodeType);
+              // api.media_embed.openFloating(nodeType);
+              focusEditor(editor);
+              setOptions({ isFloatingOpen: true, mediaType: nodeType });
             }}
             hideIcon
           >
diff --git a/apps/www/src/registry/default/plate-ui/media-floating-toolbar.tsx b/apps/www/src/registry/default/plate-ui/media-floating-toolbar.tsx
index f92966b268..5cff9f9247 100644
--- a/apps/www/src/registry/default/plate-ui/media-floating-toolbar.tsx
+++ b/apps/www/src/registry/default/plate-ui/media-floating-toolbar.tsx
@@ -2,13 +2,7 @@
 
 import React, { useMemo } from 'react';
 
-import { cn } from '@udecode/cn';
-import { useEditorPlugin } from '@udecode/plate-core/react';
-import {
-  type UseVirtualFloatingOptions,
-  flip,
-  offset,
-} from '@udecode/plate-floating';
+import { useEditorPlugin, useEditorSelector } from '@udecode/plate-core/react';
 import {
   AudioPlugin,
   FilePlugin,
@@ -17,24 +11,15 @@ import {
   VideoPlugin,
   useMediaFloatingToolbar,
 } from '@udecode/plate-media/react';
+import { toDOMNode } from '@udecode/slate-react';
+import { getAncestorNode } from '@udecode/slate-utils';
 import { AudioLinesIcon, FileUpIcon, FilmIcon, ImageIcon } from 'lucide-react';
 
 import { Button } from './button';
 import { Input } from './input';
-import { popoverVariants } from './popover';
+import { Popover, PopoverAnchor, PopoverContent } from './popover';
 import { Separator } from './separator';
 
-const floatingOptions: UseVirtualFloatingOptions = {
-  middleware: [
-    offset(12),
-    flip({
-      fallbackPlacements: ['bottom-end', 'top-start', 'top-end'],
-      padding: 12,
-    }),
-  ],
-  placement: 'bottom-start',
-};
-
 const MEDIA_CONFIG: Record<
   string,
   {
@@ -61,9 +46,23 @@ const MEDIA_CONFIG: Record<
 };
 
 export function MediaFloatingToolbar() {
-  const { useOption } = useEditorPlugin(MediaEmbedPlugin);
+  const { setOption, useOption } = useEditorPlugin(MediaEmbedPlugin);
 
   const mediaType = useOption('mediaType');
+  const isOpen = useOption('isFloatingOpen');
+
+  const anchorElement = useEditorSelector(
+    (editor) => {
+      if (!isOpen) return null;
+
+      const enter = getAncestorNode(editor);
+
+      if (!enter) return null;
+
+      return toDOMNode(editor, enter[0]);
+    },
+    [isOpen]
+  );
 
   const mediaConfig = useMemo(() => {
     if (!mediaType) return null;
@@ -71,31 +70,42 @@ export function MediaFloatingToolbar() {
     return MEDIA_CONFIG[mediaType];
   }, [mediaType]);
 
-  const { acceptProps, cancelProps, inputProps, rootProps } =
-    useMediaFloatingToolbar(floatingOptions);
+  const { acceptProps, cancelProps, inputProps } = useMediaFloatingToolbar();
+
+  if (!anchorElement) return null;
 
   return (
-    <div {...rootProps} className={cn(popoverVariants(), 'w-auto p-1')}>
-      <div className="flex w-[330px] flex-col">
-        <div className="flex items-center">
-          <div className="flex items-center pl-2 pr-1">{mediaConfig?.icon}</div>
-          <Input
-            variant="ghost"
-            {...inputProps}
-            placeholder={mediaConfig?.placeholder}
-            h="sm"
-          />
-        </div>
-        <Separator className="my-1" />
-        <div className="flex items-center justify-end gap-2 pt-2">
-          <Button size="sm" variant="secondary" {...cancelProps}>
-            Cancel
-          </Button>
-          <Button size="sm" variant="default" {...acceptProps}>
-            Accept
-          </Button>
+    <Popover
+      open={isOpen}
+      onOpenChange={(open) => setOption('isFloatingOpen', open)}
+      modal={false}
+    >
+      <PopoverAnchor virtualRef={{ current: anchorElement }} />
+
+      <PopoverContent className="w-auto p-1" align="center" side="bottom">
+        <div className="flex w-[330px] flex-col">
+          <div className="flex items-center">
+            <div className="flex items-center pl-2 pr-1">
+              {mediaConfig?.icon}
+            </div>
+            <Input
+              variant="ghost"
+              {...inputProps}
+              placeholder={mediaConfig?.placeholder}
+              h="sm"
+            />
+          </div>
+          <Separator className="my-1" />
+          <div className="flex items-center justify-end gap-2 pt-2">
+            <Button size="sm" variant="secondary" {...cancelProps}>
+              Cancel
+            </Button>
+            <Button size="sm" variant="default" {...acceptProps}>
+              Accept
+            </Button>
+          </div>
         </div>
-      </div>
-    </div>
+      </PopoverContent>
+    </Popover>
   );
 }
diff --git a/apps/www/src/registry/default/plate-ui/toolbar.tsx b/apps/www/src/registry/default/plate-ui/toolbar.tsx
index e30259d880..2215e3b96f 100644
--- a/apps/www/src/registry/default/plate-ui/toolbar.tsx
+++ b/apps/www/src/registry/default/plate-ui/toolbar.tsx
@@ -156,106 +156,88 @@ ToolbarButton.displayName = 'ToolbarButton';
 
 export { ToolbarButton };
 
-const ToolbarSplitButton = React.forwardRef<
-  React.ElementRef<typeof ToolbarToggleItem>,
+export const ToolbarSplitButton = React.forwardRef<
+  React.ElementRef<typeof ToolbarToggleGroup>,
   {
     pressed?: boolean;
     tooltip?: string;
-    onMainButtonClick?: () => void;
   } & Omit<
     React.ComponentPropsWithoutRef<typeof ToolbarToggleItem>,
     'asChild' | 'value'
-  > &
-    VariantProps<typeof toolbarButtonVariants>
->(
-  (
-    {
-      children,
-      className,
-      pressed,
-      size,
-      tooltip,
-      variant,
-      onMainButtonClick,
-      ...props
-    },
-    ref
-  ) => {
-    const mainButtonClass = cn(
-      toolbarButtonVariants({
-        size,
-        variant,
-      }),
-      'rounded-r-none',
-      className
-    );
-
-    const dropdownButtonClass = dropdownArrowVariants({
-      size,
-      variant,
-    });
-
-    const MainButton = withTooltip(
-      React.forwardRef<HTMLButtonElement>((mainProps, mainRef) => (
-        <ToolbarToggleItem
-          {...mainProps}
-          ref={mainRef}
-          className={mainButtonClass}
-          value={pressed ? 'single' : ''}
-          onClick={onMainButtonClick}
-        >
-          <div className="flex flex-1 items-center gap-2 whitespace-nowrap">
-            {children}
-          </div>
-        </ToolbarToggleItem>
-      ))
-    );
+  >
+>(({ children, pressed, ...props }, ref) => {
+  return (
+    <ToolbarToggleGroup
+      ref={ref}
+      className="group"
+      disabled={props.disabled}
+      value="single"
+      data-pressed={pressed}
+      type="single"
+    >
+      <div className="flex">{children}</div>
+    </ToolbarToggleGroup>
+  );
+});
 
-    return typeof pressed === 'boolean' ? (
-      <ToolbarToggleGroup
-        disabled={props.disabled}
-        value="single"
-        type="single"
-      >
-        <div className="flex">
-          <MainButton tooltip={tooltip} />
+export const ToolbarSplitButtonPrimary = React.forwardRef<
+  React.ElementRef<typeof ToolbarToggleItem>,
+  {
+    className?: string;
+    size?: 'default' | 'lg' | 'sm';
+    variant?: 'default' | 'outline';
+  } & Omit<React.ComponentPropsWithoutRef<typeof ToolbarToggleItem>, 'value'>
+>(({ children, className, size, variant, ...props }, ref) => {
+  return (
+    <ToolbarToggleItem
+      ref={ref}
+      className={cn(
+        className,
+        toolbarButtonVariants({
+          size,
+          variant,
+        }),
+        'rounded-r-none',
+        'group-data-[pressed=true]:bg-accent group-data-[pressed=true]:text-accent-foreground'
+      )}
+      value="split-primary"
+      {...props}
+    >
+      {children}
+    </ToolbarToggleItem>
+  );
+});
 
-          <button
-            ref={ref}
-            className={cn(
-              dropdownButtonClass,
-              pressed && 'bg-accent text-accent-foreground'
-            )}
-            disabled={props.disabled}
-            value={pressed ? 'single' : ''}
-            type="reset"
-            {...props}
-          >
-            <ChevronDown className="size-3.5 text-muted-foreground" data-icon />
-          </button>
-        </div>
-      </ToolbarToggleGroup>
-    ) : (
-      <div className="flex">
-        <MainButton tooltip={tooltip} />
+export const ToolbarSplitButtonSecondary = React.forwardRef<
+  HTMLButtonElement,
+  {
+    className?: string;
+    size?: 'default' | 'lg' | 'sm';
+    variant?: 'default' | 'outline';
+  } & React.ButtonHTMLAttributes<HTMLButtonElement>
+>(({ className, size, variant, ...props }, ref) => {
+  return (
+    <button
+      ref={ref}
+      className={cn(
+        className,
+        dropdownArrowVariants({
+          size,
+          variant,
+        }),
+        'group-data-[pressed=true]:bg-accent group-data-[pressed=true]:text-accent-foreground'
+      )}
+      disabled={props.disabled}
+      type="reset"
+      {...props}
+    >
+      <ChevronDown className="size-3.5 text-muted-foreground" data-icon />
+    </button>
+  );
+});
 
-        <button
-          ref={ref}
-          {...props}
-          className={dropdownButtonClass}
-          disabled={props.disabled}
-          type="button"
-        >
-          <ChevronDown className="size-2.5 text-muted-foreground" data-icon />
-        </button>
-      </div>
-    );
-  }
-);
 ToolbarSplitButton.displayName = 'ToolbarButton';
 
-export { ToolbarSplitButton };
-
 export const ToolbarToggleItem = withVariants(
   ToolbarPrimitive.ToggleItem,
   toolbarButtonVariants,

From 9566514ec4818ba2ce1c92110bf80ea870fa0ebb Mon Sep 17 00:00:00 2001
From: Felix Feng <felixfeng33@gmail.com>
Date: Fri, 15 Nov 2024 10:03:53 +0800
Subject: [PATCH 19/34] fix

---
 .../src/react/media/MediaEmbedPlugin.tsx      | 31 +++------
 .../react/media/hooks/useMediaEmbedEscape.ts  | 11 +++-
 .../media/hooks/useMediaFloatingToolbar.ts    | 66 ++-----------------
 3 files changed, 23 insertions(+), 85 deletions(-)

diff --git a/packages/media/src/react/media/MediaEmbedPlugin.tsx b/packages/media/src/react/media/MediaEmbedPlugin.tsx
index bcffee28ce..3ebe9e15a6 100644
--- a/packages/media/src/react/media/MediaEmbedPlugin.tsx
+++ b/packages/media/src/react/media/MediaEmbedPlugin.tsx
@@ -1,6 +1,6 @@
 import type { ExtendConfig } from '@udecode/plate-common';
 
-import { focusEditor, toTPlatePlugin } from '@udecode/plate-common/react';
+import { toTPlatePlugin } from '@udecode/plate-common/react';
 
 import {
   type BaseMediaEmbedConfig,
@@ -34,27 +34,16 @@ export const MediaEmbedPlugin = toTPlatePlugin<MediaEmbedConfig>(
       url: '',
     },
   }
-)
-  .extendApi<Partial<MediaEmbedApi>>(({ editor, setOptions }) => ({
-    hideFloating: () => {
-      setOptions({ isFloatingOpen: false, url: '' });
-      focusEditor(editor);
-    },
-    openFloating: (mediaType: string) => {
-      focusEditor(editor);
-      setOptions({ isFloatingOpen: true, mediaType });
-    },
-  }))
-  .extendTransforms(({ api, editor, getOptions, setOptions }) => ({
-    embed: (url: string) => {
-      setOptions({ isFloatingOpen: false, url });
+).extendTransforms(({ api, editor, getOptions, setOptions }) => ({
+  embed: (url: string) => {
+    setOptions({ isFloatingOpen: false, url });
 
-      const isUrl = getOptions().isUrl;
+    const isUrl = getOptions().isUrl;
 
-      if (!isUrl?.(url)) return;
+    if (!isUrl?.(url)) return;
 
-      insertImage(editor, url);
+    insertImage(editor, url);
 
-      api.media_embed.hideFloating();
-    },
-  }));
+    api.media_embed.hideFloating();
+  },
+}));
diff --git a/packages/media/src/react/media/hooks/useMediaEmbedEscape.ts b/packages/media/src/react/media/hooks/useMediaEmbedEscape.ts
index a83194917b..ec216b6af3 100644
--- a/packages/media/src/react/media/hooks/useMediaEmbedEscape.ts
+++ b/packages/media/src/react/media/hooks/useMediaEmbedEscape.ts
@@ -1,16 +1,21 @@
-import { useEditorPlugin, useHotkeys } from '@udecode/plate-common/react';
+import {
+  focusEditor,
+  useEditorPlugin,
+  useHotkeys,
+} from '@udecode/plate-common/react';
 
 import { MediaEmbedPlugin } from '../MediaEmbedPlugin';
 
 export const useMediaEmbedEscape = () => {
-  const { api, useOption } = useEditorPlugin(MediaEmbedPlugin);
+  const { editor, setOptions, useOption } = useEditorPlugin(MediaEmbedPlugin);
 
   const isOpen = useOption('isFloatingOpen');
 
   useHotkeys(
     'escape',
     () => {
-      api.media_embed.hideFloating();
+      setOptions({ isFloatingOpen: false, url: '' });
+      focusEditor(editor);
     },
     {
       enableOnFormTags: ['INPUT'],
diff --git a/packages/media/src/react/media/hooks/useMediaFloatingToolbar.ts b/packages/media/src/react/media/hooks/useMediaFloatingToolbar.ts
index 14c3a83749..12f4ddf8d7 100644
--- a/packages/media/src/react/media/hooks/useMediaFloatingToolbar.ts
+++ b/packages/media/src/react/media/hooks/useMediaFloatingToolbar.ts
@@ -1,69 +1,20 @@
 import React, { useEffect } from 'react';
 
-import {
-  getAboveNode,
-  getEndPoint,
-  getStartPoint,
-  mergeProps,
-} from '@udecode/plate-common';
-import {
-  useComposedRef,
-  useEditorPlugin,
-  useOnClickOutside,
-} from '@udecode/plate-common/react';
-import {
-  type UseVirtualFloatingOptions,
-  getDOMSelectionBoundingClientRect,
-  getRangeBoundingClientRect,
-  useVirtualFloating,
-} from '@udecode/plate-floating';
+import { focusEditor, useEditorPlugin } from '@udecode/plate-common/react';
 
 import { MediaEmbedPlugin } from '../MediaEmbedPlugin';
 import { useMediaEmbedEnter } from './useMediaEmbedEnter';
 import { useMediaEmbedEscape } from './useMediaEmbedEscape';
 
-export const useMediaFloatingToolbar = (
-  floatingOptions: UseVirtualFloatingOptions
-) => {
-  const { api, editor, setOption, tf, type, useOption } =
+export const useMediaFloatingToolbar = () => {
+  const { editor, setOption, tf, useOption } =
     useEditorPlugin(MediaEmbedPlugin);
   const isOpen = useOption('isFloatingOpen');
   const url = useOption('url');
-  const getBoundingClientRect = React.useCallback(() => {
-    const entry = getAboveNode(editor, {
-      match: { type },
-    });
-
-    if (entry) {
-      const [, path] = entry;
-
-      return getRangeBoundingClientRect(editor, {
-        anchor: getStartPoint(editor, path),
-        focus: getEndPoint(editor, path),
-      });
-    }
-
-    return getDOMSelectionBoundingClientRect();
-  }, [editor, type]);
-
-  const clickOutsideRef = useOnClickOutside(() => {
-    if (!isOpen) return;
-
-    api.media_embed.hideFloating();
-  });
-
-  const floating = useVirtualFloating(
-    mergeProps(
-      {
-        getBoundingClientRect,
-        open: isOpen,
-      },
-      floatingOptions
-    )
-  );
 
   const handleCancel = () => {
-    api.media_embed.hideFloating();
+    setOption('isFloatingOpen', false);
+    focusEditor(editor);
   };
 
   const inputRef = React.useRef<HTMLInputElement>(null);
@@ -92,12 +43,5 @@ export const useMediaFloatingToolbar = (
       onChange: (e: React.ChangeEvent<HTMLInputElement>) =>
         setOption('url', e.target.value),
     },
-    rootProps: {
-      ref: useComposedRef<HTMLElement | null>(
-        floating.refs.setFloating,
-        clickOutsideRef
-      ),
-      style: floating.style,
-    },
   };
 };

From 302eed803743725ab4c62269356e5727e667fecf Mon Sep 17 00:00:00 2001
From: Felix Feng <felixfeng33@gmail.com>
Date: Fri, 15 Nov 2024 10:09:17 +0800
Subject: [PATCH 20/34] history

---
 apps/www/src/lib/plate/create-plate-ui.ts     |  2 +
 .../default/example/playground-demo.tsx       |  3 +-
 .../plate-ui/fixed-toolbar-buttons.tsx        |  3 +-
 .../plate-ui/history-toolbar-button.tsx       | 56 +++++++++++++++++++
 .../default/plate-ui/redo-toolbar-button.tsx  | 32 -----------
 5 files changed, 60 insertions(+), 36 deletions(-)
 create mode 100644 apps/www/src/registry/default/plate-ui/history-toolbar-button.tsx
 delete mode 100644 apps/www/src/registry/default/plate-ui/redo-toolbar-button.tsx

diff --git a/apps/www/src/lib/plate/create-plate-ui.ts b/apps/www/src/lib/plate/create-plate-ui.ts
index e7e0b1c92c..fdb37aa1c2 100644
--- a/apps/www/src/lib/plate/create-plate-ui.ts
+++ b/apps/www/src/lib/plate/create-plate-ui.ts
@@ -83,6 +83,7 @@ import { LinkElement } from '@/registry/default/plate-ui/link-element';
 import { ListElement } from '@/registry/default/plate-ui/list-element';
 import { MediaEmbedElement } from '@/registry/default/plate-ui/media-embed-element';
 import { MediaFileElement } from '@/registry/default/plate-ui/media-file-element';
+import { MediaPlaceholderElement } from '@/registry/default/plate-ui/media-placeholder-element';
 import { MediaVideoElement } from '@/registry/default/plate-ui/media-video-element';
 import { MentionElement } from '@/registry/default/plate-ui/mention-element';
 import { MentionInputElement } from '@/registry/default/plate-ui/mention-input-element';
@@ -140,6 +141,7 @@ export const createPlateUI = ({
     [MentionPlugin.key]: MentionElement,
     [NumberedListPlugin.key]: withProps(ListElement, { variant: 'ol' }),
     [ParagraphPlugin.key]: ParagraphElement,
+    [PlaceholderPlugin.key]: MediaPlaceholderElement,
     [SlashInputPlugin.key]: SlashInputElement,
     [StrikethroughPlugin.key]: withProps(PlateLeaf, { as: 's' }),
     [SubscriptPlugin.key]: withProps(PlateLeaf, { as: 'sub' }),
diff --git a/apps/www/src/registry/default/example/playground-demo.tsx b/apps/www/src/registry/default/example/playground-demo.tsx
index 3a79108184..da1e9ab0ea 100644
--- a/apps/www/src/registry/default/example/playground-demo.tsx
+++ b/apps/www/src/registry/default/example/playground-demo.tsx
@@ -28,7 +28,6 @@ import { FixedToolbarPlugin } from '@/registry/default/components/editor/plugins
 import { FloatingToolbarPlugin } from '@/registry/default/components/editor/plugins/floating-toolbar-plugin';
 import { tabbablePlugin } from '@/registry/default/components/editor/plugins/tabbable-plugin';
 import { Editor, EditorContainer } from '@/registry/default/plate-ui/editor';
-import { MediaPlaceholderElement } from '@/registry/default/plate-ui/media-placeholder-element';
 
 import { usePlaygroundEnabled } from './usePlaygroundEnabled';
 
@@ -60,7 +59,7 @@ export const usePlaygroundEditor = (id: any = '') => {
       },
     }),
     SingleLinePlugin,
-    PlaceholderPlugin.withComponent(MediaPlaceholderElement),
+    PlaceholderPlugin,
     // Testing
     PlaywrightPlugin.configure({
       enabled: process.env.NODE_ENV !== 'production',
diff --git a/apps/www/src/registry/default/plate-ui/fixed-toolbar-buttons.tsx b/apps/www/src/registry/default/plate-ui/fixed-toolbar-buttons.tsx
index 0561a087a5..93cd8c6aa2 100644
--- a/apps/www/src/registry/default/plate-ui/fixed-toolbar-buttons.tsx
+++ b/apps/www/src/registry/default/plate-ui/fixed-toolbar-buttons.tsx
@@ -37,6 +37,7 @@ import { AlignDropdownMenu } from './align-dropdown-menu';
 import { ColorDropdownMenu } from './color-dropdown-menu';
 import { CommentToolbarButton } from './comment-toolbar-button';
 import { EmojiDropdownMenu } from './emoji-dropdown-menu';
+import { RedoToolbarButton, UndoToolbarButton } from './history-toolbar-button';
 import { IndentListToolbarButton } from './indent-list-toolbar-button';
 import { IndentTodoToolbarButton } from './indent-todo-toolbar-button';
 import { IndentToolbarButton } from './indent-toolbar-button';
@@ -48,12 +49,10 @@ import { MediaDropdownMenu } from './media-dropdown-menu';
 import { ModeDropdownMenu } from './mode-dropdown-menu';
 import { MoreDropdownMenu } from './more-dropdown-menu';
 import { OutdentToolbarButton } from './outdent-toolbar-button';
-import { RedoToolbarButton } from './redo-toolbar-button';
 import { TableDropdownMenu } from './table-dropdown-menu';
 import { ToggleToolbarButton } from './toggle-toolbar-button';
 import { ToolbarGroup } from './toolbar';
 import { TurnIntoDropdownMenu } from './turn-into-dropdown-menu';
-import { UndoToolbarButton } from './undo-toolbar-button';
 
 export function FixedToolbarButtons() {
   const readOnly = useEditorReadOnly();
diff --git a/apps/www/src/registry/default/plate-ui/history-toolbar-button.tsx b/apps/www/src/registry/default/plate-ui/history-toolbar-button.tsx
new file mode 100644
index 0000000000..f4260a8e64
--- /dev/null
+++ b/apps/www/src/registry/default/plate-ui/history-toolbar-button.tsx
@@ -0,0 +1,56 @@
+import React from 'react';
+
+import { useEditorRef, useEditorSelector } from '@udecode/plate-core/react';
+import { withRef } from '@udecode/react-utils';
+import { focusEditor } from '@udecode/slate-react';
+import { Redo2Icon, Undo2Icon } from 'lucide-react';
+
+import { ToolbarButton } from './toolbar';
+
+export const RedoToolbarButton = withRef<typeof ToolbarButton>((props, ref) => {
+  const editor = useEditorRef();
+  const disabled = useEditorSelector(
+    (editor) => editor.history.redos.length === 0,
+    []
+  );
+
+  return (
+    <ToolbarButton
+      ref={ref}
+      disabled={disabled}
+      onClick={(e) => {
+        e.preventDefault();
+        editor.redo();
+        focusEditor(editor);
+      }}
+      tooltip="Redo"
+      {...props}
+    >
+      <Redo2Icon />
+    </ToolbarButton>
+  );
+});
+
+export const UndoToolbarButton = withRef<typeof ToolbarButton>((props, ref) => {
+  const editor = useEditorRef();
+  const disabled = useEditorSelector(
+    (editor) => editor.history.undos.length === 0,
+    []
+  );
+
+  return (
+    <ToolbarButton
+      ref={ref}
+      disabled={disabled}
+      onClick={(e) => {
+        e.preventDefault();
+        editor.undo();
+        focusEditor(editor);
+      }}
+      tooltip="Undo"
+      {...props}
+    >
+      <Undo2Icon />
+    </ToolbarButton>
+  );
+});
diff --git a/apps/www/src/registry/default/plate-ui/redo-toolbar-button.tsx b/apps/www/src/registry/default/plate-ui/redo-toolbar-button.tsx
deleted file mode 100644
index 9e8de9cfb2..0000000000
--- a/apps/www/src/registry/default/plate-ui/redo-toolbar-button.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import React from 'react';
-
-import { useEditorRef, useEditorSelector } from '@udecode/plate-core/react';
-import { withRef } from '@udecode/react-utils';
-import { focusEditor } from '@udecode/slate-react';
-import { Redo2 } from 'lucide-react';
-
-import { ToolbarButton } from './toolbar';
-
-export const RedoToolbarButton = withRef<typeof ToolbarButton>((props, ref) => {
-  const editor = useEditorRef();
-  const redoAble = useEditorSelector(
-    (editor) => editor.history.redos.length > 0,
-    []
-  );
-
-  return (
-    <ToolbarButton
-      ref={ref}
-      disabled={!redoAble}
-      onMouseDown={(e) => {
-        e.preventDefault();
-        editor.redo();
-        focusEditor(editor);
-      }}
-      tooltip="Redo"
-      {...props}
-    >
-      <Redo2 />
-    </ToolbarButton>
-  );
-});

From 24f13de37b784bd111b16da49ad3669d9aa54b57 Mon Sep 17 00:00:00 2001
From: Felix Feng <felixfeng33@gmail.com>
Date: Fri, 15 Nov 2024 10:17:04 +0800
Subject: [PATCH 21/34] toast

---
 apps/www/src/lib/plate/create-plate-ui.ts     |  1 +
 .../editor/plugins/media-plugins.tsx          |  7 ++
 .../default/example/playground-demo.tsx       |  2 -
 .../src/registry/default/plate-ui/editor.tsx  |  4 --
 .../plate-ui/media-placeholder-element.tsx    | 61 ----------------
 .../default/plate-ui/media-upload-toast.tsx   | 69 +++++++++++++++++++
 .../default/plate-ui/undo-toolbar-button.tsx  | 32 ---------
 .../src/react/media/MediaEmbedPlugin.tsx      | 14 +---
 8 files changed, 80 insertions(+), 110 deletions(-)
 create mode 100644 apps/www/src/registry/default/plate-ui/media-upload-toast.tsx
 delete mode 100644 apps/www/src/registry/default/plate-ui/undo-toolbar-button.tsx

diff --git a/apps/www/src/lib/plate/create-plate-ui.ts b/apps/www/src/lib/plate/create-plate-ui.ts
index fdb37aa1c2..510dbe80a7 100644
--- a/apps/www/src/lib/plate/create-plate-ui.ts
+++ b/apps/www/src/lib/plate/create-plate-ui.ts
@@ -45,6 +45,7 @@ import {
   FilePlugin,
   ImagePlugin,
   MediaEmbedPlugin,
+  PlaceholderPlugin,
   VideoPlugin,
 } from '@udecode/plate-media/react';
 import {
diff --git a/apps/www/src/registry/default/components/editor/plugins/media-plugins.tsx b/apps/www/src/registry/default/components/editor/plugins/media-plugins.tsx
index d90023081e..cb023ce018 100644
--- a/apps/www/src/registry/default/components/editor/plugins/media-plugins.tsx
+++ b/apps/www/src/registry/default/components/editor/plugins/media-plugins.tsx
@@ -6,11 +6,13 @@ import {
   FilePlugin,
   ImagePlugin,
   MediaEmbedPlugin,
+  PlaceholderPlugin,
   VideoPlugin,
 } from '@udecode/plate-media/react';
 
 import { ImagePreview } from '@/registry/default/plate-ui/image-preview';
 import { MediaFloatingToolbar } from '@/registry/default/plate-ui/media-floating-toolbar';
+import { MediaUploadToast } from '@/registry/default/plate-ui/media-upload-toast';
 
 export const mediaPlugins = [
   ImagePlugin.extend({
@@ -28,4 +30,9 @@ export const mediaPlugins = [
   CaptionPlugin.configure({
     options: { plugins: [ImagePlugin, MediaEmbedPlugin] },
   }),
+  PlaceholderPlugin.configure({
+    render: {
+      afterEditable: () => <MediaUploadToast />,
+    },
+  }),
 ] as const;
diff --git a/apps/www/src/registry/default/example/playground-demo.tsx b/apps/www/src/registry/default/example/playground-demo.tsx
index da1e9ab0ea..fd5f3d76ba 100644
--- a/apps/www/src/registry/default/example/playground-demo.tsx
+++ b/apps/www/src/registry/default/example/playground-demo.tsx
@@ -10,7 +10,6 @@ import { Plate, usePlateEditor } from '@udecode/plate-common/react';
 import { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';
 import { HEADING_KEYS } from '@udecode/plate-heading';
 import { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';
-import { PlaceholderPlugin } from '@udecode/plate-media/react';
 import { NormalizeTypesPlugin } from '@udecode/plate-normalizers';
 import { PlaywrightPlugin } from '@udecode/plate-playwright';
 import { TablePlugin } from '@udecode/plate-table/react';
@@ -59,7 +58,6 @@ export const usePlaygroundEditor = (id: any = '') => {
       },
     }),
     SingleLinePlugin,
-    PlaceholderPlugin,
     // Testing
     PlaywrightPlugin.configure({
       enabled: process.env.NODE_ENV !== 'production',
diff --git a/apps/www/src/registry/default/plate-ui/editor.tsx b/apps/www/src/registry/default/plate-ui/editor.tsx
index 8825c1fb12..c17d66e8de 100644
--- a/apps/www/src/registry/default/plate-ui/editor.tsx
+++ b/apps/www/src/registry/default/plate-ui/editor.tsx
@@ -13,8 +13,6 @@ import {
 } from '@udecode/plate-common/react';
 import { cva } from 'class-variance-authority';
 
-import { useUploadErrorToast } from './media-placeholder-element';
-
 const editorContainerVariants = cva(
   'relative w-full cursor-text overflow-y-auto caret-primary selection:bg-brand/25 [&_.slate-selection-area]:border [&_.slate-selection-area]:border-brand/25 [&_.slate-selection-area]:bg-brand/15',
   {
@@ -39,8 +37,6 @@ export const EditorContainer = ({
   const editor = useEditorRef();
   const containerRef = useEditorContainerRef();
 
-  useUploadErrorToast();
-
   return (
     <div
       id={editor.uid}
diff --git a/apps/www/src/registry/default/plate-ui/media-placeholder-element.tsx b/apps/www/src/registry/default/plate-ui/media-placeholder-element.tsx
index 8d8ed691c2..bf3feedecc 100644
--- a/apps/www/src/registry/default/plate-ui/media-placeholder-element.tsx
+++ b/apps/www/src/registry/default/plate-ui/media-placeholder-element.tsx
@@ -9,7 +9,6 @@ import { cn } from '@udecode/cn';
 import {
   findNodePath,
   useEditorPlugin,
-  useEditorRef,
   withHOC,
   withRef,
 } from '@udecode/plate-common/react';
@@ -19,13 +18,11 @@ import {
   ImagePlugin,
   PlaceholderPlugin,
   PlaceholderProvider,
-  UploadErrorCode,
   VideoPlugin,
   updateUploadHistory,
 } from '@udecode/plate-media/react';
 import { insertNodes, removeNodes, withoutSavingHistory } from '@udecode/slate';
 import { AudioLines, FileUp, Film, ImageIcon } from 'lucide-react';
-import { toast } from 'sonner';
 import { useFilePicker } from 'use-file-picker';
 
 import { useUploadFile } from '../lib/uploadthing';
@@ -268,61 +265,3 @@ export function formatBytes(
       : (sizes[i] ?? 'Bytes')
   }`;
 }
-
-export const useUploadErrorToast = () => {
-  const editor = useEditorRef();
-
-  const uploadError = editor.useOption(PlaceholderPlugin, 'error');
-
-  useEffect(() => {
-    if (!uploadError) return;
-
-    const { code, data } = uploadError;
-
-    switch (code) {
-      case UploadErrorCode.INVALID_FILE_SIZE: {
-        toast.error(
-          `The size of files ${data.files
-            .map((f) => f.name)
-            .join(', ')} is invalid`
-        );
-
-        break;
-      }
-      case UploadErrorCode.INVALID_FILE_TYPE: {
-        toast.error(
-          `The type of files ${data.files
-            .map((f) => f.name)
-            .join(', ')} is invalid`
-        );
-
-        break;
-      }
-      case UploadErrorCode.TOO_LARGE: {
-        toast.error(
-          `The size of files ${data.files
-            .map((f) => f.name)
-            .join(', ')} is too large than ${data.maxFileSize}`
-        );
-
-        break;
-      }
-      case UploadErrorCode.TOO_LESS_FILES: {
-        toast.error(
-          `The mini um number of files is ${data.minFileCount} for ${data.fileType}`
-        );
-
-        break;
-      }
-      case UploadErrorCode.TOO_MANY_FILES: {
-        toast.error(
-          `The maximum number of files is ${data.maxFileCount} ${
-            data.fileType ? `for ${data.fileType}` : ''
-          }`
-        );
-
-        break;
-      }
-    }
-  }, [uploadError]);
-};
diff --git a/apps/www/src/registry/default/plate-ui/media-upload-toast.tsx b/apps/www/src/registry/default/plate-ui/media-upload-toast.tsx
new file mode 100644
index 0000000000..9ac3d1faea
--- /dev/null
+++ b/apps/www/src/registry/default/plate-ui/media-upload-toast.tsx
@@ -0,0 +1,69 @@
+import { useEffect } from 'react';
+
+import { useEditorRef } from '@udecode/plate-core/react';
+import { PlaceholderPlugin, UploadErrorCode } from '@udecode/plate-media/react';
+import { toast } from 'sonner';
+
+export const useUploadErrorToast = () => {
+  const editor = useEditorRef();
+
+  const uploadError = editor.useOption(PlaceholderPlugin, 'error');
+
+  useEffect(() => {
+    if (!uploadError) return;
+
+    const { code, data } = uploadError;
+
+    switch (code) {
+      case UploadErrorCode.INVALID_FILE_SIZE: {
+        toast.error(
+          `The size of files ${data.files
+            .map((f) => f.name)
+            .join(', ')} is invalid`
+        );
+
+        break;
+      }
+      case UploadErrorCode.INVALID_FILE_TYPE: {
+        toast.error(
+          `The type of files ${data.files
+            .map((f) => f.name)
+            .join(', ')} is invalid`
+        );
+
+        break;
+      }
+      case UploadErrorCode.TOO_LARGE: {
+        toast.error(
+          `The size of files ${data.files
+            .map((f) => f.name)
+            .join(', ')} is too large than ${data.maxFileSize}`
+        );
+
+        break;
+      }
+      case UploadErrorCode.TOO_LESS_FILES: {
+        toast.error(
+          `The mini um number of files is ${data.minFileCount} for ${data.fileType}`
+        );
+
+        break;
+      }
+      case UploadErrorCode.TOO_MANY_FILES: {
+        toast.error(
+          `The maximum number of files is ${data.maxFileCount} ${
+            data.fileType ? `for ${data.fileType}` : ''
+          }`
+        );
+
+        break;
+      }
+    }
+  }, [uploadError]);
+};
+
+export const MediaUploadToast = () => {
+  useUploadErrorToast();
+
+  return null;
+};
diff --git a/apps/www/src/registry/default/plate-ui/undo-toolbar-button.tsx b/apps/www/src/registry/default/plate-ui/undo-toolbar-button.tsx
deleted file mode 100644
index 80b01bd137..0000000000
--- a/apps/www/src/registry/default/plate-ui/undo-toolbar-button.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import React from 'react';
-
-import { useEditorRef, useEditorSelector } from '@udecode/plate-core/react';
-import { withRef } from '@udecode/react-utils';
-import { focusEditor } from '@udecode/slate-react';
-import { Undo2 } from 'lucide-react';
-
-import { ToolbarButton } from './toolbar';
-
-export const UndoToolbarButton = withRef<typeof ToolbarButton>((props, ref) => {
-  const editor = useEditorRef();
-  const undoAble = useEditorSelector(
-    (editor) => editor.history.undos.length > 0,
-    []
-  );
-
-  return (
-    <ToolbarButton
-      ref={ref}
-      disabled={!undoAble}
-      onMouseDown={(e) => {
-        e.preventDefault();
-        editor.undo();
-        focusEditor(editor);
-      }}
-      tooltip="Undo"
-      {...props}
-    >
-      <Undo2 />
-    </ToolbarButton>
-  );
-});
diff --git a/packages/media/src/react/media/MediaEmbedPlugin.tsx b/packages/media/src/react/media/MediaEmbedPlugin.tsx
index 3ebe9e15a6..054e89b66b 100644
--- a/packages/media/src/react/media/MediaEmbedPlugin.tsx
+++ b/packages/media/src/react/media/MediaEmbedPlugin.tsx
@@ -1,6 +1,6 @@
 import type { ExtendConfig } from '@udecode/plate-common';
 
-import { toTPlatePlugin } from '@udecode/plate-common/react';
+import { focusEditor, toTPlatePlugin } from '@udecode/plate-common/react';
 
 import {
   type BaseMediaEmbedConfig,
@@ -14,17 +14,9 @@ type MediaEmbedConfig = ExtendConfig<
     isFloatingOpen?: boolean;
     mediaType?: string | null;
     url?: string;
-  },
-  {
-    media_embed: MediaEmbedApi;
   }
 >;
 
-export type MediaEmbedApi = {
-  hideFloating: () => void;
-  openFloating: (mediaType: string) => void;
-};
-
 export const MediaEmbedPlugin = toTPlatePlugin<MediaEmbedConfig>(
   BaseMediaEmbedPlugin,
   {
@@ -34,7 +26,7 @@ export const MediaEmbedPlugin = toTPlatePlugin<MediaEmbedConfig>(
       url: '',
     },
   }
-).extendTransforms(({ api, editor, getOptions, setOptions }) => ({
+).extendTransforms(({ editor, getOptions, setOptions }) => ({
   embed: (url: string) => {
     setOptions({ isFloatingOpen: false, url });
 
@@ -44,6 +36,6 @@ export const MediaEmbedPlugin = toTPlatePlugin<MediaEmbedConfig>(
 
     insertImage(editor, url);
 
-    api.media_embed.hideFloating();
+    focusEditor(editor);
   },
 }));

From 323ec02dc1107c8a1578c8917d3f60f1acfbbcfc Mon Sep 17 00:00:00 2001
From: Felix Feng <felixfeng33@gmail.com>
Date: Fri, 15 Nov 2024 10:19:46 +0800
Subject: [PATCH 22/34] fix

---
 apps/www/public/r/styles/default/ai-demo.json |  2 +-
 .../public/r/styles/default/align-demo.json   |  2 +-
 .../r/styles/default/basic-elements-demo.json |  2 +-
 .../r/styles/default/basic-marks-demo.json    |  2 +-
 .../r/styles/default/basic-nodes-demo.json    |  2 +-
 .../r/styles/default/block-menu-demo.json     |  2 +-
 .../styles/default/block-selection-demo.json  |  2 +-
 .../public/r/styles/default/column-demo.json  |  2 +-
 .../public/r/styles/default/comment-demo.json |  2 +-
 .../public/r/styles/default/copilot-demo.json |  2 +-
 .../public/r/styles/default/date-demo.json    |  2 +-
 .../www/public/r/styles/default/dnd-demo.json |  2 +-
 apps/www/public/r/styles/default/editor.json  |  2 +-
 .../public/r/styles/default/emoji-demo.json   |  2 +-
 .../r/styles/default/excalidraw-demo.json     |  2 +-
 .../styles/default/fixed-toolbar-buttons.json |  2 +-
 .../styles/default/floating-toolbar-demo.json |  2 +-
 .../public/r/styles/default/font-demo.json    |  2 +-
 .../r/styles/default/highlight-demo.json      |  2 +-
 apps/www/public/r/styles/default/hr-demo.json |  2 +-
 .../public/r/styles/default/indent-demo.json  |  2 +-
 .../www/public/r/styles/default/kbd-demo.json |  2 +-
 .../r/styles/default/line-height-demo.json    |  2 +-
 .../public/r/styles/default/link-demo.json    |  2 +-
 .../public/r/styles/default/list-demo.json    |  2 +-
 .../public/r/styles/default/media-demo.json   |  2 +-
 .../r/styles/default/media-dropdown-menu.json |  2 +-
 .../r/styles/default/media-plugins.json       |  2 +-
 .../public/r/styles/default/mention-demo.json |  2 +-
 .../public/r/styles/default/mode-demo.json    |  2 +-
 .../r/styles/default/placeholder-demo.json    |  2 +-
 .../r/styles/default/playground-demo.json     |  2 +-
 .../r/styles/default/resizable-demo.json      |  2 +-
 .../r/styles/default/slash-command-demo.json  |  2 +-
 .../public/r/styles/default/table-demo.json   |  2 +-
 .../www/public/r/styles/default/toc-demo.json |  2 +-
 .../public/r/styles/default/toggle-demo.json  |  2 +-
 .../public/r/styles/default/toolbar-demo.json |  2 +-
 apps/www/public/r/styles/default/toolbar.json |  2 +-
 .../public/r/styles/default/upload-demo.json  |  2 +-
 apps/www/src/__registry__/index.tsx           | 12 ------------
 .../registry/default/example/upload-demo.tsx  | 19 -------------------
 apps/www/src/registry/registry-examples.ts    |  6 ------
 43 files changed, 40 insertions(+), 77 deletions(-)
 delete mode 100644 apps/www/src/registry/default/example/upload-demo.tsx

diff --git a/apps/www/public/r/styles/default/ai-demo.json b/apps/www/public/r/styles/default/ai-demo.json
index a4896c42f9..4e55a9f401 100644
--- a/apps/www/public/r/styles/default/ai-demo.json
+++ b/apps/www/public/r/styles/default/ai-demo.json
@@ -9,7 +9,7 @@
   },
   "files": [
     {
-      "content": "'use client';\n\nimport React from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { PlaceholderPlugin } from '@udecode/plate-media/react';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { TablePlugin } from '@udecode/plate-table/react';\n\nimport { settingsStore } from '@/components/context/settings-store';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { autoformatPlugin as autoformatListPlugin } from '@/components/editor/plugins/autoformat-list-plugin';\nimport { autoformatPlugin } from '@/components/editor/plugins/autoformat-plugin';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { FixedToolbarListPlugin } from '@/components/editor/plugins/fixed-toolbar-list-plugin';\nimport { FixedToolbarPlugin } from '@/components/editor/plugins/fixed-toolbar-plugin';\nimport { FloatingToolbarPlugin } from '@/components/editor/plugins/floating-toolbar-plugin';\nimport { tabbablePlugin } from '@/components/editor/plugins/tabbable-plugin';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { MediaPlaceholderElement } from '@/components/plate-ui/media-placeholder-element';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '') => {\n  const overridePlugins = usePlaygroundEnabled(id);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  const plugins: any[] = [\n    ...copilotPlugins,\n    ...editorPlugins,\n    id === 'list' ? FixedToolbarListPlugin : FixedToolbarPlugin,\n    FloatingToolbarPlugin,\n\n    id === 'list' ? autoformatListPlugin : autoformatPlugin,\n    TablePlugin.configure({\n      options: {\n        enableMerging: id === 'tableMerge',\n      },\n    }),\n    ListPlugin,\n    TodoListPlugin,\n    ExcalidrawPlugin,\n    NormalizeTypesPlugin.configure({\n      options: {\n        rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n      },\n    }),\n    SingleLinePlugin,\n    PlaceholderPlugin.withComponent(MediaPlaceholderElement),\n    // Testing\n    PlaywrightPlugin.configure({\n      enabled: process.env.NODE_ENV !== 'production',\n    }),\n  ];\n\n  if (id === 'tabbable') {\n    plugins.push(tabbablePlugin);\n  }\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins,\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const editor = usePlaygroundEditor(id);\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <EditorContainer className={cn(id && 'h-[500px]', className)}>\n          <Editor\n            variant=\"demo\"\n            className={cn(id ? 'h-[calc(100%-37px)] pb-8' : 'pb-[20vh]')}\n            spellCheck={false}\n          />\n        </EditorContainer>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
+      "content": "'use client';\n\nimport React from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { TablePlugin } from '@udecode/plate-table/react';\n\nimport { settingsStore } from '@/components/context/settings-store';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { autoformatPlugin as autoformatListPlugin } from '@/components/editor/plugins/autoformat-list-plugin';\nimport { autoformatPlugin } from '@/components/editor/plugins/autoformat-plugin';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { FixedToolbarListPlugin } from '@/components/editor/plugins/fixed-toolbar-list-plugin';\nimport { FixedToolbarPlugin } from '@/components/editor/plugins/fixed-toolbar-plugin';\nimport { FloatingToolbarPlugin } from '@/components/editor/plugins/floating-toolbar-plugin';\nimport { tabbablePlugin } from '@/components/editor/plugins/tabbable-plugin';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '') => {\n  const overridePlugins = usePlaygroundEnabled(id);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  const plugins: any[] = [\n    ...copilotPlugins,\n    ...editorPlugins,\n    id === 'list' ? FixedToolbarListPlugin : FixedToolbarPlugin,\n    FloatingToolbarPlugin,\n\n    id === 'list' ? autoformatListPlugin : autoformatPlugin,\n    TablePlugin.configure({\n      options: {\n        enableMerging: id === 'tableMerge',\n      },\n    }),\n    ListPlugin,\n    TodoListPlugin,\n    ExcalidrawPlugin,\n    NormalizeTypesPlugin.configure({\n      options: {\n        rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n      },\n    }),\n    SingleLinePlugin,\n    // Testing\n    PlaywrightPlugin.configure({\n      enabled: process.env.NODE_ENV !== 'production',\n    }),\n  ];\n\n  if (id === 'tabbable') {\n    plugins.push(tabbablePlugin);\n  }\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins,\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const editor = usePlaygroundEditor(id);\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <EditorContainer className={cn(id && 'h-[500px]', className)}>\n          <Editor\n            variant=\"demo\"\n            className={cn(id ? 'h-[calc(100%-37px)] pb-8' : 'pb-[20vh]')}\n            spellCheck={false}\n          />\n        </EditorContainer>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
       "path": "example/playground-demo.tsx",
       "target": "components/playground-demo.tsx",
       "type": "registry:example"
diff --git a/apps/www/public/r/styles/default/align-demo.json b/apps/www/public/r/styles/default/align-demo.json
index c81a4bbca8..21f55947ac 100644
--- a/apps/www/public/r/styles/default/align-demo.json
+++ b/apps/www/public/r/styles/default/align-demo.json
@@ -4,7 +4,7 @@
   },
   "files": [
     {
-      "content": "'use client';\n\nimport React from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { PlaceholderPlugin } from '@udecode/plate-media/react';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { TablePlugin } from '@udecode/plate-table/react';\n\nimport { settingsStore } from '@/components/context/settings-store';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { autoformatPlugin as autoformatListPlugin } from '@/components/editor/plugins/autoformat-list-plugin';\nimport { autoformatPlugin } from '@/components/editor/plugins/autoformat-plugin';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { FixedToolbarListPlugin } from '@/components/editor/plugins/fixed-toolbar-list-plugin';\nimport { FixedToolbarPlugin } from '@/components/editor/plugins/fixed-toolbar-plugin';\nimport { FloatingToolbarPlugin } from '@/components/editor/plugins/floating-toolbar-plugin';\nimport { tabbablePlugin } from '@/components/editor/plugins/tabbable-plugin';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { MediaPlaceholderElement } from '@/components/plate-ui/media-placeholder-element';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '') => {\n  const overridePlugins = usePlaygroundEnabled(id);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  const plugins: any[] = [\n    ...copilotPlugins,\n    ...editorPlugins,\n    id === 'list' ? FixedToolbarListPlugin : FixedToolbarPlugin,\n    FloatingToolbarPlugin,\n\n    id === 'list' ? autoformatListPlugin : autoformatPlugin,\n    TablePlugin.configure({\n      options: {\n        enableMerging: id === 'tableMerge',\n      },\n    }),\n    ListPlugin,\n    TodoListPlugin,\n    ExcalidrawPlugin,\n    NormalizeTypesPlugin.configure({\n      options: {\n        rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n      },\n    }),\n    SingleLinePlugin,\n    PlaceholderPlugin.withComponent(MediaPlaceholderElement),\n    // Testing\n    PlaywrightPlugin.configure({\n      enabled: process.env.NODE_ENV !== 'production',\n    }),\n  ];\n\n  if (id === 'tabbable') {\n    plugins.push(tabbablePlugin);\n  }\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins,\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const editor = usePlaygroundEditor(id);\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <EditorContainer className={cn(id && 'h-[500px]', className)}>\n          <Editor\n            variant=\"demo\"\n            className={cn(id ? 'h-[calc(100%-37px)] pb-8' : 'pb-[20vh]')}\n            spellCheck={false}\n          />\n        </EditorContainer>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
+      "content": "'use client';\n\nimport React from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { TablePlugin } from '@udecode/plate-table/react';\n\nimport { settingsStore } from '@/components/context/settings-store';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { autoformatPlugin as autoformatListPlugin } from '@/components/editor/plugins/autoformat-list-plugin';\nimport { autoformatPlugin } from '@/components/editor/plugins/autoformat-plugin';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { FixedToolbarListPlugin } from '@/components/editor/plugins/fixed-toolbar-list-plugin';\nimport { FixedToolbarPlugin } from '@/components/editor/plugins/fixed-toolbar-plugin';\nimport { FloatingToolbarPlugin } from '@/components/editor/plugins/floating-toolbar-plugin';\nimport { tabbablePlugin } from '@/components/editor/plugins/tabbable-plugin';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '') => {\n  const overridePlugins = usePlaygroundEnabled(id);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  const plugins: any[] = [\n    ...copilotPlugins,\n    ...editorPlugins,\n    id === 'list' ? FixedToolbarListPlugin : FixedToolbarPlugin,\n    FloatingToolbarPlugin,\n\n    id === 'list' ? autoformatListPlugin : autoformatPlugin,\n    TablePlugin.configure({\n      options: {\n        enableMerging: id === 'tableMerge',\n      },\n    }),\n    ListPlugin,\n    TodoListPlugin,\n    ExcalidrawPlugin,\n    NormalizeTypesPlugin.configure({\n      options: {\n        rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n      },\n    }),\n    SingleLinePlugin,\n    // Testing\n    PlaywrightPlugin.configure({\n      enabled: process.env.NODE_ENV !== 'production',\n    }),\n  ];\n\n  if (id === 'tabbable') {\n    plugins.push(tabbablePlugin);\n  }\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins,\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const editor = usePlaygroundEditor(id);\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <EditorContainer className={cn(id && 'h-[500px]', className)}>\n          <Editor\n            variant=\"demo\"\n            className={cn(id ? 'h-[calc(100%-37px)] pb-8' : 'pb-[20vh]')}\n            spellCheck={false}\n          />\n        </EditorContainer>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
       "path": "example/playground-demo.tsx",
       "target": "components/playground-demo.tsx",
       "type": "registry:example"
diff --git a/apps/www/public/r/styles/default/basic-elements-demo.json b/apps/www/public/r/styles/default/basic-elements-demo.json
index f4efe8772b..412e1dc5a1 100644
--- a/apps/www/public/r/styles/default/basic-elements-demo.json
+++ b/apps/www/public/r/styles/default/basic-elements-demo.json
@@ -4,7 +4,7 @@
   },
   "files": [
     {
-      "content": "'use client';\n\nimport React from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { PlaceholderPlugin } from '@udecode/plate-media/react';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { TablePlugin } from '@udecode/plate-table/react';\n\nimport { settingsStore } from '@/components/context/settings-store';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { autoformatPlugin as autoformatListPlugin } from '@/components/editor/plugins/autoformat-list-plugin';\nimport { autoformatPlugin } from '@/components/editor/plugins/autoformat-plugin';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { FixedToolbarListPlugin } from '@/components/editor/plugins/fixed-toolbar-list-plugin';\nimport { FixedToolbarPlugin } from '@/components/editor/plugins/fixed-toolbar-plugin';\nimport { FloatingToolbarPlugin } from '@/components/editor/plugins/floating-toolbar-plugin';\nimport { tabbablePlugin } from '@/components/editor/plugins/tabbable-plugin';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { MediaPlaceholderElement } from '@/components/plate-ui/media-placeholder-element';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '') => {\n  const overridePlugins = usePlaygroundEnabled(id);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  const plugins: any[] = [\n    ...copilotPlugins,\n    ...editorPlugins,\n    id === 'list' ? FixedToolbarListPlugin : FixedToolbarPlugin,\n    FloatingToolbarPlugin,\n\n    id === 'list' ? autoformatListPlugin : autoformatPlugin,\n    TablePlugin.configure({\n      options: {\n        enableMerging: id === 'tableMerge',\n      },\n    }),\n    ListPlugin,\n    TodoListPlugin,\n    ExcalidrawPlugin,\n    NormalizeTypesPlugin.configure({\n      options: {\n        rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n      },\n    }),\n    SingleLinePlugin,\n    PlaceholderPlugin.withComponent(MediaPlaceholderElement),\n    // Testing\n    PlaywrightPlugin.configure({\n      enabled: process.env.NODE_ENV !== 'production',\n    }),\n  ];\n\n  if (id === 'tabbable') {\n    plugins.push(tabbablePlugin);\n  }\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins,\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const editor = usePlaygroundEditor(id);\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <EditorContainer className={cn(id && 'h-[500px]', className)}>\n          <Editor\n            variant=\"demo\"\n            className={cn(id ? 'h-[calc(100%-37px)] pb-8' : 'pb-[20vh]')}\n            spellCheck={false}\n          />\n        </EditorContainer>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
+      "content": "'use client';\n\nimport React from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { TablePlugin } from '@udecode/plate-table/react';\n\nimport { settingsStore } from '@/components/context/settings-store';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { autoformatPlugin as autoformatListPlugin } from '@/components/editor/plugins/autoformat-list-plugin';\nimport { autoformatPlugin } from '@/components/editor/plugins/autoformat-plugin';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { FixedToolbarListPlugin } from '@/components/editor/plugins/fixed-toolbar-list-plugin';\nimport { FixedToolbarPlugin } from '@/components/editor/plugins/fixed-toolbar-plugin';\nimport { FloatingToolbarPlugin } from '@/components/editor/plugins/floating-toolbar-plugin';\nimport { tabbablePlugin } from '@/components/editor/plugins/tabbable-plugin';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '') => {\n  const overridePlugins = usePlaygroundEnabled(id);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  const plugins: any[] = [\n    ...copilotPlugins,\n    ...editorPlugins,\n    id === 'list' ? FixedToolbarListPlugin : FixedToolbarPlugin,\n    FloatingToolbarPlugin,\n\n    id === 'list' ? autoformatListPlugin : autoformatPlugin,\n    TablePlugin.configure({\n      options: {\n        enableMerging: id === 'tableMerge',\n      },\n    }),\n    ListPlugin,\n    TodoListPlugin,\n    ExcalidrawPlugin,\n    NormalizeTypesPlugin.configure({\n      options: {\n        rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n      },\n    }),\n    SingleLinePlugin,\n    // Testing\n    PlaywrightPlugin.configure({\n      enabled: process.env.NODE_ENV !== 'production',\n    }),\n  ];\n\n  if (id === 'tabbable') {\n    plugins.push(tabbablePlugin);\n  }\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins,\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const editor = usePlaygroundEditor(id);\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <EditorContainer className={cn(id && 'h-[500px]', className)}>\n          <Editor\n            variant=\"demo\"\n            className={cn(id ? 'h-[calc(100%-37px)] pb-8' : 'pb-[20vh]')}\n            spellCheck={false}\n          />\n        </EditorContainer>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
       "path": "example/playground-demo.tsx",
       "target": "components/playground-demo.tsx",
       "type": "registry:example"
diff --git a/apps/www/public/r/styles/default/basic-marks-demo.json b/apps/www/public/r/styles/default/basic-marks-demo.json
index 3b164047f1..105775ad0e 100644
--- a/apps/www/public/r/styles/default/basic-marks-demo.json
+++ b/apps/www/public/r/styles/default/basic-marks-demo.json
@@ -4,7 +4,7 @@
   },
   "files": [
     {
-      "content": "'use client';\n\nimport React from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { PlaceholderPlugin } from '@udecode/plate-media/react';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { TablePlugin } from '@udecode/plate-table/react';\n\nimport { settingsStore } from '@/components/context/settings-store';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { autoformatPlugin as autoformatListPlugin } from '@/components/editor/plugins/autoformat-list-plugin';\nimport { autoformatPlugin } from '@/components/editor/plugins/autoformat-plugin';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { FixedToolbarListPlugin } from '@/components/editor/plugins/fixed-toolbar-list-plugin';\nimport { FixedToolbarPlugin } from '@/components/editor/plugins/fixed-toolbar-plugin';\nimport { FloatingToolbarPlugin } from '@/components/editor/plugins/floating-toolbar-plugin';\nimport { tabbablePlugin } from '@/components/editor/plugins/tabbable-plugin';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { MediaPlaceholderElement } from '@/components/plate-ui/media-placeholder-element';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '') => {\n  const overridePlugins = usePlaygroundEnabled(id);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  const plugins: any[] = [\n    ...copilotPlugins,\n    ...editorPlugins,\n    id === 'list' ? FixedToolbarListPlugin : FixedToolbarPlugin,\n    FloatingToolbarPlugin,\n\n    id === 'list' ? autoformatListPlugin : autoformatPlugin,\n    TablePlugin.configure({\n      options: {\n        enableMerging: id === 'tableMerge',\n      },\n    }),\n    ListPlugin,\n    TodoListPlugin,\n    ExcalidrawPlugin,\n    NormalizeTypesPlugin.configure({\n      options: {\n        rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n      },\n    }),\n    SingleLinePlugin,\n    PlaceholderPlugin.withComponent(MediaPlaceholderElement),\n    // Testing\n    PlaywrightPlugin.configure({\n      enabled: process.env.NODE_ENV !== 'production',\n    }),\n  ];\n\n  if (id === 'tabbable') {\n    plugins.push(tabbablePlugin);\n  }\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins,\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const editor = usePlaygroundEditor(id);\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <EditorContainer className={cn(id && 'h-[500px]', className)}>\n          <Editor\n            variant=\"demo\"\n            className={cn(id ? 'h-[calc(100%-37px)] pb-8' : 'pb-[20vh]')}\n            spellCheck={false}\n          />\n        </EditorContainer>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
+      "content": "'use client';\n\nimport React from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { TablePlugin } from '@udecode/plate-table/react';\n\nimport { settingsStore } from '@/components/context/settings-store';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { autoformatPlugin as autoformatListPlugin } from '@/components/editor/plugins/autoformat-list-plugin';\nimport { autoformatPlugin } from '@/components/editor/plugins/autoformat-plugin';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { FixedToolbarListPlugin } from '@/components/editor/plugins/fixed-toolbar-list-plugin';\nimport { FixedToolbarPlugin } from '@/components/editor/plugins/fixed-toolbar-plugin';\nimport { FloatingToolbarPlugin } from '@/components/editor/plugins/floating-toolbar-plugin';\nimport { tabbablePlugin } from '@/components/editor/plugins/tabbable-plugin';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '') => {\n  const overridePlugins = usePlaygroundEnabled(id);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  const plugins: any[] = [\n    ...copilotPlugins,\n    ...editorPlugins,\n    id === 'list' ? FixedToolbarListPlugin : FixedToolbarPlugin,\n    FloatingToolbarPlugin,\n\n    id === 'list' ? autoformatListPlugin : autoformatPlugin,\n    TablePlugin.configure({\n      options: {\n        enableMerging: id === 'tableMerge',\n      },\n    }),\n    ListPlugin,\n    TodoListPlugin,\n    ExcalidrawPlugin,\n    NormalizeTypesPlugin.configure({\n      options: {\n        rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n      },\n    }),\n    SingleLinePlugin,\n    // Testing\n    PlaywrightPlugin.configure({\n      enabled: process.env.NODE_ENV !== 'production',\n    }),\n  ];\n\n  if (id === 'tabbable') {\n    plugins.push(tabbablePlugin);\n  }\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins,\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const editor = usePlaygroundEditor(id);\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <EditorContainer className={cn(id && 'h-[500px]', className)}>\n          <Editor\n            variant=\"demo\"\n            className={cn(id ? 'h-[calc(100%-37px)] pb-8' : 'pb-[20vh]')}\n            spellCheck={false}\n          />\n        </EditorContainer>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
       "path": "example/playground-demo.tsx",
       "target": "components/playground-demo.tsx",
       "type": "registry:example"
diff --git a/apps/www/public/r/styles/default/basic-nodes-demo.json b/apps/www/public/r/styles/default/basic-nodes-demo.json
index 60a4019cb4..da24a14476 100644
--- a/apps/www/public/r/styles/default/basic-nodes-demo.json
+++ b/apps/www/public/r/styles/default/basic-nodes-demo.json
@@ -8,7 +8,7 @@
   },
   "files": [
     {
-      "content": "'use client';\n\nimport React from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { PlaceholderPlugin } from '@udecode/plate-media/react';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { TablePlugin } from '@udecode/plate-table/react';\n\nimport { settingsStore } from '@/components/context/settings-store';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { autoformatPlugin as autoformatListPlugin } from '@/components/editor/plugins/autoformat-list-plugin';\nimport { autoformatPlugin } from '@/components/editor/plugins/autoformat-plugin';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { FixedToolbarListPlugin } from '@/components/editor/plugins/fixed-toolbar-list-plugin';\nimport { FixedToolbarPlugin } from '@/components/editor/plugins/fixed-toolbar-plugin';\nimport { FloatingToolbarPlugin } from '@/components/editor/plugins/floating-toolbar-plugin';\nimport { tabbablePlugin } from '@/components/editor/plugins/tabbable-plugin';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { MediaPlaceholderElement } from '@/components/plate-ui/media-placeholder-element';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '') => {\n  const overridePlugins = usePlaygroundEnabled(id);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  const plugins: any[] = [\n    ...copilotPlugins,\n    ...editorPlugins,\n    id === 'list' ? FixedToolbarListPlugin : FixedToolbarPlugin,\n    FloatingToolbarPlugin,\n\n    id === 'list' ? autoformatListPlugin : autoformatPlugin,\n    TablePlugin.configure({\n      options: {\n        enableMerging: id === 'tableMerge',\n      },\n    }),\n    ListPlugin,\n    TodoListPlugin,\n    ExcalidrawPlugin,\n    NormalizeTypesPlugin.configure({\n      options: {\n        rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n      },\n    }),\n    SingleLinePlugin,\n    PlaceholderPlugin.withComponent(MediaPlaceholderElement),\n    // Testing\n    PlaywrightPlugin.configure({\n      enabled: process.env.NODE_ENV !== 'production',\n    }),\n  ];\n\n  if (id === 'tabbable') {\n    plugins.push(tabbablePlugin);\n  }\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins,\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const editor = usePlaygroundEditor(id);\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <EditorContainer className={cn(id && 'h-[500px]', className)}>\n          <Editor\n            variant=\"demo\"\n            className={cn(id ? 'h-[calc(100%-37px)] pb-8' : 'pb-[20vh]')}\n            spellCheck={false}\n          />\n        </EditorContainer>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
+      "content": "'use client';\n\nimport React from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { TablePlugin } from '@udecode/plate-table/react';\n\nimport { settingsStore } from '@/components/context/settings-store';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { autoformatPlugin as autoformatListPlugin } from '@/components/editor/plugins/autoformat-list-plugin';\nimport { autoformatPlugin } from '@/components/editor/plugins/autoformat-plugin';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { FixedToolbarListPlugin } from '@/components/editor/plugins/fixed-toolbar-list-plugin';\nimport { FixedToolbarPlugin } from '@/components/editor/plugins/fixed-toolbar-plugin';\nimport { FloatingToolbarPlugin } from '@/components/editor/plugins/floating-toolbar-plugin';\nimport { tabbablePlugin } from '@/components/editor/plugins/tabbable-plugin';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '') => {\n  const overridePlugins = usePlaygroundEnabled(id);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  const plugins: any[] = [\n    ...copilotPlugins,\n    ...editorPlugins,\n    id === 'list' ? FixedToolbarListPlugin : FixedToolbarPlugin,\n    FloatingToolbarPlugin,\n\n    id === 'list' ? autoformatListPlugin : autoformatPlugin,\n    TablePlugin.configure({\n      options: {\n        enableMerging: id === 'tableMerge',\n      },\n    }),\n    ListPlugin,\n    TodoListPlugin,\n    ExcalidrawPlugin,\n    NormalizeTypesPlugin.configure({\n      options: {\n        rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n      },\n    }),\n    SingleLinePlugin,\n    // Testing\n    PlaywrightPlugin.configure({\n      enabled: process.env.NODE_ENV !== 'production',\n    }),\n  ];\n\n  if (id === 'tabbable') {\n    plugins.push(tabbablePlugin);\n  }\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins,\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const editor = usePlaygroundEditor(id);\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <EditorContainer className={cn(id && 'h-[500px]', className)}>\n          <Editor\n            variant=\"demo\"\n            className={cn(id ? 'h-[calc(100%-37px)] pb-8' : 'pb-[20vh]')}\n            spellCheck={false}\n          />\n        </EditorContainer>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
       "path": "example/playground-demo.tsx",
       "target": "components/playground-demo.tsx",
       "type": "registry:example"
diff --git a/apps/www/public/r/styles/default/block-menu-demo.json b/apps/www/public/r/styles/default/block-menu-demo.json
index 31962b2388..f9180a3313 100644
--- a/apps/www/public/r/styles/default/block-menu-demo.json
+++ b/apps/www/public/r/styles/default/block-menu-demo.json
@@ -4,7 +4,7 @@
   },
   "files": [
     {
-      "content": "'use client';\n\nimport React from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { PlaceholderPlugin } from '@udecode/plate-media/react';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { TablePlugin } from '@udecode/plate-table/react';\n\nimport { settingsStore } from '@/components/context/settings-store';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { autoformatPlugin as autoformatListPlugin } from '@/components/editor/plugins/autoformat-list-plugin';\nimport { autoformatPlugin } from '@/components/editor/plugins/autoformat-plugin';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { FixedToolbarListPlugin } from '@/components/editor/plugins/fixed-toolbar-list-plugin';\nimport { FixedToolbarPlugin } from '@/components/editor/plugins/fixed-toolbar-plugin';\nimport { FloatingToolbarPlugin } from '@/components/editor/plugins/floating-toolbar-plugin';\nimport { tabbablePlugin } from '@/components/editor/plugins/tabbable-plugin';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { MediaPlaceholderElement } from '@/components/plate-ui/media-placeholder-element';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '') => {\n  const overridePlugins = usePlaygroundEnabled(id);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  const plugins: any[] = [\n    ...copilotPlugins,\n    ...editorPlugins,\n    id === 'list' ? FixedToolbarListPlugin : FixedToolbarPlugin,\n    FloatingToolbarPlugin,\n\n    id === 'list' ? autoformatListPlugin : autoformatPlugin,\n    TablePlugin.configure({\n      options: {\n        enableMerging: id === 'tableMerge',\n      },\n    }),\n    ListPlugin,\n    TodoListPlugin,\n    ExcalidrawPlugin,\n    NormalizeTypesPlugin.configure({\n      options: {\n        rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n      },\n    }),\n    SingleLinePlugin,\n    PlaceholderPlugin.withComponent(MediaPlaceholderElement),\n    // Testing\n    PlaywrightPlugin.configure({\n      enabled: process.env.NODE_ENV !== 'production',\n    }),\n  ];\n\n  if (id === 'tabbable') {\n    plugins.push(tabbablePlugin);\n  }\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins,\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const editor = usePlaygroundEditor(id);\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <EditorContainer className={cn(id && 'h-[500px]', className)}>\n          <Editor\n            variant=\"demo\"\n            className={cn(id ? 'h-[calc(100%-37px)] pb-8' : 'pb-[20vh]')}\n            spellCheck={false}\n          />\n        </EditorContainer>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
+      "content": "'use client';\n\nimport React from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { TablePlugin } from '@udecode/plate-table/react';\n\nimport { settingsStore } from '@/components/context/settings-store';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { autoformatPlugin as autoformatListPlugin } from '@/components/editor/plugins/autoformat-list-plugin';\nimport { autoformatPlugin } from '@/components/editor/plugins/autoformat-plugin';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { FixedToolbarListPlugin } from '@/components/editor/plugins/fixed-toolbar-list-plugin';\nimport { FixedToolbarPlugin } from '@/components/editor/plugins/fixed-toolbar-plugin';\nimport { FloatingToolbarPlugin } from '@/components/editor/plugins/floating-toolbar-plugin';\nimport { tabbablePlugin } from '@/components/editor/plugins/tabbable-plugin';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '') => {\n  const overridePlugins = usePlaygroundEnabled(id);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  const plugins: any[] = [\n    ...copilotPlugins,\n    ...editorPlugins,\n    id === 'list' ? FixedToolbarListPlugin : FixedToolbarPlugin,\n    FloatingToolbarPlugin,\n\n    id === 'list' ? autoformatListPlugin : autoformatPlugin,\n    TablePlugin.configure({\n      options: {\n        enableMerging: id === 'tableMerge',\n      },\n    }),\n    ListPlugin,\n    TodoListPlugin,\n    ExcalidrawPlugin,\n    NormalizeTypesPlugin.configure({\n      options: {\n        rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n      },\n    }),\n    SingleLinePlugin,\n    // Testing\n    PlaywrightPlugin.configure({\n      enabled: process.env.NODE_ENV !== 'production',\n    }),\n  ];\n\n  if (id === 'tabbable') {\n    plugins.push(tabbablePlugin);\n  }\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins,\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const editor = usePlaygroundEditor(id);\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <EditorContainer className={cn(id && 'h-[500px]', className)}>\n          <Editor\n            variant=\"demo\"\n            className={cn(id ? 'h-[calc(100%-37px)] pb-8' : 'pb-[20vh]')}\n            spellCheck={false}\n          />\n        </EditorContainer>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
       "path": "example/playground-demo.tsx",
       "target": "components/playground-demo.tsx",
       "type": "registry:example"
diff --git a/apps/www/public/r/styles/default/block-selection-demo.json b/apps/www/public/r/styles/default/block-selection-demo.json
index 6eabe6b51e..6c44e42f3e 100644
--- a/apps/www/public/r/styles/default/block-selection-demo.json
+++ b/apps/www/public/r/styles/default/block-selection-demo.json
@@ -4,7 +4,7 @@
   },
   "files": [
     {
-      "content": "'use client';\n\nimport React from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { PlaceholderPlugin } from '@udecode/plate-media/react';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { TablePlugin } from '@udecode/plate-table/react';\n\nimport { settingsStore } from '@/components/context/settings-store';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { autoformatPlugin as autoformatListPlugin } from '@/components/editor/plugins/autoformat-list-plugin';\nimport { autoformatPlugin } from '@/components/editor/plugins/autoformat-plugin';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { FixedToolbarListPlugin } from '@/components/editor/plugins/fixed-toolbar-list-plugin';\nimport { FixedToolbarPlugin } from '@/components/editor/plugins/fixed-toolbar-plugin';\nimport { FloatingToolbarPlugin } from '@/components/editor/plugins/floating-toolbar-plugin';\nimport { tabbablePlugin } from '@/components/editor/plugins/tabbable-plugin';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { MediaPlaceholderElement } from '@/components/plate-ui/media-placeholder-element';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '') => {\n  const overridePlugins = usePlaygroundEnabled(id);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  const plugins: any[] = [\n    ...copilotPlugins,\n    ...editorPlugins,\n    id === 'list' ? FixedToolbarListPlugin : FixedToolbarPlugin,\n    FloatingToolbarPlugin,\n\n    id === 'list' ? autoformatListPlugin : autoformatPlugin,\n    TablePlugin.configure({\n      options: {\n        enableMerging: id === 'tableMerge',\n      },\n    }),\n    ListPlugin,\n    TodoListPlugin,\n    ExcalidrawPlugin,\n    NormalizeTypesPlugin.configure({\n      options: {\n        rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n      },\n    }),\n    SingleLinePlugin,\n    PlaceholderPlugin.withComponent(MediaPlaceholderElement),\n    // Testing\n    PlaywrightPlugin.configure({\n      enabled: process.env.NODE_ENV !== 'production',\n    }),\n  ];\n\n  if (id === 'tabbable') {\n    plugins.push(tabbablePlugin);\n  }\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins,\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const editor = usePlaygroundEditor(id);\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <EditorContainer className={cn(id && 'h-[500px]', className)}>\n          <Editor\n            variant=\"demo\"\n            className={cn(id ? 'h-[calc(100%-37px)] pb-8' : 'pb-[20vh]')}\n            spellCheck={false}\n          />\n        </EditorContainer>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
+      "content": "'use client';\n\nimport React from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { TablePlugin } from '@udecode/plate-table/react';\n\nimport { settingsStore } from '@/components/context/settings-store';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { autoformatPlugin as autoformatListPlugin } from '@/components/editor/plugins/autoformat-list-plugin';\nimport { autoformatPlugin } from '@/components/editor/plugins/autoformat-plugin';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { FixedToolbarListPlugin } from '@/components/editor/plugins/fixed-toolbar-list-plugin';\nimport { FixedToolbarPlugin } from '@/components/editor/plugins/fixed-toolbar-plugin';\nimport { FloatingToolbarPlugin } from '@/components/editor/plugins/floating-toolbar-plugin';\nimport { tabbablePlugin } from '@/components/editor/plugins/tabbable-plugin';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '') => {\n  const overridePlugins = usePlaygroundEnabled(id);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  const plugins: any[] = [\n    ...copilotPlugins,\n    ...editorPlugins,\n    id === 'list' ? FixedToolbarListPlugin : FixedToolbarPlugin,\n    FloatingToolbarPlugin,\n\n    id === 'list' ? autoformatListPlugin : autoformatPlugin,\n    TablePlugin.configure({\n      options: {\n        enableMerging: id === 'tableMerge',\n      },\n    }),\n    ListPlugin,\n    TodoListPlugin,\n    ExcalidrawPlugin,\n    NormalizeTypesPlugin.configure({\n      options: {\n        rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n      },\n    }),\n    SingleLinePlugin,\n    // Testing\n    PlaywrightPlugin.configure({\n      enabled: process.env.NODE_ENV !== 'production',\n    }),\n  ];\n\n  if (id === 'tabbable') {\n    plugins.push(tabbablePlugin);\n  }\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins,\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const editor = usePlaygroundEditor(id);\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <EditorContainer className={cn(id && 'h-[500px]', className)}>\n          <Editor\n            variant=\"demo\"\n            className={cn(id ? 'h-[calc(100%-37px)] pb-8' : 'pb-[20vh]')}\n            spellCheck={false}\n          />\n        </EditorContainer>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
       "path": "example/playground-demo.tsx",
       "target": "components/playground-demo.tsx",
       "type": "registry:example"
diff --git a/apps/www/public/r/styles/default/column-demo.json b/apps/www/public/r/styles/default/column-demo.json
index 8afe6e143e..2dc9e70158 100644
--- a/apps/www/public/r/styles/default/column-demo.json
+++ b/apps/www/public/r/styles/default/column-demo.json
@@ -4,7 +4,7 @@
   },
   "files": [
     {
-      "content": "'use client';\n\nimport React from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { PlaceholderPlugin } from '@udecode/plate-media/react';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { TablePlugin } from '@udecode/plate-table/react';\n\nimport { settingsStore } from '@/components/context/settings-store';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { autoformatPlugin as autoformatListPlugin } from '@/components/editor/plugins/autoformat-list-plugin';\nimport { autoformatPlugin } from '@/components/editor/plugins/autoformat-plugin';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { FixedToolbarListPlugin } from '@/components/editor/plugins/fixed-toolbar-list-plugin';\nimport { FixedToolbarPlugin } from '@/components/editor/plugins/fixed-toolbar-plugin';\nimport { FloatingToolbarPlugin } from '@/components/editor/plugins/floating-toolbar-plugin';\nimport { tabbablePlugin } from '@/components/editor/plugins/tabbable-plugin';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { MediaPlaceholderElement } from '@/components/plate-ui/media-placeholder-element';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '') => {\n  const overridePlugins = usePlaygroundEnabled(id);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  const plugins: any[] = [\n    ...copilotPlugins,\n    ...editorPlugins,\n    id === 'list' ? FixedToolbarListPlugin : FixedToolbarPlugin,\n    FloatingToolbarPlugin,\n\n    id === 'list' ? autoformatListPlugin : autoformatPlugin,\n    TablePlugin.configure({\n      options: {\n        enableMerging: id === 'tableMerge',\n      },\n    }),\n    ListPlugin,\n    TodoListPlugin,\n    ExcalidrawPlugin,\n    NormalizeTypesPlugin.configure({\n      options: {\n        rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n      },\n    }),\n    SingleLinePlugin,\n    PlaceholderPlugin.withComponent(MediaPlaceholderElement),\n    // Testing\n    PlaywrightPlugin.configure({\n      enabled: process.env.NODE_ENV !== 'production',\n    }),\n  ];\n\n  if (id === 'tabbable') {\n    plugins.push(tabbablePlugin);\n  }\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins,\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const editor = usePlaygroundEditor(id);\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <EditorContainer className={cn(id && 'h-[500px]', className)}>\n          <Editor\n            variant=\"demo\"\n            className={cn(id ? 'h-[calc(100%-37px)] pb-8' : 'pb-[20vh]')}\n            spellCheck={false}\n          />\n        </EditorContainer>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
+      "content": "'use client';\n\nimport React from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { TablePlugin } from '@udecode/plate-table/react';\n\nimport { settingsStore } from '@/components/context/settings-store';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { autoformatPlugin as autoformatListPlugin } from '@/components/editor/plugins/autoformat-list-plugin';\nimport { autoformatPlugin } from '@/components/editor/plugins/autoformat-plugin';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { FixedToolbarListPlugin } from '@/components/editor/plugins/fixed-toolbar-list-plugin';\nimport { FixedToolbarPlugin } from '@/components/editor/plugins/fixed-toolbar-plugin';\nimport { FloatingToolbarPlugin } from '@/components/editor/plugins/floating-toolbar-plugin';\nimport { tabbablePlugin } from '@/components/editor/plugins/tabbable-plugin';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '') => {\n  const overridePlugins = usePlaygroundEnabled(id);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  const plugins: any[] = [\n    ...copilotPlugins,\n    ...editorPlugins,\n    id === 'list' ? FixedToolbarListPlugin : FixedToolbarPlugin,\n    FloatingToolbarPlugin,\n\n    id === 'list' ? autoformatListPlugin : autoformatPlugin,\n    TablePlugin.configure({\n      options: {\n        enableMerging: id === 'tableMerge',\n      },\n    }),\n    ListPlugin,\n    TodoListPlugin,\n    ExcalidrawPlugin,\n    NormalizeTypesPlugin.configure({\n      options: {\n        rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n      },\n    }),\n    SingleLinePlugin,\n    // Testing\n    PlaywrightPlugin.configure({\n      enabled: process.env.NODE_ENV !== 'production',\n    }),\n  ];\n\n  if (id === 'tabbable') {\n    plugins.push(tabbablePlugin);\n  }\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins,\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const editor = usePlaygroundEditor(id);\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <EditorContainer className={cn(id && 'h-[500px]', className)}>\n          <Editor\n            variant=\"demo\"\n            className={cn(id ? 'h-[calc(100%-37px)] pb-8' : 'pb-[20vh]')}\n            spellCheck={false}\n          />\n        </EditorContainer>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
       "path": "example/playground-demo.tsx",
       "target": "components/playground-demo.tsx",
       "type": "registry:example"
diff --git a/apps/www/public/r/styles/default/comment-demo.json b/apps/www/public/r/styles/default/comment-demo.json
index 0514c3b10e..87be7ca3f7 100644
--- a/apps/www/public/r/styles/default/comment-demo.json
+++ b/apps/www/public/r/styles/default/comment-demo.json
@@ -4,7 +4,7 @@
   },
   "files": [
     {
-      "content": "'use client';\n\nimport React from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { PlaceholderPlugin } from '@udecode/plate-media/react';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { TablePlugin } from '@udecode/plate-table/react';\n\nimport { settingsStore } from '@/components/context/settings-store';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { autoformatPlugin as autoformatListPlugin } from '@/components/editor/plugins/autoformat-list-plugin';\nimport { autoformatPlugin } from '@/components/editor/plugins/autoformat-plugin';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { FixedToolbarListPlugin } from '@/components/editor/plugins/fixed-toolbar-list-plugin';\nimport { FixedToolbarPlugin } from '@/components/editor/plugins/fixed-toolbar-plugin';\nimport { FloatingToolbarPlugin } from '@/components/editor/plugins/floating-toolbar-plugin';\nimport { tabbablePlugin } from '@/components/editor/plugins/tabbable-plugin';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { MediaPlaceholderElement } from '@/components/plate-ui/media-placeholder-element';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '') => {\n  const overridePlugins = usePlaygroundEnabled(id);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  const plugins: any[] = [\n    ...copilotPlugins,\n    ...editorPlugins,\n    id === 'list' ? FixedToolbarListPlugin : FixedToolbarPlugin,\n    FloatingToolbarPlugin,\n\n    id === 'list' ? autoformatListPlugin : autoformatPlugin,\n    TablePlugin.configure({\n      options: {\n        enableMerging: id === 'tableMerge',\n      },\n    }),\n    ListPlugin,\n    TodoListPlugin,\n    ExcalidrawPlugin,\n    NormalizeTypesPlugin.configure({\n      options: {\n        rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n      },\n    }),\n    SingleLinePlugin,\n    PlaceholderPlugin.withComponent(MediaPlaceholderElement),\n    // Testing\n    PlaywrightPlugin.configure({\n      enabled: process.env.NODE_ENV !== 'production',\n    }),\n  ];\n\n  if (id === 'tabbable') {\n    plugins.push(tabbablePlugin);\n  }\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins,\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const editor = usePlaygroundEditor(id);\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <EditorContainer className={cn(id && 'h-[500px]', className)}>\n          <Editor\n            variant=\"demo\"\n            className={cn(id ? 'h-[calc(100%-37px)] pb-8' : 'pb-[20vh]')}\n            spellCheck={false}\n          />\n        </EditorContainer>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
+      "content": "'use client';\n\nimport React from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { TablePlugin } from '@udecode/plate-table/react';\n\nimport { settingsStore } from '@/components/context/settings-store';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { autoformatPlugin as autoformatListPlugin } from '@/components/editor/plugins/autoformat-list-plugin';\nimport { autoformatPlugin } from '@/components/editor/plugins/autoformat-plugin';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { FixedToolbarListPlugin } from '@/components/editor/plugins/fixed-toolbar-list-plugin';\nimport { FixedToolbarPlugin } from '@/components/editor/plugins/fixed-toolbar-plugin';\nimport { FloatingToolbarPlugin } from '@/components/editor/plugins/floating-toolbar-plugin';\nimport { tabbablePlugin } from '@/components/editor/plugins/tabbable-plugin';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '') => {\n  const overridePlugins = usePlaygroundEnabled(id);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  const plugins: any[] = [\n    ...copilotPlugins,\n    ...editorPlugins,\n    id === 'list' ? FixedToolbarListPlugin : FixedToolbarPlugin,\n    FloatingToolbarPlugin,\n\n    id === 'list' ? autoformatListPlugin : autoformatPlugin,\n    TablePlugin.configure({\n      options: {\n        enableMerging: id === 'tableMerge',\n      },\n    }),\n    ListPlugin,\n    TodoListPlugin,\n    ExcalidrawPlugin,\n    NormalizeTypesPlugin.configure({\n      options: {\n        rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n      },\n    }),\n    SingleLinePlugin,\n    // Testing\n    PlaywrightPlugin.configure({\n      enabled: process.env.NODE_ENV !== 'production',\n    }),\n  ];\n\n  if (id === 'tabbable') {\n    plugins.push(tabbablePlugin);\n  }\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins,\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const editor = usePlaygroundEditor(id);\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <EditorContainer className={cn(id && 'h-[500px]', className)}>\n          <Editor\n            variant=\"demo\"\n            className={cn(id ? 'h-[calc(100%-37px)] pb-8' : 'pb-[20vh]')}\n            spellCheck={false}\n          />\n        </EditorContainer>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
       "path": "example/playground-demo.tsx",
       "target": "components/playground-demo.tsx",
       "type": "registry:example"
diff --git a/apps/www/public/r/styles/default/copilot-demo.json b/apps/www/public/r/styles/default/copilot-demo.json
index 4b02b23110..3752675ebc 100644
--- a/apps/www/public/r/styles/default/copilot-demo.json
+++ b/apps/www/public/r/styles/default/copilot-demo.json
@@ -4,7 +4,7 @@
   },
   "files": [
     {
-      "content": "'use client';\n\nimport React from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { PlaceholderPlugin } from '@udecode/plate-media/react';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { TablePlugin } from '@udecode/plate-table/react';\n\nimport { settingsStore } from '@/components/context/settings-store';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { autoformatPlugin as autoformatListPlugin } from '@/components/editor/plugins/autoformat-list-plugin';\nimport { autoformatPlugin } from '@/components/editor/plugins/autoformat-plugin';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { FixedToolbarListPlugin } from '@/components/editor/plugins/fixed-toolbar-list-plugin';\nimport { FixedToolbarPlugin } from '@/components/editor/plugins/fixed-toolbar-plugin';\nimport { FloatingToolbarPlugin } from '@/components/editor/plugins/floating-toolbar-plugin';\nimport { tabbablePlugin } from '@/components/editor/plugins/tabbable-plugin';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { MediaPlaceholderElement } from '@/components/plate-ui/media-placeholder-element';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '') => {\n  const overridePlugins = usePlaygroundEnabled(id);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  const plugins: any[] = [\n    ...copilotPlugins,\n    ...editorPlugins,\n    id === 'list' ? FixedToolbarListPlugin : FixedToolbarPlugin,\n    FloatingToolbarPlugin,\n\n    id === 'list' ? autoformatListPlugin : autoformatPlugin,\n    TablePlugin.configure({\n      options: {\n        enableMerging: id === 'tableMerge',\n      },\n    }),\n    ListPlugin,\n    TodoListPlugin,\n    ExcalidrawPlugin,\n    NormalizeTypesPlugin.configure({\n      options: {\n        rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n      },\n    }),\n    SingleLinePlugin,\n    PlaceholderPlugin.withComponent(MediaPlaceholderElement),\n    // Testing\n    PlaywrightPlugin.configure({\n      enabled: process.env.NODE_ENV !== 'production',\n    }),\n  ];\n\n  if (id === 'tabbable') {\n    plugins.push(tabbablePlugin);\n  }\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins,\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const editor = usePlaygroundEditor(id);\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <EditorContainer className={cn(id && 'h-[500px]', className)}>\n          <Editor\n            variant=\"demo\"\n            className={cn(id ? 'h-[calc(100%-37px)] pb-8' : 'pb-[20vh]')}\n            spellCheck={false}\n          />\n        </EditorContainer>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
+      "content": "'use client';\n\nimport React from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { TablePlugin } from '@udecode/plate-table/react';\n\nimport { settingsStore } from '@/components/context/settings-store';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { autoformatPlugin as autoformatListPlugin } from '@/components/editor/plugins/autoformat-list-plugin';\nimport { autoformatPlugin } from '@/components/editor/plugins/autoformat-plugin';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { FixedToolbarListPlugin } from '@/components/editor/plugins/fixed-toolbar-list-plugin';\nimport { FixedToolbarPlugin } from '@/components/editor/plugins/fixed-toolbar-plugin';\nimport { FloatingToolbarPlugin } from '@/components/editor/plugins/floating-toolbar-plugin';\nimport { tabbablePlugin } from '@/components/editor/plugins/tabbable-plugin';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '') => {\n  const overridePlugins = usePlaygroundEnabled(id);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  const plugins: any[] = [\n    ...copilotPlugins,\n    ...editorPlugins,\n    id === 'list' ? FixedToolbarListPlugin : FixedToolbarPlugin,\n    FloatingToolbarPlugin,\n\n    id === 'list' ? autoformatListPlugin : autoformatPlugin,\n    TablePlugin.configure({\n      options: {\n        enableMerging: id === 'tableMerge',\n      },\n    }),\n    ListPlugin,\n    TodoListPlugin,\n    ExcalidrawPlugin,\n    NormalizeTypesPlugin.configure({\n      options: {\n        rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n      },\n    }),\n    SingleLinePlugin,\n    // Testing\n    PlaywrightPlugin.configure({\n      enabled: process.env.NODE_ENV !== 'production',\n    }),\n  ];\n\n  if (id === 'tabbable') {\n    plugins.push(tabbablePlugin);\n  }\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins,\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const editor = usePlaygroundEditor(id);\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <EditorContainer className={cn(id && 'h-[500px]', className)}>\n          <Editor\n            variant=\"demo\"\n            className={cn(id ? 'h-[calc(100%-37px)] pb-8' : 'pb-[20vh]')}\n            spellCheck={false}\n          />\n        </EditorContainer>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
       "path": "example/playground-demo.tsx",
       "target": "components/playground-demo.tsx",
       "type": "registry:example"
diff --git a/apps/www/public/r/styles/default/date-demo.json b/apps/www/public/r/styles/default/date-demo.json
index 731334f9ae..1960e2ea84 100644
--- a/apps/www/public/r/styles/default/date-demo.json
+++ b/apps/www/public/r/styles/default/date-demo.json
@@ -5,7 +5,7 @@
   },
   "files": [
     {
-      "content": "'use client';\n\nimport React from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { PlaceholderPlugin } from '@udecode/plate-media/react';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { TablePlugin } from '@udecode/plate-table/react';\n\nimport { settingsStore } from '@/components/context/settings-store';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { autoformatPlugin as autoformatListPlugin } from '@/components/editor/plugins/autoformat-list-plugin';\nimport { autoformatPlugin } from '@/components/editor/plugins/autoformat-plugin';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { FixedToolbarListPlugin } from '@/components/editor/plugins/fixed-toolbar-list-plugin';\nimport { FixedToolbarPlugin } from '@/components/editor/plugins/fixed-toolbar-plugin';\nimport { FloatingToolbarPlugin } from '@/components/editor/plugins/floating-toolbar-plugin';\nimport { tabbablePlugin } from '@/components/editor/plugins/tabbable-plugin';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { MediaPlaceholderElement } from '@/components/plate-ui/media-placeholder-element';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '') => {\n  const overridePlugins = usePlaygroundEnabled(id);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  const plugins: any[] = [\n    ...copilotPlugins,\n    ...editorPlugins,\n    id === 'list' ? FixedToolbarListPlugin : FixedToolbarPlugin,\n    FloatingToolbarPlugin,\n\n    id === 'list' ? autoformatListPlugin : autoformatPlugin,\n    TablePlugin.configure({\n      options: {\n        enableMerging: id === 'tableMerge',\n      },\n    }),\n    ListPlugin,\n    TodoListPlugin,\n    ExcalidrawPlugin,\n    NormalizeTypesPlugin.configure({\n      options: {\n        rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n      },\n    }),\n    SingleLinePlugin,\n    PlaceholderPlugin.withComponent(MediaPlaceholderElement),\n    // Testing\n    PlaywrightPlugin.configure({\n      enabled: process.env.NODE_ENV !== 'production',\n    }),\n  ];\n\n  if (id === 'tabbable') {\n    plugins.push(tabbablePlugin);\n  }\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins,\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const editor = usePlaygroundEditor(id);\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <EditorContainer className={cn(id && 'h-[500px]', className)}>\n          <Editor\n            variant=\"demo\"\n            className={cn(id ? 'h-[calc(100%-37px)] pb-8' : 'pb-[20vh]')}\n            spellCheck={false}\n          />\n        </EditorContainer>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
+      "content": "'use client';\n\nimport React from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { TablePlugin } from '@udecode/plate-table/react';\n\nimport { settingsStore } from '@/components/context/settings-store';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { autoformatPlugin as autoformatListPlugin } from '@/components/editor/plugins/autoformat-list-plugin';\nimport { autoformatPlugin } from '@/components/editor/plugins/autoformat-plugin';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { FixedToolbarListPlugin } from '@/components/editor/plugins/fixed-toolbar-list-plugin';\nimport { FixedToolbarPlugin } from '@/components/editor/plugins/fixed-toolbar-plugin';\nimport { FloatingToolbarPlugin } from '@/components/editor/plugins/floating-toolbar-plugin';\nimport { tabbablePlugin } from '@/components/editor/plugins/tabbable-plugin';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '') => {\n  const overridePlugins = usePlaygroundEnabled(id);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  const plugins: any[] = [\n    ...copilotPlugins,\n    ...editorPlugins,\n    id === 'list' ? FixedToolbarListPlugin : FixedToolbarPlugin,\n    FloatingToolbarPlugin,\n\n    id === 'list' ? autoformatListPlugin : autoformatPlugin,\n    TablePlugin.configure({\n      options: {\n        enableMerging: id === 'tableMerge',\n      },\n    }),\n    ListPlugin,\n    TodoListPlugin,\n    ExcalidrawPlugin,\n    NormalizeTypesPlugin.configure({\n      options: {\n        rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n      },\n    }),\n    SingleLinePlugin,\n    // Testing\n    PlaywrightPlugin.configure({\n      enabled: process.env.NODE_ENV !== 'production',\n    }),\n  ];\n\n  if (id === 'tabbable') {\n    plugins.push(tabbablePlugin);\n  }\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins,\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const editor = usePlaygroundEditor(id);\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <EditorContainer className={cn(id && 'h-[500px]', className)}>\n          <Editor\n            variant=\"demo\"\n            className={cn(id ? 'h-[calc(100%-37px)] pb-8' : 'pb-[20vh]')}\n            spellCheck={false}\n          />\n        </EditorContainer>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
       "path": "example/playground-demo.tsx",
       "target": "components/playground-demo.tsx",
       "type": "registry:example"
diff --git a/apps/www/public/r/styles/default/dnd-demo.json b/apps/www/public/r/styles/default/dnd-demo.json
index c4f13e431c..2a34d755c6 100644
--- a/apps/www/public/r/styles/default/dnd-demo.json
+++ b/apps/www/public/r/styles/default/dnd-demo.json
@@ -5,7 +5,7 @@
   },
   "files": [
     {
-      "content": "'use client';\n\nimport React from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { PlaceholderPlugin } from '@udecode/plate-media/react';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { TablePlugin } from '@udecode/plate-table/react';\n\nimport { settingsStore } from '@/components/context/settings-store';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { autoformatPlugin as autoformatListPlugin } from '@/components/editor/plugins/autoformat-list-plugin';\nimport { autoformatPlugin } from '@/components/editor/plugins/autoformat-plugin';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { FixedToolbarListPlugin } from '@/components/editor/plugins/fixed-toolbar-list-plugin';\nimport { FixedToolbarPlugin } from '@/components/editor/plugins/fixed-toolbar-plugin';\nimport { FloatingToolbarPlugin } from '@/components/editor/plugins/floating-toolbar-plugin';\nimport { tabbablePlugin } from '@/components/editor/plugins/tabbable-plugin';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { MediaPlaceholderElement } from '@/components/plate-ui/media-placeholder-element';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '') => {\n  const overridePlugins = usePlaygroundEnabled(id);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  const plugins: any[] = [\n    ...copilotPlugins,\n    ...editorPlugins,\n    id === 'list' ? FixedToolbarListPlugin : FixedToolbarPlugin,\n    FloatingToolbarPlugin,\n\n    id === 'list' ? autoformatListPlugin : autoformatPlugin,\n    TablePlugin.configure({\n      options: {\n        enableMerging: id === 'tableMerge',\n      },\n    }),\n    ListPlugin,\n    TodoListPlugin,\n    ExcalidrawPlugin,\n    NormalizeTypesPlugin.configure({\n      options: {\n        rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n      },\n    }),\n    SingleLinePlugin,\n    PlaceholderPlugin.withComponent(MediaPlaceholderElement),\n    // Testing\n    PlaywrightPlugin.configure({\n      enabled: process.env.NODE_ENV !== 'production',\n    }),\n  ];\n\n  if (id === 'tabbable') {\n    plugins.push(tabbablePlugin);\n  }\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins,\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const editor = usePlaygroundEditor(id);\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <EditorContainer className={cn(id && 'h-[500px]', className)}>\n          <Editor\n            variant=\"demo\"\n            className={cn(id ? 'h-[calc(100%-37px)] pb-8' : 'pb-[20vh]')}\n            spellCheck={false}\n          />\n        </EditorContainer>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
+      "content": "'use client';\n\nimport React from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { TablePlugin } from '@udecode/plate-table/react';\n\nimport { settingsStore } from '@/components/context/settings-store';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { autoformatPlugin as autoformatListPlugin } from '@/components/editor/plugins/autoformat-list-plugin';\nimport { autoformatPlugin } from '@/components/editor/plugins/autoformat-plugin';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { FixedToolbarListPlugin } from '@/components/editor/plugins/fixed-toolbar-list-plugin';\nimport { FixedToolbarPlugin } from '@/components/editor/plugins/fixed-toolbar-plugin';\nimport { FloatingToolbarPlugin } from '@/components/editor/plugins/floating-toolbar-plugin';\nimport { tabbablePlugin } from '@/components/editor/plugins/tabbable-plugin';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '') => {\n  const overridePlugins = usePlaygroundEnabled(id);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  const plugins: any[] = [\n    ...copilotPlugins,\n    ...editorPlugins,\n    id === 'list' ? FixedToolbarListPlugin : FixedToolbarPlugin,\n    FloatingToolbarPlugin,\n\n    id === 'list' ? autoformatListPlugin : autoformatPlugin,\n    TablePlugin.configure({\n      options: {\n        enableMerging: id === 'tableMerge',\n      },\n    }),\n    ListPlugin,\n    TodoListPlugin,\n    ExcalidrawPlugin,\n    NormalizeTypesPlugin.configure({\n      options: {\n        rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n      },\n    }),\n    SingleLinePlugin,\n    // Testing\n    PlaywrightPlugin.configure({\n      enabled: process.env.NODE_ENV !== 'production',\n    }),\n  ];\n\n  if (id === 'tabbable') {\n    plugins.push(tabbablePlugin);\n  }\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins,\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const editor = usePlaygroundEditor(id);\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <EditorContainer className={cn(id && 'h-[500px]', className)}>\n          <Editor\n            variant=\"demo\"\n            className={cn(id ? 'h-[calc(100%-37px)] pb-8' : 'pb-[20vh]')}\n            spellCheck={false}\n          />\n        </EditorContainer>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
       "path": "example/playground-demo.tsx",
       "target": "components/playground-demo.tsx",
       "type": "registry:example"
diff --git a/apps/www/public/r/styles/default/editor.json b/apps/www/public/r/styles/default/editor.json
index b958f1618a..de927dbb03 100644
--- a/apps/www/public/r/styles/default/editor.json
+++ b/apps/www/public/r/styles/default/editor.json
@@ -16,7 +16,7 @@
   },
   "files": [
     {
-      "content": "'use client';\n\nimport React from 'react';\n\nimport type { PlateContentProps } from '@udecode/plate-common/react';\nimport type { VariantProps } from 'class-variance-authority';\n\nimport { cn } from '@udecode/cn';\nimport {\n  PlateContent,\n  useEditorContainerRef,\n  useEditorRef,\n} from '@udecode/plate-common/react';\nimport { cva } from 'class-variance-authority';\n\nimport { useUploadErrorToast } from './media-placeholder-element';\n\nconst editorContainerVariants = cva(\n  'relative w-full cursor-text overflow-y-auto caret-primary selection:bg-brand/25 [&_.slate-selection-area]:border [&_.slate-selection-area]:border-brand/25 [&_.slate-selection-area]:bg-brand/15',\n  {\n    defaultVariants: {\n      variant: 'default',\n    },\n    variants: {\n      variant: {\n        default: 'h-full',\n        demo: 'h-[650px]',\n      },\n    },\n  }\n);\n\nexport const EditorContainer = ({\n  className,\n  variant,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement> &\n  VariantProps<typeof editorContainerVariants>) => {\n  const editor = useEditorRef();\n  const containerRef = useEditorContainerRef();\n\n  useUploadErrorToast();\n\n  return (\n    <div\n      id={editor.uid}\n      ref={containerRef}\n      className={cn(\n        'ignore-click-outside/toolbar',\n        editorContainerVariants({ variant }),\n        className\n      )}\n      role=\"button\"\n      {...props}\n    />\n  );\n};\n\nEditorContainer.displayName = 'EditorContainer';\n\nconst editorVariants = cva(\n  cn(\n    'group/editor',\n    'relative w-full overflow-x-hidden whitespace-pre-wrap break-words',\n    'rounded-md ring-offset-background placeholder:text-muted-foreground/80 focus-visible:outline-none',\n    '[&_[data-slate-placeholder]]:text-muted-foreground/80 [&_[data-slate-placeholder]]:!opacity-100',\n    '[&_[data-slate-placeholder]]:top-[auto_!important]',\n    '[&_strong]:font-bold'\n  ),\n  {\n    defaultVariants: {\n      variant: 'default',\n    },\n    variants: {\n      disabled: {\n        true: 'cursor-not-allowed opacity-50',\n      },\n      focused: {\n        true: 'ring-2 ring-ring ring-offset-2',\n      },\n      variant: {\n        ai: 'w-full px-0 text-sm',\n        aiChat:\n          'max-h-[min(70vh,320px)] w-full max-w-[700px] overflow-y-auto px-3 py-2 text-sm',\n        default:\n          'size-full px-16 pb-72 pt-4 text-base sm:px-[max(64px,calc(50%-350px))]',\n        demo: 'size-full px-16 pb-72 pt-4 text-base sm:px-[max(64px,calc(50%-350px))]',\n        fullWidth: 'size-full px-16 pb-72 pt-4 text-base sm:px-24',\n      },\n    },\n  }\n);\n\nexport type EditorProps = PlateContentProps &\n  VariantProps<typeof editorVariants>;\n\nexport const Editor = React.forwardRef<HTMLDivElement, EditorProps>(\n  ({ className, disabled, focused, variant, ...props }, ref) => {\n    return (\n      <PlateContent\n        ref={ref}\n        className={cn(\n          editorVariants({\n            disabled,\n            focused,\n            variant,\n          }),\n          className\n        )}\n        disabled={disabled}\n        disableDefaultStyles\n        {...props}\n      />\n    );\n  }\n);\n\nEditor.displayName = 'Editor';\n",
+      "content": "'use client';\n\nimport React from 'react';\n\nimport type { PlateContentProps } from '@udecode/plate-common/react';\nimport type { VariantProps } from 'class-variance-authority';\n\nimport { cn } from '@udecode/cn';\nimport {\n  PlateContent,\n  useEditorContainerRef,\n  useEditorRef,\n} from '@udecode/plate-common/react';\nimport { cva } from 'class-variance-authority';\n\nconst editorContainerVariants = cva(\n  'relative w-full cursor-text overflow-y-auto caret-primary selection:bg-brand/25 [&_.slate-selection-area]:border [&_.slate-selection-area]:border-brand/25 [&_.slate-selection-area]:bg-brand/15',\n  {\n    defaultVariants: {\n      variant: 'default',\n    },\n    variants: {\n      variant: {\n        default: 'h-full',\n        demo: 'h-[650px]',\n      },\n    },\n  }\n);\n\nexport const EditorContainer = ({\n  className,\n  variant,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement> &\n  VariantProps<typeof editorContainerVariants>) => {\n  const editor = useEditorRef();\n  const containerRef = useEditorContainerRef();\n\n  return (\n    <div\n      id={editor.uid}\n      ref={containerRef}\n      className={cn(\n        'ignore-click-outside/toolbar',\n        editorContainerVariants({ variant }),\n        className\n      )}\n      role=\"button\"\n      {...props}\n    />\n  );\n};\n\nEditorContainer.displayName = 'EditorContainer';\n\nconst editorVariants = cva(\n  cn(\n    'group/editor',\n    'relative w-full overflow-x-hidden whitespace-pre-wrap break-words',\n    'rounded-md ring-offset-background placeholder:text-muted-foreground/80 focus-visible:outline-none',\n    '[&_[data-slate-placeholder]]:text-muted-foreground/80 [&_[data-slate-placeholder]]:!opacity-100',\n    '[&_[data-slate-placeholder]]:top-[auto_!important]',\n    '[&_strong]:font-bold'\n  ),\n  {\n    defaultVariants: {\n      variant: 'default',\n    },\n    variants: {\n      disabled: {\n        true: 'cursor-not-allowed opacity-50',\n      },\n      focused: {\n        true: 'ring-2 ring-ring ring-offset-2',\n      },\n      variant: {\n        ai: 'w-full px-0 text-sm',\n        aiChat:\n          'max-h-[min(70vh,320px)] w-full max-w-[700px] overflow-y-auto px-3 py-2 text-sm',\n        default:\n          'size-full px-16 pb-72 pt-4 text-base sm:px-[max(64px,calc(50%-350px))]',\n        demo: 'size-full px-16 pb-72 pt-4 text-base sm:px-[max(64px,calc(50%-350px))]',\n        fullWidth: 'size-full px-16 pb-72 pt-4 text-base sm:px-24',\n      },\n    },\n  }\n);\n\nexport type EditorProps = PlateContentProps &\n  VariantProps<typeof editorVariants>;\n\nexport const Editor = React.forwardRef<HTMLDivElement, EditorProps>(\n  ({ className, disabled, focused, variant, ...props }, ref) => {\n    return (\n      <PlateContent\n        ref={ref}\n        className={cn(\n          editorVariants({\n            disabled,\n            focused,\n            variant,\n          }),\n          className\n        )}\n        disabled={disabled}\n        disableDefaultStyles\n        {...props}\n      />\n    );\n  }\n);\n\nEditor.displayName = 'Editor';\n",
       "path": "plate-ui/editor.tsx",
       "target": "components/plate-ui/editor.tsx",
       "type": "registry:ui"
diff --git a/apps/www/public/r/styles/default/emoji-demo.json b/apps/www/public/r/styles/default/emoji-demo.json
index 8201eaf8a9..b34309b487 100644
--- a/apps/www/public/r/styles/default/emoji-demo.json
+++ b/apps/www/public/r/styles/default/emoji-demo.json
@@ -4,7 +4,7 @@
   },
   "files": [
     {
-      "content": "'use client';\n\nimport React from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { PlaceholderPlugin } from '@udecode/plate-media/react';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { TablePlugin } from '@udecode/plate-table/react';\n\nimport { settingsStore } from '@/components/context/settings-store';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { autoformatPlugin as autoformatListPlugin } from '@/components/editor/plugins/autoformat-list-plugin';\nimport { autoformatPlugin } from '@/components/editor/plugins/autoformat-plugin';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { FixedToolbarListPlugin } from '@/components/editor/plugins/fixed-toolbar-list-plugin';\nimport { FixedToolbarPlugin } from '@/components/editor/plugins/fixed-toolbar-plugin';\nimport { FloatingToolbarPlugin } from '@/components/editor/plugins/floating-toolbar-plugin';\nimport { tabbablePlugin } from '@/components/editor/plugins/tabbable-plugin';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { MediaPlaceholderElement } from '@/components/plate-ui/media-placeholder-element';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '') => {\n  const overridePlugins = usePlaygroundEnabled(id);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  const plugins: any[] = [\n    ...copilotPlugins,\n    ...editorPlugins,\n    id === 'list' ? FixedToolbarListPlugin : FixedToolbarPlugin,\n    FloatingToolbarPlugin,\n\n    id === 'list' ? autoformatListPlugin : autoformatPlugin,\n    TablePlugin.configure({\n      options: {\n        enableMerging: id === 'tableMerge',\n      },\n    }),\n    ListPlugin,\n    TodoListPlugin,\n    ExcalidrawPlugin,\n    NormalizeTypesPlugin.configure({\n      options: {\n        rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n      },\n    }),\n    SingleLinePlugin,\n    PlaceholderPlugin.withComponent(MediaPlaceholderElement),\n    // Testing\n    PlaywrightPlugin.configure({\n      enabled: process.env.NODE_ENV !== 'production',\n    }),\n  ];\n\n  if (id === 'tabbable') {\n    plugins.push(tabbablePlugin);\n  }\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins,\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const editor = usePlaygroundEditor(id);\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <EditorContainer className={cn(id && 'h-[500px]', className)}>\n          <Editor\n            variant=\"demo\"\n            className={cn(id ? 'h-[calc(100%-37px)] pb-8' : 'pb-[20vh]')}\n            spellCheck={false}\n          />\n        </EditorContainer>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
+      "content": "'use client';\n\nimport React from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { TablePlugin } from '@udecode/plate-table/react';\n\nimport { settingsStore } from '@/components/context/settings-store';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { autoformatPlugin as autoformatListPlugin } from '@/components/editor/plugins/autoformat-list-plugin';\nimport { autoformatPlugin } from '@/components/editor/plugins/autoformat-plugin';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { FixedToolbarListPlugin } from '@/components/editor/plugins/fixed-toolbar-list-plugin';\nimport { FixedToolbarPlugin } from '@/components/editor/plugins/fixed-toolbar-plugin';\nimport { FloatingToolbarPlugin } from '@/components/editor/plugins/floating-toolbar-plugin';\nimport { tabbablePlugin } from '@/components/editor/plugins/tabbable-plugin';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '') => {\n  const overridePlugins = usePlaygroundEnabled(id);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  const plugins: any[] = [\n    ...copilotPlugins,\n    ...editorPlugins,\n    id === 'list' ? FixedToolbarListPlugin : FixedToolbarPlugin,\n    FloatingToolbarPlugin,\n\n    id === 'list' ? autoformatListPlugin : autoformatPlugin,\n    TablePlugin.configure({\n      options: {\n        enableMerging: id === 'tableMerge',\n      },\n    }),\n    ListPlugin,\n    TodoListPlugin,\n    ExcalidrawPlugin,\n    NormalizeTypesPlugin.configure({\n      options: {\n        rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n      },\n    }),\n    SingleLinePlugin,\n    // Testing\n    PlaywrightPlugin.configure({\n      enabled: process.env.NODE_ENV !== 'production',\n    }),\n  ];\n\n  if (id === 'tabbable') {\n    plugins.push(tabbablePlugin);\n  }\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins,\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const editor = usePlaygroundEditor(id);\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <EditorContainer className={cn(id && 'h-[500px]', className)}>\n          <Editor\n            variant=\"demo\"\n            className={cn(id ? 'h-[calc(100%-37px)] pb-8' : 'pb-[20vh]')}\n            spellCheck={false}\n          />\n        </EditorContainer>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
       "path": "example/playground-demo.tsx",
       "target": "components/playground-demo.tsx",
       "type": "registry:example"
diff --git a/apps/www/public/r/styles/default/excalidraw-demo.json b/apps/www/public/r/styles/default/excalidraw-demo.json
index 14849cfbbe..5dbcd08e53 100644
--- a/apps/www/public/r/styles/default/excalidraw-demo.json
+++ b/apps/www/public/r/styles/default/excalidraw-demo.json
@@ -5,7 +5,7 @@
   },
   "files": [
     {
-      "content": "'use client';\n\nimport React from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { PlaceholderPlugin } from '@udecode/plate-media/react';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { TablePlugin } from '@udecode/plate-table/react';\n\nimport { settingsStore } from '@/components/context/settings-store';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { autoformatPlugin as autoformatListPlugin } from '@/components/editor/plugins/autoformat-list-plugin';\nimport { autoformatPlugin } from '@/components/editor/plugins/autoformat-plugin';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { FixedToolbarListPlugin } from '@/components/editor/plugins/fixed-toolbar-list-plugin';\nimport { FixedToolbarPlugin } from '@/components/editor/plugins/fixed-toolbar-plugin';\nimport { FloatingToolbarPlugin } from '@/components/editor/plugins/floating-toolbar-plugin';\nimport { tabbablePlugin } from '@/components/editor/plugins/tabbable-plugin';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { MediaPlaceholderElement } from '@/components/plate-ui/media-placeholder-element';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '') => {\n  const overridePlugins = usePlaygroundEnabled(id);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  const plugins: any[] = [\n    ...copilotPlugins,\n    ...editorPlugins,\n    id === 'list' ? FixedToolbarListPlugin : FixedToolbarPlugin,\n    FloatingToolbarPlugin,\n\n    id === 'list' ? autoformatListPlugin : autoformatPlugin,\n    TablePlugin.configure({\n      options: {\n        enableMerging: id === 'tableMerge',\n      },\n    }),\n    ListPlugin,\n    TodoListPlugin,\n    ExcalidrawPlugin,\n    NormalizeTypesPlugin.configure({\n      options: {\n        rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n      },\n    }),\n    SingleLinePlugin,\n    PlaceholderPlugin.withComponent(MediaPlaceholderElement),\n    // Testing\n    PlaywrightPlugin.configure({\n      enabled: process.env.NODE_ENV !== 'production',\n    }),\n  ];\n\n  if (id === 'tabbable') {\n    plugins.push(tabbablePlugin);\n  }\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins,\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const editor = usePlaygroundEditor(id);\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <EditorContainer className={cn(id && 'h-[500px]', className)}>\n          <Editor\n            variant=\"demo\"\n            className={cn(id ? 'h-[calc(100%-37px)] pb-8' : 'pb-[20vh]')}\n            spellCheck={false}\n          />\n        </EditorContainer>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
+      "content": "'use client';\n\nimport React from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { TablePlugin } from '@udecode/plate-table/react';\n\nimport { settingsStore } from '@/components/context/settings-store';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { autoformatPlugin as autoformatListPlugin } from '@/components/editor/plugins/autoformat-list-plugin';\nimport { autoformatPlugin } from '@/components/editor/plugins/autoformat-plugin';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { FixedToolbarListPlugin } from '@/components/editor/plugins/fixed-toolbar-list-plugin';\nimport { FixedToolbarPlugin } from '@/components/editor/plugins/fixed-toolbar-plugin';\nimport { FloatingToolbarPlugin } from '@/components/editor/plugins/floating-toolbar-plugin';\nimport { tabbablePlugin } from '@/components/editor/plugins/tabbable-plugin';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '') => {\n  const overridePlugins = usePlaygroundEnabled(id);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  const plugins: any[] = [\n    ...copilotPlugins,\n    ...editorPlugins,\n    id === 'list' ? FixedToolbarListPlugin : FixedToolbarPlugin,\n    FloatingToolbarPlugin,\n\n    id === 'list' ? autoformatListPlugin : autoformatPlugin,\n    TablePlugin.configure({\n      options: {\n        enableMerging: id === 'tableMerge',\n      },\n    }),\n    ListPlugin,\n    TodoListPlugin,\n    ExcalidrawPlugin,\n    NormalizeTypesPlugin.configure({\n      options: {\n        rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n      },\n    }),\n    SingleLinePlugin,\n    // Testing\n    PlaywrightPlugin.configure({\n      enabled: process.env.NODE_ENV !== 'production',\n    }),\n  ];\n\n  if (id === 'tabbable') {\n    plugins.push(tabbablePlugin);\n  }\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins,\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const editor = usePlaygroundEditor(id);\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <EditorContainer className={cn(id && 'h-[500px]', className)}>\n          <Editor\n            variant=\"demo\"\n            className={cn(id ? 'h-[calc(100%-37px)] pb-8' : 'pb-[20vh]')}\n            spellCheck={false}\n          />\n        </EditorContainer>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
       "path": "example/playground-demo.tsx",
       "target": "components/playground-demo.tsx",
       "type": "registry:example"
diff --git a/apps/www/public/r/styles/default/fixed-toolbar-buttons.json b/apps/www/public/r/styles/default/fixed-toolbar-buttons.json
index d63fe9b940..711f5d2510 100644
--- a/apps/www/public/r/styles/default/fixed-toolbar-buttons.json
+++ b/apps/www/public/r/styles/default/fixed-toolbar-buttons.json
@@ -13,7 +13,7 @@
   },
   "files": [
     {
-      "content": "'use client';\n\nimport React from 'react';\n\nimport {\n  BoldPlugin,\n  CodePlugin,\n  ItalicPlugin,\n  StrikethroughPlugin,\n  UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { useEditorReadOnly } from '@udecode/plate-common/react';\nimport {\n  FontBackgroundColorPlugin,\n  FontColorPlugin,\n} from '@udecode/plate-font/react';\nimport { ListStyleType } from '@udecode/plate-indent-list';\nimport {\n  AudioPlugin,\n  FilePlugin,\n  ImagePlugin,\n  VideoPlugin,\n} from '@udecode/plate-media/react';\nimport {\n  BaselineIcon,\n  BoldIcon,\n  Code2Icon,\n  ItalicIcon,\n  PaintBucketIcon,\n  SparklesIcon,\n  StrikethroughIcon,\n  UnderlineIcon,\n} from 'lucide-react';\n\nimport { AIToolbarButton } from './ai-toolbar-button';\nimport { AlignDropdownMenu } from './align-dropdown-menu';\nimport { ColorDropdownMenu } from './color-dropdown-menu';\nimport { CommentToolbarButton } from './comment-toolbar-button';\nimport { EmojiDropdownMenu } from './emoji-dropdown-menu';\nimport { IndentListToolbarButton } from './indent-list-toolbar-button';\nimport { IndentTodoToolbarButton } from './indent-todo-toolbar-button';\nimport { IndentToolbarButton } from './indent-toolbar-button';\nimport { InsertDropdownMenu } from './insert-dropdown-menu';\nimport { LineHeightDropdownMenu } from './line-height-dropdown-menu';\nimport { LinkToolbarButton } from './link-toolbar-button';\nimport { MarkToolbarButton } from './mark-toolbar-button';\nimport { MediaDropdownMenu } from './media-dropdown-menu';\nimport { ModeDropdownMenu } from './mode-dropdown-menu';\nimport { MoreDropdownMenu } from './more-dropdown-menu';\nimport { OutdentToolbarButton } from './outdent-toolbar-button';\nimport { RedoToolbarButton } from './redo-toolbar-button';\nimport { TableDropdownMenu } from './table-dropdown-menu';\nimport { ToggleToolbarButton } from './toggle-toolbar-button';\nimport { ToolbarGroup } from './toolbar';\nimport { TurnIntoDropdownMenu } from './turn-into-dropdown-menu';\nimport { UndoToolbarButton } from './undo-toolbar-button';\n\nexport function FixedToolbarButtons() {\n  const readOnly = useEditorReadOnly();\n\n  return (\n    <div className=\"flex w-full\">\n      {!readOnly && (\n        <>\n          <ToolbarGroup>\n            <UndoToolbarButton />\n            <RedoToolbarButton />\n          </ToolbarGroup>\n\n          <ToolbarGroup>\n            <AIToolbarButton\n              className=\"gap-1.5 text-purple-600 hover:text-purple-700 dark:text-purple-400 dark:hover:text-purple-500\"\n              tooltip=\"Edit, generate, and more\"\n            >\n              <SparklesIcon className=\"!size-3.5\" />\n              Ask AI\n            </AIToolbarButton>\n          </ToolbarGroup>\n\n          <ToolbarGroup>\n            <InsertDropdownMenu />\n            <TurnIntoDropdownMenu />\n          </ToolbarGroup>\n\n          <ToolbarGroup>\n            <MarkToolbarButton nodeType={BoldPlugin.key} tooltip=\"Bold (⌘+B)\">\n              <BoldIcon />\n            </MarkToolbarButton>\n\n            <MarkToolbarButton\n              nodeType={ItalicPlugin.key}\n              tooltip=\"Italic (⌘+I)\"\n            >\n              <ItalicIcon />\n            </MarkToolbarButton>\n\n            <MarkToolbarButton\n              nodeType={UnderlinePlugin.key}\n              tooltip=\"Underline (⌘+U)\"\n            >\n              <UnderlineIcon />\n            </MarkToolbarButton>\n\n            <MarkToolbarButton\n              nodeType={StrikethroughPlugin.key}\n              tooltip=\"Strikethrough (⌘+⇧+M)\"\n            >\n              <StrikethroughIcon />\n            </MarkToolbarButton>\n\n            <MarkToolbarButton nodeType={CodePlugin.key} tooltip=\"Code (⌘+E)\">\n              <Code2Icon />\n            </MarkToolbarButton>\n\n            <ColorDropdownMenu\n              nodeType={FontColorPlugin.key}\n              tooltip=\"Text color\"\n            >\n              <BaselineIcon />\n            </ColorDropdownMenu>\n\n            <ColorDropdownMenu\n              nodeType={FontBackgroundColorPlugin.key}\n              tooltip=\"Background color\"\n            >\n              <PaintBucketIcon />\n            </ColorDropdownMenu>\n          </ToolbarGroup>\n\n          <ToolbarGroup>\n            <AlignDropdownMenu />\n            <LineHeightDropdownMenu />\n\n            <IndentListToolbarButton nodeType={ListStyleType.Disc} />\n            <IndentListToolbarButton nodeType={ListStyleType.Decimal} />\n            <IndentTodoToolbarButton />\n\n            <OutdentToolbarButton />\n            <IndentToolbarButton />\n          </ToolbarGroup>\n\n          <ToolbarGroup>\n            <MediaDropdownMenu nodeType={ImagePlugin.key} />\n            <MediaDropdownMenu nodeType={VideoPlugin.key} />\n            <MediaDropdownMenu nodeType={AudioPlugin.key} />\n            <MediaDropdownMenu nodeType={FilePlugin.key} />\n          </ToolbarGroup>\n\n          <ToolbarGroup>\n            <LinkToolbarButton />\n            <ToggleToolbarButton />\n            <TableDropdownMenu />\n            <EmojiDropdownMenu />\n            <MoreDropdownMenu />\n          </ToolbarGroup>\n        </>\n      )}\n\n      <div className=\"grow\" />\n\n      <ToolbarGroup>\n        <CommentToolbarButton />\n        <ModeDropdownMenu />\n      </ToolbarGroup>\n    </div>\n  );\n}\n",
+      "content": "'use client';\n\nimport React from 'react';\n\nimport {\n  BoldPlugin,\n  CodePlugin,\n  ItalicPlugin,\n  StrikethroughPlugin,\n  UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { useEditorReadOnly } from '@udecode/plate-common/react';\nimport {\n  FontBackgroundColorPlugin,\n  FontColorPlugin,\n} from '@udecode/plate-font/react';\nimport { ListStyleType } from '@udecode/plate-indent-list';\nimport {\n  AudioPlugin,\n  FilePlugin,\n  ImagePlugin,\n  VideoPlugin,\n} from '@udecode/plate-media/react';\nimport {\n  BaselineIcon,\n  BoldIcon,\n  Code2Icon,\n  ItalicIcon,\n  PaintBucketIcon,\n  SparklesIcon,\n  StrikethroughIcon,\n  UnderlineIcon,\n} from 'lucide-react';\n\nimport { AIToolbarButton } from './ai-toolbar-button';\nimport { AlignDropdownMenu } from './align-dropdown-menu';\nimport { ColorDropdownMenu } from './color-dropdown-menu';\nimport { CommentToolbarButton } from './comment-toolbar-button';\nimport { EmojiDropdownMenu } from './emoji-dropdown-menu';\nimport { RedoToolbarButton, UndoToolbarButton } from './history-toolbar-button';\nimport { IndentListToolbarButton } from './indent-list-toolbar-button';\nimport { IndentTodoToolbarButton } from './indent-todo-toolbar-button';\nimport { IndentToolbarButton } from './indent-toolbar-button';\nimport { InsertDropdownMenu } from './insert-dropdown-menu';\nimport { LineHeightDropdownMenu } from './line-height-dropdown-menu';\nimport { LinkToolbarButton } from './link-toolbar-button';\nimport { MarkToolbarButton } from './mark-toolbar-button';\nimport { MediaDropdownMenu } from './media-dropdown-menu';\nimport { ModeDropdownMenu } from './mode-dropdown-menu';\nimport { MoreDropdownMenu } from './more-dropdown-menu';\nimport { OutdentToolbarButton } from './outdent-toolbar-button';\nimport { TableDropdownMenu } from './table-dropdown-menu';\nimport { ToggleToolbarButton } from './toggle-toolbar-button';\nimport { ToolbarGroup } from './toolbar';\nimport { TurnIntoDropdownMenu } from './turn-into-dropdown-menu';\n\nexport function FixedToolbarButtons() {\n  const readOnly = useEditorReadOnly();\n\n  return (\n    <div className=\"flex w-full\">\n      {!readOnly && (\n        <>\n          <ToolbarGroup>\n            <UndoToolbarButton />\n            <RedoToolbarButton />\n          </ToolbarGroup>\n\n          <ToolbarGroup>\n            <AIToolbarButton\n              className=\"gap-1.5 text-purple-600 hover:text-purple-700 dark:text-purple-400 dark:hover:text-purple-500\"\n              tooltip=\"Edit, generate, and more\"\n            >\n              <SparklesIcon className=\"!size-3.5\" />\n              Ask AI\n            </AIToolbarButton>\n          </ToolbarGroup>\n\n          <ToolbarGroup>\n            <InsertDropdownMenu />\n            <TurnIntoDropdownMenu />\n          </ToolbarGroup>\n\n          <ToolbarGroup>\n            <MarkToolbarButton nodeType={BoldPlugin.key} tooltip=\"Bold (⌘+B)\">\n              <BoldIcon />\n            </MarkToolbarButton>\n\n            <MarkToolbarButton\n              nodeType={ItalicPlugin.key}\n              tooltip=\"Italic (⌘+I)\"\n            >\n              <ItalicIcon />\n            </MarkToolbarButton>\n\n            <MarkToolbarButton\n              nodeType={UnderlinePlugin.key}\n              tooltip=\"Underline (⌘+U)\"\n            >\n              <UnderlineIcon />\n            </MarkToolbarButton>\n\n            <MarkToolbarButton\n              nodeType={StrikethroughPlugin.key}\n              tooltip=\"Strikethrough (⌘+⇧+M)\"\n            >\n              <StrikethroughIcon />\n            </MarkToolbarButton>\n\n            <MarkToolbarButton nodeType={CodePlugin.key} tooltip=\"Code (⌘+E)\">\n              <Code2Icon />\n            </MarkToolbarButton>\n\n            <ColorDropdownMenu\n              nodeType={FontColorPlugin.key}\n              tooltip=\"Text color\"\n            >\n              <BaselineIcon />\n            </ColorDropdownMenu>\n\n            <ColorDropdownMenu\n              nodeType={FontBackgroundColorPlugin.key}\n              tooltip=\"Background color\"\n            >\n              <PaintBucketIcon />\n            </ColorDropdownMenu>\n          </ToolbarGroup>\n\n          <ToolbarGroup>\n            <AlignDropdownMenu />\n            <LineHeightDropdownMenu />\n\n            <IndentListToolbarButton nodeType={ListStyleType.Disc} />\n            <IndentListToolbarButton nodeType={ListStyleType.Decimal} />\n            <IndentTodoToolbarButton />\n\n            <OutdentToolbarButton />\n            <IndentToolbarButton />\n          </ToolbarGroup>\n\n          <ToolbarGroup>\n            <MediaDropdownMenu nodeType={ImagePlugin.key} />\n            <MediaDropdownMenu nodeType={VideoPlugin.key} />\n            <MediaDropdownMenu nodeType={AudioPlugin.key} />\n            <MediaDropdownMenu nodeType={FilePlugin.key} />\n          </ToolbarGroup>\n\n          <ToolbarGroup>\n            <LinkToolbarButton />\n            <ToggleToolbarButton />\n            <TableDropdownMenu />\n            <EmojiDropdownMenu />\n            <MoreDropdownMenu />\n          </ToolbarGroup>\n        </>\n      )}\n\n      <div className=\"grow\" />\n\n      <ToolbarGroup>\n        <CommentToolbarButton />\n        <ModeDropdownMenu />\n      </ToolbarGroup>\n    </div>\n  );\n}\n",
       "path": "plate-ui/fixed-toolbar-buttons.tsx",
       "target": "components/plate-ui/fixed-toolbar-buttons.tsx",
       "type": "registry:ui"
diff --git a/apps/www/public/r/styles/default/floating-toolbar-demo.json b/apps/www/public/r/styles/default/floating-toolbar-demo.json
index 57d0acdd88..119e334cba 100644
--- a/apps/www/public/r/styles/default/floating-toolbar-demo.json
+++ b/apps/www/public/r/styles/default/floating-toolbar-demo.json
@@ -4,7 +4,7 @@
   },
   "files": [
     {
-      "content": "'use client';\n\nimport React from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { PlaceholderPlugin } from '@udecode/plate-media/react';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { TablePlugin } from '@udecode/plate-table/react';\n\nimport { settingsStore } from '@/components/context/settings-store';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { autoformatPlugin as autoformatListPlugin } from '@/components/editor/plugins/autoformat-list-plugin';\nimport { autoformatPlugin } from '@/components/editor/plugins/autoformat-plugin';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { FixedToolbarListPlugin } from '@/components/editor/plugins/fixed-toolbar-list-plugin';\nimport { FixedToolbarPlugin } from '@/components/editor/plugins/fixed-toolbar-plugin';\nimport { FloatingToolbarPlugin } from '@/components/editor/plugins/floating-toolbar-plugin';\nimport { tabbablePlugin } from '@/components/editor/plugins/tabbable-plugin';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { MediaPlaceholderElement } from '@/components/plate-ui/media-placeholder-element';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '') => {\n  const overridePlugins = usePlaygroundEnabled(id);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  const plugins: any[] = [\n    ...copilotPlugins,\n    ...editorPlugins,\n    id === 'list' ? FixedToolbarListPlugin : FixedToolbarPlugin,\n    FloatingToolbarPlugin,\n\n    id === 'list' ? autoformatListPlugin : autoformatPlugin,\n    TablePlugin.configure({\n      options: {\n        enableMerging: id === 'tableMerge',\n      },\n    }),\n    ListPlugin,\n    TodoListPlugin,\n    ExcalidrawPlugin,\n    NormalizeTypesPlugin.configure({\n      options: {\n        rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n      },\n    }),\n    SingleLinePlugin,\n    PlaceholderPlugin.withComponent(MediaPlaceholderElement),\n    // Testing\n    PlaywrightPlugin.configure({\n      enabled: process.env.NODE_ENV !== 'production',\n    }),\n  ];\n\n  if (id === 'tabbable') {\n    plugins.push(tabbablePlugin);\n  }\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins,\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const editor = usePlaygroundEditor(id);\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <EditorContainer className={cn(id && 'h-[500px]', className)}>\n          <Editor\n            variant=\"demo\"\n            className={cn(id ? 'h-[calc(100%-37px)] pb-8' : 'pb-[20vh]')}\n            spellCheck={false}\n          />\n        </EditorContainer>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
+      "content": "'use client';\n\nimport React from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { TablePlugin } from '@udecode/plate-table/react';\n\nimport { settingsStore } from '@/components/context/settings-store';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { autoformatPlugin as autoformatListPlugin } from '@/components/editor/plugins/autoformat-list-plugin';\nimport { autoformatPlugin } from '@/components/editor/plugins/autoformat-plugin';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { FixedToolbarListPlugin } from '@/components/editor/plugins/fixed-toolbar-list-plugin';\nimport { FixedToolbarPlugin } from '@/components/editor/plugins/fixed-toolbar-plugin';\nimport { FloatingToolbarPlugin } from '@/components/editor/plugins/floating-toolbar-plugin';\nimport { tabbablePlugin } from '@/components/editor/plugins/tabbable-plugin';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '') => {\n  const overridePlugins = usePlaygroundEnabled(id);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  const plugins: any[] = [\n    ...copilotPlugins,\n    ...editorPlugins,\n    id === 'list' ? FixedToolbarListPlugin : FixedToolbarPlugin,\n    FloatingToolbarPlugin,\n\n    id === 'list' ? autoformatListPlugin : autoformatPlugin,\n    TablePlugin.configure({\n      options: {\n        enableMerging: id === 'tableMerge',\n      },\n    }),\n    ListPlugin,\n    TodoListPlugin,\n    ExcalidrawPlugin,\n    NormalizeTypesPlugin.configure({\n      options: {\n        rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n      },\n    }),\n    SingleLinePlugin,\n    // Testing\n    PlaywrightPlugin.configure({\n      enabled: process.env.NODE_ENV !== 'production',\n    }),\n  ];\n\n  if (id === 'tabbable') {\n    plugins.push(tabbablePlugin);\n  }\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins,\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const editor = usePlaygroundEditor(id);\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <EditorContainer className={cn(id && 'h-[500px]', className)}>\n          <Editor\n            variant=\"demo\"\n            className={cn(id ? 'h-[calc(100%-37px)] pb-8' : 'pb-[20vh]')}\n            spellCheck={false}\n          />\n        </EditorContainer>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
       "path": "example/playground-demo.tsx",
       "target": "components/playground-demo.tsx",
       "type": "registry:example"
diff --git a/apps/www/public/r/styles/default/font-demo.json b/apps/www/public/r/styles/default/font-demo.json
index bc7327af52..ac88e1ad3d 100644
--- a/apps/www/public/r/styles/default/font-demo.json
+++ b/apps/www/public/r/styles/default/font-demo.json
@@ -4,7 +4,7 @@
   },
   "files": [
     {
-      "content": "'use client';\n\nimport React from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { PlaceholderPlugin } from '@udecode/plate-media/react';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { TablePlugin } from '@udecode/plate-table/react';\n\nimport { settingsStore } from '@/components/context/settings-store';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { autoformatPlugin as autoformatListPlugin } from '@/components/editor/plugins/autoformat-list-plugin';\nimport { autoformatPlugin } from '@/components/editor/plugins/autoformat-plugin';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { FixedToolbarListPlugin } from '@/components/editor/plugins/fixed-toolbar-list-plugin';\nimport { FixedToolbarPlugin } from '@/components/editor/plugins/fixed-toolbar-plugin';\nimport { FloatingToolbarPlugin } from '@/components/editor/plugins/floating-toolbar-plugin';\nimport { tabbablePlugin } from '@/components/editor/plugins/tabbable-plugin';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { MediaPlaceholderElement } from '@/components/plate-ui/media-placeholder-element';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '') => {\n  const overridePlugins = usePlaygroundEnabled(id);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  const plugins: any[] = [\n    ...copilotPlugins,\n    ...editorPlugins,\n    id === 'list' ? FixedToolbarListPlugin : FixedToolbarPlugin,\n    FloatingToolbarPlugin,\n\n    id === 'list' ? autoformatListPlugin : autoformatPlugin,\n    TablePlugin.configure({\n      options: {\n        enableMerging: id === 'tableMerge',\n      },\n    }),\n    ListPlugin,\n    TodoListPlugin,\n    ExcalidrawPlugin,\n    NormalizeTypesPlugin.configure({\n      options: {\n        rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n      },\n    }),\n    SingleLinePlugin,\n    PlaceholderPlugin.withComponent(MediaPlaceholderElement),\n    // Testing\n    PlaywrightPlugin.configure({\n      enabled: process.env.NODE_ENV !== 'production',\n    }),\n  ];\n\n  if (id === 'tabbable') {\n    plugins.push(tabbablePlugin);\n  }\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins,\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const editor = usePlaygroundEditor(id);\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <EditorContainer className={cn(id && 'h-[500px]', className)}>\n          <Editor\n            variant=\"demo\"\n            className={cn(id ? 'h-[calc(100%-37px)] pb-8' : 'pb-[20vh]')}\n            spellCheck={false}\n          />\n        </EditorContainer>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
+      "content": "'use client';\n\nimport React from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { TablePlugin } from '@udecode/plate-table/react';\n\nimport { settingsStore } from '@/components/context/settings-store';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { autoformatPlugin as autoformatListPlugin } from '@/components/editor/plugins/autoformat-list-plugin';\nimport { autoformatPlugin } from '@/components/editor/plugins/autoformat-plugin';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { FixedToolbarListPlugin } from '@/components/editor/plugins/fixed-toolbar-list-plugin';\nimport { FixedToolbarPlugin } from '@/components/editor/plugins/fixed-toolbar-plugin';\nimport { FloatingToolbarPlugin } from '@/components/editor/plugins/floating-toolbar-plugin';\nimport { tabbablePlugin } from '@/components/editor/plugins/tabbable-plugin';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '') => {\n  const overridePlugins = usePlaygroundEnabled(id);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  const plugins: any[] = [\n    ...copilotPlugins,\n    ...editorPlugins,\n    id === 'list' ? FixedToolbarListPlugin : FixedToolbarPlugin,\n    FloatingToolbarPlugin,\n\n    id === 'list' ? autoformatListPlugin : autoformatPlugin,\n    TablePlugin.configure({\n      options: {\n        enableMerging: id === 'tableMerge',\n      },\n    }),\n    ListPlugin,\n    TodoListPlugin,\n    ExcalidrawPlugin,\n    NormalizeTypesPlugin.configure({\n      options: {\n        rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n      },\n    }),\n    SingleLinePlugin,\n    // Testing\n    PlaywrightPlugin.configure({\n      enabled: process.env.NODE_ENV !== 'production',\n    }),\n  ];\n\n  if (id === 'tabbable') {\n    plugins.push(tabbablePlugin);\n  }\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins,\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const editor = usePlaygroundEditor(id);\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <EditorContainer className={cn(id && 'h-[500px]', className)}>\n          <Editor\n            variant=\"demo\"\n            className={cn(id ? 'h-[calc(100%-37px)] pb-8' : 'pb-[20vh]')}\n            spellCheck={false}\n          />\n        </EditorContainer>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
       "path": "example/playground-demo.tsx",
       "target": "components/playground-demo.tsx",
       "type": "registry:example"
diff --git a/apps/www/public/r/styles/default/highlight-demo.json b/apps/www/public/r/styles/default/highlight-demo.json
index b9f70455d5..f2475ef9be 100644
--- a/apps/www/public/r/styles/default/highlight-demo.json
+++ b/apps/www/public/r/styles/default/highlight-demo.json
@@ -4,7 +4,7 @@
   },
   "files": [
     {
-      "content": "'use client';\n\nimport React from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { PlaceholderPlugin } from '@udecode/plate-media/react';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { TablePlugin } from '@udecode/plate-table/react';\n\nimport { settingsStore } from '@/components/context/settings-store';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { autoformatPlugin as autoformatListPlugin } from '@/components/editor/plugins/autoformat-list-plugin';\nimport { autoformatPlugin } from '@/components/editor/plugins/autoformat-plugin';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { FixedToolbarListPlugin } from '@/components/editor/plugins/fixed-toolbar-list-plugin';\nimport { FixedToolbarPlugin } from '@/components/editor/plugins/fixed-toolbar-plugin';\nimport { FloatingToolbarPlugin } from '@/components/editor/plugins/floating-toolbar-plugin';\nimport { tabbablePlugin } from '@/components/editor/plugins/tabbable-plugin';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { MediaPlaceholderElement } from '@/components/plate-ui/media-placeholder-element';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '') => {\n  const overridePlugins = usePlaygroundEnabled(id);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  const plugins: any[] = [\n    ...copilotPlugins,\n    ...editorPlugins,\n    id === 'list' ? FixedToolbarListPlugin : FixedToolbarPlugin,\n    FloatingToolbarPlugin,\n\n    id === 'list' ? autoformatListPlugin : autoformatPlugin,\n    TablePlugin.configure({\n      options: {\n        enableMerging: id === 'tableMerge',\n      },\n    }),\n    ListPlugin,\n    TodoListPlugin,\n    ExcalidrawPlugin,\n    NormalizeTypesPlugin.configure({\n      options: {\n        rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n      },\n    }),\n    SingleLinePlugin,\n    PlaceholderPlugin.withComponent(MediaPlaceholderElement),\n    // Testing\n    PlaywrightPlugin.configure({\n      enabled: process.env.NODE_ENV !== 'production',\n    }),\n  ];\n\n  if (id === 'tabbable') {\n    plugins.push(tabbablePlugin);\n  }\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins,\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const editor = usePlaygroundEditor(id);\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <EditorContainer className={cn(id && 'h-[500px]', className)}>\n          <Editor\n            variant=\"demo\"\n            className={cn(id ? 'h-[calc(100%-37px)] pb-8' : 'pb-[20vh]')}\n            spellCheck={false}\n          />\n        </EditorContainer>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
+      "content": "'use client';\n\nimport React from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { TablePlugin } from '@udecode/plate-table/react';\n\nimport { settingsStore } from '@/components/context/settings-store';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { autoformatPlugin as autoformatListPlugin } from '@/components/editor/plugins/autoformat-list-plugin';\nimport { autoformatPlugin } from '@/components/editor/plugins/autoformat-plugin';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { FixedToolbarListPlugin } from '@/components/editor/plugins/fixed-toolbar-list-plugin';\nimport { FixedToolbarPlugin } from '@/components/editor/plugins/fixed-toolbar-plugin';\nimport { FloatingToolbarPlugin } from '@/components/editor/plugins/floating-toolbar-plugin';\nimport { tabbablePlugin } from '@/components/editor/plugins/tabbable-plugin';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '') => {\n  const overridePlugins = usePlaygroundEnabled(id);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  const plugins: any[] = [\n    ...copilotPlugins,\n    ...editorPlugins,\n    id === 'list' ? FixedToolbarListPlugin : FixedToolbarPlugin,\n    FloatingToolbarPlugin,\n\n    id === 'list' ? autoformatListPlugin : autoformatPlugin,\n    TablePlugin.configure({\n      options: {\n        enableMerging: id === 'tableMerge',\n      },\n    }),\n    ListPlugin,\n    TodoListPlugin,\n    ExcalidrawPlugin,\n    NormalizeTypesPlugin.configure({\n      options: {\n        rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n      },\n    }),\n    SingleLinePlugin,\n    // Testing\n    PlaywrightPlugin.configure({\n      enabled: process.env.NODE_ENV !== 'production',\n    }),\n  ];\n\n  if (id === 'tabbable') {\n    plugins.push(tabbablePlugin);\n  }\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins,\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const editor = usePlaygroundEditor(id);\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <EditorContainer className={cn(id && 'h-[500px]', className)}>\n          <Editor\n            variant=\"demo\"\n            className={cn(id ? 'h-[calc(100%-37px)] pb-8' : 'pb-[20vh]')}\n            spellCheck={false}\n          />\n        </EditorContainer>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
       "path": "example/playground-demo.tsx",
       "target": "components/playground-demo.tsx",
       "type": "registry:example"
diff --git a/apps/www/public/r/styles/default/hr-demo.json b/apps/www/public/r/styles/default/hr-demo.json
index 92f22408c0..d1af6e86a8 100644
--- a/apps/www/public/r/styles/default/hr-demo.json
+++ b/apps/www/public/r/styles/default/hr-demo.json
@@ -5,7 +5,7 @@
   },
   "files": [
     {
-      "content": "'use client';\n\nimport React from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { PlaceholderPlugin } from '@udecode/plate-media/react';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { TablePlugin } from '@udecode/plate-table/react';\n\nimport { settingsStore } from '@/components/context/settings-store';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { autoformatPlugin as autoformatListPlugin } from '@/components/editor/plugins/autoformat-list-plugin';\nimport { autoformatPlugin } from '@/components/editor/plugins/autoformat-plugin';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { FixedToolbarListPlugin } from '@/components/editor/plugins/fixed-toolbar-list-plugin';\nimport { FixedToolbarPlugin } from '@/components/editor/plugins/fixed-toolbar-plugin';\nimport { FloatingToolbarPlugin } from '@/components/editor/plugins/floating-toolbar-plugin';\nimport { tabbablePlugin } from '@/components/editor/plugins/tabbable-plugin';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { MediaPlaceholderElement } from '@/components/plate-ui/media-placeholder-element';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '') => {\n  const overridePlugins = usePlaygroundEnabled(id);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  const plugins: any[] = [\n    ...copilotPlugins,\n    ...editorPlugins,\n    id === 'list' ? FixedToolbarListPlugin : FixedToolbarPlugin,\n    FloatingToolbarPlugin,\n\n    id === 'list' ? autoformatListPlugin : autoformatPlugin,\n    TablePlugin.configure({\n      options: {\n        enableMerging: id === 'tableMerge',\n      },\n    }),\n    ListPlugin,\n    TodoListPlugin,\n    ExcalidrawPlugin,\n    NormalizeTypesPlugin.configure({\n      options: {\n        rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n      },\n    }),\n    SingleLinePlugin,\n    PlaceholderPlugin.withComponent(MediaPlaceholderElement),\n    // Testing\n    PlaywrightPlugin.configure({\n      enabled: process.env.NODE_ENV !== 'production',\n    }),\n  ];\n\n  if (id === 'tabbable') {\n    plugins.push(tabbablePlugin);\n  }\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins,\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const editor = usePlaygroundEditor(id);\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <EditorContainer className={cn(id && 'h-[500px]', className)}>\n          <Editor\n            variant=\"demo\"\n            className={cn(id ? 'h-[calc(100%-37px)] pb-8' : 'pb-[20vh]')}\n            spellCheck={false}\n          />\n        </EditorContainer>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
+      "content": "'use client';\n\nimport React from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { TablePlugin } from '@udecode/plate-table/react';\n\nimport { settingsStore } from '@/components/context/settings-store';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { autoformatPlugin as autoformatListPlugin } from '@/components/editor/plugins/autoformat-list-plugin';\nimport { autoformatPlugin } from '@/components/editor/plugins/autoformat-plugin';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { FixedToolbarListPlugin } from '@/components/editor/plugins/fixed-toolbar-list-plugin';\nimport { FixedToolbarPlugin } from '@/components/editor/plugins/fixed-toolbar-plugin';\nimport { FloatingToolbarPlugin } from '@/components/editor/plugins/floating-toolbar-plugin';\nimport { tabbablePlugin } from '@/components/editor/plugins/tabbable-plugin';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '') => {\n  const overridePlugins = usePlaygroundEnabled(id);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  const plugins: any[] = [\n    ...copilotPlugins,\n    ...editorPlugins,\n    id === 'list' ? FixedToolbarListPlugin : FixedToolbarPlugin,\n    FloatingToolbarPlugin,\n\n    id === 'list' ? autoformatListPlugin : autoformatPlugin,\n    TablePlugin.configure({\n      options: {\n        enableMerging: id === 'tableMerge',\n      },\n    }),\n    ListPlugin,\n    TodoListPlugin,\n    ExcalidrawPlugin,\n    NormalizeTypesPlugin.configure({\n      options: {\n        rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n      },\n    }),\n    SingleLinePlugin,\n    // Testing\n    PlaywrightPlugin.configure({\n      enabled: process.env.NODE_ENV !== 'production',\n    }),\n  ];\n\n  if (id === 'tabbable') {\n    plugins.push(tabbablePlugin);\n  }\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins,\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const editor = usePlaygroundEditor(id);\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <EditorContainer className={cn(id && 'h-[500px]', className)}>\n          <Editor\n            variant=\"demo\"\n            className={cn(id ? 'h-[calc(100%-37px)] pb-8' : 'pb-[20vh]')}\n            spellCheck={false}\n          />\n        </EditorContainer>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
       "path": "example/playground-demo.tsx",
       "target": "components/playground-demo.tsx",
       "type": "registry:example"
diff --git a/apps/www/public/r/styles/default/indent-demo.json b/apps/www/public/r/styles/default/indent-demo.json
index 89dad9aa96..aeb3a9ac11 100644
--- a/apps/www/public/r/styles/default/indent-demo.json
+++ b/apps/www/public/r/styles/default/indent-demo.json
@@ -4,7 +4,7 @@
   },
   "files": [
     {
-      "content": "'use client';\n\nimport React from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { PlaceholderPlugin } from '@udecode/plate-media/react';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { TablePlugin } from '@udecode/plate-table/react';\n\nimport { settingsStore } from '@/components/context/settings-store';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { autoformatPlugin as autoformatListPlugin } from '@/components/editor/plugins/autoformat-list-plugin';\nimport { autoformatPlugin } from '@/components/editor/plugins/autoformat-plugin';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { FixedToolbarListPlugin } from '@/components/editor/plugins/fixed-toolbar-list-plugin';\nimport { FixedToolbarPlugin } from '@/components/editor/plugins/fixed-toolbar-plugin';\nimport { FloatingToolbarPlugin } from '@/components/editor/plugins/floating-toolbar-plugin';\nimport { tabbablePlugin } from '@/components/editor/plugins/tabbable-plugin';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { MediaPlaceholderElement } from '@/components/plate-ui/media-placeholder-element';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '') => {\n  const overridePlugins = usePlaygroundEnabled(id);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  const plugins: any[] = [\n    ...copilotPlugins,\n    ...editorPlugins,\n    id === 'list' ? FixedToolbarListPlugin : FixedToolbarPlugin,\n    FloatingToolbarPlugin,\n\n    id === 'list' ? autoformatListPlugin : autoformatPlugin,\n    TablePlugin.configure({\n      options: {\n        enableMerging: id === 'tableMerge',\n      },\n    }),\n    ListPlugin,\n    TodoListPlugin,\n    ExcalidrawPlugin,\n    NormalizeTypesPlugin.configure({\n      options: {\n        rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n      },\n    }),\n    SingleLinePlugin,\n    PlaceholderPlugin.withComponent(MediaPlaceholderElement),\n    // Testing\n    PlaywrightPlugin.configure({\n      enabled: process.env.NODE_ENV !== 'production',\n    }),\n  ];\n\n  if (id === 'tabbable') {\n    plugins.push(tabbablePlugin);\n  }\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins,\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const editor = usePlaygroundEditor(id);\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <EditorContainer className={cn(id && 'h-[500px]', className)}>\n          <Editor\n            variant=\"demo\"\n            className={cn(id ? 'h-[calc(100%-37px)] pb-8' : 'pb-[20vh]')}\n            spellCheck={false}\n          />\n        </EditorContainer>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
+      "content": "'use client';\n\nimport React from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { TablePlugin } from '@udecode/plate-table/react';\n\nimport { settingsStore } from '@/components/context/settings-store';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { autoformatPlugin as autoformatListPlugin } from '@/components/editor/plugins/autoformat-list-plugin';\nimport { autoformatPlugin } from '@/components/editor/plugins/autoformat-plugin';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { FixedToolbarListPlugin } from '@/components/editor/plugins/fixed-toolbar-list-plugin';\nimport { FixedToolbarPlugin } from '@/components/editor/plugins/fixed-toolbar-plugin';\nimport { FloatingToolbarPlugin } from '@/components/editor/plugins/floating-toolbar-plugin';\nimport { tabbablePlugin } from '@/components/editor/plugins/tabbable-plugin';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '') => {\n  const overridePlugins = usePlaygroundEnabled(id);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  const plugins: any[] = [\n    ...copilotPlugins,\n    ...editorPlugins,\n    id === 'list' ? FixedToolbarListPlugin : FixedToolbarPlugin,\n    FloatingToolbarPlugin,\n\n    id === 'list' ? autoformatListPlugin : autoformatPlugin,\n    TablePlugin.configure({\n      options: {\n        enableMerging: id === 'tableMerge',\n      },\n    }),\n    ListPlugin,\n    TodoListPlugin,\n    ExcalidrawPlugin,\n    NormalizeTypesPlugin.configure({\n      options: {\n        rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n      },\n    }),\n    SingleLinePlugin,\n    // Testing\n    PlaywrightPlugin.configure({\n      enabled: process.env.NODE_ENV !== 'production',\n    }),\n  ];\n\n  if (id === 'tabbable') {\n    plugins.push(tabbablePlugin);\n  }\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins,\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const editor = usePlaygroundEditor(id);\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <EditorContainer className={cn(id && 'h-[500px]', className)}>\n          <Editor\n            variant=\"demo\"\n            className={cn(id ? 'h-[calc(100%-37px)] pb-8' : 'pb-[20vh]')}\n            spellCheck={false}\n          />\n        </EditorContainer>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
       "path": "example/playground-demo.tsx",
       "target": "components/playground-demo.tsx",
       "type": "registry:example"
diff --git a/apps/www/public/r/styles/default/kbd-demo.json b/apps/www/public/r/styles/default/kbd-demo.json
index 62c2ebf005..22709d9338 100644
--- a/apps/www/public/r/styles/default/kbd-demo.json
+++ b/apps/www/public/r/styles/default/kbd-demo.json
@@ -4,7 +4,7 @@
   },
   "files": [
     {
-      "content": "'use client';\n\nimport React from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { PlaceholderPlugin } from '@udecode/plate-media/react';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { TablePlugin } from '@udecode/plate-table/react';\n\nimport { settingsStore } from '@/components/context/settings-store';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { autoformatPlugin as autoformatListPlugin } from '@/components/editor/plugins/autoformat-list-plugin';\nimport { autoformatPlugin } from '@/components/editor/plugins/autoformat-plugin';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { FixedToolbarListPlugin } from '@/components/editor/plugins/fixed-toolbar-list-plugin';\nimport { FixedToolbarPlugin } from '@/components/editor/plugins/fixed-toolbar-plugin';\nimport { FloatingToolbarPlugin } from '@/components/editor/plugins/floating-toolbar-plugin';\nimport { tabbablePlugin } from '@/components/editor/plugins/tabbable-plugin';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { MediaPlaceholderElement } from '@/components/plate-ui/media-placeholder-element';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '') => {\n  const overridePlugins = usePlaygroundEnabled(id);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  const plugins: any[] = [\n    ...copilotPlugins,\n    ...editorPlugins,\n    id === 'list' ? FixedToolbarListPlugin : FixedToolbarPlugin,\n    FloatingToolbarPlugin,\n\n    id === 'list' ? autoformatListPlugin : autoformatPlugin,\n    TablePlugin.configure({\n      options: {\n        enableMerging: id === 'tableMerge',\n      },\n    }),\n    ListPlugin,\n    TodoListPlugin,\n    ExcalidrawPlugin,\n    NormalizeTypesPlugin.configure({\n      options: {\n        rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n      },\n    }),\n    SingleLinePlugin,\n    PlaceholderPlugin.withComponent(MediaPlaceholderElement),\n    // Testing\n    PlaywrightPlugin.configure({\n      enabled: process.env.NODE_ENV !== 'production',\n    }),\n  ];\n\n  if (id === 'tabbable') {\n    plugins.push(tabbablePlugin);\n  }\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins,\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const editor = usePlaygroundEditor(id);\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <EditorContainer className={cn(id && 'h-[500px]', className)}>\n          <Editor\n            variant=\"demo\"\n            className={cn(id ? 'h-[calc(100%-37px)] pb-8' : 'pb-[20vh]')}\n            spellCheck={false}\n          />\n        </EditorContainer>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
+      "content": "'use client';\n\nimport React from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { TablePlugin } from '@udecode/plate-table/react';\n\nimport { settingsStore } from '@/components/context/settings-store';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { autoformatPlugin as autoformatListPlugin } from '@/components/editor/plugins/autoformat-list-plugin';\nimport { autoformatPlugin } from '@/components/editor/plugins/autoformat-plugin';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { FixedToolbarListPlugin } from '@/components/editor/plugins/fixed-toolbar-list-plugin';\nimport { FixedToolbarPlugin } from '@/components/editor/plugins/fixed-toolbar-plugin';\nimport { FloatingToolbarPlugin } from '@/components/editor/plugins/floating-toolbar-plugin';\nimport { tabbablePlugin } from '@/components/editor/plugins/tabbable-plugin';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '') => {\n  const overridePlugins = usePlaygroundEnabled(id);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  const plugins: any[] = [\n    ...copilotPlugins,\n    ...editorPlugins,\n    id === 'list' ? FixedToolbarListPlugin : FixedToolbarPlugin,\n    FloatingToolbarPlugin,\n\n    id === 'list' ? autoformatListPlugin : autoformatPlugin,\n    TablePlugin.configure({\n      options: {\n        enableMerging: id === 'tableMerge',\n      },\n    }),\n    ListPlugin,\n    TodoListPlugin,\n    ExcalidrawPlugin,\n    NormalizeTypesPlugin.configure({\n      options: {\n        rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n      },\n    }),\n    SingleLinePlugin,\n    // Testing\n    PlaywrightPlugin.configure({\n      enabled: process.env.NODE_ENV !== 'production',\n    }),\n  ];\n\n  if (id === 'tabbable') {\n    plugins.push(tabbablePlugin);\n  }\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins,\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const editor = usePlaygroundEditor(id);\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <EditorContainer className={cn(id && 'h-[500px]', className)}>\n          <Editor\n            variant=\"demo\"\n            className={cn(id ? 'h-[calc(100%-37px)] pb-8' : 'pb-[20vh]')}\n            spellCheck={false}\n          />\n        </EditorContainer>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
       "path": "example/playground-demo.tsx",
       "target": "components/playground-demo.tsx",
       "type": "registry:example"
diff --git a/apps/www/public/r/styles/default/line-height-demo.json b/apps/www/public/r/styles/default/line-height-demo.json
index 232417bfe4..4341e9f35e 100644
--- a/apps/www/public/r/styles/default/line-height-demo.json
+++ b/apps/www/public/r/styles/default/line-height-demo.json
@@ -4,7 +4,7 @@
   },
   "files": [
     {
-      "content": "'use client';\n\nimport React from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { PlaceholderPlugin } from '@udecode/plate-media/react';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { TablePlugin } from '@udecode/plate-table/react';\n\nimport { settingsStore } from '@/components/context/settings-store';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { autoformatPlugin as autoformatListPlugin } from '@/components/editor/plugins/autoformat-list-plugin';\nimport { autoformatPlugin } from '@/components/editor/plugins/autoformat-plugin';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { FixedToolbarListPlugin } from '@/components/editor/plugins/fixed-toolbar-list-plugin';\nimport { FixedToolbarPlugin } from '@/components/editor/plugins/fixed-toolbar-plugin';\nimport { FloatingToolbarPlugin } from '@/components/editor/plugins/floating-toolbar-plugin';\nimport { tabbablePlugin } from '@/components/editor/plugins/tabbable-plugin';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { MediaPlaceholderElement } from '@/components/plate-ui/media-placeholder-element';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '') => {\n  const overridePlugins = usePlaygroundEnabled(id);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  const plugins: any[] = [\n    ...copilotPlugins,\n    ...editorPlugins,\n    id === 'list' ? FixedToolbarListPlugin : FixedToolbarPlugin,\n    FloatingToolbarPlugin,\n\n    id === 'list' ? autoformatListPlugin : autoformatPlugin,\n    TablePlugin.configure({\n      options: {\n        enableMerging: id === 'tableMerge',\n      },\n    }),\n    ListPlugin,\n    TodoListPlugin,\n    ExcalidrawPlugin,\n    NormalizeTypesPlugin.configure({\n      options: {\n        rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n      },\n    }),\n    SingleLinePlugin,\n    PlaceholderPlugin.withComponent(MediaPlaceholderElement),\n    // Testing\n    PlaywrightPlugin.configure({\n      enabled: process.env.NODE_ENV !== 'production',\n    }),\n  ];\n\n  if (id === 'tabbable') {\n    plugins.push(tabbablePlugin);\n  }\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins,\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const editor = usePlaygroundEditor(id);\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <EditorContainer className={cn(id && 'h-[500px]', className)}>\n          <Editor\n            variant=\"demo\"\n            className={cn(id ? 'h-[calc(100%-37px)] pb-8' : 'pb-[20vh]')}\n            spellCheck={false}\n          />\n        </EditorContainer>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
+      "content": "'use client';\n\nimport React from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { TablePlugin } from '@udecode/plate-table/react';\n\nimport { settingsStore } from '@/components/context/settings-store';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { autoformatPlugin as autoformatListPlugin } from '@/components/editor/plugins/autoformat-list-plugin';\nimport { autoformatPlugin } from '@/components/editor/plugins/autoformat-plugin';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { FixedToolbarListPlugin } from '@/components/editor/plugins/fixed-toolbar-list-plugin';\nimport { FixedToolbarPlugin } from '@/components/editor/plugins/fixed-toolbar-plugin';\nimport { FloatingToolbarPlugin } from '@/components/editor/plugins/floating-toolbar-plugin';\nimport { tabbablePlugin } from '@/components/editor/plugins/tabbable-plugin';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '') => {\n  const overridePlugins = usePlaygroundEnabled(id);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  const plugins: any[] = [\n    ...copilotPlugins,\n    ...editorPlugins,\n    id === 'list' ? FixedToolbarListPlugin : FixedToolbarPlugin,\n    FloatingToolbarPlugin,\n\n    id === 'list' ? autoformatListPlugin : autoformatPlugin,\n    TablePlugin.configure({\n      options: {\n        enableMerging: id === 'tableMerge',\n      },\n    }),\n    ListPlugin,\n    TodoListPlugin,\n    ExcalidrawPlugin,\n    NormalizeTypesPlugin.configure({\n      options: {\n        rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n      },\n    }),\n    SingleLinePlugin,\n    // Testing\n    PlaywrightPlugin.configure({\n      enabled: process.env.NODE_ENV !== 'production',\n    }),\n  ];\n\n  if (id === 'tabbable') {\n    plugins.push(tabbablePlugin);\n  }\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins,\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const editor = usePlaygroundEditor(id);\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <EditorContainer className={cn(id && 'h-[500px]', className)}>\n          <Editor\n            variant=\"demo\"\n            className={cn(id ? 'h-[calc(100%-37px)] pb-8' : 'pb-[20vh]')}\n            spellCheck={false}\n          />\n        </EditorContainer>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
       "path": "example/playground-demo.tsx",
       "target": "components/playground-demo.tsx",
       "type": "registry:example"
diff --git a/apps/www/public/r/styles/default/link-demo.json b/apps/www/public/r/styles/default/link-demo.json
index ad0be45e82..1c2a5e15be 100644
--- a/apps/www/public/r/styles/default/link-demo.json
+++ b/apps/www/public/r/styles/default/link-demo.json
@@ -4,7 +4,7 @@
   },
   "files": [
     {
-      "content": "'use client';\n\nimport React from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { PlaceholderPlugin } from '@udecode/plate-media/react';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { TablePlugin } from '@udecode/plate-table/react';\n\nimport { settingsStore } from '@/components/context/settings-store';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { autoformatPlugin as autoformatListPlugin } from '@/components/editor/plugins/autoformat-list-plugin';\nimport { autoformatPlugin } from '@/components/editor/plugins/autoformat-plugin';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { FixedToolbarListPlugin } from '@/components/editor/plugins/fixed-toolbar-list-plugin';\nimport { FixedToolbarPlugin } from '@/components/editor/plugins/fixed-toolbar-plugin';\nimport { FloatingToolbarPlugin } from '@/components/editor/plugins/floating-toolbar-plugin';\nimport { tabbablePlugin } from '@/components/editor/plugins/tabbable-plugin';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { MediaPlaceholderElement } from '@/components/plate-ui/media-placeholder-element';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '') => {\n  const overridePlugins = usePlaygroundEnabled(id);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  const plugins: any[] = [\n    ...copilotPlugins,\n    ...editorPlugins,\n    id === 'list' ? FixedToolbarListPlugin : FixedToolbarPlugin,\n    FloatingToolbarPlugin,\n\n    id === 'list' ? autoformatListPlugin : autoformatPlugin,\n    TablePlugin.configure({\n      options: {\n        enableMerging: id === 'tableMerge',\n      },\n    }),\n    ListPlugin,\n    TodoListPlugin,\n    ExcalidrawPlugin,\n    NormalizeTypesPlugin.configure({\n      options: {\n        rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n      },\n    }),\n    SingleLinePlugin,\n    PlaceholderPlugin.withComponent(MediaPlaceholderElement),\n    // Testing\n    PlaywrightPlugin.configure({\n      enabled: process.env.NODE_ENV !== 'production',\n    }),\n  ];\n\n  if (id === 'tabbable') {\n    plugins.push(tabbablePlugin);\n  }\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins,\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const editor = usePlaygroundEditor(id);\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <EditorContainer className={cn(id && 'h-[500px]', className)}>\n          <Editor\n            variant=\"demo\"\n            className={cn(id ? 'h-[calc(100%-37px)] pb-8' : 'pb-[20vh]')}\n            spellCheck={false}\n          />\n        </EditorContainer>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
+      "content": "'use client';\n\nimport React from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { TablePlugin } from '@udecode/plate-table/react';\n\nimport { settingsStore } from '@/components/context/settings-store';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { autoformatPlugin as autoformatListPlugin } from '@/components/editor/plugins/autoformat-list-plugin';\nimport { autoformatPlugin } from '@/components/editor/plugins/autoformat-plugin';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { FixedToolbarListPlugin } from '@/components/editor/plugins/fixed-toolbar-list-plugin';\nimport { FixedToolbarPlugin } from '@/components/editor/plugins/fixed-toolbar-plugin';\nimport { FloatingToolbarPlugin } from '@/components/editor/plugins/floating-toolbar-plugin';\nimport { tabbablePlugin } from '@/components/editor/plugins/tabbable-plugin';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '') => {\n  const overridePlugins = usePlaygroundEnabled(id);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  const plugins: any[] = [\n    ...copilotPlugins,\n    ...editorPlugins,\n    id === 'list' ? FixedToolbarListPlugin : FixedToolbarPlugin,\n    FloatingToolbarPlugin,\n\n    id === 'list' ? autoformatListPlugin : autoformatPlugin,\n    TablePlugin.configure({\n      options: {\n        enableMerging: id === 'tableMerge',\n      },\n    }),\n    ListPlugin,\n    TodoListPlugin,\n    ExcalidrawPlugin,\n    NormalizeTypesPlugin.configure({\n      options: {\n        rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n      },\n    }),\n    SingleLinePlugin,\n    // Testing\n    PlaywrightPlugin.configure({\n      enabled: process.env.NODE_ENV !== 'production',\n    }),\n  ];\n\n  if (id === 'tabbable') {\n    plugins.push(tabbablePlugin);\n  }\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins,\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const editor = usePlaygroundEditor(id);\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <EditorContainer className={cn(id && 'h-[500px]', className)}>\n          <Editor\n            variant=\"demo\"\n            className={cn(id ? 'h-[calc(100%-37px)] pb-8' : 'pb-[20vh]')}\n            spellCheck={false}\n          />\n        </EditorContainer>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
       "path": "example/playground-demo.tsx",
       "target": "components/playground-demo.tsx",
       "type": "registry:example"
diff --git a/apps/www/public/r/styles/default/list-demo.json b/apps/www/public/r/styles/default/list-demo.json
index 98ed04cbe1..6aa27b68ff 100644
--- a/apps/www/public/r/styles/default/list-demo.json
+++ b/apps/www/public/r/styles/default/list-demo.json
@@ -4,7 +4,7 @@
   },
   "files": [
     {
-      "content": "'use client';\n\nimport React from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { PlaceholderPlugin } from '@udecode/plate-media/react';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { TablePlugin } from '@udecode/plate-table/react';\n\nimport { settingsStore } from '@/components/context/settings-store';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { autoformatPlugin as autoformatListPlugin } from '@/components/editor/plugins/autoformat-list-plugin';\nimport { autoformatPlugin } from '@/components/editor/plugins/autoformat-plugin';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { FixedToolbarListPlugin } from '@/components/editor/plugins/fixed-toolbar-list-plugin';\nimport { FixedToolbarPlugin } from '@/components/editor/plugins/fixed-toolbar-plugin';\nimport { FloatingToolbarPlugin } from '@/components/editor/plugins/floating-toolbar-plugin';\nimport { tabbablePlugin } from '@/components/editor/plugins/tabbable-plugin';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { MediaPlaceholderElement } from '@/components/plate-ui/media-placeholder-element';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '') => {\n  const overridePlugins = usePlaygroundEnabled(id);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  const plugins: any[] = [\n    ...copilotPlugins,\n    ...editorPlugins,\n    id === 'list' ? FixedToolbarListPlugin : FixedToolbarPlugin,\n    FloatingToolbarPlugin,\n\n    id === 'list' ? autoformatListPlugin : autoformatPlugin,\n    TablePlugin.configure({\n      options: {\n        enableMerging: id === 'tableMerge',\n      },\n    }),\n    ListPlugin,\n    TodoListPlugin,\n    ExcalidrawPlugin,\n    NormalizeTypesPlugin.configure({\n      options: {\n        rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n      },\n    }),\n    SingleLinePlugin,\n    PlaceholderPlugin.withComponent(MediaPlaceholderElement),\n    // Testing\n    PlaywrightPlugin.configure({\n      enabled: process.env.NODE_ENV !== 'production',\n    }),\n  ];\n\n  if (id === 'tabbable') {\n    plugins.push(tabbablePlugin);\n  }\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins,\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const editor = usePlaygroundEditor(id);\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <EditorContainer className={cn(id && 'h-[500px]', className)}>\n          <Editor\n            variant=\"demo\"\n            className={cn(id ? 'h-[calc(100%-37px)] pb-8' : 'pb-[20vh]')}\n            spellCheck={false}\n          />\n        </EditorContainer>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
+      "content": "'use client';\n\nimport React from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { TablePlugin } from '@udecode/plate-table/react';\n\nimport { settingsStore } from '@/components/context/settings-store';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { autoformatPlugin as autoformatListPlugin } from '@/components/editor/plugins/autoformat-list-plugin';\nimport { autoformatPlugin } from '@/components/editor/plugins/autoformat-plugin';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { FixedToolbarListPlugin } from '@/components/editor/plugins/fixed-toolbar-list-plugin';\nimport { FixedToolbarPlugin } from '@/components/editor/plugins/fixed-toolbar-plugin';\nimport { FloatingToolbarPlugin } from '@/components/editor/plugins/floating-toolbar-plugin';\nimport { tabbablePlugin } from '@/components/editor/plugins/tabbable-plugin';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '') => {\n  const overridePlugins = usePlaygroundEnabled(id);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  const plugins: any[] = [\n    ...copilotPlugins,\n    ...editorPlugins,\n    id === 'list' ? FixedToolbarListPlugin : FixedToolbarPlugin,\n    FloatingToolbarPlugin,\n\n    id === 'list' ? autoformatListPlugin : autoformatPlugin,\n    TablePlugin.configure({\n      options: {\n        enableMerging: id === 'tableMerge',\n      },\n    }),\n    ListPlugin,\n    TodoListPlugin,\n    ExcalidrawPlugin,\n    NormalizeTypesPlugin.configure({\n      options: {\n        rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n      },\n    }),\n    SingleLinePlugin,\n    // Testing\n    PlaywrightPlugin.configure({\n      enabled: process.env.NODE_ENV !== 'production',\n    }),\n  ];\n\n  if (id === 'tabbable') {\n    plugins.push(tabbablePlugin);\n  }\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins,\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const editor = usePlaygroundEditor(id);\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <EditorContainer className={cn(id && 'h-[500px]', className)}>\n          <Editor\n            variant=\"demo\"\n            className={cn(id ? 'h-[calc(100%-37px)] pb-8' : 'pb-[20vh]')}\n            spellCheck={false}\n          />\n        </EditorContainer>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
       "path": "example/playground-demo.tsx",
       "target": "components/playground-demo.tsx",
       "type": "registry:example"
diff --git a/apps/www/public/r/styles/default/media-demo.json b/apps/www/public/r/styles/default/media-demo.json
index 701698fc31..5744bd50db 100644
--- a/apps/www/public/r/styles/default/media-demo.json
+++ b/apps/www/public/r/styles/default/media-demo.json
@@ -4,7 +4,7 @@
   },
   "files": [
     {
-      "content": "'use client';\n\nimport React from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { PlaceholderPlugin } from '@udecode/plate-media/react';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { TablePlugin } from '@udecode/plate-table/react';\n\nimport { settingsStore } from '@/components/context/settings-store';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { autoformatPlugin as autoformatListPlugin } from '@/components/editor/plugins/autoformat-list-plugin';\nimport { autoformatPlugin } from '@/components/editor/plugins/autoformat-plugin';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { FixedToolbarListPlugin } from '@/components/editor/plugins/fixed-toolbar-list-plugin';\nimport { FixedToolbarPlugin } from '@/components/editor/plugins/fixed-toolbar-plugin';\nimport { FloatingToolbarPlugin } from '@/components/editor/plugins/floating-toolbar-plugin';\nimport { tabbablePlugin } from '@/components/editor/plugins/tabbable-plugin';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { MediaPlaceholderElement } from '@/components/plate-ui/media-placeholder-element';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '') => {\n  const overridePlugins = usePlaygroundEnabled(id);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  const plugins: any[] = [\n    ...copilotPlugins,\n    ...editorPlugins,\n    id === 'list' ? FixedToolbarListPlugin : FixedToolbarPlugin,\n    FloatingToolbarPlugin,\n\n    id === 'list' ? autoformatListPlugin : autoformatPlugin,\n    TablePlugin.configure({\n      options: {\n        enableMerging: id === 'tableMerge',\n      },\n    }),\n    ListPlugin,\n    TodoListPlugin,\n    ExcalidrawPlugin,\n    NormalizeTypesPlugin.configure({\n      options: {\n        rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n      },\n    }),\n    SingleLinePlugin,\n    PlaceholderPlugin.withComponent(MediaPlaceholderElement),\n    // Testing\n    PlaywrightPlugin.configure({\n      enabled: process.env.NODE_ENV !== 'production',\n    }),\n  ];\n\n  if (id === 'tabbable') {\n    plugins.push(tabbablePlugin);\n  }\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins,\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const editor = usePlaygroundEditor(id);\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <EditorContainer className={cn(id && 'h-[500px]', className)}>\n          <Editor\n            variant=\"demo\"\n            className={cn(id ? 'h-[calc(100%-37px)] pb-8' : 'pb-[20vh]')}\n            spellCheck={false}\n          />\n        </EditorContainer>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
+      "content": "'use client';\n\nimport React from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { TablePlugin } from '@udecode/plate-table/react';\n\nimport { settingsStore } from '@/components/context/settings-store';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { autoformatPlugin as autoformatListPlugin } from '@/components/editor/plugins/autoformat-list-plugin';\nimport { autoformatPlugin } from '@/components/editor/plugins/autoformat-plugin';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { FixedToolbarListPlugin } from '@/components/editor/plugins/fixed-toolbar-list-plugin';\nimport { FixedToolbarPlugin } from '@/components/editor/plugins/fixed-toolbar-plugin';\nimport { FloatingToolbarPlugin } from '@/components/editor/plugins/floating-toolbar-plugin';\nimport { tabbablePlugin } from '@/components/editor/plugins/tabbable-plugin';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '') => {\n  const overridePlugins = usePlaygroundEnabled(id);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  const plugins: any[] = [\n    ...copilotPlugins,\n    ...editorPlugins,\n    id === 'list' ? FixedToolbarListPlugin : FixedToolbarPlugin,\n    FloatingToolbarPlugin,\n\n    id === 'list' ? autoformatListPlugin : autoformatPlugin,\n    TablePlugin.configure({\n      options: {\n        enableMerging: id === 'tableMerge',\n      },\n    }),\n    ListPlugin,\n    TodoListPlugin,\n    ExcalidrawPlugin,\n    NormalizeTypesPlugin.configure({\n      options: {\n        rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n      },\n    }),\n    SingleLinePlugin,\n    // Testing\n    PlaywrightPlugin.configure({\n      enabled: process.env.NODE_ENV !== 'production',\n    }),\n  ];\n\n  if (id === 'tabbable') {\n    plugins.push(tabbablePlugin);\n  }\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins,\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const editor = usePlaygroundEditor(id);\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <EditorContainer className={cn(id && 'h-[500px]', className)}>\n          <Editor\n            variant=\"demo\"\n            className={cn(id ? 'h-[calc(100%-37px)] pb-8' : 'pb-[20vh]')}\n            spellCheck={false}\n          />\n        </EditorContainer>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
       "path": "example/playground-demo.tsx",
       "target": "components/playground-demo.tsx",
       "type": "registry:example"
diff --git a/apps/www/public/r/styles/default/media-dropdown-menu.json b/apps/www/public/r/styles/default/media-dropdown-menu.json
index 291e1c9f48..1ea551a735 100644
--- a/apps/www/public/r/styles/default/media-dropdown-menu.json
+++ b/apps/www/public/r/styles/default/media-dropdown-menu.json
@@ -17,7 +17,7 @@
   },
   "files": [
     {
-      "content": "'use client';\n\nimport React from 'react';\n\nimport type { DropdownMenuProps } from '@radix-ui/react-dropdown-menu';\n\nimport { cn } from '@udecode/cn';\nimport { useEditorPlugin } from '@udecode/plate-core/react';\nimport {\n  AudioPlugin,\n  FilePlugin,\n  ImagePlugin,\n  MediaEmbedPlugin,\n  VideoPlugin,\n} from '@udecode/plate-media/react';\nimport { focusEditor } from '@udecode/slate-react';\nimport {\n  AudioLinesIcon,\n  FileUpIcon,\n  FilmIcon,\n  ImageIcon,\n  LinkIcon,\n} from 'lucide-react';\nimport { useFilePicker } from 'use-file-picker';\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuTrigger,\n  useOpenState,\n} from './dropdown-menu';\nimport { ToolbarSplitButton } from './toolbar';\n\nconst MEDIA_CONFIG: Record<\n  string,\n  {\n    accept: string[];\n    icon: React.ReactNode;\n    tooltip: string;\n  }\n> = {\n  [AudioPlugin.key]: {\n    accept: ['audio/*'],\n    icon: <AudioLinesIcon />,\n    tooltip: 'Audio',\n  },\n  [FilePlugin.key]: {\n    accept: ['*'],\n    icon: <FileUpIcon />,\n    tooltip: 'File',\n  },\n  [ImagePlugin.key]: {\n    accept: ['image/*'],\n    icon: <ImageIcon />,\n    tooltip: 'Image',\n  },\n  [VideoPlugin.key]: {\n    accept: ['video/*'],\n    icon: <FilmIcon />,\n    tooltip: 'Video',\n  },\n};\n\nexport function MediaDropdownMenu({\n  children,\n  nodeType,\n  ...props\n}: DropdownMenuProps & { nodeType: string }) {\n  const currentConfig = MEDIA_CONFIG[nodeType];\n\n  const { editor, setOptions } = useEditorPlugin(MediaEmbedPlugin);\n  const { openFilePicker } = useFilePicker({\n    accept: currentConfig.accept,\n    multiple: true,\n    onFilesSelected: ({ plainFiles: updatedFiles }) => {\n      (editor as any).tf.insert.media(updatedFiles);\n    },\n  });\n\n  const openState = useOpenState();\n\n  return (\n    <DropdownMenu {...openState} modal={false} {...props}>\n      <DropdownMenuTrigger asChild>\n        <ToolbarSplitButton\n          onMainButtonClick={() => openFilePicker()}\n          pressed={openState.open}\n          tooltip={currentConfig.tooltip}\n        >\n          {currentConfig.icon}\n        </ToolbarSplitButton>\n      </DropdownMenuTrigger>\n\n      <DropdownMenuContent\n        className={cn('min-w-0 data-[state=closed]:hidden')}\n        align=\"start\"\n      >\n        <DropdownMenuRadioGroup>\n          <DropdownMenuRadioItem\n            value=\"upload\"\n            onSelect={() => openFilePicker()}\n            hideIcon\n          >\n            <div className=\"flex items-center gap-2\">\n              {currentConfig.icon}\n              <span className=\"text-sm\">Upload from computer</span>\n            </div>\n          </DropdownMenuRadioItem>\n          <DropdownMenuRadioItem\n            value=\"url\"\n            onSelect={() => {\n              // api.media_embed.openFloating(nodeType);\n              focusEditor(editor);\n              setOptions({ isFloatingOpen: true, mediaType: nodeType });\n            }}\n            hideIcon\n          >\n            <div className=\"flex items-center gap-2\">\n              <LinkIcon />\n              <span className=\"text-sm\">Insert via URL</span>\n            </div>\n          </DropdownMenuRadioItem>\n        </DropdownMenuRadioGroup>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n}\n",
+      "content": "'use client';\n\nimport React from 'react';\n\nimport type { DropdownMenuProps } from '@radix-ui/react-dropdown-menu';\n\nimport { cn } from '@udecode/cn';\nimport { useEditorPlugin } from '@udecode/plate-core/react';\nimport {\n  AudioPlugin,\n  FilePlugin,\n  ImagePlugin,\n  MediaEmbedPlugin,\n  VideoPlugin,\n} from '@udecode/plate-media/react';\nimport { focusEditor } from '@udecode/slate-react';\nimport {\n  AudioLinesIcon,\n  FileUpIcon,\n  FilmIcon,\n  ImageIcon,\n  LinkIcon,\n} from 'lucide-react';\nimport { useFilePicker } from 'use-file-picker';\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuTrigger,\n  useOpenState,\n} from './dropdown-menu';\nimport {\n  ToolbarSplitButton,\n  ToolbarSplitButtonPrimary,\n  ToolbarSplitButtonSecondary,\n} from './toolbar';\n\nconst MEDIA_CONFIG: Record<\n  string,\n  {\n    accept: string[];\n    icon: React.ReactNode;\n    tooltip: string;\n  }\n> = {\n  [AudioPlugin.key]: {\n    accept: ['audio/*'],\n    icon: <AudioLinesIcon className=\"size-4\" />,\n    tooltip: 'Audio',\n  },\n  [FilePlugin.key]: {\n    accept: ['*'],\n    icon: <FileUpIcon className=\"size-4\" />,\n    tooltip: 'File',\n  },\n  [ImagePlugin.key]: {\n    accept: ['image/*'],\n    icon: <ImageIcon className=\"size-4\" />,\n    tooltip: 'Image',\n  },\n  [VideoPlugin.key]: {\n    accept: ['video/*'],\n    icon: <FilmIcon className=\"size-4\" />,\n    tooltip: 'Video',\n  },\n};\n\nexport function MediaDropdownMenu({\n  children,\n  nodeType,\n  ...props\n}: DropdownMenuProps & { nodeType: string }) {\n  const currentConfig = MEDIA_CONFIG[nodeType];\n\n  const { api, editor, setOptions } = useEditorPlugin(MediaEmbedPlugin);\n  const { openFilePicker } = useFilePicker({\n    accept: currentConfig.accept,\n    multiple: true,\n    onFilesSelected: ({ plainFiles: updatedFiles }) => {\n      (editor as any).tf.insert.media(updatedFiles);\n    },\n  });\n\n  const openState = useOpenState();\n\n  return (\n    <DropdownMenu {...openState} modal={false} {...props}>\n      <ToolbarSplitButton\n        pressed={openState.open}\n        tooltip={currentConfig.tooltip}\n      >\n        <ToolbarSplitButtonPrimary onClick={() => openFilePicker()}>\n          {currentConfig.icon}\n        </ToolbarSplitButtonPrimary>\n\n        <DropdownMenuTrigger asChild>\n          <ToolbarSplitButtonSecondary />\n        </DropdownMenuTrigger>\n      </ToolbarSplitButton>\n\n      <DropdownMenuContent\n        className={cn('min-w-0 data-[state=closed]:hidden')}\n        align=\"start\"\n      >\n        <DropdownMenuRadioGroup>\n          <DropdownMenuRadioItem\n            value=\"upload\"\n            onSelect={() => openFilePicker()}\n            hideIcon\n          >\n            <div className=\"flex items-center gap-2\">\n              {currentConfig.icon}\n              <span className=\"text-sm\">Upload from computer</span>\n            </div>\n          </DropdownMenuRadioItem>\n          <DropdownMenuRadioItem\n            value=\"url\"\n            onSelect={() => {\n              // api.media_embed.openFloating(nodeType);\n              focusEditor(editor);\n              setOptions({ isFloatingOpen: true, mediaType: nodeType });\n            }}\n            hideIcon\n          >\n            <div className=\"flex items-center gap-2\">\n              <LinkIcon />\n              <span className=\"text-sm\">Insert via URL</span>\n            </div>\n          </DropdownMenuRadioItem>\n        </DropdownMenuRadioGroup>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n}\n",
       "path": "plate-ui/media-dropdown-menu.tsx",
       "target": "components/plate-ui/media-dropdown-menu.tsx",
       "type": "registry:ui"
diff --git a/apps/www/public/r/styles/default/media-plugins.json b/apps/www/public/r/styles/default/media-plugins.json
index bbfffe9811..fe1e4cc383 100644
--- a/apps/www/public/r/styles/default/media-plugins.json
+++ b/apps/www/public/r/styles/default/media-plugins.json
@@ -5,7 +5,7 @@
   ],
   "files": [
     {
-      "content": "'use client';\n\nimport { CaptionPlugin } from '@udecode/plate-caption/react';\nimport {\n  AudioPlugin,\n  FilePlugin,\n  ImagePlugin,\n  MediaEmbedPlugin,\n  VideoPlugin,\n} from '@udecode/plate-media/react';\n\nimport { ImagePreview } from '@/components/plate-ui/image-preview';\nimport { MediaFloatingToolbar } from '@/components/plate-ui/media-floating-toolbar';\n\nexport const mediaPlugins = [\n  ImagePlugin.extend({\n    options: {\n      disableUploadInsert: true,\n    },\n    render: { afterEditable: ImagePreview },\n  }),\n  MediaEmbedPlugin.configure({\n    render: { afterEditable: () => <MediaFloatingToolbar /> },\n  }),\n  VideoPlugin,\n  AudioPlugin,\n  FilePlugin,\n  CaptionPlugin.configure({\n    options: { plugins: [ImagePlugin, MediaEmbedPlugin] },\n  }),\n] as const;\n",
+      "content": "'use client';\n\nimport { CaptionPlugin } from '@udecode/plate-caption/react';\nimport {\n  AudioPlugin,\n  FilePlugin,\n  ImagePlugin,\n  MediaEmbedPlugin,\n  PlaceholderPlugin,\n  VideoPlugin,\n} from '@udecode/plate-media/react';\n\nimport { ImagePreview } from '@/components/plate-ui/image-preview';\nimport { MediaFloatingToolbar } from '@/components/plate-ui/media-floating-toolbar';\nimport { MediaUploadToast } from '@/components/plate-ui/media-upload-toast';\n\nexport const mediaPlugins = [\n  ImagePlugin.extend({\n    options: {\n      disableUploadInsert: true,\n    },\n    render: { afterEditable: ImagePreview },\n  }),\n  MediaEmbedPlugin.configure({\n    render: { afterEditable: () => <MediaFloatingToolbar /> },\n  }),\n  VideoPlugin,\n  AudioPlugin,\n  FilePlugin,\n  CaptionPlugin.configure({\n    options: { plugins: [ImagePlugin, MediaEmbedPlugin] },\n  }),\n  PlaceholderPlugin.configure({\n    render: {\n      afterEditable: () => <MediaUploadToast />,\n    },\n  }),\n] as const;\n",
       "path": "components/editor/plugins/media-plugins.tsx",
       "target": "components/editor/plugins/media-plugins.tsx",
       "type": "registry:component"
diff --git a/apps/www/public/r/styles/default/mention-demo.json b/apps/www/public/r/styles/default/mention-demo.json
index 8f193ea3ac..07906d394c 100644
--- a/apps/www/public/r/styles/default/mention-demo.json
+++ b/apps/www/public/r/styles/default/mention-demo.json
@@ -4,7 +4,7 @@
   },
   "files": [
     {
-      "content": "'use client';\n\nimport React from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { PlaceholderPlugin } from '@udecode/plate-media/react';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { TablePlugin } from '@udecode/plate-table/react';\n\nimport { settingsStore } from '@/components/context/settings-store';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { autoformatPlugin as autoformatListPlugin } from '@/components/editor/plugins/autoformat-list-plugin';\nimport { autoformatPlugin } from '@/components/editor/plugins/autoformat-plugin';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { FixedToolbarListPlugin } from '@/components/editor/plugins/fixed-toolbar-list-plugin';\nimport { FixedToolbarPlugin } from '@/components/editor/plugins/fixed-toolbar-plugin';\nimport { FloatingToolbarPlugin } from '@/components/editor/plugins/floating-toolbar-plugin';\nimport { tabbablePlugin } from '@/components/editor/plugins/tabbable-plugin';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { MediaPlaceholderElement } from '@/components/plate-ui/media-placeholder-element';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '') => {\n  const overridePlugins = usePlaygroundEnabled(id);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  const plugins: any[] = [\n    ...copilotPlugins,\n    ...editorPlugins,\n    id === 'list' ? FixedToolbarListPlugin : FixedToolbarPlugin,\n    FloatingToolbarPlugin,\n\n    id === 'list' ? autoformatListPlugin : autoformatPlugin,\n    TablePlugin.configure({\n      options: {\n        enableMerging: id === 'tableMerge',\n      },\n    }),\n    ListPlugin,\n    TodoListPlugin,\n    ExcalidrawPlugin,\n    NormalizeTypesPlugin.configure({\n      options: {\n        rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n      },\n    }),\n    SingleLinePlugin,\n    PlaceholderPlugin.withComponent(MediaPlaceholderElement),\n    // Testing\n    PlaywrightPlugin.configure({\n      enabled: process.env.NODE_ENV !== 'production',\n    }),\n  ];\n\n  if (id === 'tabbable') {\n    plugins.push(tabbablePlugin);\n  }\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins,\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const editor = usePlaygroundEditor(id);\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <EditorContainer className={cn(id && 'h-[500px]', className)}>\n          <Editor\n            variant=\"demo\"\n            className={cn(id ? 'h-[calc(100%-37px)] pb-8' : 'pb-[20vh]')}\n            spellCheck={false}\n          />\n        </EditorContainer>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
+      "content": "'use client';\n\nimport React from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { TablePlugin } from '@udecode/plate-table/react';\n\nimport { settingsStore } from '@/components/context/settings-store';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { autoformatPlugin as autoformatListPlugin } from '@/components/editor/plugins/autoformat-list-plugin';\nimport { autoformatPlugin } from '@/components/editor/plugins/autoformat-plugin';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { FixedToolbarListPlugin } from '@/components/editor/plugins/fixed-toolbar-list-plugin';\nimport { FixedToolbarPlugin } from '@/components/editor/plugins/fixed-toolbar-plugin';\nimport { FloatingToolbarPlugin } from '@/components/editor/plugins/floating-toolbar-plugin';\nimport { tabbablePlugin } from '@/components/editor/plugins/tabbable-plugin';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '') => {\n  const overridePlugins = usePlaygroundEnabled(id);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  const plugins: any[] = [\n    ...copilotPlugins,\n    ...editorPlugins,\n    id === 'list' ? FixedToolbarListPlugin : FixedToolbarPlugin,\n    FloatingToolbarPlugin,\n\n    id === 'list' ? autoformatListPlugin : autoformatPlugin,\n    TablePlugin.configure({\n      options: {\n        enableMerging: id === 'tableMerge',\n      },\n    }),\n    ListPlugin,\n    TodoListPlugin,\n    ExcalidrawPlugin,\n    NormalizeTypesPlugin.configure({\n      options: {\n        rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n      },\n    }),\n    SingleLinePlugin,\n    // Testing\n    PlaywrightPlugin.configure({\n      enabled: process.env.NODE_ENV !== 'production',\n    }),\n  ];\n\n  if (id === 'tabbable') {\n    plugins.push(tabbablePlugin);\n  }\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins,\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const editor = usePlaygroundEditor(id);\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <EditorContainer className={cn(id && 'h-[500px]', className)}>\n          <Editor\n            variant=\"demo\"\n            className={cn(id ? 'h-[calc(100%-37px)] pb-8' : 'pb-[20vh]')}\n            spellCheck={false}\n          />\n        </EditorContainer>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
       "path": "example/playground-demo.tsx",
       "target": "components/playground-demo.tsx",
       "type": "registry:example"
diff --git a/apps/www/public/r/styles/default/mode-demo.json b/apps/www/public/r/styles/default/mode-demo.json
index b918322c49..a402a9a5f3 100644
--- a/apps/www/public/r/styles/default/mode-demo.json
+++ b/apps/www/public/r/styles/default/mode-demo.json
@@ -4,7 +4,7 @@
   },
   "files": [
     {
-      "content": "'use client';\n\nimport React from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { PlaceholderPlugin } from '@udecode/plate-media/react';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { TablePlugin } from '@udecode/plate-table/react';\n\nimport { settingsStore } from '@/components/context/settings-store';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { autoformatPlugin as autoformatListPlugin } from '@/components/editor/plugins/autoformat-list-plugin';\nimport { autoformatPlugin } from '@/components/editor/plugins/autoformat-plugin';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { FixedToolbarListPlugin } from '@/components/editor/plugins/fixed-toolbar-list-plugin';\nimport { FixedToolbarPlugin } from '@/components/editor/plugins/fixed-toolbar-plugin';\nimport { FloatingToolbarPlugin } from '@/components/editor/plugins/floating-toolbar-plugin';\nimport { tabbablePlugin } from '@/components/editor/plugins/tabbable-plugin';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { MediaPlaceholderElement } from '@/components/plate-ui/media-placeholder-element';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '') => {\n  const overridePlugins = usePlaygroundEnabled(id);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  const plugins: any[] = [\n    ...copilotPlugins,\n    ...editorPlugins,\n    id === 'list' ? FixedToolbarListPlugin : FixedToolbarPlugin,\n    FloatingToolbarPlugin,\n\n    id === 'list' ? autoformatListPlugin : autoformatPlugin,\n    TablePlugin.configure({\n      options: {\n        enableMerging: id === 'tableMerge',\n      },\n    }),\n    ListPlugin,\n    TodoListPlugin,\n    ExcalidrawPlugin,\n    NormalizeTypesPlugin.configure({\n      options: {\n        rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n      },\n    }),\n    SingleLinePlugin,\n    PlaceholderPlugin.withComponent(MediaPlaceholderElement),\n    // Testing\n    PlaywrightPlugin.configure({\n      enabled: process.env.NODE_ENV !== 'production',\n    }),\n  ];\n\n  if (id === 'tabbable') {\n    plugins.push(tabbablePlugin);\n  }\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins,\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const editor = usePlaygroundEditor(id);\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <EditorContainer className={cn(id && 'h-[500px]', className)}>\n          <Editor\n            variant=\"demo\"\n            className={cn(id ? 'h-[calc(100%-37px)] pb-8' : 'pb-[20vh]')}\n            spellCheck={false}\n          />\n        </EditorContainer>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
+      "content": "'use client';\n\nimport React from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { TablePlugin } from '@udecode/plate-table/react';\n\nimport { settingsStore } from '@/components/context/settings-store';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { autoformatPlugin as autoformatListPlugin } from '@/components/editor/plugins/autoformat-list-plugin';\nimport { autoformatPlugin } from '@/components/editor/plugins/autoformat-plugin';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { FixedToolbarListPlugin } from '@/components/editor/plugins/fixed-toolbar-list-plugin';\nimport { FixedToolbarPlugin } from '@/components/editor/plugins/fixed-toolbar-plugin';\nimport { FloatingToolbarPlugin } from '@/components/editor/plugins/floating-toolbar-plugin';\nimport { tabbablePlugin } from '@/components/editor/plugins/tabbable-plugin';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '') => {\n  const overridePlugins = usePlaygroundEnabled(id);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  const plugins: any[] = [\n    ...copilotPlugins,\n    ...editorPlugins,\n    id === 'list' ? FixedToolbarListPlugin : FixedToolbarPlugin,\n    FloatingToolbarPlugin,\n\n    id === 'list' ? autoformatListPlugin : autoformatPlugin,\n    TablePlugin.configure({\n      options: {\n        enableMerging: id === 'tableMerge',\n      },\n    }),\n    ListPlugin,\n    TodoListPlugin,\n    ExcalidrawPlugin,\n    NormalizeTypesPlugin.configure({\n      options: {\n        rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n      },\n    }),\n    SingleLinePlugin,\n    // Testing\n    PlaywrightPlugin.configure({\n      enabled: process.env.NODE_ENV !== 'production',\n    }),\n  ];\n\n  if (id === 'tabbable') {\n    plugins.push(tabbablePlugin);\n  }\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins,\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const editor = usePlaygroundEditor(id);\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <EditorContainer className={cn(id && 'h-[500px]', className)}>\n          <Editor\n            variant=\"demo\"\n            className={cn(id ? 'h-[calc(100%-37px)] pb-8' : 'pb-[20vh]')}\n            spellCheck={false}\n          />\n        </EditorContainer>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
       "path": "example/playground-demo.tsx",
       "target": "components/playground-demo.tsx",
       "type": "registry:example"
diff --git a/apps/www/public/r/styles/default/placeholder-demo.json b/apps/www/public/r/styles/default/placeholder-demo.json
index e341e9d6e7..7fd622dcc1 100644
--- a/apps/www/public/r/styles/default/placeholder-demo.json
+++ b/apps/www/public/r/styles/default/placeholder-demo.json
@@ -4,7 +4,7 @@
   },
   "files": [
     {
-      "content": "'use client';\n\nimport React from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { PlaceholderPlugin } from '@udecode/plate-media/react';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { TablePlugin } from '@udecode/plate-table/react';\n\nimport { settingsStore } from '@/components/context/settings-store';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { autoformatPlugin as autoformatListPlugin } from '@/components/editor/plugins/autoformat-list-plugin';\nimport { autoformatPlugin } from '@/components/editor/plugins/autoformat-plugin';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { FixedToolbarListPlugin } from '@/components/editor/plugins/fixed-toolbar-list-plugin';\nimport { FixedToolbarPlugin } from '@/components/editor/plugins/fixed-toolbar-plugin';\nimport { FloatingToolbarPlugin } from '@/components/editor/plugins/floating-toolbar-plugin';\nimport { tabbablePlugin } from '@/components/editor/plugins/tabbable-plugin';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { MediaPlaceholderElement } from '@/components/plate-ui/media-placeholder-element';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '') => {\n  const overridePlugins = usePlaygroundEnabled(id);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  const plugins: any[] = [\n    ...copilotPlugins,\n    ...editorPlugins,\n    id === 'list' ? FixedToolbarListPlugin : FixedToolbarPlugin,\n    FloatingToolbarPlugin,\n\n    id === 'list' ? autoformatListPlugin : autoformatPlugin,\n    TablePlugin.configure({\n      options: {\n        enableMerging: id === 'tableMerge',\n      },\n    }),\n    ListPlugin,\n    TodoListPlugin,\n    ExcalidrawPlugin,\n    NormalizeTypesPlugin.configure({\n      options: {\n        rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n      },\n    }),\n    SingleLinePlugin,\n    PlaceholderPlugin.withComponent(MediaPlaceholderElement),\n    // Testing\n    PlaywrightPlugin.configure({\n      enabled: process.env.NODE_ENV !== 'production',\n    }),\n  ];\n\n  if (id === 'tabbable') {\n    plugins.push(tabbablePlugin);\n  }\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins,\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const editor = usePlaygroundEditor(id);\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <EditorContainer className={cn(id && 'h-[500px]', className)}>\n          <Editor\n            variant=\"demo\"\n            className={cn(id ? 'h-[calc(100%-37px)] pb-8' : 'pb-[20vh]')}\n            spellCheck={false}\n          />\n        </EditorContainer>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
+      "content": "'use client';\n\nimport React from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { TablePlugin } from '@udecode/plate-table/react';\n\nimport { settingsStore } from '@/components/context/settings-store';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { autoformatPlugin as autoformatListPlugin } from '@/components/editor/plugins/autoformat-list-plugin';\nimport { autoformatPlugin } from '@/components/editor/plugins/autoformat-plugin';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { FixedToolbarListPlugin } from '@/components/editor/plugins/fixed-toolbar-list-plugin';\nimport { FixedToolbarPlugin } from '@/components/editor/plugins/fixed-toolbar-plugin';\nimport { FloatingToolbarPlugin } from '@/components/editor/plugins/floating-toolbar-plugin';\nimport { tabbablePlugin } from '@/components/editor/plugins/tabbable-plugin';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '') => {\n  const overridePlugins = usePlaygroundEnabled(id);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  const plugins: any[] = [\n    ...copilotPlugins,\n    ...editorPlugins,\n    id === 'list' ? FixedToolbarListPlugin : FixedToolbarPlugin,\n    FloatingToolbarPlugin,\n\n    id === 'list' ? autoformatListPlugin : autoformatPlugin,\n    TablePlugin.configure({\n      options: {\n        enableMerging: id === 'tableMerge',\n      },\n    }),\n    ListPlugin,\n    TodoListPlugin,\n    ExcalidrawPlugin,\n    NormalizeTypesPlugin.configure({\n      options: {\n        rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n      },\n    }),\n    SingleLinePlugin,\n    // Testing\n    PlaywrightPlugin.configure({\n      enabled: process.env.NODE_ENV !== 'production',\n    }),\n  ];\n\n  if (id === 'tabbable') {\n    plugins.push(tabbablePlugin);\n  }\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins,\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const editor = usePlaygroundEditor(id);\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <EditorContainer className={cn(id && 'h-[500px]', className)}>\n          <Editor\n            variant=\"demo\"\n            className={cn(id ? 'h-[calc(100%-37px)] pb-8' : 'pb-[20vh]')}\n            spellCheck={false}\n          />\n        </EditorContainer>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
       "path": "example/playground-demo.tsx",
       "target": "components/playground-demo.tsx",
       "type": "registry:example"
diff --git a/apps/www/public/r/styles/default/playground-demo.json b/apps/www/public/r/styles/default/playground-demo.json
index 09f45f6d71..638c0c4b45 100644
--- a/apps/www/public/r/styles/default/playground-demo.json
+++ b/apps/www/public/r/styles/default/playground-demo.json
@@ -1,7 +1,7 @@
 {
   "files": [
     {
-      "content": "'use client';\n\nimport React from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { PlaceholderPlugin } from '@udecode/plate-media/react';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { TablePlugin } from '@udecode/plate-table/react';\n\nimport { settingsStore } from '@/components/context/settings-store';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { autoformatPlugin as autoformatListPlugin } from '@/components/editor/plugins/autoformat-list-plugin';\nimport { autoformatPlugin } from '@/components/editor/plugins/autoformat-plugin';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { FixedToolbarListPlugin } from '@/components/editor/plugins/fixed-toolbar-list-plugin';\nimport { FixedToolbarPlugin } from '@/components/editor/plugins/fixed-toolbar-plugin';\nimport { FloatingToolbarPlugin } from '@/components/editor/plugins/floating-toolbar-plugin';\nimport { tabbablePlugin } from '@/components/editor/plugins/tabbable-plugin';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { MediaPlaceholderElement } from '@/components/plate-ui/media-placeholder-element';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '') => {\n  const overridePlugins = usePlaygroundEnabled(id);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  const plugins: any[] = [\n    ...copilotPlugins,\n    ...editorPlugins,\n    id === 'list' ? FixedToolbarListPlugin : FixedToolbarPlugin,\n    FloatingToolbarPlugin,\n\n    id === 'list' ? autoformatListPlugin : autoformatPlugin,\n    TablePlugin.configure({\n      options: {\n        enableMerging: id === 'tableMerge',\n      },\n    }),\n    ListPlugin,\n    TodoListPlugin,\n    ExcalidrawPlugin,\n    NormalizeTypesPlugin.configure({\n      options: {\n        rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n      },\n    }),\n    SingleLinePlugin,\n    PlaceholderPlugin.withComponent(MediaPlaceholderElement),\n    // Testing\n    PlaywrightPlugin.configure({\n      enabled: process.env.NODE_ENV !== 'production',\n    }),\n  ];\n\n  if (id === 'tabbable') {\n    plugins.push(tabbablePlugin);\n  }\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins,\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const editor = usePlaygroundEditor(id);\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <EditorContainer className={cn(id && 'h-[500px]', className)}>\n          <Editor\n            variant=\"demo\"\n            className={cn(id ? 'h-[calc(100%-37px)] pb-8' : 'pb-[20vh]')}\n            spellCheck={false}\n          />\n        </EditorContainer>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
+      "content": "'use client';\n\nimport React from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { TablePlugin } from '@udecode/plate-table/react';\n\nimport { settingsStore } from '@/components/context/settings-store';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { autoformatPlugin as autoformatListPlugin } from '@/components/editor/plugins/autoformat-list-plugin';\nimport { autoformatPlugin } from '@/components/editor/plugins/autoformat-plugin';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { FixedToolbarListPlugin } from '@/components/editor/plugins/fixed-toolbar-list-plugin';\nimport { FixedToolbarPlugin } from '@/components/editor/plugins/fixed-toolbar-plugin';\nimport { FloatingToolbarPlugin } from '@/components/editor/plugins/floating-toolbar-plugin';\nimport { tabbablePlugin } from '@/components/editor/plugins/tabbable-plugin';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '') => {\n  const overridePlugins = usePlaygroundEnabled(id);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  const plugins: any[] = [\n    ...copilotPlugins,\n    ...editorPlugins,\n    id === 'list' ? FixedToolbarListPlugin : FixedToolbarPlugin,\n    FloatingToolbarPlugin,\n\n    id === 'list' ? autoformatListPlugin : autoformatPlugin,\n    TablePlugin.configure({\n      options: {\n        enableMerging: id === 'tableMerge',\n      },\n    }),\n    ListPlugin,\n    TodoListPlugin,\n    ExcalidrawPlugin,\n    NormalizeTypesPlugin.configure({\n      options: {\n        rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n      },\n    }),\n    SingleLinePlugin,\n    // Testing\n    PlaywrightPlugin.configure({\n      enabled: process.env.NODE_ENV !== 'production',\n    }),\n  ];\n\n  if (id === 'tabbable') {\n    plugins.push(tabbablePlugin);\n  }\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins,\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const editor = usePlaygroundEditor(id);\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <EditorContainer className={cn(id && 'h-[500px]', className)}>\n          <Editor\n            variant=\"demo\"\n            className={cn(id ? 'h-[calc(100%-37px)] pb-8' : 'pb-[20vh]')}\n            spellCheck={false}\n          />\n        </EditorContainer>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
       "path": "example/playground-demo.tsx",
       "target": "components/playground-demo.tsx",
       "type": "registry:example"
diff --git a/apps/www/public/r/styles/default/resizable-demo.json b/apps/www/public/r/styles/default/resizable-demo.json
index 4cd5bb158f..a68e1f6350 100644
--- a/apps/www/public/r/styles/default/resizable-demo.json
+++ b/apps/www/public/r/styles/default/resizable-demo.json
@@ -4,7 +4,7 @@
   },
   "files": [
     {
-      "content": "'use client';\n\nimport React from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { PlaceholderPlugin } from '@udecode/plate-media/react';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { TablePlugin } from '@udecode/plate-table/react';\n\nimport { settingsStore } from '@/components/context/settings-store';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { autoformatPlugin as autoformatListPlugin } from '@/components/editor/plugins/autoformat-list-plugin';\nimport { autoformatPlugin } from '@/components/editor/plugins/autoformat-plugin';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { FixedToolbarListPlugin } from '@/components/editor/plugins/fixed-toolbar-list-plugin';\nimport { FixedToolbarPlugin } from '@/components/editor/plugins/fixed-toolbar-plugin';\nimport { FloatingToolbarPlugin } from '@/components/editor/plugins/floating-toolbar-plugin';\nimport { tabbablePlugin } from '@/components/editor/plugins/tabbable-plugin';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { MediaPlaceholderElement } from '@/components/plate-ui/media-placeholder-element';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '') => {\n  const overridePlugins = usePlaygroundEnabled(id);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  const plugins: any[] = [\n    ...copilotPlugins,\n    ...editorPlugins,\n    id === 'list' ? FixedToolbarListPlugin : FixedToolbarPlugin,\n    FloatingToolbarPlugin,\n\n    id === 'list' ? autoformatListPlugin : autoformatPlugin,\n    TablePlugin.configure({\n      options: {\n        enableMerging: id === 'tableMerge',\n      },\n    }),\n    ListPlugin,\n    TodoListPlugin,\n    ExcalidrawPlugin,\n    NormalizeTypesPlugin.configure({\n      options: {\n        rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n      },\n    }),\n    SingleLinePlugin,\n    PlaceholderPlugin.withComponent(MediaPlaceholderElement),\n    // Testing\n    PlaywrightPlugin.configure({\n      enabled: process.env.NODE_ENV !== 'production',\n    }),\n  ];\n\n  if (id === 'tabbable') {\n    plugins.push(tabbablePlugin);\n  }\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins,\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const editor = usePlaygroundEditor(id);\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <EditorContainer className={cn(id && 'h-[500px]', className)}>\n          <Editor\n            variant=\"demo\"\n            className={cn(id ? 'h-[calc(100%-37px)] pb-8' : 'pb-[20vh]')}\n            spellCheck={false}\n          />\n        </EditorContainer>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
+      "content": "'use client';\n\nimport React from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { TablePlugin } from '@udecode/plate-table/react';\n\nimport { settingsStore } from '@/components/context/settings-store';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { autoformatPlugin as autoformatListPlugin } from '@/components/editor/plugins/autoformat-list-plugin';\nimport { autoformatPlugin } from '@/components/editor/plugins/autoformat-plugin';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { FixedToolbarListPlugin } from '@/components/editor/plugins/fixed-toolbar-list-plugin';\nimport { FixedToolbarPlugin } from '@/components/editor/plugins/fixed-toolbar-plugin';\nimport { FloatingToolbarPlugin } from '@/components/editor/plugins/floating-toolbar-plugin';\nimport { tabbablePlugin } from '@/components/editor/plugins/tabbable-plugin';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '') => {\n  const overridePlugins = usePlaygroundEnabled(id);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  const plugins: any[] = [\n    ...copilotPlugins,\n    ...editorPlugins,\n    id === 'list' ? FixedToolbarListPlugin : FixedToolbarPlugin,\n    FloatingToolbarPlugin,\n\n    id === 'list' ? autoformatListPlugin : autoformatPlugin,\n    TablePlugin.configure({\n      options: {\n        enableMerging: id === 'tableMerge',\n      },\n    }),\n    ListPlugin,\n    TodoListPlugin,\n    ExcalidrawPlugin,\n    NormalizeTypesPlugin.configure({\n      options: {\n        rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n      },\n    }),\n    SingleLinePlugin,\n    // Testing\n    PlaywrightPlugin.configure({\n      enabled: process.env.NODE_ENV !== 'production',\n    }),\n  ];\n\n  if (id === 'tabbable') {\n    plugins.push(tabbablePlugin);\n  }\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins,\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const editor = usePlaygroundEditor(id);\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <EditorContainer className={cn(id && 'h-[500px]', className)}>\n          <Editor\n            variant=\"demo\"\n            className={cn(id ? 'h-[calc(100%-37px)] pb-8' : 'pb-[20vh]')}\n            spellCheck={false}\n          />\n        </EditorContainer>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
       "path": "example/playground-demo.tsx",
       "target": "components/playground-demo.tsx",
       "type": "registry:example"
diff --git a/apps/www/public/r/styles/default/slash-command-demo.json b/apps/www/public/r/styles/default/slash-command-demo.json
index b375c0b945..2c0531678a 100644
--- a/apps/www/public/r/styles/default/slash-command-demo.json
+++ b/apps/www/public/r/styles/default/slash-command-demo.json
@@ -4,7 +4,7 @@
   },
   "files": [
     {
-      "content": "'use client';\n\nimport React from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { PlaceholderPlugin } from '@udecode/plate-media/react';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { TablePlugin } from '@udecode/plate-table/react';\n\nimport { settingsStore } from '@/components/context/settings-store';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { autoformatPlugin as autoformatListPlugin } from '@/components/editor/plugins/autoformat-list-plugin';\nimport { autoformatPlugin } from '@/components/editor/plugins/autoformat-plugin';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { FixedToolbarListPlugin } from '@/components/editor/plugins/fixed-toolbar-list-plugin';\nimport { FixedToolbarPlugin } from '@/components/editor/plugins/fixed-toolbar-plugin';\nimport { FloatingToolbarPlugin } from '@/components/editor/plugins/floating-toolbar-plugin';\nimport { tabbablePlugin } from '@/components/editor/plugins/tabbable-plugin';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { MediaPlaceholderElement } from '@/components/plate-ui/media-placeholder-element';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '') => {\n  const overridePlugins = usePlaygroundEnabled(id);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  const plugins: any[] = [\n    ...copilotPlugins,\n    ...editorPlugins,\n    id === 'list' ? FixedToolbarListPlugin : FixedToolbarPlugin,\n    FloatingToolbarPlugin,\n\n    id === 'list' ? autoformatListPlugin : autoformatPlugin,\n    TablePlugin.configure({\n      options: {\n        enableMerging: id === 'tableMerge',\n      },\n    }),\n    ListPlugin,\n    TodoListPlugin,\n    ExcalidrawPlugin,\n    NormalizeTypesPlugin.configure({\n      options: {\n        rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n      },\n    }),\n    SingleLinePlugin,\n    PlaceholderPlugin.withComponent(MediaPlaceholderElement),\n    // Testing\n    PlaywrightPlugin.configure({\n      enabled: process.env.NODE_ENV !== 'production',\n    }),\n  ];\n\n  if (id === 'tabbable') {\n    plugins.push(tabbablePlugin);\n  }\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins,\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const editor = usePlaygroundEditor(id);\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <EditorContainer className={cn(id && 'h-[500px]', className)}>\n          <Editor\n            variant=\"demo\"\n            className={cn(id ? 'h-[calc(100%-37px)] pb-8' : 'pb-[20vh]')}\n            spellCheck={false}\n          />\n        </EditorContainer>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
+      "content": "'use client';\n\nimport React from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { TablePlugin } from '@udecode/plate-table/react';\n\nimport { settingsStore } from '@/components/context/settings-store';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { autoformatPlugin as autoformatListPlugin } from '@/components/editor/plugins/autoformat-list-plugin';\nimport { autoformatPlugin } from '@/components/editor/plugins/autoformat-plugin';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { FixedToolbarListPlugin } from '@/components/editor/plugins/fixed-toolbar-list-plugin';\nimport { FixedToolbarPlugin } from '@/components/editor/plugins/fixed-toolbar-plugin';\nimport { FloatingToolbarPlugin } from '@/components/editor/plugins/floating-toolbar-plugin';\nimport { tabbablePlugin } from '@/components/editor/plugins/tabbable-plugin';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '') => {\n  const overridePlugins = usePlaygroundEnabled(id);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  const plugins: any[] = [\n    ...copilotPlugins,\n    ...editorPlugins,\n    id === 'list' ? FixedToolbarListPlugin : FixedToolbarPlugin,\n    FloatingToolbarPlugin,\n\n    id === 'list' ? autoformatListPlugin : autoformatPlugin,\n    TablePlugin.configure({\n      options: {\n        enableMerging: id === 'tableMerge',\n      },\n    }),\n    ListPlugin,\n    TodoListPlugin,\n    ExcalidrawPlugin,\n    NormalizeTypesPlugin.configure({\n      options: {\n        rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n      },\n    }),\n    SingleLinePlugin,\n    // Testing\n    PlaywrightPlugin.configure({\n      enabled: process.env.NODE_ENV !== 'production',\n    }),\n  ];\n\n  if (id === 'tabbable') {\n    plugins.push(tabbablePlugin);\n  }\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins,\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const editor = usePlaygroundEditor(id);\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <EditorContainer className={cn(id && 'h-[500px]', className)}>\n          <Editor\n            variant=\"demo\"\n            className={cn(id ? 'h-[calc(100%-37px)] pb-8' : 'pb-[20vh]')}\n            spellCheck={false}\n          />\n        </EditorContainer>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
       "path": "example/playground-demo.tsx",
       "target": "components/playground-demo.tsx",
       "type": "registry:example"
diff --git a/apps/www/public/r/styles/default/table-demo.json b/apps/www/public/r/styles/default/table-demo.json
index 1a069a0d0d..9d03c5a59b 100644
--- a/apps/www/public/r/styles/default/table-demo.json
+++ b/apps/www/public/r/styles/default/table-demo.json
@@ -4,7 +4,7 @@
   },
   "files": [
     {
-      "content": "'use client';\n\nimport React from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { PlaceholderPlugin } from '@udecode/plate-media/react';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { TablePlugin } from '@udecode/plate-table/react';\n\nimport { settingsStore } from '@/components/context/settings-store';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { autoformatPlugin as autoformatListPlugin } from '@/components/editor/plugins/autoformat-list-plugin';\nimport { autoformatPlugin } from '@/components/editor/plugins/autoformat-plugin';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { FixedToolbarListPlugin } from '@/components/editor/plugins/fixed-toolbar-list-plugin';\nimport { FixedToolbarPlugin } from '@/components/editor/plugins/fixed-toolbar-plugin';\nimport { FloatingToolbarPlugin } from '@/components/editor/plugins/floating-toolbar-plugin';\nimport { tabbablePlugin } from '@/components/editor/plugins/tabbable-plugin';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { MediaPlaceholderElement } from '@/components/plate-ui/media-placeholder-element';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '') => {\n  const overridePlugins = usePlaygroundEnabled(id);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  const plugins: any[] = [\n    ...copilotPlugins,\n    ...editorPlugins,\n    id === 'list' ? FixedToolbarListPlugin : FixedToolbarPlugin,\n    FloatingToolbarPlugin,\n\n    id === 'list' ? autoformatListPlugin : autoformatPlugin,\n    TablePlugin.configure({\n      options: {\n        enableMerging: id === 'tableMerge',\n      },\n    }),\n    ListPlugin,\n    TodoListPlugin,\n    ExcalidrawPlugin,\n    NormalizeTypesPlugin.configure({\n      options: {\n        rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n      },\n    }),\n    SingleLinePlugin,\n    PlaceholderPlugin.withComponent(MediaPlaceholderElement),\n    // Testing\n    PlaywrightPlugin.configure({\n      enabled: process.env.NODE_ENV !== 'production',\n    }),\n  ];\n\n  if (id === 'tabbable') {\n    plugins.push(tabbablePlugin);\n  }\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins,\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const editor = usePlaygroundEditor(id);\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <EditorContainer className={cn(id && 'h-[500px]', className)}>\n          <Editor\n            variant=\"demo\"\n            className={cn(id ? 'h-[calc(100%-37px)] pb-8' : 'pb-[20vh]')}\n            spellCheck={false}\n          />\n        </EditorContainer>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
+      "content": "'use client';\n\nimport React from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { TablePlugin } from '@udecode/plate-table/react';\n\nimport { settingsStore } from '@/components/context/settings-store';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { autoformatPlugin as autoformatListPlugin } from '@/components/editor/plugins/autoformat-list-plugin';\nimport { autoformatPlugin } from '@/components/editor/plugins/autoformat-plugin';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { FixedToolbarListPlugin } from '@/components/editor/plugins/fixed-toolbar-list-plugin';\nimport { FixedToolbarPlugin } from '@/components/editor/plugins/fixed-toolbar-plugin';\nimport { FloatingToolbarPlugin } from '@/components/editor/plugins/floating-toolbar-plugin';\nimport { tabbablePlugin } from '@/components/editor/plugins/tabbable-plugin';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '') => {\n  const overridePlugins = usePlaygroundEnabled(id);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  const plugins: any[] = [\n    ...copilotPlugins,\n    ...editorPlugins,\n    id === 'list' ? FixedToolbarListPlugin : FixedToolbarPlugin,\n    FloatingToolbarPlugin,\n\n    id === 'list' ? autoformatListPlugin : autoformatPlugin,\n    TablePlugin.configure({\n      options: {\n        enableMerging: id === 'tableMerge',\n      },\n    }),\n    ListPlugin,\n    TodoListPlugin,\n    ExcalidrawPlugin,\n    NormalizeTypesPlugin.configure({\n      options: {\n        rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n      },\n    }),\n    SingleLinePlugin,\n    // Testing\n    PlaywrightPlugin.configure({\n      enabled: process.env.NODE_ENV !== 'production',\n    }),\n  ];\n\n  if (id === 'tabbable') {\n    plugins.push(tabbablePlugin);\n  }\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins,\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const editor = usePlaygroundEditor(id);\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <EditorContainer className={cn(id && 'h-[500px]', className)}>\n          <Editor\n            variant=\"demo\"\n            className={cn(id ? 'h-[calc(100%-37px)] pb-8' : 'pb-[20vh]')}\n            spellCheck={false}\n          />\n        </EditorContainer>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
       "path": "example/playground-demo.tsx",
       "target": "components/playground-demo.tsx",
       "type": "registry:example"
diff --git a/apps/www/public/r/styles/default/toc-demo.json b/apps/www/public/r/styles/default/toc-demo.json
index 486608ff7a..ed0d9634b9 100644
--- a/apps/www/public/r/styles/default/toc-demo.json
+++ b/apps/www/public/r/styles/default/toc-demo.json
@@ -4,7 +4,7 @@
   },
   "files": [
     {
-      "content": "'use client';\n\nimport React from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { PlaceholderPlugin } from '@udecode/plate-media/react';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { TablePlugin } from '@udecode/plate-table/react';\n\nimport { settingsStore } from '@/components/context/settings-store';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { autoformatPlugin as autoformatListPlugin } from '@/components/editor/plugins/autoformat-list-plugin';\nimport { autoformatPlugin } from '@/components/editor/plugins/autoformat-plugin';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { FixedToolbarListPlugin } from '@/components/editor/plugins/fixed-toolbar-list-plugin';\nimport { FixedToolbarPlugin } from '@/components/editor/plugins/fixed-toolbar-plugin';\nimport { FloatingToolbarPlugin } from '@/components/editor/plugins/floating-toolbar-plugin';\nimport { tabbablePlugin } from '@/components/editor/plugins/tabbable-plugin';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { MediaPlaceholderElement } from '@/components/plate-ui/media-placeholder-element';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '') => {\n  const overridePlugins = usePlaygroundEnabled(id);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  const plugins: any[] = [\n    ...copilotPlugins,\n    ...editorPlugins,\n    id === 'list' ? FixedToolbarListPlugin : FixedToolbarPlugin,\n    FloatingToolbarPlugin,\n\n    id === 'list' ? autoformatListPlugin : autoformatPlugin,\n    TablePlugin.configure({\n      options: {\n        enableMerging: id === 'tableMerge',\n      },\n    }),\n    ListPlugin,\n    TodoListPlugin,\n    ExcalidrawPlugin,\n    NormalizeTypesPlugin.configure({\n      options: {\n        rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n      },\n    }),\n    SingleLinePlugin,\n    PlaceholderPlugin.withComponent(MediaPlaceholderElement),\n    // Testing\n    PlaywrightPlugin.configure({\n      enabled: process.env.NODE_ENV !== 'production',\n    }),\n  ];\n\n  if (id === 'tabbable') {\n    plugins.push(tabbablePlugin);\n  }\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins,\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const editor = usePlaygroundEditor(id);\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <EditorContainer className={cn(id && 'h-[500px]', className)}>\n          <Editor\n            variant=\"demo\"\n            className={cn(id ? 'h-[calc(100%-37px)] pb-8' : 'pb-[20vh]')}\n            spellCheck={false}\n          />\n        </EditorContainer>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
+      "content": "'use client';\n\nimport React from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { TablePlugin } from '@udecode/plate-table/react';\n\nimport { settingsStore } from '@/components/context/settings-store';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { autoformatPlugin as autoformatListPlugin } from '@/components/editor/plugins/autoformat-list-plugin';\nimport { autoformatPlugin } from '@/components/editor/plugins/autoformat-plugin';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { FixedToolbarListPlugin } from '@/components/editor/plugins/fixed-toolbar-list-plugin';\nimport { FixedToolbarPlugin } from '@/components/editor/plugins/fixed-toolbar-plugin';\nimport { FloatingToolbarPlugin } from '@/components/editor/plugins/floating-toolbar-plugin';\nimport { tabbablePlugin } from '@/components/editor/plugins/tabbable-plugin';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '') => {\n  const overridePlugins = usePlaygroundEnabled(id);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  const plugins: any[] = [\n    ...copilotPlugins,\n    ...editorPlugins,\n    id === 'list' ? FixedToolbarListPlugin : FixedToolbarPlugin,\n    FloatingToolbarPlugin,\n\n    id === 'list' ? autoformatListPlugin : autoformatPlugin,\n    TablePlugin.configure({\n      options: {\n        enableMerging: id === 'tableMerge',\n      },\n    }),\n    ListPlugin,\n    TodoListPlugin,\n    ExcalidrawPlugin,\n    NormalizeTypesPlugin.configure({\n      options: {\n        rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n      },\n    }),\n    SingleLinePlugin,\n    // Testing\n    PlaywrightPlugin.configure({\n      enabled: process.env.NODE_ENV !== 'production',\n    }),\n  ];\n\n  if (id === 'tabbable') {\n    plugins.push(tabbablePlugin);\n  }\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins,\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const editor = usePlaygroundEditor(id);\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <EditorContainer className={cn(id && 'h-[500px]', className)}>\n          <Editor\n            variant=\"demo\"\n            className={cn(id ? 'h-[calc(100%-37px)] pb-8' : 'pb-[20vh]')}\n            spellCheck={false}\n          />\n        </EditorContainer>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
       "path": "example/playground-demo.tsx",
       "target": "components/playground-demo.tsx",
       "type": "registry:example"
diff --git a/apps/www/public/r/styles/default/toggle-demo.json b/apps/www/public/r/styles/default/toggle-demo.json
index 728a7a54fa..87e1d6de5c 100644
--- a/apps/www/public/r/styles/default/toggle-demo.json
+++ b/apps/www/public/r/styles/default/toggle-demo.json
@@ -4,7 +4,7 @@
   },
   "files": [
     {
-      "content": "'use client';\n\nimport React from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { PlaceholderPlugin } from '@udecode/plate-media/react';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { TablePlugin } from '@udecode/plate-table/react';\n\nimport { settingsStore } from '@/components/context/settings-store';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { autoformatPlugin as autoformatListPlugin } from '@/components/editor/plugins/autoformat-list-plugin';\nimport { autoformatPlugin } from '@/components/editor/plugins/autoformat-plugin';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { FixedToolbarListPlugin } from '@/components/editor/plugins/fixed-toolbar-list-plugin';\nimport { FixedToolbarPlugin } from '@/components/editor/plugins/fixed-toolbar-plugin';\nimport { FloatingToolbarPlugin } from '@/components/editor/plugins/floating-toolbar-plugin';\nimport { tabbablePlugin } from '@/components/editor/plugins/tabbable-plugin';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { MediaPlaceholderElement } from '@/components/plate-ui/media-placeholder-element';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '') => {\n  const overridePlugins = usePlaygroundEnabled(id);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  const plugins: any[] = [\n    ...copilotPlugins,\n    ...editorPlugins,\n    id === 'list' ? FixedToolbarListPlugin : FixedToolbarPlugin,\n    FloatingToolbarPlugin,\n\n    id === 'list' ? autoformatListPlugin : autoformatPlugin,\n    TablePlugin.configure({\n      options: {\n        enableMerging: id === 'tableMerge',\n      },\n    }),\n    ListPlugin,\n    TodoListPlugin,\n    ExcalidrawPlugin,\n    NormalizeTypesPlugin.configure({\n      options: {\n        rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n      },\n    }),\n    SingleLinePlugin,\n    PlaceholderPlugin.withComponent(MediaPlaceholderElement),\n    // Testing\n    PlaywrightPlugin.configure({\n      enabled: process.env.NODE_ENV !== 'production',\n    }),\n  ];\n\n  if (id === 'tabbable') {\n    plugins.push(tabbablePlugin);\n  }\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins,\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const editor = usePlaygroundEditor(id);\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <EditorContainer className={cn(id && 'h-[500px]', className)}>\n          <Editor\n            variant=\"demo\"\n            className={cn(id ? 'h-[calc(100%-37px)] pb-8' : 'pb-[20vh]')}\n            spellCheck={false}\n          />\n        </EditorContainer>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
+      "content": "'use client';\n\nimport React from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { TablePlugin } from '@udecode/plate-table/react';\n\nimport { settingsStore } from '@/components/context/settings-store';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { autoformatPlugin as autoformatListPlugin } from '@/components/editor/plugins/autoformat-list-plugin';\nimport { autoformatPlugin } from '@/components/editor/plugins/autoformat-plugin';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { FixedToolbarListPlugin } from '@/components/editor/plugins/fixed-toolbar-list-plugin';\nimport { FixedToolbarPlugin } from '@/components/editor/plugins/fixed-toolbar-plugin';\nimport { FloatingToolbarPlugin } from '@/components/editor/plugins/floating-toolbar-plugin';\nimport { tabbablePlugin } from '@/components/editor/plugins/tabbable-plugin';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '') => {\n  const overridePlugins = usePlaygroundEnabled(id);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  const plugins: any[] = [\n    ...copilotPlugins,\n    ...editorPlugins,\n    id === 'list' ? FixedToolbarListPlugin : FixedToolbarPlugin,\n    FloatingToolbarPlugin,\n\n    id === 'list' ? autoformatListPlugin : autoformatPlugin,\n    TablePlugin.configure({\n      options: {\n        enableMerging: id === 'tableMerge',\n      },\n    }),\n    ListPlugin,\n    TodoListPlugin,\n    ExcalidrawPlugin,\n    NormalizeTypesPlugin.configure({\n      options: {\n        rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n      },\n    }),\n    SingleLinePlugin,\n    // Testing\n    PlaywrightPlugin.configure({\n      enabled: process.env.NODE_ENV !== 'production',\n    }),\n  ];\n\n  if (id === 'tabbable') {\n    plugins.push(tabbablePlugin);\n  }\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins,\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const editor = usePlaygroundEditor(id);\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <EditorContainer className={cn(id && 'h-[500px]', className)}>\n          <Editor\n            variant=\"demo\"\n            className={cn(id ? 'h-[calc(100%-37px)] pb-8' : 'pb-[20vh]')}\n            spellCheck={false}\n          />\n        </EditorContainer>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
       "path": "example/playground-demo.tsx",
       "target": "components/playground-demo.tsx",
       "type": "registry:example"
diff --git a/apps/www/public/r/styles/default/toolbar-demo.json b/apps/www/public/r/styles/default/toolbar-demo.json
index a95511b0b0..7617c95378 100644
--- a/apps/www/public/r/styles/default/toolbar-demo.json
+++ b/apps/www/public/r/styles/default/toolbar-demo.json
@@ -4,7 +4,7 @@
   },
   "files": [
     {
-      "content": "'use client';\n\nimport React from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { PlaceholderPlugin } from '@udecode/plate-media/react';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { TablePlugin } from '@udecode/plate-table/react';\n\nimport { settingsStore } from '@/components/context/settings-store';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { autoformatPlugin as autoformatListPlugin } from '@/components/editor/plugins/autoformat-list-plugin';\nimport { autoformatPlugin } from '@/components/editor/plugins/autoformat-plugin';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { FixedToolbarListPlugin } from '@/components/editor/plugins/fixed-toolbar-list-plugin';\nimport { FixedToolbarPlugin } from '@/components/editor/plugins/fixed-toolbar-plugin';\nimport { FloatingToolbarPlugin } from '@/components/editor/plugins/floating-toolbar-plugin';\nimport { tabbablePlugin } from '@/components/editor/plugins/tabbable-plugin';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { MediaPlaceholderElement } from '@/components/plate-ui/media-placeholder-element';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '') => {\n  const overridePlugins = usePlaygroundEnabled(id);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  const plugins: any[] = [\n    ...copilotPlugins,\n    ...editorPlugins,\n    id === 'list' ? FixedToolbarListPlugin : FixedToolbarPlugin,\n    FloatingToolbarPlugin,\n\n    id === 'list' ? autoformatListPlugin : autoformatPlugin,\n    TablePlugin.configure({\n      options: {\n        enableMerging: id === 'tableMerge',\n      },\n    }),\n    ListPlugin,\n    TodoListPlugin,\n    ExcalidrawPlugin,\n    NormalizeTypesPlugin.configure({\n      options: {\n        rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n      },\n    }),\n    SingleLinePlugin,\n    PlaceholderPlugin.withComponent(MediaPlaceholderElement),\n    // Testing\n    PlaywrightPlugin.configure({\n      enabled: process.env.NODE_ENV !== 'production',\n    }),\n  ];\n\n  if (id === 'tabbable') {\n    plugins.push(tabbablePlugin);\n  }\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins,\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const editor = usePlaygroundEditor(id);\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <EditorContainer className={cn(id && 'h-[500px]', className)}>\n          <Editor\n            variant=\"demo\"\n            className={cn(id ? 'h-[calc(100%-37px)] pb-8' : 'pb-[20vh]')}\n            spellCheck={false}\n          />\n        </EditorContainer>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
+      "content": "'use client';\n\nimport React from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { TablePlugin } from '@udecode/plate-table/react';\n\nimport { settingsStore } from '@/components/context/settings-store';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { autoformatPlugin as autoformatListPlugin } from '@/components/editor/plugins/autoformat-list-plugin';\nimport { autoformatPlugin } from '@/components/editor/plugins/autoformat-plugin';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { FixedToolbarListPlugin } from '@/components/editor/plugins/fixed-toolbar-list-plugin';\nimport { FixedToolbarPlugin } from '@/components/editor/plugins/fixed-toolbar-plugin';\nimport { FloatingToolbarPlugin } from '@/components/editor/plugins/floating-toolbar-plugin';\nimport { tabbablePlugin } from '@/components/editor/plugins/tabbable-plugin';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '') => {\n  const overridePlugins = usePlaygroundEnabled(id);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  const plugins: any[] = [\n    ...copilotPlugins,\n    ...editorPlugins,\n    id === 'list' ? FixedToolbarListPlugin : FixedToolbarPlugin,\n    FloatingToolbarPlugin,\n\n    id === 'list' ? autoformatListPlugin : autoformatPlugin,\n    TablePlugin.configure({\n      options: {\n        enableMerging: id === 'tableMerge',\n      },\n    }),\n    ListPlugin,\n    TodoListPlugin,\n    ExcalidrawPlugin,\n    NormalizeTypesPlugin.configure({\n      options: {\n        rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n      },\n    }),\n    SingleLinePlugin,\n    // Testing\n    PlaywrightPlugin.configure({\n      enabled: process.env.NODE_ENV !== 'production',\n    }),\n  ];\n\n  if (id === 'tabbable') {\n    plugins.push(tabbablePlugin);\n  }\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins,\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const editor = usePlaygroundEditor(id);\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <EditorContainer className={cn(id && 'h-[500px]', className)}>\n          <Editor\n            variant=\"demo\"\n            className={cn(id ? 'h-[calc(100%-37px)] pb-8' : 'pb-[20vh]')}\n            spellCheck={false}\n          />\n        </EditorContainer>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
       "path": "example/playground-demo.tsx",
       "target": "components/playground-demo.tsx",
       "type": "registry:example"
diff --git a/apps/www/public/r/styles/default/toolbar.json b/apps/www/public/r/styles/default/toolbar.json
index 4794958123..28c92e952d 100644
--- a/apps/www/public/r/styles/default/toolbar.json
+++ b/apps/www/public/r/styles/default/toolbar.json
@@ -7,7 +7,7 @@
   },
   "files": [
     {
-      "content": "'use client';\n\nimport * as React from 'react';\n\nimport * as ToolbarPrimitive from '@radix-ui/react-toolbar';\nimport { cn, withCn, withRef, withVariants } from '@udecode/cn';\nimport { type VariantProps, cva } from 'class-variance-authority';\nimport { ChevronDown } from 'lucide-react';\n\nimport { Separator } from './separator';\nimport { withTooltip } from './tooltip';\n\nexport const Toolbar = withCn(\n  ToolbarPrimitive.Root,\n  'relative flex select-none items-center'\n);\n\nexport const ToolbarToggleGroup = withCn(\n  ToolbarPrimitive.ToolbarToggleGroup,\n  'flex items-center'\n);\n\nexport const ToolbarLink = withCn(\n  ToolbarPrimitive.Link,\n  'font-medium underline underline-offset-4'\n);\n\nexport const ToolbarSeparator = withCn(\n  ToolbarPrimitive.Separator,\n  'mx-2 my-1 w-px shrink-0 bg-border'\n);\n\nconst toolbarButtonVariants = cva(\n  cn(\n    'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium text-foreground ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg:not([data-icon])]:size-4'\n  ),\n  {\n    defaultVariants: {\n      size: 'sm',\n      variant: 'default',\n    },\n    variants: {\n      size: {\n        default: 'h-10 px-3',\n        lg: 'h-11 px-5',\n        sm: 'h-7 px-2',\n      },\n      variant: {\n        default:\n          'bg-transparent hover:bg-muted hover:text-muted-foreground aria-checked:bg-accent aria-checked:text-accent-foreground',\n        outline:\n          'border border-input bg-transparent hover:bg-accent hover:text-accent-foreground',\n      },\n    },\n  }\n);\n\nconst dropdownArrowVariants = cva(\n  cn(\n    'inline-flex items-center justify-center rounded-r-md text-sm font-medium text-foreground transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50'\n  ),\n  {\n    defaultVariants: {\n      size: 'sm',\n      variant: 'default',\n    },\n    variants: {\n      size: {\n        default: 'h-10 w-6',\n        lg: 'h-11 w-8',\n        sm: 'h-7 w-4',\n      },\n      variant: {\n        default:\n          'bg-transparent hover:bg-muted hover:text-muted-foreground aria-checked:bg-accent aria-checked:text-accent-foreground',\n        outline:\n          'border border-l-0 border-input bg-transparent hover:bg-accent hover:text-accent-foreground',\n      },\n    },\n  }\n);\n\nconst ToolbarButton = withTooltip(\n  // eslint-disable-next-line react/display-name\n  React.forwardRef<\n    React.ElementRef<typeof ToolbarToggleItem>,\n    {\n      isDropdown?: boolean;\n      pressed?: boolean;\n    } & Omit<\n      React.ComponentPropsWithoutRef<typeof ToolbarToggleItem>,\n      'asChild' | 'value'\n    > &\n      VariantProps<typeof toolbarButtonVariants>\n  >(\n    (\n      { children, className, isDropdown, pressed, size, variant, ...props },\n      ref\n    ) => {\n      return typeof pressed === 'boolean' ? (\n        <ToolbarToggleGroup\n          disabled={props.disabled}\n          value=\"single\"\n          type=\"single\"\n        >\n          <ToolbarToggleItem\n            ref={ref}\n            className={cn(\n              toolbarButtonVariants({\n                size,\n                variant,\n              }),\n              isDropdown && 'justify-between gap-1 pr-1',\n              className\n            )}\n            value={pressed ? 'single' : ''}\n            {...props}\n          >\n            {isDropdown ? (\n              <>\n                <div className=\"flex flex-1 items-center gap-2 whitespace-nowrap\">\n                  {children}\n                </div>\n                <div>\n                  <ChevronDown\n                    className=\"size-3.5 text-muted-foreground\"\n                    data-icon\n                  />\n                </div>\n              </>\n            ) : (\n              children\n            )}\n          </ToolbarToggleItem>\n        </ToolbarToggleGroup>\n      ) : (\n        <ToolbarPrimitive.Button\n          ref={ref}\n          className={cn(\n            toolbarButtonVariants({\n              size,\n              variant,\n            }),\n            isDropdown && 'pr-1',\n            className\n          )}\n          {...props}\n        >\n          {children}\n        </ToolbarPrimitive.Button>\n      );\n    }\n  )\n);\nToolbarButton.displayName = 'ToolbarButton';\n\nexport { ToolbarButton };\n\nconst ToolbarSplitButton = React.forwardRef<\n  React.ElementRef<typeof ToolbarToggleItem>,\n  {\n    pressed?: boolean;\n    tooltip?: string;\n    onMainButtonClick?: () => void;\n  } & Omit<\n    React.ComponentPropsWithoutRef<typeof ToolbarToggleItem>,\n    'asChild' | 'value'\n  > &\n    VariantProps<typeof toolbarButtonVariants>\n>(\n  (\n    {\n      children,\n      className,\n      pressed,\n      size,\n      tooltip,\n      variant,\n      onMainButtonClick,\n      ...props\n    },\n    ref\n  ) => {\n    const mainButtonClass = cn(\n      toolbarButtonVariants({\n        size,\n        variant,\n      }),\n      'rounded-r-none',\n      className\n    );\n\n    const dropdownButtonClass = dropdownArrowVariants({\n      size,\n      variant,\n    });\n\n    const MainButton = withTooltip(\n      React.forwardRef<HTMLButtonElement>((mainProps, mainRef) => (\n        <ToolbarToggleItem\n          {...mainProps}\n          ref={mainRef}\n          className={mainButtonClass}\n          value={pressed ? 'single' : ''}\n          onClick={onMainButtonClick}\n        >\n          <div className=\"flex flex-1 items-center gap-2 whitespace-nowrap\">\n            {children}\n          </div>\n        </ToolbarToggleItem>\n      ))\n    );\n\n    return typeof pressed === 'boolean' ? (\n      <ToolbarToggleGroup\n        disabled={props.disabled}\n        value=\"single\"\n        type=\"single\"\n      >\n        <div className=\"flex\">\n          <MainButton tooltip={tooltip} />\n\n          <button\n            ref={ref}\n            className={cn(\n              dropdownButtonClass,\n              pressed && 'bg-accent text-accent-foreground'\n            )}\n            disabled={props.disabled}\n            value={pressed ? 'single' : ''}\n            type=\"reset\"\n            {...props}\n          >\n            <ChevronDown className=\"size-3.5 text-muted-foreground\" data-icon />\n          </button>\n        </div>\n      </ToolbarToggleGroup>\n    ) : (\n      <div className=\"flex\">\n        <MainButton tooltip={tooltip} />\n\n        <button\n          ref={ref}\n          {...props}\n          className={dropdownButtonClass}\n          disabled={props.disabled}\n          type=\"button\"\n        >\n          <ChevronDown className=\"size-2.5 text-muted-foreground\" data-icon />\n        </button>\n      </div>\n    );\n  }\n);\nToolbarSplitButton.displayName = 'ToolbarButton';\n\nexport { ToolbarSplitButton };\n\nexport const ToolbarToggleItem = withVariants(\n  ToolbarPrimitive.ToggleItem,\n  toolbarButtonVariants,\n  ['variant', 'size']\n);\n\nexport const ToolbarGroup = withRef<'div'>(({ children, className }, ref) => {\n  return (\n    <div\n      ref={ref}\n      className={cn(\n        'group/toolbar-group',\n        'relative hidden has-[button]:flex',\n        className\n      )}\n    >\n      <div className=\"flex items-center\">{children}</div>\n\n      <div className=\"mx-1.5 py-0.5 group-last/toolbar-group:!hidden\">\n        <Separator orientation=\"vertical\" />\n      </div>\n    </div>\n  );\n});\n",
+      "content": "'use client';\n\nimport * as React from 'react';\n\nimport * as ToolbarPrimitive from '@radix-ui/react-toolbar';\nimport { cn, withCn, withRef, withVariants } from '@udecode/cn';\nimport { type VariantProps, cva } from 'class-variance-authority';\nimport { ChevronDown } from 'lucide-react';\n\nimport { Separator } from './separator';\nimport { withTooltip } from './tooltip';\n\nexport const Toolbar = withCn(\n  ToolbarPrimitive.Root,\n  'relative flex select-none items-center'\n);\n\nexport const ToolbarToggleGroup = withCn(\n  ToolbarPrimitive.ToolbarToggleGroup,\n  'flex items-center'\n);\n\nexport const ToolbarLink = withCn(\n  ToolbarPrimitive.Link,\n  'font-medium underline underline-offset-4'\n);\n\nexport const ToolbarSeparator = withCn(\n  ToolbarPrimitive.Separator,\n  'mx-2 my-1 w-px shrink-0 bg-border'\n);\n\nconst toolbarButtonVariants = cva(\n  cn(\n    'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium text-foreground ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg:not([data-icon])]:size-4'\n  ),\n  {\n    defaultVariants: {\n      size: 'sm',\n      variant: 'default',\n    },\n    variants: {\n      size: {\n        default: 'h-10 px-3',\n        lg: 'h-11 px-5',\n        sm: 'h-7 px-2',\n      },\n      variant: {\n        default:\n          'bg-transparent hover:bg-muted hover:text-muted-foreground aria-checked:bg-accent aria-checked:text-accent-foreground',\n        outline:\n          'border border-input bg-transparent hover:bg-accent hover:text-accent-foreground',\n      },\n    },\n  }\n);\n\nconst dropdownArrowVariants = cva(\n  cn(\n    'inline-flex items-center justify-center rounded-r-md text-sm font-medium text-foreground transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50'\n  ),\n  {\n    defaultVariants: {\n      size: 'sm',\n      variant: 'default',\n    },\n    variants: {\n      size: {\n        default: 'h-10 w-6',\n        lg: 'h-11 w-8',\n        sm: 'h-7 w-4',\n      },\n      variant: {\n        default:\n          'bg-transparent hover:bg-muted hover:text-muted-foreground aria-checked:bg-accent aria-checked:text-accent-foreground',\n        outline:\n          'border border-l-0 border-input bg-transparent hover:bg-accent hover:text-accent-foreground',\n      },\n    },\n  }\n);\n\nconst ToolbarButton = withTooltip(\n  // eslint-disable-next-line react/display-name\n  React.forwardRef<\n    React.ElementRef<typeof ToolbarToggleItem>,\n    {\n      isDropdown?: boolean;\n      pressed?: boolean;\n    } & Omit<\n      React.ComponentPropsWithoutRef<typeof ToolbarToggleItem>,\n      'asChild' | 'value'\n    > &\n      VariantProps<typeof toolbarButtonVariants>\n  >(\n    (\n      { children, className, isDropdown, pressed, size, variant, ...props },\n      ref\n    ) => {\n      return typeof pressed === 'boolean' ? (\n        <ToolbarToggleGroup\n          disabled={props.disabled}\n          value=\"single\"\n          type=\"single\"\n        >\n          <ToolbarToggleItem\n            ref={ref}\n            className={cn(\n              toolbarButtonVariants({\n                size,\n                variant,\n              }),\n              isDropdown && 'justify-between gap-1 pr-1',\n              className\n            )}\n            value={pressed ? 'single' : ''}\n            {...props}\n          >\n            {isDropdown ? (\n              <>\n                <div className=\"flex flex-1 items-center gap-2 whitespace-nowrap\">\n                  {children}\n                </div>\n                <div>\n                  <ChevronDown\n                    className=\"size-3.5 text-muted-foreground\"\n                    data-icon\n                  />\n                </div>\n              </>\n            ) : (\n              children\n            )}\n          </ToolbarToggleItem>\n        </ToolbarToggleGroup>\n      ) : (\n        <ToolbarPrimitive.Button\n          ref={ref}\n          className={cn(\n            toolbarButtonVariants({\n              size,\n              variant,\n            }),\n            isDropdown && 'pr-1',\n            className\n          )}\n          {...props}\n        >\n          {children}\n        </ToolbarPrimitive.Button>\n      );\n    }\n  )\n);\nToolbarButton.displayName = 'ToolbarButton';\n\nexport { ToolbarButton };\n\nexport const ToolbarSplitButton = React.forwardRef<\n  React.ElementRef<typeof ToolbarToggleGroup>,\n  {\n    pressed?: boolean;\n    tooltip?: string;\n  } & Omit<\n    React.ComponentPropsWithoutRef<typeof ToolbarToggleItem>,\n    'asChild' | 'value'\n  >\n>(({ children, pressed, ...props }, ref) => {\n  return (\n    <ToolbarToggleGroup\n      ref={ref}\n      className=\"group\"\n      disabled={props.disabled}\n      value=\"single\"\n      data-pressed={pressed}\n      type=\"single\"\n    >\n      <div className=\"flex\">{children}</div>\n    </ToolbarToggleGroup>\n  );\n});\n\nexport const ToolbarSplitButtonPrimary = React.forwardRef<\n  React.ElementRef<typeof ToolbarToggleItem>,\n  {\n    className?: string;\n    size?: 'default' | 'lg' | 'sm';\n    variant?: 'default' | 'outline';\n  } & Omit<React.ComponentPropsWithoutRef<typeof ToolbarToggleItem>, 'value'>\n>(({ children, className, size, variant, ...props }, ref) => {\n  return (\n    <ToolbarToggleItem\n      ref={ref}\n      className={cn(\n        className,\n        toolbarButtonVariants({\n          size,\n          variant,\n        }),\n        'rounded-r-none',\n        'group-data-[pressed=true]:bg-accent group-data-[pressed=true]:text-accent-foreground'\n      )}\n      value=\"split-primary\"\n      {...props}\n    >\n      {children}\n    </ToolbarToggleItem>\n  );\n});\n\nexport const ToolbarSplitButtonSecondary = React.forwardRef<\n  HTMLButtonElement,\n  {\n    className?: string;\n    size?: 'default' | 'lg' | 'sm';\n    variant?: 'default' | 'outline';\n  } & React.ButtonHTMLAttributes<HTMLButtonElement>\n>(({ className, size, variant, ...props }, ref) => {\n  return (\n    <button\n      ref={ref}\n      className={cn(\n        className,\n        dropdownArrowVariants({\n          size,\n          variant,\n        }),\n        'group-data-[pressed=true]:bg-accent group-data-[pressed=true]:text-accent-foreground'\n      )}\n      disabled={props.disabled}\n      type=\"reset\"\n      {...props}\n    >\n      <ChevronDown className=\"size-3.5 text-muted-foreground\" data-icon />\n    </button>\n  );\n});\n\nToolbarSplitButton.displayName = 'ToolbarButton';\n\nexport const ToolbarToggleItem = withVariants(\n  ToolbarPrimitive.ToggleItem,\n  toolbarButtonVariants,\n  ['variant', 'size']\n);\n\nexport const ToolbarGroup = withRef<'div'>(({ children, className }, ref) => {\n  return (\n    <div\n      ref={ref}\n      className={cn(\n        'group/toolbar-group',\n        'relative hidden has-[button]:flex',\n        className\n      )}\n    >\n      <div className=\"flex items-center\">{children}</div>\n\n      <div className=\"mx-1.5 py-0.5 group-last/toolbar-group:!hidden\">\n        <Separator orientation=\"vertical\" />\n      </div>\n    </div>\n  );\n});\n",
       "path": "plate-ui/toolbar.tsx",
       "target": "components/plate-ui/toolbar.tsx",
       "type": "registry:ui"
diff --git a/apps/www/public/r/styles/default/upload-demo.json b/apps/www/public/r/styles/default/upload-demo.json
index 053540a3be..c8ee41f390 100644
--- a/apps/www/public/r/styles/default/upload-demo.json
+++ b/apps/www/public/r/styles/default/upload-demo.json
@@ -4,7 +4,7 @@
   },
   "files": [
     {
-      "content": "'use client';\n\nimport React from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { PlaceholderPlugin } from '@udecode/plate-media/react';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { TablePlugin } from '@udecode/plate-table/react';\n\nimport { settingsStore } from '@/components/context/settings-store';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { autoformatPlugin as autoformatListPlugin } from '@/components/editor/plugins/autoformat-list-plugin';\nimport { autoformatPlugin } from '@/components/editor/plugins/autoformat-plugin';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { FixedToolbarListPlugin } from '@/components/editor/plugins/fixed-toolbar-list-plugin';\nimport { FixedToolbarPlugin } from '@/components/editor/plugins/fixed-toolbar-plugin';\nimport { FloatingToolbarPlugin } from '@/components/editor/plugins/floating-toolbar-plugin';\nimport { tabbablePlugin } from '@/components/editor/plugins/tabbable-plugin';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { MediaPlaceholderElement } from '@/components/plate-ui/media-placeholder-element';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '') => {\n  const overridePlugins = usePlaygroundEnabled(id);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  const plugins: any[] = [\n    ...copilotPlugins,\n    ...editorPlugins,\n    id === 'list' ? FixedToolbarListPlugin : FixedToolbarPlugin,\n    FloatingToolbarPlugin,\n\n    id === 'list' ? autoformatListPlugin : autoformatPlugin,\n    TablePlugin.configure({\n      options: {\n        enableMerging: id === 'tableMerge',\n      },\n    }),\n    ListPlugin,\n    TodoListPlugin,\n    ExcalidrawPlugin,\n    NormalizeTypesPlugin.configure({\n      options: {\n        rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n      },\n    }),\n    SingleLinePlugin,\n    PlaceholderPlugin.withComponent(MediaPlaceholderElement),\n    // Testing\n    PlaywrightPlugin.configure({\n      enabled: process.env.NODE_ENV !== 'production',\n    }),\n  ];\n\n  if (id === 'tabbable') {\n    plugins.push(tabbablePlugin);\n  }\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins,\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const editor = usePlaygroundEditor(id);\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <EditorContainer className={cn(id && 'h-[500px]', className)}>\n          <Editor\n            variant=\"demo\"\n            className={cn(id ? 'h-[calc(100%-37px)] pb-8' : 'pb-[20vh]')}\n            spellCheck={false}\n          />\n        </EditorContainer>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
+      "content": "'use client';\n\nimport React from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { TablePlugin } from '@udecode/plate-table/react';\n\nimport { settingsStore } from '@/components/context/settings-store';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { autoformatPlugin as autoformatListPlugin } from '@/components/editor/plugins/autoformat-list-plugin';\nimport { autoformatPlugin } from '@/components/editor/plugins/autoformat-plugin';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { FixedToolbarListPlugin } from '@/components/editor/plugins/fixed-toolbar-list-plugin';\nimport { FixedToolbarPlugin } from '@/components/editor/plugins/fixed-toolbar-plugin';\nimport { FloatingToolbarPlugin } from '@/components/editor/plugins/floating-toolbar-plugin';\nimport { tabbablePlugin } from '@/components/editor/plugins/tabbable-plugin';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '') => {\n  const overridePlugins = usePlaygroundEnabled(id);\n\n  const value = usePlaygroundValue(id);\n  const key = settingsStore.use.version();\n  const editorId = id || 'playground-' + key;\n\n  const plugins: any[] = [\n    ...copilotPlugins,\n    ...editorPlugins,\n    id === 'list' ? FixedToolbarListPlugin : FixedToolbarPlugin,\n    FloatingToolbarPlugin,\n\n    id === 'list' ? autoformatListPlugin : autoformatPlugin,\n    TablePlugin.configure({\n      options: {\n        enableMerging: id === 'tableMerge',\n      },\n    }),\n    ListPlugin,\n    TodoListPlugin,\n    ExcalidrawPlugin,\n    NormalizeTypesPlugin.configure({\n      options: {\n        rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n      },\n    }),\n    SingleLinePlugin,\n    // Testing\n    PlaywrightPlugin.configure({\n      enabled: process.env.NODE_ENV !== 'production',\n    }),\n  ];\n\n  if (id === 'tabbable') {\n    plugins.push(tabbablePlugin);\n  }\n\n  return usePlateEditor(\n    {\n      id: editorId,\n      override: {\n        components: createPlateUI({\n          draggable: isEnabled('dnd', id),\n          placeholder: isEnabled('placeholder', id),\n        }),\n        plugins: overridePlugins,\n      },\n      plugins,\n      value: value,\n    },\n    []\n  );\n};\n\nexport default function PlaygroundDemo({\n  id,\n  className,\n}: {\n  id?: ValueId;\n  className?: string;\n  scrollSelector?: string;\n}) {\n  const editor = usePlaygroundEditor(id);\n\n  return (\n    <DemoId id={id}>\n      <Plate editor={editor}>\n        <EditorContainer className={cn(id && 'h-[500px]', className)}>\n          <Editor\n            variant=\"demo\"\n            className={cn(id ? 'h-[calc(100%-37px)] pb-8' : 'pb-[20vh]')}\n            spellCheck={false}\n          />\n        </EditorContainer>\n      </Plate>\n    </DemoId>\n  );\n}\n\nconst DemoIdContext = React.createContext<string | undefined>(undefined);\n\nexport function DemoId({\n  id,\n  children,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}) {\n  return <DemoIdContext.Provider value={id}>{children}</DemoIdContext.Provider>;\n}\n\nexport function useDemoId() {\n  return React.useContext(DemoIdContext);\n}\n",
       "path": "example/playground-demo.tsx",
       "target": "components/playground-demo.tsx",
       "type": "registry:example"
diff --git a/apps/www/src/__registry__/index.tsx b/apps/www/src/__registry__/index.tsx
index d159f4ada5..46ae8b3794 100644
--- a/apps/www/src/__registry__/index.tsx
+++ b/apps/www/src/__registry__/index.tsx
@@ -2117,18 +2117,6 @@ export const Index: Record<string, any> = {
       subcategory: "",
       chunks: []
     },
-    "upload": {
-      name: "upload",
-      description: "",
-      type: "registry:example",
-      registryDependencies: [],
-      files: ["registry/default/example/upload-demo.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/upload-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
     "editor-ai": {
       name: "editor-ai",
       description: "An AI editor",
diff --git a/apps/www/src/registry/default/example/upload-demo.tsx b/apps/www/src/registry/default/example/upload-demo.tsx
deleted file mode 100644
index 354919f26b..0000000000
--- a/apps/www/src/registry/default/example/upload-demo.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-'use client';
-
-import React from 'react';
-
-import {
-  Plate,
-  PlateContent,
-  usePlateEditor,
-} from '@udecode/plate-common/react';
-
-export default function BasicEditorDefaultDemo() {
-  const editor = usePlateEditor();
-
-  return (
-    <Plate editor={editor}>
-      <PlateContent placeholder="Type..." />
-    </Plate>
-  );
-}
diff --git a/apps/www/src/registry/registry-examples.ts b/apps/www/src/registry/registry-examples.ts
index d5eeadfd42..2231ea3485 100644
--- a/apps/www/src/registry/registry-examples.ts
+++ b/apps/www/src/registry/registry-examples.ts
@@ -752,12 +752,6 @@ export const examples: Registry = [
     registryDependencies: [],
     type: 'registry:example',
   },
-  {
-    files: ['example/upload-demo.tsx'],
-    name: 'upload',
-    registryDependencies: [],
-    type: 'registry:example',
-  },
   // {
   //   external: true,
   //   files: ['lib/plate-types.ts'],

From 67ae02f86d45fc880a6e72cf0d68155707c70430 Mon Sep 17 00:00:00 2001
From: Felix Feng <felixfeng33@gmail.com>
Date: Fri, 15 Nov 2024 10:36:36 +0800
Subject: [PATCH 23/34] lint

---
 .../deserializer/utils/deserializeMd.spec.tsx | 96 +++++++++++--------
 .../remark-slate/remarkDefaultElementRules.ts | 23 +++--
 2 files changed, 69 insertions(+), 50 deletions(-)

diff --git a/packages/markdown/src/lib/deserializer/utils/deserializeMd.spec.tsx b/packages/markdown/src/lib/deserializer/utils/deserializeMd.spec.tsx
index b2a07aaf72..31d1a5b555 100644
--- a/packages/markdown/src/lib/deserializer/utils/deserializeMd.spec.tsx
+++ b/packages/markdown/src/lib/deserializer/utils/deserializeMd.spec.tsx
@@ -553,6 +553,7 @@ describe('deserializeMdIndentList', () => {
 
     expect(deserializeMd(editor, input)).toEqual(output);
   });
+
   it('should deserialize a table', () => {
     const input = `
 | Left columns  | Right columns |
@@ -564,89 +565,104 @@ describe('deserializeMdIndentList', () => {
 
     const output = [
       {
-        type: 'table',
         children: [
           {
-            type: 'tr',
             children: [
               {
+                children: [
+                  {
+                    children: [{ text: 'Left columns' }],
+                    type: 'p',
+                  },
+                ],
                 type: 'td',
-                children: [{ 
-                  type: 'p',
-                  children: [{ text: 'Left columns' }],
-                 }],
               },
               {
+                children: [
+                  {
+                    children: [{ text: 'Right columns' }],
+                    type: 'p',
+                  },
+                ],
                 type: 'td',
-                children: [{ 
-                  type: 'p',
-                  children: [{ text: 'Right columns' }],
-                 }],
               },
             ],
+            type: 'tr',
           },
           {
-            type: 'tr',
             children: [
               {
+                children: [
+                  {
+                    children: [{ text: 'left foo' }],
+                    type: 'p',
+                  },
+                ],
                 type: 'td',
-                children: [{
-                  type: 'p',
-                  children: [{ text: 'left foo' }],
-                }],
               },
               {
+                children: [
+                  {
+                    children: [{ text: 'right foo' }],
+                    type: 'p',
+                  },
+                ],
                 type: 'td',
-                children: [{
-                  type: 'p',
-                  children: [{ text: 'right foo' }],
-                }],
               },
             ],
+            type: 'tr',
           },
           {
-            type: 'tr',
             children: [
               {
+                children: [
+                  {
+                    children: [{ text: 'left bar' }],
+                    type: 'p',
+                  },
+                ],
                 type: 'td',
-                children: [{
-                  type: 'p',
-                  children: [{ text: 'left bar' }],
-                }],
               },
               {
+                children: [
+                  {
+                    children: [{ text: 'right bar' }],
+                    type: 'p',
+                  },
+                ],
                 type: 'td',
-                children: [{
-                  type: 'p',
-                  children: [{ text: 'right bar' }],
-                }],
               },
             ],
+            type: 'tr',
           },
           {
-            type: 'tr',
             children: [
               {
+                children: [
+                  {
+                    children: [{ text: 'left baz' }],
+                    type: 'p',
+                  },
+                ],
                 type: 'td',
-                children: [{
-                  type: 'p',
-                  children: [{ text: 'left baz' }],
-                }],
               },
               {
+                children: [
+                  {
+                    children: [{ text: 'right baz' }],
+                    type: 'p',
+                  },
+                ],
                 type: 'td',
-                children: [{
-                  type: 'p',
-                  children: [{ text: 'right baz' }],
-                }],
               },
             ],
+            type: 'tr',
           },
         ],
-      }
-    ]
+        type: 'table',
+      },
+    ];
 
     expect(deserializeMd(editor, input)).toEqual(output);
   });
-
 });
diff --git a/packages/markdown/src/lib/remark-slate/remarkDefaultElementRules.ts b/packages/markdown/src/lib/remark-slate/remarkDefaultElementRules.ts
index 4ae11389ff..5a7d58b00d 100644
--- a/packages/markdown/src/lib/remark-slate/remarkDefaultElementRules.ts
+++ b/packages/markdown/src/lib/remark-slate/remarkDefaultElementRules.ts
@@ -11,8 +11,8 @@ export const remarkDefaultElementRules: RemarkElementRules = {
     transform: (node, options) => {
       const children = node.children?.length
         ? node.children.flatMap((paragraph) =>
-          remarkTransformElementChildren(paragraph, options)
-        )
+            remarkTransformElementChildren(paragraph, options)
+          )
         : [{ text: '' }];
 
       // Flatten nested blockquotes (e.g. >>>)
@@ -182,16 +182,19 @@ export const remarkDefaultElementRules: RemarkElementRules = {
             children:
               row.children?.map((cell) => {
                 return {
-                  type: options.editor.getType({ key: 'td' }),
-                  children: remarkTransformElementChildren(cell, options).map(child => {
-                    if (!child.type) {
-                      return {
-                        type: options.editor.getType({ key: 'p' }),
-                        children: [child]
+                  children: remarkTransformElementChildren(cell, options).map(
+                    (child) => {
+                      if (!child.type) {
+                        return {
+                          children: [child],
+                          type: options.editor.getType({ key: 'p' }),
+                        };
                       }
+
+                      return child;
                     }
-                    return child
-                  }),
+                  ),
+                  type: options.editor.getType({ key: 'td' }),
                 };
               }) || [],
             type: options.editor.getType({ key: 'tr' }),

From 473b57821b7f5dff0907b81d197691a43d691bbe Mon Sep 17 00:00:00 2001
From: Felix Feng <felixfeng33@gmail.com>
Date: Fri, 15 Nov 2024 15:33:26 +0800
Subject: [PATCH 24/34] fix

---
 .../plate-ui/history-toolbar-button.tsx       | 15 ++---
 .../default/plate-ui/media-dropdown-menu.tsx  |  3 +-
 .../src/registry/default/plate-ui/tabs.tsx    | 64 -------------------
 .../src/registry/default/plate-ui/toolbar.tsx | 14 ++--
 packages/media/package.json                   |  1 -
 yarn.lock                                     |  1 -
 6 files changed, 12 insertions(+), 86 deletions(-)
 delete mode 100644 apps/www/src/registry/default/plate-ui/tabs.tsx

diff --git a/apps/www/src/registry/default/plate-ui/history-toolbar-button.tsx b/apps/www/src/registry/default/plate-ui/history-toolbar-button.tsx
index f4260a8e64..a88b9fbe48 100644
--- a/apps/www/src/registry/default/plate-ui/history-toolbar-button.tsx
+++ b/apps/www/src/registry/default/plate-ui/history-toolbar-button.tsx
@@ -2,7 +2,6 @@ import React from 'react';
 
 import { useEditorRef, useEditorSelector } from '@udecode/plate-core/react';
 import { withRef } from '@udecode/react-utils';
-import { focusEditor } from '@udecode/slate-react';
 import { Redo2Icon, Undo2Icon } from 'lucide-react';
 
 import { ToolbarButton } from './toolbar';
@@ -18,11 +17,8 @@ export const RedoToolbarButton = withRef<typeof ToolbarButton>((props, ref) => {
     <ToolbarButton
       ref={ref}
       disabled={disabled}
-      onClick={(e) => {
-        e.preventDefault();
-        editor.redo();
-        focusEditor(editor);
-      }}
+      onClick={() => editor.redo()}
+      onMouseDown={(e) => e.preventDefault()}
       tooltip="Redo"
       {...props}
     >
@@ -42,11 +38,8 @@ export const UndoToolbarButton = withRef<typeof ToolbarButton>((props, ref) => {
     <ToolbarButton
       ref={ref}
       disabled={disabled}
-      onClick={(e) => {
-        e.preventDefault();
-        editor.undo();
-        focusEditor(editor);
-      }}
+      onClick={() => editor.undo()}
+      onMouseDown={(e) => e.preventDefault()}
       tooltip="Undo"
       {...props}
     >
diff --git a/apps/www/src/registry/default/plate-ui/media-dropdown-menu.tsx b/apps/www/src/registry/default/plate-ui/media-dropdown-menu.tsx
index e1d6a91566..1d0e417197 100644
--- a/apps/www/src/registry/default/plate-ui/media-dropdown-menu.tsx
+++ b/apps/www/src/registry/default/plate-ui/media-dropdown-menu.tsx
@@ -74,7 +74,7 @@ export function MediaDropdownMenu({
 }: DropdownMenuProps & { nodeType: string }) {
   const currentConfig = MEDIA_CONFIG[nodeType];
 
-  const { api, editor, setOptions } = useEditorPlugin(MediaEmbedPlugin);
+  const { editor, setOptions } = useEditorPlugin(MediaEmbedPlugin);
   const { openFilePicker } = useFilePicker({
     accept: currentConfig.accept,
     multiple: true,
@@ -118,7 +118,6 @@ export function MediaDropdownMenu({
           <DropdownMenuRadioItem
             value="url"
             onSelect={() => {
-              // api.media_embed.openFloating(nodeType);
               focusEditor(editor);
               setOptions({ isFloatingOpen: true, mediaType: nodeType });
             }}
diff --git a/apps/www/src/registry/default/plate-ui/tabs.tsx b/apps/www/src/registry/default/plate-ui/tabs.tsx
deleted file mode 100644
index bea6294b37..0000000000
--- a/apps/www/src/registry/default/plate-ui/tabs.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-'use client';
-
-import * as React from 'react';
-
-import * as TabsPrimitive from '@radix-ui/react-tabs';
-import { cn } from '@udecode/cn';
-import { type VariantProps, cva } from 'class-variance-authority';
-
-const Tabs = TabsPrimitive.Root;
-
-const tabsListVariants = cva(
-  'inline-flex h-10 w-full items-center border-b border-border bg-background px-2 text-sm'
-);
-
-const TabsList = React.forwardRef<
-  React.ElementRef<typeof TabsPrimitive.List>,
-  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List> &
-    VariantProps<typeof tabsListVariants>
->(({ className, ...props }, ref) => (
-  <TabsPrimitive.List
-    ref={ref}
-    className={cn(tabsListVariants(), className)}
-    {...props}
-  />
-));
-TabsList.displayName = TabsPrimitive.List.displayName;
-
-const tabsTriggerVariants = cva(
-  cn(
-    'relative inline-flex h-[28px] items-center justify-center whitespace-nowrap rounded-sm px-2 transition-all disabled:pointer-events-none disabled:opacity-50',
-    'text-muted-foreground/80 ring-offset-background hover:bg-accent hover:text-accent-foreground',
-    'data-[state=active]:text-foreground data-[state=active]:before:absolute data-[state=active]:before:bottom-[-6px] data-[state=active]:before:left-2 data-[state=active]:before:h-[2px] data-[state=active]:before:w-[calc(100%-16px)] data-[state=active]:before:bg-primary data-[state=active]:before:content-[""]'
-  )
-);
-
-const TabsTrigger = React.forwardRef<
-  React.ElementRef<typeof TabsPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger> &
-    VariantProps<typeof tabsTriggerVariants>
->(({ className, ...props }, ref) => (
-  <TabsPrimitive.Trigger
-    ref={ref}
-    className={cn(tabsTriggerVariants(), className)}
-    {...props}
-  />
-));
-TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
-
-const TabsContent = React.forwardRef<
-  React.ElementRef<typeof TabsPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
->(({ className, ...props }, ref) => (
-  <TabsPrimitive.Content
-    ref={ref}
-    className={cn(
-      'mt-2 ring-offset-background focus-visible:outline-none',
-      className
-    )}
-    {...props}
-  />
-));
-TabsContent.displayName = TabsPrimitive.Content.displayName;
-
-export { Tabs, TabsContent, TabsList, TabsTrigger };
diff --git a/apps/www/src/registry/default/plate-ui/toolbar.tsx b/apps/www/src/registry/default/plate-ui/toolbar.tsx
index 2215e3b96f..90b95ba4fd 100644
--- a/apps/www/src/registry/default/plate-ui/toolbar.tsx
+++ b/apps/www/src/registry/default/plate-ui/toolbar.tsx
@@ -175,7 +175,9 @@ export const ToolbarSplitButton = React.forwardRef<
       data-pressed={pressed}
       type="single"
     >
-      <div className="flex">{children}</div>
+      <button className="flex" type="button">
+        {children}
+      </button>
     </ToolbarToggleGroup>
   );
 });
@@ -189,7 +191,7 @@ export const ToolbarSplitButtonPrimary = React.forwardRef<
   } & Omit<React.ComponentPropsWithoutRef<typeof ToolbarToggleItem>, 'value'>
 >(({ children, className, size, variant, ...props }, ref) => {
   return (
-    <ToolbarToggleItem
+    <span
       ref={ref}
       className={cn(
         className,
@@ -200,11 +202,10 @@ export const ToolbarSplitButtonPrimary = React.forwardRef<
         'rounded-r-none',
         'group-data-[pressed=true]:bg-accent group-data-[pressed=true]:text-accent-foreground'
       )}
-      value="split-primary"
       {...props}
     >
       {children}
-    </ToolbarToggleItem>
+    </span>
   );
 });
 
@@ -217,7 +218,7 @@ export const ToolbarSplitButtonSecondary = React.forwardRef<
   } & React.ButtonHTMLAttributes<HTMLButtonElement>
 >(({ className, size, variant, ...props }, ref) => {
   return (
-    <button
+    <span
       ref={ref}
       className={cn(
         className,
@@ -228,11 +229,10 @@ export const ToolbarSplitButtonSecondary = React.forwardRef<
         'group-data-[pressed=true]:bg-accent group-data-[pressed=true]:text-accent-foreground'
       )}
       disabled={props.disabled}
-      type="reset"
       {...props}
     >
       <ChevronDown className="size-3.5 text-muted-foreground" data-icon />
-    </button>
+    </span>
   );
 });
 
diff --git a/packages/media/package.json b/packages/media/package.json
index 51ad15a49f..0b09cd4124 100644
--- a/packages/media/package.json
+++ b/packages/media/package.json
@@ -50,7 +50,6 @@
     "typecheck": "yarn p:typecheck"
   },
   "dependencies": {
-    "@udecode/plate-floating": "40.0.0",
     "js-video-url-parser": "^0.5.1"
   },
   "devDependencies": {
diff --git a/yarn.lock b/yarn.lock
index d9e8c781ff..db84f59d5b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6954,7 +6954,6 @@ __metadata:
   resolution: "@udecode/plate-media@workspace:packages/media"
   dependencies:
     "@udecode/plate-common": "workspace:^"
-    "@udecode/plate-floating": "npm:40.0.0"
     js-video-url-parser: "npm:^0.5.1"
   peerDependencies:
     "@udecode/plate-common": ">=40.0.3"

From 0acb2f14a2a1b7314f035a979cada22662483dde Mon Sep 17 00:00:00 2001
From: Felix Feng <felixfeng33@gmail.com>
Date: Fri, 15 Nov 2024 16:01:46 +0800
Subject: [PATCH 25/34] fix

---
 .../public/r/styles/default/media-dropdown-menu.json   |  2 +-
 apps/www/public/r/styles/default/media-plugins.json    |  2 +-
 apps/www/public/r/styles/default/toolbar.json          |  2 +-
 .../components/editor/plugins/media-plugins.tsx        |  4 ++--
 .../registry/default/plate-ui/media-dropdown-menu.tsx  |  2 +-
 ...ia-floating-toolbar.tsx => media-embed-popover.tsx} | 10 +++++-----
 packages/media/src/react/media/MediaEmbedPlugin.tsx    |  6 +++---
 .../media/src/react/media/{hooks => Popover}/index.ts  |  2 +-
 .../media/{hooks => Popover}/useMediaEmbedEnter.ts     |  2 +-
 .../media/{hooks => Popover}/useMediaEmbedEscape.ts    |  4 ++--
 .../useMediaEmbedPopover.ts}                           |  6 +++---
 packages/media/src/react/media/index.ts                |  2 +-
 12 files changed, 22 insertions(+), 22 deletions(-)
 rename apps/www/src/registry/default/plate-ui/{media-floating-toolbar.tsx => media-embed-popover.tsx} (91%)
 rename packages/media/src/react/media/{hooks => Popover}/index.ts (75%)
 rename packages/media/src/react/media/{hooks => Popover}/useMediaEmbedEnter.ts (90%)
 rename packages/media/src/react/media/{hooks => Popover}/useMediaEmbedEscape.ts (81%)
 rename packages/media/src/react/media/{hooks/useMediaFloatingToolbar.ts => Popover/useMediaEmbedPopover.ts} (88%)

diff --git a/apps/www/public/r/styles/default/media-dropdown-menu.json b/apps/www/public/r/styles/default/media-dropdown-menu.json
index 1ea551a735..84e5254ab9 100644
--- a/apps/www/public/r/styles/default/media-dropdown-menu.json
+++ b/apps/www/public/r/styles/default/media-dropdown-menu.json
@@ -17,7 +17,7 @@
   },
   "files": [
     {
-      "content": "'use client';\n\nimport React from 'react';\n\nimport type { DropdownMenuProps } from '@radix-ui/react-dropdown-menu';\n\nimport { cn } from '@udecode/cn';\nimport { useEditorPlugin } from '@udecode/plate-core/react';\nimport {\n  AudioPlugin,\n  FilePlugin,\n  ImagePlugin,\n  MediaEmbedPlugin,\n  VideoPlugin,\n} from '@udecode/plate-media/react';\nimport { focusEditor } from '@udecode/slate-react';\nimport {\n  AudioLinesIcon,\n  FileUpIcon,\n  FilmIcon,\n  ImageIcon,\n  LinkIcon,\n} from 'lucide-react';\nimport { useFilePicker } from 'use-file-picker';\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuTrigger,\n  useOpenState,\n} from './dropdown-menu';\nimport {\n  ToolbarSplitButton,\n  ToolbarSplitButtonPrimary,\n  ToolbarSplitButtonSecondary,\n} from './toolbar';\n\nconst MEDIA_CONFIG: Record<\n  string,\n  {\n    accept: string[];\n    icon: React.ReactNode;\n    tooltip: string;\n  }\n> = {\n  [AudioPlugin.key]: {\n    accept: ['audio/*'],\n    icon: <AudioLinesIcon className=\"size-4\" />,\n    tooltip: 'Audio',\n  },\n  [FilePlugin.key]: {\n    accept: ['*'],\n    icon: <FileUpIcon className=\"size-4\" />,\n    tooltip: 'File',\n  },\n  [ImagePlugin.key]: {\n    accept: ['image/*'],\n    icon: <ImageIcon className=\"size-4\" />,\n    tooltip: 'Image',\n  },\n  [VideoPlugin.key]: {\n    accept: ['video/*'],\n    icon: <FilmIcon className=\"size-4\" />,\n    tooltip: 'Video',\n  },\n};\n\nexport function MediaDropdownMenu({\n  children,\n  nodeType,\n  ...props\n}: DropdownMenuProps & { nodeType: string }) {\n  const currentConfig = MEDIA_CONFIG[nodeType];\n\n  const { api, editor, setOptions } = useEditorPlugin(MediaEmbedPlugin);\n  const { openFilePicker } = useFilePicker({\n    accept: currentConfig.accept,\n    multiple: true,\n    onFilesSelected: ({ plainFiles: updatedFiles }) => {\n      (editor as any).tf.insert.media(updatedFiles);\n    },\n  });\n\n  const openState = useOpenState();\n\n  return (\n    <DropdownMenu {...openState} modal={false} {...props}>\n      <ToolbarSplitButton\n        pressed={openState.open}\n        tooltip={currentConfig.tooltip}\n      >\n        <ToolbarSplitButtonPrimary onClick={() => openFilePicker()}>\n          {currentConfig.icon}\n        </ToolbarSplitButtonPrimary>\n\n        <DropdownMenuTrigger asChild>\n          <ToolbarSplitButtonSecondary />\n        </DropdownMenuTrigger>\n      </ToolbarSplitButton>\n\n      <DropdownMenuContent\n        className={cn('min-w-0 data-[state=closed]:hidden')}\n        align=\"start\"\n      >\n        <DropdownMenuRadioGroup>\n          <DropdownMenuRadioItem\n            value=\"upload\"\n            onSelect={() => openFilePicker()}\n            hideIcon\n          >\n            <div className=\"flex items-center gap-2\">\n              {currentConfig.icon}\n              <span className=\"text-sm\">Upload from computer</span>\n            </div>\n          </DropdownMenuRadioItem>\n          <DropdownMenuRadioItem\n            value=\"url\"\n            onSelect={() => {\n              // api.media_embed.openFloating(nodeType);\n              focusEditor(editor);\n              setOptions({ isFloatingOpen: true, mediaType: nodeType });\n            }}\n            hideIcon\n          >\n            <div className=\"flex items-center gap-2\">\n              <LinkIcon />\n              <span className=\"text-sm\">Insert via URL</span>\n            </div>\n          </DropdownMenuRadioItem>\n        </DropdownMenuRadioGroup>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n}\n",
+      "content": "'use client';\n\nimport React from 'react';\n\nimport type { DropdownMenuProps } from '@radix-ui/react-dropdown-menu';\n\nimport { cn } from '@udecode/cn';\nimport { useEditorPlugin } from '@udecode/plate-core/react';\nimport {\n  AudioPlugin,\n  FilePlugin,\n  ImagePlugin,\n  MediaEmbedPlugin,\n  VideoPlugin,\n} from '@udecode/plate-media/react';\nimport { focusEditor } from '@udecode/slate-react';\nimport {\n  AudioLinesIcon,\n  FileUpIcon,\n  FilmIcon,\n  ImageIcon,\n  LinkIcon,\n} from 'lucide-react';\nimport { useFilePicker } from 'use-file-picker';\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuTrigger,\n  useOpenState,\n} from './dropdown-menu';\nimport {\n  ToolbarSplitButton,\n  ToolbarSplitButtonPrimary,\n  ToolbarSplitButtonSecondary,\n} from './toolbar';\n\nconst MEDIA_CONFIG: Record<\n  string,\n  {\n    accept: string[];\n    icon: React.ReactNode;\n    tooltip: string;\n  }\n> = {\n  [AudioPlugin.key]: {\n    accept: ['audio/*'],\n    icon: <AudioLinesIcon className=\"size-4\" />,\n    tooltip: 'Audio',\n  },\n  [FilePlugin.key]: {\n    accept: ['*'],\n    icon: <FileUpIcon className=\"size-4\" />,\n    tooltip: 'File',\n  },\n  [ImagePlugin.key]: {\n    accept: ['image/*'],\n    icon: <ImageIcon className=\"size-4\" />,\n    tooltip: 'Image',\n  },\n  [VideoPlugin.key]: {\n    accept: ['video/*'],\n    icon: <FilmIcon className=\"size-4\" />,\n    tooltip: 'Video',\n  },\n};\n\nexport function MediaDropdownMenu({\n  children,\n  nodeType,\n  ...props\n}: DropdownMenuProps & { nodeType: string }) {\n  const currentConfig = MEDIA_CONFIG[nodeType];\n\n  const { editor, setOptions } = useEditorPlugin(MediaEmbedPlugin);\n  const { openFilePicker } = useFilePicker({\n    accept: currentConfig.accept,\n    multiple: true,\n    onFilesSelected: ({ plainFiles: updatedFiles }) => {\n      (editor as any).tf.insert.media(updatedFiles);\n    },\n  });\n\n  const openState = useOpenState();\n\n  return (\n    <DropdownMenu {...openState} modal={false} {...props}>\n      <ToolbarSplitButton\n        pressed={openState.open}\n        tooltip={currentConfig.tooltip}\n      >\n        <ToolbarSplitButtonPrimary onClick={() => openFilePicker()}>\n          {currentConfig.icon}\n        </ToolbarSplitButtonPrimary>\n\n        <DropdownMenuTrigger asChild>\n          <ToolbarSplitButtonSecondary />\n        </DropdownMenuTrigger>\n      </ToolbarSplitButton>\n\n      <DropdownMenuContent\n        className={cn('min-w-0 data-[state=closed]:hidden')}\n        align=\"start\"\n      >\n        <DropdownMenuRadioGroup>\n          <DropdownMenuRadioItem\n            value=\"upload\"\n            onSelect={() => openFilePicker()}\n            hideIcon\n          >\n            <div className=\"flex items-center gap-2\">\n              {currentConfig.icon}\n              <span className=\"text-sm\">Upload from computer</span>\n            </div>\n          </DropdownMenuRadioItem>\n          <DropdownMenuRadioItem\n            value=\"url\"\n            onSelect={() => {\n              focusEditor(editor);\n              setOptions({ isOpen: true, mediaType: nodeType });\n            }}\n            hideIcon\n          >\n            <div className=\"flex items-center gap-2\">\n              <LinkIcon />\n              <span className=\"text-sm\">Insert via URL</span>\n            </div>\n          </DropdownMenuRadioItem>\n        </DropdownMenuRadioGroup>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n}\n",
       "path": "plate-ui/media-dropdown-menu.tsx",
       "target": "components/plate-ui/media-dropdown-menu.tsx",
       "type": "registry:ui"
diff --git a/apps/www/public/r/styles/default/media-plugins.json b/apps/www/public/r/styles/default/media-plugins.json
index fe1e4cc383..eab117fbec 100644
--- a/apps/www/public/r/styles/default/media-plugins.json
+++ b/apps/www/public/r/styles/default/media-plugins.json
@@ -5,7 +5,7 @@
   ],
   "files": [
     {
-      "content": "'use client';\n\nimport { CaptionPlugin } from '@udecode/plate-caption/react';\nimport {\n  AudioPlugin,\n  FilePlugin,\n  ImagePlugin,\n  MediaEmbedPlugin,\n  PlaceholderPlugin,\n  VideoPlugin,\n} from '@udecode/plate-media/react';\n\nimport { ImagePreview } from '@/components/plate-ui/image-preview';\nimport { MediaFloatingToolbar } from '@/components/plate-ui/media-floating-toolbar';\nimport { MediaUploadToast } from '@/components/plate-ui/media-upload-toast';\n\nexport const mediaPlugins = [\n  ImagePlugin.extend({\n    options: {\n      disableUploadInsert: true,\n    },\n    render: { afterEditable: ImagePreview },\n  }),\n  MediaEmbedPlugin.configure({\n    render: { afterEditable: () => <MediaFloatingToolbar /> },\n  }),\n  VideoPlugin,\n  AudioPlugin,\n  FilePlugin,\n  CaptionPlugin.configure({\n    options: { plugins: [ImagePlugin, MediaEmbedPlugin] },\n  }),\n  PlaceholderPlugin.configure({\n    render: {\n      afterEditable: () => <MediaUploadToast />,\n    },\n  }),\n] as const;\n",
+      "content": "'use client';\n\nimport { CaptionPlugin } from '@udecode/plate-caption/react';\nimport {\n  AudioPlugin,\n  FilePlugin,\n  ImagePlugin,\n  MediaEmbedPlugin,\n  PlaceholderPlugin,\n  VideoPlugin,\n} from '@udecode/plate-media/react';\n\nimport { ImagePreview } from '@/components/plate-ui/image-preview';\nimport { MediaEmbedPopover } from '@/components/plate-ui/media-embed-popover';\nimport { MediaUploadToast } from '@/components/plate-ui/media-upload-toast';\n\nexport const mediaPlugins = [\n  ImagePlugin.extend({\n    options: {\n      disableUploadInsert: true,\n    },\n    render: { afterEditable: ImagePreview },\n  }),\n  MediaEmbedPlugin.configure({\n    render: { afterEditable: () => <MediaEmbedPopover /> },\n  }),\n  VideoPlugin,\n  AudioPlugin,\n  FilePlugin,\n  CaptionPlugin.configure({\n    options: { plugins: [ImagePlugin, MediaEmbedPlugin] },\n  }),\n  PlaceholderPlugin.configure({\n    render: {\n      afterEditable: () => <MediaUploadToast />,\n    },\n  }),\n] as const;\n",
       "path": "components/editor/plugins/media-plugins.tsx",
       "target": "components/editor/plugins/media-plugins.tsx",
       "type": "registry:component"
diff --git a/apps/www/public/r/styles/default/toolbar.json b/apps/www/public/r/styles/default/toolbar.json
index 28c92e952d..857ae22491 100644
--- a/apps/www/public/r/styles/default/toolbar.json
+++ b/apps/www/public/r/styles/default/toolbar.json
@@ -7,7 +7,7 @@
   },
   "files": [
     {
-      "content": "'use client';\n\nimport * as React from 'react';\n\nimport * as ToolbarPrimitive from '@radix-ui/react-toolbar';\nimport { cn, withCn, withRef, withVariants } from '@udecode/cn';\nimport { type VariantProps, cva } from 'class-variance-authority';\nimport { ChevronDown } from 'lucide-react';\n\nimport { Separator } from './separator';\nimport { withTooltip } from './tooltip';\n\nexport const Toolbar = withCn(\n  ToolbarPrimitive.Root,\n  'relative flex select-none items-center'\n);\n\nexport const ToolbarToggleGroup = withCn(\n  ToolbarPrimitive.ToolbarToggleGroup,\n  'flex items-center'\n);\n\nexport const ToolbarLink = withCn(\n  ToolbarPrimitive.Link,\n  'font-medium underline underline-offset-4'\n);\n\nexport const ToolbarSeparator = withCn(\n  ToolbarPrimitive.Separator,\n  'mx-2 my-1 w-px shrink-0 bg-border'\n);\n\nconst toolbarButtonVariants = cva(\n  cn(\n    'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium text-foreground ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg:not([data-icon])]:size-4'\n  ),\n  {\n    defaultVariants: {\n      size: 'sm',\n      variant: 'default',\n    },\n    variants: {\n      size: {\n        default: 'h-10 px-3',\n        lg: 'h-11 px-5',\n        sm: 'h-7 px-2',\n      },\n      variant: {\n        default:\n          'bg-transparent hover:bg-muted hover:text-muted-foreground aria-checked:bg-accent aria-checked:text-accent-foreground',\n        outline:\n          'border border-input bg-transparent hover:bg-accent hover:text-accent-foreground',\n      },\n    },\n  }\n);\n\nconst dropdownArrowVariants = cva(\n  cn(\n    'inline-flex items-center justify-center rounded-r-md text-sm font-medium text-foreground transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50'\n  ),\n  {\n    defaultVariants: {\n      size: 'sm',\n      variant: 'default',\n    },\n    variants: {\n      size: {\n        default: 'h-10 w-6',\n        lg: 'h-11 w-8',\n        sm: 'h-7 w-4',\n      },\n      variant: {\n        default:\n          'bg-transparent hover:bg-muted hover:text-muted-foreground aria-checked:bg-accent aria-checked:text-accent-foreground',\n        outline:\n          'border border-l-0 border-input bg-transparent hover:bg-accent hover:text-accent-foreground',\n      },\n    },\n  }\n);\n\nconst ToolbarButton = withTooltip(\n  // eslint-disable-next-line react/display-name\n  React.forwardRef<\n    React.ElementRef<typeof ToolbarToggleItem>,\n    {\n      isDropdown?: boolean;\n      pressed?: boolean;\n    } & Omit<\n      React.ComponentPropsWithoutRef<typeof ToolbarToggleItem>,\n      'asChild' | 'value'\n    > &\n      VariantProps<typeof toolbarButtonVariants>\n  >(\n    (\n      { children, className, isDropdown, pressed, size, variant, ...props },\n      ref\n    ) => {\n      return typeof pressed === 'boolean' ? (\n        <ToolbarToggleGroup\n          disabled={props.disabled}\n          value=\"single\"\n          type=\"single\"\n        >\n          <ToolbarToggleItem\n            ref={ref}\n            className={cn(\n              toolbarButtonVariants({\n                size,\n                variant,\n              }),\n              isDropdown && 'justify-between gap-1 pr-1',\n              className\n            )}\n            value={pressed ? 'single' : ''}\n            {...props}\n          >\n            {isDropdown ? (\n              <>\n                <div className=\"flex flex-1 items-center gap-2 whitespace-nowrap\">\n                  {children}\n                </div>\n                <div>\n                  <ChevronDown\n                    className=\"size-3.5 text-muted-foreground\"\n                    data-icon\n                  />\n                </div>\n              </>\n            ) : (\n              children\n            )}\n          </ToolbarToggleItem>\n        </ToolbarToggleGroup>\n      ) : (\n        <ToolbarPrimitive.Button\n          ref={ref}\n          className={cn(\n            toolbarButtonVariants({\n              size,\n              variant,\n            }),\n            isDropdown && 'pr-1',\n            className\n          )}\n          {...props}\n        >\n          {children}\n        </ToolbarPrimitive.Button>\n      );\n    }\n  )\n);\nToolbarButton.displayName = 'ToolbarButton';\n\nexport { ToolbarButton };\n\nexport const ToolbarSplitButton = React.forwardRef<\n  React.ElementRef<typeof ToolbarToggleGroup>,\n  {\n    pressed?: boolean;\n    tooltip?: string;\n  } & Omit<\n    React.ComponentPropsWithoutRef<typeof ToolbarToggleItem>,\n    'asChild' | 'value'\n  >\n>(({ children, pressed, ...props }, ref) => {\n  return (\n    <ToolbarToggleGroup\n      ref={ref}\n      className=\"group\"\n      disabled={props.disabled}\n      value=\"single\"\n      data-pressed={pressed}\n      type=\"single\"\n    >\n      <div className=\"flex\">{children}</div>\n    </ToolbarToggleGroup>\n  );\n});\n\nexport const ToolbarSplitButtonPrimary = React.forwardRef<\n  React.ElementRef<typeof ToolbarToggleItem>,\n  {\n    className?: string;\n    size?: 'default' | 'lg' | 'sm';\n    variant?: 'default' | 'outline';\n  } & Omit<React.ComponentPropsWithoutRef<typeof ToolbarToggleItem>, 'value'>\n>(({ children, className, size, variant, ...props }, ref) => {\n  return (\n    <ToolbarToggleItem\n      ref={ref}\n      className={cn(\n        className,\n        toolbarButtonVariants({\n          size,\n          variant,\n        }),\n        'rounded-r-none',\n        'group-data-[pressed=true]:bg-accent group-data-[pressed=true]:text-accent-foreground'\n      )}\n      value=\"split-primary\"\n      {...props}\n    >\n      {children}\n    </ToolbarToggleItem>\n  );\n});\n\nexport const ToolbarSplitButtonSecondary = React.forwardRef<\n  HTMLButtonElement,\n  {\n    className?: string;\n    size?: 'default' | 'lg' | 'sm';\n    variant?: 'default' | 'outline';\n  } & React.ButtonHTMLAttributes<HTMLButtonElement>\n>(({ className, size, variant, ...props }, ref) => {\n  return (\n    <button\n      ref={ref}\n      className={cn(\n        className,\n        dropdownArrowVariants({\n          size,\n          variant,\n        }),\n        'group-data-[pressed=true]:bg-accent group-data-[pressed=true]:text-accent-foreground'\n      )}\n      disabled={props.disabled}\n      type=\"reset\"\n      {...props}\n    >\n      <ChevronDown className=\"size-3.5 text-muted-foreground\" data-icon />\n    </button>\n  );\n});\n\nToolbarSplitButton.displayName = 'ToolbarButton';\n\nexport const ToolbarToggleItem = withVariants(\n  ToolbarPrimitive.ToggleItem,\n  toolbarButtonVariants,\n  ['variant', 'size']\n);\n\nexport const ToolbarGroup = withRef<'div'>(({ children, className }, ref) => {\n  return (\n    <div\n      ref={ref}\n      className={cn(\n        'group/toolbar-group',\n        'relative hidden has-[button]:flex',\n        className\n      )}\n    >\n      <div className=\"flex items-center\">{children}</div>\n\n      <div className=\"mx-1.5 py-0.5 group-last/toolbar-group:!hidden\">\n        <Separator orientation=\"vertical\" />\n      </div>\n    </div>\n  );\n});\n",
+      "content": "'use client';\n\nimport * as React from 'react';\n\nimport * as ToolbarPrimitive from '@radix-ui/react-toolbar';\nimport { cn, withCn, withRef, withVariants } from '@udecode/cn';\nimport { type VariantProps, cva } from 'class-variance-authority';\nimport { ChevronDown } from 'lucide-react';\n\nimport { Separator } from './separator';\nimport { withTooltip } from './tooltip';\n\nexport const Toolbar = withCn(\n  ToolbarPrimitive.Root,\n  'relative flex select-none items-center'\n);\n\nexport const ToolbarToggleGroup = withCn(\n  ToolbarPrimitive.ToolbarToggleGroup,\n  'flex items-center'\n);\n\nexport const ToolbarLink = withCn(\n  ToolbarPrimitive.Link,\n  'font-medium underline underline-offset-4'\n);\n\nexport const ToolbarSeparator = withCn(\n  ToolbarPrimitive.Separator,\n  'mx-2 my-1 w-px shrink-0 bg-border'\n);\n\nconst toolbarButtonVariants = cva(\n  cn(\n    'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium text-foreground ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg:not([data-icon])]:size-4'\n  ),\n  {\n    defaultVariants: {\n      size: 'sm',\n      variant: 'default',\n    },\n    variants: {\n      size: {\n        default: 'h-10 px-3',\n        lg: 'h-11 px-5',\n        sm: 'h-7 px-2',\n      },\n      variant: {\n        default:\n          'bg-transparent hover:bg-muted hover:text-muted-foreground aria-checked:bg-accent aria-checked:text-accent-foreground',\n        outline:\n          'border border-input bg-transparent hover:bg-accent hover:text-accent-foreground',\n      },\n    },\n  }\n);\n\nconst dropdownArrowVariants = cva(\n  cn(\n    'inline-flex items-center justify-center rounded-r-md text-sm font-medium text-foreground transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50'\n  ),\n  {\n    defaultVariants: {\n      size: 'sm',\n      variant: 'default',\n    },\n    variants: {\n      size: {\n        default: 'h-10 w-6',\n        lg: 'h-11 w-8',\n        sm: 'h-7 w-4',\n      },\n      variant: {\n        default:\n          'bg-transparent hover:bg-muted hover:text-muted-foreground aria-checked:bg-accent aria-checked:text-accent-foreground',\n        outline:\n          'border border-l-0 border-input bg-transparent hover:bg-accent hover:text-accent-foreground',\n      },\n    },\n  }\n);\n\nconst ToolbarButton = withTooltip(\n  // eslint-disable-next-line react/display-name\n  React.forwardRef<\n    React.ElementRef<typeof ToolbarToggleItem>,\n    {\n      isDropdown?: boolean;\n      pressed?: boolean;\n    } & Omit<\n      React.ComponentPropsWithoutRef<typeof ToolbarToggleItem>,\n      'asChild' | 'value'\n    > &\n      VariantProps<typeof toolbarButtonVariants>\n  >(\n    (\n      { children, className, isDropdown, pressed, size, variant, ...props },\n      ref\n    ) => {\n      return typeof pressed === 'boolean' ? (\n        <ToolbarToggleGroup\n          disabled={props.disabled}\n          value=\"single\"\n          type=\"single\"\n        >\n          <ToolbarToggleItem\n            ref={ref}\n            className={cn(\n              toolbarButtonVariants({\n                size,\n                variant,\n              }),\n              isDropdown && 'justify-between gap-1 pr-1',\n              className\n            )}\n            value={pressed ? 'single' : ''}\n            {...props}\n          >\n            {isDropdown ? (\n              <>\n                <div className=\"flex flex-1 items-center gap-2 whitespace-nowrap\">\n                  {children}\n                </div>\n                <div>\n                  <ChevronDown\n                    className=\"size-3.5 text-muted-foreground\"\n                    data-icon\n                  />\n                </div>\n              </>\n            ) : (\n              children\n            )}\n          </ToolbarToggleItem>\n        </ToolbarToggleGroup>\n      ) : (\n        <ToolbarPrimitive.Button\n          ref={ref}\n          className={cn(\n            toolbarButtonVariants({\n              size,\n              variant,\n            }),\n            isDropdown && 'pr-1',\n            className\n          )}\n          {...props}\n        >\n          {children}\n        </ToolbarPrimitive.Button>\n      );\n    }\n  )\n);\nToolbarButton.displayName = 'ToolbarButton';\n\nexport { ToolbarButton };\n\nexport const ToolbarSplitButton = React.forwardRef<\n  React.ElementRef<typeof ToolbarToggleGroup>,\n  {\n    pressed?: boolean;\n    tooltip?: string;\n  } & Omit<\n    React.ComponentPropsWithoutRef<typeof ToolbarToggleItem>,\n    'asChild' | 'value'\n  >\n>(({ children, pressed, ...props }, ref) => {\n  return (\n    <ToolbarToggleGroup\n      ref={ref}\n      className=\"group\"\n      disabled={props.disabled}\n      value=\"single\"\n      data-pressed={pressed}\n      type=\"single\"\n    >\n      <button className=\"flex\" type=\"button\">\n        {children}\n      </button>\n    </ToolbarToggleGroup>\n  );\n});\n\nexport const ToolbarSplitButtonPrimary = React.forwardRef<\n  React.ElementRef<typeof ToolbarToggleItem>,\n  {\n    className?: string;\n    size?: 'default' | 'lg' | 'sm';\n    variant?: 'default' | 'outline';\n  } & Omit<React.ComponentPropsWithoutRef<typeof ToolbarToggleItem>, 'value'>\n>(({ children, className, size, variant, ...props }, ref) => {\n  return (\n    <span\n      ref={ref}\n      className={cn(\n        className,\n        toolbarButtonVariants({\n          size,\n          variant,\n        }),\n        'rounded-r-none',\n        'group-data-[pressed=true]:bg-accent group-data-[pressed=true]:text-accent-foreground'\n      )}\n      {...props}\n    >\n      {children}\n    </span>\n  );\n});\n\nexport const ToolbarSplitButtonSecondary = React.forwardRef<\n  HTMLButtonElement,\n  {\n    className?: string;\n    size?: 'default' | 'lg' | 'sm';\n    variant?: 'default' | 'outline';\n  } & React.ButtonHTMLAttributes<HTMLButtonElement>\n>(({ className, size, variant, ...props }, ref) => {\n  return (\n    <span\n      ref={ref}\n      className={cn(\n        className,\n        dropdownArrowVariants({\n          size,\n          variant,\n        }),\n        'group-data-[pressed=true]:bg-accent group-data-[pressed=true]:text-accent-foreground'\n      )}\n      disabled={props.disabled}\n      {...props}\n    >\n      <ChevronDown className=\"size-3.5 text-muted-foreground\" data-icon />\n    </span>\n  );\n});\n\nToolbarSplitButton.displayName = 'ToolbarButton';\n\nexport const ToolbarToggleItem = withVariants(\n  ToolbarPrimitive.ToggleItem,\n  toolbarButtonVariants,\n  ['variant', 'size']\n);\n\nexport const ToolbarGroup = withRef<'div'>(({ children, className }, ref) => {\n  return (\n    <div\n      ref={ref}\n      className={cn(\n        'group/toolbar-group',\n        'relative hidden has-[button]:flex',\n        className\n      )}\n    >\n      <div className=\"flex items-center\">{children}</div>\n\n      <div className=\"mx-1.5 py-0.5 group-last/toolbar-group:!hidden\">\n        <Separator orientation=\"vertical\" />\n      </div>\n    </div>\n  );\n});\n",
       "path": "plate-ui/toolbar.tsx",
       "target": "components/plate-ui/toolbar.tsx",
       "type": "registry:ui"
diff --git a/apps/www/src/registry/default/components/editor/plugins/media-plugins.tsx b/apps/www/src/registry/default/components/editor/plugins/media-plugins.tsx
index cb023ce018..f39c2cc72b 100644
--- a/apps/www/src/registry/default/components/editor/plugins/media-plugins.tsx
+++ b/apps/www/src/registry/default/components/editor/plugins/media-plugins.tsx
@@ -11,7 +11,7 @@ import {
 } from '@udecode/plate-media/react';
 
 import { ImagePreview } from '@/registry/default/plate-ui/image-preview';
-import { MediaFloatingToolbar } from '@/registry/default/plate-ui/media-floating-toolbar';
+import { MediaEmbedPopover } from '@/registry/default/plate-ui/media-embed-popover';
 import { MediaUploadToast } from '@/registry/default/plate-ui/media-upload-toast';
 
 export const mediaPlugins = [
@@ -22,7 +22,7 @@ export const mediaPlugins = [
     render: { afterEditable: ImagePreview },
   }),
   MediaEmbedPlugin.configure({
-    render: { afterEditable: () => <MediaFloatingToolbar /> },
+    render: { afterEditable: () => <MediaEmbedPopover /> },
   }),
   VideoPlugin,
   AudioPlugin,
diff --git a/apps/www/src/registry/default/plate-ui/media-dropdown-menu.tsx b/apps/www/src/registry/default/plate-ui/media-dropdown-menu.tsx
index 1d0e417197..c307c21459 100644
--- a/apps/www/src/registry/default/plate-ui/media-dropdown-menu.tsx
+++ b/apps/www/src/registry/default/plate-ui/media-dropdown-menu.tsx
@@ -119,7 +119,7 @@ export function MediaDropdownMenu({
             value="url"
             onSelect={() => {
               focusEditor(editor);
-              setOptions({ isFloatingOpen: true, mediaType: nodeType });
+              setOptions({ isOpen: true, mediaType: nodeType });
             }}
             hideIcon
           >
diff --git a/apps/www/src/registry/default/plate-ui/media-floating-toolbar.tsx b/apps/www/src/registry/default/plate-ui/media-embed-popover.tsx
similarity index 91%
rename from apps/www/src/registry/default/plate-ui/media-floating-toolbar.tsx
rename to apps/www/src/registry/default/plate-ui/media-embed-popover.tsx
index 5cff9f9247..6c69f055c7 100644
--- a/apps/www/src/registry/default/plate-ui/media-floating-toolbar.tsx
+++ b/apps/www/src/registry/default/plate-ui/media-embed-popover.tsx
@@ -9,7 +9,7 @@ import {
   ImagePlugin,
   MediaEmbedPlugin,
   VideoPlugin,
-  useMediaFloatingToolbar,
+  useMediaEmbedPopover,
 } from '@udecode/plate-media/react';
 import { toDOMNode } from '@udecode/slate-react';
 import { getAncestorNode } from '@udecode/slate-utils';
@@ -45,11 +45,11 @@ const MEDIA_CONFIG: Record<
   },
 };
 
-export function MediaFloatingToolbar() {
+export function MediaEmbedPopover() {
   const { setOption, useOption } = useEditorPlugin(MediaEmbedPlugin);
 
   const mediaType = useOption('mediaType');
-  const isOpen = useOption('isFloatingOpen');
+  const isOpen = useOption('isOpen');
 
   const anchorElement = useEditorSelector(
     (editor) => {
@@ -70,14 +70,14 @@ export function MediaFloatingToolbar() {
     return MEDIA_CONFIG[mediaType];
   }, [mediaType]);
 
-  const { acceptProps, cancelProps, inputProps } = useMediaFloatingToolbar();
+  const { acceptProps, cancelProps, inputProps } = useMediaEmbedPopover();
 
   if (!anchorElement) return null;
 
   return (
     <Popover
       open={isOpen}
-      onOpenChange={(open) => setOption('isFloatingOpen', open)}
+      onOpenChange={(open) => setOption('isOpen', open)}
       modal={false}
     >
       <PopoverAnchor virtualRef={{ current: anchorElement }} />
diff --git a/packages/media/src/react/media/MediaEmbedPlugin.tsx b/packages/media/src/react/media/MediaEmbedPlugin.tsx
index 054e89b66b..474ecd72c4 100644
--- a/packages/media/src/react/media/MediaEmbedPlugin.tsx
+++ b/packages/media/src/react/media/MediaEmbedPlugin.tsx
@@ -11,7 +11,7 @@ import {
 type MediaEmbedConfig = ExtendConfig<
   BaseMediaEmbedConfig,
   {
-    isFloatingOpen?: boolean;
+    isOpen?: boolean;
     mediaType?: string | null;
     url?: string;
   }
@@ -21,14 +21,14 @@ export const MediaEmbedPlugin = toTPlatePlugin<MediaEmbedConfig>(
   BaseMediaEmbedPlugin,
   {
     options: {
-      isFloatingOpen: false,
+      isOpen: false,
       mediaType: null,
       url: '',
     },
   }
 ).extendTransforms(({ editor, getOptions, setOptions }) => ({
   embed: (url: string) => {
-    setOptions({ isFloatingOpen: false, url });
+    setOptions({ isOpen: false, url });
 
     const isUrl = getOptions().isUrl;
 
diff --git a/packages/media/src/react/media/hooks/index.ts b/packages/media/src/react/media/Popover/index.ts
similarity index 75%
rename from packages/media/src/react/media/hooks/index.ts
rename to packages/media/src/react/media/Popover/index.ts
index 7ce0fc15bd..2d88454c6b 100644
--- a/packages/media/src/react/media/hooks/index.ts
+++ b/packages/media/src/react/media/Popover/index.ts
@@ -4,4 +4,4 @@
 
 export * from './useMediaEmbedEnter';
 export * from './useMediaEmbedEscape';
-export * from './useMediaFloatingToolbar';
+export * from './useMediaEmbedPopover';
diff --git a/packages/media/src/react/media/hooks/useMediaEmbedEnter.ts b/packages/media/src/react/media/Popover/useMediaEmbedEnter.ts
similarity index 90%
rename from packages/media/src/react/media/hooks/useMediaEmbedEnter.ts
rename to packages/media/src/react/media/Popover/useMediaEmbedEnter.ts
index 0118e8565a..4d74077f6c 100644
--- a/packages/media/src/react/media/hooks/useMediaEmbedEnter.ts
+++ b/packages/media/src/react/media/Popover/useMediaEmbedEnter.ts
@@ -5,7 +5,7 @@ import { MediaEmbedPlugin } from '../../../react';
 export const useMediaEmbedEnter = () => {
   const { tf, useOption } = useEditorPlugin(MediaEmbedPlugin);
 
-  const isOpen = useOption('isFloatingOpen');
+  const isOpen = useOption('isOpen');
   const url = useOption('url');
 
   useHotkeys(
diff --git a/packages/media/src/react/media/hooks/useMediaEmbedEscape.ts b/packages/media/src/react/media/Popover/useMediaEmbedEscape.ts
similarity index 81%
rename from packages/media/src/react/media/hooks/useMediaEmbedEscape.ts
rename to packages/media/src/react/media/Popover/useMediaEmbedEscape.ts
index ec216b6af3..603cea3558 100644
--- a/packages/media/src/react/media/hooks/useMediaEmbedEscape.ts
+++ b/packages/media/src/react/media/Popover/useMediaEmbedEscape.ts
@@ -9,12 +9,12 @@ import { MediaEmbedPlugin } from '../MediaEmbedPlugin';
 export const useMediaEmbedEscape = () => {
   const { editor, setOptions, useOption } = useEditorPlugin(MediaEmbedPlugin);
 
-  const isOpen = useOption('isFloatingOpen');
+  const isOpen = useOption('isOpen');
 
   useHotkeys(
     'escape',
     () => {
-      setOptions({ isFloatingOpen: false, url: '' });
+      setOptions({ isOpen: false, url: '' });
       focusEditor(editor);
     },
     {
diff --git a/packages/media/src/react/media/hooks/useMediaFloatingToolbar.ts b/packages/media/src/react/media/Popover/useMediaEmbedPopover.ts
similarity index 88%
rename from packages/media/src/react/media/hooks/useMediaFloatingToolbar.ts
rename to packages/media/src/react/media/Popover/useMediaEmbedPopover.ts
index 12f4ddf8d7..a12b3f7754 100644
--- a/packages/media/src/react/media/hooks/useMediaFloatingToolbar.ts
+++ b/packages/media/src/react/media/Popover/useMediaEmbedPopover.ts
@@ -6,14 +6,14 @@ import { MediaEmbedPlugin } from '../MediaEmbedPlugin';
 import { useMediaEmbedEnter } from './useMediaEmbedEnter';
 import { useMediaEmbedEscape } from './useMediaEmbedEscape';
 
-export const useMediaFloatingToolbar = () => {
+export const useMediaEmbedPopover = () => {
   const { editor, setOption, tf, useOption } =
     useEditorPlugin(MediaEmbedPlugin);
-  const isOpen = useOption('isFloatingOpen');
+  const isOpen = useOption('isOpen');
   const url = useOption('url');
 
   const handleCancel = () => {
-    setOption('isFloatingOpen', false);
+    setOption('isOpen', false);
     focusEditor(editor);
   };
 
diff --git a/packages/media/src/react/media/index.ts b/packages/media/src/react/media/index.ts
index a093270fc5..d3abb7a11a 100644
--- a/packages/media/src/react/media/index.ts
+++ b/packages/media/src/react/media/index.ts
@@ -8,4 +8,4 @@ export * from './useMediaController';
 export * from './useMediaState';
 export * from './useMediaToolbarButton';
 export * from './FloatingMedia/index';
-export * from './hooks/index';
+export * from './Popover/index';

From 72ae7a7c1b36cc1a1b47ce41974094562fd5edbc Mon Sep 17 00:00:00 2001
From: Felix Feng <felixfeng33@gmail.com>
Date: Fri, 15 Nov 2024 20:09:25 +0800
Subject: [PATCH 26/34] toolbar

---
 .../registry/default/plate-ui/accordion.tsx   |  62 +++++++++++
 .../plate-ui/fixed-toolbar-buttons.tsx        | 101 +++++++++++++++---
 2 files changed, 148 insertions(+), 15 deletions(-)
 create mode 100644 apps/www/src/registry/default/plate-ui/accordion.tsx

diff --git a/apps/www/src/registry/default/plate-ui/accordion.tsx b/apps/www/src/registry/default/plate-ui/accordion.tsx
new file mode 100644
index 0000000000..32fff0ea60
--- /dev/null
+++ b/apps/www/src/registry/default/plate-ui/accordion.tsx
@@ -0,0 +1,62 @@
+'use client';
+
+import * as React from 'react';
+
+import * as AccordionPrimitive from '@radix-ui/react-accordion';
+import { cn } from '@udecode/cn';
+import { ChevronDown } from 'lucide-react';
+
+const Accordion = AccordionPrimitive.Root;
+
+const AccordionItem = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <AccordionPrimitive.Item
+    ref={ref}
+    className={cn('border-b', className)}
+    {...props}
+  />
+));
+AccordionItem.displayName = 'AccordionItem';
+
+const AccordionTrigger = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger> & {
+    hideIcon?: boolean;
+  }
+>(({ children, className, hideIcon = false, ...props }, ref) => (
+  <AccordionPrimitive.Header className="flex">
+    <AccordionPrimitive.Trigger
+      ref={ref}
+      className={cn(
+        'flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180',
+        className
+      )}
+      {...props}
+    >
+      {children}
+      {!hideIcon && (
+        <ChevronDown className="size-4 shrink-0 transition-transform duration-200" />
+      )}
+    </AccordionPrimitive.Trigger>
+  </AccordionPrimitive.Header>
+));
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
+
+const AccordionContent = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
+>(({ children, className, ...props }, ref) => (
+  <AccordionPrimitive.Content
+    ref={ref}
+    className="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+    {...props}
+  >
+    <div className={cn('pb-4 pt-0', className)}>{children}</div>
+  </AccordionPrimitive.Content>
+));
+
+AccordionContent.displayName = AccordionPrimitive.Content.displayName;
+
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger };
diff --git a/apps/www/src/registry/default/plate-ui/fixed-toolbar-buttons.tsx b/apps/www/src/registry/default/plate-ui/fixed-toolbar-buttons.tsx
index 93cd8c6aa2..755a5d42c1 100644
--- a/apps/www/src/registry/default/plate-ui/fixed-toolbar-buttons.tsx
+++ b/apps/www/src/registry/default/plate-ui/fixed-toolbar-buttons.tsx
@@ -1,12 +1,14 @@
 'use client';
 
-import React from 'react';
+import React, { useState } from 'react';
 
 import {
   BoldPlugin,
   CodePlugin,
   ItalicPlugin,
   StrikethroughPlugin,
+  SubscriptPlugin,
+  SuperscriptPlugin,
   UnderlinePlugin,
 } from '@udecode/plate-basic-marks/react';
 import { useEditorReadOnly } from '@udecode/plate-common/react';
@@ -14,7 +16,9 @@ import {
   FontBackgroundColorPlugin,
   FontColorPlugin,
 } from '@udecode/plate-font/react';
+import { HighlightPlugin } from '@udecode/plate-highlight/react';
 import { ListStyleType } from '@udecode/plate-indent-list';
+import { KbdPlugin } from '@udecode/plate-kbd/react';
 import {
   AudioPlugin,
   FilePlugin,
@@ -25,13 +29,24 @@ import {
   BaselineIcon,
   BoldIcon,
   Code2Icon,
+  HighlighterIcon,
   ItalicIcon,
+  KeyboardIcon,
+  MoreHorizontalIcon,
   PaintBucketIcon,
   SparklesIcon,
   StrikethroughIcon,
+  SubscriptIcon,
+  SuperscriptIcon,
   UnderlineIcon,
 } from 'lucide-react';
 
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from './accordion';
 import { AIToolbarButton } from './ai-toolbar-button';
 import { AlignDropdownMenu } from './align-dropdown-menu';
 import { ColorDropdownMenu } from './color-dropdown-menu';
@@ -47,14 +62,34 @@ import { LinkToolbarButton } from './link-toolbar-button';
 import { MarkToolbarButton } from './mark-toolbar-button';
 import { MediaDropdownMenu } from './media-dropdown-menu';
 import { ModeDropdownMenu } from './mode-dropdown-menu';
-import { MoreDropdownMenu } from './more-dropdown-menu';
 import { OutdentToolbarButton } from './outdent-toolbar-button';
 import { TableDropdownMenu } from './table-dropdown-menu';
 import { ToggleToolbarButton } from './toggle-toolbar-button';
-import { ToolbarGroup } from './toolbar';
+import { ToolbarButton, ToolbarGroup } from './toolbar';
 import { TurnIntoDropdownMenu } from './turn-into-dropdown-menu';
 
 export function FixedToolbarButtons() {
+  const [value, setValue] = useState('');
+  const expanded = value === 'toolbar';
+
+  return (
+    <Accordion
+      className="w-full"
+      onValueChange={setValue}
+      type="single"
+      collapsible
+    >
+      <AccordionItem className="border-b-0" value="toolbar">
+        <PrimaryButtons expanded={expanded} />
+        <AccordionContent className="p-0">
+          <ExpandedButtons />
+        </AccordionContent>
+      </AccordionItem>
+    </Accordion>
+  );
+}
+
+function PrimaryButtons({ expanded }: { expanded: boolean }) {
   const readOnly = useEditorReadOnly();
 
   return (
@@ -128,21 +163,10 @@ export function FixedToolbarButtons() {
 
           <ToolbarGroup>
             <AlignDropdownMenu />
-            <LineHeightDropdownMenu />
 
             <IndentListToolbarButton nodeType={ListStyleType.Disc} />
             <IndentListToolbarButton nodeType={ListStyleType.Decimal} />
             <IndentTodoToolbarButton />
-
-            <OutdentToolbarButton />
-            <IndentToolbarButton />
-          </ToolbarGroup>
-
-          <ToolbarGroup>
-            <MediaDropdownMenu nodeType={ImagePlugin.key} />
-            <MediaDropdownMenu nodeType={VideoPlugin.key} />
-            <MediaDropdownMenu nodeType={AudioPlugin.key} />
-            <MediaDropdownMenu nodeType={FilePlugin.key} />
           </ToolbarGroup>
 
           <ToolbarGroup>
@@ -150,7 +174,11 @@ export function FixedToolbarButtons() {
             <ToggleToolbarButton />
             <TableDropdownMenu />
             <EmojiDropdownMenu />
-            <MoreDropdownMenu />
+          </ToolbarGroup>
+
+          <ToolbarGroup>
+            <MediaDropdownMenu nodeType={ImagePlugin.key} />
+            <MediaDropdownMenu nodeType={VideoPlugin.key} />
           </ToolbarGroup>
         </>
       )}
@@ -160,6 +188,49 @@ export function FixedToolbarButtons() {
       <ToolbarGroup>
         <CommentToolbarButton />
         <ModeDropdownMenu />
+        <AccordionTrigger className="p-0" hideIcon>
+          <ToolbarButton pressed={expanded} tooltip="More">
+            <MoreHorizontalIcon />
+          </ToolbarButton>
+        </AccordionTrigger>
+      </ToolbarGroup>
+    </div>
+  );
+}
+
+function ExpandedButtons() {
+  return (
+    <div className="mt-1 flex w-full">
+      <ToolbarGroup>
+        <LineHeightDropdownMenu />
+        <OutdentToolbarButton />
+        <IndentToolbarButton />
+      </ToolbarGroup>
+
+      <ToolbarGroup>
+        <MediaDropdownMenu nodeType={AudioPlugin.key} />
+        <MediaDropdownMenu nodeType={FilePlugin.key} />
+      </ToolbarGroup>
+
+      <ToolbarGroup>
+        <MarkToolbarButton nodeType={HighlightPlugin.key} tooltip="Highlight">
+          <HighlighterIcon />
+        </MarkToolbarButton>
+
+        <MarkToolbarButton nodeType={KbdPlugin.key} tooltip="Keyboard input">
+          <KeyboardIcon />
+        </MarkToolbarButton>
+
+        <MarkToolbarButton
+          nodeType={SuperscriptPlugin.key}
+          tooltip="Superscript"
+        >
+          <SuperscriptIcon />
+        </MarkToolbarButton>
+
+        <MarkToolbarButton nodeType={SubscriptPlugin.key} tooltip="Subscript">
+          <SubscriptIcon />
+        </MarkToolbarButton>
       </ToolbarGroup>
     </div>
   );

From a0d08809d0f1735ae4ed211ad4c97e0f0aac4bfe Mon Sep 17 00:00:00 2001
From: Felix Feng <felixfeng33@gmail.com>
Date: Fri, 15 Nov 2024 21:39:55 +0800
Subject: [PATCH 27/34] fix

---
 .../default/plate-ui/media-dropdown-menu.tsx  | 102 ++++++++++--------
 .../default/plate-ui/media-embed-popover.tsx  |  69 ++++++------
 .../lib/media-embed/BaseMediaEmbedPlugin.ts   |  14 +--
 .../src/react/media/MediaEmbedPlugin.tsx      |  41 -------
 .../media/src/react/media/Popover/index.ts    |   7 --
 .../react/media/Popover/useMediaEmbedEnter.ts |  22 ----
 .../media/Popover/useMediaEmbedEscape.ts      |  26 -----
 .../media/Popover/useMediaEmbedPopover.ts     |  47 --------
 packages/media/src/react/media/index.ts       |   2 -
 packages/media/src/react/plugins.ts           |   3 +
 .../src/react/getLastBlockDOMNode.ts          |   8 ++
 packages/plate-utils/src/react/index.ts       |   1 +
 .../plate-utils/src/react/useLastBlock.ts     |  15 +++
 .../src/react/useLastBlockDOMNode.ts          |  26 +++++
 14 files changed, 148 insertions(+), 235 deletions(-)
 delete mode 100644 packages/media/src/react/media/MediaEmbedPlugin.tsx
 delete mode 100644 packages/media/src/react/media/Popover/index.ts
 delete mode 100644 packages/media/src/react/media/Popover/useMediaEmbedEnter.ts
 delete mode 100644 packages/media/src/react/media/Popover/useMediaEmbedEscape.ts
 delete mode 100644 packages/media/src/react/media/Popover/useMediaEmbedPopover.ts
 create mode 100644 packages/plate-utils/src/react/getLastBlockDOMNode.ts
 create mode 100644 packages/plate-utils/src/react/useLastBlock.ts
 create mode 100644 packages/plate-utils/src/react/useLastBlockDOMNode.ts

diff --git a/apps/www/src/registry/default/plate-ui/media-dropdown-menu.tsx b/apps/www/src/registry/default/plate-ui/media-dropdown-menu.tsx
index c307c21459..c69da258ce 100644
--- a/apps/www/src/registry/default/plate-ui/media-dropdown-menu.tsx
+++ b/apps/www/src/registry/default/plate-ui/media-dropdown-menu.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import React from 'react';
+import React, { useState } from 'react';
 
 import type { DropdownMenuProps } from '@radix-ui/react-dropdown-menu';
 
@@ -31,6 +31,7 @@ import {
   DropdownMenuTrigger,
   useOpenState,
 } from './dropdown-menu';
+import { MediaEmbedPopover } from './media-embed-popover';
 import {
   ToolbarSplitButton,
   ToolbarSplitButtonPrimary,
@@ -72,9 +73,10 @@ export function MediaDropdownMenu({
   nodeType,
   ...props
 }: DropdownMenuProps & { nodeType: string }) {
-  const currentConfig = MEDIA_CONFIG[nodeType];
+  const { editor } = useEditorPlugin(MediaEmbedPlugin);
+  const [isPopoverOpen, setIsPopoverOpen] = useState(false);
 
-  const { editor, setOptions } = useEditorPlugin(MediaEmbedPlugin);
+  const currentConfig = MEDIA_CONFIG[nodeType];
   const { openFilePicker } = useFilePicker({
     accept: currentConfig.accept,
     multiple: true,
@@ -86,50 +88,58 @@ export function MediaDropdownMenu({
   const openState = useOpenState();
 
   return (
-    <DropdownMenu {...openState} modal={false} {...props}>
-      <ToolbarSplitButton
-        pressed={openState.open}
-        tooltip={currentConfig.tooltip}
-      >
-        <ToolbarSplitButtonPrimary onClick={() => openFilePicker()}>
-          {currentConfig.icon}
-        </ToolbarSplitButtonPrimary>
+    <>
+      <DropdownMenu {...openState} modal={false} {...props}>
+        <ToolbarSplitButton
+          pressed={openState.open}
+          tooltip={currentConfig.tooltip}
+        >
+          <ToolbarSplitButtonPrimary onClick={() => openFilePicker()}>
+            {currentConfig.icon}
+          </ToolbarSplitButtonPrimary>
+
+          <DropdownMenuTrigger asChild>
+            <ToolbarSplitButtonSecondary />
+          </DropdownMenuTrigger>
+        </ToolbarSplitButton>
 
-        <DropdownMenuTrigger asChild>
-          <ToolbarSplitButtonSecondary />
-        </DropdownMenuTrigger>
-      </ToolbarSplitButton>
+        <DropdownMenuContent
+          className={cn('min-w-0 data-[state=closed]:hidden')}
+          align="start"
+        >
+          <DropdownMenuRadioGroup>
+            <DropdownMenuRadioItem
+              value="upload"
+              onSelect={() => openFilePicker()}
+              hideIcon
+            >
+              <div className="flex items-center gap-2">
+                {currentConfig.icon}
+                <span className="text-sm">Upload from computer</span>
+              </div>
+            </DropdownMenuRadioItem>
+            <DropdownMenuRadioItem
+              value="url"
+              onSelect={() => {
+                focusEditor(editor);
+                setIsPopoverOpen(true);
+              }}
+              hideIcon
+            >
+              <div className="flex items-center gap-2">
+                <LinkIcon />
+                <span className="text-sm">Insert via URL</span>
+              </div>
+            </DropdownMenuRadioItem>
+          </DropdownMenuRadioGroup>
+        </DropdownMenuContent>
+      </DropdownMenu>
 
-      <DropdownMenuContent
-        className={cn('min-w-0 data-[state=closed]:hidden')}
-        align="start"
-      >
-        <DropdownMenuRadioGroup>
-          <DropdownMenuRadioItem
-            value="upload"
-            onSelect={() => openFilePicker()}
-            hideIcon
-          >
-            <div className="flex items-center gap-2">
-              {currentConfig.icon}
-              <span className="text-sm">Upload from computer</span>
-            </div>
-          </DropdownMenuRadioItem>
-          <DropdownMenuRadioItem
-            value="url"
-            onSelect={() => {
-              focusEditor(editor);
-              setOptions({ isOpen: true, mediaType: nodeType });
-            }}
-            hideIcon
-          >
-            <div className="flex items-center gap-2">
-              <LinkIcon />
-              <span className="text-sm">Insert via URL</span>
-            </div>
-          </DropdownMenuRadioItem>
-        </DropdownMenuRadioGroup>
-      </DropdownMenuContent>
-    </DropdownMenu>
+      <MediaEmbedPopover
+        onOpenChange={setIsPopoverOpen}
+        isOpen={isPopoverOpen}
+        mediaType={nodeType}
+      />
+    </>
   );
 }
diff --git a/apps/www/src/registry/default/plate-ui/media-embed-popover.tsx b/apps/www/src/registry/default/plate-ui/media-embed-popover.tsx
index 6c69f055c7..6d23701215 100644
--- a/apps/www/src/registry/default/plate-ui/media-embed-popover.tsx
+++ b/apps/www/src/registry/default/plate-ui/media-embed-popover.tsx
@@ -1,18 +1,18 @@
 'use client';
 
-import React, { useMemo } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 
-import { useEditorPlugin, useEditorSelector } from '@udecode/plate-core/react';
+import { focusEditor } from '@udecode/plate-common/react';
+import { useEditorPlugin } from '@udecode/plate-core/react';
+import { insertImage } from '@udecode/plate-media';
 import {
   AudioPlugin,
   FilePlugin,
   ImagePlugin,
   MediaEmbedPlugin,
   VideoPlugin,
-  useMediaEmbedPopover,
 } from '@udecode/plate-media/react';
-import { toDOMNode } from '@udecode/slate-react';
-import { getAncestorNode } from '@udecode/slate-utils';
+import { useLastBlockDOMNode } from '@udecode/plate-utils/react';
 import { AudioLinesIcon, FileUpIcon, FilmIcon, ImageIcon } from 'lucide-react';
 
 import { Button } from './button';
@@ -45,24 +45,25 @@ const MEDIA_CONFIG: Record<
   },
 };
 
-export function MediaEmbedPopover() {
-  const { setOption, useOption } = useEditorPlugin(MediaEmbedPlugin);
-
-  const mediaType = useOption('mediaType');
-  const isOpen = useOption('isOpen');
-
-  const anchorElement = useEditorSelector(
-    (editor) => {
-      if (!isOpen) return null;
-
-      const enter = getAncestorNode(editor);
-
-      if (!enter) return null;
-
-      return toDOMNode(editor, enter[0]);
-    },
-    [isOpen]
-  );
+export function MediaEmbedPopover({
+  isOpen,
+  mediaType,
+  onOpenChange,
+}: {
+  isOpen: boolean;
+  mediaType: string;
+  onOpenChange: (open: boolean) => void;
+}) {
+  const { editor } = useEditorPlugin(MediaEmbedPlugin);
+  const [url, setUrl] = useState('');
+
+  const anchorElement = useLastBlockDOMNode(editor, { enabled: isOpen });
+
+  const embedMedia = useCallback(() => {
+    insertImage(editor, url);
+    focusEditor(editor);
+    onOpenChange(false);
+  }, [editor, url, onOpenChange]);
 
   const mediaConfig = useMemo(() => {
     if (!mediaType) return null;
@@ -70,16 +71,10 @@ export function MediaEmbedPopover() {
     return MEDIA_CONFIG[mediaType];
   }, [mediaType]);
 
-  const { acceptProps, cancelProps, inputProps } = useMediaEmbedPopover();
-
   if (!anchorElement) return null;
 
   return (
-    <Popover
-      open={isOpen}
-      onOpenChange={(open) => setOption('isOpen', open)}
-      modal={false}
-    >
+    <Popover open={isOpen} onOpenChange={onOpenChange} modal={false}>
       <PopoverAnchor virtualRef={{ current: anchorElement }} />
 
       <PopoverContent className="w-auto p-1" align="center" side="bottom">
@@ -90,17 +85,25 @@ export function MediaEmbedPopover() {
             </div>
             <Input
               variant="ghost"
-              {...inputProps}
+              value={url}
+              onChange={(e) => setUrl(e.target.value)}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter') embedMedia();
+              }}
               placeholder={mediaConfig?.placeholder}
               h="sm"
             />
           </div>
           <Separator className="my-1" />
           <div className="flex items-center justify-end gap-2 pt-2">
-            <Button size="sm" variant="secondary" {...cancelProps}>
+            <Button
+              size="sm"
+              variant="secondary"
+              onClick={() => onOpenChange(false)}
+            >
               Cancel
             </Button>
-            <Button size="sm" variant="default" {...acceptProps}>
+            <Button size="sm" variant="default" onClick={embedMedia}>
               Accept
             </Button>
           </div>
diff --git a/packages/media/src/lib/media-embed/BaseMediaEmbedPlugin.ts b/packages/media/src/lib/media-embed/BaseMediaEmbedPlugin.ts
index 066e95db0c..9cfe21f11d 100644
--- a/packages/media/src/lib/media-embed/BaseMediaEmbedPlugin.ts
+++ b/packages/media/src/lib/media-embed/BaseMediaEmbedPlugin.ts
@@ -1,8 +1,4 @@
-import {
-  type PluginConfig,
-  createTSlatePlugin,
-  isUrl,
-} from '@udecode/plate-common';
+import { type PluginConfig, createTSlatePlugin } from '@udecode/plate-common';
 
 import type { MediaPluginOptions, TMediaElement } from '../media/index';
 
@@ -10,20 +6,16 @@ import { parseIframeUrl } from './parseIframeUrl';
 
 export interface TMediaEmbedElement extends TMediaElement {}
 
-export type BaseMediaEmbedConfig = PluginConfig<
-  'media_embed',
-  MediaPluginOptions
->;
+export type MediaEmbedConfig = PluginConfig<'media_embed', MediaPluginOptions>;
 
 /**
  * Enables support for embeddable media such as YouTube or Vimeo videos,
  * Instagram posts and tweets or Google Maps.
  */
-export const BaseMediaEmbedPlugin = createTSlatePlugin<BaseMediaEmbedConfig>({
+export const BaseMediaEmbedPlugin = createTSlatePlugin<MediaEmbedConfig>({
   key: 'media_embed',
   node: { isElement: true, isVoid: true },
   options: {
-    isUrl: isUrl,
     transformUrl: parseIframeUrl,
   },
 }).extend(({ type }) => ({
diff --git a/packages/media/src/react/media/MediaEmbedPlugin.tsx b/packages/media/src/react/media/MediaEmbedPlugin.tsx
deleted file mode 100644
index 474ecd72c4..0000000000
--- a/packages/media/src/react/media/MediaEmbedPlugin.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import type { ExtendConfig } from '@udecode/plate-common';
-
-import { focusEditor, toTPlatePlugin } from '@udecode/plate-common/react';
-
-import {
-  type BaseMediaEmbedConfig,
-  BaseMediaEmbedPlugin,
-  insertImage,
-} from '../../lib';
-
-type MediaEmbedConfig = ExtendConfig<
-  BaseMediaEmbedConfig,
-  {
-    isOpen?: boolean;
-    mediaType?: string | null;
-    url?: string;
-  }
->;
-
-export const MediaEmbedPlugin = toTPlatePlugin<MediaEmbedConfig>(
-  BaseMediaEmbedPlugin,
-  {
-    options: {
-      isOpen: false,
-      mediaType: null,
-      url: '',
-    },
-  }
-).extendTransforms(({ editor, getOptions, setOptions }) => ({
-  embed: (url: string) => {
-    setOptions({ isOpen: false, url });
-
-    const isUrl = getOptions().isUrl;
-
-    if (!isUrl?.(url)) return;
-
-    insertImage(editor, url);
-
-    focusEditor(editor);
-  },
-}));
diff --git a/packages/media/src/react/media/Popover/index.ts b/packages/media/src/react/media/Popover/index.ts
deleted file mode 100644
index 2d88454c6b..0000000000
--- a/packages/media/src/react/media/Popover/index.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-/**
- * @file Automatically generated by barrelsby.
- */
-
-export * from './useMediaEmbedEnter';
-export * from './useMediaEmbedEscape';
-export * from './useMediaEmbedPopover';
diff --git a/packages/media/src/react/media/Popover/useMediaEmbedEnter.ts b/packages/media/src/react/media/Popover/useMediaEmbedEnter.ts
deleted file mode 100644
index 4d74077f6c..0000000000
--- a/packages/media/src/react/media/Popover/useMediaEmbedEnter.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import { useEditorPlugin, useHotkeys } from '@udecode/plate-common/react';
-
-import { MediaEmbedPlugin } from '../../../react';
-
-export const useMediaEmbedEnter = () => {
-  const { tf, useOption } = useEditorPlugin(MediaEmbedPlugin);
-
-  const isOpen = useOption('isOpen');
-  const url = useOption('url');
-
-  useHotkeys(
-    'enter',
-    () => {
-      tf.media_embed.embed(url!);
-    },
-    {
-      enableOnFormTags: ['INPUT'],
-      enabled: isOpen,
-    },
-    [url]
-  );
-};
diff --git a/packages/media/src/react/media/Popover/useMediaEmbedEscape.ts b/packages/media/src/react/media/Popover/useMediaEmbedEscape.ts
deleted file mode 100644
index 603cea3558..0000000000
--- a/packages/media/src/react/media/Popover/useMediaEmbedEscape.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import {
-  focusEditor,
-  useEditorPlugin,
-  useHotkeys,
-} from '@udecode/plate-common/react';
-
-import { MediaEmbedPlugin } from '../MediaEmbedPlugin';
-
-export const useMediaEmbedEscape = () => {
-  const { editor, setOptions, useOption } = useEditorPlugin(MediaEmbedPlugin);
-
-  const isOpen = useOption('isOpen');
-
-  useHotkeys(
-    'escape',
-    () => {
-      setOptions({ isOpen: false, url: '' });
-      focusEditor(editor);
-    },
-    {
-      enableOnFormTags: ['INPUT'],
-      enabled: isOpen,
-    },
-    []
-  );
-};
diff --git a/packages/media/src/react/media/Popover/useMediaEmbedPopover.ts b/packages/media/src/react/media/Popover/useMediaEmbedPopover.ts
deleted file mode 100644
index a12b3f7754..0000000000
--- a/packages/media/src/react/media/Popover/useMediaEmbedPopover.ts
+++ /dev/null
@@ -1,47 +0,0 @@
-import React, { useEffect } from 'react';
-
-import { focusEditor, useEditorPlugin } from '@udecode/plate-common/react';
-
-import { MediaEmbedPlugin } from '../MediaEmbedPlugin';
-import { useMediaEmbedEnter } from './useMediaEmbedEnter';
-import { useMediaEmbedEscape } from './useMediaEmbedEscape';
-
-export const useMediaEmbedPopover = () => {
-  const { editor, setOption, tf, useOption } =
-    useEditorPlugin(MediaEmbedPlugin);
-  const isOpen = useOption('isOpen');
-  const url = useOption('url');
-
-  const handleCancel = () => {
-    setOption('isOpen', false);
-    focusEditor(editor);
-  };
-
-  const inputRef = React.useRef<HTMLInputElement>(null);
-
-  useEffect(() => {
-    if (!isOpen) return;
-
-    setTimeout(() => {
-      inputRef.current?.focus({ preventScroll: true });
-    }, 0);
-  }, [isOpen]);
-
-  useMediaEmbedEscape();
-  useMediaEmbedEnter();
-
-  return {
-    acceptProps: {
-      onClick: () => tf.media_embed.embed(url!),
-    },
-    cancelProps: {
-      onClick: handleCancel,
-    },
-    inputProps: {
-      ref: inputRef,
-      value: useOption('url'),
-      onChange: (e: React.ChangeEvent<HTMLInputElement>) =>
-        setOption('url', e.target.value),
-    },
-  };
-};
diff --git a/packages/media/src/react/media/index.ts b/packages/media/src/react/media/index.ts
index d3abb7a11a..524227b5ce 100644
--- a/packages/media/src/react/media/index.ts
+++ b/packages/media/src/react/media/index.ts
@@ -2,10 +2,8 @@
  * @file Automatically generated by barrelsby.
  */
 
-export * from './MediaEmbedPlugin';
 export * from './mediaStore';
 export * from './useMediaController';
 export * from './useMediaState';
 export * from './useMediaToolbarButton';
 export * from './FloatingMedia/index';
-export * from './Popover/index';
diff --git a/packages/media/src/react/plugins.ts b/packages/media/src/react/plugins.ts
index 253f5ff4a2..c154d9fbfb 100644
--- a/packages/media/src/react/plugins.ts
+++ b/packages/media/src/react/plugins.ts
@@ -4,11 +4,14 @@ import {
   BaseAudioPlugin,
   BaseFilePlugin,
   BaseImagePlugin,
+  BaseMediaEmbedPlugin,
   BaseVideoPlugin,
 } from '../lib';
 
 export const ImagePlugin = toPlatePlugin(BaseImagePlugin);
 
+export const MediaEmbedPlugin = toPlatePlugin(BaseMediaEmbedPlugin);
+
 export const AudioPlugin = toPlatePlugin(BaseAudioPlugin);
 
 export const FilePlugin = toPlatePlugin(BaseFilePlugin);
diff --git a/packages/plate-utils/src/react/getLastBlockDOMNode.ts b/packages/plate-utils/src/react/getLastBlockDOMNode.ts
new file mode 100644
index 0000000000..95e92f4075
--- /dev/null
+++ b/packages/plate-utils/src/react/getLastBlockDOMNode.ts
@@ -0,0 +1,8 @@
+import type { PlateEditor } from '@udecode/plate-core/react';
+
+import { toDOMNode } from '@udecode/slate-react';
+import { getBlocks } from '@udecode/slate-utils';
+
+export const getLastBlockDOMNode = (editor: PlateEditor) => {
+  return toDOMNode(editor, getBlocks(editor).at(-1)![0]);
+};
diff --git a/packages/plate-utils/src/react/index.ts b/packages/plate-utils/src/react/index.ts
index e470d2d827..4b3ed12851 100644
--- a/packages/plate-utils/src/react/index.ts
+++ b/packages/plate-utils/src/react/index.ts
@@ -9,6 +9,7 @@ export * from './createNodesHOC';
 export * from './selectEditor';
 export * from './selectSiblingNodePoint';
 export * from './useFormInputProps';
+export * from './useLastBlockDOMNode';
 export * from './useMarkToolbarButton';
 export * from './usePlaceholder';
 export * from './useRemoveNodeButton';
diff --git a/packages/plate-utils/src/react/useLastBlock.ts b/packages/plate-utils/src/react/useLastBlock.ts
new file mode 100644
index 0000000000..708d4ba3df
--- /dev/null
+++ b/packages/plate-utils/src/react/useLastBlock.ts
@@ -0,0 +1,15 @@
+import { useEditorSelector } from '@udecode/plate-core/react';
+import { getBlocks } from '@udecode/slate-utils';
+
+export const useLastBlock = ({
+  deps,
+  enabled,
+}: {
+  enabled: boolean;
+  deps?: React.DependencyList;
+}) => {
+  return useEditorSelector(
+    (editor) => (enabled ? getBlocks(editor).at(-1)![0] : null),
+    [enabled, ...(deps || [])]
+  );
+};
diff --git a/packages/plate-utils/src/react/useLastBlockDOMNode.ts b/packages/plate-utils/src/react/useLastBlockDOMNode.ts
new file mode 100644
index 0000000000..f12977cb7e
--- /dev/null
+++ b/packages/plate-utils/src/react/useLastBlockDOMNode.ts
@@ -0,0 +1,26 @@
+import { useMemo } from 'react';
+
+import type { PlateEditor } from '@udecode/plate-core/react';
+
+import { toDOMNode } from '@udecode/slate-react';
+
+import { useLastBlock } from './useLastBlock';
+
+interface UseLastBlockDOMNodeOptions {
+  enabled: boolean;
+  deps?: React.DependencyList;
+}
+
+export const useLastBlockDOMNode = (
+  editor: PlateEditor,
+  { deps, enabled }: UseLastBlockDOMNodeOptions
+) => {
+  const lastBlock = useLastBlock({ deps, enabled });
+
+  const anchorElement = useMemo(
+    () => (lastBlock ? toDOMNode(editor, lastBlock) : null)!,
+    [editor, lastBlock]
+  );
+
+  return anchorElement;
+};

From de71de380381671daafafe172f85987e8d19f831 Mon Sep 17 00:00:00 2001
From: Felix Feng <felixfeng33@gmail.com>
Date: Fri, 15 Nov 2024 21:41:54 +0800
Subject: [PATCH 28/34] docs

---
 .changeset/poor-doors-tease.md | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/.changeset/poor-doors-tease.md b/.changeset/poor-doors-tease.md
index fa5e39b111..59c9751b86 100644
--- a/.changeset/poor-doors-tease.md
+++ b/.changeset/poor-doors-tease.md
@@ -5,9 +5,3 @@
 PlaceholderPlugin:
 New `updateUploadHistory` `withHistoryMark` `isHistoryMarking` to fix undo to the loading state.
 `editor.insert.insertMedia` add options
-
-
-MediaEmbedPlugin:
-Added a floating media toolbar for entering URLs to embed media.
-New api `hideFloating` `openFloating` tf `embed` 
-New hooks `useMediaFloatingToolbar`
\ No newline at end of file

From df617c04140b6fd3570eed19e52fe8a57cd663b9 Mon Sep 17 00:00:00 2001
From: Felix Feng <felixfeng33@gmail.com>
Date: Fri, 15 Nov 2024 22:46:43 +0800
Subject: [PATCH 29/34] fix

---
 .../styles/default/fixed-toolbar-buttons.json |  2 +-
 .../r/styles/default/media-dropdown-menu.json |  2 +-
 .../r/styles/default/media-plugins.json       |  2 +-
 .../editor/plugins/media-plugins.tsx          |  5 +----
 .../default/plate-ui/media-dropdown-menu.tsx  | 14 ++++++-------
 .../default/plate-ui/media-embed-popover.tsx  | 21 +++++++++----------
 6 files changed, 20 insertions(+), 26 deletions(-)

diff --git a/apps/www/public/r/styles/default/fixed-toolbar-buttons.json b/apps/www/public/r/styles/default/fixed-toolbar-buttons.json
index 711f5d2510..571364baac 100644
--- a/apps/www/public/r/styles/default/fixed-toolbar-buttons.json
+++ b/apps/www/public/r/styles/default/fixed-toolbar-buttons.json
@@ -13,7 +13,7 @@
   },
   "files": [
     {
-      "content": "'use client';\n\nimport React from 'react';\n\nimport {\n  BoldPlugin,\n  CodePlugin,\n  ItalicPlugin,\n  StrikethroughPlugin,\n  UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { useEditorReadOnly } from '@udecode/plate-common/react';\nimport {\n  FontBackgroundColorPlugin,\n  FontColorPlugin,\n} from '@udecode/plate-font/react';\nimport { ListStyleType } from '@udecode/plate-indent-list';\nimport {\n  AudioPlugin,\n  FilePlugin,\n  ImagePlugin,\n  VideoPlugin,\n} from '@udecode/plate-media/react';\nimport {\n  BaselineIcon,\n  BoldIcon,\n  Code2Icon,\n  ItalicIcon,\n  PaintBucketIcon,\n  SparklesIcon,\n  StrikethroughIcon,\n  UnderlineIcon,\n} from 'lucide-react';\n\nimport { AIToolbarButton } from './ai-toolbar-button';\nimport { AlignDropdownMenu } from './align-dropdown-menu';\nimport { ColorDropdownMenu } from './color-dropdown-menu';\nimport { CommentToolbarButton } from './comment-toolbar-button';\nimport { EmojiDropdownMenu } from './emoji-dropdown-menu';\nimport { RedoToolbarButton, UndoToolbarButton } from './history-toolbar-button';\nimport { IndentListToolbarButton } from './indent-list-toolbar-button';\nimport { IndentTodoToolbarButton } from './indent-todo-toolbar-button';\nimport { IndentToolbarButton } from './indent-toolbar-button';\nimport { InsertDropdownMenu } from './insert-dropdown-menu';\nimport { LineHeightDropdownMenu } from './line-height-dropdown-menu';\nimport { LinkToolbarButton } from './link-toolbar-button';\nimport { MarkToolbarButton } from './mark-toolbar-button';\nimport { MediaDropdownMenu } from './media-dropdown-menu';\nimport { ModeDropdownMenu } from './mode-dropdown-menu';\nimport { MoreDropdownMenu } from './more-dropdown-menu';\nimport { OutdentToolbarButton } from './outdent-toolbar-button';\nimport { TableDropdownMenu } from './table-dropdown-menu';\nimport { ToggleToolbarButton } from './toggle-toolbar-button';\nimport { ToolbarGroup } from './toolbar';\nimport { TurnIntoDropdownMenu } from './turn-into-dropdown-menu';\n\nexport function FixedToolbarButtons() {\n  const readOnly = useEditorReadOnly();\n\n  return (\n    <div className=\"flex w-full\">\n      {!readOnly && (\n        <>\n          <ToolbarGroup>\n            <UndoToolbarButton />\n            <RedoToolbarButton />\n          </ToolbarGroup>\n\n          <ToolbarGroup>\n            <AIToolbarButton\n              className=\"gap-1.5 text-purple-600 hover:text-purple-700 dark:text-purple-400 dark:hover:text-purple-500\"\n              tooltip=\"Edit, generate, and more\"\n            >\n              <SparklesIcon className=\"!size-3.5\" />\n              Ask AI\n            </AIToolbarButton>\n          </ToolbarGroup>\n\n          <ToolbarGroup>\n            <InsertDropdownMenu />\n            <TurnIntoDropdownMenu />\n          </ToolbarGroup>\n\n          <ToolbarGroup>\n            <MarkToolbarButton nodeType={BoldPlugin.key} tooltip=\"Bold (⌘+B)\">\n              <BoldIcon />\n            </MarkToolbarButton>\n\n            <MarkToolbarButton\n              nodeType={ItalicPlugin.key}\n              tooltip=\"Italic (⌘+I)\"\n            >\n              <ItalicIcon />\n            </MarkToolbarButton>\n\n            <MarkToolbarButton\n              nodeType={UnderlinePlugin.key}\n              tooltip=\"Underline (⌘+U)\"\n            >\n              <UnderlineIcon />\n            </MarkToolbarButton>\n\n            <MarkToolbarButton\n              nodeType={StrikethroughPlugin.key}\n              tooltip=\"Strikethrough (⌘+⇧+M)\"\n            >\n              <StrikethroughIcon />\n            </MarkToolbarButton>\n\n            <MarkToolbarButton nodeType={CodePlugin.key} tooltip=\"Code (⌘+E)\">\n              <Code2Icon />\n            </MarkToolbarButton>\n\n            <ColorDropdownMenu\n              nodeType={FontColorPlugin.key}\n              tooltip=\"Text color\"\n            >\n              <BaselineIcon />\n            </ColorDropdownMenu>\n\n            <ColorDropdownMenu\n              nodeType={FontBackgroundColorPlugin.key}\n              tooltip=\"Background color\"\n            >\n              <PaintBucketIcon />\n            </ColorDropdownMenu>\n          </ToolbarGroup>\n\n          <ToolbarGroup>\n            <AlignDropdownMenu />\n            <LineHeightDropdownMenu />\n\n            <IndentListToolbarButton nodeType={ListStyleType.Disc} />\n            <IndentListToolbarButton nodeType={ListStyleType.Decimal} />\n            <IndentTodoToolbarButton />\n\n            <OutdentToolbarButton />\n            <IndentToolbarButton />\n          </ToolbarGroup>\n\n          <ToolbarGroup>\n            <MediaDropdownMenu nodeType={ImagePlugin.key} />\n            <MediaDropdownMenu nodeType={VideoPlugin.key} />\n            <MediaDropdownMenu nodeType={AudioPlugin.key} />\n            <MediaDropdownMenu nodeType={FilePlugin.key} />\n          </ToolbarGroup>\n\n          <ToolbarGroup>\n            <LinkToolbarButton />\n            <ToggleToolbarButton />\n            <TableDropdownMenu />\n            <EmojiDropdownMenu />\n            <MoreDropdownMenu />\n          </ToolbarGroup>\n        </>\n      )}\n\n      <div className=\"grow\" />\n\n      <ToolbarGroup>\n        <CommentToolbarButton />\n        <ModeDropdownMenu />\n      </ToolbarGroup>\n    </div>\n  );\n}\n",
+      "content": "'use client';\n\nimport React, { useState } from 'react';\n\nimport {\n  BoldPlugin,\n  CodePlugin,\n  ItalicPlugin,\n  StrikethroughPlugin,\n  SubscriptPlugin,\n  SuperscriptPlugin,\n  UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { useEditorReadOnly } from '@udecode/plate-common/react';\nimport {\n  FontBackgroundColorPlugin,\n  FontColorPlugin,\n} from '@udecode/plate-font/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { ListStyleType } from '@udecode/plate-indent-list';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport {\n  AudioPlugin,\n  FilePlugin,\n  ImagePlugin,\n  VideoPlugin,\n} from '@udecode/plate-media/react';\nimport {\n  BaselineIcon,\n  BoldIcon,\n  Code2Icon,\n  HighlighterIcon,\n  ItalicIcon,\n  KeyboardIcon,\n  MoreHorizontalIcon,\n  PaintBucketIcon,\n  SparklesIcon,\n  StrikethroughIcon,\n  SubscriptIcon,\n  SuperscriptIcon,\n  UnderlineIcon,\n} from 'lucide-react';\n\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from './accordion';\nimport { AIToolbarButton } from './ai-toolbar-button';\nimport { AlignDropdownMenu } from './align-dropdown-menu';\nimport { ColorDropdownMenu } from './color-dropdown-menu';\nimport { CommentToolbarButton } from './comment-toolbar-button';\nimport { EmojiDropdownMenu } from './emoji-dropdown-menu';\nimport { RedoToolbarButton, UndoToolbarButton } from './history-toolbar-button';\nimport { IndentListToolbarButton } from './indent-list-toolbar-button';\nimport { IndentTodoToolbarButton } from './indent-todo-toolbar-button';\nimport { IndentToolbarButton } from './indent-toolbar-button';\nimport { InsertDropdownMenu } from './insert-dropdown-menu';\nimport { LineHeightDropdownMenu } from './line-height-dropdown-menu';\nimport { LinkToolbarButton } from './link-toolbar-button';\nimport { MarkToolbarButton } from './mark-toolbar-button';\nimport { MediaDropdownMenu } from './media-dropdown-menu';\nimport { ModeDropdownMenu } from './mode-dropdown-menu';\nimport { OutdentToolbarButton } from './outdent-toolbar-button';\nimport { TableDropdownMenu } from './table-dropdown-menu';\nimport { ToggleToolbarButton } from './toggle-toolbar-button';\nimport { ToolbarButton, ToolbarGroup } from './toolbar';\nimport { TurnIntoDropdownMenu } from './turn-into-dropdown-menu';\n\nexport function FixedToolbarButtons() {\n  const [value, setValue] = useState('');\n  const expanded = value === 'toolbar';\n\n  return (\n    <Accordion\n      className=\"w-full\"\n      onValueChange={setValue}\n      type=\"single\"\n      collapsible\n    >\n      <AccordionItem className=\"border-b-0\" value=\"toolbar\">\n        <PrimaryButtons expanded={expanded} />\n        <AccordionContent className=\"p-0\">\n          <ExpandedButtons />\n        </AccordionContent>\n      </AccordionItem>\n    </Accordion>\n  );\n}\n\nfunction PrimaryButtons({ expanded }: { expanded: boolean }) {\n  const readOnly = useEditorReadOnly();\n\n  return (\n    <div className=\"flex w-full\">\n      {!readOnly && (\n        <>\n          <ToolbarGroup>\n            <UndoToolbarButton />\n            <RedoToolbarButton />\n          </ToolbarGroup>\n\n          <ToolbarGroup>\n            <AIToolbarButton\n              className=\"gap-1.5 text-purple-600 hover:text-purple-700 dark:text-purple-400 dark:hover:text-purple-500\"\n              tooltip=\"Edit, generate, and more\"\n            >\n              <SparklesIcon className=\"!size-3.5\" />\n              Ask AI\n            </AIToolbarButton>\n          </ToolbarGroup>\n\n          <ToolbarGroup>\n            <InsertDropdownMenu />\n            <TurnIntoDropdownMenu />\n          </ToolbarGroup>\n\n          <ToolbarGroup>\n            <MarkToolbarButton nodeType={BoldPlugin.key} tooltip=\"Bold (⌘+B)\">\n              <BoldIcon />\n            </MarkToolbarButton>\n\n            <MarkToolbarButton\n              nodeType={ItalicPlugin.key}\n              tooltip=\"Italic (⌘+I)\"\n            >\n              <ItalicIcon />\n            </MarkToolbarButton>\n\n            <MarkToolbarButton\n              nodeType={UnderlinePlugin.key}\n              tooltip=\"Underline (⌘+U)\"\n            >\n              <UnderlineIcon />\n            </MarkToolbarButton>\n\n            <MarkToolbarButton\n              nodeType={StrikethroughPlugin.key}\n              tooltip=\"Strikethrough (⌘+⇧+M)\"\n            >\n              <StrikethroughIcon />\n            </MarkToolbarButton>\n\n            <MarkToolbarButton nodeType={CodePlugin.key} tooltip=\"Code (⌘+E)\">\n              <Code2Icon />\n            </MarkToolbarButton>\n\n            <ColorDropdownMenu\n              nodeType={FontColorPlugin.key}\n              tooltip=\"Text color\"\n            >\n              <BaselineIcon />\n            </ColorDropdownMenu>\n\n            <ColorDropdownMenu\n              nodeType={FontBackgroundColorPlugin.key}\n              tooltip=\"Background color\"\n            >\n              <PaintBucketIcon />\n            </ColorDropdownMenu>\n          </ToolbarGroup>\n\n          <ToolbarGroup>\n            <AlignDropdownMenu />\n\n            <IndentListToolbarButton nodeType={ListStyleType.Disc} />\n            <IndentListToolbarButton nodeType={ListStyleType.Decimal} />\n            <IndentTodoToolbarButton />\n          </ToolbarGroup>\n\n          <ToolbarGroup>\n            <LinkToolbarButton />\n            <ToggleToolbarButton />\n            <TableDropdownMenu />\n            <EmojiDropdownMenu />\n          </ToolbarGroup>\n\n          <ToolbarGroup>\n            <MediaDropdownMenu nodeType={ImagePlugin.key} />\n            <MediaDropdownMenu nodeType={VideoPlugin.key} />\n          </ToolbarGroup>\n        </>\n      )}\n\n      <div className=\"grow\" />\n\n      <ToolbarGroup>\n        <CommentToolbarButton />\n        <ModeDropdownMenu />\n        <AccordionTrigger className=\"p-0\" hideIcon>\n          <ToolbarButton pressed={expanded} tooltip=\"More\">\n            <MoreHorizontalIcon />\n          </ToolbarButton>\n        </AccordionTrigger>\n      </ToolbarGroup>\n    </div>\n  );\n}\n\nfunction ExpandedButtons() {\n  return (\n    <div className=\"mt-1 flex w-full\">\n      <ToolbarGroup>\n        <LineHeightDropdownMenu />\n        <OutdentToolbarButton />\n        <IndentToolbarButton />\n      </ToolbarGroup>\n\n      <ToolbarGroup>\n        <MediaDropdownMenu nodeType={AudioPlugin.key} />\n        <MediaDropdownMenu nodeType={FilePlugin.key} />\n      </ToolbarGroup>\n\n      <ToolbarGroup>\n        <MarkToolbarButton nodeType={HighlightPlugin.key} tooltip=\"Highlight\">\n          <HighlighterIcon />\n        </MarkToolbarButton>\n\n        <MarkToolbarButton nodeType={KbdPlugin.key} tooltip=\"Keyboard input\">\n          <KeyboardIcon />\n        </MarkToolbarButton>\n\n        <MarkToolbarButton\n          nodeType={SuperscriptPlugin.key}\n          tooltip=\"Superscript\"\n        >\n          <SuperscriptIcon />\n        </MarkToolbarButton>\n\n        <MarkToolbarButton nodeType={SubscriptPlugin.key} tooltip=\"Subscript\">\n          <SubscriptIcon />\n        </MarkToolbarButton>\n      </ToolbarGroup>\n    </div>\n  );\n}\n",
       "path": "plate-ui/fixed-toolbar-buttons.tsx",
       "target": "components/plate-ui/fixed-toolbar-buttons.tsx",
       "type": "registry:ui"
diff --git a/apps/www/public/r/styles/default/media-dropdown-menu.json b/apps/www/public/r/styles/default/media-dropdown-menu.json
index 84e5254ab9..d642808049 100644
--- a/apps/www/public/r/styles/default/media-dropdown-menu.json
+++ b/apps/www/public/r/styles/default/media-dropdown-menu.json
@@ -17,7 +17,7 @@
   },
   "files": [
     {
-      "content": "'use client';\n\nimport React from 'react';\n\nimport type { DropdownMenuProps } from '@radix-ui/react-dropdown-menu';\n\nimport { cn } from '@udecode/cn';\nimport { useEditorPlugin } from '@udecode/plate-core/react';\nimport {\n  AudioPlugin,\n  FilePlugin,\n  ImagePlugin,\n  MediaEmbedPlugin,\n  VideoPlugin,\n} from '@udecode/plate-media/react';\nimport { focusEditor } from '@udecode/slate-react';\nimport {\n  AudioLinesIcon,\n  FileUpIcon,\n  FilmIcon,\n  ImageIcon,\n  LinkIcon,\n} from 'lucide-react';\nimport { useFilePicker } from 'use-file-picker';\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuTrigger,\n  useOpenState,\n} from './dropdown-menu';\nimport {\n  ToolbarSplitButton,\n  ToolbarSplitButtonPrimary,\n  ToolbarSplitButtonSecondary,\n} from './toolbar';\n\nconst MEDIA_CONFIG: Record<\n  string,\n  {\n    accept: string[];\n    icon: React.ReactNode;\n    tooltip: string;\n  }\n> = {\n  [AudioPlugin.key]: {\n    accept: ['audio/*'],\n    icon: <AudioLinesIcon className=\"size-4\" />,\n    tooltip: 'Audio',\n  },\n  [FilePlugin.key]: {\n    accept: ['*'],\n    icon: <FileUpIcon className=\"size-4\" />,\n    tooltip: 'File',\n  },\n  [ImagePlugin.key]: {\n    accept: ['image/*'],\n    icon: <ImageIcon className=\"size-4\" />,\n    tooltip: 'Image',\n  },\n  [VideoPlugin.key]: {\n    accept: ['video/*'],\n    icon: <FilmIcon className=\"size-4\" />,\n    tooltip: 'Video',\n  },\n};\n\nexport function MediaDropdownMenu({\n  children,\n  nodeType,\n  ...props\n}: DropdownMenuProps & { nodeType: string }) {\n  const currentConfig = MEDIA_CONFIG[nodeType];\n\n  const { editor, setOptions } = useEditorPlugin(MediaEmbedPlugin);\n  const { openFilePicker } = useFilePicker({\n    accept: currentConfig.accept,\n    multiple: true,\n    onFilesSelected: ({ plainFiles: updatedFiles }) => {\n      (editor as any).tf.insert.media(updatedFiles);\n    },\n  });\n\n  const openState = useOpenState();\n\n  return (\n    <DropdownMenu {...openState} modal={false} {...props}>\n      <ToolbarSplitButton\n        pressed={openState.open}\n        tooltip={currentConfig.tooltip}\n      >\n        <ToolbarSplitButtonPrimary onClick={() => openFilePicker()}>\n          {currentConfig.icon}\n        </ToolbarSplitButtonPrimary>\n\n        <DropdownMenuTrigger asChild>\n          <ToolbarSplitButtonSecondary />\n        </DropdownMenuTrigger>\n      </ToolbarSplitButton>\n\n      <DropdownMenuContent\n        className={cn('min-w-0 data-[state=closed]:hidden')}\n        align=\"start\"\n      >\n        <DropdownMenuRadioGroup>\n          <DropdownMenuRadioItem\n            value=\"upload\"\n            onSelect={() => openFilePicker()}\n            hideIcon\n          >\n            <div className=\"flex items-center gap-2\">\n              {currentConfig.icon}\n              <span className=\"text-sm\">Upload from computer</span>\n            </div>\n          </DropdownMenuRadioItem>\n          <DropdownMenuRadioItem\n            value=\"url\"\n            onSelect={() => {\n              focusEditor(editor);\n              setOptions({ isOpen: true, mediaType: nodeType });\n            }}\n            hideIcon\n          >\n            <div className=\"flex items-center gap-2\">\n              <LinkIcon />\n              <span className=\"text-sm\">Insert via URL</span>\n            </div>\n          </DropdownMenuRadioItem>\n        </DropdownMenuRadioGroup>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n}\n",
+      "content": "'use client';\n\nimport React, { useState } from 'react';\n\nimport type { DropdownMenuProps } from '@radix-ui/react-dropdown-menu';\n\nimport { cn } from '@udecode/cn';\nimport { useEditorPlugin } from '@udecode/plate-core/react';\nimport {\n  AudioPlugin,\n  FilePlugin,\n  ImagePlugin,\n  MediaEmbedPlugin,\n  VideoPlugin,\n} from '@udecode/plate-media/react';\nimport { focusEditor } from '@udecode/slate-react';\nimport {\n  AudioLinesIcon,\n  FileUpIcon,\n  FilmIcon,\n  ImageIcon,\n  LinkIcon,\n} from 'lucide-react';\nimport { useFilePicker } from 'use-file-picker';\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuTrigger,\n  useOpenState,\n} from './dropdown-menu';\nimport { MediaEmbedPopover } from './media-embed-popover';\nimport {\n  ToolbarSplitButton,\n  ToolbarSplitButtonPrimary,\n  ToolbarSplitButtonSecondary,\n} from './toolbar';\n\nconst MEDIA_CONFIG: Record<\n  string,\n  {\n    accept: string[];\n    icon: React.ReactNode;\n    tooltip: string;\n  }\n> = {\n  [AudioPlugin.key]: {\n    accept: ['audio/*'],\n    icon: <AudioLinesIcon className=\"size-4\" />,\n    tooltip: 'Audio',\n  },\n  [FilePlugin.key]: {\n    accept: ['*'],\n    icon: <FileUpIcon className=\"size-4\" />,\n    tooltip: 'File',\n  },\n  [ImagePlugin.key]: {\n    accept: ['image/*'],\n    icon: <ImageIcon className=\"size-4\" />,\n    tooltip: 'Image',\n  },\n  [VideoPlugin.key]: {\n    accept: ['video/*'],\n    icon: <FilmIcon className=\"size-4\" />,\n    tooltip: 'Video',\n  },\n};\n\nexport function MediaDropdownMenu({\n  children,\n  nodeType,\n  ...props\n}: DropdownMenuProps & { nodeType: string }) {\n  const { editor } = useEditorPlugin(MediaEmbedPlugin);\n  const [isPopoverOpen, setIsPopoverOpen] = useState(false);\n\n  const currentConfig = MEDIA_CONFIG[nodeType];\n  const { openFilePicker } = useFilePicker({\n    accept: currentConfig.accept,\n    multiple: true,\n    onFilesSelected: ({ plainFiles: updatedFiles }) => {\n      (editor as any).tf.insert.media(updatedFiles);\n    },\n  });\n\n  const openState = useOpenState();\n\n  return (\n    <>\n      <DropdownMenu {...openState} modal={false} {...props}>\n        <ToolbarSplitButton\n          pressed={openState.open}\n          tooltip={currentConfig.tooltip}\n        >\n          <ToolbarSplitButtonPrimary onClick={() => openFilePicker()}>\n            {currentConfig.icon}\n          </ToolbarSplitButtonPrimary>\n\n          <DropdownMenuTrigger asChild>\n            <ToolbarSplitButtonSecondary />\n          </DropdownMenuTrigger>\n        </ToolbarSplitButton>\n\n        <DropdownMenuContent\n          className={cn('min-w-0 data-[state=closed]:hidden')}\n          align=\"start\"\n        >\n          <DropdownMenuRadioGroup>\n            <DropdownMenuRadioItem\n              value=\"upload\"\n              onSelect={() => openFilePicker()}\n              hideIcon\n            >\n              <div className=\"flex items-center gap-2\">\n                {currentConfig.icon}\n                <span className=\"text-sm\">Upload from computer</span>\n              </div>\n            </DropdownMenuRadioItem>\n            <DropdownMenuRadioItem\n              value=\"url\"\n              onSelect={() => {\n                focusEditor(editor);\n                setIsPopoverOpen(true);\n              }}\n              hideIcon\n            >\n              <div className=\"flex items-center gap-2\">\n                <LinkIcon />\n                <span className=\"text-sm\">Insert via URL</span>\n              </div>\n            </DropdownMenuRadioItem>\n          </DropdownMenuRadioGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n\n      <MediaEmbedPopover\n        onOpenChange={setIsPopoverOpen}\n        isOpen={isPopoverOpen}\n        mediaType={nodeType}\n      />\n    </>\n  );\n}\n",
       "path": "plate-ui/media-dropdown-menu.tsx",
       "target": "components/plate-ui/media-dropdown-menu.tsx",
       "type": "registry:ui"
diff --git a/apps/www/public/r/styles/default/media-plugins.json b/apps/www/public/r/styles/default/media-plugins.json
index eab117fbec..85a4df3d0c 100644
--- a/apps/www/public/r/styles/default/media-plugins.json
+++ b/apps/www/public/r/styles/default/media-plugins.json
@@ -5,7 +5,7 @@
   ],
   "files": [
     {
-      "content": "'use client';\n\nimport { CaptionPlugin } from '@udecode/plate-caption/react';\nimport {\n  AudioPlugin,\n  FilePlugin,\n  ImagePlugin,\n  MediaEmbedPlugin,\n  PlaceholderPlugin,\n  VideoPlugin,\n} from '@udecode/plate-media/react';\n\nimport { ImagePreview } from '@/components/plate-ui/image-preview';\nimport { MediaEmbedPopover } from '@/components/plate-ui/media-embed-popover';\nimport { MediaUploadToast } from '@/components/plate-ui/media-upload-toast';\n\nexport const mediaPlugins = [\n  ImagePlugin.extend({\n    options: {\n      disableUploadInsert: true,\n    },\n    render: { afterEditable: ImagePreview },\n  }),\n  MediaEmbedPlugin.configure({\n    render: { afterEditable: () => <MediaEmbedPopover /> },\n  }),\n  VideoPlugin,\n  AudioPlugin,\n  FilePlugin,\n  CaptionPlugin.configure({\n    options: { plugins: [ImagePlugin, MediaEmbedPlugin] },\n  }),\n  PlaceholderPlugin.configure({\n    render: {\n      afterEditable: () => <MediaUploadToast />,\n    },\n  }),\n] as const;\n",
+      "content": "'use client';\n\nimport { CaptionPlugin } from '@udecode/plate-caption/react';\nimport {\n  AudioPlugin,\n  FilePlugin,\n  ImagePlugin,\n  MediaEmbedPlugin,\n  PlaceholderPlugin,\n  VideoPlugin,\n} from '@udecode/plate-media/react';\n\nimport { ImagePreview } from '@/components/plate-ui/image-preview';\nimport { MediaUploadToast } from '@/components/plate-ui/media-upload-toast';\n\nexport const mediaPlugins = [\n  ImagePlugin.extend({\n    options: {\n      disableUploadInsert: true,\n    },\n    render: { afterEditable: ImagePreview },\n  }),\n  MediaEmbedPlugin,\n  VideoPlugin,\n  AudioPlugin,\n  FilePlugin,\n  CaptionPlugin.configure({\n    options: { plugins: [ImagePlugin, MediaEmbedPlugin] },\n  }),\n  PlaceholderPlugin.configure({\n    render: {\n      afterEditable: () => <MediaUploadToast />,\n    },\n  }),\n] as const;\n",
       "path": "components/editor/plugins/media-plugins.tsx",
       "target": "components/editor/plugins/media-plugins.tsx",
       "type": "registry:component"
diff --git a/apps/www/src/registry/default/components/editor/plugins/media-plugins.tsx b/apps/www/src/registry/default/components/editor/plugins/media-plugins.tsx
index f39c2cc72b..a2db748e0d 100644
--- a/apps/www/src/registry/default/components/editor/plugins/media-plugins.tsx
+++ b/apps/www/src/registry/default/components/editor/plugins/media-plugins.tsx
@@ -11,7 +11,6 @@ import {
 } from '@udecode/plate-media/react';
 
 import { ImagePreview } from '@/registry/default/plate-ui/image-preview';
-import { MediaEmbedPopover } from '@/registry/default/plate-ui/media-embed-popover';
 import { MediaUploadToast } from '@/registry/default/plate-ui/media-upload-toast';
 
 export const mediaPlugins = [
@@ -21,9 +20,7 @@ export const mediaPlugins = [
     },
     render: { afterEditable: ImagePreview },
   }),
-  MediaEmbedPlugin.configure({
-    render: { afterEditable: () => <MediaEmbedPopover /> },
-  }),
+  MediaEmbedPlugin,
   VideoPlugin,
   AudioPlugin,
   FilePlugin,
diff --git a/apps/www/src/registry/default/plate-ui/media-dropdown-menu.tsx b/apps/www/src/registry/default/plate-ui/media-dropdown-menu.tsx
index c69da258ce..5cebd7e2ce 100644
--- a/apps/www/src/registry/default/plate-ui/media-dropdown-menu.tsx
+++ b/apps/www/src/registry/default/plate-ui/media-dropdown-menu.tsx
@@ -88,7 +88,11 @@ export function MediaDropdownMenu({
   const openState = useOpenState();
 
   return (
-    <>
+    <MediaEmbedPopover
+      onOpenChange={setIsPopoverOpen}
+      isOpen={isPopoverOpen}
+      mediaType={nodeType}
+    >
       <DropdownMenu {...openState} modal={false} {...props}>
         <ToolbarSplitButton
           pressed={openState.open}
@@ -134,12 +138,6 @@ export function MediaDropdownMenu({
           </DropdownMenuRadioGroup>
         </DropdownMenuContent>
       </DropdownMenu>
-
-      <MediaEmbedPopover
-        onOpenChange={setIsPopoverOpen}
-        isOpen={isPopoverOpen}
-        mediaType={nodeType}
-      />
-    </>
+    </MediaEmbedPopover>
   );
 }
diff --git a/apps/www/src/registry/default/plate-ui/media-embed-popover.tsx b/apps/www/src/registry/default/plate-ui/media-embed-popover.tsx
index 6d23701215..8c2495abf0 100644
--- a/apps/www/src/registry/default/plate-ui/media-embed-popover.tsx
+++ b/apps/www/src/registry/default/plate-ui/media-embed-popover.tsx
@@ -12,7 +12,6 @@ import {
   MediaEmbedPlugin,
   VideoPlugin,
 } from '@udecode/plate-media/react';
-import { useLastBlockDOMNode } from '@udecode/plate-utils/react';
 import { AudioLinesIcon, FileUpIcon, FilmIcon, ImageIcon } from 'lucide-react';
 
 import { Button } from './button';
@@ -45,20 +44,22 @@ const MEDIA_CONFIG: Record<
   },
 };
 
+interface MediaEmbedPopoverProps {
+  children: React.ReactNode;
+  isOpen: boolean;
+  mediaType: string;
+  onOpenChange: (open: boolean) => void;
+}
+
 export function MediaEmbedPopover({
+  children,
   isOpen,
   mediaType,
   onOpenChange,
-}: {
-  isOpen: boolean;
-  mediaType: string;
-  onOpenChange: (open: boolean) => void;
-}) {
+}: MediaEmbedPopoverProps) {
   const { editor } = useEditorPlugin(MediaEmbedPlugin);
   const [url, setUrl] = useState('');
 
-  const anchorElement = useLastBlockDOMNode(editor, { enabled: isOpen });
-
   const embedMedia = useCallback(() => {
     insertImage(editor, url);
     focusEditor(editor);
@@ -71,11 +72,9 @@ export function MediaEmbedPopover({
     return MEDIA_CONFIG[mediaType];
   }, [mediaType]);
 
-  if (!anchorElement) return null;
-
   return (
     <Popover open={isOpen} onOpenChange={onOpenChange} modal={false}>
-      <PopoverAnchor virtualRef={{ current: anchorElement }} />
+      <PopoverAnchor>{children}</PopoverAnchor>
 
       <PopoverContent className="w-auto p-1" align="center" side="bottom">
         <div className="flex w-[330px] flex-col">

From 7fd99fc0aa607df74aabc041dbedefe236d7b789 Mon Sep 17 00:00:00 2001
From: Felix Feng <felixfeng33@gmail.com>
Date: Sat, 16 Nov 2024 15:46:38 +0800
Subject: [PATCH 30/34] fix

---
 .../www/content/docs/components/changelog.mdx |   1 -
 apps/www/public/r/index.json                  |   4 +-
 .../styles/default/fixed-toolbar-buttons.json |   2 +-
 .../default/fixed-toolbar-list-buttons.json   |   2 +-
 apps/www/public/r/styles/default/input.json   |   2 +-
 .../styles/default/media-toolbar-button.json  |   2 +-
 apps/www/public/r/styles/default/toolbar.json |   2 +-
 apps/www/src/__registry__/index.tsx           |   8 +-
 apps/www/src/lib/plate/create-plate-ui.ts     |   5 +-
 .../default/example/cards/cards-toolbar.tsx   |  10 +-
 .../default/plate-ui/alert-dialog.tsx         | 142 ++++++++++++++++++
 .../plate-ui/fixed-toolbar-buttons.tsx        |  18 +--
 .../plate-ui/fixed-toolbar-list-buttons.tsx   |  12 +-
 .../src/registry/default/plate-ui/input.tsx   |   1 +
 .../default/plate-ui/media-embed-popover.tsx  | 113 --------------
 ...down-menu.tsx => media-toolbar-button.tsx} | 111 +++++++++++---
 .../default/plate-ui/more-toolbar-button.tsx  |  27 ++++
 .../src/registry/default/plate-ui/toolbar.tsx |  54 +++----
 apps/www/src/registry/registry-ui.ts          |   4 +-
 19 files changed, 318 insertions(+), 202 deletions(-)
 create mode 100644 apps/www/src/registry/default/plate-ui/alert-dialog.tsx
 delete mode 100644 apps/www/src/registry/default/plate-ui/media-embed-popover.tsx
 rename apps/www/src/registry/default/plate-ui/{media-dropdown-menu.tsx => media-toolbar-button.tsx} (52%)
 create mode 100644 apps/www/src/registry/default/plate-ui/more-toolbar-button.tsx

diff --git a/apps/www/content/docs/components/changelog.mdx b/apps/www/content/docs/components/changelog.mdx
index ff741454c9..3131b6e2e0 100644
--- a/apps/www/content/docs/components/changelog.mdx
+++ b/apps/www/content/docs/components/changelog.mdx
@@ -13,7 +13,6 @@ Use the [CLI](https://platejs.org/docs/components/cli) to install the latest ver
 
 ### November 14 #16.7
 
-Remove `media-toolbar-button`, Use `media-dropdown-menu` instead.
 Add `ToolbarSplitButton` in `toolbar.tsx`.
 
 ### November 13 #16.6
diff --git a/apps/www/public/r/index.json b/apps/www/public/r/index.json
index 42760d4195..75aafb645a 100644
--- a/apps/www/public/r/index.json
+++ b/apps/www/public/r/index.json
@@ -2332,11 +2332,11 @@
     },
     "files": [
       {
-        "path": "plate-ui/media-dropdown-menu.tsx",
+        "path": "plate-ui/media-toolbar-button.tsx",
         "type": "registry:ui"
       }
     ],
-    "name": "media-dropdown-menu",
+    "name": "media-toolbar-button",
     "registryDependencies": [
       "toolbar"
     ],
diff --git a/apps/www/public/r/styles/default/fixed-toolbar-buttons.json b/apps/www/public/r/styles/default/fixed-toolbar-buttons.json
index 571364baac..c549829b19 100644
--- a/apps/www/public/r/styles/default/fixed-toolbar-buttons.json
+++ b/apps/www/public/r/styles/default/fixed-toolbar-buttons.json
@@ -13,7 +13,7 @@
   },
   "files": [
     {
-      "content": "'use client';\n\nimport React, { useState } from 'react';\n\nimport {\n  BoldPlugin,\n  CodePlugin,\n  ItalicPlugin,\n  StrikethroughPlugin,\n  SubscriptPlugin,\n  SuperscriptPlugin,\n  UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { useEditorReadOnly } from '@udecode/plate-common/react';\nimport {\n  FontBackgroundColorPlugin,\n  FontColorPlugin,\n} from '@udecode/plate-font/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { ListStyleType } from '@udecode/plate-indent-list';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport {\n  AudioPlugin,\n  FilePlugin,\n  ImagePlugin,\n  VideoPlugin,\n} from '@udecode/plate-media/react';\nimport {\n  BaselineIcon,\n  BoldIcon,\n  Code2Icon,\n  HighlighterIcon,\n  ItalicIcon,\n  KeyboardIcon,\n  MoreHorizontalIcon,\n  PaintBucketIcon,\n  SparklesIcon,\n  StrikethroughIcon,\n  SubscriptIcon,\n  SuperscriptIcon,\n  UnderlineIcon,\n} from 'lucide-react';\n\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from './accordion';\nimport { AIToolbarButton } from './ai-toolbar-button';\nimport { AlignDropdownMenu } from './align-dropdown-menu';\nimport { ColorDropdownMenu } from './color-dropdown-menu';\nimport { CommentToolbarButton } from './comment-toolbar-button';\nimport { EmojiDropdownMenu } from './emoji-dropdown-menu';\nimport { RedoToolbarButton, UndoToolbarButton } from './history-toolbar-button';\nimport { IndentListToolbarButton } from './indent-list-toolbar-button';\nimport { IndentTodoToolbarButton } from './indent-todo-toolbar-button';\nimport { IndentToolbarButton } from './indent-toolbar-button';\nimport { InsertDropdownMenu } from './insert-dropdown-menu';\nimport { LineHeightDropdownMenu } from './line-height-dropdown-menu';\nimport { LinkToolbarButton } from './link-toolbar-button';\nimport { MarkToolbarButton } from './mark-toolbar-button';\nimport { MediaDropdownMenu } from './media-dropdown-menu';\nimport { ModeDropdownMenu } from './mode-dropdown-menu';\nimport { OutdentToolbarButton } from './outdent-toolbar-button';\nimport { TableDropdownMenu } from './table-dropdown-menu';\nimport { ToggleToolbarButton } from './toggle-toolbar-button';\nimport { ToolbarButton, ToolbarGroup } from './toolbar';\nimport { TurnIntoDropdownMenu } from './turn-into-dropdown-menu';\n\nexport function FixedToolbarButtons() {\n  const [value, setValue] = useState('');\n  const expanded = value === 'toolbar';\n\n  return (\n    <Accordion\n      className=\"w-full\"\n      onValueChange={setValue}\n      type=\"single\"\n      collapsible\n    >\n      <AccordionItem className=\"border-b-0\" value=\"toolbar\">\n        <PrimaryButtons expanded={expanded} />\n        <AccordionContent className=\"p-0\">\n          <ExpandedButtons />\n        </AccordionContent>\n      </AccordionItem>\n    </Accordion>\n  );\n}\n\nfunction PrimaryButtons({ expanded }: { expanded: boolean }) {\n  const readOnly = useEditorReadOnly();\n\n  return (\n    <div className=\"flex w-full\">\n      {!readOnly && (\n        <>\n          <ToolbarGroup>\n            <UndoToolbarButton />\n            <RedoToolbarButton />\n          </ToolbarGroup>\n\n          <ToolbarGroup>\n            <AIToolbarButton\n              className=\"gap-1.5 text-purple-600 hover:text-purple-700 dark:text-purple-400 dark:hover:text-purple-500\"\n              tooltip=\"Edit, generate, and more\"\n            >\n              <SparklesIcon className=\"!size-3.5\" />\n              Ask AI\n            </AIToolbarButton>\n          </ToolbarGroup>\n\n          <ToolbarGroup>\n            <InsertDropdownMenu />\n            <TurnIntoDropdownMenu />\n          </ToolbarGroup>\n\n          <ToolbarGroup>\n            <MarkToolbarButton nodeType={BoldPlugin.key} tooltip=\"Bold (⌘+B)\">\n              <BoldIcon />\n            </MarkToolbarButton>\n\n            <MarkToolbarButton\n              nodeType={ItalicPlugin.key}\n              tooltip=\"Italic (⌘+I)\"\n            >\n              <ItalicIcon />\n            </MarkToolbarButton>\n\n            <MarkToolbarButton\n              nodeType={UnderlinePlugin.key}\n              tooltip=\"Underline (⌘+U)\"\n            >\n              <UnderlineIcon />\n            </MarkToolbarButton>\n\n            <MarkToolbarButton\n              nodeType={StrikethroughPlugin.key}\n              tooltip=\"Strikethrough (⌘+⇧+M)\"\n            >\n              <StrikethroughIcon />\n            </MarkToolbarButton>\n\n            <MarkToolbarButton nodeType={CodePlugin.key} tooltip=\"Code (⌘+E)\">\n              <Code2Icon />\n            </MarkToolbarButton>\n\n            <ColorDropdownMenu\n              nodeType={FontColorPlugin.key}\n              tooltip=\"Text color\"\n            >\n              <BaselineIcon />\n            </ColorDropdownMenu>\n\n            <ColorDropdownMenu\n              nodeType={FontBackgroundColorPlugin.key}\n              tooltip=\"Background color\"\n            >\n              <PaintBucketIcon />\n            </ColorDropdownMenu>\n          </ToolbarGroup>\n\n          <ToolbarGroup>\n            <AlignDropdownMenu />\n\n            <IndentListToolbarButton nodeType={ListStyleType.Disc} />\n            <IndentListToolbarButton nodeType={ListStyleType.Decimal} />\n            <IndentTodoToolbarButton />\n          </ToolbarGroup>\n\n          <ToolbarGroup>\n            <LinkToolbarButton />\n            <ToggleToolbarButton />\n            <TableDropdownMenu />\n            <EmojiDropdownMenu />\n          </ToolbarGroup>\n\n          <ToolbarGroup>\n            <MediaDropdownMenu nodeType={ImagePlugin.key} />\n            <MediaDropdownMenu nodeType={VideoPlugin.key} />\n          </ToolbarGroup>\n        </>\n      )}\n\n      <div className=\"grow\" />\n\n      <ToolbarGroup>\n        <CommentToolbarButton />\n        <ModeDropdownMenu />\n        <AccordionTrigger className=\"p-0\" hideIcon>\n          <ToolbarButton pressed={expanded} tooltip=\"More\">\n            <MoreHorizontalIcon />\n          </ToolbarButton>\n        </AccordionTrigger>\n      </ToolbarGroup>\n    </div>\n  );\n}\n\nfunction ExpandedButtons() {\n  return (\n    <div className=\"mt-1 flex w-full\">\n      <ToolbarGroup>\n        <LineHeightDropdownMenu />\n        <OutdentToolbarButton />\n        <IndentToolbarButton />\n      </ToolbarGroup>\n\n      <ToolbarGroup>\n        <MediaDropdownMenu nodeType={AudioPlugin.key} />\n        <MediaDropdownMenu nodeType={FilePlugin.key} />\n      </ToolbarGroup>\n\n      <ToolbarGroup>\n        <MarkToolbarButton nodeType={HighlightPlugin.key} tooltip=\"Highlight\">\n          <HighlighterIcon />\n        </MarkToolbarButton>\n\n        <MarkToolbarButton nodeType={KbdPlugin.key} tooltip=\"Keyboard input\">\n          <KeyboardIcon />\n        </MarkToolbarButton>\n\n        <MarkToolbarButton\n          nodeType={SuperscriptPlugin.key}\n          tooltip=\"Superscript\"\n        >\n          <SuperscriptIcon />\n        </MarkToolbarButton>\n\n        <MarkToolbarButton nodeType={SubscriptPlugin.key} tooltip=\"Subscript\">\n          <SubscriptIcon />\n        </MarkToolbarButton>\n      </ToolbarGroup>\n    </div>\n  );\n}\n",
+      "content": "'use client';\n\nimport React, { useState } from 'react';\n\nimport {\n  BoldPlugin,\n  CodePlugin,\n  ItalicPlugin,\n  StrikethroughPlugin,\n  SubscriptPlugin,\n  SuperscriptPlugin,\n  UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { useEditorReadOnly } from '@udecode/plate-common/react';\nimport {\n  FontBackgroundColorPlugin,\n  FontColorPlugin,\n} from '@udecode/plate-font/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { ListStyleType } from '@udecode/plate-indent-list';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport {\n  AudioPlugin,\n  FilePlugin,\n  ImagePlugin,\n  VideoPlugin,\n} from '@udecode/plate-media/react';\nimport {\n  BaselineIcon,\n  BoldIcon,\n  Code2Icon,\n  HighlighterIcon,\n  ItalicIcon,\n  KeyboardIcon,\n  PaintBucketIcon,\n  SparklesIcon,\n  StrikethroughIcon,\n  SubscriptIcon,\n  SuperscriptIcon,\n  UnderlineIcon,\n} from 'lucide-react';\n\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from './accordion';\nimport { AIToolbarButton } from './ai-toolbar-button';\nimport { AlignDropdownMenu } from './align-dropdown-menu';\nimport { ColorDropdownMenu } from './color-dropdown-menu';\nimport { CommentToolbarButton } from './comment-toolbar-button';\nimport { EmojiDropdownMenu } from './emoji-dropdown-menu';\nimport { RedoToolbarButton, UndoToolbarButton } from './history-toolbar-button';\nimport { IndentListToolbarButton } from './indent-list-toolbar-button';\nimport { IndentTodoToolbarButton } from './indent-todo-toolbar-button';\nimport { IndentToolbarButton } from './indent-toolbar-button';\nimport { InsertDropdownMenu } from './insert-dropdown-menu';\nimport { LineHeightDropdownMenu } from './line-height-dropdown-menu';\nimport { LinkToolbarButton } from './link-toolbar-button';\nimport { MarkToolbarButton } from './mark-toolbar-button';\nimport { MediaToolbarButton } from './media-toolbar-button';\nimport { ModeDropdownMenu } from './mode-dropdown-menu';\nimport { MoreToolbarButton } from './more-toolbar-button';\nimport { OutdentToolbarButton } from './outdent-toolbar-button';\nimport { TableDropdownMenu } from './table-dropdown-menu';\nimport { ToggleToolbarButton } from './toggle-toolbar-button';\nimport { ToolbarGroup } from './toolbar';\nimport { TurnIntoDropdownMenu } from './turn-into-dropdown-menu';\n\nexport function FixedToolbarButtons() {\n  const [value, setValue] = useState('');\n  const expanded = value === 'toolbar';\n\n  return (\n    <Accordion\n      className=\"w-full\"\n      onValueChange={setValue}\n      type=\"single\"\n      collapsible\n    >\n      <AccordionItem className=\"border-b-0\" value=\"toolbar\">\n        <PrimaryButtons expanded={expanded} />\n        <AccordionContent className=\"p-0\">\n          <ExpandedButtons />\n        </AccordionContent>\n      </AccordionItem>\n    </Accordion>\n  );\n}\n\nfunction PrimaryButtons({ expanded }: { expanded: boolean }) {\n  const readOnly = useEditorReadOnly();\n\n  return (\n    <div className=\"flex w-full\">\n      {!readOnly && (\n        <>\n          <ToolbarGroup>\n            <UndoToolbarButton />\n            <RedoToolbarButton />\n          </ToolbarGroup>\n\n          <ToolbarGroup>\n            <AIToolbarButton\n              className=\"gap-1.5 text-purple-600 hover:text-purple-700 dark:text-purple-400 dark:hover:text-purple-500\"\n              tooltip=\"Edit, generate, and more\"\n            >\n              <SparklesIcon className=\"!size-3.5\" />\n              Ask AI\n            </AIToolbarButton>\n          </ToolbarGroup>\n\n          <ToolbarGroup>\n            <InsertDropdownMenu />\n            <TurnIntoDropdownMenu />\n          </ToolbarGroup>\n\n          <ToolbarGroup>\n            <MarkToolbarButton nodeType={BoldPlugin.key} tooltip=\"Bold (⌘+B)\">\n              <BoldIcon />\n            </MarkToolbarButton>\n\n            <MarkToolbarButton\n              nodeType={ItalicPlugin.key}\n              tooltip=\"Italic (⌘+I)\"\n            >\n              <ItalicIcon />\n            </MarkToolbarButton>\n\n            <MarkToolbarButton\n              nodeType={UnderlinePlugin.key}\n              tooltip=\"Underline (⌘+U)\"\n            >\n              <UnderlineIcon />\n            </MarkToolbarButton>\n\n            <MarkToolbarButton\n              nodeType={StrikethroughPlugin.key}\n              tooltip=\"Strikethrough (⌘+⇧+M)\"\n            >\n              <StrikethroughIcon />\n            </MarkToolbarButton>\n\n            <MarkToolbarButton nodeType={CodePlugin.key} tooltip=\"Code (⌘+E)\">\n              <Code2Icon />\n            </MarkToolbarButton>\n\n            <ColorDropdownMenu\n              nodeType={FontColorPlugin.key}\n              tooltip=\"Text color\"\n            >\n              <BaselineIcon />\n            </ColorDropdownMenu>\n\n            <ColorDropdownMenu\n              nodeType={FontBackgroundColorPlugin.key}\n              tooltip=\"Background color\"\n            >\n              <PaintBucketIcon />\n            </ColorDropdownMenu>\n          </ToolbarGroup>\n\n          <ToolbarGroup>\n            <AlignDropdownMenu />\n\n            <IndentListToolbarButton nodeType={ListStyleType.Disc} />\n            <IndentListToolbarButton nodeType={ListStyleType.Decimal} />\n            <IndentTodoToolbarButton />\n          </ToolbarGroup>\n\n          <ToolbarGroup>\n            <LinkToolbarButton />\n            <ToggleToolbarButton />\n            <TableDropdownMenu />\n            <EmojiDropdownMenu />\n          </ToolbarGroup>\n\n          <ToolbarGroup>\n            <MediaToolbarButton nodeType={ImagePlugin.key} />\n            <MediaToolbarButton nodeType={VideoPlugin.key} />\n          </ToolbarGroup>\n        </>\n      )}\n\n      <div className=\"grow\" />\n\n      <ToolbarGroup>\n        <CommentToolbarButton />\n        <ModeDropdownMenu />\n        <AccordionTrigger className=\"p-0\" hideIcon>\n          <MoreToolbarButton pressed={expanded} tooltip=\"More\" />\n        </AccordionTrigger>\n      </ToolbarGroup>\n    </div>\n  );\n}\n\nfunction ExpandedButtons() {\n  return (\n    <div className=\"mt-1 flex w-full\">\n      <ToolbarGroup>\n        <LineHeightDropdownMenu />\n        <OutdentToolbarButton />\n        <IndentToolbarButton />\n      </ToolbarGroup>\n\n      <ToolbarGroup>\n        <MediaToolbarButton nodeType={AudioPlugin.key} />\n        <MediaToolbarButton nodeType={FilePlugin.key} />\n      </ToolbarGroup>\n\n      <ToolbarGroup>\n        <MarkToolbarButton nodeType={HighlightPlugin.key} tooltip=\"Highlight\">\n          <HighlighterIcon />\n        </MarkToolbarButton>\n\n        <MarkToolbarButton nodeType={KbdPlugin.key} tooltip=\"Keyboard input\">\n          <KeyboardIcon />\n        </MarkToolbarButton>\n\n        <MarkToolbarButton\n          nodeType={SuperscriptPlugin.key}\n          tooltip=\"Superscript\"\n        >\n          <SuperscriptIcon />\n        </MarkToolbarButton>\n\n        <MarkToolbarButton nodeType={SubscriptPlugin.key} tooltip=\"Subscript\">\n          <SubscriptIcon />\n        </MarkToolbarButton>\n      </ToolbarGroup>\n    </div>\n  );\n}\n",
       "path": "plate-ui/fixed-toolbar-buttons.tsx",
       "target": "components/plate-ui/fixed-toolbar-buttons.tsx",
       "type": "registry:ui"
diff --git a/apps/www/public/r/styles/default/fixed-toolbar-list-buttons.json b/apps/www/public/r/styles/default/fixed-toolbar-list-buttons.json
index e8b1911c1f..d63f0b0c86 100644
--- a/apps/www/public/r/styles/default/fixed-toolbar-list-buttons.json
+++ b/apps/www/public/r/styles/default/fixed-toolbar-list-buttons.json
@@ -7,7 +7,7 @@
   ],
   "files": [
     {
-      "content": "'use client';\n\nimport React from 'react';\n\nimport {\n  BoldPlugin,\n  CodePlugin,\n  ItalicPlugin,\n  StrikethroughPlugin,\n  UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { useEditorReadOnly } from '@udecode/plate-common/react';\nimport {\n  FontBackgroundColorPlugin,\n  FontColorPlugin,\n} from '@udecode/plate-font/react';\nimport {\n  BulletedListPlugin,\n  NumberedListPlugin,\n} from '@udecode/plate-list/react';\nimport {\n  AudioPlugin,\n  FilePlugin,\n  ImagePlugin,\n  VideoPlugin,\n} from '@udecode/plate-media/react';\nimport {\n  BaselineIcon,\n  BoldIcon,\n  Code2Icon,\n  ItalicIcon,\n  PaintBucketIcon,\n  SparklesIcon,\n  StrikethroughIcon,\n  UnderlineIcon,\n} from 'lucide-react';\n\nimport { AIToolbarButton } from './ai-toolbar-button';\nimport { AlignDropdownMenu } from './align-dropdown-menu';\nimport { ColorDropdownMenu } from './color-dropdown-menu';\nimport { CommentToolbarButton } from './comment-toolbar-button';\nimport { EmojiDropdownMenu } from './emoji-dropdown-menu';\nimport { InsertDropdownMenu } from './insert-dropdown-menu';\nimport { LineHeightDropdownMenu } from './line-height-dropdown-menu';\nimport { LinkToolbarButton } from './link-toolbar-button';\nimport { ListIndentToolbarButton } from './list-indent-toolbar-button';\nimport { ListToolbarButton } from './list-toolbar-button';\nimport { MarkToolbarButton } from './mark-toolbar-button';\nimport { MediaDropdownMenu } from './media-dropdown-menu';\n\n// import { MediaToolbarButton } from './media-toolbar-button';\nimport { ModeDropdownMenu } from './mode-dropdown-menu';\nimport { MoreDropdownMenu } from './more-dropdown-menu';\nimport { TableDropdownMenu } from './table-dropdown-menu';\nimport { ToggleToolbarButton } from './toggle-toolbar-button';\nimport { ToolbarGroup } from './toolbar';\nimport { TurnIntoDropdownMenu } from './turn-into-dropdown-menu';\n\nexport function FixedToolbarListButtons() {\n  const readOnly = useEditorReadOnly();\n\n  return (\n    <div className=\"flex w-full\">\n      {!readOnly && (\n        <>\n          <ToolbarGroup>\n            <AIToolbarButton\n              className=\"gap-1.5 text-purple-600 hover:text-purple-700 dark:text-purple-400 dark:hover:text-purple-500\"\n              tooltip=\"Edit, generate, and more\"\n            >\n              <SparklesIcon className=\"!size-3.5\" />\n              Ask AI\n            </AIToolbarButton>\n          </ToolbarGroup>\n\n          <ToolbarGroup>\n            <InsertDropdownMenu />\n            <TurnIntoDropdownMenu />\n          </ToolbarGroup>\n\n          <ToolbarGroup>\n            <MarkToolbarButton nodeType={BoldPlugin.key} tooltip=\"Bold (⌘+B)\">\n              <BoldIcon />\n            </MarkToolbarButton>\n\n            <MarkToolbarButton\n              nodeType={ItalicPlugin.key}\n              tooltip=\"Italic (⌘+I)\"\n            >\n              <ItalicIcon />\n            </MarkToolbarButton>\n\n            <MarkToolbarButton\n              nodeType={UnderlinePlugin.key}\n              tooltip=\"Underline (⌘+U)\"\n            >\n              <UnderlineIcon />\n            </MarkToolbarButton>\n\n            <MarkToolbarButton\n              nodeType={StrikethroughPlugin.key}\n              tooltip=\"Strikethrough (⌘+⇧+M)\"\n            >\n              <StrikethroughIcon />\n            </MarkToolbarButton>\n\n            <MarkToolbarButton nodeType={CodePlugin.key} tooltip=\"Code (⌘+E)\">\n              <Code2Icon />\n            </MarkToolbarButton>\n\n            <ColorDropdownMenu\n              nodeType={FontColorPlugin.key}\n              tooltip=\"Text color\"\n            >\n              <BaselineIcon />\n            </ColorDropdownMenu>\n\n            <ColorDropdownMenu\n              nodeType={FontBackgroundColorPlugin.key}\n              tooltip=\"Background color\"\n            >\n              <PaintBucketIcon />\n            </ColorDropdownMenu>\n          </ToolbarGroup>\n\n          <ToolbarGroup>\n            <AlignDropdownMenu />\n            <LineHeightDropdownMenu />\n\n            <ListToolbarButton nodeType={BulletedListPlugin.key} />\n            <ListToolbarButton nodeType={NumberedListPlugin.key} />\n\n            <ListIndentToolbarButton reverse />\n            <ListIndentToolbarButton />\n          </ToolbarGroup>\n\n          <ToolbarGroup>\n            <MediaDropdownMenu nodeType={ImagePlugin.key} />\n            <MediaDropdownMenu nodeType={VideoPlugin.key} />\n            <MediaDropdownMenu nodeType={AudioPlugin.key} />\n            <MediaDropdownMenu nodeType={FilePlugin.key} />\n          </ToolbarGroup>\n\n          <ToolbarGroup>\n            <LinkToolbarButton />\n            <ToggleToolbarButton />\n            <TableDropdownMenu />\n            <EmojiDropdownMenu />\n            <MoreDropdownMenu />\n          </ToolbarGroup>\n        </>\n      )}\n\n      <div className=\"grow\" />\n\n      <ToolbarGroup>\n        <CommentToolbarButton />\n        <ModeDropdownMenu />\n      </ToolbarGroup>\n    </div>\n  );\n}\n",
+      "content": "'use client';\n\nimport React from 'react';\n\nimport {\n  BoldPlugin,\n  CodePlugin,\n  ItalicPlugin,\n  StrikethroughPlugin,\n  UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { useEditorReadOnly } from '@udecode/plate-common/react';\nimport {\n  FontBackgroundColorPlugin,\n  FontColorPlugin,\n} from '@udecode/plate-font/react';\nimport {\n  BulletedListPlugin,\n  NumberedListPlugin,\n} from '@udecode/plate-list/react';\nimport {\n  AudioPlugin,\n  FilePlugin,\n  ImagePlugin,\n  VideoPlugin,\n} from '@udecode/plate-media/react';\nimport {\n  BaselineIcon,\n  BoldIcon,\n  Code2Icon,\n  ItalicIcon,\n  PaintBucketIcon,\n  SparklesIcon,\n  StrikethroughIcon,\n  UnderlineIcon,\n} from 'lucide-react';\n\nimport { AIToolbarButton } from './ai-toolbar-button';\nimport { AlignDropdownMenu } from './align-dropdown-menu';\nimport { ColorDropdownMenu } from './color-dropdown-menu';\nimport { CommentToolbarButton } from './comment-toolbar-button';\nimport { EmojiDropdownMenu } from './emoji-dropdown-menu';\nimport { InsertDropdownMenu } from './insert-dropdown-menu';\nimport { LineHeightDropdownMenu } from './line-height-dropdown-menu';\nimport { LinkToolbarButton } from './link-toolbar-button';\nimport { ListIndentToolbarButton } from './list-indent-toolbar-button';\nimport { ListToolbarButton } from './list-toolbar-button';\nimport { MarkToolbarButton } from './mark-toolbar-button';\nimport { MediaToolbarButton } from './media-toolbar-button';\nimport { ModeDropdownMenu } from './mode-dropdown-menu';\nimport { MoreDropdownMenu } from './more-dropdown-menu';\nimport { TableDropdownMenu } from './table-dropdown-menu';\nimport { ToggleToolbarButton } from './toggle-toolbar-button';\nimport { ToolbarGroup } from './toolbar';\nimport { TurnIntoDropdownMenu } from './turn-into-dropdown-menu';\n\nexport function FixedToolbarListButtons() {\n  const readOnly = useEditorReadOnly();\n\n  return (\n    <div className=\"flex w-full\">\n      {!readOnly && (\n        <>\n          <ToolbarGroup>\n            <AIToolbarButton\n              className=\"gap-1.5 text-purple-600 hover:text-purple-700 dark:text-purple-400 dark:hover:text-purple-500\"\n              tooltip=\"Edit, generate, and more\"\n            >\n              <SparklesIcon className=\"!size-3.5\" />\n              Ask AI\n            </AIToolbarButton>\n          </ToolbarGroup>\n\n          <ToolbarGroup>\n            <InsertDropdownMenu />\n            <TurnIntoDropdownMenu />\n          </ToolbarGroup>\n\n          <ToolbarGroup>\n            <MarkToolbarButton nodeType={BoldPlugin.key} tooltip=\"Bold (⌘+B)\">\n              <BoldIcon />\n            </MarkToolbarButton>\n\n            <MarkToolbarButton\n              nodeType={ItalicPlugin.key}\n              tooltip=\"Italic (⌘+I)\"\n            >\n              <ItalicIcon />\n            </MarkToolbarButton>\n\n            <MarkToolbarButton\n              nodeType={UnderlinePlugin.key}\n              tooltip=\"Underline (⌘+U)\"\n            >\n              <UnderlineIcon />\n            </MarkToolbarButton>\n\n            <MarkToolbarButton\n              nodeType={StrikethroughPlugin.key}\n              tooltip=\"Strikethrough (⌘+⇧+M)\"\n            >\n              <StrikethroughIcon />\n            </MarkToolbarButton>\n\n            <MarkToolbarButton nodeType={CodePlugin.key} tooltip=\"Code (⌘+E)\">\n              <Code2Icon />\n            </MarkToolbarButton>\n\n            <ColorDropdownMenu\n              nodeType={FontColorPlugin.key}\n              tooltip=\"Text color\"\n            >\n              <BaselineIcon />\n            </ColorDropdownMenu>\n\n            <ColorDropdownMenu\n              nodeType={FontBackgroundColorPlugin.key}\n              tooltip=\"Background color\"\n            >\n              <PaintBucketIcon />\n            </ColorDropdownMenu>\n          </ToolbarGroup>\n\n          <ToolbarGroup>\n            <AlignDropdownMenu />\n            <LineHeightDropdownMenu />\n\n            <ListToolbarButton nodeType={BulletedListPlugin.key} />\n            <ListToolbarButton nodeType={NumberedListPlugin.key} />\n\n            <ListIndentToolbarButton reverse />\n            <ListIndentToolbarButton />\n          </ToolbarGroup>\n\n          <ToolbarGroup>\n            <MediaToolbarButton nodeType={ImagePlugin.key} />\n            <MediaToolbarButton nodeType={VideoPlugin.key} />\n            <MediaToolbarButton nodeType={AudioPlugin.key} />\n            <MediaToolbarButton nodeType={FilePlugin.key} />\n          </ToolbarGroup>\n\n          <ToolbarGroup>\n            <LinkToolbarButton />\n            <ToggleToolbarButton />\n            <TableDropdownMenu />\n            <EmojiDropdownMenu />\n            <MoreDropdownMenu />\n          </ToolbarGroup>\n        </>\n      )}\n\n      <div className=\"grow\" />\n\n      <ToolbarGroup>\n        <CommentToolbarButton />\n        <ModeDropdownMenu />\n      </ToolbarGroup>\n    </div>\n  );\n}\n",
       "path": "plate-ui/fixed-toolbar-list-buttons.tsx",
       "target": "components/plate-ui/fixed-toolbar-list-buttons.tsx",
       "type": "registry:ui"
diff --git a/apps/www/public/r/styles/default/input.json b/apps/www/public/r/styles/default/input.json
index 199c0cee96..40f391bd01 100644
--- a/apps/www/public/r/styles/default/input.json
+++ b/apps/www/public/r/styles/default/input.json
@@ -5,7 +5,7 @@
   },
   "files": [
     {
-      "content": "import { withVariants } from '@udecode/cn';\nimport { cva } from 'class-variance-authority';\n\nexport const inputVariants = cva(\n  'flex w-full rounded-md bg-transparent text-sm file:border-0 file:bg-background file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50',\n  {\n    defaultVariants: {\n      h: 'md',\n      variant: 'default',\n    },\n    variants: {\n      h: {\n        md: 'h-10 px-3 py-2',\n        sm: 'h-[28px] px-1.5 py-1',\n      },\n      variant: {\n        default:\n          'border border-input ring-offset-background focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',\n        ghost: 'border-none focus-visible:ring-transparent',\n      },\n    },\n  }\n);\n\nexport const Input = withVariants('input', inputVariants, ['variant', 'h']);\n",
+      "content": "import { withVariants } from '@udecode/cn';\nimport { cva } from 'class-variance-authority';\n\nexport const inputVariants = cva(\n  'flex w-full rounded-md bg-transparent text-sm file:border-0 file:bg-background file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50',\n  {\n    defaultVariants: {\n      h: 'md',\n      variant: 'default',\n    },\n    variants: {\n      h: {\n        md: 'h-10 px-3 py-2',\n        sm: 'h-[28px] px-1.5 py-1',\n      },\n      variant: {\n        default:\n          'border border-input ring-offset-background focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',\n        ghost: 'border-none focus-visible:ring-transparent',\n        underline: 'rounded-none border-b border-input',\n      },\n    },\n  }\n);\n\nexport const Input = withVariants('input', inputVariants, ['variant', 'h']);\n",
       "path": "plate-ui/input.tsx",
       "target": "components/plate-ui/input.tsx",
       "type": "registry:ui"
diff --git a/apps/www/public/r/styles/default/media-toolbar-button.json b/apps/www/public/r/styles/default/media-toolbar-button.json
index 10ca4373e3..511c8345b6 100644
--- a/apps/www/public/r/styles/default/media-toolbar-button.json
+++ b/apps/www/public/r/styles/default/media-toolbar-button.json
@@ -17,7 +17,7 @@
   },
   "files": [
     {
-      "content": "'use client';\n\nimport React from 'react';\n\nimport type { DropdownMenuProps } from '@radix-ui/react-dropdown-menu';\n\nimport { cn } from '@udecode/cn';\nimport { useEditorPlugin } from '@udecode/plate-core/react';\nimport {\n  AudioPlugin,\n  FilePlugin,\n  ImagePlugin,\n  MediaEmbedPlugin,\n  VideoPlugin,\n} from '@udecode/plate-media/react';\nimport {\n  AudioLinesIcon,\n  FileUpIcon,\n  FilmIcon,\n  ImageIcon,\n  LinkIcon,\n} from 'lucide-react';\nimport { useFilePicker } from 'use-file-picker';\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuTrigger,\n  useOpenState,\n} from './dropdown-menu';\nimport { ToolbarSplitButton } from './toolbar';\n\nconst MEDIA_CONFIG: Record<\n  string,\n  {\n    accept: string[];\n    icon: React.ReactNode;\n    tooltip: string;\n  }\n> = {\n  [AudioPlugin.key]: {\n    accept: ['audio/*'],\n    icon: <AudioLinesIcon />,\n    tooltip: 'Audio',\n  },\n  [FilePlugin.key]: {\n    accept: ['*'],\n    icon: <FileUpIcon />,\n    tooltip: 'File',\n  },\n  [ImagePlugin.key]: {\n    accept: ['image/*'],\n    icon: <ImageIcon />,\n    tooltip: 'Image',\n  },\n  [VideoPlugin.key]: {\n    accept: ['video/*'],\n    icon: <FilmIcon />,\n    tooltip: 'Video',\n  },\n};\n\nexport function MediaDropdownMenu({\n  children,\n  nodeType,\n  ...props\n}: DropdownMenuProps & { nodeType: string }) {\n  const currentConfig = MEDIA_CONFIG[nodeType];\n\n  const { api, editor } = useEditorPlugin(MediaEmbedPlugin);\n  const { openFilePicker } = useFilePicker({\n    accept: currentConfig.accept,\n    multiple: true,\n    onFilesSelected: ({ plainFiles: updatedFiles }) => {\n      (editor as any).tf.insert.media(updatedFiles);\n    },\n  });\n\n  const openState = useOpenState();\n\n  return (\n    <DropdownMenu {...openState} modal={false} {...props}>\n      <DropdownMenuTrigger asChild>\n        <ToolbarSplitButton\n          onMainButtonClick={() => openFilePicker()}\n          pressed={openState.open}\n          tooltip={currentConfig.tooltip}\n        >\n          {currentConfig.icon}\n        </ToolbarSplitButton>\n      </DropdownMenuTrigger>\n\n      <DropdownMenuContent\n        className={cn('min-w-0 data-[state=closed]:hidden')}\n        align=\"start\"\n      >\n        <DropdownMenuRadioGroup>\n          <DropdownMenuRadioItem\n            value=\"upload\"\n            onSelect={() => openFilePicker()}\n            hideIcon\n          >\n            <div className=\"flex items-center gap-2\">\n              {currentConfig.icon}\n              <span className=\"text-sm\">Upload from computer</span>\n            </div>\n          </DropdownMenuRadioItem>\n          <DropdownMenuRadioItem\n            value=\"url\"\n            onSelect={() => {\n              api.media_embed.openFloating(nodeType);\n            }}\n            hideIcon\n          >\n            <div className=\"flex items-center gap-2\">\n              <LinkIcon />\n              <span className=\"text-sm\">Insert via URL</span>\n            </div>\n          </DropdownMenuRadioItem>\n        </DropdownMenuRadioGroup>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n}\n",
+      "content": "'use client';\n\nimport React, { useCallback, useEffect, useState } from 'react';\n\nimport type { DropdownMenuProps } from '@radix-ui/react-dropdown-menu';\n\nimport { cn } from '@udecode/cn';\nimport { useEditorRef } from '@udecode/plate-core/react';\nimport {\n  AudioPlugin,\n  FilePlugin,\n  ImagePlugin,\n  VideoPlugin,\n} from '@udecode/plate-media/react';\nimport { insertNodes } from '@udecode/slate';\nimport { focusEditor } from '@udecode/slate-react';\nimport {\n  AudioLinesIcon,\n  FileUpIcon,\n  FilmIcon,\n  ImageIcon,\n  LinkIcon,\n} from 'lucide-react';\nimport { useFilePicker } from 'use-file-picker';\n\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogTitle,\n} from './alert-dialog';\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuTrigger,\n  useOpenState,\n} from './dropdown-menu';\nimport { Input } from './input';\nimport {\n  ToolbarSplitButton,\n  ToolbarSplitButtonPrimary,\n  ToolbarSplitButtonSecondary,\n} from './toolbar';\nconst MEDIA_CONFIG: Record<\n  string,\n  {\n    accept: string[];\n    icon: React.ReactNode;\n    placeholder: string;\n    title: string;\n    tooltip: string;\n  }\n> = {\n  [AudioPlugin.key]: {\n    accept: ['audio/*'],\n    icon: <AudioLinesIcon className=\"size-4\" />,\n    placeholder: 'https://example.com/audio.mp3',\n    title: 'Insert Audio',\n    tooltip: 'Audio',\n  },\n  [FilePlugin.key]: {\n    accept: ['*'],\n    icon: <FileUpIcon className=\"size-4\" />,\n    placeholder: 'https://example.com/file.pdf',\n    title: 'Insert File',\n    tooltip: 'File',\n  },\n  [ImagePlugin.key]: {\n    accept: ['image/*'],\n    icon: <ImageIcon className=\"size-4\" />,\n    placeholder: 'https://example.com/image.jpg',\n    title: 'Insert Image',\n    tooltip: 'Image',\n  },\n  [VideoPlugin.key]: {\n    accept: ['video/*'],\n    icon: <FilmIcon className=\"size-4\" />,\n    placeholder: 'https://example.com/video.mp4',\n    title: 'Insert Video',\n    tooltip: 'Video',\n  },\n};\n\nexport function MediaToolbarButton({\n  children,\n  nodeType,\n  ...props\n}: DropdownMenuProps & { nodeType: string }) {\n  const currentConfig = MEDIA_CONFIG[nodeType];\n\n  const editor = useEditorRef();\n  const openState = useOpenState();\n\n  const { openFilePicker } = useFilePicker({\n    accept: currentConfig.accept,\n    multiple: true,\n    onFilesSelected: ({ plainFiles: updatedFiles }) => {\n      (editor as any).tf.insert.media(updatedFiles);\n    },\n  });\n\n  const [dialogOpen, setDialogOpen] = useState(false);\n\n  const [url, setUrl] = useState('');\n\n  const embedMedia = useCallback(() => {\n    setDialogOpen(false);\n    insertNodes(editor, {\n      children: [{ text: '' }],\n      name: nodeType === FilePlugin.key ? url.split('/').pop() : undefined,\n      type: nodeType,\n      url,\n    });\n  }, [editor, nodeType, url]);\n\n  useEffect(() => {\n    if (!dialogOpen) {\n      focusEditor(editor);\n      setUrl('');\n    }\n  }, [dialogOpen, editor]);\n\n  return (\n    <>\n      <DropdownMenu {...openState} modal={false} {...props}>\n        <ToolbarSplitButton pressed={openState.open}>\n          <ToolbarSplitButtonPrimary\n            onClick={() => openFilePicker()}\n            onMouseDown={(e) => e.preventDefault()}\n            tooltip={currentConfig.tooltip}\n          >\n            {currentConfig.icon}\n          </ToolbarSplitButtonPrimary>\n\n          <DropdownMenuTrigger asChild>\n            <ToolbarSplitButtonSecondary />\n          </DropdownMenuTrigger>\n        </ToolbarSplitButton>\n\n        <DropdownMenuContent\n          className={cn('min-w-0 data-[state=closed]:hidden')}\n          align=\"start\"\n        >\n          <DropdownMenuRadioGroup>\n            <DropdownMenuRadioItem\n              value=\"upload\"\n              onSelect={() => openFilePicker()}\n              hideIcon\n            >\n              <div className=\"flex items-center gap-2\">\n                {currentConfig.icon}\n                <span className=\"text-sm\">Upload from computer</span>\n              </div>\n            </DropdownMenuRadioItem>\n            <DropdownMenuRadioItem\n              value=\"url\"\n              onSelect={() => setDialogOpen(true)}\n              hideIcon\n            >\n              <div className=\"flex items-center gap-2\">\n                <LinkIcon />\n                <span className=\"text-sm\">Insert via URL</span>\n              </div>\n            </DropdownMenuRadioItem>\n          </DropdownMenuRadioGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n\n      <AlertDialog open={dialogOpen} onOpenChange={setDialogOpen}>\n        <AlertDialogContent>\n          <AlertDialogHeader>\n            <AlertDialogTitle>{currentConfig.title}</AlertDialogTitle>\n            <AlertDialogDescription className=\"flex items-center gap-2\">\n              {currentConfig.icon}\n              <Input\n                variant=\"underline\"\n                value={url}\n                onChange={(e) => setUrl(e.target.value)}\n                onKeyDown={(e) => {\n                  if (e.key === 'Enter') embedMedia();\n                }}\n                placeholder={currentConfig.placeholder}\n                h=\"sm\"\n                autoFocus\n              />\n            </AlertDialogDescription>\n          </AlertDialogHeader>\n          <AlertDialogFooter>\n            <AlertDialogCancel>CANCEL</AlertDialogCancel>\n            <AlertDialogAction onClick={embedMedia}>\n              {currentConfig.title.toUpperCase()}\n            </AlertDialogAction>\n          </AlertDialogFooter>\n        </AlertDialogContent>\n      </AlertDialog>\n    </>\n  );\n}\n",
       "path": "plate-ui/media-toolbar-button.tsx",
       "target": "components/plate-ui/media-toolbar-button.tsx",
       "type": "registry:ui"
diff --git a/apps/www/public/r/styles/default/toolbar.json b/apps/www/public/r/styles/default/toolbar.json
index 857ae22491..969601ab0e 100644
--- a/apps/www/public/r/styles/default/toolbar.json
+++ b/apps/www/public/r/styles/default/toolbar.json
@@ -7,7 +7,7 @@
   },
   "files": [
     {
-      "content": "'use client';\n\nimport * as React from 'react';\n\nimport * as ToolbarPrimitive from '@radix-ui/react-toolbar';\nimport { cn, withCn, withRef, withVariants } from '@udecode/cn';\nimport { type VariantProps, cva } from 'class-variance-authority';\nimport { ChevronDown } from 'lucide-react';\n\nimport { Separator } from './separator';\nimport { withTooltip } from './tooltip';\n\nexport const Toolbar = withCn(\n  ToolbarPrimitive.Root,\n  'relative flex select-none items-center'\n);\n\nexport const ToolbarToggleGroup = withCn(\n  ToolbarPrimitive.ToolbarToggleGroup,\n  'flex items-center'\n);\n\nexport const ToolbarLink = withCn(\n  ToolbarPrimitive.Link,\n  'font-medium underline underline-offset-4'\n);\n\nexport const ToolbarSeparator = withCn(\n  ToolbarPrimitive.Separator,\n  'mx-2 my-1 w-px shrink-0 bg-border'\n);\n\nconst toolbarButtonVariants = cva(\n  cn(\n    'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium text-foreground ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg:not([data-icon])]:size-4'\n  ),\n  {\n    defaultVariants: {\n      size: 'sm',\n      variant: 'default',\n    },\n    variants: {\n      size: {\n        default: 'h-10 px-3',\n        lg: 'h-11 px-5',\n        sm: 'h-7 px-2',\n      },\n      variant: {\n        default:\n          'bg-transparent hover:bg-muted hover:text-muted-foreground aria-checked:bg-accent aria-checked:text-accent-foreground',\n        outline:\n          'border border-input bg-transparent hover:bg-accent hover:text-accent-foreground',\n      },\n    },\n  }\n);\n\nconst dropdownArrowVariants = cva(\n  cn(\n    'inline-flex items-center justify-center rounded-r-md text-sm font-medium text-foreground transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50'\n  ),\n  {\n    defaultVariants: {\n      size: 'sm',\n      variant: 'default',\n    },\n    variants: {\n      size: {\n        default: 'h-10 w-6',\n        lg: 'h-11 w-8',\n        sm: 'h-7 w-4',\n      },\n      variant: {\n        default:\n          'bg-transparent hover:bg-muted hover:text-muted-foreground aria-checked:bg-accent aria-checked:text-accent-foreground',\n        outline:\n          'border border-l-0 border-input bg-transparent hover:bg-accent hover:text-accent-foreground',\n      },\n    },\n  }\n);\n\nconst ToolbarButton = withTooltip(\n  // eslint-disable-next-line react/display-name\n  React.forwardRef<\n    React.ElementRef<typeof ToolbarToggleItem>,\n    {\n      isDropdown?: boolean;\n      pressed?: boolean;\n    } & Omit<\n      React.ComponentPropsWithoutRef<typeof ToolbarToggleItem>,\n      'asChild' | 'value'\n    > &\n      VariantProps<typeof toolbarButtonVariants>\n  >(\n    (\n      { children, className, isDropdown, pressed, size, variant, ...props },\n      ref\n    ) => {\n      return typeof pressed === 'boolean' ? (\n        <ToolbarToggleGroup\n          disabled={props.disabled}\n          value=\"single\"\n          type=\"single\"\n        >\n          <ToolbarToggleItem\n            ref={ref}\n            className={cn(\n              toolbarButtonVariants({\n                size,\n                variant,\n              }),\n              isDropdown && 'justify-between gap-1 pr-1',\n              className\n            )}\n            value={pressed ? 'single' : ''}\n            {...props}\n          >\n            {isDropdown ? (\n              <>\n                <div className=\"flex flex-1 items-center gap-2 whitespace-nowrap\">\n                  {children}\n                </div>\n                <div>\n                  <ChevronDown\n                    className=\"size-3.5 text-muted-foreground\"\n                    data-icon\n                  />\n                </div>\n              </>\n            ) : (\n              children\n            )}\n          </ToolbarToggleItem>\n        </ToolbarToggleGroup>\n      ) : (\n        <ToolbarPrimitive.Button\n          ref={ref}\n          className={cn(\n            toolbarButtonVariants({\n              size,\n              variant,\n            }),\n            isDropdown && 'pr-1',\n            className\n          )}\n          {...props}\n        >\n          {children}\n        </ToolbarPrimitive.Button>\n      );\n    }\n  )\n);\nToolbarButton.displayName = 'ToolbarButton';\n\nexport { ToolbarButton };\n\nexport const ToolbarSplitButton = React.forwardRef<\n  React.ElementRef<typeof ToolbarToggleGroup>,\n  {\n    pressed?: boolean;\n    tooltip?: string;\n  } & Omit<\n    React.ComponentPropsWithoutRef<typeof ToolbarToggleItem>,\n    'asChild' | 'value'\n  >\n>(({ children, pressed, ...props }, ref) => {\n  return (\n    <ToolbarToggleGroup\n      ref={ref}\n      className=\"group\"\n      disabled={props.disabled}\n      value=\"single\"\n      data-pressed={pressed}\n      type=\"single\"\n    >\n      <button className=\"flex\" type=\"button\">\n        {children}\n      </button>\n    </ToolbarToggleGroup>\n  );\n});\n\nexport const ToolbarSplitButtonPrimary = React.forwardRef<\n  React.ElementRef<typeof ToolbarToggleItem>,\n  {\n    className?: string;\n    size?: 'default' | 'lg' | 'sm';\n    variant?: 'default' | 'outline';\n  } & Omit<React.ComponentPropsWithoutRef<typeof ToolbarToggleItem>, 'value'>\n>(({ children, className, size, variant, ...props }, ref) => {\n  return (\n    <span\n      ref={ref}\n      className={cn(\n        className,\n        toolbarButtonVariants({\n          size,\n          variant,\n        }),\n        'rounded-r-none',\n        'group-data-[pressed=true]:bg-accent group-data-[pressed=true]:text-accent-foreground'\n      )}\n      {...props}\n    >\n      {children}\n    </span>\n  );\n});\n\nexport const ToolbarSplitButtonSecondary = React.forwardRef<\n  HTMLButtonElement,\n  {\n    className?: string;\n    size?: 'default' | 'lg' | 'sm';\n    variant?: 'default' | 'outline';\n  } & React.ButtonHTMLAttributes<HTMLButtonElement>\n>(({ className, size, variant, ...props }, ref) => {\n  return (\n    <span\n      ref={ref}\n      className={cn(\n        className,\n        dropdownArrowVariants({\n          size,\n          variant,\n        }),\n        'group-data-[pressed=true]:bg-accent group-data-[pressed=true]:text-accent-foreground'\n      )}\n      disabled={props.disabled}\n      {...props}\n    >\n      <ChevronDown className=\"size-3.5 text-muted-foreground\" data-icon />\n    </span>\n  );\n});\n\nToolbarSplitButton.displayName = 'ToolbarButton';\n\nexport const ToolbarToggleItem = withVariants(\n  ToolbarPrimitive.ToggleItem,\n  toolbarButtonVariants,\n  ['variant', 'size']\n);\n\nexport const ToolbarGroup = withRef<'div'>(({ children, className }, ref) => {\n  return (\n    <div\n      ref={ref}\n      className={cn(\n        'group/toolbar-group',\n        'relative hidden has-[button]:flex',\n        className\n      )}\n    >\n      <div className=\"flex items-center\">{children}</div>\n\n      <div className=\"mx-1.5 py-0.5 group-last/toolbar-group:!hidden\">\n        <Separator orientation=\"vertical\" />\n      </div>\n    </div>\n  );\n});\n",
+      "content": "'use client';\n\nimport * as React from 'react';\n\nimport * as ToolbarPrimitive from '@radix-ui/react-toolbar';\nimport { cn, withCn, withRef, withVariants } from '@udecode/cn';\nimport { type VariantProps, cva } from 'class-variance-authority';\nimport { ChevronDown } from 'lucide-react';\n\nimport { Separator } from './separator';\nimport { withTooltip } from './tooltip';\n\nexport const Toolbar = withCn(\n  ToolbarPrimitive.Root,\n  'relative flex select-none items-center'\n);\n\nexport const ToolbarToggleGroup = withCn(\n  ToolbarPrimitive.ToolbarToggleGroup,\n  'flex items-center'\n);\n\nexport const ToolbarLink = withCn(\n  ToolbarPrimitive.Link,\n  'font-medium underline underline-offset-4'\n);\n\nexport const ToolbarSeparator = withCn(\n  ToolbarPrimitive.Separator,\n  'mx-2 my-1 w-px shrink-0 bg-border'\n);\n\nconst toolbarButtonVariants = cva(\n  cn(\n    'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium text-foreground ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg:not([data-icon])]:size-4'\n  ),\n  {\n    defaultVariants: {\n      size: 'sm',\n      variant: 'default',\n    },\n    variants: {\n      size: {\n        default: 'h-10 px-3',\n        lg: 'h-11 px-5',\n        sm: 'h-7 px-2',\n      },\n      variant: {\n        default:\n          'bg-transparent hover:bg-muted hover:text-muted-foreground aria-checked:bg-accent aria-checked:text-accent-foreground',\n        outline:\n          'border border-input bg-transparent hover:bg-accent hover:text-accent-foreground',\n      },\n    },\n  }\n);\n\nconst dropdownArrowVariants = cva(\n  cn(\n    'inline-flex items-center justify-center rounded-r-md text-sm font-medium text-foreground transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50'\n  ),\n  {\n    defaultVariants: {\n      size: 'sm',\n      variant: 'default',\n    },\n    variants: {\n      size: {\n        default: 'h-10 w-6',\n        lg: 'h-11 w-8',\n        sm: 'h-7 w-4',\n      },\n      variant: {\n        default:\n          'bg-transparent hover:bg-muted hover:text-muted-foreground aria-checked:bg-accent aria-checked:text-accent-foreground',\n        outline:\n          'border border-l-0 border-input bg-transparent hover:bg-accent hover:text-accent-foreground',\n      },\n    },\n  }\n);\n\nconst ToolbarButton = withTooltip(\n  // eslint-disable-next-line react/display-name\n  React.forwardRef<\n    React.ElementRef<typeof ToolbarToggleItem>,\n    {\n      isDropdown?: boolean;\n      pressed?: boolean;\n    } & Omit<\n      React.ComponentPropsWithoutRef<typeof ToolbarToggleItem>,\n      'asChild' | 'value'\n    > &\n      VariantProps<typeof toolbarButtonVariants>\n  >(\n    (\n      { children, className, isDropdown, pressed, size, variant, ...props },\n      ref\n    ) => {\n      return typeof pressed === 'boolean' ? (\n        <ToolbarToggleGroup\n          disabled={props.disabled}\n          value=\"single\"\n          type=\"single\"\n        >\n          <ToolbarToggleItem\n            ref={ref}\n            className={cn(\n              toolbarButtonVariants({\n                size,\n                variant,\n              }),\n              isDropdown && 'justify-between gap-1 pr-1',\n              className\n            )}\n            value={pressed ? 'single' : ''}\n            {...props}\n          >\n            {isDropdown ? (\n              <>\n                <div className=\"flex flex-1 items-center gap-2 whitespace-nowrap\">\n                  {children}\n                </div>\n                <div>\n                  <ChevronDown\n                    className=\"size-3.5 text-muted-foreground\"\n                    data-icon\n                  />\n                </div>\n              </>\n            ) : (\n              children\n            )}\n          </ToolbarToggleItem>\n        </ToolbarToggleGroup>\n      ) : (\n        <ToolbarPrimitive.Button\n          ref={ref}\n          className={cn(\n            toolbarButtonVariants({\n              size,\n              variant,\n            }),\n            isDropdown && 'pr-1',\n            className\n          )}\n          {...props}\n        >\n          {children}\n        </ToolbarPrimitive.Button>\n      );\n    }\n  )\n);\nToolbarButton.displayName = 'ToolbarButton';\n\nexport { ToolbarButton };\n\nexport const ToolbarSplitButton = React.forwardRef<\n  React.ElementRef<typeof ToolbarToggleGroup>,\n  {\n    pressed?: boolean;\n    tooltip?: string;\n  } & Omit<\n    React.ComponentPropsWithoutRef<typeof ToolbarToggleItem>,\n    'asChild' | 'value'\n  >\n>(({ children, pressed, ...props }, ref) => {\n  return (\n    <ToolbarToggleGroup\n      ref={ref}\n      className=\"group\"\n      disabled={props.disabled}\n      value=\"single\"\n      data-pressed={pressed}\n      type=\"single\"\n    >\n      <button className=\"flex\" type=\"button\">\n        {children}\n      </button>\n    </ToolbarToggleGroup>\n  );\n});\n\nexport const ToolbarSplitButtonPrimary = withTooltip(\n  React.forwardRef<\n    React.ElementRef<typeof ToolbarToggleItem>,\n    {\n      className?: string;\n      size?: 'default' | 'lg' | 'sm';\n      variant?: 'default' | 'outline';\n    } & Omit<React.ComponentPropsWithoutRef<typeof ToolbarToggleItem>, 'value'>\n  >(({ children, className, size, variant, ...props }, ref) => {\n    return (\n      <span\n        ref={ref}\n        className={cn(\n          className,\n          toolbarButtonVariants({\n            size,\n            variant,\n          }),\n          'rounded-r-none',\n          'group-data-[pressed=true]:bg-accent group-data-[pressed=true]:text-accent-foreground'\n        )}\n        {...props}\n      >\n        {children}\n      </span>\n    );\n  })\n);\n\nexport const ToolbarSplitButtonSecondary = React.forwardRef<\n  HTMLButtonElement,\n  {\n    className?: string;\n    size?: 'default' | 'lg' | 'sm';\n    variant?: 'default' | 'outline';\n  } & React.ButtonHTMLAttributes<HTMLButtonElement>\n>(({ className, size, variant, ...props }, ref) => {\n  return (\n    <span\n      ref={ref}\n      className={cn(\n        className,\n        dropdownArrowVariants({\n          size,\n          variant,\n        }),\n        'group-data-[pressed=true]:bg-accent group-data-[pressed=true]:text-accent-foreground'\n      )}\n      disabled={props.disabled}\n      {...props}\n    >\n      <ChevronDown className=\"size-3.5 text-muted-foreground\" data-icon />\n    </span>\n  );\n});\n\nToolbarSplitButton.displayName = 'ToolbarButton';\n\nexport const ToolbarToggleItem = withVariants(\n  ToolbarPrimitive.ToggleItem,\n  toolbarButtonVariants,\n  ['variant', 'size']\n);\n\nexport const ToolbarGroup = withRef<'div'>(({ children, className }, ref) => {\n  return (\n    <div\n      ref={ref}\n      className={cn(\n        'group/toolbar-group',\n        'relative hidden has-[button]:flex',\n        className\n      )}\n    >\n      <div className=\"flex items-center\">{children}</div>\n\n      <div className=\"mx-1.5 py-0.5 group-last/toolbar-group:!hidden\">\n        <Separator orientation=\"vertical\" />\n      </div>\n    </div>\n  );\n});\n",
       "path": "plate-ui/toolbar.tsx",
       "target": "components/plate-ui/toolbar.tsx",
       "type": "registry:ui"
diff --git a/apps/www/src/__registry__/index.tsx b/apps/www/src/__registry__/index.tsx
index 17e571b0a7..a160dfb364 100644
--- a/apps/www/src/__registry__/index.tsx
+++ b/apps/www/src/__registry__/index.tsx
@@ -941,13 +941,13 @@ export const Index: Record<string, any> = {
       subcategory: "",
       chunks: []
     },
-    "media-dropdown-menu": {
-      name: "media-dropdown-menu",
+    "media-toolbar-button": {
+      name: "media-toolbar-button",
       description: "",
       type: "registry:ui",
       registryDependencies: ["toolbar"],
-      files: ["registry/default/plate-ui/media-dropdown-menu.tsx"],
-      component: React.lazy(() => import("@/registry/default/plate-ui/media-dropdown-menu.tsx")),
+      files: ["registry/default/plate-ui/media-toolbar-button.tsx"],
+      component: React.lazy(() => import("@/registry/default/plate-ui/media-toolbar-button.tsx")),
       source: "",
       category: "",
       subcategory: "",
diff --git a/apps/www/src/lib/plate/create-plate-ui.ts b/apps/www/src/lib/plate/create-plate-ui.ts
index 510dbe80a7..ab51e7584c 100644
--- a/apps/www/src/lib/plate/create-plate-ui.ts
+++ b/apps/www/src/lib/plate/create-plate-ui.ts
@@ -1,5 +1,3 @@
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-nocheck
 import { withProps } from '@udecode/cn';
 import { AIPlugin } from '@udecode/plate-ai/react';
 import {
@@ -42,6 +40,7 @@ import {
   TodoListPlugin,
 } from '@udecode/plate-list/react';
 import {
+  AudioPlugin,
   FilePlugin,
   ImagePlugin,
   MediaEmbedPlugin,
@@ -82,6 +81,7 @@ import { ImageElement } from '@/registry/default/plate-ui/image-element';
 import { KbdLeaf } from '@/registry/default/plate-ui/kbd-leaf';
 import { LinkElement } from '@/registry/default/plate-ui/link-element';
 import { ListElement } from '@/registry/default/plate-ui/list-element';
+import { MediaAudioElement } from '@/registry/default/plate-ui/media-audio-element';
 import { MediaEmbedElement } from '@/registry/default/plate-ui/media-embed-element';
 import { MediaFileElement } from '@/registry/default/plate-ui/media-file-element';
 import { MediaPlaceholderElement } from '@/registry/default/plate-ui/media-placeholder-element';
@@ -109,6 +109,7 @@ export const createPlateUI = ({
 }: { draggable?: boolean; placeholder?: boolean } = {}) => {
   let components: Record<string, NodeComponent> = {
     [AIPlugin.key]: AILeaf,
+    [AudioPlugin.key]: MediaAudioElement,
     [BlockquotePlugin.key]: BlockquoteElement,
     [BoldPlugin.key]: withProps(PlateLeaf, { as: 'strong' }),
     [BulletedListPlugin.key]: withProps(ListElement, { variant: 'ul' }),
diff --git a/apps/www/src/registry/default/example/cards/cards-toolbar.tsx b/apps/www/src/registry/default/example/cards/cards-toolbar.tsx
index 2e7b2fe3af..b4cb6e4ce0 100644
--- a/apps/www/src/registry/default/example/cards/cards-toolbar.tsx
+++ b/apps/www/src/registry/default/example/cards/cards-toolbar.tsx
@@ -39,7 +39,7 @@ import { InsertDropdownMenu } from '@/registry/default/plate-ui/insert-dropdown-
 import { LineHeightDropdownMenu } from '@/registry/default/plate-ui/line-height-dropdown-menu';
 import { LinkToolbarButton } from '@/registry/default/plate-ui/link-toolbar-button';
 import { MarkToolbarButton } from '@/registry/default/plate-ui/mark-toolbar-button';
-import { MediaDropdownMenu } from '@/registry/default/plate-ui/media-dropdown-menu';
+import { MediaToolbarButton } from '@/registry/default/plate-ui/media-toolbar-button';
 import { ModeDropdownMenu } from '@/registry/default/plate-ui/mode-dropdown-menu';
 import { MoreDropdownMenu } from '@/registry/default/plate-ui/more-dropdown-menu';
 import { OutdentToolbarButton } from '@/registry/default/plate-ui/outdent-toolbar-button';
@@ -119,10 +119,10 @@ export function CardsToolbar() {
           </ToolbarGroup>
 
           <ToolbarGroup>
-            <MediaDropdownMenu nodeType={ImagePlugin.key} />
-            <MediaDropdownMenu nodeType={VideoPlugin.key} />
-            <MediaDropdownMenu nodeType={AudioPlugin.key} />
-            <MediaDropdownMenu nodeType={FilePlugin.key} />
+            <MediaToolbarButton nodeType={ImagePlugin.key} />
+            <MediaToolbarButton nodeType={VideoPlugin.key} />
+            <MediaToolbarButton nodeType={AudioPlugin.key} />
+            <MediaToolbarButton nodeType={FilePlugin.key} />
           </ToolbarGroup>
 
           <ToolbarGroup>
diff --git a/apps/www/src/registry/default/plate-ui/alert-dialog.tsx b/apps/www/src/registry/default/plate-ui/alert-dialog.tsx
new file mode 100644
index 0000000000..12708cf55b
--- /dev/null
+++ b/apps/www/src/registry/default/plate-ui/alert-dialog.tsx
@@ -0,0 +1,142 @@
+'use client';
+
+import * as React from 'react';
+
+import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
+import { cn } from '@udecode/cn';
+
+import { buttonVariants } from './button';
+
+const AlertDialog = AlertDialogPrimitive.Root;
+
+const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
+
+const AlertDialogPortal = AlertDialogPrimitive.Portal;
+
+const AlertDialogOverlay = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Overlay
+    className={cn(
+      'fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+      className
+    )}
+    {...props}
+    ref={ref}
+  />
+));
+AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
+
+const AlertDialogContent = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPortal>
+    <AlertDialogOverlay />
+    <AlertDialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
+        className
+      )}
+      {...props}
+    />
+  </AlertDialogPortal>
+));
+AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
+
+const AlertDialogHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      'flex flex-col space-y-2 text-center sm:text-left',
+      className
+    )}
+    {...props}
+  />
+);
+AlertDialogHeader.displayName = 'AlertDialogHeader';
+
+const AlertDialogFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2',
+      className
+    )}
+    {...props}
+  />
+);
+AlertDialogFooter.displayName = 'AlertDialogFooter';
+
+const AlertDialogTitle = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Title
+    ref={ref}
+    className={cn('text-lg font-semibold', className)}
+    {...props}
+  />
+));
+AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
+
+const AlertDialogDescription = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Description
+    ref={ref}
+    className={cn('text-sm text-muted-foreground', className)}
+    {...props}
+  />
+));
+AlertDialogDescription.displayName =
+  AlertDialogPrimitive.Description.displayName;
+
+const AlertDialogAction = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Action>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Action
+    ref={ref}
+    className={cn(buttonVariants(), className)}
+    {...props}
+  />
+));
+AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
+
+const AlertDialogCancel = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Cancel
+    ref={ref}
+    className={cn(
+      buttonVariants({ variant: 'outline' }),
+      'mt-2 sm:mt-0',
+      className
+    )}
+    {...props}
+  />
+));
+AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
+
+export {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogOverlay,
+  AlertDialogPortal,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+};
diff --git a/apps/www/src/registry/default/plate-ui/fixed-toolbar-buttons.tsx b/apps/www/src/registry/default/plate-ui/fixed-toolbar-buttons.tsx
index 755a5d42c1..05c84b4f11 100644
--- a/apps/www/src/registry/default/plate-ui/fixed-toolbar-buttons.tsx
+++ b/apps/www/src/registry/default/plate-ui/fixed-toolbar-buttons.tsx
@@ -32,7 +32,6 @@ import {
   HighlighterIcon,
   ItalicIcon,
   KeyboardIcon,
-  MoreHorizontalIcon,
   PaintBucketIcon,
   SparklesIcon,
   StrikethroughIcon,
@@ -60,12 +59,13 @@ import { InsertDropdownMenu } from './insert-dropdown-menu';
 import { LineHeightDropdownMenu } from './line-height-dropdown-menu';
 import { LinkToolbarButton } from './link-toolbar-button';
 import { MarkToolbarButton } from './mark-toolbar-button';
-import { MediaDropdownMenu } from './media-dropdown-menu';
+import { MediaToolbarButton } from './media-toolbar-button';
 import { ModeDropdownMenu } from './mode-dropdown-menu';
+import { MoreToolbarButton } from './more-toolbar-button';
 import { OutdentToolbarButton } from './outdent-toolbar-button';
 import { TableDropdownMenu } from './table-dropdown-menu';
 import { ToggleToolbarButton } from './toggle-toolbar-button';
-import { ToolbarButton, ToolbarGroup } from './toolbar';
+import { ToolbarGroup } from './toolbar';
 import { TurnIntoDropdownMenu } from './turn-into-dropdown-menu';
 
 export function FixedToolbarButtons() {
@@ -177,8 +177,8 @@ function PrimaryButtons({ expanded }: { expanded: boolean }) {
           </ToolbarGroup>
 
           <ToolbarGroup>
-            <MediaDropdownMenu nodeType={ImagePlugin.key} />
-            <MediaDropdownMenu nodeType={VideoPlugin.key} />
+            <MediaToolbarButton nodeType={ImagePlugin.key} />
+            <MediaToolbarButton nodeType={VideoPlugin.key} />
           </ToolbarGroup>
         </>
       )}
@@ -189,9 +189,7 @@ function PrimaryButtons({ expanded }: { expanded: boolean }) {
         <CommentToolbarButton />
         <ModeDropdownMenu />
         <AccordionTrigger className="p-0" hideIcon>
-          <ToolbarButton pressed={expanded} tooltip="More">
-            <MoreHorizontalIcon />
-          </ToolbarButton>
+          <MoreToolbarButton pressed={expanded} tooltip="More" />
         </AccordionTrigger>
       </ToolbarGroup>
     </div>
@@ -208,8 +206,8 @@ function ExpandedButtons() {
       </ToolbarGroup>
 
       <ToolbarGroup>
-        <MediaDropdownMenu nodeType={AudioPlugin.key} />
-        <MediaDropdownMenu nodeType={FilePlugin.key} />
+        <MediaToolbarButton nodeType={AudioPlugin.key} />
+        <MediaToolbarButton nodeType={FilePlugin.key} />
       </ToolbarGroup>
 
       <ToolbarGroup>
diff --git a/apps/www/src/registry/default/plate-ui/fixed-toolbar-list-buttons.tsx b/apps/www/src/registry/default/plate-ui/fixed-toolbar-list-buttons.tsx
index 82dfacc65f..ecf414477d 100644
--- a/apps/www/src/registry/default/plate-ui/fixed-toolbar-list-buttons.tsx
+++ b/apps/www/src/registry/default/plate-ui/fixed-toolbar-list-buttons.tsx
@@ -46,9 +46,7 @@ import { LinkToolbarButton } from './link-toolbar-button';
 import { ListIndentToolbarButton } from './list-indent-toolbar-button';
 import { ListToolbarButton } from './list-toolbar-button';
 import { MarkToolbarButton } from './mark-toolbar-button';
-import { MediaDropdownMenu } from './media-dropdown-menu';
-
-// import { MediaToolbarButton } from './media-toolbar-button';
+import { MediaToolbarButton } from './media-toolbar-button';
 import { ModeDropdownMenu } from './mode-dropdown-menu';
 import { MoreDropdownMenu } from './more-dropdown-menu';
 import { TableDropdownMenu } from './table-dropdown-menu';
@@ -135,10 +133,10 @@ export function FixedToolbarListButtons() {
           </ToolbarGroup>
 
           <ToolbarGroup>
-            <MediaDropdownMenu nodeType={ImagePlugin.key} />
-            <MediaDropdownMenu nodeType={VideoPlugin.key} />
-            <MediaDropdownMenu nodeType={AudioPlugin.key} />
-            <MediaDropdownMenu nodeType={FilePlugin.key} />
+            <MediaToolbarButton nodeType={ImagePlugin.key} />
+            <MediaToolbarButton nodeType={VideoPlugin.key} />
+            <MediaToolbarButton nodeType={AudioPlugin.key} />
+            <MediaToolbarButton nodeType={FilePlugin.key} />
           </ToolbarGroup>
 
           <ToolbarGroup>
diff --git a/apps/www/src/registry/default/plate-ui/input.tsx b/apps/www/src/registry/default/plate-ui/input.tsx
index 42119f710f..2ec6d63e58 100644
--- a/apps/www/src/registry/default/plate-ui/input.tsx
+++ b/apps/www/src/registry/default/plate-ui/input.tsx
@@ -17,6 +17,7 @@ export const inputVariants = cva(
         default:
           'border border-input ring-offset-background focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
         ghost: 'border-none focus-visible:ring-transparent',
+        underline: 'rounded-none border-b border-input',
       },
     },
   }
diff --git a/apps/www/src/registry/default/plate-ui/media-embed-popover.tsx b/apps/www/src/registry/default/plate-ui/media-embed-popover.tsx
deleted file mode 100644
index 8c2495abf0..0000000000
--- a/apps/www/src/registry/default/plate-ui/media-embed-popover.tsx
+++ /dev/null
@@ -1,113 +0,0 @@
-'use client';
-
-import React, { useCallback, useMemo, useState } from 'react';
-
-import { focusEditor } from '@udecode/plate-common/react';
-import { useEditorPlugin } from '@udecode/plate-core/react';
-import { insertImage } from '@udecode/plate-media';
-import {
-  AudioPlugin,
-  FilePlugin,
-  ImagePlugin,
-  MediaEmbedPlugin,
-  VideoPlugin,
-} from '@udecode/plate-media/react';
-import { AudioLinesIcon, FileUpIcon, FilmIcon, ImageIcon } from 'lucide-react';
-
-import { Button } from './button';
-import { Input } from './input';
-import { Popover, PopoverAnchor, PopoverContent } from './popover';
-import { Separator } from './separator';
-
-const MEDIA_CONFIG: Record<
-  string,
-  {
-    icon: React.ReactNode;
-    placeholder: string;
-  }
-> = {
-  [AudioPlugin.key]: {
-    icon: <AudioLinesIcon className="size-4" />,
-    placeholder: 'https://example.com/audio.mp3',
-  },
-  [FilePlugin.key]: {
-    icon: <FileUpIcon className="size-4" />,
-    placeholder: 'https://example.com/file.pdf',
-  },
-  [ImagePlugin.key]: {
-    icon: <ImageIcon className="size-4" />,
-    placeholder: 'https://example.com/image.jpg',
-  },
-  [VideoPlugin.key]: {
-    icon: <FilmIcon className="size-4" />,
-    placeholder: 'https://example.com/video.mp4',
-  },
-};
-
-interface MediaEmbedPopoverProps {
-  children: React.ReactNode;
-  isOpen: boolean;
-  mediaType: string;
-  onOpenChange: (open: boolean) => void;
-}
-
-export function MediaEmbedPopover({
-  children,
-  isOpen,
-  mediaType,
-  onOpenChange,
-}: MediaEmbedPopoverProps) {
-  const { editor } = useEditorPlugin(MediaEmbedPlugin);
-  const [url, setUrl] = useState('');
-
-  const embedMedia = useCallback(() => {
-    insertImage(editor, url);
-    focusEditor(editor);
-    onOpenChange(false);
-  }, [editor, url, onOpenChange]);
-
-  const mediaConfig = useMemo(() => {
-    if (!mediaType) return null;
-
-    return MEDIA_CONFIG[mediaType];
-  }, [mediaType]);
-
-  return (
-    <Popover open={isOpen} onOpenChange={onOpenChange} modal={false}>
-      <PopoverAnchor>{children}</PopoverAnchor>
-
-      <PopoverContent className="w-auto p-1" align="center" side="bottom">
-        <div className="flex w-[330px] flex-col">
-          <div className="flex items-center">
-            <div className="flex items-center pl-2 pr-1">
-              {mediaConfig?.icon}
-            </div>
-            <Input
-              variant="ghost"
-              value={url}
-              onChange={(e) => setUrl(e.target.value)}
-              onKeyDown={(e) => {
-                if (e.key === 'Enter') embedMedia();
-              }}
-              placeholder={mediaConfig?.placeholder}
-              h="sm"
-            />
-          </div>
-          <Separator className="my-1" />
-          <div className="flex items-center justify-end gap-2 pt-2">
-            <Button
-              size="sm"
-              variant="secondary"
-              onClick={() => onOpenChange(false)}
-            >
-              Cancel
-            </Button>
-            <Button size="sm" variant="default" onClick={embedMedia}>
-              Accept
-            </Button>
-          </div>
-        </div>
-      </PopoverContent>
-    </Popover>
-  );
-}
diff --git a/apps/www/src/registry/default/plate-ui/media-dropdown-menu.tsx b/apps/www/src/registry/default/plate-ui/media-toolbar-button.tsx
similarity index 52%
rename from apps/www/src/registry/default/plate-ui/media-dropdown-menu.tsx
rename to apps/www/src/registry/default/plate-ui/media-toolbar-button.tsx
index 5cebd7e2ce..013103bf7a 100644
--- a/apps/www/src/registry/default/plate-ui/media-dropdown-menu.tsx
+++ b/apps/www/src/registry/default/plate-ui/media-toolbar-button.tsx
@@ -1,18 +1,18 @@
 'use client';
 
-import React, { useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 
 import type { DropdownMenuProps } from '@radix-ui/react-dropdown-menu';
 
 import { cn } from '@udecode/cn';
-import { useEditorPlugin } from '@udecode/plate-core/react';
+import { useEditorRef } from '@udecode/plate-core/react';
 import {
   AudioPlugin,
   FilePlugin,
   ImagePlugin,
-  MediaEmbedPlugin,
   VideoPlugin,
 } from '@udecode/plate-media/react';
+import { insertNodes } from '@udecode/slate';
 import { focusEditor } from '@udecode/slate-react';
 import {
   AudioLinesIcon,
@@ -23,6 +23,16 @@ import {
 } from 'lucide-react';
 import { useFilePicker } from 'use-file-picker';
 
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from './alert-dialog';
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -31,52 +41,62 @@ import {
   DropdownMenuTrigger,
   useOpenState,
 } from './dropdown-menu';
-import { MediaEmbedPopover } from './media-embed-popover';
+import { Input } from './input';
 import {
   ToolbarSplitButton,
   ToolbarSplitButtonPrimary,
   ToolbarSplitButtonSecondary,
 } from './toolbar';
-
 const MEDIA_CONFIG: Record<
   string,
   {
     accept: string[];
     icon: React.ReactNode;
+    placeholder: string;
+    title: string;
     tooltip: string;
   }
 > = {
   [AudioPlugin.key]: {
     accept: ['audio/*'],
     icon: <AudioLinesIcon className="size-4" />,
+    placeholder: 'https://example.com/audio.mp3',
+    title: 'Insert Audio',
     tooltip: 'Audio',
   },
   [FilePlugin.key]: {
     accept: ['*'],
     icon: <FileUpIcon className="size-4" />,
+    placeholder: 'https://example.com/file.pdf',
+    title: 'Insert File',
     tooltip: 'File',
   },
   [ImagePlugin.key]: {
     accept: ['image/*'],
     icon: <ImageIcon className="size-4" />,
+    placeholder: 'https://example.com/image.jpg',
+    title: 'Insert Image',
     tooltip: 'Image',
   },
   [VideoPlugin.key]: {
     accept: ['video/*'],
     icon: <FilmIcon className="size-4" />,
+    placeholder: 'https://example.com/video.mp4',
+    title: 'Insert Video',
     tooltip: 'Video',
   },
 };
 
-export function MediaDropdownMenu({
+export function MediaToolbarButton({
   children,
   nodeType,
   ...props
 }: DropdownMenuProps & { nodeType: string }) {
-  const { editor } = useEditorPlugin(MediaEmbedPlugin);
-  const [isPopoverOpen, setIsPopoverOpen] = useState(false);
-
   const currentConfig = MEDIA_CONFIG[nodeType];
+
+  const editor = useEditorRef();
+  const openState = useOpenState();
+
   const { openFilePicker } = useFilePicker({
     accept: currentConfig.accept,
     multiple: true,
@@ -85,20 +105,36 @@ export function MediaDropdownMenu({
     },
   });
 
-  const openState = useOpenState();
+  const [dialogOpen, setDialogOpen] = useState(false);
+
+  const [url, setUrl] = useState('');
+
+  const embedMedia = useCallback(() => {
+    setDialogOpen(false);
+    insertNodes(editor, {
+      children: [{ text: '' }],
+      name: nodeType === FilePlugin.key ? url.split('/').pop() : undefined,
+      type: nodeType,
+      url,
+    });
+  }, [editor, nodeType, url]);
+
+  useEffect(() => {
+    if (!dialogOpen) {
+      focusEditor(editor);
+      setUrl('');
+    }
+  }, [dialogOpen, editor]);
 
   return (
-    <MediaEmbedPopover
-      onOpenChange={setIsPopoverOpen}
-      isOpen={isPopoverOpen}
-      mediaType={nodeType}
-    >
+    <>
       <DropdownMenu {...openState} modal={false} {...props}>
-        <ToolbarSplitButton
-          pressed={openState.open}
-          tooltip={currentConfig.tooltip}
-        >
-          <ToolbarSplitButtonPrimary onClick={() => openFilePicker()}>
+        <ToolbarSplitButton pressed={openState.open}>
+          <ToolbarSplitButtonPrimary
+            onClick={() => openFilePicker()}
+            onMouseDown={(e) => e.preventDefault()}
+            tooltip={currentConfig.tooltip}
+          >
             {currentConfig.icon}
           </ToolbarSplitButtonPrimary>
 
@@ -124,10 +160,7 @@ export function MediaDropdownMenu({
             </DropdownMenuRadioItem>
             <DropdownMenuRadioItem
               value="url"
-              onSelect={() => {
-                focusEditor(editor);
-                setIsPopoverOpen(true);
-              }}
+              onSelect={() => setDialogOpen(true)}
               hideIcon
             >
               <div className="flex items-center gap-2">
@@ -138,6 +171,34 @@ export function MediaDropdownMenu({
           </DropdownMenuRadioGroup>
         </DropdownMenuContent>
       </DropdownMenu>
-    </MediaEmbedPopover>
+
+      <AlertDialog open={dialogOpen} onOpenChange={setDialogOpen}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>{currentConfig.title}</AlertDialogTitle>
+            <AlertDialogDescription className="flex items-center gap-2">
+              {currentConfig.icon}
+              <Input
+                variant="underline"
+                value={url}
+                onChange={(e) => setUrl(e.target.value)}
+                onKeyDown={(e) => {
+                  if (e.key === 'Enter') embedMedia();
+                }}
+                placeholder={currentConfig.placeholder}
+                h="sm"
+                autoFocus
+              />
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>CANCEL</AlertDialogCancel>
+            <AlertDialogAction onClick={embedMedia}>
+              {currentConfig.title.toUpperCase()}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </>
   );
 }
diff --git a/apps/www/src/registry/default/plate-ui/more-toolbar-button.tsx b/apps/www/src/registry/default/plate-ui/more-toolbar-button.tsx
new file mode 100644
index 0000000000..d0770e9717
--- /dev/null
+++ b/apps/www/src/registry/default/plate-ui/more-toolbar-button.tsx
@@ -0,0 +1,27 @@
+import { cn } from '@udecode/cn';
+import { MoreHorizontalIcon } from 'lucide-react';
+
+import { buttonVariants } from './button';
+import { withTooltip } from './tooltip';
+
+export const MoreToolbarButton = withTooltip(function MoreToolbarButton({
+  className,
+  pressed,
+  ...props
+}: {
+  pressed: boolean;
+  className?: string;
+}) {
+  return (
+    <span
+      className={cn(
+        buttonVariants({ variant: 'ghost' }),
+        pressed && 'bg-muted text-muted-foreground',
+        className
+      )}
+      {...props}
+    >
+      <MoreHorizontalIcon className="size-4" />
+    </span>
+  );
+});
diff --git a/apps/www/src/registry/default/plate-ui/toolbar.tsx b/apps/www/src/registry/default/plate-ui/toolbar.tsx
index 90b95ba4fd..126cd99e25 100644
--- a/apps/www/src/registry/default/plate-ui/toolbar.tsx
+++ b/apps/www/src/registry/default/plate-ui/toolbar.tsx
@@ -182,32 +182,34 @@ export const ToolbarSplitButton = React.forwardRef<
   );
 });
 
-export const ToolbarSplitButtonPrimary = React.forwardRef<
-  React.ElementRef<typeof ToolbarToggleItem>,
-  {
-    className?: string;
-    size?: 'default' | 'lg' | 'sm';
-    variant?: 'default' | 'outline';
-  } & Omit<React.ComponentPropsWithoutRef<typeof ToolbarToggleItem>, 'value'>
->(({ children, className, size, variant, ...props }, ref) => {
-  return (
-    <span
-      ref={ref}
-      className={cn(
-        className,
-        toolbarButtonVariants({
-          size,
-          variant,
-        }),
-        'rounded-r-none',
-        'group-data-[pressed=true]:bg-accent group-data-[pressed=true]:text-accent-foreground'
-      )}
-      {...props}
-    >
-      {children}
-    </span>
-  );
-});
+export const ToolbarSplitButtonPrimary = withTooltip(
+  React.forwardRef<
+    React.ElementRef<typeof ToolbarToggleItem>,
+    {
+      className?: string;
+      size?: 'default' | 'lg' | 'sm';
+      variant?: 'default' | 'outline';
+    } & Omit<React.ComponentPropsWithoutRef<typeof ToolbarToggleItem>, 'value'>
+  >(({ children, className, size, variant, ...props }, ref) => {
+    return (
+      <span
+        ref={ref}
+        className={cn(
+          className,
+          toolbarButtonVariants({
+            size,
+            variant,
+          }),
+          'rounded-r-none',
+          'group-data-[pressed=true]:bg-accent group-data-[pressed=true]:text-accent-foreground'
+        )}
+        {...props}
+      >
+        {children}
+      </span>
+    );
+  })
+);
 
 export const ToolbarSplitButtonSecondary = React.forwardRef<
   HTMLButtonElement,
diff --git a/apps/www/src/registry/registry-ui.ts b/apps/www/src/registry/registry-ui.ts
index 78dbb00bcc..83530d89bd 100644
--- a/apps/www/src/registry/registry-ui.ts
+++ b/apps/www/src/registry/registry-ui.ts
@@ -679,8 +679,8 @@ import { withDraggables } from './withDraggables';`,
       docs: [{ route: '/docs/media', title: 'Media' }],
       examples: ['media-demo', 'upload-pro'],
     },
-    files: ['plate-ui/media-dropdown-menu.tsx'],
-    name: 'media-dropdown-menu',
+    files: ['plate-ui/media-toolbar-button.tsx'],
+    name: 'media-toolbar-button',
     registryDependencies: ['toolbar'],
     type: 'registry:ui',
   },

From f7a0e3086dbab709ec31b30896da83c5d877f1a4 Mon Sep 17 00:00:00 2001
From: Felix Feng <felixfeng33@gmail.com>
Date: Sat, 16 Nov 2024 17:44:56 +0800
Subject: [PATCH 31/34] fix

---
 apps/www/src/registry/default/plate-ui/alert-dialog.tsx | 2 +-
 yarn.lock                                               | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/apps/www/src/registry/default/plate-ui/alert-dialog.tsx b/apps/www/src/registry/default/plate-ui/alert-dialog.tsx
index 12708cf55b..cbe026298b 100644
--- a/apps/www/src/registry/default/plate-ui/alert-dialog.tsx
+++ b/apps/www/src/registry/default/plate-ui/alert-dialog.tsx
@@ -37,7 +37,7 @@ const AlertDialogContent = React.forwardRef<
     <AlertDialogPrimitive.Content
       ref={ref}
       className={cn(
-        'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
+        'fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
         className
       )}
       {...props}
diff --git a/yarn.lock b/yarn.lock
index db84f59d5b..d677b7033f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6203,7 +6203,7 @@ __metadata:
   resolution: "@udecode/plate-ai@workspace:packages/ai"
   dependencies:
     "@udecode/plate-combobox": "npm:40.0.0"
-    "@udecode/plate-markdown": "npm:40.0.4"
+    "@udecode/plate-markdown": "npm:40.0.5"
     "@udecode/plate-selection": "npm:40.0.0"
     ai: "npm:^3.4.10"
     lodash: "npm:^4.17.21"
@@ -6909,7 +6909,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@udecode/plate-markdown@npm:40.0.4, @udecode/plate-markdown@workspace:^, @udecode/plate-markdown@workspace:packages/markdown":
+"@udecode/plate-markdown@npm:40.0.5, @udecode/plate-markdown@workspace:^, @udecode/plate-markdown@workspace:packages/markdown":
   version: 0.0.0-use.local
   resolution: "@udecode/plate-markdown@workspace:packages/markdown"
   dependencies:
@@ -7300,7 +7300,7 @@ __metadata:
     "@udecode/plate-line-height": "npm:40.0.0"
     "@udecode/plate-link": "npm:40.0.0"
     "@udecode/plate-list": "npm:40.0.0"
-    "@udecode/plate-markdown": "npm:40.0.4"
+    "@udecode/plate-markdown": "npm:40.0.5"
     "@udecode/plate-media": "npm:40.0.0"
     "@udecode/plate-mention": "npm:40.0.0"
     "@udecode/plate-node-id": "npm:40.0.0"

From aa0b2aa7173491563bae2791058ed2fcebd3de88 Mon Sep 17 00:00:00 2001
From: Felix Feng <felixfeng33@gmail.com>
Date: Sat, 16 Nov 2024 18:04:03 +0800
Subject: [PATCH 32/34] fix

---
 apps/www/src/lib/plate/create-plate-ui.ts      | 2 ++
 packages/cli/src/utils/registry/index.d.ts.map | 2 +-
 packages/cli/src/utils/registry/index.js       | 6 +++++-
 3 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/apps/www/src/lib/plate/create-plate-ui.ts b/apps/www/src/lib/plate/create-plate-ui.ts
index ab51e7584c..0bd933c728 100644
--- a/apps/www/src/lib/plate/create-plate-ui.ts
+++ b/apps/www/src/lib/plate/create-plate-ui.ts
@@ -1,3 +1,5 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-nocheck
 import { withProps } from '@udecode/cn';
 import { AIPlugin } from '@udecode/plate-ai/react';
 import {
diff --git a/packages/cli/src/utils/registry/index.d.ts.map b/packages/cli/src/utils/registry/index.d.ts.map
index ca81133224..2d78a1f959 100644
--- a/packages/cli/src/utils/registry/index.d.ts.map
+++ b/packages/cli/src/utils/registry/index.d.ts.map
@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAA;AAMpD,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAA;AAKvB,OAAO,EACL,KAAK,sBAAsB,EAE3B,mBAAmB,EACnB,kBAAkB,EAGnB,MAAM,6BAA6B,CAAA;AAIpC,eAAO,MAAM,YAAY,QAC8B,CAAA;AAErD,eAAO,MAAM,YAAY;;;;CAIxB,CAAC;AAMJ,wBAAsB,gBAAgB,CAAC,WAAW,CAAC,EAAE,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;iBAS1D;AAED,wBAAsB,iBAAiB,CAAC,WAAW,CAAC,EAAE,MAAM;;;KAU3D;AAED,wBAAsB,eAAe,CACnC,IAAI,EAAE,MAAM,EACZ,KAAK,EAAE,MAAM,EACb,WAAW,CAAC,EAAE,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;UAerB;AAED,wBAAsB,qBAAqB;;;KAuB1C;AAED,wBAAsB,oBAAoB,CAAC,SAAS,EAAE,MAAM;;;;;;;;;;;eAQ3D;AAED,wBAAsB,WAAW,CAC/B,KAAK,EAAE,CAAC,CAAC,KAAK,CAAC,OAAO,mBAAmB,CAAC,EAC1C,KAAK,EAAE,MAAM,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;KAuBhB;AAED,wBAAsB,SAAS,CAC7B,KAAK,EAAE,MAAM,EACb,IAAI,EAAE,CAAC,CAAC,KAAK,CAAC,OAAO,mBAAmB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;iBAS1C;AAED,wBAAsB,iBAAiB,CACrC,MAAM,EAAE,MAAM,EACd,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,kBAAkB,CAAC,EAAE,MAAM,CAAC,EACtD,QAAQ,CAAC,EAAE,MAAM,0BAmBlB;AAED,wBAAsB,aAAa,CACjC,KAAK,EAAE,MAAM,EAAE,EACf,WAAW,CAAC,EAAE,MAAM,EACpB,YAAY,CAAC,EAAE,OAAO,sBA+DvB;AAED,wBAAgB,6BAA6B,CAC3C,IAAI,EAAE,CAAC,CAAC,KAAK,CAAC,OAAO,sBAAsB,CAAC,EAC5C,MAAM,EAAE,MAAM,EACd,QAAQ,CAAC,EAAE,MAAM,UA6BlB;AAED,wBAAsB,wBAAwB,CAC5C,KAAK,EAAE,CAAC,CAAC,KAAK,CAAC,OAAO,kBAAkB,CAAC,CAAC,MAAM,CAAC,EAAE,EACnD,MAAM,EAAE,MAAM;;;;;;;;;;;;;;;;;;;;;UA4Ef;AA2CD,wBAAsB,gBAAgB,CAAC,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM;;;;;;;;;;;;;;;;;;;;;;;UAkDlE;AA0BD,wBAAsB,gBAAgB,CACpC,aAAa,EAAE,MAAM,EACrB,WAAW,CAAC,EAAE,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwBrB"}
\ No newline at end of file
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAA;AAMpD,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAA;AAKvB,OAAO,EACL,KAAK,sBAAsB,EAE3B,mBAAmB,EACnB,kBAAkB,EAGnB,MAAM,6BAA6B,CAAA;AAIpC,eAAO,MAAM,YAAY,QAC8B,CAAA;AAErD,eAAO,MAAM,YAAY;;;;CAIxB,CAAC;AAMJ,wBAAsB,gBAAgB,CAAC,WAAW,CAAC,EAAE,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;iBAS1D;AAED,wBAAsB,iBAAiB,CAAC,WAAW,CAAC,EAAE,MAAM;;;KAU3D;AAED,wBAAsB,eAAe,CACnC,IAAI,EAAE,MAAM,EACZ,KAAK,EAAE,MAAM,EACb,WAAW,CAAC,EAAE,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;UAerB;AAED,wBAAsB,qBAAqB;;;KAuB1C;AAED,wBAAsB,oBAAoB,CAAC,SAAS,EAAE,MAAM;;;;;;;;;;;eAQ3D;AAED,wBAAsB,WAAW,CAC/B,KAAK,EAAE,CAAC,CAAC,KAAK,CAAC,OAAO,mBAAmB,CAAC,EAC1C,KAAK,EAAE,MAAM,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;KAuBhB;AAED,wBAAsB,SAAS,CAC7B,KAAK,EAAE,MAAM,EACb,IAAI,EAAE,CAAC,CAAC,KAAK,CAAC,OAAO,mBAAmB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;iBAS1C;AAED,wBAAsB,iBAAiB,CACrC,MAAM,EAAE,MAAM,EACd,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,kBAAkB,CAAC,EAAE,MAAM,CAAC,EACtD,QAAQ,CAAC,EAAE,MAAM,0BAmBlB;AAED,wBAAsB,aAAa,CACjC,KAAK,EAAE,MAAM,EAAE,EACf,WAAW,CAAC,EAAE,MAAM,EACpB,YAAY,CAAC,EAAE,OAAO,sBAyEvB;AAED,wBAAgB,6BAA6B,CAC3C,IAAI,EAAE,CAAC,CAAC,KAAK,CAAC,OAAO,sBAAsB,CAAC,EAC5C,MAAM,EAAE,MAAM,EACd,QAAQ,CAAC,EAAE,MAAM,UA6BlB;AAED,wBAAsB,wBAAwB,CAC5C,KAAK,EAAE,CAAC,CAAC,KAAK,CAAC,OAAO,kBAAkB,CAAC,CAAC,MAAM,CAAC,EAAE,EACnD,MAAM,EAAE,MAAM;;;;;;;;;;;;;;;;;;;;;UA4Ef;AA4CD,wBAAsB,gBAAgB,CAAC,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM;;;;;;;;;;;;;;;;;;;;;;;UAkDlE;AA0BD,wBAAsB,gBAAgB,CACpC,aAAa,EAAE,MAAM,EACrB,WAAW,CAAC,EAAE,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwBrB"}
\ No newline at end of file
diff --git a/packages/cli/src/utils/registry/index.js b/packages/cli/src/utils/registry/index.js
index 8991f7dec8..1af669dc3c 100644
--- a/packages/cli/src/utils/registry/index.js
+++ b/packages/cli/src/utils/registry/index.js
@@ -290,7 +290,7 @@ function fetchRegistry(paths, registryUrl, ignoreErrors) {
                 case 0:
                     _a.trys.push([0, 2, , 3]);
                     return [4 /*yield*/, Promise.all(paths.map(function (path) { return __awaiter(_this, void 0, void 0, function () {
-                            var url, response, errorMessages, result, message;
+                            var url, response, errorMessages, contentType, result, message;
                             return __generator(this, function (_a) {
                                 switch (_a.label) {
                                     case 0:
@@ -315,6 +315,10 @@ function fetchRegistry(paths, registryUrl, ignoreErrors) {
                                         if (response.status === 403) {
                                             throw new Error("You do not have access to the component at ".concat(highlighter_1.highlighter.info(url), ".\nIf this is a remote registry, you may need to authenticate or a token."));
                                         }
+                                        contentType = response.headers.get("content-type");
+                                        if (!(contentType === null || contentType === void 0 ? void 0 : contentType.includes("application/json"))) {
+                                            throw new Error("Invalid response from ".concat(highlighter_1.highlighter.info(url), "."));
+                                        }
                                         return [4 /*yield*/, response.json()];
                                     case 2:
                                         result = _a.sent();

From b4230beb546195b80fc4e3234bfdd69bf5297f83 Mon Sep 17 00:00:00 2001
From: Felix Feng <felixfeng33@gmail.com>
Date: Sun, 17 Nov 2024 09:19:54 +0800
Subject: [PATCH 33/34] revert

---
 .../plate-ui/fixed-toolbar-buttons.tsx        | 115 +++++++-----------
 .../default/plate-ui/media-toolbar-button.tsx |  42 +++----
 2 files changed, 65 insertions(+), 92 deletions(-)

diff --git a/apps/www/src/registry/default/plate-ui/fixed-toolbar-buttons.tsx b/apps/www/src/registry/default/plate-ui/fixed-toolbar-buttons.tsx
index 05c84b4f11..05db5ba4b6 100644
--- a/apps/www/src/registry/default/plate-ui/fixed-toolbar-buttons.tsx
+++ b/apps/www/src/registry/default/plate-ui/fixed-toolbar-buttons.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import React, { useState } from 'react';
+import React from 'react';
 
 import {
   BoldPlugin,
@@ -11,7 +11,7 @@ import {
   SuperscriptPlugin,
   UnderlinePlugin,
 } from '@udecode/plate-basic-marks/react';
-import { useEditorReadOnly } from '@udecode/plate-common/react';
+import { useEditorReadOnly } from '@udecode/plate-core/react';
 import {
   FontBackgroundColorPlugin,
   FontColorPlugin,
@@ -40,12 +40,6 @@ import {
   UnderlineIcon,
 } from 'lucide-react';
 
-import {
-  Accordion,
-  AccordionContent,
-  AccordionItem,
-  AccordionTrigger,
-} from './accordion';
 import { AIToolbarButton } from './ai-toolbar-button';
 import { AlignDropdownMenu } from './align-dropdown-menu';
 import { ColorDropdownMenu } from './color-dropdown-menu';
@@ -61,7 +55,6 @@ import { LinkToolbarButton } from './link-toolbar-button';
 import { MarkToolbarButton } from './mark-toolbar-button';
 import { MediaToolbarButton } from './media-toolbar-button';
 import { ModeDropdownMenu } from './mode-dropdown-menu';
-import { MoreToolbarButton } from './more-toolbar-button';
 import { OutdentToolbarButton } from './outdent-toolbar-button';
 import { TableDropdownMenu } from './table-dropdown-menu';
 import { ToggleToolbarButton } from './toggle-toolbar-button';
@@ -69,27 +62,6 @@ import { ToolbarGroup } from './toolbar';
 import { TurnIntoDropdownMenu } from './turn-into-dropdown-menu';
 
 export function FixedToolbarButtons() {
-  const [value, setValue] = useState('');
-  const expanded = value === 'toolbar';
-
-  return (
-    <Accordion
-      className="w-full"
-      onValueChange={setValue}
-      type="single"
-      collapsible
-    >
-      <AccordionItem className="border-b-0" value="toolbar">
-        <PrimaryButtons expanded={expanded} />
-        <AccordionContent className="p-0">
-          <ExpandedButtons />
-        </AccordionContent>
-      </AccordionItem>
-    </Accordion>
-  );
-}
-
-function PrimaryButtons({ expanded }: { expanded: boolean }) {
   const readOnly = useEditorReadOnly();
 
   return (
@@ -180,6 +152,47 @@ function PrimaryButtons({ expanded }: { expanded: boolean }) {
             <MediaToolbarButton nodeType={ImagePlugin.key} />
             <MediaToolbarButton nodeType={VideoPlugin.key} />
           </ToolbarGroup>
+
+          <ToolbarGroup>
+            <LineHeightDropdownMenu />
+            <OutdentToolbarButton />
+            <IndentToolbarButton />
+          </ToolbarGroup>
+
+          <ToolbarGroup>
+            <MediaToolbarButton nodeType={AudioPlugin.key} />
+            <MediaToolbarButton nodeType={FilePlugin.key} />
+          </ToolbarGroup>
+
+          <ToolbarGroup>
+            <MarkToolbarButton
+              nodeType={HighlightPlugin.key}
+              tooltip="Highlight"
+            >
+              <HighlighterIcon />
+            </MarkToolbarButton>
+
+            <MarkToolbarButton
+              nodeType={KbdPlugin.key}
+              tooltip="Keyboard input"
+            >
+              <KeyboardIcon />
+            </MarkToolbarButton>
+
+            <MarkToolbarButton
+              nodeType={SuperscriptPlugin.key}
+              tooltip="Superscript"
+            >
+              <SuperscriptIcon />
+            </MarkToolbarButton>
+
+            <MarkToolbarButton
+              nodeType={SubscriptPlugin.key}
+              tooltip="Subscript"
+            >
+              <SubscriptIcon />
+            </MarkToolbarButton>
+          </ToolbarGroup>
         </>
       )}
 
@@ -188,47 +201,7 @@ function PrimaryButtons({ expanded }: { expanded: boolean }) {
       <ToolbarGroup>
         <CommentToolbarButton />
         <ModeDropdownMenu />
-        <AccordionTrigger className="p-0" hideIcon>
-          <MoreToolbarButton pressed={expanded} tooltip="More" />
-        </AccordionTrigger>
-      </ToolbarGroup>
-    </div>
-  );
-}
-
-function ExpandedButtons() {
-  return (
-    <div className="mt-1 flex w-full">
-      <ToolbarGroup>
-        <LineHeightDropdownMenu />
-        <OutdentToolbarButton />
-        <IndentToolbarButton />
-      </ToolbarGroup>
-
-      <ToolbarGroup>
-        <MediaToolbarButton nodeType={AudioPlugin.key} />
-        <MediaToolbarButton nodeType={FilePlugin.key} />
-      </ToolbarGroup>
-
-      <ToolbarGroup>
-        <MarkToolbarButton nodeType={HighlightPlugin.key} tooltip="Highlight">
-          <HighlighterIcon />
-        </MarkToolbarButton>
-
-        <MarkToolbarButton nodeType={KbdPlugin.key} tooltip="Keyboard input">
-          <KeyboardIcon />
-        </MarkToolbarButton>
-
-        <MarkToolbarButton
-          nodeType={SuperscriptPlugin.key}
-          tooltip="Superscript"
-        >
-          <SuperscriptIcon />
-        </MarkToolbarButton>
-
-        <MarkToolbarButton nodeType={SubscriptPlugin.key} tooltip="Subscript">
-          <SubscriptIcon />
-        </MarkToolbarButton>
+        {/* <MoreToolbarButton pressed={expanded} tooltip="More" /> */}
       </ToolbarGroup>
     </div>
   );
diff --git a/apps/www/src/registry/default/plate-ui/media-toolbar-button.tsx b/apps/www/src/registry/default/plate-ui/media-toolbar-button.tsx
index 013103bf7a..9e3597a3f9 100644
--- a/apps/www/src/registry/default/plate-ui/media-toolbar-button.tsx
+++ b/apps/www/src/registry/default/plate-ui/media-toolbar-button.tsx
@@ -52,7 +52,6 @@ const MEDIA_CONFIG: Record<
   {
     accept: string[];
     icon: React.ReactNode;
-    placeholder: string;
     title: string;
     tooltip: string;
   }
@@ -60,28 +59,24 @@ const MEDIA_CONFIG: Record<
   [AudioPlugin.key]: {
     accept: ['audio/*'],
     icon: <AudioLinesIcon className="size-4" />,
-    placeholder: 'https://example.com/audio.mp3',
     title: 'Insert Audio',
     tooltip: 'Audio',
   },
   [FilePlugin.key]: {
     accept: ['*'],
     icon: <FileUpIcon className="size-4" />,
-    placeholder: 'https://example.com/file.pdf',
     title: 'Insert File',
     tooltip: 'File',
   },
   [ImagePlugin.key]: {
     accept: ['image/*'],
     icon: <ImageIcon className="size-4" />,
-    placeholder: 'https://example.com/image.jpg',
     title: 'Insert Image',
     tooltip: 'Image',
   },
   [VideoPlugin.key]: {
     accept: ['video/*'],
     icon: <FilmIcon className="size-4" />,
-    placeholder: 'https://example.com/video.mp4',
     title: 'Insert Video',
     tooltip: 'Video',
   },
@@ -177,25 +172,30 @@ export function MediaToolbarButton({
           <AlertDialogHeader>
             <AlertDialogTitle>{currentConfig.title}</AlertDialogTitle>
             <AlertDialogDescription className="flex items-center gap-2">
-              {currentConfig.icon}
-              <Input
-                variant="underline"
-                value={url}
-                onChange={(e) => setUrl(e.target.value)}
-                onKeyDown={(e) => {
-                  if (e.key === 'Enter') embedMedia();
-                }}
-                placeholder={currentConfig.placeholder}
-                h="sm"
-                autoFocus
-              />
+              <div className="group relative w-full">
+                <label
+                  className="absolute top-1/2 block -translate-y-1/2 cursor-text px-1 text-sm text-muted-foreground/70 transition-all group-focus-within:pointer-events-none group-focus-within:top-0 group-focus-within:cursor-default group-focus-within:text-xs group-focus-within:font-medium group-focus-within:text-foreground has-[+input:not(:placeholder-shown)]:pointer-events-none has-[+input:not(:placeholder-shown)]:top-0 has-[+input:not(:placeholder-shown)]:cursor-default has-[+input:not(:placeholder-shown)]:text-xs has-[+input:not(:placeholder-shown)]:font-medium has-[+input:not(:placeholder-shown)]:text-foreground"
+                  htmlFor="input-32"
+                >
+                  <span className="inline-flex bg-background px-2">URL</span>
+                </label>
+                <Input
+                  id="input-32"
+                  value={url}
+                  onChange={(e) => setUrl(e.target.value)}
+                  onKeyDown={(e) => {
+                    if (e.key === 'Enter') embedMedia();
+                  }}
+                  placeholder=""
+                  type="email"
+                  autoFocus
+                />
+              </div>
             </AlertDialogDescription>
           </AlertDialogHeader>
           <AlertDialogFooter>
-            <AlertDialogCancel>CANCEL</AlertDialogCancel>
-            <AlertDialogAction onClick={embedMedia}>
-              {currentConfig.title.toUpperCase()}
-            </AlertDialogAction>
+            <AlertDialogCancel>Cancel</AlertDialogCancel>
+            <AlertDialogAction onClick={embedMedia}>Accept</AlertDialogAction>
           </AlertDialogFooter>
         </AlertDialogContent>
       </AlertDialog>

From 9e8f2d9140a4afd551a61e9d496b44a1f9be9bbf Mon Sep 17 00:00:00 2001
From: Felix Feng <felixfeng33@gmail.com>
Date: Sun, 17 Nov 2024 09:47:23 +0800
Subject: [PATCH 34/34] fix

---
 .changeset/poor-doors-tease.md                            | 4 ++++
 .../default/components/editor/plugins/media-plugins.tsx   | 3 +++
 .../media/src/react/placeholder/PlaceholderPlugin.tsx     | 8 ++++----
 3 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/.changeset/poor-doors-tease.md b/.changeset/poor-doors-tease.md
index 59c9751b86..9e8a7b274a 100644
--- a/.changeset/poor-doors-tease.md
+++ b/.changeset/poor-doors-tease.md
@@ -5,3 +5,7 @@
 PlaceholderPlugin:
 New `updateUploadHistory` `withHistoryMark` `isHistoryMarking` to fix undo to the loading state.
 `editor.insert.insertMedia` add options
+
+New option `disableEmptyPlaceholder` to hidden empty placeholder.
+
+Rename `disabledDndPlugin` to `disableFileDrop`
diff --git a/apps/www/src/registry/default/components/editor/plugins/media-plugins.tsx b/apps/www/src/registry/default/components/editor/plugins/media-plugins.tsx
index a2db748e0d..5ec16084e0 100644
--- a/apps/www/src/registry/default/components/editor/plugins/media-plugins.tsx
+++ b/apps/www/src/registry/default/components/editor/plugins/media-plugins.tsx
@@ -28,6 +28,9 @@ export const mediaPlugins = [
     options: { plugins: [ImagePlugin, MediaEmbedPlugin] },
   }),
   PlaceholderPlugin.configure({
+    options: {
+      disableEmptyPlaceholder: true,
+    },
     render: {
       afterEditable: () => <MediaUploadToast />,
     },
diff --git a/packages/media/src/react/placeholder/PlaceholderPlugin.tsx b/packages/media/src/react/placeholder/PlaceholderPlugin.tsx
index 2a77c3f776..283e0350c5 100644
--- a/packages/media/src/react/placeholder/PlaceholderPlugin.tsx
+++ b/packages/media/src/react/placeholder/PlaceholderPlugin.tsx
@@ -33,7 +33,7 @@ export const PlaceholderPlugin = toTPlatePlugin<
     PlaceholderConfig,
     {
       disableEmptyPlaceholder: boolean;
-      disabledDndPlugin: boolean;
+      disableFileDrop: boolean;
       uploadConfig: UploadConfig;
       uploadingFiles: Record<string, File>;
       error?: UploadError | null;
@@ -63,8 +63,8 @@ export const PlaceholderPlugin = toTPlatePlugin<
     return editor;
   },
   options: {
-    disableEmptyPlaceholder: true,
-    disabledDndPlugin: false,
+    disableEmptyPlaceholder: false,
+    disableFileDrop: false,
     error: null,
     maxFileCount: 5,
     multiple: true,
@@ -140,7 +140,7 @@ export const PlaceholderPlugin = toTPlatePlugin<
     handlers: {
       onDrop: ({ editor, event, tf }) => {
         // using DnD plugin by default
-        if (!getOption('disabledDndPlugin')) return;
+        if (!getOption('disableFileDrop')) return;
 
         const { files } = event.dataTransfer;