abhee-rich-text-editor

A beautiful and feature-rich text editor for React applications with parameter suggestions.

Features

• Rich text formatting (bold, italic, underline)
• Headings (H1, H2)
• Lists (ordered and unordered)
• Todo lists with checkboxes
• Image insertion
• Table creation
• Parameter suggestions with @ symbol
• Fully customizable

Installation

npm install abhee-rich-text-editor

Usage

import { RichTextEditor } from 'abhee-rich-text-editor';

function App() {
  const handleChange = (content: string) => {
    console.log('Editor content:', content);
  };

  const customParameters = [
    {
      id: '1',
      name: 'userName',
      description: 'User\'s full name'
    },
    // Add more parameters as needed
  ];

  return (
    <RichTextEditor
      initialContent="<p>Start typing here...</p>"
      parameters={customParameters}
      onChange={handleChange}
      minHeight="300px"
    />
  );
}

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | initialContent | string | '' | Initial HTML content | | minHeight | string | '200px' | Minimum height of editor | | parameters | Parameter[] | [...] | Custom parameters for suggestions | | onChange | (content: string) => void | undefined | Callback when content changes | | className | string | '' | Additional CSS classes |

Parameter Suggestions

Type '@' in the editor to trigger parameter suggestions. Select a parameter to insert it with curly braces (e.g., {userName}).

License

MIT