npm package: @kenel/rich-text-editor
Description: A lightweight React rich-text editor
Latest version: 0.1.2

# 📝 Kenel Text Editor

[![npm version](https://badge.fury.io/js/kenel-text-editor.svg)](https://www.npmjs.com/package/kenel-text-editor)
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](./LICENSE)
[![Build Status](https://github.com/Kenneford/kenel-text-editor/actions/workflows/build.yml/badge.svg)](https://github.com/Kenneford/kenel-text-editor/actions)
[![Downloads](https://img.shields.io/npm/dm/kenel-text-editor.svg)](https://www.npmjs.com/package/kenel-text-editor)

A **lightweight, customizable WYSIWYG rich text editor for React**, built with **Material-UI**.  
Kenel Text Editor leverages the browser’s native `contentEditable` for smooth performance, clean HTML output, and flexible formatting tools — perfect for CMS, blogs, documentation apps, or any React project.

===

## 📸 Demo Screenshot

> Add a screenshot of your editor UI here.

![Kenel Text Editor Demo]
(./kenel_editor_img.png)

===

## 📚 Table of Contents

- [Features](#-features)
- [Installation](#-installation)
- [Dependencies](#-dependencies)
- [Usage](#-usage)
- [Props](#-props)
- [Customization](#-customization)
- [Development Setup](#-development-setup)
- [Contributing](#-contributing)
- [Testing](#-testing)
- [Roadmap](#-roadmap)
- [License](#-license)

===

## 🚀 Features

✨ **Formatting Tools**

> Bold, italic, underline, strikethrough, lists, headings (H1–H6), blockquote, code blocks, subscript/superscript.

🎞 **Media & Links**

> Insert images/videos (URL, file, or embed) and links using clean MUI modals.

🎨 **Color Pickers**

> Text color and highlight pickers powered by [`react-color`](https://github.com/casesandberg/react-color).

↩️ **Undo / Redo**

> Native keyboard shortcuts (Ctrl+Z / Ctrl+Y).

📋 **Paste Handling**

> Sanitizes pasted HTML, removes unsafe tags, and normalizes formatting.

👁 **Preview Mode**

> View the final formatted HTML with `html-react-parser`.

📱 **Responsive Toolbar**

> Adapts to screen size with overflow handling (“More” menu).

⚙️ **Customizable**

> Style every part of the editor — container, toolbar, icons, editor area.

🧩 **Controlled Component**

> Works with React’s `value` and `onChange` for external state control.

♿ **Accessible**

> Focus management and ARIA support.

🌐 **Cross-Browser**

> Compatible with Chrome, Firefox, Safari, and Edge.

===

## ⚙️ Installation

Install via npm or yarn:

npm install kenel-text-editor
yarn add kenel-text-editor

===

DependenciesPeer dependencies (install in your project):react >= 16.8
@mui/material >= 5.x
@mui/icons-material >= 5.x
react-color (for color pickers)
html-react-parser (for previews)

Install them:bash

npm install @mui/material @mui/icons-material @emotion/react @emotion/styled react-color html-react-parser

UsageBasic example:jsx

import React, { useState } from 'react';
import KenelTextEditor from 'kenel-text-editor';

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

return (
<KenelTextEditor
      value={content}
      onChange={setContent}
    />
);
}

For rendering saved content:jsx

import parse from 'html-react-parser';

<div>{parse(content)}</div>

===

🧠 Props
Prop Type Default Description
value string '' Controlled HTML content value.
onChange function null (newHTML: string) => void callback when content updates.
containerStyles object {} Custom styles for outer container.
toolbarStyles object {} Toolbar background, padding, etc.
iconStyles object {} Icon color, hover styles, size, etc.
editorStyles object {} Editor padding, minHeight, background, etc.

🎨 Customization:

🧱 Container Styles

containerElevation: number (default: 3)

containerMaxWidth / containerMinWidth: string | number

🧰 Toolbar Styles

toolbarBgColor

toolbarPadding

🖊 Icon Styles

iconFontSize

iconColor

iconHoverBgColor

🗒 Editor Styles

editorMinHeight (default: 300)

editorPadding (default: '1rem')

All styles use MUI sx props internally, making them easy to override.

Example:jsx

<KenelTextEditor
value={content}
onChange={setContent}
containerStyles={{ containerBgColor: '#f0f0f0' }}
editorStyles={{ editorMinHeight: 400 }}
iconStyles={{ iconFontSize: ".8rem" }}
toolbarStyles={{ toolbarBorderColor: "#ccc" }}
/>

===

🧑‍💻 Development Setup

Clone the Repo:

git clone https://github.com/Kenneford/kenel-text-editor.git
cd kenel-text-editor
npm install

Available Scripts
Command Description
npm start Run dev server (Vite).
npm run build Build for production.
npm test Run test suite.
npm publish Publish to npm (update version first).

Main component: src/KenelTextEditor.jsx
Demo app: dev/dev.jsx

Scripts
npm start: Run dev server (Vite-based).
npm build: Build for production.
npm test: Run tests (if set up; see Testing (#testing)).
npm publish: Publish to npm (update version first).

🧱 Code Overview

StructureHooks/Refs: useRef for editor, ranges; useState for modals/data.
Events: onInput, onPaste, onKeyDown for handling.
Helpers: saveSelection, restoreSelection, wrapLooseTextNodesInP, sanitization.
Modals: For link/image/video/color using MUI Modal.
Toolbar: Responsive with MUI Toolbar/IconButton; media queries.
Preview: Uses html-react-parser with custom replace for media.

Key constants: EDITOR_IMG_WIDTH (620), etc. Icons defined in headerIcons array.

Contributing - We welcome contributions!
Fork the repo.
Create a branch: git checkout -b feature/your-feature.
Commit changes: git commit -m 'Add feature'.
Push: git push origin feature/your-feature.
Open a PR.

Follow code style (ESLint/Prettier). Add tests for new features.IssuesReport bugs or suggest features via GitHub Issues.TestingUses Jest (setup pending; add if needed):bash

npm test

Test cases: Rendering, onChange, media insertion, paste sanitization, cursor stability.

===

🛣️ Roadmap

Table support

Emoji picker

Plugin/extension system

Theme provider integration

Full TypeScript definitions

More unit tests

===

📄 License

MIT License © Kenneford

See LICENSE
for details.

===

💬 Links

📦 NPM: https://www.npmjs.com/package/@kenel/rich-text-editor

💻 GitHub: https://github.com/Kenneford/kenel-text-editor

🧑‍💼 Author: Patrick Kenneford Annan