making image preview webview tab + on mouse hover

First, we started researching the extension API of VS Code
 (from: https://code.visualstudio.com/api)

From this documentation we have learned:
  • How to build, run, debug, test and publish an extension.
  • How to take advantage of VS Code's Extension API.
  • Where to find guides and code samples to help get you started.

So, after that overview, we started our first experience by developing a basic “Hello world” extension.
We run VS Code extensions generator with “yo code” command, and then we filled out a few fields for creating a TypeScript project.
And here is our first extension!


 Our next step was creating an extension that open in a new tab a marked URL string which represent an image.
For doing this, we have defined a vscode.WebViewPanel variable and created a function that receives URL as a string and returns it as an html page.
Then, our variable, by using its method, presents the image, just like below:



 Now, for validating the chosen address extension and identifying the URL address by hovering and not by marking the entire line, we wrote a function that will identify the cursor location and extract the URL address as a string.

We have decided to search about vs code hovering feature, and after a little while of googling, 
found the basic code example:



(from: https://code.visualstudio.com/api/references/vscode-api - in the "languages" section) 
which does this:


The next thing was to try and display an image instead of the 'I am a hover!' string.
We learned that in order to do that, we need to create an instance of the vscode 'MarkdownString' class.
But we didn’t really knew what we need the send to the class constructor.



So the first try was to give the ctor the HTML string we made for the webview tab.


Then we understood that we have to send the ctor a string with a markdown syntax.
We searched for a way to convert the HTML string to markdown string but found out there isn't any, so we started to learn some basic markdown.
we learned that the syntax for displaying image in markdown is:

![image name](https://github.com/adam-p/markdown-here/raw/master/src/common/images/icon48.png "Logo Title Text 1")

It took us a while to figure out the exact syntax to make it display some image (a "static" image url at 
thos point), but eventually figured it out !






The next thing was to make this work with the url the cursor is hover over.
We added a function to extract the url (if there is any) from the current line (where the cursor is, at this point), so now it looks like:




Conclusions:

So far we have made a hover that displays image according to the url the cursor is on.
In addition, we made a webview that display the image as well.
The next move for us is to make some sort of button in the hover display which allows the user to open the image in a new tab in the vscode and another button to open the image in the default browser.
Also, right now the hover doesn’t "run over" the previous displayed image, but creating a new one in addition, so we need to fix that.

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