ileaf-text-editor/CUSTOMIZATION.md

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

# iLeaf Text Editor Customization Guide

The iLeaf Text Editor components are fully customizable for use as a library. You can customize colors, styles, text, layout options, and behavior of all elements.

## TextEditor Component

### Basic Usage with Layout Options

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

function MyApp() {
  return (
    <TextEditor
      showPreview={true} // Show split view with preview
      showExportMenu={true}
      initialContent="<p>Your content here</p>"
    />
  );
}
```

### Layout Control Props

| Prop             | Type    | Default | Description                                    |
| ---------------- | ------- | ------- | ---------------------------------------------- |
| `showPreview`    | boolean | `false` | Whether to show the preview pane in split view |
| `showExportMenu` | boolean | `true`  | Whether to show the export menu header         |

## ExportMenu Component Customization

The ExportMenu component is fully customizable for advanced styling needs.

## Installation & Basic Usage

```jsx
import ExportMenu from "./components/ExportMenu";

function MyApp() {
  const previewRef = useRef();

  return (
    <div>
      <div ref={previewRef}>{/* Your document content here */}</div>

      <ExportMenu previewRef={previewRef} logo="/your-logo.svg" />
    </div>
  );
}
```

## Customization Props

### Header Customization

| Prop            | Type   | Default         | Description                                |
| --------------- | ------ | --------------- | ------------------------------------------ |
| `headerBgColor` | string | `"bg-gray-100"` | Header background color (Tailwind classes) |
| `headerStyle`   | object | `{}`            | Inline styles for header container         |

### Download Button Customization

| Prop                      | Type   | Default                               | Description                        |
| ------------------------- | ------ | ------------------------------------- | ---------------------------------- |
| `downloadButtonBgColor`   | string | `"bg-purple-600 hover:bg-purple-700"` | Button background and hover colors |
| `downloadButtonTextColor` | string | `"text-white"`                        | Button text color                  |
| `downloadButtonStyle`     | object | `{}`                                  | Inline styles for download button  |
| `downloadButtonText`      | string | `"Download Options"`                  | Button text content                |

### Popup Customization

| Prop           | Type   | Default      | Description                       |
| -------------- | ------ | ------------ | --------------------------------- |
| `popupBgColor` | string | `"bg-white"` | Popup background color            |
| `popupStyle`   | object | `{}`         | Inline styles for popup container |

### PDF Button Customization

| Prop                 | Type   | Default                           | Description                  |
| -------------------- | ------ | --------------------------------- | ---------------------------- |
| `pdfButtonBgColor`   | string | `"bg-blue-600 hover:bg-blue-700"` | PDF button colors            |
| `pdfButtonTextColor` | string | `"text-white"`                    | PDF button text color        |
| `pdfButtonStyle`     | object | `{}`                              | Inline styles for PDF button |
| `pdfButtonText`      | string | `"Export as PDF"`                 | PDF button text              |

### DOC Button Customization

| Prop                 | Type   | Default                             | Description                  |
| -------------------- | ------ | ----------------------------------- | ---------------------------- |
| `docButtonBgColor`   | string | `"bg-green-600 hover:bg-green-700"` | DOC button colors            |
| `docButtonTextColor` | string | `"text-white"`                      | DOC button text color        |
| `docButtonStyle`     | object | `{}`                                | Inline styles for DOC button |
| `docButtonText`      | string | `"Export as DOC"`                   | DOC button text              |

### Print Button Customization

| Prop                   | Type   | Default                           | Description                    |
| ---------------------- | ------ | --------------------------------- | ------------------------------ |
| `printButtonBgColor`   | string | `"bg-gray-600 hover:bg-gray-700"` | Print button colors            |
| `printButtonTextColor` | string | `"text-white"`                    | Print button text color        |
| `printButtonStyle`     | object | `{}`                              | Inline styles for print button |
| `printButtonText`      | string | `"Print"`                         | Print button text              |

### Input & Label Customization

| Prop               | Type   | Default           | Description                    |
| ------------------ | ------ | ----------------- | ------------------------------ |
| `inputBorderColor` | string | `"border"`        | Input field border color       |
| `inputStyle`       | object | `{}`              | Inline styles for input fields |
| `labelTextColor`   | string | `"text-gray-700"` | Label text color               |
| `labelStyle`       | object | `{}`              | Inline styles for labels       |

## Example Customizations

### Dark Theme

```jsx
<ExportMenu
  previewRef={previewRef}
  logo="/logo.svg"
  headerBgColor="bg-gray-900"
  headerStyle={{ borderBottom: "2px solid #4F46E5" }}
  downloadButtonBgColor="bg-indigo-600 hover:bg-indigo-700"
  downloadButtonText="Export Document"
  popupBgColor="bg-gray-800"
  popupStyle={{ border: "1px solid #374151" }}
  pdfButtonBgColor="bg-red-600 hover:bg-red-700"
  docButtonBgColor="bg-blue-600 hover:bg-blue-700"
  printButtonBgColor="bg-green-600 hover:bg-green-700"
  inputBorderColor="border-gray-600"
  inputStyle={{ backgroundColor: "#374151", color: "white" }}
  labelTextColor="text-gray-200"
