diff --git a/apps/www/public/registry/styles/default/caption.json b/apps/www/public/registry/styles/default/caption.json
index 2590adcbcf..338dedb258 100644
--- a/apps/www/public/registry/styles/default/caption.json
+++ b/apps/www/public/registry/styles/default/caption.json
@@ -4,7 +4,7 @@
   ],
   "files": [
     {
-      "content": "import { cn, withCn, withVariants } from '@udecode/cn';\nimport {\n  Caption as CaptionPrimitive,\n  CaptionTextarea as CaptionTextareaPrimitive,\n} from '@udecode/plate-caption';\nimport { cva } from 'class-variance-authority';\n\nconst captionVariants = cva('max-w-full', {\n  defaultVariants: {\n    align: 'center',\n  },\n  variants: {\n    align: {\n      center: 'mx-auto',\n      left: 'mr-auto',\n      right: 'ml-auto',\n    },\n  },\n});\n\nexport const Caption = withVariants(CaptionPrimitive, captionVariants, [\n  'align',\n]);\n\nexport const CaptionTextarea = withCn(\n  CaptionTextareaPrimitive,\n  cn(\n    'mt-2 w-full resize-none border-none bg-inherit p-0 font-[inherit] text-inherit',\n    'focus:outline-none focus:[&::placeholder]:opacity-0',\n    'text-center print:placeholder:text-transparent'\n  )\n);\n",
+      "content": "import {\n  cn,\n  createPrimitiveComponent,\n  withCn,\n  withVariants,\n} from '@udecode/cn';\nimport {\n  Caption as CaptionPrimitive,\n  CaptionTextarea as CaptionTextareaPrimitive,\n  useCaptionButton,\n  useCaptionButtonState,\n} from '@udecode/plate-caption';\nimport { cva } from 'class-variance-authority';\n\nimport { Button } from './button';\n\nconst captionVariants = cva('max-w-full', {\n  defaultVariants: {\n    align: 'center',\n  },\n  variants: {\n    align: {\n      center: 'mx-auto',\n      left: 'mr-auto',\n      right: 'ml-auto',\n    },\n  },\n});\n\nexport const Caption = withVariants(CaptionPrimitive, captionVariants, [\n  'align',\n]);\n\nexport const CaptionTextarea = withCn(\n  CaptionTextareaPrimitive,\n  cn(\n    'mt-2 w-full resize-none border-none bg-inherit p-0 font-[inherit] text-inherit',\n    'focus:outline-none focus:[&::placeholder]:opacity-0',\n    'text-center print:placeholder:text-transparent'\n  )\n);\n\nexport const CaptionButton = createPrimitiveComponent(Button)({\n  propsHook: useCaptionButton,\n  stateHook: useCaptionButtonState,\n});\n",
       "name": "caption.tsx"
     }
   ],
