Typix LogoTypix
Extensions

Drag & Drop Paste

Drop or paste images directly into the editor

Captures file drop and image paste events and inserts the resulting images into the editor. The default handler base64-encodes the image — override it to upload to your CDN.

Install

pnpm add @typix-editor/extension-drag-drop-paste

Live demo

Insert images programmatically

import { INSERT_IMAGE_COMMAND } from "@typix-editor/extension-drag-drop-paste";

editor.lexical.dispatchCommand(INSERT_IMAGE_COMMAND, {
  src: "https://example.com/image.png",
  altText: "A picture",
});

Upload pattern

To upload to your backend instead of base64-encoding:

DragDropPasteExtension({
  onFile: async (file) => {
    const url = await uploadToS3(file);
    return { src: url, altText: file.name };
  },
});

On this page