use webview api instead of execute command

Author: denco

src/ConfluenceContentProvider.ts

@@ -32,7 +32,12 @@ export class ConfluenceContentProvider implements vscode.TextDocumentContentProv
 	private _onDidChange = new vscode.EventEmitter<vscode.Uri>();
 	private _waiting: boolean = false;
 
-	constructor(private context: vscode.ExtensionContext) { }
+	constructor(private context: vscode.ExtensionContext) {
+	}
+
+	dispose() {
+		this._onDidChange.dispose();
+	}
 
 	public async provideTextDocumentContent(uri: vscode.Uri): Promise<string> {
 		let document = await vscode.workspace.openTextDocument(unpackConfluenceUri(uri));

src/extension.ts

@@ -7,52 +7,84 @@ import { packConfluenceUri, unpackConfluenceUri, ConfluenceContentProvider } fro
 
 const path = require('path');
 
+function getRenderedContent(contentProvider: ConfluenceContentProvider, uri: vscode.Uri, panel: vscode.WebviewPanel) {
+	contentProvider.provideTextDocumentContent(packConfluenceUri(uri)).then((renderedContent) => {
+		panel.webview.html = renderedContent;
+	}, (reason) => {
+		vscode.window.showErrorMessage(reason);
+	});
+}
+
+function createPanel(contentProvider: ConfluenceContentProvider, editor: vscode.TextEditor, viewColumn: vscode.ViewColumn) {
+
+	let title = 'Preview ' + path.basename(editor.document.uri.fsPath);
+
+	// Create and show panel
+	const panel = vscode.window.createWebviewPanel(
+		'confluencePreview',
+		title,
+		viewColumn,
+		{
+			retainContextWhenHidden: true
+		}
+	);
+	getRenderedContent(contentProvider, editor.document.uri, panel)
+
+	return panel;
+}
+
+function setDispose(panel: vscode.WebviewPanel, subscriptions: any){
+	// Reset when the current panel is closed
+        // Reset when the current panel is closed
+        panel.onDidDispose(
+			() => {},
+			null,
+			subscriptions
+		  );
+}
+
 // this method is called when your extension is activated
 // your extension is activated the very first time the command is executed
 export function activate(context: vscode.ExtensionContext) {
 
 	const contentProvider = new ConfluenceContentProvider(context);
 	const contentProviderRegistration = vscode.workspace.registerTextDocumentContentProvider(ConfluenceContentProvider.confluenceURI.scheme, contentProvider);
+	let currentPanel: vscode.WebviewPanel;
 
 	// Show confluence
 	let previewDisposable = vscode.commands.registerCommand('confluence.showPreview', () => {
 		let editor = vscode.window.activeTextEditor;
-
 		if (typeof editor === 'undefined') {
 			vscode.window.showErrorMessage('Please open a confluence file');
 			return;
+		} else {
+			currentPanel = createPanel(contentProvider, editor, vscode.ViewColumn.Active);
+			setDispose(currentPanel, context.subscriptions);
+			return currentPanel;
 		}
-
-		let title = 'Preview ' + path.basename(editor.document.uri.fsPath);
-
-		return vscode.commands.executeCommand('vscode.previewHtml', packConfluenceUri(editor.document.uri), vscode.ViewColumn.One, title).then((success) => {
-		}, (reason) => {
-			vscode.window.showErrorMessage(reason);
-		});
 	});
 
 	// Show confluence to the side
 	let sidePreviewDisposable = vscode.commands.registerCommand('confluence.showPreviewToSide', () => {
 		let editor = vscode.window.activeTextEditor;
-
 		if (typeof editor === 'undefined') {
 			vscode.window.showErrorMessage('Please open a confluence file');
 			return;
+		} else {
+			currentPanel = createPanel(contentProvider, editor, vscode.ViewColumn.Two);
+			setDispose(currentPanel, context.subscriptions);
+			return currentPanel;
 		}
+	});
 
-		let title = 'Preview ' + path.basename(editor.document.uri.fsPath);
 
-		return vscode.commands.executeCommand('vscode.previewHtml', packConfluenceUri(editor.document.uri), vscode.ViewColumn.Two, title).then((success) => {
-		}, (reason) => {
-			vscode.window.showErrorMessage(reason);
-		});
-	});
 
 	vscode.workspace.onDidChangeTextDocument(e => {
 		let editor = vscode.window.activeTextEditor;
 		if (editor) {
 			if (e.document === editor.document) {
 				contentProvider.update(packConfluenceUri(e.document.uri));
+				getRenderedContent(contentProvider, e.document.uri, currentPanel)
 			}
 		}
 	});

