# [Marked Input](https://marked-input.vercel.app) · [![npm version](https://img.shields.io/npm/v/rc-marked-input.svg?style=flat)](https://www.npmjs.com/package/rc-marked-input) [![min zipped size](https://img.shields.io/bundlephobia/minzip/rc-marked-input)](https://bundlephobia.com/package/rc-marked-input) [![Storybook](https://gw.alipayobjects.com/mdn/ob_info/afts/img/A*CQXNTZfK1vwAAAAAAAAAAABjAQAAAQ/original)](https://marked-input.vercel.app)

<img width="521" alt="image" src="https://user-images.githubusercontent.com/37639183/182974441-49e4b247-449a-47ba-a090-2cb3aab7ce44.png">

A React component that lets you combine editable text with any component using annotated text.

**[Documentation](https://markput.vercel.app)** **[Storybook](https://marked-input.vercel.app)**

## Feature

- Powerful annotations tool: add, edit, remove, visualize
- Nested marks support
- Support for custom syntax patterns (e.g., HTML, markdown)
- TypeScript
- Support for any components
- Flexible and customizable
- Two ways to configure
- Helpers for processing text
- Hooks for advanced components
- Button handling (Left, Right, Delete, Backspace, Esc)
- Overlay with the suggestions component by default
- Zero dependencies
- Cross selection

## Installation

You can install the package via npm:

```
npm install rc-marked-input
```

## Contributing

If you want to contribute, you are welcome! Create an issue or start a discussion.