Turorial- How to add a new feature

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, we will make a new command:

the command is executing the "openFile" function (in the utils) which opens the file in a new tab.

we created a new command URI (called commandUriOpenTextFile, located in the variablesUtiles in the utils file) so we could use it as a function call from the markdown string.

 so the markdown function for the text file looks like this:

we also added the new command to the package.json file, like the VSCODE requiers to (explenation here).

we also added a call to the "creatTextFileEditorCommand" from the activate function in the extension.ts file.

Then we added a constractor which add the validation function we implemented to the validateFunctionArray:

Next, we need to create a new TextObject and add it to the list of objects (previewObjectList) so it will include our validation (in the extension.ts file. we also needed to import the TextObject.ts file in the extension.ts file).

so in summery we made the following steps:

1. create a new file

2. import the utils and IPreviewObject to the file

3. create a new class which implements the IPreviewObject  interface.

4.Create a new command (if nececery), and call the register function from the extension.ts file

5. make a constractor and add the validate function to validateFunctionArray.

6. make a new instance of the object in the initializePreviewObjectList function and ad it to the previewObjectList.

This is what it looks like:

Some explanation about the variables:

• hoverStringValue- a static variable of the type vscode.MarkdownString. we use it to update the current markdown string value. It is used in the makeMrkdownString functions (an interface function). Example:
  
• 
  
• 
  
• previewObjectList- a static "dictionary" with a string key and a IPreviewObject value. It is used to hold one instans of each format object (ImageObject, YoutubeObject...). We use it to update the currentPreviewObject variable in the validatePotentialUrl functions (an interface function). We also use it in the initializePreviewObjectList function, which create the instances of the objects. All features must "register" to this dictionary by adding themselves to the initializePreviewObjectList function (like we showed) and updating the currentPreviewObject once it was validated as the relevant format. Example:
  
  
• currentPreviewObject- a static variable of the type IPreviewObject. It is used to hold the current validated format object. For example, if it was veriefied the current URL is an image then the currentPreviewObject will be updated to the ImageObject instance in the previewObjectList["image"] (the updating accure in the validatePotentialUrl function). Example: The picture above.
• validateObject- a static variable of the type ValidateObject. It is used to add and remove functions from the validateFunctionArray variable. The ValidateObject is used similarly to the C# delegate concept. It has a "dictionary" member with a string as key and a function with a signature validatePotentialUrl(foundUrl: {url: string| undefined}) : void as a value. This mamber is a private member so no one outside this class will have direct access to the dictionary. We added functions to add a new signature function to the dictionary or remove one. Example:
  
  
  
  
• potentialUrl- a string which holds the extracted line the cursor is standing on (the extraction accures in getPotentialUrl function in the extension.ts file). We use it in the validatePotentialUrl functions, and if it was veriefied as the right format, we update the foundUrl.url (sent as parameter to the validatePotentialUrl function). The potentialUrl is updated in the extractCurrentLine function each time the cursor moves. Example:
  
• commandUriNewTab, commandUriOpenCssFile, commandUriOpenTextFile- uri variables which holds the uri to the commands we registered. commandUriNewTab is activated when clicking on "open in new tab command" on image format markdown. commandUriOpenCssFile is called when clicking on "open css in new tab" button. commandUriOpenTextFile is called when clicking on "open text in new tab" button. Example:
  
• hoverPanel- a variable of type vscode.Hover (in the extension.ts file). It is used in the extension.ts file to show the markdown when hovering over a validated URL. We update the content of the hover panel to the hoverStringValue. Example: