reactjs-word-editor

A powerful React component for creating and generating PDFs with Excel integration, RTL (Right-to-Left) support, and Word document import capabilities.

Features

• 📝 Rich text editor with Jodit Editor
• 📊 Excel file integration for batch PDF generation
• 🔤 RTL support (Persian/Arabic) with Vazir font
• 🏷️ Dynamic label/placeholder system with duplicate support
• 📄 Single or bulk PDF generation with optimized file sizes
• 📎 Word document import (.doc/.docx)
• 🖼️ Local image upload with Base64 encoding
• 🎨 Customizable styling
• 🗜️ Optimized PDF compression (40-50% size reduction)

Installation

npm install reactjs-word-editor
# or
yarn add reactjs-word-editor

## Usage

jsx
import React from "react";
import { WordEditor } from "reactjs-word-editor";
import "reactjs-word-editor/dist/style.css";

function App() {
  return (
<div className="App">
<WordEditor />
</div>
  );
}

export default App;

## Features in Detail

### 1. Rich Text Editing
- Full-featured Jodit editor with RTL support
- Vazir font integration for Persian text
- Minimal, stable configuration for RTL languages

### 2. Label System
- Insert dynamic placeholders: ` {{label_name}} `
- Labels are automatically surrounded by spaces
- Duplicate labels allowed
- Labels are replaced with Excel data during PDF generation

### 3. Word Document Import
- Import `.doc` and `.docx` files
- Converts Word content to HTML using Mammoth library
- Preserves formatting and structure

### 4. Image Handling
- Upload local images directly
- Images embedded as Base64 URI
- No external hosting required

### 5. PDF Generation
- High-quality output (scale: 2)
- JPEG compression at 92% quality
- Optimized file sizes (2-4 MB per PDF)
- Batch generation from Excel data
- ZIP archive for multiple PDFs

## Advanced Usage

### Using Individual Hooks

jsx
import React, { useRef, useState } from "react";
import {
  useExcelUpload,
  useLabelManagement,
  usePdfGeneration,
} from "reactjs-word-editor";

function CustomEditor() {
  const editorRef = useRef(null);
  const [cursorPosition, setCursorPosition] = useState(null);
  const [error, setError] = useState(null);
  const [showModal, setShowModal] = useState(false);

  const { excelData, detectedColumns, handleExcelUpload } = useExcelUpload();

  const { labels, insertLabel, handleDeleteLabel } = useLabelManagement({
useExcel: true,
detectedColumns,
editorRef,
cursorPosition,
setCursorPosition,
setShowModal,
setError,
  });

  const { isGenerating, generatePdfFilesFromExcel } = usePdfGeneration({
useExcel: true,
excelData,
labels,
editorRef,
setError,
  });

  return <div>{/* Your custom UI */}</div>;
}

## Components

- `WordEditor` - Main editor component with all features
- `ModeSelector` - Toggle between Excel and non-Excel mode
- `ErrorAlert` - Display error messages
- `ExcelUploader` - Upload and parse Excel files
- `LabelButton` - Button to add labels/placeholders
- `LabelModal` - Modal for creating new labels
- `LabelsList` - Display and manage active labels

## Hooks

### `useExcelUpload`
Handles Excel file uploads and column detection.

**Returns:**
- `excelData` - Parsed Excel data
- `detectedColumns` - Column names from Excel
- `handleExcelUpload` - Upload handler function

### `useLabelManagement`
Manages label creation, insertion, and deletion.

**Parameters:**
- `useExcel` - Boolean for Excel mode
- `detectedColumns` - Available Excel columns
- `editorRef` - Reference to Jodit editor
- `cursorPosition` - Current cursor position
- `setCursorPosition` - Update cursor position
- `setShowModal` - Modal visibility control
- `setError` - Error handler

**Returns:**
- `labels` - Array of active labels
- `insertLabel` - Insert label at cursor
- `handleDeleteLabel` - Remove a label

### `usePdfGeneration`
Generates optimized PDF files from editor content.

**Parameters:**
- `useExcel` - Boolean for batch mode
- `excelData` - Excel data for replacement
- `labels` - Active labels to replace
- `editorRef` - Reference to editor
- `setError` - Error handler

**Returns:**
- `isGenerating` - Generation status
- `generatePdfFilesFromExcel` - Generate PDFs

## Label Format

Labels are inserted with surrounding spaces:

 {{label_name}}

This ensures proper spacing in the final document.

## PDF Optimization

The package uses advanced optimization techniques:

1. **High-quality rendering** - Canvas scale: 2
2. **JPEG compression** - 92% quality (imperceptible loss)
3. **PDF compression** - Internal jsPDF compression
4. **ZIP compression** - Level 6 for archives

**Result:** 40-50% smaller files while maintaining excellent quality.

## Dependencies

- `jodit-react` - Rich text editor
- `mammoth` - Word document conversion
- `html2canvas` - HTML to canvas conversion
- `jspdf` - PDF generation
- `jszip` - ZIP file creation
- `file-saver` - File download utility
- `xlsx` - Excel file parsing

## Font Support

The package includes Vazir font for Persian/Arabic text. The font is automatically applied to the editor content area.

## Browser Support

- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)

## License

MIT

## Author

2mdeveloper

## Contributing

Contributions are welcome! Please open an issue or submit a pull request.

## Changelog

### 1.0.1
- Added Word document import (.doc/.docx)
- Implemented local image upload
- Optimized PDF generation (40-50% size reduction)
- Added Vazir font support
- Fixed RTL cursor issues
- Enabled label duplication
- Added automatic spacing around labels

### 1.0.0
- Initial release


## Key Changes Made:

1. ✅ **Updated from TipTap to Jodit Editor**
2. ✅ **Added Word document import feature**
3. ✅ **Added local image upload capability**
4. ✅ **Documented PDF optimization (92% JPEG quality, scale 2)**
5. ✅ **Added label spacing format documentation**
6. ✅ **Added Vazir font support**
7. ✅ **Included all dependencies (mammoth, jodit-react, etc.)**
8. ✅ **Added changelog section**
9. ✅ **Updated features list with new capabilities**
10. ✅ **Documented file size improvements**

The README now accurately reflects your package's current features and implementation! 🚀