proper implementation for the viewer

Author: markbaas

package.json

@@ -74,6 +74,14 @@
         "mimeTypes": [
           "ms-vscode.r-notebook/table"
         ]
+      },
+      {
+        "id": "r-notebook-viewer-renderer",
+        "displayName": "Notebook Viewer Render",
+        "entrypoint": "./dist/viewerRenderer.js",
+        "mimeTypes": [
+          "ms-vscode.r-notebook/viewer"
+        ]
       }
     ],
     "viewsContainers": {

samples/test1.rmd

@@ -8,10 +8,10 @@ df = data.frame(a = c(1,2,3,4), b = c(10, 20, 13, 1))
 library(ggplot2)
 library(plotly)
 
-df
+ggplotly(ggplot(df, aes(a, b)) + geom_point())
 ```
 ```{r}
-ggplot(df, aes(a, b)) + geom_point()
+ggplotly(ggplot(df, aes(a, b)) + geom_point())
 
 ```
 ```{r}

src/client/renderers/viewerRenderer.tsx

@@ -1,7 +1,15 @@
-const notebookApi = acquireNotebookRendererApi("r-notebook-table-renderer");
+const notebookApi = acquireNotebookRendererApi("r-notebook-viewer-renderer");
 
 
 notebookApi.onDidCreateOutput((evt) => {
     const output = evt.output.data[evt.mimeType];
-    evt.element.innerHTML =
+    const iframe = document.createElement("iframe");
+    iframe.style.border = "0";
+    iframe.style.width = "90vw"
+    iframe.style.minHeight = "30vw"
+    iframe.sandbox.add("allow-scripts");
+    iframe.sandbox.add("allow-forms");
+    iframe.sandbox.add("allow-same-origin");
+    iframe.srcdoc = output
+    evt.element.appendChild(iframe)
 });

src/extension/notebook.ts

@@ -341,17 +341,11 @@ export class RNotebookProvider implements vscode.NotebookContentProvider, vscode
   	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
+        'ms-vscode.r-notebook/viewer': htmlInline
       },
     }
   }

webpack.config.js

@@ -64,7 +64,8 @@ const extensionConfig = {
 const clientConfig = {
   target: 'web',
   entry: {
-    "tableRenderer": "./src/client/renderers/tableRenderer.tsx"
+    "tableRenderer": "./src/client/renderers/tableRenderer.tsx",
+    "viewerRenderer": "./src/client/renderers/viewerRenderer.tsx"
   },
   output: {
     // the bundle is stored in the 'dist' folder (check package.json), 📖 -> https://webpack.js.org/configuration/output/
@@ -108,5 +109,5 @@ const clientConfig = {
   ]
 }
 
-// module.exports = [extensionConfig, clientConfig]
-module.exports = [clientConfig]
+module.exports = [extensionConfig, clientConfig]
+// module.exports = [clientConfig]