Paste a Screenshot into a Message

ProNew

Pasting an image into a message box attaches it as a thumbnail chip below the text, with a remove button and the alt text field for it, while pasted text still pastes as text. Use this when people explain problems with screenshots.

Customize

Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.

maxImages4

Guide and examples

When to use it

A comment, ticket or chat box where a screenshot is the fastest way to explain something.

Do not use it when: Do not intercept text pastes; this only reacts when the clipboard contains an image file.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Default	Description
`maxImages`	`number`	`4`	Most images per message.
`onSend`	`({ text, images: { file, alt }[] }) => void`	-	Called on Send.

Accessibility

Pasting only reacts to image files in the clipboard; text pastes are untouched. Each image gets a number-based fallback alt and a text field to describe it, so the sent message can carry real alt text.
Attached images are a labelled list; the remove button names the image ("Remove screenshot 2"), and attach, remove, limit and send results are announced in a polite status.
Object URLs are revoked when an image is removed and when the component unmounts, so memory is not leaked.

Testing

The pattern ships with a Testing Library test (paste-screenshot-attachment.test.tsx) that covers: its main behaviour, the keyboard path and the error or empty states.

Guide and examples

When to use it

A comment, ticket or chat box where a screenshot is the fastest way to explain something.

Do not use it when: Do not intercept text pastes; this only reacts when the clipboard contains an image file.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Default	Description
`maxImages`	`number`	`4`	Most images per message.
`onSend`	`({ text, images: { file, alt }[] }) => void`	-	Called on Send.

Accessibility

Pasting only reacts to image files in the clipboard; text pastes are untouched. Each image gets a number-based fallback alt and a text field to describe it, so the sent message can carry real alt text.
Attached images are a labelled list; the remove button names the image ("Remove screenshot 2"), and attach, remove, limit and send results are announced in a polite status.
Object URLs are revoked when an image is removed and when the component unmounts, so memory is not leaked.

Testing

The pattern ships with a Testing Library test (paste-screenshot-attachment.test.tsx) that covers: its main behaviour, the keyboard path and the error or empty states.