Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/inokawa/edix
An experimental, framework agnostic, small (~2.5kB) contenteditable state manager.
https://github.com/inokawa/edix
angular autocomplete contenteditable editor highlight input preact qwik react solid svelte tagging textarea vue
Last synced: about 2 months ago
JSON representation
An experimental, framework agnostic, small (~2.5kB) contenteditable state manager.
- Host: GitHub
- URL: https://github.com/inokawa/edix
- Owner: inokawa
- License: mit
- Created: 2024-02-16T04:44:44.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2024-11-07T14:19:31.000Z (about 2 months ago)
- Last Synced: 2024-11-07T14:35:34.620Z (about 2 months ago)
- Topics: angular, autocomplete, contenteditable, editor, highlight, input, preact, qwik, react, solid, svelte, tagging, textarea, vue
- Language: TypeScript
- Homepage: https://inokawa.github.io/edix/
- Size: 15.6 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 10
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# edix
  [](https://github.com/inokawa/edix/actions/workflows/check.yml) [](https://github.com/inokawa/edix/actions/workflows/demo.yml)
> An experimental, framework agnostic, small (~2.5kB) [contenteditable](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/contenteditable) state manager.
## Motivation
TODO
## Demo
- [React Storybook](https://inokawa.github.io/edix/)
- [Framework examples](#other-examples)
## Install
```sh
npm install edix
```
## Getting started
1. Define your contents declaratively. There are rules you have to follow:
- Direct children of the root are treated as rows. They must be elements, not text.
- You must render `
` in empty row (limitation of contenteditable).
- TODO
2. Call `editable` on mount, with `HTMLElement` which is the root of editable contents.
3. Update your state with `onChange`, which will be called on edit.
4. Call return value of `editable` on unmount for cleanup.
Here is an example for React.
```tsx
import { useState, useEffect, useRef } from "react";
import { editable } from "edix";
export const App = () => {
const ref = useRef(null);
const [value, setValue] = useState("Hello world.");
useEffect(() => {
// 2. init
const cleanup = editable(ref.current, {
onChange: (v) => {
// 3. update state
setValue(v);
},
});
return () => {
// 4. cleanup
cleanup();
};
}, []);
// 1. render contents from state
return (
{value.split("\n").map((t, i) => (
{t ? t :
}
))}
);
};
```
### Other examples
- [React](./examples/react)
- [Vue](./examples/vue)
- [Svelte](./examples/svelte)
- [Solid](./examples/solid)
- [Angular](./examples/angular)
- [Preact](./examples/preact)
- [Qwik](./examples/qwik)
...and more! Contribution welcome!
## Documentation
- [API reference](./docs/API.md)
## Contribute
All contributions are welcome.
If 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).
### Making a Pull Request
1. Fork this repo.
2. Run `npm install`.
3. Commit your fix.
4. Make a PR and confirm all the CI checks passed.