@marufme/react-text-editor

!Editor Preview

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

``bash


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

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

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

Hello World!

');

return (
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.

$3


| 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 |

$3

| 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 |

$3

| 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.

`tsx
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 (
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.

$3

`tsx
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 (
variant="courseFull"
onImageUploadBefore={handleImageUploadBefore}
onVideoUploadBefore={handleVideoUploadBefore}
placeholder="Upload images and videos to your custom backend..."
height="500px"
/>
);
}
`

$3

`tsx
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

$3

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.

$3

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:
`bash
git clone https://github.com/maruf-me/react-text-editor.git
`
2. Install dependencies:
`bash
pnpm install
`
3. Run local dev server:
`bash
pnpm dev
`
4. Run tests:
`bash
pnpm test
`

$3


- 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.