@marufme/react-text-editor

A professional, modular, and enterprise-ready React wrapper for SunEditor. Built with a TypeScript-first approach, it provides pre-configured variants and templates optimized for LMS, E-commerce, and Blog platforms.

✨ Features

• 🛠 Modular Configurations: Choose from pre-defined variants (Simple, Detailed, Full, etc.).
• 📝 Niche-Specific Variants: Specialized presets for LMS, E-commerce, and Blog content.
• 🧮 Math & Science: Built-in support for KaTeX for complex mathematical expressions.
• � Template System: Ready-to-use HTML templates for courses, memos, and product descriptions.
• � Imperative API: Full access to the underlying SunEditor core via React refs.
• � Modern Bundle: Shipping as ESM and CJS with full tree-shaking support.
• � Themeable: Easy to customize styles using CSS variables.

🚀 Installation

# Using npm
npm install @marufme/react-text-editor

# Using pnpm
pnpm add @marufme/react-text-editor

# Using yarn
yarn add @marufme/react-text-editor

📖 Quick Start

import React, { useState } from 'react';
import { TextEditor } from '@marufme/react-text-editor';

function App() {
  const [content, setContent] = useState('<p>Hello World!</p>');

  return (
    <TextEditor
      variant="moreAdvance"
      defaultValue={content}
      onChange={setContent}
      placeholder="Start typing your story..."
      height="400px"
    />
  );
}

🎨 Editor Variants

We provide a wide range of pre-configured variants categorized by use case. Pass these to the variant prop.

Common Variants

Variant	Ideal For
simple	Comments, quick notes, basic social posts
minimal	Ultra-clean interfaces with basic formatting
detailed	Standard blog posts with media support
detailedAdvanced	content creation with Math/KaTeX support
full	Enterprise-grade CMS and deep editing
moreAdvance	Power users requiring every single plugin

LMS (Learning Management System)

Variant	Ideal For
lessonBasic	Standard lesson descriptions
lessonVideo	Lessons focused on video embedding
courseFull	Comprehensive course builder
quizEditor	Educational assessments and quizzes
discussionReply	Simplified forum and discussion replies

E-commerce

Variant	Ideal For
productDescription	Detailed product spec sheets
reviewEditor	Customer product reviews

---

🛠 Custom Variants

If none of the presets fit your needs, you can define your own toolbar using the custom variant.

import React from 'react';
import { TextEditor } from '@marufme/react-text-editor';

function CustomEditor() {
  const myCustomToolbar = [
    ['undo', 'redo'],
    ['bold', 'italic', 'underline'],
    ['fontColor', 'hiliteColor'],
    ['link', 'image']
  ];

  return (
    <TextEditor
      variant="custom"
      buttonList={myCustomToolbar}
      placeholder="Type here with your custom toolbar..."
    />
  );
}

---

🖼️ Handling Media Uploads

Intercept image and video uploads to handle them with your custom backend API. This is essential for production applications where you need to control file storage, validation, and processing.

Basic Upload Handler

import React from 'react';
import { TextEditor } from '@marufme/react-text-editor';

function EditorWithUpload() {
  const handleImageUploadBefore = (
    files: File[],
    info: object,
    uploadHandler: (response: {
      result: { url: string; name: string }[];
      errorMessage?: string;
    }) => void
  ) => {
    (async () => {
      const file = files[0];
      
      // Create FormData for API upload
      const formData = new FormData();
      formData.append("file", file);
      formData.append("directory", "editor");

      try {
        // Replace with your actual API endpoint
        const response = await fetch("/fetch-file-upload", {
          method: "POST",
          body: formData
        });
        
        const data = await response.json();
        
        if (data.success) {
          // Pass the uploaded URL back to the editor
          uploadHandler({
            result: [{
              url: data.url,
              name: file.name
            }]
          });
        } else {
          uploadHandler({ errorMessage: "Upload failed" });
        }
      } catch (error) {
        console.error("Upload error:", error);
        uploadHandler({ errorMessage: "Network error" });
      }
    })();
    
    return false; // Prevent default upload behavior
  };

  const handleVideoUploadBefore = (
    files: File[],
    info: object,
    uploadHandler: any
  ) => {
    // Same logic as image upload, but for videos
    return handleImageUploadBefore(files, info, uploadHandler);
  };

  return (
    <TextEditor
      variant="courseFull"
      onImageUploadBefore={handleImageUploadBefore}
      onVideoUploadBefore={handleVideoUploadBefore}
      placeholder="Upload images and videos to your custom backend..."
      height="500px"
    />
  );
}

Advanced: With Image Conversion

const handleImageUploadBefore = (files, info, uploadHandler) => {
  (async () => {
    const file = files[0];
    
    // Optional: Convert to WebP for better compression
    // const webpFile = await convertImageToWebP(file);
    
    const formData = new FormData();
    formData.append("file", file); // or webpFile
    formData.append("directory", "editor");

    const response = await api.post("/fetch-file-upload", formData);
    
    if (response.success) {
      uploadHandler({
        result: [{
          url: response.data.url,
          name: "image"
        }]
      });
    }
  })();
  
  return false;
};

---

---

⚙️ Configuration & Props

Built-in Templates

The package comes bundled with professional HTML templates. Users can insert these via the "Template" button in the editor.

• LMS: Course Overview (English/Bangla), Lesson Content, Instructor Profile.
• E-commerce: Product Descriptions, Promotional Banners.
• Internal: Memos, Internal Notes.

Available Props

The TextEditor component accepts all SunEditor options plus:

Prop	Type	Default	Description
variant	VariantType	"simple"	Pre-configured toolbar variant
buttonList	array	COMMON_TEXT_BUTTONS	Custom button list (when variant="custom")
setOptions	SunEditorOptions	{}	Additional SunEditor configuration
height	string	-	Editor height (e.g., "400px")
placeholder	string	-	Placeholder text
defaultValue	string	-	Initial HTML content
onChange	function	-	Callback when content changes
onImageUploadBefore	function	-	Custom image upload handler
onVideoUploadBefore	function	-	Custom video upload handler
getSunEditorInstance	function	-	Callback to get the editor instance

🛠 Contributing

We welcome contributions! To get started:

1. Clone the repo:

   git clone https://github.com/maruf-me/react-text-editor.git

2. Install dependencies:

   pnpm install

3. Run local dev server:

   pnpm dev

4. Run tests:

   pnpm test

Project Structure

• src/components: React components and core wrapper.
• src/variants: Button configuration presets.
• src/templates: HTML template library.

👨‍💻 Author

MD Maruf Hossain

• Website: marufme.com
• Email: marufme.dev@gmail.com

📄 License

Licensed under the MIT License.