diff --git a/apps/www/public/registry/styles/default/draggable.json b/apps/www/public/registry/styles/default/draggable.json
index f1328f51ff..46dd1d0684 100644
--- a/apps/www/public/registry/styles/default/draggable.json
+++ b/apps/www/public/registry/styles/default/draggable.json
@@ -6,7 +6,7 @@
   ],
   "files": [
     {
-      "content": "'use client';\n\nimport React from 'react';\n\nimport type {\n  ClassNames,\n  PlateElementProps,\n  TEditor,\n} from '@udecode/plate-common';\nimport type { DropTargetMonitor } from 'react-dnd';\n\nimport { cn, withRef } from '@udecode/cn';\nimport {\n  type DragItemNode,\n  useDraggable,\n  useDraggableState,\n} from '@udecode/plate-dnd';\n\nimport { Icons } from '@/components/icons';\n\nimport { Tooltip, TooltipContent, TooltipPortal, TooltipTrigger } from './tooltip';\n\nexport interface DraggableProps\n  extends PlateElementProps,\n    ClassNames<{\n      /** Block. */\n      block: string;\n\n      /** Block and gutter. */\n      blockAndGutter: string;\n\n      /** Block toolbar in the gutter. */\n      blockToolbar: string;\n\n      /**\n       * Block toolbar wrapper in the gutter left. It has the height of a line\n       * of the block.\n       */\n      blockToolbarWrapper: string;\n\n      blockWrapper: string;\n\n      /** Button to dnd the block, in the block toolbar. */\n      dragHandle: string;\n\n      /** Icon of the drag button, in the drag icon. */\n      dragIcon: string;\n\n      /** Show a dropline above or below the block when dragging a block. */\n      dropLine: string;\n\n      /** Gutter at the left side of the editor. It has the height of the block */\n      gutterLeft: string;\n    }> {\n  /**\n   * Intercepts the drop handling. If `false` is returned, the default drop\n   * behavior is called after. If `true` is returned, the default behavior is\n   * not called.\n   */\n  onDropHandler?: (\n    editor: TEditor,\n    props: {\n      dragItem: DragItemNode;\n      id: string;\n      monitor: DropTargetMonitor<DragItemNode, unknown>;\n      nodeRef: any;\n    }\n  ) => boolean;\n}\n\nconst dragHandle = (\n  <Tooltip>\n    <TooltipTrigger type=\"button\">\n      <Icons.dragHandle className=\"size-4 text-muted-foreground\" />\n    </TooltipTrigger>\n    <TooltipPortal>\n      <TooltipContent>Drag to move</TooltipContent>\n    </TooltipPortal>\n  </Tooltip>\n);\n\nexport const Draggable = withRef<'div', DraggableProps>(\n  ({ className, classNames = {}, onDropHandler, ...props }, ref) => {\n    const { children, element } = props;\n\n    const state = useDraggableState({ element, onDropHandler });\n    const { dropLine, isDragging, isHovered } = state;\n    const {\n      droplineProps,\n      groupProps,\n      gutterLeftProps,\n      handleRef,\n      previewRef,\n    } = useDraggable(state);\n\n    return (\n      <div\n        className={cn(\n          'relative',\n          isDragging && 'opacity-50',\n          'group',\n          className\n        )}\n        ref={ref}\n        {...groupProps}\n      >\n        <div\n          className={cn(\n            'pointer-events-none absolute top-0 flex h-full -translate-x-full cursor-text opacity-0 group-hover:opacity-100',\n            classNames.gutterLeft\n          )}\n          {...gutterLeftProps}\n        >\n          <div className={cn('flex h-[1.5em]', classNames.blockToolbarWrapper)}>\n            <div\n              className={cn(\n                'pointer-events-auto mr-1 flex items-center',\n                classNames.blockToolbar\n              )}\n            >\n              <div className=\"size-4\" ref={handleRef}>\n                {isHovered && dragHandle}\n              </div>\n            </div>\n          </div>\n        </div>\n\n        <div className={classNames.blockWrapper} ref={previewRef}>\n          {children}\n\n          {!!dropLine && (\n            <div\n              className={cn(\n                'absolute inset-x-0 h-0.5 opacity-100',\n                'bg-ring',\n                dropLine === 'top' && '-top-px',\n                dropLine === 'bottom' && '-bottom-px',\n                classNames.dropLine\n              )}\n              {...droplineProps}\n            />\n          )}\n        </div>\n      </div>\n    );\n  }\n);\n",
+      "content": "'use client';\n\nimport React from 'react';\n\nimport type { DropTargetMonitor } from 'react-dnd';\n\nimport { cn, withRef } from '@udecode/cn';\nimport {\n  type ClassNames,\n  type PlateElementProps,\n  type TEditor,\n  type TElement,\n  useEditorRef,\n  useElement,\n} from '@udecode/plate-common';\nimport {\n  type DragItemNode,\n  useDraggable,\n  useDraggableState,\n} from '@udecode/plate-dnd';\nimport { blockSelectionActions } from '@udecode/plate-selection';\n\nimport { Icons } from '@/components/icons';\n\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipPortal,\n  TooltipTrigger,\n} from './tooltip';\n\nexport interface DraggableProps\n  extends PlateElementProps,\n    ClassNames<{\n      /** Block. */\n      block: string;\n\n      /** Block and gutter. */\n      blockAndGutter: string;\n\n      /** Block toolbar in the gutter. */\n      blockToolbar: string;\n\n      /**\n       * Block toolbar wrapper in the gutter left. It has the height of a line\n       * of the block.\n       */\n      blockToolbarWrapper: string;\n\n      blockWrapper: string;\n\n      /** Button to dnd the block, in the block toolbar. */\n      dragHandle: string;\n\n      /** Icon of the drag button, in the drag icon. */\n      dragIcon: string;\n\n      /** Show a dropline above or below the block when dragging a block. */\n      dropLine: string;\n\n      /** Gutter at the left side of the editor. It has the height of the block */\n      gutterLeft: string;\n    }> {\n  /**\n   * Intercepts the drop handling. If `false` is returned, the default drop\n   * behavior is called after. If `true` is returned, the default behavior is\n   * not called.\n   */\n  onDropHandler?: (\n    editor: TEditor,\n    props: {\n      dragItem: DragItemNode;\n      id: string;\n      monitor: DropTargetMonitor<DragItemNode, unknown>;\n      nodeRef: any;\n    }\n  ) => boolean;\n}\n\nconst DragHandle = () => {\n  const editor = useEditorRef();\n  const element = useElement<TElement>();\n\n  return (\n    <Tooltip>\n      <TooltipTrigger type=\"button\">\n        <Icons.dragHandle\n          className=\"size-4 text-muted-foreground\"\n          onClick={(event) => {\n            event.stopPropagation();\n            event.preventDefault();\n\n            // if (element.id) {\n            //   blockSelectionActions.addSelectedRow(element.id as string);\n            //   blockContextMenuActions.show(editor.id, event as any);\n            // }\n          }}\n          onMouseDown={() => {\n            blockSelectionActions.resetSelectedIds();\n          }}\n        />\n      </TooltipTrigger>\n      <TooltipPortal>\n        <TooltipContent>Drag to move</TooltipContent>\n      </TooltipPortal>\n    </Tooltip>\n  );\n};\n\nexport const Draggable = withRef<'div', DraggableProps>(\n  ({ className, classNames = {}, onDropHandler, ...props }, ref) => {\n    const { children, element } = props;\n\n    const state = useDraggableState({ element, onDropHandler });\n    const { dropLine, isDragging, isHovered } = state;\n    const {\n      droplineProps,\n      groupProps,\n      gutterLeftProps,\n      handleRef,\n      previewRef,\n    } = useDraggable(state);\n\n    return (\n      <div\n        className={cn(\n          'relative',\n          isDragging && 'opacity-50',\n          'group',\n          className\n        )}\n        ref={ref}\n        {...groupProps}\n      >\n        <div\n          className={cn(\n            'pointer-events-none absolute -top-px z-50 flex h-full -translate-x-full cursor-text opacity-0 group-hover:opacity-100',\n            classNames.gutterLeft\n          )}\n          {...gutterLeftProps}\n        >\n          <div className={cn('flex h-[1.5em]', classNames.blockToolbarWrapper)}>\n            <div\n              className={cn(\n                'pointer-events-auto mr-1 flex items-center',\n                classNames.blockToolbar\n              )}\n            >\n              <div\n                className=\"size-4\"\n                data-key={element.id as string}\n                ref={handleRef}\n              >\n                {isHovered && <DragHandle />}\n              </div>\n            </div>\n          </div>\n        </div>\n\n        <div className={classNames.blockWrapper} ref={previewRef}>\n          {children}\n\n          {!!dropLine && (\n            <div\n              className={cn(\n                'absolute inset-x-0 h-0.5 opacity-100',\n                'bg-ring',\n                dropLine === 'top' && '-top-px',\n                dropLine === 'bottom' && '-bottom-px',\n                classNames.dropLine\n              )}\n              {...droplineProps}\n            />\n          )}\n        </div>\n      </div>\n    );\n  }\n);\n",
       "name": "draggable.tsx"
     },
     {
diff --git a/apps/www/public/registry/styles/default/floating-toolbar.json b/apps/www/public/registry/styles/default/floating-toolbar.json
index 30a62b4e21..2ed61e7121 100644
--- a/apps/www/public/registry/styles/default/floating-toolbar.json
+++ b/apps/www/public/registry/styles/default/floating-toolbar.json
@@ -4,7 +4,7 @@
   ],
   "files": [
     {
-      "content": "'use client';\n\nimport React from 'react';\n\nimport { cn, withRef } from '@udecode/cn';\nimport { PortalBody, useComposedRef } from '@udecode/plate-common';\nimport {\n  type FloatingToolbarState,\n  flip,\n  offset,\n  useFloatingToolbar,\n  useFloatingToolbarState,\n} from '@udecode/plate-floating';\n\nimport { Toolbar } from './toolbar';\n\nexport const FloatingToolbar = withRef<\n  typeof Toolbar,\n  {\n    state?: FloatingToolbarState;\n  }\n>(({ children, state, ...props }, componentRef) => {\n  const floatingToolbarState = useFloatingToolbarState({\n    ...state,\n    floatingOptions: {\n      middleware: [\n        offset(12),\n        flip({\n          fallbackPlacements: [\n            'top-start',\n            'top-end',\n            'bottom-start',\n            'bottom-end',\n          ],\n          padding: 12,\n        }),\n      ],\n      placement: 'top',\n      ...state?.floatingOptions,\n    },\n  });\n\n  const {\n    hidden,\n    props: rootProps,\n    ref: floatingRef,\n  } = useFloatingToolbar(floatingToolbarState);\n\n  const ref = useComposedRef<HTMLDivElement>(componentRef, floatingRef);\n\n  if (hidden) return null;\n\n  return (\n    <PortalBody>\n      <Toolbar\n        className={cn(\n          'absolute z-50 whitespace-nowrap border bg-popover px-1 opacity-100 shadow-md print:hidden'\n        )}\n        ref={ref}\n        {...rootProps}\n        {...props}\n      >\n        {children}\n      </Toolbar>\n    </PortalBody>\n  );\n});\n",
+      "content": "'use client';\n\nimport React from 'react';\n\nimport { cn, withRef } from '@udecode/cn';\nimport {\n  PortalBody,\n  useComposedRef,\n  useEventEditorSelectors,\n  usePlateSelectors,\n} from '@udecode/plate-common';\nimport {\n  type FloatingToolbarState,\n  flip,\n  offset,\n  useFloatingToolbar,\n  useFloatingToolbarState,\n} from '@udecode/plate-floating';\n\nimport { Toolbar } from './toolbar';\n\nexport const FloatingToolbar = withRef<\n  typeof Toolbar,\n  {\n    state?: FloatingToolbarState;\n  }\n>(({ children, state, ...props }, componentRef) => {\n  const editorId = usePlateSelectors().id();\n  const focusedEditorId = useEventEditorSelectors.focus();\n\n  const floatingToolbarState = useFloatingToolbarState({\n    editorId,\n    focusedEditorId,\n    ...state,\n    floatingOptions: {\n      middleware: [\n        offset(12),\n        flip({\n          fallbackPlacements: [\n            'top-start',\n            'top-end',\n            'bottom-start',\n            'bottom-end',\n          ],\n          padding: 12,\n        }),\n      ],\n      placement: 'top',\n      ...state?.floatingOptions,\n    },\n  });\n\n  const {\n    hidden,\n    props: rootProps,\n    ref: floatingRef,\n  } = useFloatingToolbar(floatingToolbarState);\n\n  const ref = useComposedRef<HTMLDivElement>(componentRef, floatingRef);\n\n  if (hidden) return null;\n\n  return (\n    <PortalBody>\n      <Toolbar\n        className={cn(\n          'absolute z-50 whitespace-nowrap border bg-popover px-1 opacity-100 shadow-md print:hidden'\n        )}\n        ref={ref}\n        {...rootProps}\n        {...props}\n      >\n        {children}\n      </Toolbar>\n    </PortalBody>\n  );\n});\n",
       "name": "floating-toolbar.tsx"
     }
   ],
diff --git a/apps/www/public/registry/styles/default/image-element.json b/apps/www/public/registry/styles/default/image-element.json
index c00c6676b2..15a6c01e8d 100644
--- a/apps/www/public/registry/styles/default/image-element.json
+++ b/apps/www/public/registry/styles/default/image-element.json
@@ -4,7 +4,7 @@
   ],
   "files": [
     {
-      "content": "import React from 'react';\n\nimport { cn, withRef } from '@udecode/cn';\nimport { PlateElement, withHOC } from '@udecode/plate-common';\nimport { ELEMENT_IMAGE, Image, useMediaState } from '@udecode/plate-media';\nimport { ResizableProvider, useResizableStore } from '@udecode/plate-resizable';\n\nimport { Caption, CaptionTextarea } from './caption';\nimport { MediaPopover } from './media-popover';\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      const width = useResizableStore().get.width();\n\n      return (\n        <MediaPopover pluginKey={ELEMENT_IMAGE}>\n          <PlateElement\n            className={cn('py-2.5', className)}\n            ref={ref}\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                  alt=\"\"\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                  {...nodeProps}\n                />\n                <ResizeHandle\n                  className={mediaResizeHandleVariants({ direction: 'right' })}\n                  options={{ direction: 'right' }}\n                />\n              </Resizable>\n\n              <Caption align={align} style={{ width }}>\n                <CaptionTextarea\n                  placeholder=\"Write a caption...\"\n                  readOnly={readOnly}\n                />\n              </Caption>\n            </figure>\n\n            {children}\n          </PlateElement>\n        </MediaPopover>\n      );\n    }\n  )\n);\n",
+      "content": "import React from 'react';\n\nimport { cn, withRef } from '@udecode/cn';\nimport { CaptionProvider } from '@udecode/plate-caption';\nimport { PlateElement, withHOC } from '@udecode/plate-common';\nimport { ELEMENT_IMAGE, Image, useMediaState } from '@udecode/plate-media';\nimport { ResizableProvider, useResizableStore } from '@udecode/plate-resizable';\n\nimport { Caption, CaptionTextarea } from './caption';\nimport { MediaPopover } from './media-popover';\nimport {\n  Resizable,\n  ResizeHandle,\n  mediaResizeHandleVariants,\n} from './resizable';\n\nexport const ImageElement = withHOC(\n  CaptionProvider,\n  withHOC(\n    ResizableProvider,\n    withRef<typeof PlateElement>(\n      ({ children, className, nodeProps, ...props }, ref) => {\n        const {\n          align = 'center',\n          focused,\n          readOnly,\n          selected,\n        } = useMediaState();\n\n        const width = useResizableStore().get.width();\n\n        return (\n          <MediaPopover pluginKey={ELEMENT_IMAGE}>\n            <PlateElement\n              className={cn('py-2.5', className)}\n              ref={ref}\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                    alt=\"\"\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                    {...nodeProps}\n                  />\n                  <ResizeHandle\n                    className={mediaResizeHandleVariants({\n                      direction: 'right',\n                    })}\n                    options={{ direction: 'right' }}\n                  />\n                </Resizable>\n\n                <Caption align={align} style={{ width }}>\n                  <CaptionTextarea\n                    placeholder=\"Write a caption...\"\n                    readOnly={readOnly}\n                  />\n                </Caption>\n              </figure>\n\n              {children}\n            </PlateElement>\n          </MediaPopover>\n        );\n      }\n    )\n  )\n);\n",
       "name": "image-element.tsx"
     }
   ],
