FormidableLabs / FormidableLabs/use-editable
Support meta data over data attributes
- Dominant language
- TypeScript
- Stars
- 619
- Forks
- 16
- PR merge metrics
- No merged PRs in 30d
Description
Hi, I was fiddling around and found a way to associate data with text that is being managed by useEditable.
Right now the use cases for use-editable would be limited because you always get back just textContent, so if you rendered any additional stuff to the dom - it gets lost because not representable by text, which I know is by design, but we can actually quite easily achieve a more versatile rendering engine.
We can serialize also dataset and not just textContent, basically just {...node.dataset}. I changed the internals from toString() to produce an object with a .toString() method `Content`, where Item generic is defined by useEditable caller. For all manipulations we rely on .toString() representation, but in onChange we return content: Content.
This has allowed me to move dom serialization logic to the caller and caller defines how things get serialized, while use-editable stays very small and doesn't care at all what the format is, except that it should provide a .toString() method
```ts
export interface Content {
items: Array;
toString: () => string;
}
```
In the end, it allowed me to attach an id to elements and in onChange callback convert content to react elements that have data awareness. A complete wysiwyg can essentially be built on top of this.
I can provide a POC PR with what I did
Contributor guide
No contributing guide indexed for this repository
Assessment
This issue has not been assessed yet.