media-placeholder-element.json

{
  "dependencies": [
    "@udecode/plate-media",
    "use-file-picker",
    "@uploadthing/react@7.1.0",
    "uploadthing@7.2.0",
    "zod",
    "sonner"
  ],
  "doc": {
    "description": "A placeholder for media files.",
    "docs": [
      {
        "route": "/docs/media-placeholder",
        "title": "Media Placeholder"
      }
    ],
    "examples": [
      "media-demo",
      "media-toolbar-pro"
    ]
  },
  "files": [
    {
      "content": "'use client';\n\nimport React, { useCallback, useEffect, useRef, useState } from 'react';\nimport type { ReactNode } from 'react';\n\nimport type { TPlaceholderElement } from '@udecode/plate-media';\n\nimport { cn } from '@udecode/cn';\nimport {\n  insertNodes,\n  removeNodes,\n  withoutSavingHistory,\n} from '@udecode/plate-common';\nimport {\n  findNodePath,\n  useEditorPlugin,\n  withHOC,\n  withRef,\n} from '@udecode/plate-common/react';\nimport {\n  AudioPlugin,\n  FilePlugin,\n  ImagePlugin,\n  PlaceholderPlugin,\n  PlaceholderProvider,\n  VideoPlugin,\n  updateUploadHistory,\n} from '@udecode/plate-media/react';\nimport { AudioLines, FileUp, Film, ImageIcon } from 'lucide-react';\nimport { useFilePicker } from 'use-file-picker';\n\nimport { useUploadFile } from '../lib/uploadthing/uploadthing';\nimport { PlateElement } from './plate-element';\nimport { Spinner } from './spinner';\n\nconst CONTENT: Record<\n  string,\n  {\n    accept: string[];\n    content: ReactNode;\n    icon: ReactNode;\n  }\n> = {\n  [AudioPlugin.key]: {\n    accept: ['audio/*'],\n    content: 'Add an audio file',\n    icon: <AudioLines />,\n  },\n  [FilePlugin.key]: {\n    accept: ['*'],\n    content: 'Add a file',\n    icon: <FileUp />,\n  },\n  [ImagePlugin.key]: {\n    accept: ['image/*'],\n    content: 'Add an image',\n    icon: <ImageIcon />,\n  },\n  [VideoPlugin.key]: {\n    accept: ['video/*'],\n    content: 'Add a video',\n    icon: <Film />,\n  },\n};\n\nexport const MediaPlaceholderElement = withHOC(\n  PlaceholderProvider,\n  withRef<typeof PlateElement>(\n    ({ children, className, editor, nodeProps, ...props }, ref) => {\n      const element = props.element as TPlaceholderElement;\n\n      const { api } = useEditorPlugin(PlaceholderPlugin);\n\n      const { isUploading, progress, uploadFile, uploadedFile, uploadingFile } =\n        useUploadFile();\n\n      const loading = isUploading && uploadingFile;\n\n      const currentContent = CONTENT[element.mediaType];\n\n      const isImage = element.mediaType === ImagePlugin.key;\n\n      const imageRef = useRef<HTMLImageElement>(null);\n\n      const { openFilePicker } = useFilePicker({\n        accept: currentContent.accept,\n        multiple: true,\n        onFilesSelected: ({ plainFiles: updatedFiles }) => {\n          const firstFile = updatedFiles[0];\n          const restFiles = updatedFiles.slice(1);\n\n          replaceCurrentPlaceholder(firstFile);\n\n          restFiles.length > 0 && (editor as any).tf.insert.media(restFiles);\n        },\n      });\n\n      const replaceCurrentPlaceholder = useCallback(\n        (file: File) => {\n          void uploadFile(file);\n          api.placeholder.addUploadingFile(element.id as string, file);\n        },\n        [api.placeholder, element.id, uploadFile]\n      );\n\n      useEffect(() => {\n        if (!uploadedFile) return;\n\n        const path = findNodePath(editor, element);\n\n        withoutSavingHistory(editor, () => {\n          removeNodes(editor, { at: path });\n\n          const node = {\n            children: [{ text: '' }],\n            initialHeight: imageRef.current?.height,\n            initialWidth: imageRef.current?.width,\n            isUpload: true,\n            name: element.mediaType === FilePlugin.key ? uploadedFile.name : '',\n            placeholderId: element.id as string,\n            type: element.mediaType!,\n            url: uploadedFile.url,\n          };\n\n          insertNodes(editor, node, { at: path });\n\n          updateUploadHistory(editor, node);\n        });\n\n        api.placeholder.removeUploadingFile(element.id as string);\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n      }, [uploadedFile, element.id]);\n\n      // React dev mode will call useEffect twice\n      const isReplaced = useRef(false);\n      /** Paste and drop */\n      useEffect(() => {\n        if (isReplaced.current) return;\n\n        isReplaced.current = true;\n        const currentFiles = api.placeholder.getUploadingFile(\n          element.id as string\n        );\n\n        if (!currentFiles) return;\n\n        replaceCurrentPlaceholder(currentFiles);\n\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n      }, [isReplaced]);\n\n      return (\n        <PlateElement\n          ref={ref}\n          className={cn('relative my-1', className)}\n          editor={editor}\n          {...props}\n        >\n          {(!loading || !isImage) && (\n            <div\n              className={cn(\n                'flex cursor-pointer select-none items-center rounded-sm bg-muted p-3 pr-9 hover:bg-primary/10'\n              )}\n              onClick={() => !loading && openFilePicker()}\n              contentEditable={false}\n            >\n              <div className=\"relative mr-3 flex text-muted-foreground/80 [&_svg]:size-6\">\n                {currentContent.icon}\n              </div>\n              <div className=\"whitespace-nowrap text-sm text-muted-foreground\">\n                <div>\n                  {loading ? uploadingFile?.name : currentContent.content}\n                </div>\n\n                {loading && !isImage && (\n                  <div className=\"mt-1 flex items-center gap-1.5\">\n                    <div>{formatBytes(uploadingFile?.size ?? 0)}</div>\n                    <div>–</div>\n                    <div className=\"flex items-center\">\n                      <Spinner className=\"mr-1 size-3.5\" />\n                      {progress ?? 0}%\n                    </div>\n                  </div>\n                )}\n              </div>\n            </div>\n          )}\n\n          {isImage && loading && (\n            <ImageProgress\n              file={uploadingFile}\n              imageRef={imageRef}\n              progress={progress}\n            />\n          )}\n\n          {children}\n        </PlateElement>\n      );\n    }\n  )\n);\n\nexport function ImageProgress({\n  className,\n  file,\n  imageRef,\n  progress = 0,\n}: {\n  file: File;\n  className?: string;\n  imageRef?: React.RefObject<HTMLImageElement>;\n  progress?: number;\n}) {\n  const [objectUrl, setObjectUrl] = useState<string | null>(null);\n\n  useEffect(() => {\n    const url = URL.createObjectURL(file);\n    setObjectUrl(url);\n\n    return () => {\n      URL.revokeObjectURL(url);\n    };\n  }, [file]);\n\n  if (!objectUrl) {\n    return null;\n  }\n\n  return (\n    <div className={cn('relative', className)} contentEditable={false}>\n      <img\n        ref={imageRef}\n        className=\"h-auto w-full rounded-sm object-cover\"\n        alt={file.name}\n        src={objectUrl}\n      />\n      {progress < 100 && (\n        <div className=\"absolute bottom-1 right-1 flex items-center space-x-2 rounded-full bg-black/50 px-1 py-0.5\">\n          <Spinner />\n          <span className=\"text-xs font-medium text-white\">\n            {Math.round(progress)}%\n          </span>\n        </div>\n      )}\n    </div>\n  );\n}\n\nexport function formatBytes(\n  bytes: number,\n  opts: {\n    decimals?: number;\n    sizeType?: 'accurate' | 'normal';\n  } = {}\n) {\n  const { decimals = 0, sizeType = 'normal' } = opts;\n\n  const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];\n  const accurateSizes = ['Bytes', 'KiB', 'MiB', 'GiB', 'TiB'];\n\n  if (bytes === 0) return '0 Byte';\n\n  const i = Math.floor(Math.log(bytes) / Math.log(1024));\n\n  return `${(bytes / Math.pow(1024, i)).toFixed(decimals)} ${\n    sizeType === 'accurate'\n      ? (accurateSizes[i] ?? 'Bytest')\n      : (sizes[i] ?? 'Bytes')\n  }`;\n}\n",
      "path": "plate-ui/media-placeholder-element.tsx",
      "target": "components/plate-ui/media-placeholder-element.tsx",
      "type": "registry:ui"
    },
    {
      "content": "import * as React from 'react';\n\nimport { isRedirectError } from 'next/dist/client/components/redirect';\nimport { toast } from 'sonner';\nimport { z } from 'zod';\n\nexport interface UploadedFile {\n  key: string;\n  appUrl: string;\n  name: string;\n  size: number;\n  type: string;\n  url: string;\n}\n\nexport function useUploadFile() {\n  const [uploadedFile, setUploadedFile] = React.useState<UploadedFile>();\n  const [uploadingFile, setUploadingFile] = React.useState<File>();\n  const [progress, setProgress] = React.useState<number>(0);\n  const [isUploading, setIsUploading] = React.useState(false);\n\n  async function uploadThing(file: File) {\n    setIsUploading(true);\n    setUploadingFile(file);\n\n    try {\n      // Mock upload for unauthenticated users\n      // toast.info('User not logged in. Mocking upload process.');\n      const mockUploadedFile = {\n        key: 'mock-key-0',\n        appUrl: `https://mock-app-url.com/${file.name}`,\n        name: file.name,\n        size: file.size,\n        type: file.type,\n        url: URL.createObjectURL(file),\n      } as UploadedFile;\n\n      // Simulate upload progress\n      let progress = 0;\n\n      const simulateProgress = async () => {\n        while (progress < 100) {\n          await new Promise((resolve) => setTimeout(resolve, 100));\n          progress += 2;\n          setProgress(Math.min(progress, 100));\n        }\n      };\n\n      await simulateProgress();\n\n      setUploadedFile(mockUploadedFile);\n\n      return mockUploadedFile;\n    } catch (error) {\n      const errorMessage = getErrorMessage(error);\n\n      const message =\n        errorMessage.length > 0\n          ? errorMessage\n          : 'Something went wrong, please try again later.';\n\n      toast.error(message);\n    } finally {\n      setProgress(0);\n      setIsUploading(false);\n      setUploadingFile(undefined);\n    }\n  }\n\n  return {\n    isUploading,\n    progress,\n    uploadFile: uploadThing,\n    uploadedFile,\n    uploadingFile,\n  };\n}\n\nexport function getErrorMessage(err: unknown) {\n  const unknownError = 'Something went wrong, please try again later.';\n\n  if (err instanceof z.ZodError) {\n    const errors = err.issues.map((issue) => {\n      return issue.message;\n    });\n\n    return errors.join('\\n');\n  } else if (err instanceof Error) {\n    return err.message;\n  } else if (isRedirectError(err)) {\n    throw err;\n  } else {\n    return unknownError;\n  }\n}\n\nexport function showErrorToast(err: unknown) {\n  const errorMessage = getErrorMessage(err);\n\n  return toast.error(errorMessage);\n}\n",
      "path": "lib/uploadthing/uploadthing.ts",
      "target": "components/plate-ui/uploadthing.ts",
      "type": "registry:ui"
    }
  ],
  "name": "media-placeholder-element",
  "registryDependencies": [],
  "type": "registry:ui"
}