search

webstudio-is / webstudio

Open source website builder and Webflow alternative. Webstudio is an advanced visual builder that connects to any headless CMS, supports all CSS properties, and can be hosted anywhere, including with us.
https://webstudio.is
GNU Affero General Public License v3.0
5.37k stars 657 forks source link

Support CMS that serves rich text as JSON #3398

Open kof opened 6 months ago

kof commented 6 months ago

As a user I want to be able to use Rich Text of below named CMSs.

Currently on the list

johnsicili commented 3 months ago

For those that want to use Strapi, you can either use their Markdown field or add the Ckeditor plugin, as that serves HTML.

Contentful also has a Markdown field.

However, it would still be good to support their default rich text fields (JSON).

johnsicili commented 3 months ago

Unlike HTML and Markdown, JSON may open the opportunity to map blocks to our Components, which can open up the ability for image optimizations in rich text, using the Vimeo component, and more. Something to keep in mind when this is developed.

TrySound commented 3 months ago

List of blocks can be already iterated with collection. The missing piece is rendering html or markdown in rich text blocks. Maybe available somewhere?

johnsicili commented 3 months ago

I'm not sure I understand the difference between iterating over the blocks and rendering the rich text blocks, as the rich text is provided as an array.

For Notion, I've tried iterating over the JSON to produce the output. While it's pretty dang complicated having to add every variation and conditionally show/hide, I was able to get almost all the way there. The current limitation is that they give you data like "bold" and we can't do anything with that until we have CSS vars... nbd that's coming soon enough.

I just looked at a block from Sanity's "Portable Text" aka Rich Text and it would be very difficult to map it to Components through the UI if not impossible. See attached. Rather, using a serialization library either that they offer or creating some universal first-party one seems like the main option. I can see us adding another component called JSON Embed that would serialize the JSON to HTML or Components.

I'm sure you have more grand ideas than me though :)

sanity-block