How to print the pages as they are with TipTap Pagination React?

I'm using Tiptap with React and having trouble with the printing view. When I try to print, black borders appear because of the Tiptap Pagination extension. I've tried the following code to hide them, but it doesn't work with either react-to-print or the browser's native print function.

@media print { .no-print { display: none !important; } html, body { background: white !important; margin: 0 !important; padding: 0 !important; } /* Fondo blanco, sin padding */ .tiptap-editor-scroll { background: white !important; overflow: visible !important; } .editor-pages-container { padding: 0 !important; margin: 0 !important; display: block !important; background: white !important; } /* Tablas con colores exactos */ table, td, th { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; } th { background-color: #C7C7C7 !important; } }

Also the Editor configuration is this one:

const editor = useEditor({ immediatelyRender: false, onCreate({ editor }) { setEditor(editor) }, onDestroy() { setEditor(null) }, onUpdate({ editor }) { setEditor(editor) }, onSelectionUpdate({ editor }) { setEditor(editor) }, onTransaction({ editor }) { setEditor(editor) }, onFocus({ editor }) { setEditor(editor) }, onBlur({ editor }) { setEditor(editor) }, onContentError({ editor }) { setEditor(editor) }, editorProps: { attributes: { class: ' cursor-text' }, }, extensions: [ StarterKit, LineHeightExtension.configure({ types: ['heading', 'paragraph'], defaultLineHeight: 'normal' }), FontSizeExtension, TextAlign.configure({ types: ['heading', 'paragraph'] }), Link.configure({ openOnClick: false, autolink: true }), Highlight.configure({ multicolor: true }), Color, TextStyle, FontFamily, ImageResize, TaskItem.configure({ nested: true }), TaskList, Table, Image, TableCell, TableHeader, TableRow, PaginationPlus.configure({ pageHeight: PAGE_HEIGHT_PX, pageWidth: PAGE_WIDTH_PX, pageGap: 0, marginTop: TOP_MARGIN_PX, marginBottom: BOTTOM_MARGIN_PX, marginLeft: leftMargin, marginRight: rightMargin, // Sin borde visible en el gap pageGapBorderColor: '#000000', pageGapBorderSize: 50, footerRight: '', footerLeft: '', headerRight: '', headerLeft: '', }), ], content: '', }) useEffect(() => { if (editor && content && editor.getHTML() !== content) { editor.commands.setContent(content) } }, [editor, content]) useEffect(() => { if (!editor) return editor.chain().updatePageHeight(heightPage).run() }, [heightPage, editor]) useEffect(() => { if (!editor) return editor.chain().updateMargins({ top: TOP_MARGIN_PX, bottom: BOTTOM_MARGIN_PX, left: leftMargin, right: rightMargin, }).run() }, [leftMargin, rightMargin, editor]) return ( <div className="tiptap-editor-scroll size-full overflow-y-auto" style={{ background: '#F9FBFD' }} > <div className="no-print print:hidden"> <Ruler leftMarginProps={leftMargin} rightMarginProps={rightMargin} onLeftMarginChangeProps={setLeftMargin} onRightMarginChangeProps={setRightMargin} /> </div> {/* printRef apunta aquí — solo las páginas de PaginationPlus, sin el fondo gris ni el padding exterior */} <div ref={printRef} className=" editor-pages-container flex justify-center" style={{ paddingTop: 24, paddingBottom: 24 }} > <EditorContent editor={editor} /> </div> </div> ) }