@docyrus/ui-pro-ai-assistant 0.0.1

package/src/internal/plate-editor/plate-ui/media-toolbar-button.tsx

@@ -0,0 +1,229 @@
+'use client';
+
+import { useCallback, useState, type ReactNode } from 'react';
+
+import * as React from 'react';
+
+import { PlaceholderPlugin } from '@platejs/media/react';
+import {
+  AudioLinesIcon,
+  FileUpIcon,
+  FilmIcon,
+  ImageIcon,
+  LinkIcon
+} from 'lucide-react';
+import { isUrl, KEYS } from 'platejs';
+import { useEditorRef } from 'platejs/react';
+import { toast } from 'sonner';
+import { useFilePicker } from 'use-file-picker';
+
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle
+} from './alert-dialog';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuPortal,
+  DropdownMenuTrigger,
+  type DropdownMenuProps
+} from './dropdown-menu';
+import { Input } from './input';
+
+import {
+  ToolbarSplitButton,
+  ToolbarSplitButtonPrimary,
+  ToolbarSplitButtonSecondary
+} from './toolbar';
+
+const MEDIA_CONFIG: Record<
+  string,
+  {
+    accept: string[];
+    icon: ReactNode;
+    title: string;
+    tooltip: string;
+  }
+> = {
+  [KEYS.audio]: {
+    accept: ['audio/*'],
+    icon: <AudioLinesIcon className="size-4" />,
+    title: 'Insert Audio',
+    tooltip: 'Audio'
+  },
+  [KEYS.file]: {
+    accept: ['*'],
+    icon: <FileUpIcon className="size-4" />,
+    title: 'Insert File',
+    tooltip: 'File'
+  },
+  [KEYS.img]: {
+    accept: ['image/*'],
+    icon: <ImageIcon className="size-4" />,
+    title: 'Insert Image',
+    tooltip: 'Image'
+  },
+  [KEYS.video]: {
+    accept: ['video/*'],
+    icon: <FilmIcon className="size-4" />,
+    title: 'Insert Video',
+    tooltip: 'Video'
+  }
+};
+
+export function MediaToolbarButton({
+  nodeType,
+  ...props
+}: DropdownMenuProps & { nodeType: string }) {
+  const currentConfig = MEDIA_CONFIG[nodeType];
+
+  const editor = useEditorRef();
+  const [open, setOpen] = useState(false);
+  const [dialogOpen, setDialogOpen] = useState(false);
+
+  const { openFilePicker } = useFilePicker({
+    accept: currentConfig.accept,
+    multiple: true,
+    onFilesSelected: (data: { plainFiles?: File[] }) => {
+      if (!data.plainFiles || data.plainFiles.length === 0) return;
+      editor.getTransforms(PlaceholderPlugin).insert.media(data.plainFiles as unknown as FileList);
+    }
+  });
+
+  return (
+    <>
+      <ToolbarSplitButton
+        onClick={() => {
+          openFilePicker();
+        }}
+        onKeyDown={(e) => {
+          if (e.key === 'ArrowDown') {
+            e.preventDefault();
+            setOpen(true);
+          }
+        }}
+        pressed={open}>
+        <ToolbarSplitButtonPrimary>
+          {currentConfig.icon}
+        </ToolbarSplitButtonPrimary>
+
+        <DropdownMenu
+          open={open}
+          onOpenChange={setOpen}
+          modal={false}
+          {...props}>
+          <DropdownMenuTrigger asChild>
+            <ToolbarSplitButtonSecondary />
+          </DropdownMenuTrigger>
+
+          <DropdownMenuPortal>
+            <DropdownMenuContent
+              onClick={e => e.stopPropagation()}
+              align="start"
+              alignOffset={-32}>
+              <DropdownMenuGroup>
+                <DropdownMenuItem onSelect={() => openFilePicker()}>
+                  {currentConfig.icon}
+                  Upload from computer
+                </DropdownMenuItem>
+                <DropdownMenuItem onSelect={() => setDialogOpen(true)}>
+                  <LinkIcon />
+                  Insert via URL
+                </DropdownMenuItem>
+              </DropdownMenuGroup>
+            </DropdownMenuContent>
+          </DropdownMenuPortal>
+        </DropdownMenu>
+      </ToolbarSplitButton>
+
+      <AlertDialog
+        open={dialogOpen}
+        onOpenChange={(value) => {
+          setDialogOpen(value);
+        }}>
+        <AlertDialogContent className="gap-6">
+          <MediaUrlDialogContent
+            currentConfig={currentConfig}
+            nodeType={nodeType}
+            setOpen={setDialogOpen} />
+        </AlertDialogContent>
+      </AlertDialog>
+    </>
+  );
+}
+
+function MediaUrlDialogContent({
+  currentConfig,
+  nodeType,
+  setOpen
+}: {
+  currentConfig: (typeof MEDIA_CONFIG)[string];
+  nodeType: string;
+  setOpen: (value: boolean) => void;
+}) {
+  const editor = useEditorRef();
+  const [url, setUrl] = useState('');
+
+  const embedMedia = useCallback(() => {
+    if (!isUrl(url)) return toast.error('Invalid URL');
+
+    setOpen(false);
+    editor.tf.insertNodes({
+      children: [{ text: '' }],
+      name: nodeType === KEYS.file ? url.split('/').pop() : undefined,
+      type: nodeType,
+      url
+    });
+  }, [
+    url,
+    editor,
+    nodeType,
+    setOpen
+  ]);
+
+  return (
+    <>
+      <AlertDialogHeader>
+        <AlertDialogTitle>{currentConfig.title}</AlertDialogTitle>
+      </AlertDialogHeader>
+
+      <AlertDialogDescription className="group relative w-full">
+        <label
+          className="-translate-y-1/2 absolute top-1/2 block cursor-text px-1 text-muted-foreground/70 text-sm transition-all group-focus-within:pointer-events-none group-focus-within:top-0 group-focus-within:cursor-default group-focus-within:font-medium group-focus-within:text-foreground group-focus-within:text-xs 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)]:font-medium has-[+input:not(:placeholder-shown)]:text-foreground has-[+input:not(:placeholder-shown)]:text-xs"
+          htmlFor="url">
+          <span className="inline-flex bg-background px-2">URL</span>
+        </label>
+        <Input
+          id="url"
+          className="w-full"
+          value={url}
+          onChange={e => setUrl(e.target.value)}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter') embedMedia();
+          }}
+          placeholder=""
+          type="url"
+          autoFocus />
+      </AlertDialogDescription>
+
+      <AlertDialogFooter>
+        <AlertDialogCancel>Cancel</AlertDialogCancel>
+        <AlertDialogAction
+          onClick={(e) => {
+            e.preventDefault();
+            embedMedia();
+          }}>
+          Accept
+        </AlertDialogAction>
+      </AlertDialogFooter>
+    </>
+  );
+}

