NC Document Editor

A professional, high-performance React document editor with PDF annotation capabilities, optimized for production use.

✨ Features

• 📄 PDF Support - Full PDF viewing and annotation
• ✍️ Rich Annotations - Signatures, stamps, comments, and drawings
• 🎨 Modern UI - Beautiful, responsive design with Tailwind CSS
• ⚡ Performance Optimized - Tree-shaking, memoization, and lazy loading
• ♿ Accessible - ARIA labels, keyboard navigation, and screen reader support
• 🔧 Highly Configurable - Extensive customization options
• 📱 Responsive - Works on desktop, tablet, and mobile
• 💾 Export Capabilities - Export annotations as JSON
• 🔄 Undo/Redo - Full history management

🚀 Quick Start

npm install nc-doc-editor

import { DocumentEditor } from "nc-doc-editor";
import "nc-doc-editor/styles.css";

function App() {
  return (
    <DocumentEditor
      title="My Document Editor"
      maxFileSizeMB={25}
      onFileChange={(file, url) => console.log("File loaded:", file?.name)}
      onError={(error) => console.error("Error:", error)}
    />
  );
}

📦 Bundle Size

• ESM: ~466KB (gzipped: ~120KB)
• CJS: ~470KB (gzipped: ~125KB)
• CSS: ~15KB (gzipped: ~5KB)

⚙️ Configuration Options

DocumentEditor Props

| Prop | Type | Default | Description | | ---------------------- | --------------------- | ------------------------------- | ----------------------- | | initialFileUrl | string | undefined | Initial PDF URL to load | | title | string | "Document Editor" | Editor title | | maxFileSizeMB | number | 50 | Maximum file size in MB | | acceptedFileTypes | AcceptedKind[] | ["pdf"] | Accepted file types | | showExportButton | boolean | true | Show export button | | showFileChangeButton | boolean | true | Show file change button | | uploadText | string | "Drop a PDF to start editing" | Upload area text | | uploadSubtext | string | "Use Manage Signatures..." | Upload area subtext | | onFileChange | (file, url) => void | undefined | File change callback | | onError | (error) => void | undefined | Error callback |

File Types

type AcceptedKind = "pdf" | "image";

🎯 Performance Optimizations

Bundle Optimization

• Tree Shaking: Only imports used components
• Code Splitting: Lazy loading for heavy components
• Minification: Production builds are minified
• External Dependencies: React/React-DOM are external

Runtime Optimization

• React.memo: Components are memoized
• useCallback: Event handlers are optimized
• Lazy Loading: Heavy features load on demand
• Memory Management: Proper cleanup of object URLs

CSS Optimization

• Purged CSS: Only used styles are included
• Minified: CSS is minified for production
• Critical Path: Essential styles are inlined

🔧 Advanced Usage

Custom Styling

<DocumentEditor
  className="my-custom-editor"
  style={{ border: "1px solid #e5e7eb" }}
/>

Event Handling

<DocumentEditor
  onFileChange={(file, url) => {
    if (file) {
      // File was loaded
      console.log("File:", file.name, "Size:", file.size);
    } else {
      // File was cleared
      console.log("File cleared");
    }
  }}
  onError={(error) => {
    // Handle errors
    console.error("Editor error:", error);
  }}
/>

Custom Configuration

<DocumentEditor
  title="Contract Editor"
  maxFileSizeMB={10}
  acceptedFileTypes={["pdf"]}
  showExportButton={false}
  uploadText="Drop your contract here"
  uploadSubtext="PDF files only, max 10MB"
/>

🎨 UI Components

The editor includes several UI components that can be used independently:

• DocumentEditor - Main editor component
• DocumentViewer - PDF viewer with annotations
• FileUpload - Drag & drop file upload
• AnnotationToolbar - Annotation tools
• DrawingToolbar - Drawing tools
• SignatureManager - Signature management
• CommentsPanel - Comments interface

🔌 Provider Components

For advanced customization, you can use the provider components directly:

import {
  AnnotationsProvider,
  CommentsProvider,
  DrawingProvider,
  SignatureProvider,
  ToolsProvider,
  HistoryProvider,
} from "nc-doc-editor";

function CustomEditor() {
  return (
    <HistoryProvider>
      <AnnotationsProvider docKey="my-doc">
        <CommentsProvider docKey="my-doc">
          <DrawingProvider docKey="my-doc">
            <SignatureProvider docKey="my-doc">
              <ToolsProvider>{/* Your custom editor */}</ToolsProvider>
            </SignatureProvider>
          </DrawingProvider>
        </CommentsProvider>
      </AnnotationsProvider>
    </HistoryProvider>
  );
}

🚀 Development

# Install dependencies
npm install

# Start development server
npm run dev

# Build for production
npm run build

# Run tests
npm test

📄 License

MIT License - see LICENSE file for details.

🤝 Contributing

Contributions are welcome! Please read our contributing guidelines.

📞 Support

For support, please open an issue on GitHub or contact us.