Name: Typix
Author: Diyorbek Juraev

The Drag Drop Paste extension handles image files dragged, dropped, or pasted into the editor with validation, size limits, and custom upload support.

Demo

Loading preview…

import {  createEditorConfig,  defaultExtensionNodes,  defaultTheme,  EditorContent,  EditorRoot,} from "@typix-editor/react";import { DragDropPasteExtension } from "@typix-editor/extension-drag-drop-paste";import { Toolbar } from "./Toolbar";const config = createEditorConfig({  extensionNodes: defaultExtensionNodes,  theme: defaultTheme,});export default function DragDropPasteExample() {  return (    <EditorRoot config={config}>      <div className="editor-container">        <Toolbar />        <EditorContent placeholder="Try dragging or pasting an image here..." />      </div>      <DragDropPasteExtension        acceptedTypes={["image/png", "image/jpeg"]}        maxFileSize={5 * 1024 * 1024}        onFilesAdded={async (files) => {          const urls = await uploadFiles(files);          return urls.map((src) => ({ src }));        }}        onValidationError={(file, reason) => {          console.warn(reason);        }}      />    </EditorRoot>  );}

Installation

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

npm install @typix-editor/extension-drag-drop-paste

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

Setup

import { DragDropPasteExtension } from '@typix-editor/extension-drag-drop-paste';

function MyEditor() {
  return (
    <EditorRoot>
      <EditorContent />
      <DragDropPasteExtension />
    </EditorRoot>
  );
}

With custom upload handler

<DragDropPasteExtension
  acceptedTypes={['image/png', 'image/jpeg']}
  maxFileSize={5 * 1024 * 1024}
  onFilesAdded={async (files) => {
    const urls = await uploadToS3(files);
    return urls.map(url => ({ src: url }));
  }}
  onValidationError={(file, reason) => {
    toast.error(reason);
  }}
/>

Props

Prop	Type	Default	Description
`acceptedTypes`	`string[]`	Image MIME types	Accepted file MIME types
`maxFileSize`	`number`	`10485760` (10MB)	Maximum file size in bytes
`priority`	`CommandListenerPriority`	`COMMAND_PRIORITY_LOW`	Lexical command priority
`onFilesAdded`	`(files: File[]) => Promise<InsertImagePayload[]>`	—	Custom upload handler
`onValidationError`	`(file: File, reason: string) => void`	—	Validation error callback
`transformResult`	`(file: File, result: string) => InsertImagePayload`	—	Transform before inserting
`debug`	`boolean`	`false`	Enable debug logging

Exports

Export	Type	Description
`DragDropPasteExtension`	Component	The drag/drop/paste plugin
`DragDropPasteExtensionProps`	Type	Props type

Drag Drop Paste