src/markupParser.ts

@@ -13,17 +13,19 @@ function imageUri(searchUri: vscode.Uri, imageLink: string) {
 	if (imageLink.match(/^(ht)|(f)tps?:\/\//)) {
 		imageUri = vscode.Uri.parse(imageLink);
 	} else {
-		let extPath = path.dirname(searchUri.fsPath);
-		imageUri = vscode.Uri.file(path.join(extPath, imageLink));
+		imageUri = vscode.Uri.file(path.join(searchUri.fsPath, imageLink)).with({ scheme: 'vscode-resource' });
 	}
 	return imageUri;
 }
 
-function getUri(filepath: string, filename: string){
+function getUri(filepath: string, filename: string) {
 	let extension = vscode.extensions.getExtension(EXTENTION_ID);
 	if (extension) {
 		let extPath = extension.extensionPath;
-		let uri = vscode.Uri.file(path.join(extPath, filepath, filename));
+
+		// set special chema for resource:
+		// https://code.visualstudio.com/api/extension-guides/webview#loading-local-content
+		let uri = vscode.Uri.file(path.join(extPath, filepath, filename)).with({ scheme: 'vscode-resource' });
 		return uri;
 	}
 }
@@ -36,7 +38,7 @@ export function cssUri(cssFile: string) {
 	return getUri(CSS_PATH, cssFile);
 }
 
-export async function parseMarkup(sourceUri: vscode.Uri, sourceText: string) {
+export function parseMarkup(sourceUri: vscode.Uri, sourceText: string) {
 	//TODO: use Tokenazer instead of line loop
 
 	var result = '';
@@ -92,7 +94,7 @@ export async function parseMarkup(sourceUri: vscode.Uri, sourceText: string) {
 				html_tag = true;
 			}
 			//img
-			let img = /!(.*)!/;
+			let img = /!([^|]*)\|?.*!/;
 			let match = tag.match(img);
 			if (match) {
 				tag = '<img src="' + imageUri(sourceUri, match[1]) + '"/>';
@@ -109,7 +111,7 @@ export async function parseMarkup(sourceUri: vscode.Uri, sourceText: string) {
 				tag = tag.replace(/^\|/, '<td>');
 				tag = tag.replace(/\|$/, '</td>');
 				tag = tag.replace(/\|/gi, '</td><td>');
-				if (tableFlag == false){
+				if (tableFlag == false) {
 					tag = '<table>' + tag;
 				}
 				tag = '<tr>' + tag + '</tr>';
@@ -147,7 +149,7 @@ export async function parseMarkup(sourceUri: vscode.Uri, sourceText: string) {
 					listTag = 'ol';
 					// reset ol after 3rd level
 					// add count of non-ol elements for mixed lists
-					if ( (match[1].length + (match[1].match(/[-|\*]/g) || []).length) % 3 === 1) {
+					if ((match[1].length + (match[1].match(/[-|\*]/g) || []).length) % 3 === 1) {
 						listStyle = ' class="initial"';
 					}
 				}
@@ -158,11 +160,11 @@ export async function parseMarkup(sourceUri: vscode.Uri, sourceText: string) {
 					listStyle = ' class="alternate"';
 				}
 				if (match[1].length > listArr.length) {
-					tag = '<'+ listTag + listStyle + '>';
+					tag = '<' + listTag + listStyle + '>';
 					listArr.push(listTag);
 				}
 				if (match[1].length < listArr.length) {
-					tag = '</' + listArr.slice(match[1].length, listArr.length).reverse().join('></') +'>';
+					tag = '</' + listArr.slice(match[1].length, listArr.length).reverse().join('></') + '>';
 					listArr = listArr.slice(0, match[1].length);
 				}
 				tag += "<li>" + match[2] + "</li>";
@@ -188,12 +190,12 @@ export async function parseMarkup(sourceUri: vscode.Uri, sourceText: string) {
 				tag = tag.replace(/_([\w ]*)_/g, "<i>$1</i>");
 			}
 		} else {
-			if (tag !== '<pre><code>'){
+			if (tag !== '<pre><code>') {
 				tag = tag.replace(/</gi, '&lt;') + '<br />';
 			}
 		}
 
-		if (tag.match(/^s*$/)){
+		if (tag.match(/^s*$/)) {
 			tag = '<br />';
 		}