Feature Test

Embeds are raw Jupyter cells (cells with cell_type === 'raw'). The code can be in one of two formats:

1. JSON
2. A JavaScript closure which generates the same JSON from a JavaScript Function(...) invocation.

Code editor and runner for JavaScript tutorials.

Code is run in a web worker on the browser, so no backend resources are necessary.

Props:

{
  "tool": "code",
  "props": {
      "sourceUrl": "<some sort of URL to fetch code from>",
      "defaultSorce": "<source code to display (directly embed it here, not in another file",
      "autorun": true | false,
      "header": false
  }
}

• autorun: Automatically run the script upon loading and construction?
• header: show the default header for the code runner (I may remove this in the future because it’s kind of stupid)
• sourceUrl OR defaultSource: URL to the source code OR the source code to display

Raw Cell Code (as JS):

(() => {
    return {
        tool: 'code',
        props: {
            sourceUrl: '/assets/objects/feature-test/hello-world.js',
            autorun: false,
            header: false,
        }
    }
})()

TODO: I need to create a second Monaco editor embed which just displays and allows for editing code without running it.

Props:

{
  "tool": "drawio",
  "props": {
      "xmlUri": "/assets/objects/feature-test/test-diagram.drawio",
      "height": "600px",
  }
}

• tool: drawio
• xmlUri: Path to the Draw.io file (to be feched)
• height: height of the drawio view. 600px looks good, but it can be any valid CSS height.

Raw Code Cell Example (JS):

(() => {
    return {
        tool: 'drawio',
        props: {
            xmlUri: '/assets/objects/feature-test/test-diagram.drawio',
            height: '600px'
        }
    }
})()

• Raw monaco editor, no code runner
• Excalidraw (once it supports React 19)
• Tldraw (once it supports React 19)