Raw Handling: Treat non-semantic div as plain text on paste#77794
Open
Raw Handling: Treat non-semantic div as plain text on paste#77794
Conversation
VSCode (and similar editors) put markdown source inside nested <div> wrappers carrying only style attributes, which previously short-circuited the markdown converter and pasted the raw markdown syntax verbatim. Extend isPlain() to treat span/div wrappers without semantic attributes (class, id, role, data-*, aria-*) as plain so the markdown path runs, while still preserving wrappers that plugins may use to drive custom raw transforms.
|
Size Change: +134 B (0%) Total Size: 7.82 MB 📦 View Changed
ℹ️ View Unchanged
|
t-hamano
added
[Type] Bug
|
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
|
Flaky tests detected in e6804fe. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/25109280814
|
Contributor
There was a problem hiding this comment.
Pull request overview
This PR improves paste handling in @wordpress/blocks raw handling by treating certain non-semantic <div>/<span> wrapper HTML (commonly produced by editors like VSCode) as plain text, allowing the markdown conversion path to run and produce proper blocks.
Changes:
- Add detection for “non-semantic wrapper”
<div>/<span>elements (based on a limited set of attributes) and expandisPlain()accordingly. - Add unit tests for the updated
isPlain()behavior. - Add an integration fixture for VSCode-copied markdown and include it in the paste handler integration suite/snapshots.
Reviewed changes
Copilot reviewed 7 out of 7 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
packages/blocks/src/api/raw-handling/utils.ts |
Adds isNonSemanticWrapper() and expands isPlain() to treat nested <div>/<span> style wrappers as plain text. |
packages/blocks/src/api/raw-handling/test/utils.js |
Adds unit tests covering the new <div>/<span> wrapper behavior and semantic-attribute exclusions. |
test/integration/blocks-raw-handling.test.js |
Registers a new vscode-markdown fixture type in the existing fixture-driven test loop. |
test/integration/__snapshots__/blocks-raw-handling.test.js.snap |
Adds the inline-mode snapshot for the new vscode-markdown fixture. |
test/integration/fixtures/documents/vscode-markdown-in.html |
Adds representative VSCode HTML clipboard input (decorative nested wrappers). |
test/integration/fixtures/documents/vscode-markdown-in.txt |
Adds the corresponding plain-text markdown input. |
test/integration/fixtures/documents/vscode-markdown-out.html |
Adds the expected block output after markdown conversion. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
Clarify the JSDoc for isNonSemanticWrapper to enumerate the exact attributes treated as semantic, and add equivalent negative tests for <span> wrappers with semantic attributes to mirror the <div> coverage.
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?
This PR removes decorative
devandspanelements from pasted data, allowing more markdown data to be converted into blocks correctly.Why?
By ignoring a root
spanelement in clipboard data, #73019 treats it as plain text, allowing Grok markdown data to be converted into blocks. However, we discovered that Grok is not the only application that wraps markdown data in HTML elements. For example, markdown data copied from VSCode is found to be wrapped by nestedspananddivelements for styling purposes, as shown below:Details
How?
We cannot simply strip
spananddivelements as consumers might be implementing their own custom raw transformations, as noted in #73019 (comment). Instead, this PR determines if a wrapper is semantic based on specific attributes and removes only those elements considered to be for decoration.Testing Instructions
Screenshots or screencast
Before
before.mp4
After
after.mp4
Use of AI Tools
I had Claude implement the approach I devised, and I reviewed all of it myself.