ileaf-text-editor/README.md

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

# iLeaf Text Editor

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

## Features

- 🖊️ Rich text editing with Quill.js
- 📄 Export to PDF and DOCX formats
- 🎨 Tailwind CSS styling
- 📱 Responsive design
- 🔧 Customizable components
- ⚡ Built with Vite for optimal performance

## Installation

```bash
npm install ileaf-text-editor
```

## Usage

### Basic Usage

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

function App() {
  return (
    <div>
      <TextEditor />
    </div>
  );
}
```

### Advanced Usage with Props

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

function App() {
  const handleContentChange = (content) => {
    console.log("Content changed:", content);
  };

  return (
    <TextEditor
      initialContent="<p>Welcome to the editor!</p>"
      onChange={handleContentChange}
      logo="/custom-logo.svg"
      logoWidth="50px"
      logoHeight="50px"
      showExportMenu={true}
      showPreview={true}
      className="custom-editor-class"
    />
  );
}
```

### Split View Mode (Editor + Preview)

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

function SplitViewEditor() {
  return (
    <TextEditor
      initialContent="<p>Type here and see the preview on the right!</p>"
      showPreview={true}
      showExportMenu={true}
    />
  );
}
```

### Editor Only Mode (Default)

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

function EditorOnlyMode() {
  return (
    <TextEditor
      initialContent="<p>Full-width editor mode</p>"
      showPreview={false} // This is the default
      showExportMenu={true}
    />
  );
}
```

### Custom Logo Sizes

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

function CustomLogoSizes() {
  return (
    <div>
      {/* Small logo */}
      <TextEditor
        logo="/logo.svg"
        logoWidth="24px"
        logoHeight="24px"
        initialContent="<p>Small logo example</p>"
      />

      {/* Large logo */}
      <TextEditor
        logo="/logo.svg"
        logoWidth="60px"
        logoHeight="60px"
        initialContent="<p>Large logo example</p>"
      />

      {/* Custom aspect ratio */}
      <TextEditor
        logo="/wide-logo.svg"
        logoWidth="80px"
        logoHeight="30px"
        initialContent="<p>Wide logo example</p>"
      />
    </div>
  );
}
```

### Using Individual Components

```jsx
import { EditorPane, PreviewPane, ExportMenu } from "ileaf-text-editor";
import "ileaf-text-editor/style.css";

function CustomEditor() {
  return (
    <div>
      <ExportMenu />
      <EditorPane content="<p>Hello World</p>" onChange={() => {}} />
      <PreviewPane content="<p>Hello World</p>" />
    </div>
  );
}
```

## API Reference

### TextEditor Props

| Prop             | Type       | Default                                                                                   | Description                         |
| ---------------- | ---------- | ----------------------------------------------------------------------------------------- | ----------------------------------- |
| `initialContent` | `string`   | `"<p>Your starting content...</p>"`                                                       | Initial HTML content for the editor |
| `meta`           | `object`   | `{ caseName: "Case XYZ", personName: "Jane Doe", date: new Date().toLocaleDateString() }` | Metadata for export documents       |
| `logo`           | `string`   | `"/logo.png"`                                                                             | Logo URL for export documents       |
| `logoWidth`      | `string`   | `"40px"`                                                                                  | Logo width (CSS value)              |
| `logoHeight`     | `string`   | `"40px"`                                                                                  | Logo height (CSS value)             |
| `onChange`       | `function` | `undefined`                                                                               | Callback fired when content changes |
| `className`      | `string`   | `""`                                                                                      | Additional CSS classes              |
| `showExportMenu` | `boolean`  | `true`                                                                                    | Whether to show the export menu     |
| `showPreview`    | `boolean`  | `false`                                                                                   | Whether to show the preview pane    |

### Available Components

- `TextEditor` - Complete text editor with all features
- `EditorPane` - Just the editor component
- `PreviewPane` - Preview component for rendered content
- `SplitView` - Split view layout component
- `ExportMenu` - Export functionality menu

### Utility Functions

- `exportDoc` - Export content as DOCX
- `exportPdf` - Export content as PDF

## Development

```bash
# Install dependencies
npm install

# Start development server
npm run dev

# Build library
npm run build

# Lint code
npm run lint
```

## Dependencies

- React 18+
- Quill.js
- Tailwind CSS
- jsPDF
- html-docx-ts
- file-saver

## License

MIT

## Contributing

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

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) for Fast Refresh
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh

## Expanding the ESLint configuration

If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the [TS template](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts) for information on how to integrate TypeScript and [`typescript-eslint`](https://typescript-eslint.io) in your project.