ContentEditable-based TextArea with inline autocomplete (No native `<textarea>`)

[aymericzip]

Summary

Create TextArea element in react, without using the native <textarea> tag.

The textarea tag is too restrictive, it does not offer enough control on one line. In the following case, we want to autocomplete the line. To actually make it, we have to positioned absolutely the autocompleted text.

Create a React TextArea replacement (no native <textarea>)

Key requirements

• No native <textarea>. Use DOM spans + contentEditable.

• Each line is a <span>; within a line, split into:

  • editable segment (user text)
  • ghost segment (autocomplete, non-editable, different color)

• Autocomplete must position inline with pixel accuracy across devices, browsers, and zoom levels.

• Works on any line, not just the last.

• Bi-dir support: LTR and RTL.

• Looks/behaves like a textarea: className, value, defaultValue, onChange, onClick, minRows, maxRows, disabled, placeholder.

• Parsing pipeline to transform value → tokens (future: bold/formatting).

• Optimize re-rendering.

Design notes

• Container: <div role="textbox" aria-multiline>
• Line: <span contentEditable></span>
• Accessibility: caret visible, screen-reader labels, aria-autocomplete="inline".

Related components

• Autocomplete text area (packages/@intlayer/design-system/src/components/TextArea/AutocompleteTextArea.tsx)