Inline images

Aside from just styled text, the library offers much more. This includes inline images - pictures embedded straight into the text flow.

Inserting an image

You can insert it explicitly with the setImage ref method:

setImage(src: string, width: number, height: number)

• src - an absolute file path or a remote image URL.
• width / height - the size the image should render at.

The image gets inserted at the current selection, replacing any selected text.

const insertImage = () => {
  ref.current?.setImage('https://picsum.photos/320/160', 160, 80);
};

note

You are responsible for the width and height you pass - the editor does not measure the image for you, so if you want to preserve a picture's aspect ratio you need to compute it yourself before calling setImage.

When the source can't load

If the src can't be resolved - a broken URL, a missing file - the editor doesn't error out and renders a static placeholder in the image's place instead.

Try it out

Place the cursor in the input and insert an image. The first button inserts a real photo from Lorem Picsum at a matching size; the second points at a source that doesn't exist, so you get the fallback placeholder rather than a crash.

Loading…

info

Images can also arrive by pasting rather than through setImage - the editor surfaces those through the onPasteImages event, which hands you each image's URI, MIME type, and dimensions so you can upload or resize before inserting.

Handling image presses

When rendering content with EnrichedText, use onImagePress to react when the user taps an inline image. The callback receives the image's URI and dimensions. No visual feedback is applied on press.