Content editable element in React.

In recent time, I was tasked with implementing a feature that allows users to edit content seamlessly, such as modifying paragraphs or headings. I explored various approaches to tackle this challenge, ranging from toggling text elements to input elements upon clicking or onBlur events, to leveraging the 'editable' prop in the Ant Design library.

All the above suggestions worked but not giving me the result I was looking for. Then I learnt something new. I figured you can also make text elements (paragraph tags, header tags etc.) editable seamlessly with an inbuilt attribute called contentEditable.

So contentEditable prop when passed, would make the element editable by just clicking on it, it can be a lot helpful when building rich editors so basically what this is doing is giving user the ability to inject html directly on the DOM(Document Object Model) which if we are being honest can be risky due to browsers inconsistency so it should be handled properly.

How it works

contentEditable is a property In the html element that help with rendering rich texts in the browser, and editing it on the fly, making an element editable is quite straight forward.

Let’s see an example:

From the example above we noticed the props being passed into the element

contentEdtable: This prop is set to true, which signifies to the browser that this element is editable

suppressEditableContentWarning: This prop is also added to help remove warning that’s arise when using the contentEditable prop, this is a warning you can possibly get “A component is contentEditable and contains children managed by react” if using it in a react project.

Now, let’s save the value that is being typed in our editable element.

Now in this example, we can clearly see we how we catch values typed into our editable content and save it in a state. And if we go over to our console and check after the onBlur function is fired you should see your value rendered. In our case "Hello there"

There are other methods you can use to save your data, I decided to use onBlur by discretion, but you can choose to use other functions like onInput, onMouseOut, onKeydown etc.

NB. Editable elements do not have onChange function like form elements(input tags, textarea tags etc).

Let's do one last trick. We now have our editable content up and working, but just like inputs have placeholders when it is empty, we too can add placeholders to our elements when empty.

Here is how:

In the image above you can see we added two new attributes

data-placeholder: This attribute helps us add the appropriate placeholder to our element. This is where we would add our placeholder value

className: This is us adding a className to our editable element so we can target it in our css.

Then, our final strike as we would have known is going to be in our css file.

With this css properties added to our element class our element should have the placeholder specified by the data-placeholder in the html.

And that's it guys!

We have successfully created an editable element, saved it's state locally and also added placeholder when it is empty.

Best wishes on your development journey.