When working with text areas, it's important to remember that they don't accept clickable links. That means any links you include will just look like regular text, making it hard for users to access the linked content. But don't worry, there's a solution! We need to convert these links to HTML anchor tags.
Converting raw text links to clickable links is crucial for web design and user experience. It makes it easy for users to access linked content without having to copy and paste the URL into a browser. By clicking on a clickable link, users can be directed to another page or website, providing additional information or resources related to the text area content. Plus, clickable links make the text area more readable by clearly distinguishing between plain text and linked content.
In this post, we'll learn how to implement this functionality using JavaScript.
Converting plain text links to HTML anchor tags
Converting links found in plain text to clickable HTML anchor tags can be a daunting task, but with the Linkify library, it's a breeze.
To get started, simply include two scripts in the <body> tag:
<body>
...
<script src="https://unpkg.com/linkifyjs@4.1.1/dist/linkify.min.js"></script>
<script src="https://unpkg.com/linkify-string@4.1.1/dist/linkify-string.min.js"></script>
</body>
Once the Linkify library is available, you can easily convert links found in a text area with real HTML anchor tags. The linkifyStr function accepts two parameters. The first one is the raw text, and the second one is the options. In this example, the second parameter indicates that the links will be opened in a new tab:
const convertedLinks = linkifyStr(textarea.value, {
target: '_blank',
});
With these simple steps, you can easily convert plain text links to clickable HTML anchor tags.
Making anchors visible
Once we've converted the links in the text area, we can set the mirrored element's content accordingly:
const findLinks = () => {
mirroredEle.innerHTML = linkifyStr(textarea.value, {
target: '_blank',
});
};
Next, we need to make the anchors visible to users. To achieve this, we have to set the background and color properties of the text area to transparent. Additionally, we need to set the caret-color property so users can see where the cursor is.
Here's the code to make the anchors visible:
.container__textarea {
background: transparent;
caret-color: rgb(0 0 0);
color: transparent;
}
Now, if we follow these steps, the links will be displayed properly. However, you might notice that clicking on a link doesn't take us to the target website.
Don't worry, we'll fix that in the next section.
Making anchors clickable
To fix the issue we discussed in the previous section, we need to make some changes. First, we'll reverse the order of the text area and the mirrored element. Instead of having the text area in front, we'll put it behind the mirrored element. Here's an example of what that looks like:
// Before
containerEle.prepend(mirroredEle);
// Now
containerEle.appendChild(mirroredEle);
Next, we need to make sure users can interact with the text area. To do this, we'll set the pointer-events property to none. This lets users update the contents of the text area without any issues. If we didn't set pointer-events to none, the mirrored element would capture all mouse events, making it impossible for users to edit their code or select text.
But we still want users to be able to click on the anchors inside the mirrored element. To make this possible, we'll reset the pointer-events property for the anchors:
.container__mirror {
pointer-events: none;
}
.container__mirror a {
pointer-events: auto;
}
Take a look at the final demo below to see how it all comes together.
It's highly recommended that you visit the original post to play with the interactive demos.
If you found this series helpful, please consider giving the repository a star on GitHub or sharing the post on your favorite social networks 😍. Your support would mean a lot to me!
If you want more helpful content like this, feel free to follow me:
Top comments (1)
Very interesting series Phuoc, thanks for that 👍 as I understand it’s a POC and the amount of techniques used here is astonishing. I’m curious WDYT (or discovered maybe?) about the performance of the final solution (as a code/text editor with additional features like mentions or syntax highlighting)? Would that be a viable thing to do for an app that deals with large JSON files for instance? 10k lines? 100k lines? In terms of dynamics of CSS superposition and stuff like ResizeObserver within the context of async code reading/writing and repainting on the screen? Don’t you know by any chance if the guys like Monaco or CodeMirror do things somehow similar way or it’s totally different?