# Editor Textarea
URL: https://pro.rv-grid.com/api/editor-textarea/
Source: src/content/docs/api/editor-textarea.md
### `TextAreaEditor`

The `TextAreaEditor` is a custom external editor for RevoGrid that enables
multi-line text editing directly within grid cells using a `<textarea>` element.
This editor is particularly useful for scenarios where users need to input or edit
larger text content that spans multiple lines, such as comments, descriptions, or notes.

 **Features**:
- **Multi-line Text Support**: Renders a `<textarea>` element for multi-line input, allowing users to input detailed text content.
- **Automatic Focus & Selection**: Automatically focuses and selects the text content when the editor is rendered, ensuring a seamless user experience.
- **Keyboard Navigation**: Listens for `Enter` and `Tab` key events to save changes and move to the next cell, supporting efficient keyboard-based navigation.
- **Save on Blur**: Automatically saves the content and closes the editor when the user clicks outside the editor (`blur` event).
- **Scroll Glitch Prevention**: Ensures smooth user interaction by blurring the input before disconnecting the editor, preventing scroll glitches.

**Usage**:
- Import `TextAreaEditor` and assign it as an editor for specific columns in the RevoGrid instance.
- Ideal for columns that require detailed multi-line text input.

### Example
```typescript
import { TextAreaEditor } from '@revolist/revogrid-pro'

const grid = document.createElement('revo-grid');
grid.columns = [
  {
    prop: 'comments',
    name: 'Comments',
    editor: 'textarea',
  },
];

grid.editors = {
  textarea: TextAreaEditor,
};
```

This editor enhances RevoGrid by providing a user-friendly and efficient way
to handle multi-line text input, making it suitable for applications requiring
rich text editing capabilities within grid cells.

```ts
class TextAreaEditor {
  /**
     * Lifecycle method triggered after the editor is rendered.
     * Automatically focuses the textarea.
     */
  async componentDidRender(): Promise<void>;

  onKeyDown(e: KeyboardEvent);

  /**
     * IMPORTANT: Prevent scroll glitches when editor is closed and focus is on current input element.
     */
  beforeDisconnect();

  getValue();

  /**
     * Render method for the TextAreaEditor.
     * Creates a textarea element with initial cell value, handles input events, and saves changes on blur.
     */
  render(h: HyperFunc<VNode>);
}
```
