Hacktoberfest 4 - telescope
Tags: opensource
Published: 2021-11-01 03:16:08

## 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](https://github.com/Seneca-CDOT/telescope/issues/2322). I worked on the issue I filed. 
This issue was already a duplicate of [Issue#2313](https://github.com/Seneca-CDOT/telescope/issues/2313), [Issue#2131](https://github.com/Seneca-CDOT/telescope/issues/2131),and [Issue#1801](https://github.com/Seneca-CDOT/telescope/issues/1801).

Base on [humphd](https://github.com/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](https://stackoverflow.com/questions/1732348/regex-match-open-tags-except-xhtml-self-contained-tags/1732454#1732454) 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 
```js
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](https://github.com/Seneca-CDOT/telescope/issues/1091). So I had to find another way to fix [Issue #1091](https://github.com/Seneca-CDOT/telescope/issues/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](https://github.com/Seneca-CDOT/telescope/pull/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.