Repository navigation
fix(clipboard): preserve rich-text formatting on paste - #284
Open
alainpaulinn wants to merge 1 commit into
Open
alainpaulinn wants to merge 1 commit into
alainpaulinn wants to merge 1 commit into
Conversation
…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.
|
@alainpaulinn is attempting to deploy a commit to the Developer Labs Team on Vercel. A member of the Team first needs to authorize it. |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
This branch was successfully deployed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
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_ATTRincludingclass. 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
getComputedStylecan resolve inherited preview styles. A curated set of CSS properties (background, border, font, padding, margin, etc.) is then baked into inlinestyleattributes 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 buildpasses.Files changed
script.jsinlineComputedStylesForClipboard()helper and restructuregetPreviewSelectionClipboardContentto render off-screen before sanitizingdesktop-app/resources/js/script.jstests/e2e/clipboard.spec.js