An experimental, framework agnostic, small (~2.5kB) contenteditable state manager.
Web 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 element is accessible and easy to use, but it's hardly customizable.
Adding contenteditable attribute may seem easy to use, but as you may know it has so many problems. It has many edge case bugs, and has cross browser/OS/input device problems. And also it doesn't work well with declarative frontend frameworks... This library aims to fill that gap, fix contenteditable to fit modern web development.
npm install edix
Define your contents declaratively. There are rules you have to follow:
<br/>
in empty row (limitation of contenteditable).Call editable
on mount, with HTMLElement
which is the root of editable contents.
Update your state with onChange
, which will be called on edit.
Call return value of editable
on unmount for cleanup.
Here is an example for React.
import { useState, useEffect, useRef } from "react";
import { editable } from "edix";
export const App = () => {
const ref = useRef<HTMLDivElement>(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 (
<div
ref={ref}
style={{
backgroundColor: "white",
border: "solid 1px darkgray",
padding: 8,
}}
>
{value.split("\n").map((t, i) => (
<div key={i}>{t ? t : <br />}</div>
))}
</div>
);
};
...and more! Contribution welcome!
All contributions are welcome. If you find a problem, feel free to create an issue or a PR. If you have a question, ask in discussions.
npm install
.