react-rich-textarea-chips

A modern React rich-text editor component built on top of Lexical, allowing users to insert custom placeholder chips (tokens like {{username}}, {{token}}, etc.) into a styled rich textarea.

Features

• Token Chips: Add non-editable placeholders/chips easily using standard template syntax (e.g., {{first_name}}).
• Lexical Engine: Robust, standard-compliant rich-text input behavior.
• Customizable: Built-in menu for inserting chips from a list.
• Tailwind-compatible: Styled gracefully out of the box with optional custom styling.

Installation

npm install react-rich-textarea-chips

Make sure you also have the peer dependencies installed:

npm install react react-dom

Usage

Import Styles

Before using the component, import the library styles in your application entry file (e.g. main.js, index.js, or App.js):

import 'react-rich-textarea-chips/style.css';

Component Integration

import React, { useState } from 'react';
import { RichInputWithPlaceholderChips } from 'react-rich-textarea-chips';

function App() {
  const [value, setValue] = useState('Hello {{first_name}}! Welcome to our platform.');

  const chips = [
    { label: 'First Name', value: 'first_name' },
    { label: 'Last Name', value: 'last_name' },
    { label: 'Email Address', value: 'email' },
    'company_name' // Can also pass plain strings
  ];

  const handleChange = (e) => {
    console.log('Serialized content:', e.target.value);
    setValue(e.target.value);
  };

  return (
    <div style={{ padding: '20px', maxWidth: '600px' }}>
      <h3>Email Template Editor</h3>
      <RichInputWithPlaceholderChips
        value={value}
        onChange={handleChange}
        placeholderChips={chips}
        placeholder="Type something..."
        rows={4}
      />
    </div>
  );
}

export default App;

Props

The RichInputWithPlaceholderChips component accepts the following props:

| Prop | Type | Default | Description | |---|---|---|---| | value | string | "" | Controlled value of the editor containing standard text and {{token}} formatting. | | onChange | (event: { target: { value: string, name?: string, id?: string } }) => void | undefined | Callback invoked when content changes. e.target.value provides the serialized string. | | placeholder | string | "" | Placeholder text shown when the editor is empty. | | placeholderChips | Array<string \| { label: string, value: string }> | [] | List of chips that can be inserted via the dropdown/plus menu. | | disabled | boolean | false | Disables the editor. | | rows | number | undefined | Minimum height based on number of text rows (each row adds ~24px). | | minHeight | string | undefined | Minimum height CSS value (e.g. "120px"). | | maxHeight | string | undefined | Maximum height CSS value (e.g. "400px"). | | className | string | "" | Custom class names for the container wrapper. | | contentClassName | string | "" | Custom class names for the editor content area. |

License

MIT