## Feature Examples

### Height
- description: Control the height of the text area (excluding the toolbar): - `minHeight` sets a minimum height in pixels. - `maxHeight` sets a maximum height in pixels. Once the maximum height is reached, an inner scroll appears. If undefined, the text area height is dynamic and grows or shrinks based on the user input.
- example:
```jsx
<RichTextInputArea minHeight="120px" maxHeight="400px" />;
```

### Status
- description: Control this component's status by using a `status` prop. - `error` demonstrates that required input is missing something or the entry was invalid. - `warning` highlights an input value that might have a significant impact to a user. - `loading` shows that text is being saved.
- example:
```jsx
<StorybookComponents.Stack flexDirection="column">
  <RichTextInputArea status="error" placeholder="Error" />
  <RichTextInputArea status="warning" placeholder="Warning" />
  <RichTextInputArea status="loading" placeholder="Loading" />
</StorybookComponents.Stack>;
```

### Status message
- description: Add text that explains the status or what action the user should take with the `statusMessage` prop. Showing the status message inline, directly below the input area is preferred in all default cases. - To add an accessible inline message, wrap the component in a `<FormField/>` and add the `statusMessage`. - To add a status message in a tooltip that requires users to hover on the icon, use the `statusMessage` prop. View more inline status message examples in `<FormField/>`.
- example:
```jsx
<StorybookComponents.Stack flexDirection="column">
  <StorybookComponents.Stack flexDirection="column" gap="12px">
    <Text secondary>For all default cases:</Text>
    <FormField status="error" statusMessage="This is an error message.">
      <RichTextInputArea placeholder="See message below" />
    </FormField>
  </StorybookComponents.Stack>
  <StorybookComponents.Stack flexDirection="column" gap="12px">
    <Text secondary>For narrow layouts only:</Text>
    <RichTextInputArea
      placeholder="Hover on status icon"
      status="error"
      statusMessage="This is an error message."
    />
  </StorybookComponents.Stack>
</StorybookComponents.Stack>;
```

### Text format
- description: This component supports the following formatting: - Bold - Italic - Underline - Link - Bullet list - Numbered list
- example:
```jsx
<StorybookComponents.Stack flexDirection="column">
  <RichTextInputArea initialValue="<strong>Bold text</strong>" />
  <RichTextInputArea initialValue="<em>Italic text</em>" />
  <RichTextInputArea initialValue="<u>Underline text</u>" />
  <RichTextInputArea initialValue='<a target="_blank" href="http://www.wix.com">Link</a>' />
  <RichTextInputArea initialValue="<ul><li>Bullet list item</li><li>Bullet list item</li><li>Bullet list item</li></ul>" />
  <RichTextInputArea initialValue="<ol><li>Numbered list item</li><li>Numbered list item</li><li>Numbered list item</li></ol>" />
</StorybookComponents.Stack>;
```

### Custom button labels
- description: Customize the label for each of the formatting buttons by using a `toolbarButtons` prop.
- example:
```jsx
<RichTextInputArea
  placeholder="Hover on the toolbar items to view the custom button labels."
  texts={{
    toolbarButtons: {
      boldButtonLabel: 'Bold',
      italicButtonLabel: 'Italic',
      underlineButtonLabel: 'Underline',
      linkButtonLabel: 'Link',
      bulletedListButtonLabel: 'Bulleted list',
      numberedListButtonLabel: 'Numbered list',
    },
  }}
/>;
```

### Spell check
- description: Enable standard browser spell check functionality with the `spellCheck` prop. This doesn't work on the IE browsers.
- example:
```jsx
<RichTextInputArea
  spellCheck
  initialValue="This text is mispeled. Click here to see the error underlined in red."
/>;
```

### Disabled
- description: You can disable the whole RichTextInputArea with `disabled` property
- example:
```jsx
() => (
  <Box gap="20px" direction="vertical">
    <FormField label="Enabled">
      <RichTextInputArea
        initialValue="<p>Edit this content</p>"
        placeholder="Write something..."
      />
    </FormField>

    <FormField label="Disabled">
      <RichTextInputArea
        disabled
        initialValue="<p>This content is read-only</p>"
        placeholder="Write something..."
      />
    </FormField>
  </Box>
);
```

## Common Use Case Examples

### Form
- description: The rich text input area is often used when there are multiple paragraphs of text. When content is longer than a sentence or two, text formatting greatly improves readability and allows people to scan easily.
- example:
```jsx
<Card>
  <Card.Header title="Event description" />
  <Card.Divider />
  <Card.Content>
    <FormField label="Add more details about the event">
      <RichTextInputArea
        minHeight="120px"
        placeholder="Add details dates, schedule and speakers."
      />
    </FormField>
  </Card.Content>
</Card>;
```