Meetolog progress: editable component

In the last few sessions I've been working on an editable component. It's a component that has two building blocks - a preview and an editable input.

It's not a secret that this thing is natively supported by most browsers using the HTML contentedtiable. It's a simple attribute that you put on a div and the contents inside of it become editable on click. It's nice, but has some drawbacks.

For my purposes I decided to stick with a much more obvious approach.

The preview part of the component is a div with the content to be presented. On click on that div it gets replaced by an input or a textarea, depending on the need.

It's used like this:

1 2 3 4 5

<Editable type="input" value={meeting.title} className="meeting-title" />

The trick to make it non-obvious to the end user that behind the scenes there is an input is to style it in such a way, that the input/textarea has no borders, paddings etc. It's several lines of css, but I'm happy with the result.

Here's a short video of how it looks/works.

That's it for now.