Media File Element

Component

About

A file attachment element for the Plate editor that renders a downloadable file link with an editable caption.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Media File Element to your project and fits it to your theme.

Code

How Media File Element is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import * as React from "react";

import { FileElement } from "@/components/ui/media-file-node";

import { FilePlugin } from "@platejs/media/react";
import { Plate, PlateContent, usePlateEditor } from "platejs/react";

export default function Demo() {
  const editor = usePlateEditor({
    plugins: [FilePlugin.withComponent(FileElement)],
    value: [
      {
        children: [{ text: "" }],
        name: "sample.pdf",
        type: "file",
        url: "https://s26.q4cdn.com/900411403/files/doc_downloads/test.pdf",
      },
    ],
  });

  return (
    <div className="p-8">
      <Plate editor={editor}>
        <PlateContent
          className="rounded-md border p-4 focus-visible:outline-none"
          readOnly
        />
      </Plate>
    </div>
  );
}