[New Feature]: Add possibility to render content as html

[BigDaddySigma]

Describe your proposal

Current behavior allows to use this component as custom input field only. The main purpose (as i think) to provide full control of input content render proccess.

To achieve this target component should be able to render content as html. For example using dangerouslySetInnerHTML. Currently this is works partially because if we use dangerouslySetInnerHTML caret position resets after every symbol input.

What do you think?

Code of Conduct

• I agree to follow this project's Code of Conduct

[ChrisUser]

Thanks @BigDaddySigma for raising this, the use case makes sense.

The caret jump happens because every keystroke makes React re-render the editable area, and dangerouslySetInnerHTML throws away the existing content and rebuilds it from scratch. The cursor was sitting inside a piece of text that no longer exists after the rebuild, so the browser has nowhere to put it back and snaps it to the start. That is exactly why the current component avoids touching the editable area through React at all: it writes plain text directly into the DOM, which is the same approach editors like Slate, Lexical and Tiptap use.

Adding a raw HTML prop would also weaken the security story of the package. Right now, anything that comes in (typed text, pasted text, content passed from the parent, the sanitize callback) is treated as plain text, so it cannot execute scripts. The moment we render HTML, all of those become possible injection points, and most users won't sanitize correctly.

A safer way to give people the same flexibility could be a new renderContent prop: the component still stores the value as plain text, but the consumer decides how to display it by returning a React element (for highlighting mentions, hashtags, links, code, etc.). React handles the rendering, no raw HTML is ever inserted, and the cursor stays put because we can save and restore its position around each render.

Here's an example of how that might work, a chat input that highlights @mentions in blue and #hashtags in orange, without ever rendering raw HTML:

const highlightTokens = (text: string) =>
  text.split(/(\s+)/).map((token, i) => {
    if (token.startsWith("@"))
      return <span key={i} style={{ color: "#2563eb" }}>{token}</span>
    if (token.startsWith("#"))
      return <span key={i} style={{ color: "#ea580c" }}>{token}</span>
    return token
  })

<ContentEditable
  placeholder="Write a message..."
  onChange={(text) => setValue(text)}
  renderContent={highlightTokens}
/>

The user types normally, the value stays a plain string, and the colored spans are just React elements. So there is no way for a malicious input like <img onerror=alert(1)> or <script>...</script> to ever become executable markup. This closes the door on XSS attacks by design, since React automatically escapes any text it renders and we never hand a raw HTML string to the browser.

If you'd like to take a shot at it, feel free to fork the repo and open a PR. I'll be happy to review it.

P.S. Be carefull on the caret positioning, that can be tricky.

[BigDaddySigma]

Use simple token replacements is a great idea but in this case we must to store input value and rendered content in different places to allow handle raw values (before replacement).

Right now i overheated by tasks, but maybe later im return to open PR to implement this feature.

[ChrisUser]

Sounds good! I think that with this new feature a user will be able to combine some props and fully recreate something like the Whatsapp/Telegram mentions in the messages. Now that's a cool one!