'use client'; import React from 'react'; import LiteYouTubeEmbed from 'react-lite-youtube-embed'; import { Tweet } from 'react-tweet'; import { cn, withRef } from '@udecode/cn'; import { withHOC } from '@udecode/plate-common/react'; import { parseTwitterUrl, parseVideoUrl } from '@udecode/plate-media'; import { MediaEmbedPlugin, useMediaState } from '@udecode/plate-media/react'; import { ResizableProvider, useResizableStore } from '@udecode/plate-resizable'; import { Caption, CaptionTextarea } from './caption'; import { MediaPopover } from './media-popover'; import { PlateElement } from './plate-element'; import { Resizable, ResizeHandle, mediaResizeHandleVariants, } from './resizable'; export const MediaEmbedElement = withHOC( ResizableProvider, withRef(({ children, className, ...props }, ref) => { const { align = 'center', embed, focused, isTweet, isVideo, isYoutube, readOnly, selected, } = useMediaState({ urlParsers: [parseTwitterUrl, parseVideoUrl], }); const width = useResizableStore().get.width(); const provider = embed?.provider; return (

{isVideo ? ( isYoutube ? ( _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' )} /> ) : (

Media Embed Element

Installation

Examples

Media

Image

Embed

Plate Plus