Editor.Section

Editor.Section is the unit of content. Mount it once inside Editor.Canvas; the editor iterates every Section on the active page and renders one per entry.

Usage

<Editor.Canvas>
    <Editor.Section />
</Editor.Canvas>

That single mount renders every section on the current page. The component reads from context - no sectionId prop, no manual iteration.

What it does

Per section, Editor.Section wires up:

• Drag - pointer down + move. Dispatches UPDATE_SECTION with new (x, y).
• Resize - three handles (right, bottom, bottom-right). Dispatches incremental UPDATE_SECTION calls.
• Image upload - drop a file or click the empty state. The reader produces a data URL, which becomes section.imageUrl.
• Selection - click to select; click the canvas background to deselect.
• Floating toolbar - fit, duplicate, delete, layer-order buttons appear on hover and stay visible while selected.
• Snap - drag respects the snap engine (page margins, section edges, page guides).

All gestures are suppressed in readOnly mode.

Examples

Custom renderer per section type

The default Editor.Section ships with image / text / shape / drawing / frame renderers (an image with a maskShape renders as a shaped placeholder slot, and a frame draws behind its children). If you need a custom variant, render your own component inside the canvas and skip Editor.Section:

<Editor.Canvas>
    {sections.map((s) =>
        s.type === 'custom' ? (
            <MyCustomSection key={s.id} section={s} />
        ) : (
            <Editor.Section key={s.id} />
        ),
    )}
</Editor.Canvas>

This is rarely needed - most extensions are better expressed as a new section type with an ImageRenderer override (see custom image renderer).

API Reference

Related

• Canvas - the parent surface
• SelectionBounds - multi-select rectangle
• Layers - z-index actions