Skip to content

phuocng/mirror-a-text-area

Repository files navigation

Mirror a text area

We have been using text areas in many web applications. However, there are many limitations when working with text area. For example, it only accept raw text value. This can be a hindrance when trying to implement advanced features such as highlighting a keyword, displaying the line numbers.

This series introduces a technique to mirror a text area element. Instead of working with the text area element directly, we create a copied element that look identical with the original text area. It's also placed at the same position as the text area. By doing this, we can enhance the user experience by allowing users to interact with the mirrored element in ways that were not possible with the original text area.

Highlight keywords in a text area

Display the line numbers in a text area

Calculate the coordinates of the current cursor in a text area

Highlight the current line in a text area

Create your own custom cursor in a text area

Add autocomplete to your text area

Insert emojis

Mention

Provide a preview of the suggestion as users type in a text area

Implement inline input suggestions

Make a text area fit its content automatically

Show a toolbar after selecting text in a text area

Copy the content of an element to your clipboard

Build a simple code editor

Convert text links in a text area to clickable links