{"id":22681929,"url":"https://github.com/hiukky/cedit","last_synced_at":"2025-04-12T17:10:00.853Z","repository":{"id":40668222,"uuid":"465452862","full_name":"hiukky/cedit","owner":"hiukky","description":"📝 A simple way to edit content in react","archived":false,"fork":false,"pushed_at":"2022-04-29T17:24:52.000Z","size":1625,"stargazers_count":5,"open_issues_count":2,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-26T11:39:20.006Z","etag":null,"topics":["content-editable","html5","react","react-contenteditable"],"latest_commit_sha":null,"homepage":"https://hiukky.github.io/cedit","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/hiukky.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}},"created_at":"2022-03-02T20:05:04.000Z","updated_at":"2022-08-31T23:39:51.000Z","dependencies_parsed_at":"2022-08-10T00:24:09.652Z","dependency_job_id":null,"html_url":"https://github.com/hiukky/cedit","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hiukky%2Fcedit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hiukky%2Fcedit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hiukky%2Fcedit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hiukky%2Fcedit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hiukky","download_url":"https://codeload.github.com/hiukky/cedit/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248594190,"owners_count":21130316,"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":["content-editable","html5","react","react-contenteditable"],"created_at":"2024-12-09T20:16:12.588Z","updated_at":"2025-04-12T17:10:00.807Z","avatar_url":"https://github.com/hiukky.png","language":"TypeScript","funding_links":["https://www.buymeacoffee.com/hiukky"],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n  \u003cimg alt=\"cedit logo\" src=\"https://github.com/hiukky/cedit/raw/main/assets/banner.png\"/\u003e\n\u003c/div\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://github.com/hiukky/cedit/stargazers\"\u003e\n    \u003cimg alt=\"GitHub stars\" src=\"https://img.shields.io/github/stars/hiukky/cedit?color=151A20\u0026style=for-the-badge\u0026colorA=0d1117\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://github.com/hiukky/cedit/network\"\u003e\n    \u003cimg alt=\"GitHub forks\" src=\"https://img.shields.io/github/forks/hiukky/cedit?color=151A20\u0026style=for-the-badge\u0026colorA=0d1117\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://github.com/hiukky/cedit/issues\"\u003e\n    \u003cimg alt=\"GitHub issues\" src=\"https://img.shields.io/github/issues/hiukky/cedit?style=for-the-badge\u0026color=151A20\u0026colorA=0d1117\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"httdivs://github.com/hiukky/cedit/blob/master/LICENSE\"\u003e\n    \u003cimg alt=\"GitHub license\" src=\"https://img.shields.io/github/license/hiukky/cedit?color=151A20\u0026style=for-the-badge\u0026colorA=0d1117\" /\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003csub\u003eBuilt with ❤︎ by \u003ca href=\"https://hiukky.com\"\u003ehiukky\u003c/a\u003e\n  \u003cbr/\u003e\n\u003c/p\u003e\n\n\u003cbr\u003e\n\n# About\n\nCedit is a component for react that uses the [Content Editable](https://developer.mozilla.org/pt-BR/docs/Web/Guide/HTML/Editable_content) feature for free editing of content within an HTML element. It is light and minimalist and aims to make the most of this wonderful resource in a clean and performative way.\n\n\u003cbr\u003e\n\n# Motivation\n\nThe `content editable` is an excellent and super useful feature that I needed to implement many times but I always faced some basic usage problems such as caret positioning, etc. And even with some components in the community implementing this feature, the same issues still exist! The objective of this implementation is to skip this step and deliver a simple component, at the same time powerful and with the basic functioning expected.\n\n\u003cbr\u003e\n\n# Installation\n\nCedit is a lightweight package with 0 dependencies.\n\n\u003cbr\u003e\n\n### Using NPM\n\n```sh\nnpm i cedit\n```\n\n### Using Yarn\n\n```sh\nyarn add cedit\n```\n\n\u003cbr\u003e\n\n# Use\n\nThe component has a simple interface, you can import the `CeditProps` interface for better specification.\n\nAll handlers return a value of type `Maybe\u003cHTMLDivElement\u003e` with keys `text`, `html` and `event`.\n\n\u003cbr\u003e\n\n## Cedit\n\nYou can check a practical example in [Demo](https://hiukky.github.io/cedit/).\n\n\u003cbr\u003e\n\n```tsx\nimport { useState } from 'react'\nimport { Cedit, CeditProps, Maybe } from 'cedit'\n\nconst App: React.FC = () =\u003e {\n  const [value, setValue] = useState('')\n\n  return (\n    \u003cCedit\n      value={value}\n      placeholder=\"Type here...\"\n      onChange={({ text, html, event }) =\u003e setValue(html)}\n    /\u003e\n  )\n}\n```\n\n\u003cbr\u003e\n\n## Provider\n\nIf you want to control more than one editor, you can use `CeditProvider` to wrap all components and take advantage of features like autofocus. For now the provider does not offer extra features, but it will be implemented in the future.\n\n\u003cbr\u003e\n\n```tsx\nimport { Cedit, CeditProps, CeditProvider, Maybe } from 'cedit'\n\nconst App: React.FC = () =\u003e {\n  return (\n    \u003cCeditProvider\u003e\n      {/* Editors */}\n    \u003cCeditProvider\u003e\n  )\n}\n```\n\n\u003cbr\u003e\n\n| Property    | Type                | Description                                                                                                                                                                     |\n| ----------- | ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| id          | string              | Specifies a unique id for an HTML element.                                                                                                                                      |\n| value       | string              | Can be plain text or html.                                                                                                                                                      |\n| spellCheck  | boolean             | Spell check.                                                                                                                                                                    |\n| editable    | boolean             | Enable editing when focusing on component                                                                                                                                       |\n| multiLine   | boolean             | When true allows line wrapping.                                                                                                                                                 |\n| style       | React.CSSProperties | Custom styles.                                                                                                                                                                  |\n| className   | string              | CSS class for styling. By default no styles are defined for the component, only resets basic settings.                                                                          |\n| placeholder | string              | A small tip, phrase, word, which is intended to help the user understand how to fill out that form.                                                                             |\n| autoFocus   | boolean             | If enabled, the element receives focus automatically when displayed.                                                                                                            |\n| placement   | string              | Editable content centering, the accepted values are: `topStart`, `topCenter`, `topEnd`, `middleStart`, `middleCenter`,`middleEnd`,`bottomStart`,`bottomCenter` and `bottomEnd`. |\n| onKeyUp     | Maybe[T]            | The keyup event fires when a key is released.                                                                                                                                   |\n| onKeyDown   | Maybe[T]            | The keydown event is fired when a key is pressed.                                                                                                                               |\n| onKeyPress  | Maybe[T]            | The onkeypress event occurs when the user presses a key.                                                                                                                        |\n| onBlur      | Maybe[T]            | The onblur event occurs when an object loses focus.                                                                                                                             |\n| onFocus     | Maybe[T]            | The onfocus event occurs when an element gets focus.                                                                                                                            |\n| onChange    | Maybe[T]            | The onchange event occurs when the value of an element has been changed.                                                                                                        |\n| onPaste     | Maybe[T]            | The onpaste event occurs when the user pastes some content in an element.                                                                                                       |\n\n\u003cbr\u003e\n\n# Style\n\nThe component has no predefined styling, but exposes two main classes that you can use to style.\n\n```css\n/* Container */\n.cedit {\n}\n\n/* Content */\n.cedit__content {\n}\n```\n\n\u003cbr\u003e\n\n# Contributing\n\nCedit is in an initial version without many features yet, but you can feel free to send your suggestion or open a PR.\n\n\u003cbr\u003e\n\n\u003cdiv align=\"center\"\u003e\n\u003ca target=\"_blank\" rel=\"noopener noreferrer\" href=\"https://www.buymeacoffee.com/hiukky\"\u003e\n\u003cimg width=\"250\" alt=\"buy me a coffee\" src=\"https://github.com/hiukky/cedit/raw/main/assets/coffe.svg\"/\u003e\n\u003c/a\u003e\n\u003c/div\u003e\n\n\u003cbr\u003e\n\n\u003cdiv align=\"center\"\u003e\n\u003ca href=\"https://github.com/hiukky/cedit/blob/master/LICENSE\"\u003e\n\u003cimg alt=\"GitHub license\" src=\"https://img.shields.io/github/license/hiukky/cedit?color=1F2630\u0026style=for-the-badge\u0026colorA=1F2630\" /\u003e\n\u003c/a\u003e\n\u003c/div\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhiukky%2Fcedit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhiukky%2Fcedit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhiukky%2Fcedit/lists"}