In Loklak Search the post items contain links, which are either internal or external. These links include the hashtags, mentions, and URLs. From the backend server we just received the message in the plain text format, and thus there is need to parse the plain text and render it as clickable links. These clickable links can be either internal or external. Thus we need an auto-linker component, which takes the text and render it as links.
The API of the Component
The component takes as the input the plain text, then four arrays of strings. Each containing the text to be linked. These are hashtags, mentions, links and the unshorten attribute which is used to unshorten the shortened URLs in the post. These attributes are used by the component to render the text in the appropriate format.
The Logic of the Component
The basic logic of the component works as the following, we divide the text into chunks known as shards, we have three basic data structures for the component to work
- The ShardType which is the type of the chunk it specifies whether it is plain, hashtags, mentions, and links.
- The Shard which is the simple object containing the text to show, its type and the link it refers to
The StringIndexdChunks, they are utilized to index the chunks in the order in which they appear in the text.
First we have a private method of the component which searches for all the elements (strings) in the text. Here we have an array which maintains the index of those chunks in the text.
Then we sort the chunks according to their indexes in the text. This gives us sorted array which consists of all the chunks sorted according to the indexes as they appear in the text.
The next part of the logic is to generate the shard array, an array which contains each chunk, once. To do this we iterate over the Sorted Indexed array created in the previous step and use it split the text into chunks. We iterate over the text and take substrings using the indexes of each element.
After this we have generated the chunks of the text, now the only task is to write the view of the component which uses this Shard Array to render the linked elements.
- This renders the chunks and handles the links of both internal and external type.
- It also also makes sure that the links get unshortened properly using the unshorten API property.
- Uses routerLink, angular property to link in application URLs, for asynchronous reloading while clicking links.
Resources and Links
This component is inspired from the two main open source libraries.
Earlier these libraries were used in the project, but as the need of unshortening and asynchronous linking appeared in the application, a custom implementation was needed to be implemented.