FormidableLabs / FormidableLabs/use-editable

Support meta data over data attributes

Open
#21 0 comments 8 reactions 0 assignees View on GitHub
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.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.