/>
```

### Minimal Theme

```jsx
<ExportMenu
  previewRef={previewRef}
  logo="/logo.svg"
  headerBgColor="bg-white"
  headerStyle={{ boxShadow: "0 1px 3px rgba(0,0,0,0.1)" }}
  downloadButtonBgColor="bg-black hover:bg-gray-800"
  downloadButtonText="Export"
  pdfButtonBgColor="bg-gray-100 hover:bg-gray-200"
  pdfButtonTextColor="text-black"
  pdfButtonStyle={{ border: "1px solid #d1d5db" }}
  docButtonBgColor="bg-gray-100 hover:bg-gray-200"
  docButtonTextColor="text-black"
  docButtonStyle={{ border: "1px solid #d1d5db" }}
  printButtonBgColor="bg-gray-100 hover:bg-gray-200"
  printButtonTextColor="text-black"
  printButtonStyle={{ border: "1px solid #d1d5db" }}
/>
```

### Custom Brand Colors

```jsx
<ExportMenu
  previewRef={previewRef}
  logo="/logo.svg"
  headerBgColor="bg-blue-900"
  downloadButtonBgColor="bg-yellow-500 hover:bg-yellow-600"
  downloadButtonTextColor="text-black"
  downloadButtonText="📄 Export Options"
  pdfButtonBgColor="bg-red-500 hover:bg-red-600"
  pdfButtonText="🔴 Save PDF"
  docButtonBgColor="bg-green-500 hover:bg-green-600"
  docButtonText="📄 Save Word"
  printButtonBgColor="bg-purple-500 hover:bg-purple-600"
  printButtonText="🖨️ Print"
  labelTextColor="text-blue-800"
/>
```

## CSS Framework Support

The component uses Tailwind CSS classes by default, but you can override with:

1. **Tailwind Classes**: Use standard Tailwind utility classes
2. **Inline Styles**: Pass style objects for fine-grained control
3. **CSS Modules**: Import and use CSS module classes
4. **Styled Components**: Use with styled-components or emotion

## Advanced Styling

For complex styling needs, you can combine Tailwind classes with inline styles:

```jsx
<ExportMenu
  previewRef={previewRef}
  logo="/logo.svg"
  headerStyle={{
    background: "linear-gradient(135deg, #667eea 0%, #764ba2 100%)",
    borderRadius: "0 0 10px 10px",
  }}
  downloadButtonStyle={{
    borderRadius: "25px",
    boxShadow: "0 4px 15px rgba(0,0,0,0.2)",
    transform: "scale(1.05)",
  }}
  popupStyle={{
    borderRadius: "20px",
    backdropFilter: "blur(10px)",
    background: "rgba(255,255,255,0.9)",
  }}
/>
```

## Required Props

- `previewRef`: React ref pointing to the content to be exported
- `logo`: Path to your logo image

All styling props are optional and have sensible defaults.