Hydrate config + review

docs/view/index.html

@@ -87,16 +87,7 @@ <h1>Interactive Document Host</h1>
         <button>edit a copy</button>
     </footer>
 
-    <script>
-        const host = new IDocs.host.Listener({
-            app: 'main',
-            loading: '#loading',
-            help: '#help',
-            uploadButton: '#upload-btn',
-            fileInput: '#file-input',
-            textarea: '#textarea',
-        });
-    </script>
+    <script src="./view.js"></script>
 
 </body>
 

docs/view/view.js

@@ -0,0 +1,15 @@
+window.addEventListener('DOMContentLoaded', () => {
+    host = new IDocs.host.Listener({
+        app: 'main',
+        loading: '#loading',
+        help: '#help',
+        uploadButton: '#upload-btn',
+        fileInput: '#file-input',
+        textarea: '#textarea',
+        onApprove: (message) => {
+            // TODO look through each spec and override policy to approve unapproved for https://microsoft.github.io/chartifact/
+            const { specs } = message;
+            return specs;
+        },
+    });
+});

packages/common/src/messages.ts

@@ -5,17 +5,24 @@ export interface SandboxRenderMessage {
     markdown?: string;
 }
 
+export interface SpecReview<T> {
+    pluginName: string;
+    containerId: string;
+    approvedSpec: T;
+    blockedSpec?: T;
+    reason?: string;
+}
+
 export interface SandboxedPreHydrateMessage {
     type: 'sandboxedPreHydrate';
     transactionId: number;
-    //todo put stuff here for whitelist
+    specs: SpecReview<{}>[];
 }
 
 export type SandboxApprovalMessage = {
     type: 'sandboxApproval';
     transactionId: number;
-    approved: boolean;
-    //todo: add more fields as needed
+    specs: SpecReview<{}>[];
 };
 
 export interface HostRenderRequestMessage {

packages/editor/dev/previewer.ts

@@ -1,12 +1,8 @@
 import { Renderer } from '@microsoft/interactive-document-markdown';
 import { Previewer, PreviewerOptions } from '@microsoft/chartifact-sandbox';
-import { SandboxApprovalMessage } from 'common';
-
-let transactionIndex = 0;
 
 export class DevPreviewer extends Previewer {
     public renderer: Renderer;
-    public transactions: Record<number, Document> = {};
 
     constructor(elementOrSelector: string | HTMLElement, markdown: string, options: PreviewerOptions) {
         super(elementOrSelector, markdown, options);
@@ -34,22 +30,12 @@ export class DevPreviewer extends Previewer {
 
     render(markdown: string) {
         const html = this.renderer.renderHtml(markdown);
-
-        const doc = new DOMParser().parseFromString(html, 'text/html');
-        const transactionId = transactionIndex++;
-        this.transactions[transactionId] = doc;
-
-        //inline approval
-        const sandboxedPreRenderMessage: SandboxApprovalMessage = {
-            type: 'sandboxApproval',
-            transactionId,
-            approved: true,
-            // Additional data for whitelist can be added here
-        };
-
-        //inline approval
-        this.approve(sandboxedPreRenderMessage);
-
+        const newHtml = `<style>.tabulator { margin-right: -1px; }</style>
+<link href="https://unpkg.com/tabulator-tables@6.3.0/dist/css/tabulator.min.css" rel="stylesheet" />
+${html}`;
+        this.renderer.element.innerHTML = newHtml;
+        const specs = this.renderer.hydrateSpecs();
+        this.renderer.hydrate(specs);
     }
 
     send(markdown: string) {
@@ -61,30 +47,6 @@ export class DevPreviewer extends Previewer {
         }
     }
 
-    approve(message: SandboxApprovalMessage): void {
-        if (message.approved) {
-            //only handle if the transactionId is the latest
-            if (message.transactionId === transactionIndex - 1) {
-
-                console.log('Sandbox approval received:', message.transactionId, transactionIndex);
-                if (message.transactionId === transactionIndex - 1) {
-                    const doc = this.transactions[message.transactionId];
-                    if (doc) {
-                        const newHtml = `<style>.tabulator { margin-right: -1px; }</style>
-<link href="https://unpkg.com/tabulator-tables@6.3.0/dist/css/tabulator.min.css" rel="stylesheet" />
-${doc.body.innerHTML}`;
-                        this.renderer.element.innerHTML = newHtml;
-                        this.renderer.hydrate();
-                    }
-                }
-            } else {
-                console.warn('Received sandbox approval for an outdated transaction:', message.transactionId, transactionIndex);
-            }
-        } else {
-            console.warn('Sandbox approval denied:', message.transactionId);
-        }
-    }
-
     private displayError(error: unknown) {
         this.element.innerHTML = `<div style="color: red; padding: 10px; border: 1px solid red; background-color: #ffe6e6; border-radius: 4px;">
             <strong>Error:</strong> ${error instanceof Error ? error.message : String(error)}