{"id":18828490,"url":"https://github.com/inokawa/edix","last_synced_at":"2025-04-14T02:52:01.931Z","repository":{"id":261618399,"uuid":"758331628","full_name":"inokawa/edix","owner":"inokawa","description":"An experimental, framework agnostic, small (~3kB) contenteditable state manager.","archived":false,"fork":false,"pushed_at":"2025-04-11T23:25:55.000Z","size":19625,"stargazers_count":67,"open_issues_count":29,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-12T00:27:57.862Z","etag":null,"topics":["angular","autocomplete","contenteditable","editor","highlight","input","preact","qwik","react","solid","svelte","tagging","textarea","vue"],"latest_commit_sha":null,"homepage":"https://inokawa.github.io/edix/","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":"2024-02-16T04:44:44.000Z","updated_at":"2025-04-11T23:25:02.000Z","dependencies_parsed_at":"2024-11-07T14:38:12.889Z","dependency_job_id":"3c7dcabe-4f16-48d8-9aee-0aaa47666792","html_url":"https://github.com/inokawa/edix","commit_stats":null,"previous_names":["inokawa/edix"],"tags_count":21,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/inokawa%2Fedix","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/inokawa%2Fedix/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/inokawa%2Fedix/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/inokawa%2Fedix/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/inokawa","download_url":"https://codeload.github.com/inokawa/edix/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248501922,"owners_count":21114681,"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":["angular","autocomplete","contenteditable","editor","highlight","input","preact","qwik","react","solid","svelte","tagging","textarea","vue"],"created_at":"2024-11-08T01:29:57.681Z","updated_at":"2025-04-14T02:52:01.925Z","avatar_url":"https://github.com/inokawa.png","language":"TypeScript","funding_links":["https://github.com/sponsors/inokawa"],"categories":["TypeScript"],"sub_categories":[],"readme":"# edix\n\n![npm](https://img.shields.io/npm/v/edix) ![npm bundle size](https://img.shields.io/bundlephobia/minzip/edix) [![check](https://github.com/inokawa/edix/actions/workflows/check.yml/badge.svg)](https://github.com/inokawa/edix/actions/workflows/check.yml) [![demo](https://github.com/inokawa/edix/actions/workflows/demo.yml/badge.svg)](https://github.com/inokawa/edix/actions/workflows/demo.yml)\n\n\u003e An experimental, framework agnostic, small (~3kB) [contenteditable](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/contenteditable) state manager.\n\n## Motivation\n\nWeb editing is so hard even today. There are excellent libraries to make complex rich text editor, but they are too much for small purposes. Native [textarea](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea) element is accessible and easy to use, but it's hardly customizable.\n\n[contenteditable](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/contenteditable) attribute is a primitive for rich text editing, but as you may know it has [so many problems](https://github.com/grammarly/contenteditable). It has many edge case bugs, and has cross browser/OS/input device problems. And it doesn't work well with declarative frontend frameworks... However, at least the core of contenteditable is stable and it works in all browsers except the inconsistencies. This library aims to fill that gap, fix contenteditable to fit modern web development.\n\n## Demo\n\n- [React Storybook](https://inokawa.github.io/edix/)\n- [Framework examples](#other-examples)\n\n## Install\n\n```sh\nnpm install edix\n```\n\n`typescript \u003e=5.0` is recommended.\n\n## Getting started\n\n1. Define your contents declaratively. There are rules you have to follow:\n\n   - You must render `\u003cbr/\u003e` in empty row (limitation of contenteditable).\n   - If `multiline` option is\n     - `false` or undefined, direct children of the root are treated as inline nodes.\n     - `true`, direct children of the root are treated as rows. They must be elements, not text.\n   - (TODO)\n\n2. Call `editable` on mount, with `HTMLElement` which is the root of editable contents.\n3. Update your state with `onChange`, which will be called on edit.\n4. Call `dispose` on unmount for cleanup.\n\nHere is an example for React.\n\n### Single line\n\n```tsx\nimport { useState, useEffect, useRef } from \"react\";\nimport { editable, plainSchema } from \"edix\";\n\nexport const App = () =\u003e {\n  const ref = useRef\u003cHTMLDivElement\u003e(null);\n  const [value, setValue] = useState(\"Hello world.\");\n\n  useEffect(() =\u003e {\n    // 2. init\n    const editor = editable(ref.current, {\n      schema: plainSchema(),\n      onChange: (v) =\u003e {\n        // 3. update state\n        setValue(v);\n      },\n    });\n    return () =\u003e {\n      // 4. cleanup\n      editor.dispose();\n    };\n  }, []);\n\n  // 1. render contents from state\n  return (\n    \u003cdiv\n      ref={ref}\n      style={{\n        backgroundColor: \"white\",\n        border: \"solid 1px darkgray\",\n        padding: 8,\n      }}\n    \u003e\n      {value ? value : \u003cbr /\u003e}\n    \u003c/div\u003e\n  );\n};\n```\n\n### Multi line\n\n```tsx\nimport { useState, useEffect, useRef } from \"react\";\nimport { editable, plainSchema } from \"edix\";\n\nexport const App = () =\u003e {\n  const ref = useRef\u003cHTMLDivElement\u003e(null);\n  const [value, setValue] = useState(\"Hello world.\");\n\n  useEffect(() =\u003e {\n    // 2. init\n    const editor = editable(ref.current, {\n      schema: plainSchema({ multiline: true }),\n      onChange: (v) =\u003e {\n        // 3. update state\n        setValue(v);\n      },\n    });\n    return () =\u003e {\n      // 4. cleanup\n      editor.dispose();\n    };\n  }, []);\n\n  // 1. render contents from state\n  return (\n    \u003cdiv\n      ref={ref}\n      style={{\n        backgroundColor: \"white\",\n        border: \"solid 1px darkgray\",\n        padding: 8,\n      }}\n    \u003e\n      {value.split(\"\\n\").map((t, i) =\u003e (\n        \u003cdiv key={i}\u003e{t ? t : \u003cbr /\u003e}\u003c/div\u003e\n      ))}\n    \u003c/div\u003e\n  );\n};\n```\n\n### Other examples\n\n- React ([Demo](https://inokawa.github.io/edix/react), [Source](./examples/react))\n- Vue ([Demo](https://inokawa.github.io/edix/vue), [Source](./examples/vue))\n- Svelte ([Demo](https://inokawa.github.io/edix/svelte), [Source](./examples/svelte))\n- Solid ([Demo](https://inokawa.github.io/edix/solid), [Source](./examples/solid))\n- Angular ([Demo](https://inokawa.github.io/edix/angular), [Source](./examples/angular))\n- Preact ([Demo](https://inokawa.github.io/edix/preact), [Source](./examples/preact))\n- Qwik ([Source](./examples/qwik))\n- Vanilla ([Demo](https://inokawa.github.io/edix/vanilla), [Source](./examples/vanilla))\n\n...and more! Contribution welcome!\n\n## Documentation\n\n- [API reference](./docs/API.md)\n\n## Contribute\n\nAll contributions are welcome.\nIf you find a problem, feel free to create an [issue](https://github.com/inokawa/edix/issues) or a [PR](https://github.com/inokawa/edix/pulls). If you have a question, ask in [discussions](https://github.com/inokawa/edix/discussions).\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\n## Inspirations\n\n- [rich-textarea](https://github.com/inokawa/rich-textarea) (my early work)\n- [use-editable](https://github.com/FormidableLabs/use-editable)\n- Some great text editor libraries ([ProseMirror](https://prosemirror.net/), [Lexical](https://github.com/facebook/lexical), [Slate.js](https://github.com/ianstormtaylor/slate), [Draft.js](https://github.com/facebookarchive/draft-js), etc.)\n- Proposed [EditContext API](https://github.com/w3c/edit-context)\n- Proposed [Richer Text Fields](https://open-ui.org/components/richer-text-fields.explainer/) in [Open UI](https://open-ui.org/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Finokawa%2Fedix","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Finokawa%2Fedix","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Finokawa%2Fedix/lists"}