package/src/internal/plate-editor/plate-ui/media-toolbar.tsx

@@ -0,0 +1,216 @@
+'use client';
+
+import { type ComponentProps, type Dispatch, type SetStateAction } from 'react';
+
+import * as React from 'react';
+
+import { type TMediaElement, type TTextAlignProps, KEYS } from 'platejs';
+
+import { showCaption } from '@platejs/caption/react';
+import {
+  openImagePreview,
+  useMediaController,
+  useMediaControllerDropDownMenu,
+  useMediaControllerState
+} from '@platejs/media/react';
+import { BlockMenuPlugin } from '@platejs/selection/react';
+import {
+  AlignCenter,
+  AlignLeft,
+  AlignRight,
+  CaptionsIcon,
+  CircleArrowDownIcon,
+  MoreHorizontalIcon,
+  MoveUpRightIcon,
+  ZoomInIcon
+} from 'lucide-react';
+import { useEditorRef, useElement } from 'platejs/react';
+
+import { toast } from 'sonner';
+
+import { cn } from '@docyrus/ui-pro-shared/lib/utils';
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  type DropdownMenuProps,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuTrigger,
+  useOpenState
+} from './dropdown-menu';
+
+import { Toolbar, ToolbarButton, toolbarButtonVariants } from './toolbar';
+
+import { downloadFile } from '../lib/download-file';
+
+export function MediaToolbar({
+  className: _className,
+  ...props
+}: ComponentProps<typeof Toolbar>) {
+  return (
+    <Toolbar
+      className={cn(
+        'group-data-[readonly=true]/editor:hidden',
+        'top-1 right-1 opacity-0 group-hover/media:opacity-100',
+        'group-has-data-[resizing=true]/media:opacity-0 group-has-data-[state=open]/media:opacity-100 group-data-[state=open]/context-menu:opacity-0'
+      )}
+      {...props}>
+      <MediaToolbarButtons />
+    </Toolbar>
+  );
+}
+
+const alignItems = [
+  {
+    icon: AlignLeft,
+    value: 'left'
+  },
+  {
+    icon: AlignCenter,
+    value: 'center'
+  },
+  {
+    icon: AlignRight,
+    value: 'right'
+  }
+];
+
+function MediaToolbarButtons() {
+  const editor = useEditorRef();
+  const element = useElement<TMediaElement>();
+  const state = useMediaControllerState();
+  const { MediaControllerDropDownMenuProps: mediaToolbarDropDownMenuProps }
+    = useMediaController(state);
+
+  const handleDownload = () => {
+    toast.promise(downloadFile(element.url, element.id || 'file'), {
+      error: 'Download failed. Please try again.',
+      loading: 'Downloading...'
+    });
+  };
+
+  return (
+    <>
+      <MediaAlignButton {...mediaToolbarDropDownMenuProps} />
+      <ToolbarButton
+        onClick={() => showCaption(editor, element)}
+        size="none"
+        tooltip="Caption"
+        variant="media">
+        <CaptionsIcon />
+      </ToolbarButton>
+      {element.type === KEYS.img && (
+        <ToolbarButton
+          onClick={() => {
+            openImagePreview(editor, element);
+          }}
+          size="none"
+          tooltip="Expand"
+          variant="media">
+          <ZoomInIcon />
+        </ToolbarButton>
+      )}
+
+      {element.type === KEYS.img && (
+        <ToolbarButton
+          onClick={handleDownload}
+          size="none"
+          tooltip="Download"
+          variant="media">
+          <CircleArrowDownIcon />
+        </ToolbarButton>
+      )}
+
+      {element.type !== KEYS.img && (
+        <ToolbarButton
+          onClick={() => {
+            window.open(element.url, '_blank');
+          }}
+          size="none"
+          tooltip="Original"
+          variant="media">
+          <MoveUpRightIcon />
+        </ToolbarButton>
+      )}
+
+      <ToolbarButton
+        onClick={(e) => {
+          editor
+            .getApi(BlockMenuPlugin)
+            .blockMenu.showContextMenu(element.id as string, {
+              x: e.clientX,
+              y: e.clientY
+            });
+        }}
+        size="none"
+        tooltip="More actions"
+        variant="media">
+        <MoreHorizontalIcon />
+      </ToolbarButton>
+    </>
+  );
+}
+
+function MediaAlignButton({
+  children: _children,
+  ...props
+}: {
+  setAlignOpen: Dispatch<SetStateAction<boolean>>;
+} & DropdownMenuProps) {
+  const editor = useEditorRef();
+  const element = useElement<TMediaElement & TTextAlignProps>();
+  const openState = useOpenState();
+
+  const value = element.align ?? 'left';
+
+  const IconValue
+    = alignItems.find(item => item.value === value)?.icon ?? AlignLeft;
+
+  useMediaControllerDropDownMenu({
+    openState,
+    setAlignOpen: props.setAlignOpen
+  });
+
+  return (
+    <DropdownMenu modal={false} {...openState} {...props}>
+      <DropdownMenuTrigger asChild>
+        <ToolbarButton
+          data-state={openState.open ? 'open' : 'closed'}
+          size="none"
+          tooltip="Align"
+          variant="media">
+          <IconValue className="size-4" />
+        </ToolbarButton>
+      </DropdownMenuTrigger>
+
+      <DropdownMenuContent
+        align="start"
+        className="min-w-0 rounded-md border-none bg-black/60 p-0 shadow-none"
+        portal={false}>
+        <DropdownMenuRadioGroup
+          className="flex hover:bg-transparent"
+          onValueChange={(value) => {
+            editor.tf.setNodes({ align: value as any }, { at: element });
+          }}
+          value={value}>
+          {alignItems.map(({ icon: Icon, value: itemValue }) => (
+            <DropdownMenuRadioItem
+              className={cn(
+                toolbarButtonVariants({
+                  size: 'none',
+                  variant: 'media'
+                }),
+                'size-[26px] opacity-60 hover:opacity-100 data-[state=checked]:bg-black/5 data-[state=checked]:opacity-100'
+              )}
+              hideIcon
+              key={itemValue}
+              value={itemValue}>
+              <Icon className="size-4" />
+            </DropdownMenuRadioItem>
+          ))}
+        </DropdownMenuRadioGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

package/src/internal/plate-editor/plate-ui/media-upload-toast.tsx

@@ -0,0 +1,73 @@
+'use client';
+
+import { useEffect } from 'react';
+
+import { PlaceholderPlugin, UploadErrorCode } from '@platejs/media/react';
+import { usePluginOption } from 'platejs/react';
+import { toast } from 'sonner';
+
+export function MediaUploadToast() {
+  useUploadErrorToast();
+
+  return null;
+}
+
+const useUploadErrorToast = () => {
+  const uploadError = usePluginOption(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]);
+};

package/src/internal/plate-editor/plate-ui/media-video-node-static.tsx

@@ -0,0 +1,35 @@
+
+import {
+  NodeApi,
+  type TCaptionElement,
+  type TResizableProps,
+  type TVideoElement
+} from 'platejs';
+import { SlateElement, type SlateElementProps } from 'platejs/static';
+
+import { cn } from '@docyrus/ui-pro-shared/lib/utils';
+
+export function MediaVideoElementStatic(
+  props: SlateElementProps<TVideoElement & TCaptionElement & TResizableProps>
+) {
+  const {
+    align = 'center', caption, url, width
+  } = props.element;
+
+  return (
+    <SlateElement className="py-2.5" {...props}>
+      <div style={{ textAlign: align }}>
+        <figure
+          className="group relative m-0 inline-block cursor-default"
+          style={{ width }}>
+          <video
+            className={cn('w-full max-w-full object-cover px-0', 'rounded-sm')}
+            controls
+            src={url} />
+          {caption && <figcaption>{NodeApi.string(caption[0])}</figcaption>}
+        </figure>
+      </div>
+      {props.children}
+    </SlateElement>
+  );
+}

package/src/internal/plate-editor/plate-ui/media-video-node.tsx

@@ -0,0 +1,119 @@
+'use client';
+
+import { useDraggable } from '@platejs/dnd';
+import { parseTwitterUrl, parseVideoUrl } from '@platejs/media';
+import { useMediaState } from '@platejs/media/react';
+import { ResizableProvider, useResizableValue } from '@platejs/resizable';
+import {
+  PlateElement,
+  type PlateElementProps,
+  useEditorMounted,
+  withHOC
+} from 'platejs/react';
+import LiteYouTubeEmbed from 'react-lite-youtube-embed';
+import ReactPlayer from 'react-player';
+
+import { cn } from '@docyrus/ui-pro-shared/lib/utils';
+
+import { Caption, CaptionTextarea } from './caption';
+import { MediaToolbar } from './media-toolbar';
+import {
+  mediaResizeHandleVariants,
+  Resizable,
+  ResizeHandle
+} from './resize-handle';
+
+export const MediaVideoElement = withHOC(
+  ResizableProvider,
+  (props: PlateElementProps) => {
+    const {
+      align = 'center',
+      embed,
+      isUpload,
+      isYoutube,
+      readOnly,
+      unsafeUrl
+    } = useMediaState({
+      urlParsers: [parseTwitterUrl, parseVideoUrl]
+    });
+    const width = useResizableValue('width');
+
+    const isEditorMounted = useEditorMounted();
+
+    const isTweet = true;
+
+    const { isDragging, handleRef } = useDraggable({
+      element: props.element
+    });
+
+    return (
+      <PlateElement className="py-2.5" {...props}>
+        <figure className="relative m-0 cursor-default" contentEditable={false}>
+          <Resizable
+            align={align}
+            className={cn(isDragging && 'opacity-50')}
+            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',
+                      'relative block cursor-pointer bg-black bg-center bg-cover [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]:top-0 [&_>_iframe]:left-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-[transparent_transparent_transparent_#fff] [&_>_.lty-playbtn]:before:border-y-[11px] [&_>_.lty-playbtn]:before:border-r-0 [&_>_.lty-playbtn]:before:border-l-[19px] [&_>_.lty-playbtn]:before:content-[""]',
+                      '[&_>_.lty-playbtn]:absolute [&_>_.lty-playbtn]:top-1/2 [&_>_.lty-playbtn]:left-1/2 [&_>_.lty-playbtn]:[transform:translate3d(-50%,-50%,0)]',
+                      '[&_>_.lty-playbtn]:before:absolute [&_>_.lty-playbtn]:before:top-1/2 [&_>_.lty-playbtn]:before:left-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
+                    controls
+                    height="100%"
+                    src={unsafeUrl}
+                    width="100%" />
+                </div>
+              )}
+
+              <MediaToolbar />
+            </div>
+          </Resizable>
+
+          <Caption align={align} style={{ width }}>
+            <CaptionTextarea
+              placeholder="Write a caption..."
+              readOnly={readOnly} />
+          </Caption>
+        </figure>
+        {props.children}
+      </PlateElement>
+    );
+  }
+);