diff --git a/apps/www/public/registry/styles/default/media-embed-element.json b/apps/www/public/registry/styles/default/media-embed-element.json
index 8f31b6fe9a..a4b3ec5194 100644
--- a/apps/www/public/registry/styles/default/media-embed-element.json
+++ b/apps/www/public/registry/styles/default/media-embed-element.json
@@ -6,7 +6,7 @@
   ],
   "files": [
     {
-      "content": "import React from 'react';\nimport LiteYouTubeEmbed from 'react-lite-youtube-embed';\nimport { Tweet } from 'react-tweet';\n\nimport { cn, withRef } from '@udecode/cn';\nimport { PlateElement, withHOC } from '@udecode/plate-common';\nimport {\n  ELEMENT_MEDIA_EMBED,\n  parseTwitterUrl,\n  parseVideoUrl,\n  useMediaState,\n} from '@udecode/plate-media';\nimport { ResizableProvider, useResizableStore } from '@udecode/plate-resizable';\n\nimport { Caption, CaptionTextarea } from './caption';\nimport { MediaPopover } from './media-popover';\nimport {\n  Resizable,\n  ResizeHandle,\n  mediaResizeHandleVariants,\n} from './resizable';\n\nexport const MediaEmbedElement = withHOC(\n  ResizableProvider,\n  withRef<typeof PlateElement>(({ children, className, ...props }, ref) => {\n    const {\n      align = 'center',\n      embed,\n      focused,\n      isTweet,\n      isVideo,\n      isYoutube,\n      readOnly,\n      selected,\n    } = useMediaState({\n      urlParsers: [parseTwitterUrl, parseVideoUrl],\n    });\n    const width = useResizableStore().get.width();\n    const provider = embed?.provider;\n\n    return (\n      <MediaPopover pluginKey={ELEMENT_MEDIA_EMBED}>\n        <PlateElement\n          className={cn('relative py-2.5', className)}\n          ref={ref}\n          {...props}\n        >\n          <figure className=\"group relative m-0 w-full\" contentEditable={false}>\n            <Resizable\n              align={align}\n              options={{\n                align,\n                maxWidth: isTweet ? 550 : '100%',\n                minWidth: isTweet ? 300 : 100,\n              }}\n            >\n              <ResizeHandle\n                className={mediaResizeHandleVariants({ direction: 'left' })}\n                options={{ direction: 'left' }}\n              />\n\n              {isVideo ? (\n                isYoutube ? (\n                  <LiteYouTubeEmbed\n                    id={embed!.id!}\n                    title=\"youtube\"\n                    wrapperClass={cn(\n                      'rounded-sm',\n                      focused && selected && 'ring-2 ring-ring ring-offset-2',\n                      'relative block cursor-pointer bg-black bg-cover bg-center [contain:content]',\n                      '[&.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)]',\n                      '[&.lyt-activated]:before:bg-[url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADGCAYAAAAT+OqFAAAAdklEQVQoz42QQQ7AIAgEF/T/D+kbq/RWAlnQyyazA4aoAB4FsBSA/bFjuF1EOL7VbrIrBuusmrt4ZZORfb6ehbWdnRHEIiITaEUKa5EJqUakRSaEYBJSCY2dEstQY7AuxahwXFrvZmWl2rh4JZ07z9dLtesfNj5q0FU3A5ObbwAAAABJRU5ErkJggg==)]',\n                      'after:block after:pb-[var(--aspect-ratio)] after:content-[\"\"]',\n                      '[&_>_iframe]:absolute [&_>_iframe]:left-0 [&_>_iframe]:top-0 [&_>_iframe]:size-full',\n                      '[&_>_.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)]',\n                      '[&:hover_>_.lty-playbtn]:bg-[red] [&:hover_>_.lty-playbtn]:opacity-100',\n                      '[&_>_.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-[\"\"]',\n                      '[&_>_.lty-playbtn]:absolute [&_>_.lty-playbtn]:left-1/2 [&_>_.lty-playbtn]:top-1/2 [&_>_.lty-playbtn]:[transform:translate3d(-50%,-50%,0)]',\n                      '[&_>_.lty-playbtn]:before:absolute [&_>_.lty-playbtn]:before:left-1/2 [&_>_.lty-playbtn]:before:top-1/2 [&_>_.lty-playbtn]:before:[transform:translate3d(-50%,-50%,0)]',\n                      '[&.lyt-activated]:cursor-[unset]',\n                      '[&.lyt-activated]:before:pointer-events-none [&.lyt-activated]:before:opacity-0',\n                      '[&.lyt-activated_>_.lty-playbtn]:pointer-events-none [&.lyt-activated_>_.lty-playbtn]:!opacity-0'\n                    )}\n                  />\n                ) : (\n                  <div\n                    className={cn(\n                      provider === 'vimeo' && 'pb-[75%]',\n                      provider === 'youku' && 'pb-[56.25%]',\n                      provider === 'dailymotion' && 'pb-[56.0417%]',\n                      provider === 'coub' && 'pb-[51.25%]'\n                    )}\n                  >\n                    <iframe\n                      allowFullScreen\n                      className={cn(\n                        'absolute left-0 top-0 size-full rounded-sm',\n                        isVideo && 'border-0',\n                        focused && selected && 'ring-2 ring-ring ring-offset-2'\n                      )}\n                      src={embed!.url}\n                      title=\"embed\"\n                    />\n                  </div>\n                )\n              ) : null}\n\n              {isTweet && (\n                <div\n                  className={cn(\n                    '[&_.react-tweet-theme]:my-0',\n                    !readOnly &&\n                      selected &&\n                      '[&_.react-tweet-theme]:ring-2 [&_.react-tweet-theme]:ring-ring [&_.react-tweet-theme]:ring-offset-2'\n                  )}\n                >\n                  <Tweet id={embed!.id!} />\n                </div>\n              )}\n\n              <ResizeHandle\n                className={mediaResizeHandleVariants({ direction: 'right' })}\n                options={{ direction: 'right' }}\n              />\n            </Resizable>\n\n            <Caption align={align} style={{ width }}>\n              <CaptionTextarea placeholder=\"Write a caption...\" />\n            </Caption>\n          </figure>\n\n          {children}\n        </PlateElement>\n      </MediaPopover>\n    );\n  })\n);\n",
+      "content": "import React from 'react';\nimport LiteYouTubeEmbed from 'react-lite-youtube-embed';\nimport { Tweet } from 'react-tweet';\n\nimport { cn, withRef } from '@udecode/cn';\nimport { CaptionProvider } from '@udecode/plate-caption';\nimport { PlateElement, withHOC } from '@udecode/plate-common';\nimport {\n  ELEMENT_MEDIA_EMBED,\n  parseTwitterUrl,\n  parseVideoUrl,\n  useMediaState,\n} from '@udecode/plate-media';\nimport { ResizableProvider, useResizableStore } from '@udecode/plate-resizable';\n\nimport { Caption, CaptionTextarea } from './caption';\nimport { MediaPopover } from './media-popover';\nimport {\n  Resizable,\n  ResizeHandle,\n  mediaResizeHandleVariants,\n} from './resizable';\n\nexport const MediaEmbedElement = withHOC(\n  CaptionProvider,\n  withHOC(\n    ResizableProvider,\n    withRef<typeof PlateElement>(({ children, className, ...props }, ref) => {\n      const {\n        align = 'center',\n        embed,\n        focused,\n        isTweet,\n        isVideo,\n        isYoutube,\n        readOnly,\n        selected,\n      } = useMediaState({\n        urlParsers: [parseTwitterUrl, parseVideoUrl],\n      });\n      const width = useResizableStore().get.width();\n      const provider = embed?.provider;\n\n      return (\n        <MediaPopover pluginKey={ELEMENT_MEDIA_EMBED}>\n          <PlateElement\n            className={cn('relative py-2.5', className)}\n            ref={ref}\n            {...props}\n          >\n            <figure\n              className=\"group relative m-0 w-full\"\n              contentEditable={false}\n            >\n              <Resizable\n                align={align}\n                options={{\n                  align,\n                  maxWidth: isTweet ? 550 : '100%',\n                  minWidth: isTweet ? 300 : 100,\n                }}\n              >\n                <ResizeHandle\n                  className={mediaResizeHandleVariants({ direction: 'left' })}\n                  options={{ direction: 'left' }}\n                />\n\n                {isVideo ? (\n                  isYoutube ? (\n                    <LiteYouTubeEmbed\n                      id={embed!.id!}\n                      title=\"youtube\"\n                      wrapperClass={cn(\n                        'rounded-sm',\n                        focused && selected && 'ring-2 ring-ring ring-offset-2',\n                        'relative block cursor-pointer bg-black bg-cover bg-center [contain:content]',\n                        '[&.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)]',\n                        '[&.lyt-activated]:before:bg-[url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADGCAYAAAAT+OqFAAAAdklEQVQoz42QQQ7AIAgEF/T/D+kbq/RWAlnQyyazA4aoAB4FsBSA/bFjuF1EOL7VbrIrBuusmrt4ZZORfb6ehbWdnRHEIiITaEUKa5EJqUakRSaEYBJSCY2dEstQY7AuxahwXFrvZmWl2rh4JZ07z9dLtesfNj5q0FU3A5ObbwAAAABJRU5ErkJggg==)]',\n                        'after:block after:pb-[var(--aspect-ratio)] after:content-[\"\"]',\n                        '[&_>_iframe]:absolute [&_>_iframe]:left-0 [&_>_iframe]:top-0 [&_>_iframe]:size-full',\n                        '[&_>_.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)]',\n                        '[&:hover_>_.lty-playbtn]:bg-[red] [&:hover_>_.lty-playbtn]:opacity-100',\n                        '[&_>_.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-[\"\"]',\n                        '[&_>_.lty-playbtn]:absolute [&_>_.lty-playbtn]:left-1/2 [&_>_.lty-playbtn]:top-1/2 [&_>_.lty-playbtn]:[transform:translate3d(-50%,-50%,0)]',\n                        '[&_>_.lty-playbtn]:before:absolute [&_>_.lty-playbtn]:before:left-1/2 [&_>_.lty-playbtn]:before:top-1/2 [&_>_.lty-playbtn]:before:[transform:translate3d(-50%,-50%,0)]',\n                        '[&.lyt-activated]:cursor-[unset]',\n                        '[&.lyt-activated]:before:pointer-events-none [&.lyt-activated]:before:opacity-0',\n                        '[&.lyt-activated_>_.lty-playbtn]:pointer-events-none [&.lyt-activated_>_.lty-playbtn]:!opacity-0'\n                      )}\n                    />\n                  ) : (\n                    <div\n                      className={cn(\n                        provider === 'vimeo' && 'pb-[75%]',\n                        provider === 'youku' && 'pb-[56.25%]',\n                        provider === 'dailymotion' && 'pb-[56.0417%]',\n                        provider === 'coub' && 'pb-[51.25%]'\n                      )}\n                    >\n                      <iframe\n                        allowFullScreen\n                        className={cn(\n                          'absolute left-0 top-0 size-full rounded-sm',\n                          isVideo && 'border-0',\n                          focused &&\n                            selected &&\n                            'ring-2 ring-ring ring-offset-2'\n                        )}\n                        src={embed!.url}\n                        title=\"embed\"\n                      />\n                    </div>\n                  )\n                ) : null}\n\n                {isTweet && (\n                  <div\n                    className={cn(\n                      '[&_.react-tweet-theme]:my-0',\n                      !readOnly &&\n                        selected &&\n                        '[&_.react-tweet-theme]:ring-2 [&_.react-tweet-theme]:ring-ring [&_.react-tweet-theme]:ring-offset-2'\n                    )}\n                  >\n                    <Tweet id={embed!.id!} />\n                  </div>\n                )}\n\n                <ResizeHandle\n                  className={mediaResizeHandleVariants({ direction: 'right' })}\n                  options={{ direction: 'right' }}\n                />\n              </Resizable>\n\n              <Caption align={align} style={{ width }}>\n                <CaptionTextarea placeholder=\"Write a caption...\" />\n              </Caption>\n            </figure>\n\n            {children}\n          </PlateElement>\n        </MediaPopover>\n      );\n    })\n  )\n);\n",
       "name": "media-embed-element.tsx"
     }
   ],
