Image

The Image extension adds full image support: insertion via URL or file upload, resizing, flipping, and alignment.

Import

import { Image } from 'ritext/extension/image';

Usage

const extensions = [Image];

Features

Insert image via URL or file upload
Resize images by dragging
Flip horizontally or vertically
Align left, center, or right
Optional alt text field
Custom upload handler

Configuration

Image.configure({
  upload: async (file) => {
    // Upload file to your server and return a URL
    const formData = new FormData();
    formData.append('file', file);
    const res = await fetch('/api/upload', { method: 'POST', body: formData });
    const { url } = await res.json();
    return url;
  },
  maxSize: 5 * 1024 * 1024,  // 5MB
  enableAlt: true,
  defaultInline: false,
})

Options

Prop

Type

Image Attributes

Images in the document store these attributes:

Attribute	Type	Description
`src`	`string`	Image URL
`alt`	`string`	Alt text
`width`	`number \| null`	Rendered width
`height`	`number \| null`	Rendered height
`inline`	`boolean`	Whether image is inline
`flipX`	`boolean`	Flipped horizontally
`flipY`	`boolean`	Flipped vertically
`align`	`"left" \| "center" \| "right"`	Image alignment
`borderRadius`	`number \| null`	Border radius in pixels — persisted to `data-border-radius` and rendered as an inline `border-radius` style

Without Upload

If you omit the upload option, only URL-based image insertion is available:

const extensions = [Image];
// Users can only paste image URLs