@pagent-libs/docs-react

React components for pagent-docs with paginated document rendering.

Features

• Paginated rendering: True page-based layout with headers, footers, and page breaks
• ProseMirror-based editing: Rich text editing with formatting toolbar
• Line-level pagination: Content breaks at line boundaries, not block boundaries
• Header/footer support: Dynamic fields for page numbers, total pages, document title
• Tables: Basic table support with cell editing
• Ruler: Interactive margin adjustment via draggable ruler

Components

DocumentEditor (main component)

The main document editor component. Provides:

• Formatting toolbar
• Horizontal and vertical rulers
• Paginated content display
• Header/footer editing

TrueLayoutEditor

Lower-level component for custom implementations. Handles:

• Page layout computation
• DOM-based content rendering
• Selection overlay
• Input bridging between visible content and hidden ProseMirror

Usage

import { DocumentProvider, DocumentEditor } from '@pagent-libs/docs-react';
import { DocumentImpl } from '@pagent-libs/docs-core';

const doc = new DocumentImpl('doc_1', 'My Document');

function App() {
  return (
    <DocumentProvider document={doc}>
      <DocumentEditor 
        width={window.innerWidth} 
        height={window.innerHeight}
        showToolbar={true}
        showRuler={true}
      />
    </DocumentProvider>
  );
}

Architecture

The rendering uses a hidden ProseMirror editor with visible paginated output:

DocumentEditor (React)
├── Toolbar (DOM)
├── Ruler (DOM)
├── TrueLayoutEditor
│   ├── Hidden ProseMirror (handles editing)
│   ├── Page containers (visible, paginated)
│   │   ├── Header
│   │   ├── Content fragments
│   │   └── Footer
│   ├── Selection overlay (caret + selection rects)
│   └── Input bridge (forwards events to hidden editor)
└── PageSetupModal

Hooks

import { useDocument, useSections, useHistory } from '@pagent-libs/docs-react';

// Access document model
const { document, zoom, setZoom } = useDocument();

// Get sections
const sections = useSections();

// Undo/redo
const { canUndo, canRedo, undo, redo } = useHistory();

Limitations (TODOs. Coming Soon.)

• No spell check integration
• No collaborative editing
• No comments or track changes
• Images are placeholders only (no upload handling)
• Tables don't support merging cells or column resizing
• No find/replace