Inline Image Upload in the Lesson Editor

Starting in v1.0.71, instructors can insert images directly into the lesson editor body without leaving the editing interface. Images are uploaded to Vercel Blob in the background and embedded as native image nodes in the lesson's structured content.

How It Works

When you drop or paste an image into the TipTap editor, the platform:

1. Intercepts the file or clipboard data inside the editor.
2. Uploads the image to Vercel Blob storage.
3. Inserts a native TipTap image node at the cursor position, referencing the uploaded image's durable Blob URL.
4. Saves the image node as part of the lesson's content JSON when the lesson is saved.

Learners see the image rendered inline when they view the published lesson.

Inserting an Image

Drag and Drop

1. Open a lesson in the editor.
2. Drag an image file from your desktop or file manager.
3. Drop it anywhere inside the editor body.
4. The image uploads immediately and appears at the drop location.

Paste from Clipboard

1. Copy an image to your clipboard (e.g. screenshot, copied image from a browser or design tool).
2. Click inside the editor body to place your cursor.
3. Press Ctrl+V (Windows/Linux) or ⌘V (macOS).
4. The image uploads and is embedded at the cursor position.

Storage and Persistence

• Uploaded images are stored in Vercel Blob and served via a permanent, publicly accessible URL.
• The URL is embedded directly in the lesson content JSON as a native image node — no external links or manual URL entry is needed.
• Images persist independently of lesson draft/publish state; the Blob URL is stable from the moment of upload.

Supported Formats

Any image format supported by your browser can be dragged or pasted — common formats include PNG, JPEG, GIF, and WebP.

Availability

Inline image upload is available to all instructors in the lesson editor as of v1.0.71. No additional configuration is required.