Supporting Local Images



Our next step is to provide the option to view images stored locally on the user's computer.
Currently, our extension identifies the URL start position by searching for the closest 'HTTP' to the cursor's position.

Local paths don't start with 'HTTP', so we needed to extract the path of the image from the text using other methods.

One of the problems we encountered was that we do not know where the path starts but only where it ends (checking for the file extension closest to the current position).

Another problem was identifying a path of an image when there are 2 paths one after another.
And how we dealt with it:

After searching for the HTTP we also made sure there were no white spaces from the HTTP to the current cursor position.

If there are any white spaces, then there must be 2 (or more) paths in that substring (or the cursor is not standing on a path).

So, to extract the last path (the one we currently stand on), we used the "exec" function with a white space regular expression and kept a variable (last) which holds the current white space position the exec function has found.

By the end of the loop, we have a variable that has the start position of the last path in the substring. The last thing is to sum that position to the original HTTP position.



After we were able to extract the path, we had to figure out how to open a local path of an image.
For paths that start at ‘file:///’, there was no problem- it means that the file is local. But we noticed that if you don’t have this prefix, it doesn’t work.

Therefore, we moved the code of creating the markdown string to a separate function called ‘makeMarkedownString’  that also checks whether the current path starts at ‘file:///’ and if not, it concatenates it to the beginning of the path. 

Also, we realized that the local image path couldn’t be opened on the HTML page because it isn’t an URL address, it's a local path, and HTML is a web page so it doesn’t support that.

But, we saw that it is possible to open it in a new tab by clicking on open in browser, so we added a condition to check if the current path is a local, and if so – we remove the option to open it in a browser and instead we have added the option to open it in a new tab.



And that’s what our new achievement looks like:



Comments

Post a Comment

Popular posts from this blog

Turorial- How to add a new feature

Image
In this Post we will explain how to make and integrate a new feature to our extension. ** ALL VARIABLES EXPLANATIONS ARE AT THE BOTTOM Let's say we want to support text files. The first thing we will need to do is to create a new file- we name it "TextObject". We then import the "utils" and "IPreviewObject" files. We create a new (export deafult) class caled "TextObject" which implements IPreviewObject. Now, we need to implement the interface's 3 functions: 1. validatePotentialUrl- we check if the current potential URL has a ".txt" extension. if so- we update the current URL to the potential URL, and the currentPreviewObject to a textObject. 2. GetHtmlContent- returns an empty string because we dont need a webview panel for this feature. 3. makeMrkdownString- this function will need to create a string that will allow to open a text file in a new tab when clicking on a certain button. To do so, w...
Read more

Little Bug Fix

Image
After the big refactoring and redesigning we made, there are a few more things we have left to do: 1. Currently, once the cursor is on a certain URL, the hover panel will change accordingly. So, if we hover over URLs that the cursor is not on them we will still be presented with the last hover panel that was created. That is a bug and we need to fix it. 2. We need to make a unit testing (we dont know how to do that, so we need to learn a bit more) 3. Try and use other VSCODE extensions to support previewing PDFs and HTML (the web page, not the HTML file). To fix (1) we added a new condition to the "push" call (in the activate finction, in extension.ts). We check if the line the cursor is on is the same as the line we hover over. If so, call the "updateHoverPanel" function (which makes a markdown string for the hover panel according to the current URL format). If not, update the hover panel content (the markdown string) to an empty string. W...
Read more

Publishing First Beta & Refactoring The Code

Image
We figured it was time to publish a first beta of our extension to VSCODE marketplace. We made some little adjustments like renaming some variables, for more readable code, and fixed a few major bugs, and then we published it using this tutorial .  You can find our extension on this link . *A big bug we had was that the last hover panel continude to show when hovering on defferent lines that are not a URL. Our problem was fixed by updating the current URL variable to UNDEFINED and the markdown string to an empty string, like so: Now that we published our first working extension, we wanted to focus more on the code and the design. Firstly, we decided it would be smarter to extract the relevant line and check what is it's format rather then what we made so far- which is to send the whole document to each extraction function. We created a new function called "extractCurrentLine" which does the following: 1. The function receives the document text ...
Read more