React Content Editable and its application

[reboottime]

Overview

This article talks about react-content editable, including

1. its application in single page applications or web builders.
2. its rationale- the contentditable property and its source code

[reboottime]

Fundamentals: contenteditable property and react-contenteditable

The contenteditable property

HTML elements can be made editable by users using the contenteditable property. When this property is set, it allows users to modify the innerHTML of the element, similar to how they interact with a text input element. Here is an example provided by MDN

• The convenience of using a contenteditable element lies in its ability to dynamically adjust its width and height as the content grows, so you do not need to programmatically handle text input element's width when text input value grows.
• How to capture content change:
  • while a _contenteditable_ element can be interacted like an text input, it doesn't support onChange event like how we use input.
  • react-contenteditable solved above problem, please reading bellow

react-contenteditable and how it resolves onChange event

react-contenteditable exposes an onChange interface to users, which is an intuitive design to developer users.

Behind the scenes, it mocks the onChange event such that whenever user inputs, it calls external onChange event.

Here are the details

[reboottime]

Applications of React Content Editable in SPA

In a multi-step workflow, users may anticipate the ability to update data generated in the final step. However, it may not be feasible to navigate back to the previous screen at the last step.

To address this, we provide users with an interface that allows them to edit the filled information from previous steps directly within the display, for instance
.

1. Editing the previous value using menu

2. Editing the previous value using editable area

3. Edting title directly at where we show it in azure PR request

[reboottime]

Security considerations with content editable

Users have the freedom to input any content of their choice within the content-editable area. For instance, in this CodeSandbox sample, users can input a script as shown below:

That means this could pose a security risk if a user inputs malicious content into the editable area, as that content may be executed.

when it comes to eliminating malicious content, sanitize-html is your ally , offering flexible configuration options for tailored content sanitization.

[reboottime]

Some common issues

1. How to add placeholder effect for content editable.;

[contenteditable=true]:empty:before {
  content: attr(placeholder);
  display: block;
  color: #aaa;
}

[reboottime]

References

1. react content editable package
2. MDN doc : contenteditable
3. Clean up user submitted html
4. Add placeholder effect to content editable