{"id":13422121,"url":"https://github.com/inokawa/rich-textarea","last_synced_at":"2025-05-14T23:07:11.674Z","repository":{"id":37100793,"uuid":"352076475","full_name":"inokawa/rich-textarea","owner":"inokawa","description":"A small customizable textarea for React to colorize, highlight, decorate texts, offer autocomplete and much more.","archived":false,"fork":false,"pushed_at":"2025-04-30T19:13:05.000Z","size":56119,"stargazers_count":370,"open_issues_count":11,"forks_count":9,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-05-08T20:06:03.795Z","etag":null,"topics":["autocomplete","autosize","contenteditable","editor","highlight","input","react","react-component","richtext","tagging","textarea"],"latest_commit_sha":null,"homepage":"https://inokawa.github.io/rich-textarea/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/inokawa.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null},"funding":{"github":["inokawa"]}},"created_at":"2021-03-27T13:12:50.000Z","updated_at":"2025-05-03T19:11:10.000Z","dependencies_parsed_at":"2023-02-01T07:46:16.154Z","dependency_job_id":"e01dd4a5-2cd0-4698-b497-b88e5a15a62c","html_url":"https://github.com/inokawa/rich-textarea","commit_stats":{"total_commits":565,"total_committers":6,"mean_commits":94.16666666666667,"dds":"0.17345132743362834","last_synced_commit":"9fa86a40e74d3f224981599ccbb4250ec8b570bb"},"previous_names":[],"tags_count":99,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/inokawa%2Frich-textarea","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/inokawa%2Frich-textarea/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/inokawa%2Frich-textarea/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/inokawa%2Frich-textarea/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/inokawa","download_url":"https://codeload.github.com/inokawa/rich-textarea/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254243362,"owners_count":22038046,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["autocomplete","autosize","contenteditable","editor","highlight","input","react","react-component","richtext","tagging","textarea"],"created_at":"2024-07-30T23:00:37.361Z","updated_at":"2025-05-14T23:07:06.664Z","avatar_url":"https://github.com/inokawa.png","language":"TypeScript","readme":"# rich-textarea\n\n![npm](https://img.shields.io/npm/v/rich-textarea) ![npm bundle size](https://img.shields.io/bundlephobia/minzip/rich-textarea) ![npm](https://img.shields.io/npm/dw/rich-textarea) ![check](https://github.com/inokawa/rich-textarea/workflows/check/badge.svg) ![demo](https://github.com/inokawa/rich-textarea/workflows/demo/badge.svg)\n\nA small customizable textarea for [React](https://github.com/facebook/react) to colorize, highlight, decorate texts, offer autocomplete and much more.\n\n\u003e [!NOTE]\n\u003e You may also like https://github.com/inokawa/edix\n\n\u003cimg src=\"./images/sample-mention.gif\" width=\"350px\" /\u003e\u003cimg src=\"./images/sample-diff.gif\" width=\"350px\" /\u003e\n\n\u003cimg src=\"./images/sample-tagging.gif\" width=\"350px\" /\u003e\u003cimg src=\"./images/sample-url.gif\" width=\"350px\" /\u003e\n\n\u003cimg src=\"./images/sample-prism.gif\" width=\"350px\" /\u003e\u003cimg src=\"./images/sample-kuromoji.gif\" width=\"350px\" /\u003e\n\n## Demo\n\nhttps://inokawa.github.io/rich-textarea/\n\n## Features\n\n- **Styleable texts:** Not just highlighting texts like similar libraries, this library also supports colorizing, decorating and more. Regex or any tokenizers can be used.\n- **Easy to interact with events:** You can get caret position and can catch some mouse events on texts, which are useful to display something reflects user actions.\n- **Compatible with textarea:** Except added features, this library is designed to behave as native [textarea](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea) as much as possible. If not worked properly, please report it in an [issue](https://github.com/inokawa/rich-textarea/issues) or [PR](https://github.com/inokawa/rich-textarea/pulls).\n- **Out of the box integration:** Works as both [controlled](https://react.dev/reference/react-dom/components/textarea#controlling-a-text-area-with-a-state-variable) and [uncontrolled](https://react.dev/reference/react-dom/components/textarea#providing-an-initial-value-for-a-text-area). Supports [formik](https://github.com/jaredpalmer/formik), [react-hook-form](https://github.com/react-hook-form/react-hook-form), [@tanstack/react-form](https://github.com/TanStack/form) and more. Supports SSR. Supports form with [Server Actions](https://nextjs.org/docs/app/api-reference/functions/server-actions) in [Next.js](https://github.com/vercel/next.js) and [action in Remix](https://remix.run/docs/en/main/route/action).\n- **IME composition handling:** [IME](https://en.wikipedia.org/wiki/Input_method) related events have some cross browser problems. This library handles them for easy to use.\n- **Lightweight:** Trying to support many usecases but also keep bundle size small. Currently [~3kB (gzipped)](https://bundlephobia.com/package/rich-textarea).\n\n## Motivation\n\nSometimes we need customized text editor in web. However creating it with [raw contenteditable is so hard to do properly](https://github.com/grammarly/contenteditable) and editor frameworks are usually too heavy... Maybe you really need is just a textarea with highlighting and some hovered menus, but native textarea and many of textarea libraries are far from it because of the limited customizability. This library is aiming to solve the problem.\n\n## Install\n\n```sh\nnpm install rich-textarea\n```\n\n### Requirements\n\n- react \u003e= 16.14\n\nIf you use ESM and webpack 5, use react \u003e= 18 to avoid [Can't resolve `react/jsx-runtime` error](https://github.com/facebook/react/issues/20235).\n\n## Usage\n\n### Controlled\n\n```jsx\nimport { useState } from \"react\";\nimport { RichTextarea } from \"rich-textarea\";\n\nexport const App = () =\u003e {\n  const [text, setText] = useState(\"Lorem ipsum\");\n\n  return (\n    \u003cRichTextarea\n      value={text}\n      style={{ width: \"600px\", height: \"400px\" }}\n      onChange={(e) =\u003e setText(e.target.value)}\n    \u003e\n      {(v) =\u003e {\n        return v.split(\"\").map((t, i) =\u003e (\n          \u003cspan key={i} style={{ color: i % 2 === 0 ? \"red\" : undefined }}\u003e\n            {t}\n          \u003c/span\u003e\n        ));\n      }}\n    \u003c/RichTextarea\u003e\n  );\n};\n```\n\n### Uncontrolled\n\n```jsx\nimport { RichTextarea } from \"rich-textarea\";\n\nexport const App = () =\u003e {\n  return (\n    \u003cRichTextarea\n      defaultValue=\"Lorem ipsum\"\n      style={{ width: \"600px\", height: \"400px\" }}\n    \u003e\n      {(v) =\u003e {\n        return v.split(\"\").map((t, i) =\u003e (\n          \u003cspan key={i} style={{ color: i % 2 === 0 ? \"red\" : undefined }}\u003e\n            {t}\n          \u003c/span\u003e\n        ));\n      }}\n    \u003c/RichTextarea\u003e\n  );\n};\n```\n\n### Regex helper\n\nYou can use helper for regex if you don't want to create your own render function.\n\n```jsx\nimport { useState } from \"react\";\nimport { RichTextarea, createRegexRenderer } from \"rich-textarea\";\n\nconst renderer = createRegexRenderer([\n  [/[A-Z][a-z]+/g, { borderRadius: \"3px\", backgroundColor: \"#d0bfff\" }],\n]);\n\nexport const App = () =\u003e {\n  const [text, setText] = useState(\"Lorem ipsum\");\n\n  return (\n    \u003cRichTextarea\n      value={text}\n      style={{ width: \"600px\", height: \"400px\" }}\n      onChange={(e) =\u003e setText(e.target.value)}\n    \u003e\n      {renderer}\n    \u003c/RichTextarea\u003e\n  );\n};\n```\n\n### Next.js Server Actions\n\n```tsx\n// _components/Textarea.tsx\n\"use client\";\nimport { RichTextarea, RichTextareaProps } from \"rich-textarea\";\n\nexport const Textarea = (\n  props: Omit\u003cRichTextareaProps, \"children\" | \"ref\"\u003e\n) =\u003e {\n  return (\n    \u003cRichTextarea {...props}\u003e\n      {(v) =\u003e {\n        return v.split(\"\").map((t, i) =\u003e (\n          \u003cspan key={i} style={{ color: i % 2 === 0 ? \"red\" : undefined }}\u003e\n            {t}\n          \u003c/span\u003e\n        ));\n      }}\n    \u003c/RichTextarea\u003e\n  );\n};\n\n// page.tsx in App Router of Next.js\nimport { Textarea } from \"../_components/Textarea\";\n\nasync function hello(formData: FormData) {\n  \"use server\";\n  console.log(formData.get(\"hello\"));\n}\n\nexport default () =\u003e {\n  return (\n    \u003cdiv\u003e\n      \u003cdiv\u003ethis is server!\u003c/div\u003e\n      \u003cform action={hello}\u003e\n        \u003cTextarea defaultValue=\"Lorem ipsum\" name=\"hello\" /\u003e\n        \u003cbutton type=\"submit\"\u003esubmit\u003c/button\u003e\n      \u003c/form\u003e\n    \u003c/div\u003e\n  );\n};\n```\n\n### Remix action\n\n```tsx\nimport type { ActionFunction } from \"@remix-run/node\";\nimport { Form } from \"@remix-run/react\";\nimport { RichTextarea, RichTextareaProps } from \"rich-textarea\";\n\nconst Textarea = (props: Omit\u003cRichTextareaProps, \"children\" | \"ref\"\u003e) =\u003e {\n  return (\n    \u003cRichTextarea {...props}\u003e\n      {(v) =\u003e {\n        return v.split(\"\").map((t, i) =\u003e (\n          \u003cspan key={i} style={{ color: i % 2 === 0 ? \"red\" : undefined }}\u003e\n            {t}\n          \u003c/span\u003e\n        ));\n      }}\n    \u003c/RichTextarea\u003e\n  );\n};\n\nexport const action: ActionFunction = async ({ request }) =\u003e {\n  console.log((await request.formData()).get(\"hello\"));\n};\n\nexport default () =\u003e {\n  return (\n    \u003cForm method=\"post\"\u003e\n      \u003cTextarea defaultValue=\"Lorem ipsum\" name=\"hello\" /\u003e\n      \u003cbutton type=\"submit\"\u003esubmit\u003c/button\u003e\n    \u003c/Form\u003e\n  );\n};\n```\n\n## Documentation\n\n- [API reference](./docs/API.md)\n- [Examples](./stories) for more usages\n\n## Contribute\n\nAll contributions are welcome.\nIf you find a problem, feel free to create an [issue](https://github.com/inokawa/rich-textarea/issues) or a [PR](https://github.com/inokawa/rich-textarea/pulls).\n\n### Making a Pull Request\n\n1. Fork this repo.\n2. Run `npm install`.\n3. Commit your fix.\n4. Make a PR and confirm all the CI checks passed.\n","funding_links":["https://github.com/sponsors/inokawa"],"categories":["UI Components","TypeScript"],"sub_categories":["Form Components"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Finokawa%2Frich-textarea","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Finokawa%2Frich-textarea","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Finokawa%2Frich-textarea/lists"}