Add rich-text support with WYSIWYG

[xaviemirmon]

It would be amazing to have support for minimal rich text formatting on a text area field.

What about something like Slate?

I would need it as HTML and Markdown for different contexts.

[chrisvxd]

Definitely on our radar! Thanks for opening a ticket - I've been meaning to.

Implementation wise I imagine we might use something like Slate, but not entirely sure.

One thing I'm not sure of is whether a WYSIWYG RTE is the same field type as a Markdown editor.

[BleedingDev]

I am planning on adding this feature as a custom prop. My plan is to use Blocksuite, which is WYSIWYG with MD export as well. :)

[kadencartwright]

@chrisvxd I've been using Lexical within a custom field and like the approach so far. Lexical has less out of the box, but is one of the most extensible/customizable libs for building a rich text editor. Could be worth looking into. The lexical plugin model would allow some very cool integration with the puck editor at large, like dropping content directly into the rich text field to be rendered along with text content.

[BleedingDev]

How does Lexical compare to Tiptap? @kadencartwright

[kadencartwright]

How does Lexical compare to Tiptap? @kadencartwright

From my research they cover a similar use case, as both are more about providing the tools to build a rich text editor rather than giving you something out of the box.

I haven’t used tip tap personally but was turned off by the freemium model as it generally makes projects significantly more susceptible to enshittification in my experience

[BleedingDev]

The thing is that right now we have multiple options and I think that it either needs proper research (to include it in the Puck core) or we should implement it as a plugin.

What I see are 3 main competitors:

• Tiptap
• Lexical
• Blocksuite

[chrisvxd]

If anyone is interested, it's possible to implement this using a custom field type. I'd be curious to see how the different options work.

[xaviemirmon]

When I raised this issue, I thought Puck would have a single supported RTE that would be provided as a part of the out-of-box experience. This could (and probably should) live outside the core package but be available for the demo and next-recipe packages. For a project I'm working on, we need CKEditor, so I'm working on this as a custom field. I think CKEditor is far too hefty for many generic cases, but I'll share it an example when it's working.

[JD-Robbs]

@chrisvxd You wouldn't, by any chance, have an example of this in a public repo somewhere? Would love to see it in action. I'm wondering if the sidebar offers enough space for this - or whether it would mean having to custom-implement the interface to make space for the editor.

@xaviemirmon It's been a while - so just wanted to check if you ever implemented this and could link it?

[chrisvxd]

@JD-Robbs I do not have a public RTE field, but there is an inline RTE component listed in awesome-puck (see related #150)

[bakikucukcakiroglu]

puck-rich-text not working with the latest version of Puck

[4leite]

puck-rich-text not working with the latest version of Puck

I'll update in the next few days. If you've got any questions about implementing your own, feel free to hit me up.

[bakikucukcakiroglu]

puck-rich-text not working with the latest version of Puck

I'll update in the next few days. If you've got any questions about implementing your own, feel free to hit me up.

Thanks for your quick reply. I used the response in this thread as a base and built my own rich-text-editor using tiptap.

Rich text menu with editor is on the right sidebar and I only render the content in the middle viewport just like the example Text block. If we could improve the library in a way that it provides WYSIWYG built-in, it would be amazing.

Just a feedback: I think that the number of examples should be increased. For each platform (remix, react, vue etc.) there should be a subfolder that provides one command setup.