allows viewer output

Author: markbaas

src/inlineScripts.ts

@@ -0,0 +1,75 @@
+import * as path from 'path';
+import {promises as fs} from "fs";
+
+function getMimeType(ext: string): string {
+	switch (ext) {
+		case 'jpg':
+		case 'jpeg':
+			return 'image/jpeg';
+		case 'svg':
+			return 'image/svg+xml';
+		case 'gif':
+		case 'png':
+		case 'webp':
+			return `image/${ext}`;
+		default:
+			return 'application/octet-stream';
+	}
+};
+
+export async function inlineImages(html: string, htmlDir: string): Promise<string> {
+	const imgTagRegex = /<img (.* )?src="([\w.\-\/]+)"(.*)>/;
+	let matches = html.match(new RegExp(imgTagRegex, 'g'));
+	if (!matches)
+		return html;
+	let imgPromises = matches
+		.map(imgTag => imgTag.match(imgTagRegex)[2])
+		.map(relImgPath => path.resolve(htmlDir, relImgPath))
+		.map(imgPath => fs.readFile(imgPath));
+	let i = 0;
+	return Promise.all(imgPromises).then(images =>
+		html.replace(new RegExp(imgTagRegex, 'g'), (_match, p1, p2, p3) =>
+			`<img ${p1 || ''}src="data:${getMimeType(p2.split('.').pop())};base64, ${images[i++].toString('base64')}"${p3}>`
+		));
+}
+
+export async function inlineHtmlScripts(html: string, htmlDir: string): Promise<string> {
+	const scriptTagRegex = /<script (?:.* )?src="([\w.\-\/]+)".*><\/script>/;
+	let matches = html.match(new RegExp(scriptTagRegex, 'g'));
+	if (!matches)
+		return html;
+	let scriptPromises = matches
+		.map(scriptTag => scriptTag.match(scriptTagRegex)[1])
+		.map(relScriptPath => path.resolve(htmlDir, relScriptPath))
+		.map(scriptPath => fs.readFile(scriptPath, 'utf8'));
+	let i = 0;
+	return Promise.all(scriptPromises).then(scripts =>
+		html.replace(new RegExp(scriptTagRegex, 'g'), () =>
+			`<script>${scripts[i++].replace(/<\/script>/g, '<\\/script>')}</script>`));
+}
+
+export async function inlineHtmlStyles(html: string, htmlDir: string): Promise<string> {
+	const linkTagRegex = /<link (?:.* )?rel="stylesheet"(?:.* )?href="([\w.\-\/]+)".*>|<link (?:.* )?href="([\w.\-\/]+)"(?:.* )?rel="stylesheet".*>/;
+	let matches = html.match(new RegExp(linkTagRegex, 'g'));
+	if (!matches)
+		return html;
+	let stylesheetPromises = matches
+		.map(linkTag => {
+			let m = linkTag.match(linkTagRegex);
+			return m[1] || m[2];
+		})
+		.map(relPath => path.resolve(htmlDir, relPath))
+		.map(stylesheetPath => fs.readFile(stylesheetPath, 'utf8'));
+	let i = 0;
+	return Promise.all(stylesheetPromises).then(stylesheets =>
+		html.replace(new RegExp(linkTagRegex, 'g'), () =>
+			`<style>${stylesheets[i++]}</style>`));
+}
+
+export async function inlineAll(html: string, htmlDir: string): Promise<string> {
+	return await inlineHtmlStyles(
+		await inlineImages(
+			await inlineHtmlScripts(html, htmlDir),
+			htmlDir),
+		htmlDir)
+}

src/notebook.ts

@@ -2,6 +2,8 @@ import * as vscode from 'vscode';
 import net = require('net');
 import { spawn, ChildProcess } from 'child_process';
 import { dirname } from 'path';
+import { inlineAll } from './inlineScripts';
+
 
 interface RKernelRequest {
   id: number;
@@ -336,6 +338,26 @@ export class RNotebookProvider implements vscode.NotebookContentProvider, vscode
     }
   }
 
+  async renderHtmlOutput(response) {
+
+  	const html = (await vscode.workspace.fs.readFile(vscode.Uri.parse(response.result))).toString();
+    const htmlDir = dirname(response.result)
+    const htmlInline = await inlineAll(html, htmlDir)
+    const htmlWrapped = `
+    <iframe id="plotly" frameborder="0" sandbox="allow-scripts allow-forms allow-same-origin"></iframe>
+    <script>
+    var iframe = document.getElementById("plotly")
+    iframe.srcdoc = unescape("${escape(htmlInline)}")
+    </script>
+    `
+    return {
+      outputKind: vscode.CellOutputKind.Rich,
+      data: {
+        'text/html': htmlWrapped
+      },
+    }
+  }
+
   async renderOutput(cell, response) {
 
     switch (response.type) {
@@ -348,14 +370,7 @@ export class RNotebookProvider implements vscode.NotebookContentProvider, vscode
         break;
       }
       case 'viewer': {
-        cell.outputs = [{
-          outputKind: vscode.CellOutputKind.Rich,
-          data: {
-            // 'text/html': `<ifravscode-webview-resource://${response.result}`,
-            'text/html': `<a href="vscode-webview-resource:${response.result}">Here</a>`,
-            // <iframe src="vscode-webview-resource:${response.result}"></iframe>`,
-          },
-        }];
+        cell.outputs = [await this.renderHtmlOutput(response)];
         break;
       }
       case 'browser': {