Notion-style document covers

Add a full-width cover image at the top of your document, similar to Notion. Requires notionBased mode to be enabled (it is by default).

--Upload cover -- click the cover area to upload an image from your device.
--Reposition -- drag the vertical slider (0-100%) to adjust the visible portion of the cover image.
--Remove cover -- delete the cover image entirely.

Programmatic control

Actions

import { EditorActions, useEditorDispatch } from "@/lib"

const dispatch = useEditorDispatch()

// Set cover image
dispatch(EditorActions.setCoverImage("/path/to/image.jpg"))

// Update position (0-100)
dispatch(EditorActions.updateCoverImagePosition(35))

// Remove cover
dispatch(EditorActions.removeCoverImage())

Tables

Context Menu and Links