@omkar-kamat/quill-keditor

A powerful, React-based rich text editor built on top of Quill 2.0. It features advanced capabilities like built-in KaTeX math rendering, Smart Table management, Custom File/Image Upload, and now Customizable Toolbar support.

🚀 Features

• Quill 2.0 Core: Stable, modern rich text editing.
• Math Support: Native KaTeX integration for complex formulas.
• Advanced Tables: Easily create and manage data tables.
• Smart Uploads: Direct-to-server image and file upload support.
• Custom Toolbar: Fully configurable toolbar to suit your app’s needs.
• Sync Preview: Dedicated Preview component for high-fidelity content rendering.

📦 Installation

Install the required peer dependencies first:

npm install quill@^2.0.0 katex@^0.16.28

Then, install the package:

npm install @omkar-kamat/quill-keditor

🛠️ Usage

Basic Example

import React, { useState } from 'react';
import { KQuillEditor, Preview } from '@omkar-kamat/quill-keditor';
import '@omkar-kamat/quill-keditor/dist/quill-keditor.css';

function App() {
  const [content, setContent] = useState('');

  return (
    <div>
      <KQuillEditor value={content} onChange={setContent} />
      <Preview value={content} />
    </div>
  );
}

Advanced: Image & File Uploads

By default, Quill encodes images as Base64 strings. To keep your database light, use the imageUploadAPI and fileUploadAPI props to upload files to your server instead.

const uploadConfig = {
  uploadUrl: "https://your-api.com/upload",
  uploadName: "file", // The key your backend expects (e.g., req.file)
  headers: {
    Authorization: "Bearer your_token_here"
  }
};

<KQuillEditor 
  value={content} 
  onChange={setContent}
  imageUploadAPI={uploadConfig}
  fileUploadAPI={uploadConfig}
  placeholder="Start typing or drop an image..."
/>

Advanced: Custom Toolbar

You can now fully customize the toolbar with the toolbarContainer prop. Pass an array of buttons or groups you want to display:

const customToolbar = [
  ["bold", "italic", "underline", "strike"],
  [{ list: "ordered" }],
  [{ script: "sub" }, { script: "super" }],
  [{ indent: "-1" }, { indent: "+1" }, { align: [] }],
  [{ header: [1, 2, 3, 4, 5, 6, false] }],
  ["image", "formula", "table", "attachment"],
  ["clean", "html"],
];

<KQuillEditor
  value={content}
  onChange={setContent}
  toolbarContainer={customToolbar}
/>

⚙️ Props Reference

KQuillEditor

| Prop | Type | Default | Description | | ------------------ | ---------- | ---------------------- | -------------------------------------------- | | value | string | "" | The HTML string content. | | onChange | function | undefined | Callback returning the updated HTML string. | | placeholder | string | "Write something..." | Placeholder text. | | imageUploadAPI | object | null | Configuration for server-side image uploads. | | fileUploadAPI | object | null | Configuration for server-side file uploads. | | toolbarContainer | array | Default toolbar layout | Custom toolbar buttons/groups. |

Upload API Object Structure

{
  uploadUrl: string,  // Your backend endpoint
  uploadName: string, // The FormData key (e.g., "image")
  headers: object     // Optional: Auth tokens, etc.
}

Preview

| Prop | Type | Description | | ------- | -------- | -------------------------------------------------- | | value | string | The HTML content to render (sanitized and styled). |

📄 License

MIT © Omkar Kamat