diff --git a/apps/www/public/registry/styles/default/media-popover.json b/apps/www/public/registry/styles/default/media-popover.json
index 6c1703f395..7cc4e56a45 100644
--- a/apps/www/public/registry/styles/default/media-popover.json
+++ b/apps/www/public/registry/styles/default/media-popover.json
@@ -4,7 +4,7 @@
   ],
   "files": [
     {
-      "content": "import React, { useEffect } from 'react';\n\nimport {\n  isSelectionExpanded,\n  useEditorSelector,\n  useElement,\n  useRemoveNodeButton,\n} from '@udecode/plate-common';\nimport {\n  FloatingMedia as FloatingMediaPrimitive,\n  floatingMediaActions,\n  useFloatingMediaSelectors,\n} from '@udecode/plate-media';\nimport { useReadOnly, useSelected } from 'slate-react';\n\nimport { Icons } from '@/components/icons';\n\nimport { Button, buttonVariants } from './button';\nimport { inputVariants } from './input';\nimport { Popover, PopoverAnchor, PopoverContent } from './popover';\nimport { Separator } from './separator';\n\nexport interface MediaPopoverProps {\n  children: React.ReactNode;\n  pluginKey?: string;\n}\n\nexport function MediaPopover({ children, pluginKey }: MediaPopoverProps) {\n  const readOnly = useReadOnly();\n  const selected = useSelected();\n\n  const selectionCollapsed = useEditorSelector(\n    (editor) => !isSelectionExpanded(editor),\n    []\n  );\n  const isOpen = !readOnly && selected && selectionCollapsed;\n  const isEditing = useFloatingMediaSelectors().isEditing();\n\n  useEffect(() => {\n    if (!isOpen && isEditing) {\n      floatingMediaActions.isEditing(false);\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [isOpen]);\n\n  const element = useElement();\n  const { props: buttonProps } = useRemoveNodeButton({ element });\n\n  if (readOnly) return <>{children}</>;\n\n  return (\n    <Popover modal={false} open={isOpen}>\n      <PopoverAnchor>{children}</PopoverAnchor>\n\n      <PopoverContent\n        className=\"w-auto p-1\"\n        onOpenAutoFocus={(e) => e.preventDefault()}\n      >\n        {isEditing ? (\n          <div className=\"flex w-[330px] flex-col\">\n            <div className=\"flex items-center\">\n              <div className=\"flex items-center pl-3 text-muted-foreground\">\n                <Icons.link className=\"size-4\" />\n              </div>\n\n              <FloatingMediaPrimitive.UrlInput\n                className={inputVariants({ h: 'sm', variant: 'ghost' })}\n                options={{\n                  pluginKey,\n                }}\n                placeholder=\"Paste the embed link...\"\n              />\n            </div>\n          </div>\n        ) : (\n          <div className=\"box-content flex h-9 items-center gap-1\">\n            <FloatingMediaPrimitive.EditButton\n              className={buttonVariants({ size: 'sm', variant: 'ghost' })}\n            >\n              Edit link\n            </FloatingMediaPrimitive.EditButton>\n\n            <Separator className=\"my-1\" orientation=\"vertical\" />\n\n            <Button size=\"sms\" variant=\"ghost\" {...buttonProps}>\n              <Icons.delete className=\"size-4\" />\n            </Button>\n          </div>\n        )}\n      </PopoverContent>\n    </Popover>\n  );\n}\n",
+      "content": "import React, { useEffect } from 'react';\n\nimport {\n  isSelectionExpanded,\n  useEditorSelector,\n  useElement,\n  useRemoveNodeButton,\n} from '@udecode/plate-common';\nimport {\n  FloatingMedia as FloatingMediaPrimitive,\n  floatingMediaActions,\n  useFloatingMediaSelectors,\n} from '@udecode/plate-media';\nimport { useReadOnly, useSelected } from 'slate-react';\n\nimport { Icons } from '@/components/icons';\n\nimport { Button, buttonVariants } from './button';\nimport { CaptionButton } from './caption';\nimport { inputVariants } from './input';\nimport { Popover, PopoverAnchor, PopoverContent } from './popover';\nimport { Separator } from './separator';\n\nexport interface MediaPopoverProps {\n  children: React.ReactNode;\n  pluginKey?: string;\n}\n\nexport function MediaPopover({ children, pluginKey }: MediaPopoverProps) {\n  const readOnly = useReadOnly();\n  const selected = useSelected();\n\n  const selectionCollapsed = useEditorSelector(\n    (editor) => !isSelectionExpanded(editor),\n    []\n  );\n  const isOpen = !readOnly && selected && selectionCollapsed;\n  const isEditing = useFloatingMediaSelectors().isEditing();\n\n  useEffect(() => {\n    if (!isOpen && isEditing) {\n      floatingMediaActions.isEditing(false);\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [isOpen]);\n\n  const element = useElement();\n  const { props: buttonProps } = useRemoveNodeButton({ element });\n\n  if (readOnly) return <>{children}</>;\n\n  return (\n    <Popover modal={false} open={isOpen}>\n      <PopoverAnchor>{children}</PopoverAnchor>\n\n      <PopoverContent\n        className=\"w-auto p-1\"\n        onOpenAutoFocus={(e) => e.preventDefault()}\n      >\n        {isEditing ? (\n          <div className=\"flex w-[330px] flex-col\">\n            <div className=\"flex items-center\">\n              <div className=\"flex items-center pl-3 text-muted-foreground\">\n                <Icons.link className=\"size-4\" />\n              </div>\n\n              <FloatingMediaPrimitive.UrlInput\n                className={inputVariants({ h: 'sm', variant: 'ghost' })}\n                options={{\n                  pluginKey,\n                }}\n                placeholder=\"Paste the embed link...\"\n              />\n            </div>\n          </div>\n        ) : (\n          <div className=\"box-content flex h-9 items-center gap-1\">\n            <FloatingMediaPrimitive.EditButton\n              className={buttonVariants({ size: 'sm', variant: 'ghost' })}\n            >\n              Edit link\n            </FloatingMediaPrimitive.EditButton>\n\n            <CaptionButton variant=\"ghost\">Caption</CaptionButton>\n\n            <Separator className=\"my-1\" orientation=\"vertical\" />\n\n            <Button size=\"sms\" variant=\"ghost\" {...buttonProps}>\n              <Icons.delete className=\"size-4\" />\n            </Button>\n          </div>\n        )}\n      </PopoverContent>\n    </Popover>\n  );\n}\n",
       "name": "media-popover.tsx"
     }
   ],