Skip to content

Notify the user when images are stripped on paste #5901

@rtibbles

Description

@rtibbles

This issue is not open for contribution. Visit Contributing guidelines to learn about the contributing process and how to find suitable issues.

Overview

After #5897, the TipTap editor silently strips <img> tags from pasted HTML — users have no feedback that content they thought they were pasting was removed. Add a brief, user-visible affordance (toast or inline indicator) shown when one or more images were stripped from a paste, so users understand why their pasted content looks different from the source.

Complexity: Low
Target branch: unstable

Context

#5897 was a hotfix; adding a user-visible string wasn't possible without going through the string-freeze process. This issue captures the affordance for unstable.

The Change

When transformPastedHTML strips one or more <img> tags from a paste, surface a brief notification — single toast per paste batch, not per image. Text along the lines of "N image(s) were removed from your paste." Use Studio's existing notification component.

The transformer needs to surface a count to its callers (both editorProps.transformPastedHTML and the toolbar handlePaste). The notification is triggered from those call sites.

How to Get There

  1. Open an exercise's TipTap editor.
  2. Paste HTML containing one or more remote <img> tags (e.g. from https://wiki.c2.com/?TextFormattingExamples).
  3. Expect: a toast/notification indicates the images were removed. The pasted text content survives intact.

Out of Scope

  • Changing the strip behavior. Images are still removed; only the notification is added.
  • Per-image affordances (inline placeholders, retry buttons). Single per-paste toast only.
  • Notifying about the Word/Office cleanup the same transformer performs — only the <img> strip is user-visible enough to warrant notification.

Acceptance Criteria

General

  • transformPastedHTML surfaces a count of stripped <img> tags to its callers.
    • Either return shape {html, strippedImgCount} plus update both call sites, or write the count to a transient storage slot the caller reads.
  • Native paste path (editorProps.transformPastedHTML in useEditor.js) triggers a toast when count > 0.
  • Toolbar Paste button path (handlePaste in useToolbarActions.js) triggers the same toast when count > 0.
  • Toast is fired once per paste batch, not per image.
  • New i18n string added for the toast message (with a count placeholder, e.g. ICU {count, plural, ...}).
  • Toast uses Studio's existing snackbar / notification component (check KSnackbar from kolibri-design-system or whatever the editor surrounding chrome currently uses).

Testing

  • Unit test: transformPastedHTML returns/surfaces count = N when input has N <img> tags.
  • Unit test: count = 0 → no notification triggered.
  • Component test or manual: toast appears with correct count after a paste containing imgs.

References

AI usage

Used Claude (Opus 4.7) to draft this issue from the spec written during #5897's brainstorming. I reviewed each section and adjusted scope and phrasing.

Metadata

Metadata

Assignees

No one assigned

    Type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions