WIP: adding rich text support with tiptap editor

[xaviemirmon]

This is related to #149 I've added an integration with tiptap as a richtext field

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
puck-demo	Ready	Preview	Comment	Dec 4, 2025 5:17pm
puck-docs	Ready	Preview	Comment	Dec 4, 2025 5:17pm

[FedericoBonel]

This is awesome! Super glad to see this feature finally being added 🙏, thank you.

I tested it on my machine and here are my thoughts:

• Clicking on the field inline deselects the component. This is inconsistent with the other inline field, and inconvenient because the menu in the sidebar provides more options, so I have to constantly click just outside the inline field area to reselect the component and access those options. Also it does feel a bit weird as a user, I would expect the component to get selected when I click on it.

https://github.com/user-attachments/assets/81146f6c-9f3a-49dd-80ef-65cfdbeb41a1

• Clicking on the menu options currently deselects the text, both inline and in the sidebar. This makes it a bit tricky to apply multiple options since I have to keep reselecting the text each time.

https://github.com/user-attachments/assets/d0a358f1-2599-45d8-b888-7eb1f7de8e22

• Editing inline adds some extra spacing on the left that isn’t there when you’re not editing inline.

https://github.com/user-attachments/assets/e8c6cdc1-45e7-467d-815c-8e4e718cd8f9

• Pressing Ctrl + I triggers interactive mode instead of applying italics.

https://github.com/user-attachments/assets/96aa82de-e256-4dc3-b4ed-efc881a8f5ad

• When editing inline, selecting text and trying to apply styling from the sidebar menu doesn’t affect the selected text. It seems the sidebar options are tied only to the sidebar field. As a user, I’d expect the selected text, no matter where it is, to be updated when I apply a style. I also think people might want to edit inline, but use the sidebar options since there are more options there and inline editing feels more intuitive.

https://github.com/user-attachments/assets/a2819ca1-0a22-4b9f-8ec7-e85d74ce5b96

• I’d expect the sidebar field to behave more like a textarea that I can resize, or at least expand up to a certain point and then scroll. Right now, if I write a long article in the RTE, the field becomes very tall, and any fields below it require a lot of scrolling to reach. It also makes applying formatting options difficult since I have to scroll all the way up to use the toolbar and then all the way down to keep editing (check the video). To fix this, I think we could set a max height so that the field is never taller than the viewport.

https://github.com/user-attachments/assets/0fe73cfb-5004-49e3-8bb0-c721b9afea49

• If you resize the sidebar to its maximum width and keep dragging, the field overflows past its container.

https://github.com/user-attachments/assets/adce4f7c-f6a1-4026-98c0-91794b858b8d

• Code block styling doesn’t look quite right on new lines, the left margin disappears, making it look misaligned with the first line. Also, if you add two new empty lines, the code block breaks with a gap.

https://github.com/user-attachments/assets/b2f91712-e1e5-48ef-ad35-48658746cf27

[FedericoBonel]

This is looking great! I really like that we provide utilities while still exposing TipTap's APIs. I also really like the UI and overall experience.

Here are a few small bugs/limitations I noticed:

• If I apply a bullet or ordered list from the sidebar (without selecting the text inline), the changes don't commit until I modify the text content. This seems related to the list menu buttons not updating the page data.

  https://github.com/user-attachments/assets/828e5b54-144a-4f97-baf7-53bbebf0dc98

• Similarly, if I apply alignment from the sidebar (without selecting the text inline), the changes also don't commit until I modify the text content. Might be related to the issue above.

  https://github.com/user-attachments/assets/b13f2cab-5f8d-44b8-95ad-f7d95ae9c3b2

• I'd suggest adding resize: vertical to the field container so users can resize it, similar to how native textareas behave. Some browsers don’t support it, but the max-height fallback should still apply.

  https://github.com/user-attachments/assets/a7708239-335f-4de5-9cfe-635b56f758a4

• I can't select the rendered text on the final page, is that intentional? Is there a way to toggle that behavior?

  https://github.com/user-attachments/assets/75bd1223-b7f8-464c-8ca9-10d4215b8554

• There's no easy way to type the renderInlineMenu or renderMenu params when adding new extensions. I think we should provide some types, generics, or module augmentation to help with that.

[chrisvxd]

@xaviemirmon / @FedericoBonel I've addressed all of your comments. Please let me know if there's anything else.

@FedericoBonel responses to yours

1. Fixed in 2b19517.
2. Same bug
3. TIL! Swapped maxHeight for initialHeight and added resize.
4. Bug, fixed in 3aa27d1

[DamianKocjan]

I spotted a issue while testing this in Firefox.

In Chrome, caret navigation (using arrow keys) and text selection (Shift + Arrow keys) work perfectly within the rich text field. However, in Firefox 145.0.2, these actions don't behave like in Chrome.

[FedericoBonel]

Good catch @DamianKocjan! Thanks for reporting it

[chrisvxd]

Fixed that issue @DamianKocjan, thanks for reporting.

@FedericoBonel ready for final pass 🎉 canary available at 0.21.0-canary.b353d921.

[FedericoBonel]

Beautiful work ✨

• Firefox issue is fixed now
• Bundle size went down when not using RTE. I think this is good!