DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 964,423 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Kevan Y
Kevan Y

Posted on

Hacktoberfest 4 - telescope

Intro

For release 0.2, we are participating in the Hacktoberfest. I end up contributing to telescope. I found a bug in telescope where the inline-block code is not displaying properly Issue#2322. I worked on the issue I filed.
This issue was already a duplicate of Issue#2313, Issue#2131,and Issue#1801.

Base on humphd, it might be an issue in the sanitize.js file.

I first need to set up my local directory. I cloned the repo and npm i to install all dependencies. I have to download docker to run the backend locally.
I first need copy an environment file copy config/env.staging .env. Then install Docker dependency and run the container for this project I have to run npm run services:start and npm start to start fetching the data. Now I need to run npm run dev
to start the front end part.

Once I checked what is wrong with the bug. I started to write some failing test cases for this situation. I looked at the sanitize.js file. I tried a solution will change the setting of sanitize-html disallowedTagsMode: 'escape' or disallowedTagsMode: 'recursiveEscape' but none of those work. After further traceback, I found another solution is to use a regex to convert everything wrapped into <code> ( < will be &lt;and > will be &gt;), then passed to the sanitizeHtml(). This was a potential solution but might not work for some edge cases. Also, read an stack overflow comment that it is not a good idea to use regex on HTML.

I started to not focus on the sanitize.js file, since I will not able to fix that from here. I have to step back and look at the sources of the feed data and where it is starting to be parsed. I notice that the feed data received in the backend have escape characters for things inside of <code>tag. This concludes sanitize.js should technically work properly. After looking at the process they are several functions that change the data. One particular file that catch my attention was replace-entities.js. It contains the following code

const result = entities.decodeHTML(codeElement.innerHTML); 
return entities.decodeHTML(result); 
Enter fullscreen mode Exit fullscreen mode

This code turns all escape characters into actual characters. Which produces turning to actual HTML on render. So the solution is just to remove replace-entitie.js to fix the issue. But will re-introduce this bug Issue #1091. So I had to find another way to fix Issue #1091 bug.
Traced back where it is causing and found out in syntax-highlight.js that when passing code.innerHTML to hljs.highlightAuto() is changing for example &gt; to &amp;gt;. So to fix it, I'm adding a regex at the end of
code.innerHTML = value; to change it back should be enough to fix that bug.

Now time to commit and push the code to my PR #2337.

Luckily my pull request got accepted.

Conclusion

The bug was something a bit complex than my previous issue. The learning outcome from this issue was very useful. I learned to step back and not focus on one portion of the code. Sometimes the bug might be somewhere else.

Top comments (0)

Take a look at this:

Settings

Go to your customization settings to nudge your home feed to show content more relevant to your developer experience level. πŸ›