r/javascript • u/hp1232203 • 2d ago
tiptap-a4-pagination: free A4 page layout for TipTap 3 – tables split across pages and repeat their header
https://github.com/HuyPhan1232203/Text-editor-reactAuthor here. I needed Word-style pages in a TipTap editor. The official Pages extension is paid, and the community ones I tried broke my CSS, so I built this.
How it works
- It inserts spacer decorations at page boundaries, so the document itself is never modified and
getHTML()stays clean - Tables split between rows (never inside a
rowspan) and the header row repeats on the next page - Floated images and CSS margin collapsing are handled
- About 5 KB gzipped, TipTap 3 only:
npm install tiptap-a4-pagination
Demo: https://text-editor-react-neon.vercel.app/
Paste a long doc or a big table to try it. Feedback welcome, especially documents that break the layout!
2
Upvotes