feat: Add the PasteHTMLTableAsString extension

[rfgamaral]

Overview

This PR introduces the PasteHTMLTableAsString extension, which adds the ability to paste a table copied from a spreadsheet web app (e.g., Google Sheets, Microsoft Excel), along with tables rendered by GitHub Flavored Markdown (GFM), into the editor.

This extension will help fix an internal issue where some users copy a list of rows from a spreadsheet web app and paste them into Todoist expecting to be prompted to add each row as a separate task (as if they were pasting multiple lines of text).

PR Checklist

• Pull request title follows the Conventional Commits Specification

Test plan

• Open the preview Storybook deployed to Netlify
• Open the Rich-text → Default story
• Create a Google Sheet with a sample table (multiple columns/rows)
  • Copy and paste the table (or parts of it) into the editor
    • Observe that each row is pasted into the editor as paragraph
    • Observe that each column is separated by a character
• Create a Microsoft Excel document with a sample table (multiple columns/rows)
  • Copy and paste the table (or parts of it) into the editor
    • Observe that each row is pasted into the editor as paragraph
    • Observe that each column is separated by a character
• Create a Numbers (Apple) document with a sample table (multiple columns/rows)
  • Copy and paste the table (or parts of it) into the editor
    • Observe that each row is pasted into the editor as paragraph
    • Observe that each column is separated by a character

GFM test

• Open the preview Storybook deployed to Netlify

• Open the Rich-text → Default story

• Take the following Markdown table as input:

  H1	H2	H3
  A1	A2	A3
  B1	B2	B3
  C1	C2	C3

  • Copy and paste the table (or parts of it) into the editor
    • Observe that each row is pasted into the editor as paragraph
    • Observe that each column is separated by a character
    • Observe that formatting for the formatted cells is preserved

Bonus tests

• You can try the same as above for the Plain-text → Default story, and most of the behaviour should be very similar. The small difference is that a tabular space (i.e. \t) will be used, instead of ) to separate columns.
• Regardless of the number of columns copied, if all cells within a row are empty, that row should be discarded (i.e. not even an empty paragraph will be shown)
• Feel free to think of other edge cases that some users might use, and let me know if something doesn't work as you'd expect

Demos

Typist

firefox_6UqygIpEGf.mp4

Todoist

firefox_ym2sBbopth.mp4

[netlify]

✅ Deploy Preview for doist-typist ready!

Name	Link
🔨 Latest commit	f002629
🔍 Latest deploy log	https://app.netlify.com/sites/doist-typist/deploys/6486cfce7bb8970008c97cd5
😎 Deploy Preview	https://deploy-preview-290--doist-typist.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[frankieyan]

Looks good, @rfgamaral. Other than with multiple windows (which isn't possible in a spreadsheet application, so just markdown, I think), I can't find anything wrong.

I don't have excel, so I tested Numbers instead, and for some reason it favours pasting an image over html. Here is the clipboard's data: image

[rfgamaral]

@frankieyan Renamed the extension, and added support for multiple (GFM) tables, please take a second look when you can.

---

Looks good, @rfgamaral. Other than with multiple windows (which isn't possible in a spreadsheet application, so just markdown, I think), I can't find anything wrong.

Not sure I understand what you mean here...

I don't have excel, so I tested Numbers instead, and for some reason it favours pasting an image over html. Here is the clipboard's data: image

Hum, interesting one... I have so many questions and things I'd like to understand, maybe we can take a few minutes from our 1:1 tomorrow to dig a bit into this since I don't have access to Numbers?

[frankieyan]

Looks good, @rfgamaral. Other than with multiple windows (which isn't possible in a spreadsheet application, so just markdown, I think), I can't find anything wrong.

Not sure I understand what you mean here...

Lol, "tables" was what I meant 🤦

Hum, interesting one... I have so many questions and things I'd like to understand, maybe we can take a few minutes from our 1:1 tomorrow to dig a bit into this since I don't have access to Numbers?

For sure. I do see event.clipboardData.files in the clipboard data from Numbers, which isn't present when you copy from Google Sheets. If we decide that extracting the text from the table is more important than the image, perhaps we need a handlePaste handler in this plugin and return whether a table was detected?

[rfgamaral]

@frankieyan I fixed the issue where Numbers pasted an image instead of the text version of the table with the solution we discussed yesterday. Feel free to take a second look and test it on your side since I don't have a macOS device at my disposal.

However, I could not fix the Numbers table parsing, the HTML it outputs is really cumbersome to work with, and it would take a bit more effort to make it work (without breaking the current behaviour). We can revisit this in the future if it becomes a more prominent issue for our users.

[frankieyan]

Pasting from Numbers no longer pastes an image. The formatting does look way better/more accurate in the plain text kit vs the rich text kit, but let's go with this for now and see if there's any feedback from users.

[doistbot]

🎉 This PR is included in version 1.3.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