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
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
< will be
> 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
hljs.highlightAuto() is changing for example
&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.
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.