ileaf-text-editor/LIBRARY.md

A React-based rich text editor library with Quill.js, featuring PDF/DOCX export, print support, and extensive customization options

# iLeaf Text Editor Library

A comprehensive React-based rich text editor library built with Quill.js, featuring export capabilities to PDF and DOCX formats with extensive customization options.

## 🚀 Installation

```bash
npm install ileaf-text-editor
# or
yarn add ileaf-text-editor
# or
pnpm add ileaf-text-editor
```

## 📦 Quick Start

```jsx
import { TextEditor } from "ileaf-text-editor";
import "ileaf-text-editor/style.css";

function App() {
  return (
    <TextEditor
      initialContent="<p>Start typing...</p>"
      showPreview={true}
      showExportMenu={true}
    />
  );
}
```

## 🎯 Features

- ✅ Rich text editing with Quill.js
- ✅ PDF & DOCX export functionality
- ✅ Print support with custom styling
- ✅ Split-view with live preview
- ✅ Fully customizable UI components
- ✅ TypeScript support
- ✅ Responsive design
- ✅ Custom logo support with sizing
- ✅ Multiple paper size options
- ✅ Extensive theming capabilities

## 📚 Components

### TextEditor (Main Component)

The primary component that includes all functionality.

```jsx
import { TextEditor } from "ileaf-text-editor";

<TextEditor
  initialContent="<p>Your content here</p>"
  logo="/your-logo.png"
  logoWidth="50px"
  logoHeight="50px"
  showPreview={true}
  showExportMenu={true}
  onChange={(content) => console.log(content)}
/>;
```

### Individual Components

Use components separately for custom layouts:

```jsx
import {
  EditorPane,
  PreviewPane,
  ExportMenu,
  SplitView,
} from "ileaf-text-editor";

// Custom implementation
function CustomEditor() {
  const [content, setContent] = useState("");
  const previewRef = useRef();

  return (
    <div>
      <ExportMenu previewRef={previewRef} logo="/logo.png" />
      <SplitView
        content={content}
        onChange={setContent}
        previewRef={previewRef}
        showPreview={true}
      />
    </div>
  );
}
```

## 🎨 Customization

### Basic Theming

```jsx
<TextEditor
  // Header styling
  headerBgColor="bg-blue-900"
  headerStyle={{ borderBottom: "2px solid #fff" }}
  // Button styling
  downloadButtonBgColor="bg-green-600 hover:bg-green-700"
  downloadButtonText="Export Document"
  // Logo customization
  logo="/custom-logo.svg"
  logoWidth="60px"
  logoHeight="40px"
/>
```

### Advanced Customization

```jsx
<ExportMenu
  previewRef={previewRef}
  logo="/logo.png"
  // Complete UI customization
  headerBgColor="bg-gradient-to-r from-purple-600 to-blue-600"
  popupBgColor="bg-gray-800"
  // Button theming
  pdfButtonBgColor="bg-red-500 hover:bg-red-600"
  docButtonBgColor="bg-blue-500 hover:bg-blue-600"
  printButtonBgColor="bg-green-500 hover:bg-green-600"
  // Custom text
  downloadButtonText="📁 Export Options"
  pdfButtonText="📄 Save as PDF"
  docButtonText="📝 Save as Word"
  printButtonText="🖨️ Print Document"
  // Styling
  popupStyle={{
    borderRadius: "20px",
    boxShadow: "0 20px 40px rgba(0,0,0,0.3)",
  }}
/>
```

## 📋 API Reference

### TextEditor Props

| Prop             | Type       | Default                             | Description             |
| ---------------- | ---------- | ----------------------------------- | ----------------------- |
| `initialContent` | `string`   | `"<p>Your starting content...</p>"` | Initial HTML content    |
| `logo`           | `string`   | `"/logo.png"`                       | Logo image URL          |
| `logoWidth`      | `string`   | `"40px"`                            | Logo width              |
| `logoHeight`     | `string`   | `"40px"`                            | Logo height             |
| `onChange`       | `function` | `undefined`                         | Content change callback |
| `className`      | `string`   | `""`                                | Additional CSS classes  |
| `showExportMenu` | `boolean`  | `true`                              | Show/hide export menu   |
| `showPreview`    | `boolean`  | `false`                             | Show/hide preview pane  |

### ExportMenu Customization Props

| Category            | Props                                                                                           | Description                        |
| ------------------- | ----------------------------------------------------------------------------------------------- | ---------------------------------- |
| **Header**          | `headerBgColor`, `headerStyle`                                                                  | Header background and styling      |
| **Download Button** | `downloadButtonBgColor`, `downloadButtonTextColor`, `downloadButtonStyle`, `downloadButtonText` | Main download button customization |
| **Popup**           | `popupBgColor`, `popupStyle`                                                                    | Export popup styling               |
| **PDF Button**      | `pdfButtonBgColor`, `pdfButtonTextColor`, `pdfButtonStyle`, `pdfButtonText`                     | PDF export button                  |
| **DOC Button**      | `docButtonBgColor`, `docButtonTextColor`, `docButtonStyle`, `docButtonText`                     | Word export button                 |
| **Print Button**    | `printButtonBgColor`, `printButtonTextColor`, `printButtonStyle`, `printButtonText`             | Print button                       |
| **Inputs**          | `inputBorderColor`, `inputStyle`, `labelTextColor`, `labelStyle`                                | Form inputs styling                |

## 🛠️ Utility Functions

### Export Functions

```jsx
import { exportToPdf, exportToDocx } from "ileaf-text-editor";

// Export to PDF
await exportToPdf(element, "a4", "my-document");

// Export to DOCX
await exportToDocx(element, "my-document");
```

### Paper Sizes Supported

- A4, Letter, Legal

## 🎨 Theme Examples

### Dark Theme

```jsx
<TextEditor
  headerBgColor="bg-gray-900"
  downloadButtonBgColor="bg-indigo-600 hover:bg-indigo-700"
  popupBgColor="bg-gray-800"
  pdfButtonBgColor="bg-red-600 hover:bg-red-700"
  docButtonBgColor="bg-blue-600 hover:bg-blue-700"
  printButtonBgColor="bg-green-600 hover:bg-green-700"
  labelTextColor="text-gray-200"
  inputStyle={{ backgroundColor: "#374151", color: "white" }}
/>
```

### Corporate Theme

```jsx
<TextEditor
  headerBgColor="bg-blue-900"
  downloadButtonBgColor="bg-yellow-500 hover:bg-yellow-600"
  downloadButtonTextColor="text-black"
  pdfButtonBgColor="bg-blue-600 hover:bg-blue-700"
  docButtonBgColor="bg-green-600 hover:bg-green-700"
  logo="/company-logo.png"
  logoWidth="80px"
  logoHeight="40px"
/>
```

## 📱 Responsive Design

The library is fully responsive and works on:

- Desktop computers
- Tablets
- Mobile devices
- Different screen orientations

## ⚙️ Development

```bash
# Install dependencies
npm install

# Start development server
npm run dev

# Build library
npm run build

# Run linting
npm run lint
```

## 📄 License

MIT License - see LICENSE file for details.

## 🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

## 📧 Support

For support, please open an issue on the GitHub repository.