npm package: @shivakumar_h_m/texteditor-shiv
Description: A modern, extensible rich text editor built with Slate and React
Author: Shivakumar H M
Latest version: 0.1.0

# WYSIWYG Editor - Clean & Centered Design

A feature-rich WYSIWYG (What You See Is What You Get) text editor built with Slate, React, and TypeScript. Clean, centered design with HTML export capabilities.

![TypeScript](https://img.shields.io/badge/TypeScript-5.5-blue)
![React](https://img.shields.io/badge/React-18-blue)
![Slate](https://img.shields.io/badge/Slate-0.103-green)

## ✨ Features

### 📝 Text Formatting

- **Bold**, _Italic_, <u>Underline</u>, ~~Strikethrough~~
- Superscript (x²) and Subscript (x₂)
- `Inline code` formatting

### 📐 Block Formatting

- Multiple heading levels (H1-H6)
- Paragraphs and blockquotes
- Code blocks
- Bulleted and numbered lists

### 🎯 Advanced Features

- Text alignment (left, center, right, justify)
- Font family selection (10+ fonts)
- Font size control (8px - 72px)
- Text color picker
- Background color picker
- Link insertion and management
- Image embedding via URL
- **📁 File upload** - Upload images directly from your computer
- **🔤 HTML Export** - Get clean HTML output of your content
- Undo/Redo functionality
- Keyboard shortcuts

### 🎨 Design

- Clean, centered layout
- Minimalist toolbar
- Professional appearance
- Responsive design
- Full TypeScript support

## 🚀 Quick Start

### Installation

```bash
npm install @react/texteditor-shiv
```

Peer Dependencies

```bash
npm install react react-dom

```

### Basic Usage

```tsx
import { OpenTextEditor } from "@react/texteditor-shiv";
import "@react/texteditor-shiv/styles";

function App() {
  return (
    <div style={{ padding: 40 }}>
      <OpenTextEditor />
    </div>
  );
}

export default App;
```

## 📦 New Features

### 1. File Upload 📁

Upload images directly from your computer:

- Click the 📁 button in the toolbar
- Select an image file
- Image is inserted into the editor

### 2. HTML Export 🔤

Get clean HTML output of your content:

- Click "Show HTML" button at the bottom
- View the generated HTML
- Click "Copy HTML" to copy to clipboard
- Use the HTML in your applications

```tsx
import { serializeToHTML } from "@yourusername/wysiwyg-editor";

const html = serializeToHTML(editorContent);
// Output: <p>Your <strong>formatted</strong> content...</p>
```

### 3. Centered Design

The editor is now:

- Centered on the page
- Maximum width for readability
- Clean, minimal appearance
- No distracting headers or footers

## ⌨️ Keyboard Shortcuts

| Shortcut        | Action      |
| --------------- | ----------- |
| `Ctrl/Cmd + B`  | Bold        |
| `Ctrl/Cmd + I`  | Italic      |
| `Ctrl/Cmd + U`  | Underline   |
| `Ctrl/Cmd + \`` | Inline code |

## 🎨 Toolbar Layout

### Row 1: Text Formatting

B, I, U, S • x², x₂ • Block type • Font size • Font family

### Row 2: Advanced Controls

Lists • Indent • Alignment • Colors • Links • Images • **File Upload** • Emoji • Undo/Redo

## 💻 Development

```bash
npm install
npm install -D vite-plugin-dts
npm run dev
```

## 🔧 API Reference

### `serializeToHTML(nodes): string`

Convert Slate content to HTML

### `deserializeFromHTML(html): nodes`

Convert HTML to Slate content

## 📁 Project Structure

```
src/
├── components/      # Editor & Toolbar
├── types/          # TypeScript definitions
├── utils/          # Editor logic & HTML conversion
└── styles/         # CSS styling
```

## 📦 Publishing

```bash
npm run build:lib
npm publish --access public
```

## 🆕 Changelog

### v1.1.0 (Latest)

- ✨ File upload functionality
- ✨ HTML export/copy
- ✨ Centered design
- ✨ Improved UX

## 📄 License

MIT

---

Made with using React, Slate, and TypeScript