npm package: @nalashaa-sri/vanilla-rte
Description: A feature-rich Rich Text Editor built with vanilla JavaScript. No dependencies, fully customizable toolbar, and sanitized output.
Author: srivathsa
Latest version: 1.0.0

# Vanilla RTE - Rich Text Editor

A feature-rich Rich Text Editor built with vanilla JavaScript. Zero dependencies, fully customizable, and secure.

## Features

- ✨ **No Dependencies** - Pure vanilla JavaScript
- 🎨 **Customizable Toolbar** - Configure buttons, dropdowns, and colors
- 🔒 **Sanitized Output** - XSS-safe HTML output
- 📱 **Responsive** - Works on desktop and mobile
- ♿ **Accessible** - ARIA labels and keyboard navigation
- 📦 **Lightweight** - Small bundle size

## Installation

```bash
npm install vanilla-rte
```

## Quick Start

### HTML

```html
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="node_modules/vanilla-rte/src/styles/main.css">
  <link rel="stylesheet" href="node_modules/vanilla-rte/src/styles/components.css">
  <!-- Font Awesome for icons (optional) -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body>
  <div id="editor-container"></div>
  <script type="module" src="your-script.js"></script>
</body>
</html>
```

### JavaScript

```javascript
import RTE from 'vanilla-rte';

const editor = new RTE('editor-container', {
  toolbar: [
    {
      group: 'formatting',
      items: [
        { type: 'button', label: 'Bold', command: 'bold', icon: '<i class="fas fa-bold"></i>' },
        { type: 'button', label: 'Italic', command: 'italic', icon: '<i class="fas fa-italic"></i>' },
        { type: 'button', label: 'Underline', command: 'underline', icon: '<i class="fas fa-underline"></i>' }
      ]
    },
    {
      group: 'paragraph',
      items: [
        {
          type: 'select',
          label: 'Heading',
          command: 'formatBlock',
          options: [
            { label: 'Paragraph', value: 'p' },
            { label: 'H1', value: 'h1' },
            { label: 'H2', value: 'h2' },
            { label: 'H3', value: 'h3' }
          ]
        }
      ]
    }
  ]
});

// Get content
const html = editor.getContent();

// Set content
editor.setContent('<h1>Hello World</h1>');

// Clear content
editor.clearContent();
```

## Toolbar Configuration

### Button Types

| Type | Description | Example |
|------|-------------|---------|
| `button` | Simple action button | Bold, Italic |
| `select` | Dropdown menu | Font, Heading |
| `color` | Color picker | Text Color, Highlight |

### Available Commands

**Formatting:** `bold`, `italic`, `underline`, `strikeThrough`, `superscript`, `subscript`, `code`, `clearFormatting`

**Paragraph:** `formatBlock`, `insertUnorderedList`, `insertOrderedList`, `insertBlockquote`, `insertChecklist`

**Alignment:** `alignLeft`, `alignCenter`, `alignRight`, `alignJustify`, `indent`, `outdent`

**Insert:** `createLink`, `insertImage`, `insertAudio`, `insertVideo`, `insertTable`, `insertCodeBlock`, `insertEmoji`, `insertHorizontalRule`

**Typography:** `fontName`, `fontSize`, `foreColor`, `backColor`, `lineHeight`

**View:** `toggleSource`, `toggleFullscreen`

## API

### Methods

```javascript
// Get sanitized HTML content
editor.getContent()

// Set HTML content
editor.setContent(html)

// Clear all content
editor.clearContent()

// Load from JSON
editor.loadFromJSON({ content: '<p>Hello</p>' })

// Load from HTML string
editor.loadFromHTML('<p>Hello</p>')

// Export in different formats
editor.export('html')     // HTML
editor.export('json')     // JSON
editor.export('markdown') // Markdown
editor.export('text')     // Plain text

// Focus the editor
editor.focus()

// Toggle source view
editor.toggleSource()

// Toggle fullscreen
editor.toggleFullscreen()

// Destroy instance
editor.destroy()
```

## Styling

The editor uses CSS custom properties for theming:

```css
:root {
  --color-primary: #333333;
  --color-primary-dark: #1a1a1a;
  --color-bg: #ffffff;
  --color-border: #e0e0e0;
  --color-text: #2c3e50;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
}
```

## Browser Support

- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)

## License

MIT