Skip to content

fix(clipboard): preserve rich-text formatting on paste - #284

Open
alainpaulinn wants to merge 1 commit into
ThisIs-Developer:mainfrom
alainpaulinn:fix/clipboard-rich-text-formatting
Open

alainpaulinn wants to merge 1 commit into
ThisIs-Developer:mainfrom
alainpaulinn:fix/clipboard-rich-text-formatting

Conversation

@alainpaulinn

Copy link
Copy Markdown

What changed

When copying preview content (Ctrl+C or context menu), the clipboard HTML now includes inline computed styles on block-level elements so that rich-text targets preserve visual formatting.

Fixes #283.

Why it changed

The custom copy handler added in v3.10.4 (commit e9029c5) sanitizes clipboard HTML through DOMPurify with FORBID_ATTR including class. This strips all class-driven styling, causing pasted content to lose code-block backgrounds, table borders, paragraph spacing, monospace fonts, and blockquote indentation.

Before v3.10.4 the browser's native copy serialized the DOM with resolved computed styles. This fix restores that behavior within the custom handler.

How it works

Before the DOMPurify sanitization pass, the cloned fragment is rendered off-screen so that getComputedStyle can resolve inherited preview styles. A curated set of CSS properties (background, border, font, padding, margin, etc.) is then baked into inline style attributes on block and structural elements: pre, code, blockquote, table/td/th, headings, paragraphs, list items, and similar.

Semantic inline elements (strong, em, a) are intentionally left unstyled because rich-text targets already understand their meaning and adding redundant inline styles causes some paste handlers to flatten them into styled <span> elements.

How it was tested

  • npm run build passes.
  • All 33 Chromium clipboard e2e tests pass.
  • Manually verified copy/paste into Google Docs and a contentEditable div retains code-block styling, table borders, heading sizes, list formatting, and blockquote indentation.

Files changed

File Purpose
script.js Add inlineComputedStylesForClipboard() helper and restructure getPreviewSelectionClipboardContent to render off-screen before sanitizing
desktop-app/resources/js/script.js Mirror the same fix for the desktop build
tests/e2e/clipboard.spec.js Adjust HTML assertions to use regex patterns tolerant of inline style attributes

…ng on paste

The custom copy handler added in v3.10.4 intercepts preview selections
and sanitizes the HTML through DOMPurify with FORBID_ATTR including
'class'.  This strips all class-driven styling, so pasting into rich-text
targets like Word or Google Docs loses code-block backgrounds, table
borders, paragraph spacing, and monospace fonts.

Before the DOMPurify pass, render the cloned fragment off-screen and
bake the resolved computed styles into inline style attributes on block
and structural elements (pre, code, blockquote, table, headings, lists,
etc.).  Semantic inline tags (strong, em, a) are left unstyled so paste
handlers keep them as native formatting rather than flattening them into
styled spans.

Existing clipboard tests are adjusted to use regex assertions that
tolerate the new style attributes on structural elements.
@vercel

vercel Bot commented Oct 20, 2026

Copy link
Copy Markdown

@alainpaulinn is attempting to deploy a commit to the Developer Labs Team on Vercel.

A member of the Team first needs to authorize it.

@vercel

vercel Bot commented Oct 20, 2026 •

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated
markdown-viewer Ready Ready Preview Oct 20, 2026 11:59am UTC

@ThisIs-Developer ThisIs-Developer added 🐛 bug Something is broken or not working as expected. 🎨 ui/ux User interface, layout, interaction, usability, or visual improvements. labels Oct 22, 2026 — with ChatGPT Codex Connector

This branch was successfully deployed

1 active deployment
Preview — f4a59910 Deployed Oct 20, 2026 by vercel[bot]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

🐛 bug Something is broken or not working as expected. 🎨 ui/ux User interface, layout, interaction, usability, or visual improvements.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Rich-text paste loses formatting after v3.10.4 clipboard changes

2 participants