Slate/HTML serializers designed for Payload CMS

[thompsonsj]

I've been working on Slate to HTML and HTML to Slate serializers that contain the features we might need for working with Payload data.

I'm posting here in case anyone has any ideas on how it can be improved or thoughts about the way it works.

https://github.com/thompsonsj/slate-serializers

I've built on a lot of the work out there on serializers to include the following:

• Works in all environments. For parsing HTML, I use htmlparser2 instead of the DOMHandler object in order to ensure this can be run in Node.js as well as browser environments.
• Support custom attributes. Serializers include options to map Slate attributes to HTML attributes - e.g. Payload CMS associates a linkType attribute on links to distinguish between custom and internal links, and we can make sure this data is included.
• Can convert back and forth. It's tricky, but I'm working on making sure Slate converted to HTML can be converted back to Slate without losing important data (such as the linkType attribute).

As a proof of concept, it is working pretty well, and I like the idea of a simple set of serializers that can be used anywhere. I've struggled to find comprehensive pre-built serializers out there. e.g. slate-html-serializer aims to cover use cases by ensuring users provide their own schema/rules, but it looks like it's deprecated: ianstormtaylor/slate#3899.

The motivation for this comes from work I'm doing on a CrowdIn plugin, which localizes Payload CMS content through CrowdIn. For this, it would be useful if Slate JSON can be converted to HTML and back. The reason is that it is much easier to localize a HTML document in CrowdIn compared to a Slate JSON object, especially for longer content. I think integration with localization tools will be invaluable for larger sites.

[thompsonsj]

A config for Payload CMS is now included in the package: https://www.npmjs.com/package/slate-serializers.

This works for anyone using Payload CMS that hasn't customised the Slate editor. If you've added your own configuration to the Slate editor, https://www.npmjs.com/package/slate-serializers can also be configured to work with your schema.

[qbeauperin]

This is great, thanks @thompsonsj !
Did you get anywhere with your CrowdIn plugin by any chance? I'm looking into building something similar myself and would be very interested in seeing what you've got so far. 👀

[thompsonsj]

I did yes! I am using it in production. I have written a plugin that:

• sends localized rich text fields to CrowdIn as HTML; and
• compiles all localized text fields to a single JSON file and sends it to CrowdIn.

A file structure is created in CrowdIn in the following format:

<collection-slug>
  <article-id> (article title or name)
    fields.json
    content.html (if a `richText` field is named `content` - the name of HTML files corresponds to the name of `richText` fields).

I'll try and extract it into a plugin: I had tried before but was running into issues with WebPack compilation in my local environment. I am sure I can figure it out 😅 .

I'll post the repository here once done 👍

[qbeauperin]

• sends localized rich text fields to CrowdIn as HTML; and
• compiles all localized text fields to a single JSON file and sends it to CrowdIn.

Oh wow, that's exactly what I was hoping to build, but replace CrowdIn with [any other generic 3rd party loc provider]. That's amazing!

Do you also handle the other way around (ie: from CrowdIn back to Payload once translations are entered and approved)? 👀

For the webpack compilation issues, I'm pretty sure I've seen a bunch of threads about it on Discord, so don't hesitate to drop by and start a thread if you're stuck, I'm sure we can figure it out as a community! 🙌

[thompsonsj]

I handle the other way around but not elegantly! At the moment, I add API routes in server.ts of the main Payload installation which can be used to view and/or sync the translations into the Payload database.

Here's the initial commit: https://github.com/thompsonsj/payload-crowdin-sync.

I'm going to add to it soon by:

• creating an npm package;
• testing everything still works in production (previously I had this plugin inside my Payload repository); and
• document the inelegant method for syncing translations from CrowdIn to Payload.