npm package: @jxdevs/texio
Description: Texio - A rich text editor component for React
Author: jxdevs
Latest version: 1.1.2

# Rich Text Editor

A powerful rich text editor component for React, built with Lexical framework. Inspired by CKEditor 5, this editor provides essential text formatting, block formatting, and list management capabilities.

## Features

### Text Formatting
- **Bold** (Ctrl+B / Cmd+B)
- *Italic* (Ctrl+I / Cmd+I)
- <u>Underline</u> (Ctrl+U / Cmd+U)
- ~~Strikethrough~~
- `Code` formatting

### Color Formatting
- **Text Color**: Apply colors to text from a predefined palette
  - 8 color options: Black, Red, Blue, Green, Yellow, Orange, Purple, Gray
  - Default option to remove color
- **Highlight Color**: Apply background colors to text
  - 8 color options: Yellow, Red, Blue, Green, Orange, Purple, Gray, Black
  - None option to remove highlight
- Visual color picker with dropdown palette
- Keyboard navigation support (arrow keys, Enter, Escape)
- Current color indicator in toolbar buttons
- Colors preserved in HTML export with inline styles

### Block Formatting
- Headings (H1-H6)
- Paragraphs
- Blockquotes

### Text Alignment
- **Left align** (Ctrl+Shift+L / Cmd+Shift+L)
- **Center align** (Ctrl+Shift+E / Cmd+Shift+E)
- **Right align** (Ctrl+Shift+R / Cmd+Shift+R)

### List Management
- Bullet lists
- Numbered lists
- List nesting with Tab/Shift+Tab
- Automatic renumbering for ordered lists

### Additional Features
- Undo/Redo (Ctrl+Z / Ctrl+Shift+Z)
- Copy, Cut, Paste support
- **Content Export & Preview**:
  - HTML Preview (Rendered) - Visual preview of formatted content
  - HTML Code - Raw HTML with inline styles
  - Plain Text - Unformatted text extraction
  - JSON State - Complete editor state
- Keyboard shortcuts
- Focus management
- Clean, customizable UI with CSS variables

## Getting Started

### Installation

```bash
npm install
```

### Development

```bash
npm run dev
```

Open [http://localhost:5173](http://localhost:5173) to view the demo in your browser.

### Build

```bash
npm run build
```

## Usage

### Basic Example

```tsx
import { RichTextEditor } from './components/RichTextEditor';
import { EditorState, LexicalEditor } from 'lexical';

function MyApp() {
  const handleChange = (editorState: EditorState, editor: LexicalEditor) => {
    // Handle editor changes
    console.log('Editor content changed');
  };

  return (
    <RichTextEditor
      autoFocus={true}
      onChange={handleChange}
    />
  );
}
```

### Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `initialContent` | `string` | `undefined` | Initial HTML content to load |
| `onChange` | `(editorState: EditorState, editor: LexicalEditor) => void` | `undefined` | Callback fired when content changes |
| `autoFocus` | `boolean` | `false` | Whether to focus the editor on mount |
| `className` | `string` | `''` | Additional CSS class for the editor container |

### Content Serialization

The editor provides utilities for exporting and importing content:

```tsx
import { toHTML, toPlainText, getEditorStateJSON } from './utils/serialization';

// Export as HTML
const html = toHTML(editor);

// Export as plain text
const text = toPlainText(editor);

// Export as JSON (Lexical EditorState)
const json = getEditorStateJSON(editor);
```

## Architecture

The editor follows a three-layer architecture:

```
RichTextEditor (container)
├── Toolbar (UI controls)
│   ├── ToolbarButton components
│   ├── ToolbarGroup components
│   ├── ToolbarDropdown components
│   └── ToolbarColorPicker components
└── EditorContent (Lexical wrapper)
    ├── Lexical editor instance
    └── Plugin system
```

### Key Components

- **RichTextEditor**: Main container component
- **Toolbar**: Formatting controls toolbar
- **EditorContent**: Wrapper for Lexical's ContentEditable
- **Plugins**: Auto-focus, History, List management, OnChange

### Custom Hooks

- **useTextFormat**: Apply text formatting (bold, italic, etc.)
- **useBlockFormat**: Convert block types (headings, quotes)
- **useListManagement**: Create and manage lists
- **useTextAlignment**: Apply text alignment (left, center, right)
- **useColorFormat**: Apply text and highlight colors with predefined palette

## Customization

The editor uses CSS variables for easy theming. Override these variables in your CSS:

```css
:root {
  --editor-bg: #ffffff;
  --editor-text: #000000;
  --editor-border: #e0e0e0;
  --toolbar-bg: #f5f5f5;
  --toolbar-border: #d0d0d0;
  --button-hover: #e8e8e8;
  --button-active: #d0d0d0;
  --focus-outline: #1976d2;
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 12px;
  --spacing-lg: 16px;
}
```

## Keyboard Shortcuts

| Shortcut | Action |
|----------|--------|
| Ctrl+B | Toggle bold |
| Ctrl+I | Toggle italic |
| Ctrl+U | Toggle underline |
| Ctrl+Shift+L | Align left |
| Ctrl+Shift+E | Align center |
| Ctrl+Shift+R | Align right |
| Ctrl+Z | Undo |
| Ctrl+Shift+Z | Redo |
| Ctrl+A | Select all |
| Tab | Indent list item |
| Shift+Tab | Outdent list item |
| Enter | Create new paragraph/list item |

## Technology Stack

- **React**: UI framework
- **TypeScript**: Type safety
- **Lexical**: Rich text editing framework by Meta
- **Vite**: Build tool and dev server
- **CSS Modules**: Scoped styling

## Browser Support

Modern browsers supporting ES2020:
- Chrome/Edge (latest)
- Firefox (latest)
- Safari (latest)

## License

MIT

## Contributing

Contributions are welcome! Please feel free to submit issues or pull requests.