Skip to content

Table Block: Preserve Column Alignment when Pasting Markdown Tables #69322

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
merged 5 commits into from
Apr 10, 2025
Merged

Table Block: Preserve Column Alignment when Pasting Markdown Tables #69322

merged 5 commits into from
Apr 10, 2025

Conversation

Sukhendu2002
Copy link
Contributor

@Sukhendu2002 Sukhendu2002 commented Feb 26, 2025 •
edited
Loading

What?

Closes: #69319

This PR improves the Table block by making sure column alignments are preserved when pasting Markdown tables.

Testing Instructions

  1. Open the editor in a post or page.
  2. Copy and paste this Markdown table into the editor:
| A - Left | B - Centered | C - Right | D - None |
| :------- | :----------: | --------: | -------- |
| 100      |     150      |       200 | 250      |
| 200      |     250      |       300 | 350      |
| 300      |     350      |       400 | 450      |
| 400      |     450      |       500 | 550      |
| 500      |     550      |       600 | 650      |
  1. The table should appear in the editor with the correct column alignments.

Screenshots or screencast

Before After
Screenshot 2025-02-26 at 3 52 03 PM Screenshot 2025-02-26 at 3 51 33 PM

@Sukhendu2002 Sukhendu2002 marked this pull request as ready for review February 26, 2025 10:52
@github-actions GitHub Actions
Copy link

github-actions bot commented Feb 26, 2025 •
edited
Loading

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 props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: Sukhendu2002 <sukhendu2002@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: dcalhoun <dpcalhoun@git.wordpress.org>
Co-authored-by: stronenv <vevas@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

@t-hamano t-hamano added [Type] Enhancement A suggestion for improvement. [Block] Table Affects the Table Block labels Feb 27, 2025
t-hamano
t-hamano reviewed Apr 9, 2025
View reviewed changes
Copy link
Contributor

@t-hamano t-hamano left a comment

Choose a reason for hiding this comment

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

Sorry for the late reply.

I'm not sure why we need to use the getAlignmentFromStyle() function to extract the text alignment style.

Can't we extract simply like this?

gutenberg/packages/block-library/src/paragraph/transforms.js

Lines 26 to 34 in e49849c

const { textAlign } = node.style || {};
if (
textAlign === 'left' ||
textAlign === 'center' ||
textAlign === 'right'
) {
attributes.align = textAlign;
}

Additionally, it would be good to add a unit test here:

gutenberg/packages/blocks/src/api/raw-handling/test/paste-handler.js

Line 64 in e49849c

describe( 'pasteHandler', () => {

@Sukhendu2002
Copy link
Contributor Author

You're right! I've simplified the implementation and also added a unit test.

t-hamano
t-hamano reviewed Apr 9, 2025
View reviewed changes
@t-hamano
Copy link
Contributor

t-hamano commented Apr 9, 2025

I'm not familiar with the native app, but I think we need to update this field to fix the Mobile unit test:

gutenberg/packages/block-library/src/table/transforms.native.js

Line 8 in f23eaaa

supportedMobileTransforms: [],

transformationCategories.richText is probably correct, but I'm not sure 🤔

cc @dcalhoun @geriux We are trying to preserve column alignment when pasting table HTML that has alignment applied. However, mobile unit tests are failing, with the align attribute being undefined.

@dcalhoun
Copy link
Member

dcalhoun commented Apr 9, 2025 •
edited
Loading

cc @dcalhoun @geriux We are trying to preserve column alignment when pasting table HTML that has alignment applied. However, mobile unit tests are failing, with the align attribute being undefined.

I believe the test failure stems from subtle differences in global Document implementations between web and native mobile; the latter relies upon rudimentary implementations provided by a library.

For this particular context, the paste-handler ultimately relies upon createHTMLDocument. I do not see a simple solution at this time, and I cannot dedicate additional time researching, unfortunately. My recommendation is to disable the paste-handler test for the native editor.

diff --git a/test/native/jest.config.js b/test/native/jest.config.js
index 7123275873..d91d3fd5a3 100644
--- a/test/native/jest.config.js
+++ b/test/native/jest.config.js
@@ -27,6 +27,9 @@ const RAW_HANDLING_UNSUPPORTED_UNIT_TESTS = [
 	'figure-content-reducer',
 	'normalise-blocks',
 	'image-corrector',
+	// Disabled due to jsdom-jscore-rn limitations
+	// See: https://github.com/WordPress/gutenberg/pull/69322#issuecomment-2789510963
+	'paste-handler',
 ];
 
 module.exports = {

Additional context: the Table block type is unsupported in the native mobile editor, so the proposed changes should have no impact on the native mobile editor.

@t-hamano
Copy link
Contributor

t-hamano commented Apr 9, 2025

@dcalhoun Thank you for the feedback!

@Sukhendu2002 Can we use the following approach?

My recommendation is to disable the paste-handler test for the native editor.

@Sukhendu2002 Sukhendu2002 requested a review from t-hamano April 9, 2025 16:21
t-hamano
t-hamano approved these changes Apr 10, 2025
View reviewed changes
Copy link
Contributor

@t-hamano t-hamano left a comment

Choose a reason for hiding this comment

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

LGTM!

@t-hamano t-hamano merged commit 19c58af into WordPress:trunk Apr 10, 2025
59 checks passed
@github-actions github-actions bot added this to the Gutenberg 20.7 milestone Apr 10, 2025
chriszarate pushed a commit to chriszarate/gutenberg that referenced this pull request Jul 1, 2025
@Sukhendu2002 @t-hamano
@dcalhoun @chriszarate
Table Block: Preserve Column Alignment when Pasting Markdown Tables (W…
7e1039a 
…ordPress#69322)

* Preserve column alignment when pasting Markdown tables

* Simplify column alignment extraction and add unit tests

* Rename markdownTableHTML variable and reorder test cases

* Disable paste-handler test in native

* Update test description

Co-authored-by: Sukhendu2002 <sukhendu2002@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: dcalhoun <dpcalhoun@git.wordpress.org>
Co-authored-by: stronenv <vevas@git.wordpress.org>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@t-hamano t-hamano t-hamano approved these changes

@ajitbohra ajitbohra Awaiting requested review from ajitbohra ajitbohra is a code owner

@fabiankaegy fabiankaegy Awaiting requested review from fabiankaegy fabiankaegy is a code owner

Assignees
No one assigned
Labels
[Block] Table Affects the Table Block [Type] Enhancement A suggestion for improvement.
Projects
None yet
Milestone
Gutenberg 20.7
Development

Successfully merging this pull request may close these issues.

Column alignment for table block when pasting Markdown
3 participants
@Sukhendu2002 @t-hamano @dcalhoun