Block-Editor: Enable pasting HTML (from Google Doc and RichText)

[AndreasFaust]

What does it do?

Until now, links and formatting (like bold, italic or underlined) in pasted text from Google Docs and RichText documents were not retained.
We implemented and improved the code from Slate’s PasteHTML example (https://www.slatejs.org/examples/paste-html):

1. We added the package slate-hyperscript.
2. We typed the code from the example (which was quite a challenge).
3. We optimized the example to be able to handle text from Google Docs correctly.

Why is it needed?

Google Docs and RichText are widely used text editors. Pasting text from these is part of the daily work of many content editors and would be a great quality of life improvement.

We use Strapi for different magazine websites. Magazine editors often copy texts from Google Doc or RichText documents. Switching from our custom Editor.js-plugin to the new Slate-based Block Editor made this temporarily impossible.

How to test it?

1. Create a Google Doc or RichText document.
2. Create Headlines, Paragraphs, Lists
3. Add links
4. Add some formatting (bold, italic, underline)
5. Copy the document to a Block Editor field

Related issue(s)/PR(s)

Fixes issue #19051

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
contributor-docs	❌ Failed (Inspect)			Sep 4, 2024 0:12am

[strapi-cla]

All committers have signed the CLA.

[smoores-dev]

Hi all! This is turning into a blocker for a client of mine that would like to move over to Strapi; it looks like this is a feature request from Canny, too: https://feedback.strapi.io/feature-requests/p/auto-format-preserve-pasted-rich-text-in-the-blocks-editor. Do the Strapi folks have any thoughts about this PR?

Relatedly, would the Strapi folks be open to a PR that exposes the ability to add Slate.js plugins via Strapi plugins, so that users can flesh out their own rich text editor as needed?

[strapi-bot]

This pull request has been mentioned on Strapi Community Forum. There might be relevant details there:

https://forum.strapi.io/t/block-editor-enable-pasting-html-from-google-doc-and-richtext/40123/1

[AndreasFaust]

Any news here?

[AndreasFaust]

To fix the problem until this PR is accepted, I created this plugin:
https://www.npmjs.com/package/strapi-plugin-slate

[alexandrebodin]

Important

With the release of Strapi 5, we have lifted the code freeze. To ensure we can effectively review and assist with contributions, we are now only accepting PRs targeting version 5 (the develop branch).

As your PR is targeting some of the most recent v4 version, We we would greatly appreciate it if you could update your contribution to align with version 5 and resubmit!

[remidej]

Hello, @AndreasFaust, sorry for never replying to your PR. We unfortunately can't merge it, when testing it broke the feature where pasting a URL with text selected made it a hyperlink, and the code has now diverged from the main/develop branch

However I agree with you that this is needed. We are planning to build that feature on top of v5 (that shipped yesterday), and your PR will be a great resource for that. Thanks for making it a plugin too, I hope it helps people needing this in v4