Allow specifying HTML code as value of TextField

[FireFragment]

• I have searched the issues of this repository and believe that this is not a duplicate.

Summary 💡

Now, the value property of TextField component is expected to be string. I would like if it was possible to specify HTML instead.

Examples 🌈

Consider this example:

<TextField value=<>Some text, <Chip label="Chip"/> another text.</> />

NOTE: The <> tag is React.Fragment

It would render TextField, where every text in the root element (Some text and another text in this example) would be editable by user and children (chip in this example) would behave like one character, (eg. deletable with backspace / delete key, arrow keys on keyboard would skip them, etc. ).

It could look like this:

Motivation 🔦

Mentions in social apps

Chip or something similar may be used as mention decoration directly inside TextField.

User-editable parsers (my case)

Some apps include user-editable parsers, eg. app for assigning metadata of lots of files from their filename, where users can define the rule.

It's often done with $(something) syntax, eg. $(name) by $(author), but using chips directly inside TextField instead would be much more pretty and user-friendly.

Implementation tip 👨‍💻

Maybe it could be done with naked TextFields between HTML components.

[oliviertassinari]

@FireFragment This is likely possible to implement but you will have to render a custom input element. Maybe with a contenteditable attribute. Also, we track the need for a rich text editor in mui/mui-x#513.

[FireFragment]

I just discovered it's possible to do it with contenteditable='true' property on div, but there are problems deleting tags with backspace (delete key works fine)

Here is example (not in React): https://codepen.io/maty1000/pen/abwpbqK

[b0s-at-works]

Last few month I'm working on dialog, who receives HTML code. That HTML code have to become innerHTML of textarea or content editable div. We need that HTML to be exactly how it was converted by browser when a user writing text in text area or in content editable div, and then we need that text will be editable later and for that it should be restored as innerHTML to have exact look before which was before saving.

Also, there is no way to set value/defaultValue with HTML and there is no way to set dangerouslySetHTML because inside yours components there at leased one child.

When we are using TextField or TextAreaAutoResize there is no way to have Material UI styling and Material UI js implemented styling on selfimplemented custom textarea and as result we have to spend a lot of time on cloning Material UI styling, which probably also implemented with Material UI JavaScript part. So Material UI looses it's portability. We will have to rewrite out code to mirror look of your implementation of style of Material UI.
For example autoresizing will not work, if I will just duplicate your TextArea. Custom TextArea will not grow automatically. So code have to be implemented manually by developer.

Guys, I think you really need to rewrite your textarea to support dangerouslySetHTML or to mirror your TextAreaAutoResize as content-editable div, like you can make TextAreaContentEditableAutoResize or DivContentEditableAutoResize because there are situations when developers need pure HTML received by that field with chance to store also your MaterialUI styling/js styling, or it's just make no sense.