ArtyHtmlEditor

A comprehensive React-based HTML WYSIWYG editor with rich text formatting, media support, and responsive design.

Features

• Rich Text Formatting: Bold, italic, underline, strikethrough, subscript, superscript
• Font Controls: Font family, size (px/rem/%), line height
• Color Management: Text color and background color with color pickers
• Text Alignment: Left, center, right, justify
• Block Formatting: Headings (H1-H6), paragraphs, blockquotes
• Lists: Ordered and unordered lists with multiple styles
• Media Support: Image insertion and editing with responsive design
• Tables: Dynamic table creation with border customization
• Links: Insert, edit, and manage links with various options
• Undo/Redo: Complete undo/redo system
• Source View: Toggle between WYSIWYG and HTML source
• Responsive Design: Mobile-friendly interface
• Keyboard Shortcuts: Ctrl+Z, Ctrl+K, etc.
• TypeScript Support: Full TypeScript definitions included

Installation

npm install artyhtmleditor

Usage

Basic Usage

import React, { useState } from 'react';
import { HtmlEditor } from 'artyhtmleditor';

function App() {
  const [content, setContent] = useState('<p>Hello World!</p>');

  return (
    <div>
      <h1>My HTML Editor</h1>
      <HtmlEditor 
        value={content} 
        onChange={setContent} 
      />
    </div>
  );
}

TypeScript Usage

import React, { useState } from 'react';
import { HtmlEditor, HtmlEditorProps } from 'artyhtmleditor';

function App() {
  const [content, setContent] = useState<string>('<p>Hello World!</p>');

  const handleChange: HtmlEditorProps['onChange'] = (value) => {
    setContent(value);
  };

  return (
    <div>
      <h1>My HTML Editor</h1>
      <HtmlEditor 
        value={content} 
        onChange={handleChange} 
      />
    </div>
  );
}

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | value | string | '' | The HTML content value | | onChange | (value: string) => void | - | Callback function called when content changes |

Features in Detail

Text Formatting

• Bold: Ctrl+B or toolbar button
• Italic: Ctrl+I or toolbar button
• Underline: Ctrl+U or toolbar button
• Strikethrough: Toolbar button
• Subscript/Superscript: Toolbar buttons

Font Controls

• Font Family: Dropdown with popular fonts (Poppins, Arial, Times New Roman, etc.)
• Font Size: Multiple units (px, rem, %) with descriptive labels
• Line Height: Various spacing options from tight to relaxed
• Text Color: Color picker for text color
• Background Color: Color picker for highlighting text

Block Formatting

• Headings: H1-H6 with proper styling
• Paragraphs: Default paragraph formatting
• Blockquotes: Styled with left border and background
• Text Alignment: Left, center, right, justify

Lists

• Ordered Lists: Numbered lists with various styles (decimal, alpha, roman)
• Unordered Lists: Bullet lists with different markers (disc, circle, square)
• Nested Lists: Proper indentation and nesting
• List Navigation: Keyboard navigation within lists

Media

• Images: Insert images by URL with responsive design
• Image Properties: Alt text, title, dimensions
• Image Editing: Click images to edit properties
• Image Placeholders: SVG-based placeholders for editing

Tables

• Table Creation: Dynamic table insertion with customizable rows/columns
• Border Controls: Width, style, color customization
• Responsive Tables: Auto-sizing and styling

Links

• Link Management: Insert, edit, remove links
• Link Properties: URL, text, target, underline options
• Link Detection: Click links to edit properties
• Keyboard Shortcut: Ctrl+K to insert/edit links

Advanced Features

• Undo/Redo: Ctrl+Z / Ctrl+Y or Ctrl+Shift+Z
• Source View: Toggle between WYSIWYG and HTML source
• Format Clearing: Clear formatting with Ctrl+\
• Responsive Design: Mobile-friendly interface
• Accessibility: ARIA labels and keyboard navigation

Keyboard Shortcuts

| Shortcut | Action | |----------|--------| | Ctrl+Z / Cmd+Z | Undo | | Ctrl+Y / Cmd+Y | Redo | | Ctrl+K / Cmd+K | Insert/Edit Link | | Ctrl+\ / Cmd+\ | Clear Formatting | | Enter | New line / New list item | | Backspace | Delete / Exit list | | Tab / Shift+Tab | Indent / Outdent |

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

Requirements

• React 16.8.0 or higher
• React DOM 16.8.0 or higher

License

MIT

Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

Issues

If you find any issues or have feature requests, please open an issue on GitHub.