Rc-rich-text-editor NPM

Rc Rich Text Editor React Component

Rc Rich Text Editor is a customizable, rich-text editor component for React applications. It provides a contenteditable div with various text formatting options, placeholder support, and custom styling capabilities.

Features

Rich-text editing capabilities
Customizable toolbar with various text formatting options
Placeholder support
Custom styling options
Accessibility support
Event handling for text changes
Sanitization of input to prevent XSS attacks

Installation

To use this component in your React project, follow these steps:

yarn add rc-rich-text-editor

npm install rc-rich-text-editor

Usage

Here's a basic example of how to use the Rc Rich Text Editor component:

import React from 'react';
import {RichTextEditor} from 'rc-rich-text-editor';

const MyComponent = () => {
  const handleTextChange = (content) => {
    console.log('Content changed:', content);
  };

  return (
    <RichTextEditor
      id="my-editor"
      name="my-editor"
      label="My Editor"
      placeholder="Start typing..."
      onTextChange={handleTextChange}
    />
  );
};

export default MyComponent;

Props

The RichTextEditor component accepts the following props:

id (required): Unique identifier for the editor
name (required): Name attribute for the editor
label: Label for the editor
initialValues: Initial HTML content for the editor
placeholder: Placeholder text when the editor is empty
controlOptions: Custom options for the toolbar controls (see Toolbar Customization)
wrapperClassName: Custom class name for the wrapper div
editorClassName: Custom class name for the editor div
toolbarClassName: Custom class name for the toolbar
stylePlatte: Custom styles for various elements of the editor
onTextChange: Callback function called when the text content changes

Toolbar Customization

The editor includes a customizable toolbar (EditableTopbar) that allows you to control which formatting options are available. You can customize the toolbar using the controlOptions prop:

const customControlOptions = {
  bold: { show: true, icon: <CustomBoldIcon /> },
  italic: { show: false },
  underLine: { show: true, className: 'custom-underline-btn' },
  // ... other options
};

<RichTextEditor
  // ... other props
  controlOptions={customControlOptions}
/>

Available Control Options

The toolbar supports the following control options:

Basic Formatting:
- bold
- italic
- underLine
Text Alignment:
- justifyLeft
- justifyCenter
- justifyRight
- justifyFull
Lists:
- orderedList
- unorderedList
Special Features:
- heading
- link
- emoji

Customization Properties

For most buttons, you can customize:

show: Boolean to control visibility of the button
icon: Custom React element to replace the default icon
className: Additional CSS class for styling

Special cases:

Link: Has additional linkIcon and unlinkIcon properties
Heading: Has an additional dropdownClassName for styling the dropdown

Customization Examples

Hide a button:

const customOptions = {
  italic: { show: false }
};

Custom icon:

const customOptions = {
  bold: { icon: <MyCustomBoldIcon /> }
};

Custom styling:

const customOptions = {
  underLine: { className: 'my-underline-button' }
};

Link button customization:

const customOptions = {
  link: {
    show: true,
    linkIcon: <MyLinkIcon />,
    unlinkIcon: <MyUnlinkIcon />,
    className: 'custom-link-button'
  }
};

Heading button customization:

const customOptions = {
  heading: {
    show: true,
    dropdownIcon: <MyDropdownIcon />,
    className: 'heading-button',
    dropdownClassName: 'heading-dropdown'
  }
};