Modal

Open the editor over your page with one call, and close it from code or by the user.

Open It

openEditor opens the editor in its own host on document.body and returns close. It works from either entry.

import { openEditor } from '@embededitor/full/react';

const editPhoto = (file: File) => {
	const { close } = openEditor({
		onClose: () => {
			console.info('editor closed');
		},
		onProcess: ({ dest }) => {
			console.info('saved', dest.name);
		},
		src: file
	});

	return close;
};

import { openEditor } from '@embededitor/full/standalone';

const editPhoto = file => {
	const { close } = openEditor({
		onClose: () => {
			console.info('editor closed');
		},
		onProcess: ({ dest }) => {
			console.info('saved', dest.name);
		},
		src: file
	});

	return close;
};

openEditor takes every prop except layout. It touches the DOM, so call it from an event handler or an effect, never during a server render.

How It Looks

The editor opened by openEditor from a media library page, filling the window: Close at the top left, and a mountain lake with Vivid Warm picked in the filter strip

Screen	Shows as
640 px wide or more	A dialog over the page.
Under 640 px	A bottom sheet that slides in and out.

The page behind it doesn’t scroll and comes back where it was. Pinch and double-tap zoom of the page are blocked while it’s open.

Add viewport-fit=cover to the page’s viewport meta tag, so the sheet keeps clear of the notch and the home indicator.

Closing It

How	What happens
`close()`	Closes it from code.
Close button (the X)	Closes it.
Escape	Closes it, unless `closeOnEscape` is `false`. Something open inside the editor (a field’s draft, Reset’s confirm) closes first, and in Annotate Escape never closes the editor.
Save	Closes it once `onProcess` returns.

onClose is called once the editor has gone, however it closed.

Escape

Set closeOnEscape: false and only Close and Save close the editor. Escape keeps its other jobs, such as dropping a selection.

editor.ts

openEditor({
	closeOnEscape: false,
	src: '/photos/sunset.jpg'
});

When Save Fails

If onProcess throws, the error is logged with console.error, Save shows it failed, and the modal stays open so the user can save again. onProcessError isn’t called: the error is your callback’s, not the editor’s.

Inline

Put the editor in your own layout.

openEditor

The full signature.

Get Started

Frameworks

Ways to Show It

Features

Customization

Saving

Resources

Open It

How It Looks

Closing It

Escape

When Save Fails

Inline

openEditor

​Open It

​How It Looks

​Closing It

​Escape

​When Save Fails

Inline

openEditor

Open It

How It Looks

Closing It

Escape

When Save Fails