# Editify
A pure implementation of WYSIWYG HTML editor all we needed.
## Install
```shell
yarn add editify
```
## Usage (commonjs)
```html
```
```ts
import { Editify } from 'editify';
const editor = new Editify('editor');
editify.on('change', function(html, text) {
console.log('change event: new html: ', html);
console.log('change event: new text: ', text);
});
editify.on('selectionchange', function(selection) {
console.log('selectionchange event: selected text: ', selection.toString());
});
```
## Usage (umd)
```html
```
## Usage (next.js)
```tsx
export default function EditifyPage() {
const onChange = (html: string, text: string) => {
console.log('change event: new html: ', html);
console.log('change event: new text: ', text);
};
const onSelectionChange = (selection: Selection) => {
console.log('selectionchange event: selected text: ', selection.toString());
};
React.useEffect(() => {
// editify can be used only in client side
const { Editify } = require("editify");
const editor = new Editify("editor");
editor.on("change", onChange);
editor.on("selectionchange", onSelectionChange);
return () => {
editor.off("change", onChange);
editor.off("selectionchange", onSelectionChange);
};
}, []);
return (
);
}
```
## Roadmaps
- [x] contenteditable
- [x] on `change` event
- [x] on `selectionchange` event
- [ ] toolbar (fixed)
- [x] inline: bold
- [x] toggle
- [ ] inline: italic
- [ ] toggle
- [ ] inline: color
- [ ] toggle
- [ ] inline: link
- [ ] insert
- [ ] edit
- [ ] remove
- [ ] list
- [ ] toggle
- [ ] indent: tab
- [ ] indent: shift+tab
- [ ] image
- [ ] insert
- [ ] edit
- [ ] remove
- [ ] PDF
- [ ] insert
- [ ] edit
- [ ] remove
- [ ] table
- [ ] insert
- [ ] 2 * 2 cells
- [ ] edit
- [ ] cell
- [ ] add row
- [ ] add column
- [ ] remove row
- [ ] remove column
- [ ] remove
- [ ] cmd: tab
- [ ] cmd: shift+tab
- [ ] toolbar (hovered)
- [ ] undo / redo
- [ ] CSS
- [ ] default theme
- [ ] custom theme
- [ ] plugins