Skip to content

Strip <img> tags from pasted HTML in TipTap editor#5897

Merged
marcellamaki merged 1 commit into
learningequality:hotfixesfrom
rtibbles:tiptap-paste-strip-images
May 12, 2026
Merged

Strip <img> tags from pasted HTML in TipTap editor#5897
marcellamaki merged 1 commit into
learningequality:hotfixesfrom
rtibbles:tiptap-paste-strip-images

Conversation

@rtibbles
Copy link
Copy Markdown
Member

Summary

Strips every <img> tag from HTML pasted into the TipTap editor. Pastes from Google Docs, web pages, and other rich-text sources previously left remote https://... image references in the saved markdown, which blocked channel publish per #5895.

The transformer also subsumes the existing Word/Office cleanup that previously only ran on the toolbar Paste button — native Ctrl-V paste now gets the same treatment.

Users who want an image in the editor continue to use the existing upload flow (toolbar, drag-and-drop, or paste-image-data), which routes through imageProcessor.processFile and produces a checksum-backed image.

References

Reviewer guidance

Reproducer (matches #5895):

  1. Open an exercise's TipTap editor.
  2. Copy content from https://wiki.c2.com/?TextFormattingExamples (the page pcenov reproduced from).
  3. Paste into the editor.
  4. Image disappears; text and formatting survive.
  5. Channel publishes without the Text editor - Cannot publish a channel because of an exercise with a lot of formatted text #5895 failure.

Verified locally:

  • Paste from the c2 wiki page above against the dev server.
  • Paste from Google Docs.

Also check:

  • Toolbar Paste button (dropdown by formatting controls) — same behavior; previously had Word cleanup but no <img> strip.
  • Word paste regression — MSO comments, mso-* styles, Mso* classes still dropped.
  • Drag-and-drop and toolbar image insert unaffected (they go through imageHandler, not the paste path).

AI usage

Used Claude (Opus 4.7) to brainstorm scope, write a spec and implementation plan, and drive the TDD implementation (27 unit tests, then implementation). I made scope decisions throughout (strip-only vs fetch+upload; refactor into the transformer pipeline), reviewed each diff before commit, and ran the manual paste/publish verification against the dev server.

Pasted <img> tags survived into the editor doc and the saved markdown.
Remote image references then blocked channel publish (learningequality#5895).

Adds a single sync transformer (transformPastedHTML) wired into both
native paste (via editorProps.transformPastedHTML) and the toolbar
Paste button. Existing Word/Office sanitization is preserved and now
applies to both paths — previously only the toolbar ran it.

Fixes learningequality#5895
Copy link
Copy Markdown
Member

@marcellamaki marcellamaki left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Was able to follow the reviewer guidance here as described. Approving for @pcenov 's further testing/confirmation tomorrow! 😅

@marcellamaki marcellamaki merged commit 4a5f585 into learningequality:hotfixes May 12, 2026
20 checks passed
@rtibbles rtibbles mentioned this pull request May 13, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants