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 &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)