fix(paste-markdown): Incorrect paste behaviour when HTML source is VSCode

[rfgamaral]

Overview

This fixes a long-standing issue when pasting rich-text (HTML) content copied from VS Code while using a Chromium based browser (other browsers don't have support to detect VS Code as the source of the content like Chromium does).

Note
I took the opportunity to refactor the PasteMarkdown extension slightly to make the code more clear and readable, but the downside is that it makes it harder to review the actual changes that fix the issue. With that in mind, I left comments in PR explaining what were the actual changes, everything else is pure refactor.

PR Checklist

• Pull request title follows the Conventional Commits Specification

Test plan

Preparation

• Open VS Code, create a new Markdown file
  • Make sure that Language Mode is set to Markdown
• Copy the following content and paste it into the Markdown file in VS Code:

  # Qui cum ad ignara intremuit volucres formidine
  
  ## Quidem pectus
  
  Lorem markdownum terraeque deos nocte novissima ego nepotem fraternis gaudere;
  ubi. Quem sim de sparsi auctor, est et an Iovis me lilia germanamque.
  
  - Lacrimaeque suaque ab inquit quos stolidarum omnia
  - Peregrina est nubes in levavit
  
  Sicaniam merguntque mentior vicem magis latices, et amara et manu expulit,
  venit. Et iube tamen verba et nihil [amantis dum
  vitibus](http://stat.com/etet.html) Ditis ad!
  

Core Test #1

• Open the preview Storybook deployed to Netlify on a Chromium based browser
• Open the Rich-text → Default story
• Copy the Markdown content that you pasted into VS Code from VS Code
  • It's important that the copied content comes from VS Code (and not GitHub)
• Paste it into the Rich-text editor on the preview Storybook with Cmd/Ctrl+V
  • Observe that the Markdown content is pasted with correct formatting
    • If you compare this with production, you'll see that formatting is lost
• Now, do the same but use the Cmd/Ctrl+Shift+V shortcut instead
  • Observe that the Markdown content is pasted with correct formatting (exactly as before)

Bonus Test

If you want to try this on Firefox/Safari, here's what you should expect...

• Open the preview Storybook deployed to Netlify on a Chromium based browser
• Open the Rich-text → Default story
• Copy the Markdown content that you pasted into VS Code from VS Code
  • It's important that the copied content comes from VS Code (and not GitHub)
• Paste it into the Rich-text editor on the preview Storybook with Cmd/Ctrl+V
  • Observe that the Markdown content is NOT pasted with correct formatting
    • If you compare this with production, you'll get the same result
    • As explained before, this is expected, because other browsers don't have support to detect VS Code as the source of the content like Chromium does
• Now, do the same but use the Cmd/Ctrl+Shift+V shortcut instead
  • Observe that the Markdown content is pasted with correct formatting
    • In this case it's expected to work because with this shortcut we are forcing the plain-text version from the clipboard data to be pasted instead, and we always handle this ourselves

[netlify]

✅ Deploy Preview for doist-typist ready!

Name	Link
🔨 Latest commit	2a2384c
🔍 Latest deploy log	https://app.netlify.com/sites/doist-typist/deploys/645e1039f37e36000729759d
😎 Deploy Preview	https://deploy-preview-260--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.

[rfgamaral]

This is one of the functional changes, which makes pasting content copied from VS Code work in Chromium browsers regardless if users have editor.copyWithSyntaxHighlighting set to true (default if not set), or false.

[rfgamaral]

This was the other functional change, the main one actually, which makes sure that multi-line Markdown copied from VS Code work is split correctly (in Chromium browsers) by inserting aline feed character between nodes.

[Bloomca]

Works as expected in Chrome 👍

It also works as expected in Firefox on Windows for me, even though it seems it shouldn't. But it works this way before the change as well, so no changes there.

[rfgamaral]

That's strange, @Bloomca.

Here's a comparison betweeb Firefox and Edge (Chormium) on my side running the deployed preview above:

yWqr2N4pC9.mp4

Is this different from what you get?

[Bloomca]

@rfgamaral sorry, I missed that one.

In Firefox, both on this branch and the production one, when I paste using Ctrl + V, I see this:

Ctrl + Shift + V works the same way.

In Chromium, it works incorrectly on production, but correctly on this branch.

[Bloomca]

Ricardo debugged it with me in DMs, and turned out that in my VSCode I had this setting set to false:

"editor.copyWithSyntaxHighlighting": false,

After I switched to true (the default value), it works as expected in Firefox now.

[doistbot]

🎉 This PR is included in version 1.2.7 🎉

The release is available on:

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

Your semantic-release bot 📦🚀