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

npm install ileaf-text-editor

Usage

Basic Usage

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

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

Advanced Usage with Props

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)

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)

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

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

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

# 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 uses Babel for Fast Refresh
• @vitejs/plugin-react-swc uses SWC 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 for information on how to integrate TypeScript and typescript-eslint in your project.