use-editable icon indicating copy to clipboard operation
use-editable copied to clipboard

Support meta data over data attributes

Open kof opened this issue 3 years ago • 0 comments

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<Item>, where Item generic is defined by useEditable caller. For all manipulations we rely on .toString() representation, but in onChange we return content: Content<Item>.

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

export interface Content<Item> {
  items: Array<Item>;
  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

kof avatar Feb 27 '22 22:02 kof