react-rich-textarea-chips 1.0.0

package/README.md

@@ -0,0 +1,91 @@
+# 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
+
+```bash
+npm install react-rich-textarea-chips
+```
+
+Make sure you also have the peer dependencies installed:
+
+```bash
+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`):
+
+```javascript
+import 'react-rich-textarea-chips/style.css';
+```
+
+### Component Integration
+
+```jsx
+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