Full media management

Adding media

--Toolbar upload -- click the media button in the editor toolbar to select images or videos from your device.
--Slash command -- type /image or /video to insert media blocks.
--Paste from clipboard -- paste images directly from your clipboard. The editor detects and handles media automatically.
--Drag from system -- drag files from your file manager directly into the editor.

Image operations

--Multi-select -- hold Ctrl/Cmd and click multiple images to select them.
--Group into flex -- selected images can be grouped into a side-by-side flex container.
--Reverse order -- reverse the display order of grouped images.
--Extract from group -- pull an image out of a group back to the normal flow.
--Captions and alt text -- add descriptive text to images for accessibility.
--Free positioning -- insert absolutely-positioned images via the Insert Components modal.

Custom upload handler

Upload handler

<Editor
  onUploadImage={async (file: File) => {
    const formData = new FormData()
    formData.append("image", file)
    const res = await fetch("/api/upload", {
      method: "POST",
      body: formData
    })
    const { url } = await res.json()
    return url
  }}
/>

Images are stored as base64 by default. Provide a custom upload handler for production use to avoid large document sizes.

Drag and Drop

Tables