add ghci file

.github/workflows/ci.yml

@@ -0,0 +1,25 @@
+name: CI
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+
+jobs:
+  build-and-test:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '18'
+
+      - name: Install dependencies
+        run: npm install
+
+      - name: Build
+        run: npm run build

docs/dist/idocs.sandbox.umd.js

@@ -3716,7 +3716,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
   Object.defineProperty(exports2, Symbol.toStringTag, { value: "Module" });
 });
 `;
-  const sandboxJs = `document.addEventListener('DOMContentLoaded', () => {
+  const sandboxedJs = `document.addEventListener('DOMContentLoaded', () => {
     const renderer = new IDocs.markdown.Renderer(document.body, {
         errorHandler: (error, pluginName, instanceIndex, phase, container, detail) => {
             console.error(\`Error in plugin \${pluginName} at instance \${instanceIndex} during \${phase}:\`, error);
@@ -3728,11 +3728,12 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     });
     function render(request) {
         if (request.markdown) {
-            renderer.render(request.markdown);
-        }
-        else if (request.html) {
             renderer.reset();
-            document.body.innerHTML = request.html;
+            const html = renderer.renderHtml(request.markdown);
+            //todo: look at dom elements prior to hydration
+            renderer.element.innerHTML = html;
+            //todo: send message to parent to ask for whitelist
+            //todo: asynchronously hydrate the renderer
             renderer.hydrate();
         }
     }
@@ -3749,9 +3750,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     constructor(elementOrSelector, markdown, options) {
       super(elementOrSelector, markdown, options);
       __publicField(this, "iframe");
-      __publicField(this, "renderer");
-      this.renderer = new Renderer(null, { useShadowDom: false });
-      const renderRequest = this.createRenderRequest(markdown);
+      const renderRequest = { markdown };
       const { iframe } = createIframe(this.getDependencies(), renderRequest);
       this.iframe = iframe;
       this.element.appendChild(this.iframe);
@@ -3773,14 +3772,9 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       });
       (_a = this.iframe) == null ? void 0 : _a.remove();
     }
-    createRenderRequest(markdown) {
-      const html = this.renderer.renderHtml(markdown);
-      const doc = new DOMParser().parseFromString(html, "text/html");
-      return { html: doc.body.innerHTML };
-    }
     send(markdown) {
       var _a;
-      (_a = this.iframe.contentWindow) == null ? void 0 : _a.postMessage(this.createRenderRequest(markdown), "*");
+      (_a = this.iframe.contentWindow) == null ? void 0 : _a.postMessage({ markdown }, "*");
     }
     getDependencies() {
       return `
@@ -3794,7 +3788,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
   }
   function createIframe(dependencies, renderRequest) {
     const title = "Interactive Document Sandbox";
-    const html = rendererHtml.replace("{{TITLE}}", () => title).replace("{{DEPENDENCIES}}", () => dependencies).replace("{{RENDERER_SCRIPT}}", () => `<script>${rendererUmdJs}<\/script>`).replace("{{RENDER_REQUEST}}", () => `<script>const renderRequest = ${JSON.stringify(renderRequest)};<\/script>`).replace("{{SANDBOX_JS}}", () => `<script>${sandboxJs}<\/script>`);
+    const html = rendererHtml.replace("{{TITLE}}", () => title).replace("{{DEPENDENCIES}}", () => dependencies).replace("{{RENDERER_SCRIPT}}", () => `<script>${rendererUmdJs}<\/script>`).replace("{{RENDER_REQUEST}}", () => `<script>const renderRequest = ${JSON.stringify(renderRequest)};<\/script>`).replace("{{SANDBOX_JS}}", () => `<script>${sandboxedJs}<\/script>`);
     const htmlBlob = new Blob([html], { type: "text/html" });
     const blobUrl = URL.createObjectURL(htmlBlob);
     const iframe = document.createElement("iframe");

package.json

@@ -4,7 +4,7 @@
   "version": "1.0.0",
   "scripts": {
     "clean": "npm run clean --workspaces --if-present",
-    "build": "npm run build:00 --workspaces --if-present && npm run build:01 --workspaces --if-present && npm run build:02 --workspaces --if-present && npm run build:03 --workspaces --if-present && npm run build:04 --workspaces --if-present && npm run build:05 --workspaces --if-present && npm run build:06 --workspaces --if-present",
+    "build": "npm run build:00 --workspaces --if-present && npm run build:01 --workspaces --if-present && npm run build:02 --workspaces --if-present && npm run build:03 --workspaces --if-present && npm run build:04 --workspaces --if-present && npm run build:05 --workspaces --if-present && npm run build:06 --workspaces --if-present && npm run build:07 --workspaces --if-present",
     "start": "concurrently \"npm run dev -w common\" \"npm run dev -w @microsoft/interactive-document-markdown\" \"npm run dev -w schema\" \"npm run dev -w @microsoft/interactive-document-compiler\" \"npm run dev -w editor\"",
     "package": "npm run package --workspaces --if-present"
   },

packages/editor/package.json

@@ -10,7 +10,7 @@
     "tsc": "tsc -p .",
     "bundle": "vite build --config vite.bundle.config.js",
     "build": "npm run tsc && npm run bundle",
-    "build:03": "npm run build"
+    "build:05": "npm run build"
   },
   "author": "Dan Marshall",
   "license": "MIT",

packages/markdown/src/index.ts

@@ -22,3 +22,4 @@ export {
 
 export type * as Plugins from './plugins/interfaces.js';
 export type { Batch, IInstance } from './factory.js';
+export * from './types.js';

packages/markdown/src/types.ts

@@ -0,0 +1,3 @@
+export interface RenderRequestMessage {
+    markdown?: string;
+}

packages/sandbox-resources/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "sandbox-resources",
+  "private": true,
+  "version": "1.0.0",
+  "scripts": {
+    "clean": "rimraf dist",
+    "tsc": "tsc -p .",
+    "build": "npm run tsc",
+    "build:02": "npm run build"
+  },
+  "author": "Dan Marshall",
+  "license": "MIT",
+  "description": ""
+}

packages/sandbox-resources/src/idocs.d.ts

@@ -0,0 +1,5 @@
+import * as markdown from '@microsoft/interactive-document-markdown';
+
+export as namespace IDocs;
+
+export { markdown };

packages/webview/src/sandbox.ts → packages/sandbox-resources/src/sandboxed.ts

@@ -1,4 +1,4 @@
-declare const renderRequest: IDocs.sandbox.SandboxedRenderRequestMessage;
+declare const renderRequest: IDocs.markdown.RenderRequestMessage;
 
 document.addEventListener('DOMContentLoaded', () => {
     const renderer = new IDocs.markdown.Renderer(document.body, {
@@ -11,12 +11,14 @@ document.addEventListener('DOMContentLoaded', () => {
         }
     });
 
-    function render(request) {
+    function render(request: IDocs.markdown.RenderRequestMessage) {
         if (request.markdown) {
-            renderer.render(request.markdown);
-        } else if (request.html) {
             renderer.reset();
-            document.body.innerHTML = request.html;
+            const html = renderer.renderHtml(request.markdown);
+            //todo: look at dom elements prior to hydration
+            renderer.element.innerHTML = html;
+            //todo: send message to parent to ask for whitelist
+            //todo: asynchronously hydrate the renderer
             renderer.hydrate();
         }
     }

packages/sandbox/package.json

@@ -12,7 +12,7 @@
     "tsc": "tsc -p .",
     "bundle": "vite build --config vite.bundle.config.js",
     "build": "npm run tsc && npm run bundle",
-    "build:02": "npm run build",
+    "build:03": "npm run build",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "author": "Dan Marshall",

packages/sandbox/scripts/resources.mjs

@@ -8,8 +8,8 @@ const __dirname = path.dirname(__filename);
 // Configuration object: key becomes the filename and export name, value is the source path
 const resources = {
   rendererUmdJs: path.resolve(__dirname, '../../markdown/dist/umd/idocs.markdown.umd.js'),
-  rendererHtml: path.resolve(__dirname, '../resources/markdown.html'),
-  sandboxJs: path.resolve(__dirname, '../../webview/dist/sandbox.js'),
+  rendererHtml: path.resolve(__dirname, '../../sandbox-resources/html/markdown.html'),
+  sandboxedJs: path.resolve(__dirname, '../../sandbox-resources/dist/sandboxed.js'),
 };
 
 const resourcesDir = path.resolve(__dirname, '../src/resources');

packages/sandbox/src/sandbox.ts

@@ -1,25 +1,16 @@
 import { Previewer, PreviewerOptions } from './preview.js';
 import { rendererHtml } from './resources/rendererHtml.js';
 import { rendererUmdJs } from './resources/rendererUmdJs.js';
-import { sandboxJs } from './resources/sandboxJs.js';
-import { Renderer } from '@microsoft/interactive-document-markdown';
-
-export interface SandboxedRenderRequestMessage {
-    markdown?: string;
-    html?: string;
-}
+import { sandboxedJs } from './resources/sandboxedJs.js';
+import { RenderRequestMessage } from '@microsoft/interactive-document-markdown';
 
 export class Sandbox extends Previewer {
     private iframe: HTMLIFrameElement;
-    private renderer: Renderer;
 
     constructor(elementOrSelector: string | HTMLElement, markdown: string, options?: PreviewerOptions) {
         super(elementOrSelector, markdown, options);
 
-        //create a renderer for decompilation, not to render in this DOM context
-        this.renderer = new Renderer(null, { useShadowDom: false });
-
-        const renderRequest = this.createRenderRequest(markdown);
+        const renderRequest: RenderRequestMessage = { markdown };
 
         const { iframe } = createIframe(this.getDependencies(), renderRequest);
         this.iframe = iframe;
@@ -42,17 +33,9 @@ export class Sandbox extends Previewer {
         this.iframe?.remove();
     }
 
-    createRenderRequest(markdown: string): SandboxedRenderRequestMessage {
-        //render into a document to ensure it is sanitized
-        const html = this.renderer.renderHtml(markdown);
-        const doc = new DOMParser().parseFromString(html, 'text/html');
-        //TODO: sanitize the document
-        return { html: doc.body.innerHTML };
-    }
-
     send(markdown: string): void {
         //TODO get html and ensure it is sanitized
-        this.iframe.contentWindow?.postMessage(this.createRenderRequest(markdown), '*');
+        this.iframe.contentWindow?.postMessage({ markdown }, '*');
     }
 
     getDependencies() {
@@ -66,14 +49,14 @@ export class Sandbox extends Previewer {
     }
 }
 
-function createIframe(dependencies: string, renderRequest: SandboxedRenderRequestMessage) {
+function createIframe(dependencies: string, renderRequest: RenderRequestMessage) {
     const title = 'Interactive Document Sandbox';
     const html = rendererHtml
         .replace('{{TITLE}}', () => title)
         .replace('{{DEPENDENCIES}}', () => dependencies)
         .replace('{{RENDERER_SCRIPT}}', () => `<script>${rendererUmdJs}</script>`)
         .replace('{{RENDER_REQUEST}}', () => `<script>const renderRequest = ${JSON.stringify(renderRequest)};</script>`)
-        .replace('{{SANDBOX_JS}}', () => `<script>${sandboxJs}</script>`)
+        .replace('{{SANDBOX_JS}}', () => `<script>${sandboxedJs}</script>`)
         ;
 
     const htmlBlob = new Blob([html], { type: 'text/html' });

packages/schema/package.json

@@ -13,7 +13,7 @@
     "dev": "tsc -p . -w",
     "tsc": "tsc -p .",
     "build": "npm run tsc && npm run declaration && npm run strip-blanks && npm run schema && npm run copy-schema",
-    "build:01": "npm run build"
+    "build:00": "npm run build"
   },
   "author": "Dan Marshall",
   "license": "MIT",

packages/webview/package.json → packages/vscode-resources/package.json

@@ -1,11 +1,12 @@
 {
-  "name": "webview",
+  "name": "vscode-resources",
   "private": true,
   "version": "1.0.0",
   "main": "index.js",
   "scripts": {
+    "clean": "rimraf dist",
     "tsc": "tsc -p .",
-    "build:05": "npm run tsc"
+    "build:06": "npm run tsc"
   },
   "author": "Dan Marshall",
   "license": "MIT",

packages/vscode-resources/tsconfig.json

@@ -0,0 +1,18 @@
+{
+    "compilerOptions": {
+        "outDir": "dist",
+        "module": "commonjs",
+        "typeRoots": [
+            "./src"
+        ],
+        "skipLibCheck": true,
+        "target": "esnext",
+        "lib": [
+            "dom",
+            "esnext"
+        ]
+    },
+    "include": [
+        "src"
+    ]
+}

packages/vscode/package.json

@@ -163,7 +163,7 @@
     "pretest": "npm run compile-web",
     "vscode:prepublish": "npm run package-web",
     "build": "npm run resources && npm run compile-web",
-    "build:06": "npm run build",
+    "build:07": "npm run build",
     "compile-web": "npm run check-types && npm run lint && npm run resources && node esbuild.js",
     "watch-web": "npm-run-all -p watch-web:*",
     "watch-web:esbuild": "node esbuild.js --watch",

packages/vscode/scripts/resources.mjs

@@ -15,14 +15,14 @@ const resources = [
     '../../packages/editor/dist/umd/idocs.editor.umd.js',
     '../../docs/assets/examples/grocery-list.idoc.json',
     '../../docs/assets/examples/seattle-weather/1.idoc.md',
-    '../../packages/webview/dist/edit.js',
-    '../../packages/webview/dist/html-json.js',
-    '../../packages/webview/dist/html-markdown.js',
-    '../../packages/webview/dist/preview.js',
-    '../../packages/webview/html/preview.html',
-    '../../packages/webview/html/edit.html',
-    '../../packages/webview/html/html-json.html',
-    '../../packages/webview/html/html-markdown.html',
+    '../../packages/vscode-resources/dist/edit.js',
+    '../../packages/vscode-resources/dist/html-json.js',
+    '../../packages/vscode-resources/dist/html-markdown.js',
+    '../../packages/vscode-resources/dist/preview.js',
+    '../../packages/vscode-resources/html/preview.html',
+    '../../packages/vscode-resources/html/edit.html',
+    '../../packages/vscode-resources/html/html-json.html',
+    '../../packages/vscode-resources/html/html-markdown.html',
 ];
 
 const errors = [];