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 <and > will be >), 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); 

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 > to >. 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.