├── .gitignore
├── website
    ├── static
    │   ├── img
    │   │   ├── hero.png
    │   │   ├── favicon.ico
    │   │   ├── icon.svg
    │   │   ├── seamless-embedding.svg
    │   │   ├── background.svg
    │   │   └── scriptable-control.svg
    │   ├── fonts
    │   │   ├── SourceSansPro-Italic.ttf
    │   │   ├── SourceSansPro-Regular.ttf
    │   │   ├── SourceSansPro-Semibold.ttf
    │   │   └── SourceSansPro-SemiboldItalic.ttf
    │   └── css
    │   │   └── custom.css
    ├── sidebars.json
    ├── package.json
    ├── pages
    │   └── en
    │   │   ├── users.js
    │   │   ├── examples.js
    │   │   └── index.js
    ├── i18n
    │   └── en.json
    ├── core
    │   └── Footer.js
    ├── siteConfig.js
    └── README.md
├── examples
    ├── basic.html
    ├── url.html
    ├── expr.html
    ├── borders.html
    ├── manipulate.html
    ├── ssr.html
    └── dimensions.html
├── config
    └── rollup.config.js
├── CHANGELOG.md
├── LICENSE
├── package.json
├── docs
    ├── Troubleshooting.md
    ├── ContributingAgreement.md
    ├── Development.md
    ├── GettingStarted.md
    ├── NotebookLoadingPhases.md
    ├── LibraryInterface.md
    ├── NotebookAPI-Unsupported.md
    ├── ServerSideRendering.md
    ├── NotebookAPI-Internal.md
    └── NotebookAPI.md
├── CONTRIBUTING.md
├── README.md
└── src
    └── main.js


/.gitignore:
--------------------------------------------------------------------------------
1 | dist/
2 | examples/dist/
3 | node_modules/
4 | website/build/
5 | 
6 | .idea/
7 | .vscode/
8 | 


--------------------------------------------------------------------------------
/website/static/img/hero.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/WolframResearch/wolfram-notebook-embedder/master/website/static/img/hero.png


--------------------------------------------------------------------------------
/website/static/img/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/WolframResearch/wolfram-notebook-embedder/master/website/static/img/favicon.ico


--------------------------------------------------------------------------------
/website/static/fonts/SourceSansPro-Italic.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/WolframResearch/wolfram-notebook-embedder/master/website/static/fonts/SourceSansPro-Italic.ttf


--------------------------------------------------------------------------------
/website/static/fonts/SourceSansPro-Regular.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/WolframResearch/wolfram-notebook-embedder/master/website/static/fonts/SourceSansPro-Regular.ttf


--------------------------------------------------------------------------------
/website/static/fonts/SourceSansPro-Semibold.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/WolframResearch/wolfram-notebook-embedder/master/website/static/fonts/SourceSansPro-Semibold.ttf


--------------------------------------------------------------------------------
/website/static/fonts/SourceSansPro-SemiboldItalic.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/WolframResearch/wolfram-notebook-embedder/master/website/static/fonts/SourceSansPro-SemiboldItalic.ttf


--------------------------------------------------------------------------------
/website/sidebars.json:
--------------------------------------------------------------------------------
1 | {
2 |   "docs": {
3 |     "Getting Started": ["GettingStarted"],
4 |     "API Documentation": ["LibraryInterface", "NotebookAPI"],
5 |     "More Information": ["ServerSideRendering", "NotebookLoadingPhases", "Troubleshooting"],
6 |     "Contributing": ["Development", "ContributingAgreement"]
7 |   }
8 | }
9 | 


--------------------------------------------------------------------------------
/website/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "scripts": {
 3 |     "examples": "docusaurus-examples",
 4 |     "start": "docusaurus-start",
 5 |     "build": "docusaurus-build",
 6 |     "publish-gh-pages": "docusaurus-publish",
 7 |     "write-translations": "docusaurus-write-translations",
 8 |     "version": "docusaurus-version",
 9 |     "rename-version": "docusaurus-rename-version"
10 |   },
11 |   "devDependencies": {
12 |     "docusaurus": "^1.11.1"
13 |   }
14 | }
15 | 


--------------------------------------------------------------------------------
/examples/basic.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 |     <title>Basic example</title>
 4 | </head>
 5 | <body>
 6 | 
 7 | <h1>Basic example</h1>
 8 | <div id="container"></div>
 9 | <script src="./dist/wolfram-notebook-embedder.js"></script>
10 | <script>
11 |     WolframNotebookEmbedder.embed(
12 |         'https://www.wolframcloud.com/obj/jpoeschko/Public/Example.nb',
13 |         document.getElementById('container')
14 |     );
15 | </script>
16 | 
17 | </body>
18 | </html>
19 | 


--------------------------------------------------------------------------------
/config/rollup.config.js:
--------------------------------------------------------------------------------
 1 | import babel from '@rollup/plugin-babel';
 2 | import resolve from '@rollup/plugin-node-resolve';
 3 | 
 4 | export default {
 5 |     input: 'src/main.js',
 6 |     output: {
 7 |         format: 'umd',
 8 |         exports: 'named',
 9 |         file: 'dist/wolfram-notebook-embedder.js',
10 |         name: 'WolframNotebookEmbedder',
11 |         sourcemap: true,
12 |         strict: true
13 |     },
14 |     plugins: [
15 |         babel({
16 |             sourceMap: true,
17 |             exclude: 'node_modules/**',
18 |             babelrc: false,
19 |             comments: false,
20 |             presets: [
21 |                 ['@babel/env', {
22 |                     modules: false,
23 |                     loose: true,
24 |                     targets: {
25 |                         browsers: ['last 2 versions']
26 |                     }
27 |                 }]
28 |             ]
29 |         }),
30 |         resolve()
31 |     ]
32 | };
33 | 


--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
 1 | ## 0.3
 2 | 
 3 | * Embedding of external notebooks at a given URL (`{url: ...}`) or with a given `Notebook` expression (`{expr: ...}`)
 4 | * New option `showBorder` to control whether to show a border around the embedded notebook
 5 | * Officially dropped support for IE11
 6 | * Add a default export, but encourage named imports
 7 | 
 8 | ## 0.2.2
 9 | 
10 | * Pass through extra data from the initial server call to the cloud JS code, for better forward-compatibility 
11 | 
12 | ## 0.2.1
13 | 
14 | * Fix issues with `useShadowDOM` when there are existing notebook-related style definitions on the page  
15 | 
16 | ## 0.2.0
17 | 
18 | * New option `useShadowDOM` for better encapsulation of styling (still experimental and off by default)
19 | 
20 | ## 0.1.5
21 | 
22 | * First official release
23 | * Change the default for `allowInteract` from `false` to `true`
24 | * Improve documentation
25 | * Add website, built with [Docusaurus](https://docusaurus.io)
26 | 
27 | ## 0.1.4
28 | 
29 | * First proper release
30 | 
31 | ## 0.1.0
32 | 
33 | * Initial release
34 | 


--------------------------------------------------------------------------------
/examples/url.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <title>Notebook URL example</title>
 5 | </head>
 6 | <body>
 7 | 
 8 | <h1>Notebook expression example</h1>
 9 | <p>
10 |     <label for="url">Enter a URL referencing a notebook file:</label>
11 |     <input id="url" value="https://raw.githubusercontent.com/WolframResearch/COVID-19/master/Computational-Essays/COVID-19-Visualizing-Epidemic-Data.nb" />
12 |     <label for="cloudbase">Cloud Base:</label>
13 |     <input id="cloudbase" value="https://www.wolframcloud.com" />
14 |     <button onclick="embedNotebook()">Embed Notebook</button>
15 | </p>
16 | <div id="container"></div>
17 | 
18 | <script src="./dist/wolfram-notebook-embedder.js"></script>
19 | <script>
20 |     function embedNotebook() {
21 |         const cloudBase = document.getElementById('cloudbase').value;
22 |         const urlString = document.getElementById('url').value;
23 |         const container = document.getElementById('container');
24 |         WolframNotebookEmbedder.embed({cloudBase: cloudBase, url: urlString}, container);
25 |     }
26 | </script>
27 | 
28 | </body>
29 | </html>
30 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | Copyright 2018 Wolfram Research Inc.
 2 | 
 3 | Permission is hereby granted, free of charge, to any person obtaining a copy of
 4 | this software and associated documentation files (the "Software"), to deal in
 5 | the Software without restriction, including without limitation the rights to
 6 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
 7 | the Software, and to permit persons to whom the Software is furnished to do so,
 8 | subject to the following conditions:
 9 | 
10 | The above copyright notice and this permission notice shall be included in all
11 | copies or substantial portions of the Software.
12 | 
13 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
14 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
15 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
16 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
17 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
18 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
19 | 


--------------------------------------------------------------------------------
/examples/expr.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <title>Notebook expression example</title>
 5 |     <style>
 6 |         #expr {
 7 |             width: 100%;
 8 |             height: 5em;
 9 |         }
10 |     </style>
11 | </head>
12 | <body>
13 | 
14 | <h1>Notebook expression example</h1>
15 | <p>
16 |     <label for="expr">Enter a Notebook expression:</label>
17 |     <textarea id="expr">Notebook[{Cell[TextData["Hello world!"], "Text"]}]</textarea>
18 |     <label for="cloudbase">Cloud Base:</label>
19 |     <input id="cloudbase" value="https://www.wolframcloud.com" />
20 |     <button onclick="embedNotebook()">Embed Notebook</button>
21 | </p>
22 | <div id="container"></div>
23 | 
24 | <script src="./dist/wolfram-notebook-embedder.js"></script>
25 | <script>
26 |     function embedNotebook() {
27 |         const cloudBase = document.getElementById('cloudbase').value;
28 |         const exprString = document.getElementById('expr').value;
29 |         const container = document.getElementById('container');
30 |         WolframNotebookEmbedder.embed({cloudBase: cloudBase, expr: exprString}, container);
31 |     }
32 | </script>
33 | 
34 | </body>
35 | </html>
36 | 


--------------------------------------------------------------------------------
/examples/borders.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 |     <title>Show borders example</title>
 4 |     <style>
 5 |         #path {
 6 |             width: 500px;
 7 |         }
 8 |     </style>
 9 | </head>
10 | <body>
11 | 
12 | <h1>Show borders example</h1>
13 | <p>
14 |     Enter the URL of a cloud object:
15 |     <input id="path" value="https://www.wolframcloud.com/obj/jpoeschko/Public/Example.nb" />
16 |     <button onclick="embedNotebooks()">Embed Notebook</button>
17 | </p>
18 | 
19 | <h2>Without borders (the default)</h2>
20 | <div id="containerWithoutBorder"></div>
21 | 
22 | <h2>With borders</h2>
23 | <div id="containerWithBorder"></div>
24 | 
25 | <script src="./dist/wolfram-notebook-embedder.js"></script>
26 | <script>
27 |     function embedNotebooks() {
28 |         embedNotebook('containerWithoutBorder', false);
29 |         embedNotebook('containerWithBorder', true);
30 |     }
31 | 
32 |     function embedNotebook(containerID, showBorder) {
33 |         const url = document.getElementById('path').value;
34 |         return WolframNotebookEmbedder.embed(url, document.getElementById(containerID), {
35 |             width: 500,
36 |             maxHeight: 500,
37 |             showBorder
38 |         });
39 |     }
40 | </script>
41 | 
42 | </body>
43 | </html>
44 | 


--------------------------------------------------------------------------------
/website/pages/en/users.js:
--------------------------------------------------------------------------------
 1 | const React = require('react');
 2 | 
 3 | const CompLibrary = require('../../core/CompLibrary.js');
 4 | 
 5 | const Container = CompLibrary.Container;
 6 | 
 7 | class Users extends React.Component {
 8 |   render() {
 9 |     const {config: siteConfig} = this.props;
10 |     if ((siteConfig.users || []).length === 0) {
11 |       return null;
12 |     }
13 | 
14 |     const editUrl = `${siteConfig.repoUrl}/edit/master/website/siteConfig.js`;
15 |     const showcase = siteConfig.users.map(user => (
16 |       <a href={user.infoLink} key={user.infoLink}>
17 |         <img src={user.image} alt={user.caption} title={user.caption} />
18 |       </a>
19 |     ));
20 | 
21 |     return (
22 |       <div className="mainContainer">
23 |         <Container padding={['bottom', 'top']}>
24 |           <div className="showcaseSection">
25 |             <div className="prose">
26 |               <h1>Who Is Using This?</h1>
27 |               <p>The following sites are using Wolfram Notebook Embedder:</p>
28 |             </div>
29 |             <div className="logos">{showcase}</div>
30 |             <p>Are you using this project?</p>
31 |             <a href={editUrl} className="button">
32 |               Add your company
33 |             </a>
34 |           </div>
35 |         </Container>
36 |       </div>
37 |     );
38 |   }
39 | }
40 | 
41 | module.exports = Users;
42 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "wolfram-notebook-embedder",
 3 |   "version": "0.3.0",
 4 |   "description": "Library to embed Wolfram Cloud notebooks on websites.",
 5 |   "main": "dist/wolfram-notebook-embedder.js",
 6 |   "keywords": [
 7 |     "wolfram",
 8 |     "cloud",
 9 |     "notebook",
10 |     "embedding"
11 |   ],
12 |   "license": "MIT",
13 |   "files": [
14 |     "dist/",
15 |     "LICENSE",
16 |     "README.md"
17 |   ],
18 |   "repository": {
19 |     "type": "git",
20 |     "url": "https://github.com/WolframResearch/wolfram-notebook-embedder.git"
21 |   },
22 |   "scripts": {
23 |     "prepublishOnly": "npm-run-all build",
24 |     "build": "npm-run-all transpile minify",
25 |     "transpile": "rollup -c config/rollup.config.js",
26 |     "copy-dist-to-examples": "cp -r ./dist ./examples",
27 |     "serve-examples": "serve examples",
28 |     "minify": "uglifyjs dist/wolfram-notebook-embedder.js --compress --mangle --output dist/wolfram-notebook-embedder.min.js",
29 |     "run-examples": "npm-run-all build copy-dist-to-examples serve-examples"
30 |   },
31 |   "devDependencies": {
32 |     "@babel/core": "^7.15.5",
33 |     "@babel/preset-env": "^7.15.6",
34 |     "@rollup/plugin-babel": "^5.3.0",
35 |     "@rollup/plugin-node-resolve": "^13.0.5",
36 |     "npm-run-all": "^4.1.5",
37 |     "rollup": "^2.58.0",
38 |     "serve": "^12.0.1",
39 |     "uglify-js": "^3.14.2"
40 |   },
41 |   "dependencies": {}
42 | }
43 | 


--------------------------------------------------------------------------------
/docs/Troubleshooting.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | id: Troubleshooting
 3 | title: Troubleshooting
 4 | ---
 5 | 
 6 | ## Loading
 7 | 
 8 | **The embedded notebook does not load.**
 9 | 
10 | Please double-check that the embedded cloud notebook is *public*, e.g. by opening its URL in an incognito window of your browser (where you are not logged in to the Wolfram Cloud). In the Wolfram Language, you can determine permissions of a cloud object using
11 | 
12 | ```wl
13 | CloudObjectInformation[CloudObject["..."], "Permissions"]
14 | ```
15 |     
16 | and you can make a cloud object public by evaluating the following:
17 | 
18 | ```wl
19 | SetPermissions[CloudObject["..."], All -> {"Read", "Interact"}]
20 | ```
21 | 
22 | ## Styling
23 | 
24 | **As soon as I embed a notebook, some styling on my page (outside the notebook) changes.**
25 | 
26 | This might be a bug in our (notebook) CSS. We try to isolate CSS selectors as much as possible, but there might still be cases where styling "leaks out" of the notebook. Please file an issue with reproducible steps.
27 | 
28 | **The styling of the notebook seems wrong.**
29 | 
30 | This could be because your CSS definitions "leak into" the notebook. Since the notebook is just another DOM node on your page, it inherits any global CSS. Try to make your CSS selectors more specific so they do not affect the notebook container node. If isolating styles is a problem, you can always fall back to embedding your cloud notebook using an iframe, e.g.:
31 | 
32 | ```html
33 | <iframe src="https://www.wolframcloud.com/obj/jpoeschko/Public/Example.nb" width="800" height="600" />
34 | ```
35 | 
36 | If you think there is an issue on the notebook side, please file an issue.
37 | 


--------------------------------------------------------------------------------
/examples/manipulate.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 |     <title>Manipulate example</title>
 4 |     <style>
 5 |         #path {
 6 |             width: 500px;
 7 |         }
 8 |     </style>
 9 | </head>
10 | <body>
11 | 
12 | <h1>Manipulate example</h1>
13 | <p>
14 |     Enter the URL of a cloud object:
15 |     <input id="path" value="https://www.wolframcloud.com/obj/jpoeschko/Public/Example.nb" />
16 |     <button onclick="embedNotebook()">Embed Notebook</button>
17 | </p>
18 | <p>
19 |     If the notebook's last cell contains a <code>Manipulate</code> with a variable <code>x</code>, this will reset it to 0:
20 |     <button onclick="resetX()">Reset <code>x</code></button>
21 | </p>
22 | <div id="container"></div>
23 | <script src="./dist/wolfram-notebook-embedder.js"></script>
24 | <script>
25 |     let embedding = null;
26 | 
27 |     function embedNotebook() {
28 |         const url = document.getElementById('path').value;
29 |         embedding = WolframNotebookEmbedder.embed(url, document.getElementById('container'));
30 |     }
31 | 
32 |     function resetX() {
33 |         if (embedding) {
34 |             embedding.then(nb => {
35 |                 nb.getCells().then(({cells}) => {
36 |                     if (cells) {
37 |                         const lastCell = cells[cells.length - 1];
38 |                         return nb.setDynamicModuleVariable({
39 |                             cellId: lastCell.id,
40 |                             name: 'x$$',
41 |                             value: 0
42 |                         });
43 |                     }
44 |                 })
45 |             })
46 |         }
47 |     }
48 | </script>
49 | 
50 | </body>
51 | </html>
52 | 


--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
 1 | # Contributing to Wolfram<sup>&reg;</sup>
 2 | 
 3 | Thank you for taking the time to contribute to the [Wolfram Research](https://github.com/wolframresearch) repos on GitHub.
 4 | 
 5 | ## Licensing of Contributions
 6 | 
 7 | By contributing to Wolfram, you agree and affirm that:
 8 | 
 9 | > Wolfram may release your contribution under the terms of the [MIT license](https://opensource.org/licenses/MIT); and
10 | 
11 | > You have read and agreed to the [Developer Certificate of Origin](http://developercertificate.org/), version 1.1 or later.
12 | 
13 | Please see [LICENSE](LICENSE) for licensing conditions pertaining
14 | to individual repositories.
15 | 
16 | 
17 | ## Bug reports
18 | 
19 | ### Security Bugs
20 | 
21 | Please **DO NOT** file a public issue regarding a security issue.
22 | Rather, send your report privately to security@wolfram.com.  Security
23 | reports are appreciated and we will credit you for it.  We do not offer
24 | a security bounty, but the forecast in your neighborhood will be cloudy
25 | with a chance of Wolfram schwag!
26 | 
27 | ### General Bugs
28 | 
29 | Please use the repository issues page to submit general bug issues.
30 | 
31 | Please do not duplicate issues.
32 | 
33 | Please do send a complete and well-written report to us.  Note:  **the
34 | thoroughness of your report will positively correlate to our willingness
35 | and ability to address it**.
36 | 
37 | When reporting issues, always include:
38 | 
39 | * Your version of *Mathematica*<sup>&reg;</sup> or the Wolfram Language<sup>&trade;</sup>.
40 | * Your version of the Wolfram Cloud<sup>&trade;</sup>.
41 | * Your operating system.
42 | * Your web browser, including version number.
43 | 


--------------------------------------------------------------------------------
/docs/ContributingAgreement.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | id: ContributingAgreement
 3 | title: Contributing to Wolfram®
 4 | ---
 5 | 
 6 | Thank you for taking the time to contribute to the [Wolfram Research](https://github.com/wolframresearch) repos on GitHub.
 7 | 
 8 | ## Licensing of Contributions
 9 | 
10 | By contributing to Wolfram, you agree and affirm that:
11 | 
12 | > Wolfram may release your contribution under the terms of the [MIT license](https://opensource.org/licenses/MIT); and
13 | 
14 | > You have read and agreed to the [Developer Certificate of Origin](http://developercertificate.org/), version 1.1 or later.
15 | 
16 | Please see [LICENSE](../LICENSE) for licensing conditions pertaining
17 | to individual repositories.
18 | 
19 | 
20 | ## Bug reports
21 | 
22 | ### Security Bugs
23 | 
24 | Please **DO NOT** file a public issue regarding a security issue.
25 | Rather, send your report privately to security@wolfram.com.  Security
26 | reports are appreciated and we will credit you for it.  We do not offer
27 | a security bounty, but the forecast in your neighborhood will be cloudy
28 | with a chance of Wolfram schwag!
29 | 
30 | ### General Bugs
31 | 
32 | Please use the repository issues page to submit general bug issues.
33 | 
34 | Please do not duplicate issues.
35 | 
36 | Please do send a complete and well-written report to us.  Note:  **the
37 | thoroughness of your report will positively correlate to our willingness
38 | and ability to address it**.
39 | 
40 | When reporting issues, always include:
41 | 
42 | * Your version of *Mathematica*<sup>&reg;</sup> or the Wolfram Language<sup>&trade;</sup>.
43 | * Your version of the Wolfram Cloud<sup>&trade;</sup>.
44 | * Your operating system.
45 | * Your web browser, including version number.
46 | 


--------------------------------------------------------------------------------
/website/i18n/en.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "_comment": "This file is auto-generated by write-translations.js",
 3 |   "localized-strings": {
 4 |     "next": "Next",
 5 |     "previous": "Previous",
 6 |     "tagline": "A library to embed Wolfram Cloud notebooks on websites",
 7 |     "docs": {
 8 |       "ContributingAgreement": {
 9 |         "title": "Contributing to Wolfram®"
10 |       },
11 |       "Development": {
12 |         "title": "Development"
13 |       },
14 |       "GettingStarted": {
15 |         "title": "Getting Started"
16 |       },
17 |       "LibraryInterface": {
18 |         "title": "Library Interface"
19 |       },
20 |       "NotebookAPI-Internal": {
21 |         "title": "NotebookAPI-Internal"
22 |       },
23 |       "NotebookAPI-Unsupported": {
24 |         "title": "NotebookAPI-Unsupported"
25 |       },
26 |       "NotebookAPI": {
27 |         "title": "Notebook API"
28 |       },
29 |       "NotebookLoadingPhases": {
30 |         "title": "Notebook Loading Phases"
31 |       },
32 |       "ServerSideRendering": {
33 |         "title": "Server-Side Rendering"
34 |       },
35 |       "Troubleshooting": {
36 |         "title": "Troubleshooting"
37 |       }
38 |     },
39 |     "links": {
40 |       "Docs": "Docs",
41 |       "Examples": "Examples"
42 |     },
43 |     "categories": {
44 |       "Getting Started": "Getting Started",
45 |       "API Documentation": "API Documentation",
46 |       "More Information": "More Information",
47 |       "Contributing": "Contributing"
48 |     }
49 |   },
50 |   "pages-strings": {
51 |     "Help Translate|recruit community translators for your project": "Help Translate",
52 |     "Edit this Doc|recruitment message asking to edit the doc source": "Edit",
53 |     "Translate this Doc|recruitment message asking to translate the docs": "Translate"
54 |   }
55 | }
56 | 


--------------------------------------------------------------------------------
/docs/Development.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | id: Development
 3 | title: Development
 4 | ---
 5 | 
 6 | Please read the [Contributing Agreement](./ContributingAgreement.md) first. By contributing to this repository, you agree to the licensing terms herein.
 7 | 
 8 | To install all required dependencies for development of this library, run:
 9 | 
10 |     yarn install
11 | 
12 | ## Examples
13 | 
14 | To manually test embedded notebooks, run
15 | 
16 |     yarn run-examples
17 |     
18 | and visit the resulting localhost URL (usually http://localhost:5000). On that page, you can enter the path of a notebook on your localhost cloud to embed it.
19 | 
20 | ## Documentation
21 | 
22 | The library's website is built using [Docusaurus](https://docusaurus.io). In the `website` directory, run
23 | 
24 |     yarn install
25 |     
26 | to install all necessary dependencies, and then either
27 | 
28 |     yarn start
29 |     
30 | to start a live-updating build process or
31 | 
32 |     yarn build
33 |     
34 | to generate static HTML in `website/build`.
35 | 
36 | ## Releasing a new version
37 | 
38 | To release a new version, log in to npm using
39 | 
40 |     yarn login
41 |     
42 | as an owner of the [wolfram-notebook-embedder](https://www.npmjs.com/package/wolfram-notebook-embedder) package.
43 | 
44 | Check out the `master` branch and make sure there are no uncommitted changes:
45 | 
46 |     git checkout master
47 |     
48 | Then run
49 | 
50 |     yarn publish
51 |     
52 | which asks for the new package version, updates `package.json` accordingly, runs a build, creates a Git tag, and publishes the package.
53 | 
54 | If publishing fails due to missing authentication even though you have run `yarn login`, you might have to delete `~/.npmrc` and log in again (see [this Yarn issue](https://github.com/yarnpkg/yarn/issues/4709)).
55 | 
56 | If [two-factor authentication](https://docs.npmjs.com/configuring-two-factor-authentication) is enabled for your account, you will be asked for a one-time password during the publishing process.
57 | 


--------------------------------------------------------------------------------
/examples/ssr.html:
--------------------------------------------------------------------------------
 1 | <html lang="en">
 2 | <head>
 3 |     <meta charset="UTF-8">
 4 |     <title>Server-side rendering example</title>
 5 |     <style>
 6 |         #path {
 7 |             width: 500px;
 8 |         }
 9 |     </style>
10 | </head>
11 | <body>
12 | 
13 | <h1>Server-side rendering example</h1>
14 | 
15 | <p>
16 |     Enter the URL of a cloud object:
17 |     <input id="path" value="https://www.wolframcloud.com/obj/jpoeschko/Public/Example.nb" />
18 | </p>
19 | <p>
20 |     <button onclick="loadStaticHTML()">Load static HTML</button>
21 |     (this would usually happen in your server-side code)
22 | </p>
23 | <p>
24 |     <button onclick="embedNotebook()">Embed live notebook</button>
25 |     (this always happens in the JavaScript code running on the client)
26 | </p>
27 | 
28 | <div>
29 |     Render state:
30 |     <span id="renderState"></span>
31 | </div>
32 | 
33 | <div id="container"></div>
34 | <script src="./dist/wolfram-notebook-embedder.js"></script>
35 | 
36 | <script>
37 |     const renderStateElement = document.getElementById('renderState');
38 | 
39 |     function loadStaticHTML() {
40 |         const url = document.getElementById('path').value.replace(/\/(obj|objects)\//, '/statichtml/');
41 |         fetch(url, {method: 'GET'}).then(response => response.text()).then(text => {
42 |             const container = document.getElementById('container');
43 |             container.innerHTML = text;
44 |         })
45 |     }
46 | 
47 |     function embedNotebook() {
48 |         const url = document.getElementById('path').value;
49 |         WolframNotebookEmbedder.embed(url, document.getElementById('container')).then(embedding => {
50 |             embedding.addEventListener('first-paint-done', ({showingStaticHTML}) => {
51 |                 renderStateElement.innerText = 'First paint done ' + (showingStaticHTML ? '(showing static HTML)' : '(live-rendering)');
52 |             });
53 |             embedding.addEventListener('initial-render-progress', ({cellsRendered, cellsTotal}) => {
54 |                 renderStateElement.innerText = 'Live-rendered ' + cellsRendered + ' out of ' + cellsTotal + ' cells';
55 |             });
56 |             embedding.addEventListener('initial-render-done', () => {
57 |                 renderStateElement.innerText = 'Done with initial rendering';
58 |             });
59 |         });
60 |     }
61 | </script>
62 | 
63 | </body>
64 | </html>
65 | 


--------------------------------------------------------------------------------
/docs/GettingStarted.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | id: GettingStarted
 3 | title: Getting Started
 4 | ---
 5 | 
 6 | 1. Create a notebook in the [Wolfram Cloud](https://www.wolframcloud.com/) and make it public.
 7 |     * In the cloud UI, use the New Notebook button and then use the Share dialog to make it public.
 8 |     * From the [Wolfram Language](https://www.wolfram.com/language/), you could publish notebook content like so:
 9 | 
10 |         ```wl
11 |         CloudPublish[Manipulate[Plot[Sin[a x], {x, 0, 2 Pi}], {a, 1, 3}]]
12 |         ```
13 | 2. Install this library in your JavaScript project using
14 | 
15 |     ```bash
16 |     npm install wolfram-notebook-embedder
17 |     ```
18 |         
19 |     so you can import it in JavaScript as
20 |     
21 |     ```js
22 |     import * as WolframNotebookEmbedder from 'wolfram-notebook-embedder';
23 |     ```
24 |         
25 |     or import it as a `<script>` tag from a CDN:
26 |     
27 |     ```html
28 |     <script crossorigin src="https://unpkg.com/wolfram-notebook-embedder@0.3/dist/wolfram-notebook-embedder.min.js"></script>
29 |     ```
30 | 3. In your HTML, create a container where you want the notebook to be rendered (say `<div id="notebookContainer"></div>`) and add the following JavaScript code:
31 | 
32 |     ```js
33 |     var embedding = WolframNotebookEmbedder.embed('url', document.getElementById('notebookContainer'));
34 |     ```
35 |     
36 |     where `url` is the URL of your cloud object from step 1. More details about `embed` are described in the [library interface documentation](./LibraryInterface.md).
37 | 4. If you want to control the notebook from your JavaScript code, wait for the `embed` result (a [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_promises)) to resolve, and then use various [notebook API methods](./NotebookAPI.md):
38 | 
39 |     ```js
40 |     embedding.then(function (nb) {
41 |         // This will reset the DynamicModule variable x$$
42 |         // in the first cell of the notebook.
43 |         return nb.getCells().then(function (cells) {
44 |             nb.setDynamicModuleVariable({
45 |                 cellId: cells[0].id,
46 |                 name: 'x$$',
47 |                 value: 0
48 |             });
49 |         });
50 |     })
51 |     ```
52 | 5. If you want to serve static HTML from your server so the notebook can be rendered before JavaScript code is loaded (which also helps with SEO), take a look at [server-side rendering](./ServerSideRendering.md).
53 | 6. If you run into any issues, take a look at the [troubleshooting guide](./Troubleshooting.md). If you think you found a bug, please report it.
54 | 


--------------------------------------------------------------------------------
/website/static/img/icon.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 34 34"><defs><style>.iconMain{fill:#a6a6a6;}.iconAccent{fill:#d10;}.iconBackground{fill:#fff;}</style></defs><rect class="iconMain" x="8" y="6" width="19" height="22" rx="1"/><path class="iconAccent" d="M9.25,8.5H7.75A.75.75,0,0,1,7,7.75H7A.75.75,0,0,1,7.75,7h1.5a.75.75,0,0,1,.75.75h0A.75.75,0,0,1,9.25,8.5ZM10,10.75h0A.75.75,0,0,0,9.25,10H7.75a.75.75,0,0,0-.75.75H7a.75.75,0,0,0,.75.75h1.5A.75.75,0,0,0,10,10.75Zm0,3h0A.75.75,0,0,0,9.25,13H7.75a.75.75,0,0,0-.75.75H7a.75.75,0,0,0,.75.75h1.5A.75.75,0,0,0,10,13.75Zm0,3h0A.75.75,0,0,0,9.25,16H7.75a.75.75,0,0,0-.75.75H7a.75.75,0,0,0,.75.75h1.5A.75.75,0,0,0,10,16.75Zm0,3h0A.75.75,0,0,0,9.25,19H7.75a.75.75,0,0,0-.75.75H7a.75.75,0,0,0,.75.75h1.5A.75.75,0,0,0,10,19.75Zm0,3h0A.75.75,0,0,0,9.25,22H7.75a.75.75,0,0,0-.75.75H7a.75.75,0,0,0,.75.75h1.5A.75.75,0,0,0,10,22.75Zm0,3h0A.75.75,0,0,0,9.25,25H7.75a.75.75,0,0,0-.75.75H7a.75.75,0,0,0,.75.75h1.5A.75.75,0,0,0,10,25.75Z"/><rect class="iconBackground" x="9" y="7" width="17" height="20" rx="0.5"/><path class="iconAccent" d="M22.29532,17.00059,24.25,14.80752l-2.87017-.62579.29246-2.92324-2.69,1.18083L17.49992,9.90268l-1.48136,2.53637L13.329,11.25759l.2918,2.92325-2.87051.62513,1.95436,2.19353L10.75,19.19248l2.87017.62589-.29234,2.923,2.68984-1.18075,1.48239,2.53666L18.98144,21.561l2.68964,1.18136-.2918-2.92323L24.2497,19.194Zm.51652,1.4164-1.30765-.44729-.89174-1.159,1.14832.42662Zm-4.21922,2.711-.80859,1.3893V21.07824l.84119-1.22948Zm-1.902-7.17058-1.38745-.49337-.80283-1.084,1.45736.64018Zm2.35254-.93691,1.45694-.63956L19.69693,13.464l-1.3869.49319Zm1.76544,1.27975-.70418.99865.04141-1.50574.82478-1.11224ZM17.5,20.49972,16.41939,18.923,17.5,17.4567,18.5806,18.923Zm-2.03087-4.48914-.05408-1.91445,1.80092.64092v1.86308Zm2.3149-1.27353,1.79949-.64092-.05123,1.91445-1.74826.58955Zm-3.592-.43751-.16157-1.61861.8237,1.11217.0414,1.50509Zm2.85762,2.83-1.08,1.46553-1.83621-.54129,1.16512-1.51427Zm-.67384,2.71868.84014,1.23v1.43955l-.81091-1.39005Zm1.57449-2.71868,1.75112-.59,1.16512,1.51427-1.8362.54129Zm5.25024-1.98113-1.35929,1.52508L20.2366,16.0773l.96269-1.36524Zm-5.70049-4.1423,1.03145,1.765L17.50009,14.089l-1.03078-1.318Zm-5.70034,4.141,2.00147-.43588.96225,1.36589-1.60464.59539Zm1.43943,2.08928,1.14885-.42627-.89217,1.15953-1.30845.44673Zm-.92971,1.72647,1.362-.465,1.4542.42868-1.217.385Zm1.871.8465,1.62818-.51511.04151,1.73208-1.87366.82245ZM19.149,21.02669l.04221-1.73234L20.819,19.81l.2036,2.03965Zm1.942-1.71442-1.21718-.38557,1.45467-.42881,1.3623.466Z"/><path class="iconAccent" d="M4.5,2H8V4H4.5a.50034.50034,0,0,0-.5.5v25a.50034.50034,0,0,0,.5.5H8v2H4.5A2.50294,2.50294,0,0,1,2,29.5V4.5A2.50294,2.50294,0,0,1,4.5,2Zm25,0H26V4h3.5a.50034.50034,0,0,1,.5.5v25a.50034.50034,0,0,1-.5.5H26v2h3.5A2.50294,2.50294,0,0,0,32,29.5V4.5A2.50294,2.50294,0,0,0,29.5,2Z"/></svg>


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # wolfram-notebook-embedder
 2 | 
 3 | A library to embed [Wolfram Cloud](https://www.wolframcloud.com/) notebooks on websites. It does *not* use an `<iframe>`, but renders a notebook directly into a given DOM node for a more seamless experience.
 4 | 
 5 | ## Installation
 6 | 
 7 | If you are using a package manager such as [npm](https://www.npmjs.com/get-npm) or [Yarn](https://yarnpkg.com/en/), you can install this package from the npm repository:
 8 | 
 9 |     npm install wolfram-notebook-embedder
10 |     
11 | and then import it in your JavaScript code like so:
12 | 
13 |     import * as WolframNotebookEmbedder from 'wolfram-notebook-embedder';    
14 |     
15 | You can also import this library as a `<script>` tag from a CDN:
16 | 
17 |     <script crossorigin src="https://unpkg.com/wolfram-notebook-embedder@0.3/dist/wolfram-notebook-embedder.min.js"></script>
18 |     
19 | and then use the global variable `WolframNotebookEmbedder`.
20 | 
21 | ## Usage & Documentation
22 | 
23 | * [**Getting Started**](./docs/GettingStarted.md)
24 | * [Library Interface](./docs/LibraryInterface.md)
25 | * [Notebook API](./docs/NotebookAPI.md)
26 | * [Server-Side Rendering](./docs/ServerSideRendering.md)
27 | * [Notebook Loading Phases](./docs/NotebookLoadingPhases.md)
28 | * [Troubleshooting](./docs/Troubleshooting.md)
29 | 
30 | ## Examples
31 | 
32 | * [Basic Example](./examples/basic.html)
33 | * [Manipulate Example](./examples/manipulate.html)
34 | * [Dimensions Examples](./examples/dimensions.html)
35 | * [Server-Side Rendering](./examples/ssr.html)
36 | 
37 | ## Browser Support
38 | 
39 | We support all modern browsers (the last two major versions of Chrome, Firefox, Edge, Safari). Internet Explorer is *not* supported anymore.
40 | 
41 | ## Contributing
42 | 
43 | Everyone is welcome to contribute. Please read the [Contributing agreement](CONTRIBUTING.md) and the [Development guide](./docs/Development.md) for more information, including how to run the tests.
44 | 
45 | ## Versioning
46 | 
47 | We use [semantic versioning](https://semver.org/) for this library and its API.
48 | 
49 | See the [changelog](CHANGELOG.md) for details about the changes in each release.
50 | 
51 | Each version of this library is compatible with a certain range of versions of the Wolfram Cloud. Currently, the requirement is Wolfram Cloud 1.50 or higher. We try hard not to make any backward-incompatible changes on the Wolfram Cloud side, which would require an update of this library to keep embeddings working.
52 | 
53 | | Library version | Minimum Wolfram Cloud version |
54 | |-----------------|-------------------------------|
55 | |           0.1.x |                          1.50 |
56 | |           0.2.x |                          1.55 |
57 | |           0.3.x |                          1.59 |
58 | 
59 | ## License
60 | 
61 | This project is licensed under the [MIT license](./LICENSE).
62 | 


--------------------------------------------------------------------------------
/docs/NotebookLoadingPhases.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | id: NotebookLoadingPhases
 3 | title: Notebook Loading Phases
 4 | ---
 5 | 
 6 | ## Rendering phases
 7 | 
 8 | Notebooks depend on various things that are loaded asynchronously, e.g. the actual notebook content, CSS, JavaScript, fonts and (potentially) results from kernel evaluations. While things are loading, static pieces of HTML are rendered if available (see [server-side rendering](./ServerSideRendering.md)). Rendering generally goes through the following phases:
 9 | 
10 | 1. Nothing is displayed initially.
11 | 2. Once critical CSS and fonts are loaded: Static HTML is displayed, if available; the event `first-paint-done` with `{showingStaticHTML: true}` is fired.
12 | 3. Once the main JavaScript code and notebook content data is loaded: Static HTML is reused as a whole (albeit in a slightly different container structure); the event `initial-render-progress` with `{cellsRendered: 0, cellsTotal: -1}` is fired.
13 | 4. Once other dependencies, such as the notebook stylesheet, are loaded and notebook-level options are resolved (possibly relying on kernel evaluations): Static HTML for individual cells is rendered; the event `initial-render-progress` with `{cellsRendered: 0, cellsTotal: N}` is fired with the actual number `N` of initially visible cells. If no static HTML was available initially, the event `first-paint-done` is fired at this point. The notebook also starts fetching static HTML for cells that were not present in the initial static HTML.
14 | 5. Each cell might require additional dependencies (e.g. fonts), resolution of `Dynamic` option values, resolution of `Dynamic` content, etc. Once a cell becomes ready, it is "live-rendered", while other non-ready cells are still rendered using static HTML; the event `initial-render-progress` with `{cellsRendered: M, cellsTotal: N}` is fired accordingly.
15 | 6. Once all cells have been live-rendered: The event `initial-render-done` is fired.
16 | 
17 | If no static HTML is available for the notebook as a whole or for individual cells, a loading background is displayed in their place until they are live-rendered.
18 | 
19 | ## Progress indicator
20 | 
21 | By default, notebooks show a (blue) progress indicator at the top during the initial render phase. It can be turned off by setting the option `showRenderProgress: false`. The progress indicator distinguishes between two groups of phases:
22 | 
23 | 1. (Phases 1–3 above.) An indeterminate progress indicator is shown.
24 | 2. (Phases 4–6 above.) A determinate progress indicator is shown, based on the number of rendered vs. total cells, as long as there are at least three cells in the notebook. If there are fewer than three cells, another indeterminate progress indicator is shown (since a determinate progress indicator would jump too much and not give a real impression of progress).
25 | 
26 | Once the initial render phase is over, the progress indicator is hidden.
27 | 


--------------------------------------------------------------------------------
/website/static/img/seamless-embedding.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 60"><defs><style>.grayD1{fill:#d1d1d1;}.iconCommon{fill:#fff;}.grayBF{fill:#bfbfbf;}.gray89{fill:#898989;}.grayA6{fill:#a6a6a6;}.iconMain{fill:#d10;}</style></defs><path class="grayD1" d="M99,56H56V4H99Z"/><rect class="iconCommon" x="57" y="5" width="41" height="50"/><path class="grayBF" d="M11,3H1V1H11ZM7,37H1v2H7ZM9,5H5V7H9ZM21,5H19V7h2Zm6,4H25v2h2ZM9,9H5v2H9Zm2-2h6V5H11ZM23,9H11v2H23Zm4,4H25v2h2ZM9,13H5v2H9Zm14,0H11v2H23ZM11,41H1v2H11ZM4,47H15V45H4Zm6,4h4V49H10Zm12-6H18v2h4Zm2,2h4V45H24Zm6,0h4V45H30Zm-4,2H24v2h2Zm4,6h2V53H30Zm6-10v2h2V45ZM10,55h4V53H10Zm6-4h6V49H16Zm0,4H28V53H16ZM9,29H5v2H9Zm10,0v2h2V29Zm8,4H25v2h2ZM2,59H4V57H2Zm4,0H8V57H6Zm4,0h2V57H10ZM5,35H9V33H5Zm6-6v2h6V29Zm12,4H11v2H23ZM9,21H5v2H9Zm10,0v2h2V21Zm8,4H25v2h2ZM9,25H5v2H9Zm2-4v2h6V21Zm12,4H11v2H23Z"/><path class="gray89" d="M90,23H63V21H90Zm-3,2H63v2H87Zm-5,6H93V29H82Zm0,4H93V33H82Zm0,4H93V37H82Zm0,8H93V45H82ZM63,51H93V49H63Zm0,4H93V53H63ZM87,41H82v2h5ZM63,12v7H93V12Z"/><path class="grayA6" d="M75,32H67a1,1,0,0,0-1,1V43a1,1,0,0,0,1,1h8a1,1,0,0,0,1-1V33A1,1,0,0,0,75,32Z"/><rect class="iconCommon" x="67" y="33" width="8" height="10" rx="0.5"/><path class="iconMain" d="M65.5,37H67v1H65.5a.5.5,0,0,1,0-1ZM64,44V32a1.001,1.001,0,0,1,1-1h2V30H65a2.00229,2.00229,0,0,0-2,2V44a2.00229,2.00229,0,0,0,2,2h2V45H65A1.001,1.001,0,0,1,64,44Zm1-2.5a.5.5,0,0,0,.5.5H67V41H65.5A.5.5,0,0,0,65,41.5Zm0-2a.5.5,0,0,0,.5.5H67V39H65.5A.5.5,0,0,0,65,39.5Zm8.85321-2.42676-.82623.927.82611.92713-1.21332.26428.12335,1.2356-1.1369-.49933L71,41l-.62659-1.07227-1.137.49909.1236-1.23554-1.21326-.26452.82623-.927-.82605-.92719,1.21332-.26422-.12335-1.23566,1.13684.49939L70.99994,35l.62665,1.0722,1.137-.49914L72.64,36.80872Zm-2.5108-.35943.58624-.20844.33948-.45782-.61585.27032Zm.77594-.06934-.01746.63647.29761-.42211.06848-.68451Zm-.99829.399V37.831l.739-.2492.02161-.80927Zm-.55573-.83106.43573.55713.436-.55707L71,35.46637Zm-.83227-.16522.33935.45819.58649.20856-.30982-.39618Zm.38665.72534.02283.80927.7384.2492v-.78753Zm-.58526-.5982.0683.6842.29736.42212-.01746-.63617ZM69.165,37.86157l.67828-.25171-.40674-.57733-.846.18427Zm-.41059.73712.553-.18884.37714-.49011-.4856.18017Zm.72754.37836.51441-.16272-.61469-.18121-.57568.19653Zm.82068.72485-.01751-.73217-.68824.21777-.08624.86206Zm.507-1.64715-.74017-.24939-.49249.64007.77618.22876Zm.07031,1.66907-.3551-.5199.01233.54083.34277.58759ZM71,39.47931l.45679-.6665L71,38.19305l-.45679.61976Zm.47565-.27515-.35559.51966v.60827l.34179-.58722Zm.1712-.53.77618-.22876-.49249-.64007-.74017.24939Zm.8421,1.37568-.08606-.86213-.68805-.21795L71.697,39.702Zm.7052-1.21979-.57586-.197-.61487.18127.51446.163Zm-.39312-.7298-.48542-.1803.377.48987.55273.18909Zm.60858-.88293-.846-.18445-.40692.57709.67828.25195ZM77,30H75v1h2a1.001,1.001,0,0,1,1,1V44a1.001,1.001,0,0,1-1,1H75v1h2a2.00229,2.00229,0,0,0,2-2V32A2.00229,2.00229,0,0,0,77,30ZM65,35.5a.5.5,0,0,0,.5.5H67V35H65.5A.5.5,0,0,0,65,35.5Zm0-2a.5.5,0,0,0,.5.5H67v-.5a.5.5,0,0,1,.5-.5h-2A.5.5,0,0,0,65,33.5ZM5,19h6V17H5Zm37-2H38v2h4Zm-6,0H13v2H36ZM51.5835,33.05225a23.95344,23.95344,0,0,1-5.00055-.50989,23.79847,23.79847,0,0,1-6.043-2.08209,14.50147,14.50147,0,0,1-4.957-3.99244,11.45069,11.45069,0,0,1-2.28638-6.09075,11.96974,11.96974,0,0,0,1.44659,6.63366,15.98157,15.98157,0,0,0,4.74628,5.15143,26.27075,26.27075,0,0,0,6.2608,3.26233A26.84493,26.84493,0,0,0,51.669,36.87793l.04785,2.14343,6.81738-4.14227L51.5387,31.04523Z"/></svg>


--------------------------------------------------------------------------------
/website/core/Footer.js:
--------------------------------------------------------------------------------
 1 | const React = require('react');
 2 | 
 3 | class Footer extends React.Component {
 4 |   docUrl(doc, language) {
 5 |     const baseUrl = this.props.config.baseUrl;
 6 |     const docsUrl = this.props.config.docsUrl;
 7 |     const docsPart = `${docsUrl ? `${docsUrl}/` : ''}`;
 8 |     // const langPart = `${language ? `${language}/` : ''}`;
 9 |     const langPart = '';
10 |     return `${baseUrl}${docsPart}${langPart}${doc}`;
11 |   }
12 | 
13 |   pageUrl(doc, language) {
14 |     const baseUrl = this.props.config.baseUrl;
15 |     // const langPart = (language ? `${language}/` : '');
16 |     const langPart = '';
17 |     return baseUrl + langPart + doc;
18 |   }
19 | 
20 |   render() {
21 |     return (
22 |       <footer className="nav-footer" id="footer">
23 |         <section className="sitemap">
24 |           <a href={this.props.config.baseUrl} className="nav-home">
25 |             {this.props.config.footerIcon && (
26 |               <img
27 |                 src={this.props.config.baseUrl + this.props.config.footerIcon}
28 |                 alt={this.props.config.title}
29 |                 width="66"
30 |                 height="58"
31 |               />
32 |             )}
33 |           </a>
34 |           <div>
35 |             <h5>Docs</h5>
36 |             <a href={this.docUrl('GettingStarted', this.props.language)}>
37 |               Getting Started
38 |             </a>
39 |             <a href={this.docUrl('LibraryInterface', this.props.language)}>
40 |               Library API
41 |             </a>
42 |             <a href={this.pageUrl('examples', this.props.language)}>
43 |               Examples
44 |             </a>
45 |           </div>
46 |           <div>
47 |             <h5>Community</h5>
48 |             {/*<a href={this.pageUrl('users', this.props.language)}>*/}
49 |             {/*  User Showcase*/}
50 |             {/*</a>*/}
51 |             <a
52 |               href="https://community.wolfram.com/content?curTag=wolfram%20cloud"
53 |               target="_blank"
54 |               rel="noreferrer noopener">
55 |               Wolfram Community
56 |             </a>
57 |           </div>
58 |           <div>
59 |             <h5>More</h5>
60 |             {/*<a href={`${this.props.config.baseUrl}blog`}>Blog</a>*/}
61 |             <a href="https://github.com/WolframResearch/wolfram-notebook-embedder">GitHub</a>
62 |             <a
63 |               className="github-button"
64 |               href={this.props.config.repoUrl}
65 |               data-icon="octicon-star"
66 |               data-count-href="/WolframResearch/wolfram-notebook-embedder/stargazers"
67 |               data-show-count="true"
68 |               data-count-aria-label="# stargazers on GitHub"
69 |               aria-label="Star this project on GitHub">
70 |               Star
71 |             </a>
72 |           </div>
73 |         </section>
74 | 
75 |         <section className="copyright">
76 |             Copyright ©&nbsp;{new Date().getFullYear()}
77 |             &nbsp;
78 |             <a href="https://www.wolfram.com">Wolfram Research Inc.</a>
79 |             &nbsp;|&nbsp;
80 |             <a href="http://www.wolfram.com/legal/?source=footer">Legal</a>
81 |             &nbsp;&amp;&nbsp;
82 |             <a href="http://www.wolfram.com/legal/privacy/wolfram/?source=footer">Privacy Policy</a>
83 |         </section>
84 |       </footer>
85 |     );
86 |   }
87 | }
88 | 
89 | module.exports = Footer;
90 | 


--------------------------------------------------------------------------------
/examples/dimensions.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 |     <title>Dimensions examples</title>
 4 |     <style>
 5 |         #path {
 6 |             width: 500px;
 7 |         }
 8 |         #containerFixedCSS {
 9 |             width: 500px;
10 |             height: 400px;
11 |         }
12 |         #containerRelativeCSS {
13 |             width: 100%;
14 |             height: 75%;
15 |         }
16 |     </style>
17 | </head>
18 | <body>
19 | 
20 | <h1>Dimensions examples</h1>
21 | <p>
22 |     Enter the URL of a cloud object:
23 |     <input id="path" value="https://www.wolframcloud.com/obj/jpoeschko/Public/Example.nb" />
24 |     <button onclick="embedNotebooks()">Embed Notebook</button>
25 | </p>
26 | 
27 | <h2>Infinite height granted to the notebook, width adapting to container node (the default)</h2>
28 | <p>Current dimensions: <span id="dimensionsInfiniteNB"></span></p>
29 | <div id="containerInfiniteNB"></div>
30 | 
31 | <h2>Fixed maximum dimensions granted to the notebook</h2>
32 | <p>
33 |     Width: <input onchange="updateNBDimensions()" oninput="updateNBDimensions()" id="nbWidth" value="300" />
34 |     Maximum height: <input onchange="updateNBDimensions()" oninput="updateNBDimensions()" id="nbHeight" value="300" />
35 | </p>
36 | <p>Current dimensions: <span id="dimensionsFixedNB"></span></p>
37 | <div id="containerFixedNB"></div>
38 | 
39 | <h2>Fixed dimensions set in CSS, notebook adapting accordingly</h2>
40 | <p>Current dimensions: <span id="dimensionsFixedCSS"></span></p>
41 | <div id="containerFixedCSS"></div>
42 | 
43 | <h2>Relative dimensions set in CSS, notebook adapting accordingly</h2>
44 | <p>Current dimensions: <span id="dimensionsRelativeCSS"></span></p>
45 | <div id="containerRelativeCSS"></div>
46 | 
47 | <script src="./dist/wolfram-notebook-embedder.js"></script>
48 | <script>
49 |     let fixedEmbedding = null;
50 |     let fixedWidth = 300;
51 |     let fixedHeight = 300;
52 | 
53 |     function embedNotebooks() {
54 |         embedNotebook('containerInfiniteNB', 'dimensionsInfiniteNB', null, Infinity, true);
55 |         fixedEmbedding = embedNotebook('containerFixedNB', 'dimensionsFixedNB', fixedWidth, fixedHeight, true);
56 |         embedNotebook('containerFixedCSS', 'dimensionsFixedCSS', null, null, true);
57 |         embedNotebook('containerRelativeCSS', 'dimensionsRelativeCSS', null, null, true);
58 |     }
59 | 
60 |     function embedNotebook(containerID, dimensionsID, width, maxHeight, showBorder) {
61 |         const url = document.getElementById('path').value;
62 |         return WolframNotebookEmbedder.embed(url, document.getElementById(containerID), {
63 |             width: width,
64 |             maxHeight: maxHeight,
65 |             showBorder: showBorder
66 |         }).then(nb => {
67 |             nb.addEventListener('resize', dimensions => {
68 |                 const span = document.getElementById(dimensionsID);
69 |                 span.innerHTML = dimensions.width + ' x ' + dimensions.height;
70 |             });
71 |             return nb;
72 |         });
73 |     }
74 | 
75 |     function updateNBDimensions() {
76 |         const width = Number.parseInt(document.getElementById('nbWidth').value, 10);
77 |         if (width !== Number.NaN) {
78 |             fixedWidth = width;
79 |         }
80 |         const height = Number.parseInt(document.getElementById('nbHeight').value, 10);
81 |         if (height !== Number.NaN) {
82 |             fixedHeight = height;
83 |         }
84 |         fixedEmbedding.then(nb => {
85 |             nb.setAttributes({width: fixedWidth, maxHeight: fixedHeight});
86 |         });
87 |     }
88 | </script>
89 | 
90 | </body>
91 | </html>
92 | 


--------------------------------------------------------------------------------
/website/siteConfig.js:
--------------------------------------------------------------------------------
  1 | // See https://docusaurus.io/docs/site-config for all the possible
  2 | // site configuration options.
  3 | 
  4 | // List of projects/orgs using your project for the users page.
  5 | const users = [
  6 |   {
  7 |     caption: 'Wolfram Notebook Archive',
  8 |     // You will need to prepend the image path with your baseUrl
  9 |     // if it is not '/', like: '/test-site/img/image.jpg'.
 10 |     image: '/obj/jpoeschko/WolframNotebookEmbedderDocs/img/undraw_open_source.svg',
 11 |     infoLink: 'https://notebookarchive.org/',
 12 |     pinned: true,
 13 |   },
 14 | ];
 15 | 
 16 | const wlHighlighter = require('./wl.js').default;
 17 | 
 18 | const siteConfig = {
 19 |   title: 'Wolfram Notebook Embedder', // Title for your website.
 20 |   tagline: 'A library to embed Wolfram Cloud notebooks on websites',
 21 |   url: 'https://reference.wolfram.com', // Your website URL
 22 |   baseUrl: '/language/WolframNotebookEmbedder/', // Base URL for your project */
 23 |   // For now, references are generated to work with this location:
 24 |   // url: 'https://www.wolframcloud.com',
 25 |   // baseUrl: '/obj/jpoeschko/WolframNotebookEmbedderDocs/',
 26 |   // For github.io type URLs, you would set the url and baseUrl like:
 27 |   //   url: 'https://facebook.github.io',
 28 |   //   baseUrl: '/test-site/',
 29 | 
 30 |   // Used for publishing and more
 31 |   projectName: 'wolfram-notebook-embedder',
 32 |   organizationName: 'WolframResearch',
 33 |   // For top-level user or org sites, the organization is still the same.
 34 |   // e.g., for the https://JoelMarcey.github.io site, it would be set like...
 35 |   //   organizationName: 'JoelMarcey'
 36 | 
 37 |   // For no header links in the top nav bar -> headerLinks: [],
 38 |   headerLinks: [
 39 |     {doc: 'GettingStarted', label: 'Docs'},
 40 |     {page: 'examples', label: 'Examples'}
 41 |     // {doc: 'doc4', label: 'API'},
 42 |     // {page: 'help', label: 'Help'},
 43 |     // {blog: true, label: 'Blog'},
 44 |   ],
 45 | 
 46 |   // If you have users set above, you add it here:
 47 |   users,
 48 | 
 49 |   /* path to images for header/footer */
 50 |   headerIcon: 'img/icon.svg',
 51 |   footerIcon: 'img/icon.svg',
 52 |   favicon: 'img/favicon.ico',
 53 | 
 54 |   /* Colors for website */
 55 |   colors: {
 56 |     primaryColor: '#333',
 57 |     secondaryColor: '#d10'
 58 |   },
 59 | 
 60 |   /* Custom fonts for website */
 61 |   /*
 62 |   fonts: {
 63 |     myFont: [
 64 |       "Times New Roman",
 65 |       "Serif"
 66 |     ],
 67 |     myOtherFont: [
 68 |       "-apple-system",
 69 |       "system-ui"
 70 |     ]
 71 |   },
 72 |   */
 73 | 
 74 |   // This copyright info is used in /core/Footer.js and blog RSS/Atom feeds.
 75 |   copyright: `Copyright © ${new Date().getFullYear()} Wolfram Research Inc.`,
 76 | 
 77 |   highlight: {
 78 |     // Highlight.js theme to use for syntax highlighting in code blocks.
 79 |     theme: 'default',
 80 |     hljs: function(hljs) {
 81 |       hljs.registerLanguage('wl', wlHighlighter);
 82 |     }
 83 |   },
 84 | 
 85 |   // Add custom scripts here that would be placed in <script> tags.
 86 |   scripts: ['https://buttons.github.io/buttons.js'],
 87 | 
 88 |   // On page navigation for the current documentation page.
 89 |   onPageNav: 'separate',
 90 |   // No .html extensions for paths.
 91 |   cleanUrl: true,
 92 | 
 93 |   // Open Graph and Twitter card images.
 94 |   ogImage: 'img/undraw_online.svg',
 95 |   twitterImage: 'img/undraw_tweetstorm.svg',
 96 | 
 97 |   // Show documentation's last contributor's name.
 98 |   // enableUpdateBy: true,
 99 | 
100 |   // Show documentation's last update time.
101 |   // enableUpdateTime: true,
102 | 
103 |   // You may provide arbitrary config keys to be used as needed by your
104 |   // template. For example, if you need your repo's URL...
105 |   repoUrl: 'https://github.com/WolframResearch/wolfram-notebook-embedder',
106 | };
107 | 
108 | module.exports = siteConfig;
109 | 


--------------------------------------------------------------------------------
/website/static/css/custom.css:
--------------------------------------------------------------------------------
  1 | /* your custom css */
  2 | 
  3 | @font-face {
  4 |     font-family: "Source Sans Pro";
  5 |     font-weight: normal;
  6 |     font-style: normal;
  7 |     src: url("https://www.wolframcdn.com/fonts/source-sans-pro/1.0/SourceSansPro-Regular.woff2");
  8 | }
  9 | @font-face {
 10 |     font-family: "Source Sans Pro";
 11 |     font-weight: normal;
 12 |     font-style: italic;
 13 |     src: url("https://www.wolframcdn.com/fonts/source-sans-pro/1.0/SourceSansPro-Italic.woff2");
 14 | }
 15 | @font-face {
 16 |     font-family: "Source Sans Pro";
 17 |     font-weight: 300;
 18 |     font-style: normal;
 19 |     src: url("https://www.wolframcdn.com/fonts/source-sans-pro/1.0/SourceSansPro-Light.woff2");
 20 | }
 21 | @font-face {
 22 |     font-family: "Source Code Pro";
 23 |     font-weight: normal;
 24 |     font-style: normal;
 25 |     src: url("https://www.wolframcdn.com/fonts/source-code-pro/1.0/SourceCodePro-Regular.woff2");
 26 | }
 27 | @font-face {
 28 |     font-family: "Source Code Pro";
 29 |     font-weight: bold;
 30 |     font-style: normal;
 31 |     src: url("https://www.wolframcdn.com/fonts/source-code-pro/1.0/SourceCodePro-Bold.woff2");
 32 | }
 33 | 
 34 | body {
 35 |     font-family: "Source Sans Pro", Arial, sans-serif;
 36 | }
 37 | 
 38 | @media only screen and (max-width: 1023px) {
 39 |     html .nav-site {
 40 |         background-color: #d10 !important;
 41 |     }
 42 | }
 43 | 
 44 | html .projectTitle small {
 45 |     font-size: 66%;
 46 |     color: #898989;
 47 |     font-weight: 300;
 48 | }
 49 | 
 50 | .heroImage {
 51 |     padding-top: 40px;
 52 | }
 53 | 
 54 | .fixedHeaderContainer {
 55 |     background: #e5e5e5;
 56 |     border-bottom: 5px solid #d10;
 57 | }
 58 | 
 59 | .fixedHeaderContainer header h2.headerTitleWithLogo {
 60 |     font-size: 16px;
 61 |     font-weight: normal;
 62 |     font-style: normal;
 63 |     font-stretch: normal;
 64 |     line-height: normal;
 65 |     letter-spacing: 0.64px;
 66 |     color: #333;
 67 |     text-transform: uppercase;
 68 | }
 69 | 
 70 | a {
 71 |     color: #d10;
 72 | }
 73 | a:hover {
 74 |     color: #fe0000;
 75 | }
 76 | header a {
 77 |     color: #333 !important;
 78 |     background: none !important;
 79 | }
 80 | header a:hover {
 81 |     color: #fe0000 !important;
 82 | }
 83 | 
 84 | html .imageAlignTop .blockImage {
 85 |     max-width: 120px;
 86 | }
 87 | 
 88 | .mainLink {
 89 |     margin-top: 40px;
 90 |     margin-bottom: 40px;
 91 |     text-align: center;
 92 | }
 93 | .mainLink a {
 94 |     text-transform: uppercase;
 95 |     font-size: 18px;
 96 | }
 97 | 
 98 | #background p {
 99 |     max-width: 100%;
100 | }
101 | #background  .blockImage {
102 |     max-width: 120px;
103 |     margin-top: 3em;
104 | }
105 | 
106 | #docsNav h3.navGroupCategoryTitle {
107 |     color: #333;
108 | }
109 | 
110 | #docsNav a.navItem {
111 |     color: #d10;
112 | }
113 | #docsNav a.navItem:hover {
114 |     color: #fe0000;
115 | }
116 | 
117 | html a.button {
118 |     border: 1px solid #d10;
119 |     border-radius: 3px;
120 |     background: white;
121 |     color: #d10;
122 | }
123 | html a.button:hover {
124 |     border: 1px solid #fe0000;
125 |     background: #fe0000;
126 |     color: white;
127 | }
128 | 
129 | html a.button.primary {
130 |     border: 1px solid #d10;
131 |     background: #d10;
132 |     color: white;
133 |     padding: 15px 50px;
134 |     border-radius: 5px;
135 |     font-size: 18px;
136 | }
137 | html a.button.primary:hover {
138 |     border: 1px solid #fe0000;
139 |     background: #fe0000;
140 |     color: white;
141 | }
142 | 
143 | html .hljs.language-wl {
144 |     font-family: "Source Code Pro", monospace;
145 | }
146 | 
147 | footer h5,
148 | footer a {
149 |     /* Make sure that the items in the footer don't cause a horizontal scrollbar. */
150 |     width: max-content;
151 | }
152 | 
153 | footer a {
154 |     color: rgba(255, 255, 255, 0.6);
155 | }
156 | footer a:hover {
157 |     color: white;
158 | }
159 | 
160 | @media only screen and (min-device-width: 360px) and (max-device-width: 736px) {
161 | }
162 | 
163 | @media only screen and (min-width: 1024px) {
164 | }
165 | 
166 | @media only screen and (max-width: 1023px) {
167 |     .nav-site {
168 |         background-color: #fe0000 !important;
169 |     }
170 |     .nav-site a,
171 |     .nav-site a:hover {
172 |         color: white !important;
173 |     }
174 | }
175 | 
176 | @media only screen and (min-width: 1400px) {
177 | }
178 | 
179 | @media only screen and (min-width: 1500px) {
180 | }
181 | 


--------------------------------------------------------------------------------
/docs/LibraryInterface.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | id: LibraryInterface
 3 | title: Library Interface
 4 | ---
 5 | 
 6 | This library exposes a single function `embed` that renders a notebook into a given DOM node and returns an interface for further interaction with the notebook:
 7 | 
 8 | ```js
 9 | WolframNotebookEmbedder.embed(source, domNode, attributes)
10 | ```
11 | 
12 | * `source`:
13 |     * a string with a cloud object URL of the notebook to embed, e.g. `'https://www.wolframcloud.com/obj/4beadfbb-84dd-4b26-87b6-bcd30b9abd65'` or `'https://www.wolframcloud.com/obj/myusername/myfolder/mynotebook.nb'`, *or*
14 |     * an object with the following properties:
15 |         * `cloudBase` (optional): a string denoting the [cloud base](https://reference.wolfram.com/language/ref/$CloudBase.html) to use (defaulting to `https://www.wolframcloud.com`)
16 |         * `expr` (a string containing a `Notebook[...]` expression in [InputForm](https://reference.wolfram.com/language/ref/InputForm.html)) *or* `url` (a URL to fetch a notebook file from) *or* `path` (the path of a cloud object in the specified `cloudBase`)
17 | * `domNode`: a DOM node in which to render the notebook, e.g. obtained by `document.getElementById('myContainer')`
18 | * `attributes`: a JavaScript object with attributes
19 | 
20 | A `source` string such as `'https://www.wolframcloud.com/obj/myusername/myfolder/mynotebook.nb'` is equivalent to an object such as
21 | ```json
22 | {"cloudBase": "https://www.wolframcloud.com", "path": "myusername/myfolder/mynotebook.nb"}
23 | ```
24 | where the `cloudBase` and the `path` are determined based on the given string.
25 | 
26 | The following attributes can be given:
27 | 
28 | * `width`: width of the notebook in pixels; a value of `null` (the default) makes the notebook adapt to the width of the container node
29 | * `maxHeight`: maximum height of the notebook in pixels; a value of `Infinity` (the default) allows the notebook to grow infinitely; a value of `null` makes the notebook adapt to the height of the container node
30 | * `showBorder`: whether to show a border around the notebook; the default `null` will take into account a corresponding option of the embedded cloud object
31 | * `allowInteract`: whether to enable interactivity in the notebook, which might use the server-side Wolfram Engine for computations; even if this is set to `true` (the default), the `Permissions` of the cloud notebook must also include `All -> {"Read", "Interact"}` for interactions to actually work
32 | * `showRenderProgress`: whether to show the render progress indicator at the top of the notebook during the initial loading phase (see [Notebook Loading Phases](./NotebookLoadingPhases.md) for more information); the default is `true`
33 | * `useShadowDOM` (experimental): whether to use a shadow DOM container for the notebook; the default is `false` (but might change in a future release after 0.2.x)
34 | 
35 | If the notebook exceeds the given width or height, scrollbars are introduced in that dimension. The default dimensions (`width: null`, `maxHeight: Infinity`) let the notebook adapt to the container node's width (line-wrapping as necessary) and make the container node grow vertically as necessary, so there will not be a vertical scrollbar, and there will only be a horizontal scrollbar if the notebook's contents are inherently wider than the available width (e.g. a graphic with a fixed size). In the case of `maxHeight: null`, the notebook's background will fill out the whole container node even if the notebook content is smaller.
36 | 
37 | The embedded notebook needs to be public (i.e. with [Permissions](https://reference.wolfram.com/language/ref/Permissions.html) of at least `All->"Read"`). For interactivity to work, the `"Interact"` permission is needed.
38 | 
39 | Notebooks on [Wolfram Enterprise Private Cloud (EPC)](https://www.wolfram.com/enterprise-private-cloud/) can be embedded as well, as long as they are public. Just use the cloud object URL pointing to your EPC as the `notebookURL`.
40 | 
41 | The function `embed` returns a `Promise` resolving to an object with various methods to control the notebook, e.g.:
42 | 
43 | * `setAttributes(options)`: changes embedding attributes (except for `allowInteract` and `useShadowDOM`, which cannot be changed dynamically)
44 | * `detach()`: call this function when the embedded notebook is no longer needed, e.g. because the node it is embedded in disappears
45 | * `addEventListener(eventName, callback)`: registers an event listener
46 | * `removeEventListener(eventName, callback)`: unregisters an event listener
47 | * many other notebook-related functions, e.g. `getDimensions()`, `getCells()`, `evaluateExpression(expr)`
48 | 
49 | See the [notebook API documentation](./NotebookAPI.md) for more details about these methods.
50 | 
51 | If something goes wrong while loading the notebook (e.g. because there is no notebook at the given `notebookURL`), the returned promise is rejected.
52 | 


--------------------------------------------------------------------------------
/website/static/img/background.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><style>.iconDetail{fill:#b00f00;}.grayA6{fill:#a6a6a6;}.iconCommon{fill:#fff;}.iconMain{fill:#d10;}.gray89{fill:#898989;}.grayD1{fill:#d1d1d1;}.grayBF{fill:#bfbfbf;}</style></defs><path class="iconDetail" d="M38,73H33.5A5.50654,5.50654,0,0,1,28,67.5v-33A5.50654,5.50654,0,0,1,33.5,29H38v3H33.5A2.50263,2.50263,0,0,0,31,34.5v33A2.50263,2.50263,0,0,0,33.5,70H38Zm34-5.5v-33A5.50654,5.50654,0,0,0,66.5,29H63v3h3.5A2.50263,2.50263,0,0,1,69,34.5v33A2.50263,2.50263,0,0,1,66.5,70H63v3h3.5A5.50654,5.50654,0,0,0,72,67.5ZM39,37H37.5a.5.5,0,0,0-.5.5v1a.5.5,0,0,0,.5.5H39Zm0,4H37.5a.5.5,0,0,0-.5.5v1a.5.5,0,0,0,.5.5H39Zm0,4H37.5a.5.5,0,0,0-.5.5v1a.5.5,0,0,0,.5.5H39Zm0,4H37.5a.5.5,0,0,0-.5.5v1a.5.5,0,0,0,.5.5H39Zm0,4H37.5a.5.5,0,0,0-.5.5v1a.5.5,0,0,0,.5.5H39Zm0,4H37.5a.5.5,0,0,0-.5.5v1a.5.5,0,0,0,.5.5H39Zm0,4H37.5a.5.5,0,0,0-.5.5v1a.5.5,0,0,0,.5.5H39Z"/><path class="grayA6" d="M63,35.47205V64.528A1.47205,1.47205,0,0,1,61.528,66H39.47205A1.47205,1.47205,0,0,1,38,64.528V35.47205A1.47205,1.47205,0,0,1,39.47205,34H61.528A1.47205,1.47205,0,0,1,63,35.47205ZM52.6626,31,55.16449,8.9834a3.00582,3.00582,0,1,0-.994-.1142L51.65558,31Zm18.91357-5.051L88.4425,6.55273a3.05145,3.05145,0,1,0-.75158-.65893L70.75348,25.37189A9.04515,9.04515,0,0,1,71.57617,25.949ZM4,60a3,3,0,1,0,3,3,2.9461,2.9461,0,0,0-.03223-.3194L25,57.58453V56.5459L6.70172,61.71716A2.99233,2.99233,0,0,0,4,60Zm92-2a3.00026,3.00026,0,0,0-2.76068,1.82574L74,55.225v1.02819l19.02,4.54828c-.00446.06684-.02.1305-.02.19849a3,3,0,1,0,3-3ZM83,85a2.97309,2.97309,0,0,0-1.55536.44617l-9.885-11.38275a9.02872,9.02872,0,0,1-.82471.576l9.957,11.46564A2.988,2.988,0,1,0,83,85ZM7,33a3.0351,3.0351,0,1,0-.41071,1.49L25,41.294V40.22772L6.944,33.55487A3.0004,3.0004,0,0,0,7,33Z"/><rect class="iconCommon" x="39" y="35" width="23" height="28" rx="0.90098"/><path class="iconMain" d="M56.53855,48.93811,59,46.17647l-3.61428-.788.36827-3.68112-3.38736,1.487L50.49991,40l-1.86543,3.194-3.38682-1.48776.36744,3.68113-3.6147.7872,2.461,2.76222L42,51.69827l3.61429.78816-.36814,3.68086,3.38721-1.48686,1.86672,3.19431,1.86544-3.19385,3.387,1.48764L55.385,52.48742l3.61461-.7872Zm.65043,1.78361-1.64666-.56324L54.41938,48.699l1.446.53722ZM51.87589,54.1356l-1.01822,1.74949V54.07293l1.05927-1.54824ZM49.48075,45.106,47.7336,44.4847l-1.011-1.365,1.83519.80616Zm2.96246-1.17982,1.83467-.80538-1.01137,1.36387-1.74648.621Zm2.22315,1.61153-.88675,1.25756.05215-1.89611,1.03861-1.4006ZM50.5,53.34442l-1.36076-1.98551L50.5,49.51247l1.36075,1.84644Zm-2.55739-5.653-.06811-2.41078,2.26783.80708v2.3461Zm2.91506-1.6037,2.266-.80708-.0645,2.41078-2.20152.7424Zm-4.52324-.55094L46.131,43.49854l1.03725,1.40051.05213,1.89529Zm3.59849,3.56368-1.36005,1.84547-2.31225-.68161,1.46719-1.90687ZM49.08437,52.524l1.058,1.54895v1.81276l-1.02114-1.75043Zm1.9827-3.42351,2.20512-.743,1.46718,1.90687-2.31225.68161Zm6.61141-2.49475-1.7117,1.92046-2.02069-.75072,1.21227-1.7192Zm-7.17839-5.21624L51.799,43.6121l-1.29884,1.65952-1.298-1.65976Zm-7.17821,5.21461,2.52037-.54888,1.21173,1.72-2.02066.74975Zm1.81261,2.631,1.44671-.53679L45.45773,50.1584,43.81,50.721Zm-1.17074,2.17406,1.71505-.58555,1.83122.53982-1.53257.48486Zm2.35609,1.066,2.0503-.64865.05227,2.18113L46.063,55.04324ZM52.57652,54.008l.05315-2.18147,2.04979.64932.25638,2.56844Zm2.44549-2.1589-1.53275-.48553,1.83181-.54,1.7155.58679ZM39,38H37V36.5a.5.5,0,0,1,.5-.5H39Zm0,4H37V40.5a.5.5,0,0,1,.5-.5H39Zm0,4H37V44.5a.5.5,0,0,1,.5-.5H39Zm0,4H37V48.5a.5.5,0,0,1,.5-.5H39Zm0,4H37V52.5a.5.5,0,0,1,.5-.5H39Zm0,4H37V56.5a.5.5,0,0,1,.5-.5H39Zm0,4H37V60.5a.5.5,0,0,1,.5-.5H39Zm-1,9H33.5A5.50654,5.50654,0,0,1,28,65.5v-33A5.50654,5.50654,0,0,1,33.5,27H38v3H33.5A2.50263,2.50263,0,0,0,31,32.5v33A2.50263,2.50263,0,0,0,33.5,68H38Zm34-5.5v-33A5.50654,5.50654,0,0,0,66.5,27H63v3h3.5A2.50263,2.50263,0,0,1,69,32.5v33A2.50263,2.50263,0,0,1,66.5,68H63v3h3.5A5.50654,5.50654,0,0,0,72,65.5Z"/><path class="gray89" d="M89,22a2.98979,2.98979,0,0,1-5.02051,2.20453L74.8363,31.31586a8.91553,8.91553,0,0,0-.2669-1.05841L83.369,23.41327A2.9664,2.9664,0,0,1,83,22a3,3,0,0,1,6,0Zm7,63a2.97427,2.97427,0,0,0-1.95215.73907L74.59564,69.6698a8.92007,8.92007,0,0,1-.37829.984L93.411,86.50946A2.96914,2.96914,0,0,0,93,88a3,3,0,1,0,3-3ZM25,35.23547l-9.18982-5.21582a3.02865,3.02865,0,1,0-.49664.86872L25,36.38611ZM40.17426,93.23932,45.97064,69H44.94238L39.19849,93.02C39.13165,93.01556,39.068,93,39,93a2.99987,2.99987,0,1,0,1.17426.23932Z"/><path class="grayD1" d="M43,12a3,3,0,1,1,3.80536,2.87671L48.5025,31H47.49744L45.81122,14.981A2.99151,2.99151,0,0,1,43,12ZM25,45.648,13.99548,43.955a3.034,3.034,0,1,0-.16113.98693L25,46.65967ZM56,77c-.03027,0-.05835.008-.08838.00891L54.30988,69H53.29016l1.641,8.20508A2.982,2.982,0,1,0,56,77Z"/><path class="grayBF" d="M32.36884,75.84442l-4.25507,6.028a3.11946,3.11946,0,1,1-.822-.56928l4.03058-5.71A8.93777,8.93777,0,0,0,32.36884,75.84442ZM30.73853,24.621,16.17963,6.05066a3.10134,3.10134,0,1,0-.80121.59918l14.4223,18.396A8.94871,8.94871,0,0,1,30.73853,24.621ZM61.57471,64H39.42529A1.41023,1.41023,0,0,1,39,63.92822V64.087a.913.913,0,0,0,.9129.913H61.0871A.913.913,0,0,0,62,64.087v-.15882A1.41023,1.41023,0,0,1,61.57471,64Z"/></svg>


--------------------------------------------------------------------------------
/website/README.md:
--------------------------------------------------------------------------------
  1 | This website was created with [Docusaurus](https://docusaurus.io/).
  2 | 
  3 | # What's In This Document
  4 | 
  5 | * [Get Started in 5 Minutes](#get-started-in-5-minutes)
  6 | * [Directory Structure](#directory-structure)
  7 | * [Editing Content](#editing-content)
  8 | * [Adding Content](#adding-content)
  9 | * [Full Documentation](#full-documentation)
 10 | 
 11 | # Get Started in 5 Minutes
 12 | 
 13 | 1. Make sure all the dependencies for the website are installed:
 14 | 
 15 | ```sh
 16 | # Install dependencies
 17 | $ yarn
 18 | ```
 19 | 2. Run your dev server:
 20 | 
 21 | ```sh
 22 | # Start the site
 23 | $ yarn start
 24 | ```
 25 | 
 26 | ## Directory Structure
 27 | 
 28 | Your project file structure should look something like this
 29 | 
 30 | ```
 31 | my-docusaurus/
 32 |   docs/
 33 |     doc-1.md
 34 |     doc-2.md
 35 |     doc-3.md
 36 |   website/
 37 |     blog/
 38 |       2016-3-11-oldest-post.md
 39 |       2017-10-24-newest-post.md
 40 |     core/
 41 |     node_modules/
 42 |     pages/
 43 |     static/
 44 |       css/
 45 |       img/
 46 |     package.json
 47 |     sidebar.json
 48 |     siteConfig.js
 49 | ```
 50 | 
 51 | # Editing Content
 52 | 
 53 | ## Editing an existing docs page
 54 | 
 55 | Edit docs by navigating to `docs/` and editing the corresponding document:
 56 | 
 57 | `docs/doc-to-be-edited.md`
 58 | 
 59 | ```markdown
 60 | ---
 61 | id: page-needs-edit
 62 | title: This Doc Needs To Be Edited
 63 | ---
 64 | 
 65 | Edit me...
 66 | ```
 67 | 
 68 | For more information about docs, click [here](https://docusaurus.io/docs/en/navigation)
 69 | 
 70 | ## Editing an existing blog post
 71 | 
 72 | Edit blog posts by navigating to `website/blog` and editing the corresponding post:
 73 | 
 74 | `website/blog/post-to-be-edited.md`
 75 | ```markdown
 76 | ---
 77 | id: post-needs-edit
 78 | title: This Blog Post Needs To Be Edited
 79 | ---
 80 | 
 81 | Edit me...
 82 | ```
 83 | 
 84 | For more information about blog posts, click [here](https://docusaurus.io/docs/en/adding-blog)
 85 | 
 86 | # Adding Content
 87 | 
 88 | ## Adding a new docs page to an existing sidebar
 89 | 
 90 | 1. Create the doc as a new markdown file in `/docs`, example `docs/newly-created-doc.md`:
 91 | 
 92 | ```md
 93 | ---
 94 | id: newly-created-doc
 95 | title: This Doc Needs To Be Edited
 96 | ---
 97 | 
 98 | My new content here..
 99 | ```
100 | 
101 | 1. Refer to that doc's ID in an existing sidebar in `website/sidebar.json`:
102 | 
103 | ```javascript
104 | // Add newly-created-doc to the Getting Started category of docs
105 | {
106 |   "docs": {
107 |     "Getting Started": [
108 |       "quick-start",
109 |       "newly-created-doc" // new doc here
110 |     ],
111 |     ...
112 |   },
113 |   ...
114 | }
115 | ```
116 | 
117 | For more information about adding new docs, click [here](https://docusaurus.io/docs/en/navigation)
118 | 
119 | ## Adding a new blog post
120 | 
121 | 1. Make sure there is a header link to your blog in `website/siteConfig.js`:
122 | 
123 | `website/siteConfig.js`
124 | ```javascript
125 | headerLinks: [
126 |     ...
127 |     { blog: true, label: 'Blog' },
128 |     ...
129 | ]
130 | ```
131 | 
132 | 2. Create the blog post with the format `YYYY-MM-DD-My-Blog-Post-Title.md` in `website/blog`:
133 | 
134 | `website/blog/2018-05-21-New-Blog-Post.md`
135 | 
136 | ```markdown
137 | ---
138 | author: Frank Li
139 | authorURL: https://twitter.com/foobarbaz
140 | authorFBID: 503283835
141 | title: New Blog Post
142 | ---
143 | 
144 | Lorem Ipsum...
145 | ```
146 | 
147 | For more information about blog posts, click [here](https://docusaurus.io/docs/en/adding-blog)
148 | 
149 | ## Adding items to your site's top navigation bar
150 | 
151 | 1. Add links to docs, custom pages or external links by editing the headerLinks field of `website/siteConfig.js`:
152 | 
153 | `website/siteConfig.js`
154 | ```javascript
155 | {
156 |   headerLinks: [
157 |     ...
158 |     /* you can add docs */
159 |     { doc: 'my-examples', label: 'Examples' },
160 |     /* you can add custom pages */
161 |     { page: 'help', label: 'Help' },
162 |     /* you can add external links */
163 |     { href: 'https://github.com/facebook/Docusaurus', label: 'GitHub' },
164 |     ...
165 |   ],
166 |   ...
167 | }
168 | ```
169 | 
170 | For more information about the navigation bar, click [here](https://docusaurus.io/docs/en/navigation)
171 | 
172 | ## Adding custom pages
173 | 
174 | 1. Docusaurus uses React components to build pages. The components are saved as .js files in `website/pages/en`:
175 | 1. If you want your page to show up in your navigation header, you will need to update `website/siteConfig.js` to add to the `headerLinks` element:
176 | 
177 | `website/siteConfig.js`
178 | ```javascript
179 | {
180 |   headerLinks: [
181 |     ...
182 |     { page: 'my-new-custom-page', label: 'My New Custom Page' },
183 |     ...
184 |   ],
185 |   ...
186 | }
187 | ```
188 | 
189 | For more information about custom pages, click [here](https://docusaurus.io/docs/en/custom-pages).
190 | 
191 | # Full Documentation
192 | 
193 | Full documentation can be found on the [website](https://docusaurus.io/).
194 | 


--------------------------------------------------------------------------------
/website/pages/en/examples.js:
--------------------------------------------------------------------------------
  1 | const React = require('react');
  2 | 
  3 | const CompLibrary = require('../../core/CompLibrary.js');
  4 | 
  5 | const Container = CompLibrary.Container;
  6 | const MarkdownBlock = CompLibrary.MarkdownBlock;
  7 | 
  8 | const EXAMPLES = [
  9 |     {
 10 |         title: 'Basic example',
 11 |         description: 'Embed a particular notebook on an HTML page.',
 12 |         html: `<div id="container"></div>`,
 13 |         js: `
 14 | WolframNotebookEmbedder.embed(
 15 |     'https://www.wolframcloud.com/obj/jpoeschko/Public/BasicExample.nb',
 16 |     document.getElementById('container')
 17 | );
 18 |         `
 19 |     },
 20 |     {
 21 |         title: 'Seamless embedding dimensions',
 22 |         description: 'By default, embedded notebooks adapt to the width available to their container node, and adjust the height of the container node so that the whole notebook fits without requiring a vertical scrollbar. You can change that by passing different values for `width` and `maxHeight` to `WolframNotebookEmbedder.embed`, e.g. to set a fixed width and maximum height.',
 23 |         html: `<div id="container"></div>
 24 | <p>This text appears right after the embedded notebook content, even if the notebook does not need the full maximum height.</p>`,
 25 |         js: `
 26 | WolframNotebookEmbedder.embed(
 27 |     'https://www.wolframcloud.com/obj/jpoeschko/Public/BasicExample.nb',
 28 |     document.getElementById('container'),
 29 |     {width: 400, maxHeight: 500}
 30 | ); 
 31 |         `
 32 |     },
 33 |     {
 34 |         title: 'Programmatic control of Manipulate variables',
 35 |         description: 'Render a notebook specified in an input field and control a [Manipulate](https://reference.wolfram.com/language/ref/Manipulate.html) variable in its last cell.',
 36 |         html: `
 37 | <p>
 38 |     Enter the URL of a cloud object:
 39 |     <input id="path" style="width:300px" value="https://www.wolframcloud.com/obj/jpoeschko/Public/Example.nb" />
 40 |     <button onclick="embedNotebook()">Embed Notebook</button>
 41 | </p>
 42 | <p>
 43 |     If the notebook's last cell contains a <code>Manipulate</code> with a variable <code>x</code>, this will reset it to 0:
 44 |     <button onclick="resetX()">Reset <code>x</code></button>
 45 | </p>
 46 | <div id="container"></div>
 47 | `,
 48 |         js: `
 49 | let embedding = null;
 50 | 
 51 | function embedNotebook() {
 52 |     const url = document.getElementById('path').value;
 53 |     embedding = WolframNotebookEmbedder.embed(url, document.getElementById('container'), {allowInteract: true});
 54 | }
 55 | 
 56 | function resetX() {
 57 |     if (embedding) {
 58 |         embedding.then(nb => {
 59 |             nb.getCells().then(({cells}) => {
 60 |                 if (cells) {
 61 |                     const lastCell = cells[cells.length - 1];
 62 |                     return nb.setDynamicModuleVariable({
 63 |                         cellId: lastCell.id,
 64 |                         name: 'x$$',
 65 |                         value: 0
 66 |                     });
 67 |                 }
 68 |             })
 69 |         })
 70 |     }
 71 | }
 72 | `
 73 |     }
 74 | ];
 75 | 
 76 | function Example(props) {
 77 |     // See
 78 |     // https://blog.codepen.io/documentation/prefill-embeds/
 79 |     // https://blog.codepen.io/2019/01/17/introducing-prefill-embeds/
 80 |     // for details about the CodePen Prefill Embed API.
 81 |     const prefill = {
 82 |         title: props.title,
 83 |         description: props.description,
 84 |         tags: ['wolfram', 'notebook', 'embedding', 'wolfram-notebook-embedder'],
 85 |         scripts: ["https://unpkg.com/wolfram-notebook-embedder@0.1/dist/wolfram-notebook-embedder.min.js"]
 86 |     };
 87 |     return (
 88 |         <React.Fragment>
 89 |             <h2>{props.title}</h2>
 90 |             <MarkdownBlock>{props.description}</MarkdownBlock>
 91 |             <div
 92 |                 className="codepen"
 93 |                 data-prefill={JSON.stringify(prefill)}
 94 |                 data-height="400"
 95 |                 data-editable="true"
 96 |                 data-default-tab="js,result"
 97 |             >
 98 |                 <pre data-lang="html">{props.html.trim()}</pre>
 99 |                 <pre data-lang="js">{props.js.trim()}</pre>
100 |             </div>
101 |         </React.Fragment>
102 |     );
103 | }
104 | 
105 | function Help(props) {
106 |     const {config: siteConfig, language = ''} = props;
107 |     const {baseUrl, docsUrl} = siteConfig;
108 |     const docsPart = `${docsUrl ? `${docsUrl}/` : ''}`;
109 |     const langPart = `${language ? `${language}/` : ''}`;
110 |     const docUrl = doc => `${baseUrl}${docsPart}${langPart}${doc}`;
111 |     return (
112 |         <div className="docMainWrapper wrapper">
113 |             <Container className="mainContainer documentContainer postContainer">
114 |                 <div className="post">
115 |                     <header className="postHeader">
116 |                         <h1>Examples</h1>
117 |                     </header>
118 |                     <p>These examples are live demos using the Wolfram Notebook Embedder library.
119 |                         They import the library from a CDN behind the scenes, which exposes the global <code>WolframNotebookEmbedder</code> JavaScript variable.
120 |                         In your own project, you will probably want to install the library using npm or Yarn and import it locally,
121 |                         as described in the <a href={docUrl('GettingStarted')}>Getting Started documentation</a>.</p>
122 |                     {EXAMPLES.map(data => <Example key={data.title} {...data} />)}
123 |                     <script async src="https://static.codepen.io/assets/embed/ei.js"></script>
124 |                 </div>
125 |             </Container>
126 |         </div>
127 |     );
128 | }
129 | 
130 | module.exports = Help;
131 | 


--------------------------------------------------------------------------------
/docs/NotebookAPI-Unsupported.md:
--------------------------------------------------------------------------------
  1 | This is the (unofficial) documentation of Notebook API methods that require an editable document. Consequently, they won't work in notebooks embedded through this Wolfram Notebook Embedder library, since that always gives a read-only view (effectively restricting permissions to `Read` and `Interact`). We still document these methods here to have a single authoritative place for the documentation of the Notebook API in its entirety.
  2 | 
  3 | See [the main notebook API documentation](./NotebookAPI.md) for all methods and events that do work in the context of this library.
  4 | 
  5 | 
  6 | ## Methods
  7 | 
  8 | ### Cell insertion and deletion
  9 | 
 10 | #### insertCellAtCursor
 11 | 
 12 | Creates a new cell at the cursor position. If the cursor is within a cell, the new cell is created after that cell. If one or more cells (cell brackets) are selected, the cell is created before the first selected cell.
 13 | 
 14 | The cursor is placed at the end of the new cell.
 15 | 
 16 | + Parameters
 17 | 
 18 |     + `style` = `"Input"` (optional, `string`) ... Style of the new cell.
 19 |     + `content` = `""` (optional, `string`) ... Textual content to populate the new cell with.
 20 | 
 21 | + Response
 22 | 
 23 |     + `cellId` (`string`) ... The ID of the created cell. That ID can be used in subsequent API calls.
 24 | 
 25 | + Errors
 26 | 
 27 |     + `"InsufficientPermissions"`
 28 | 
 29 | Example request:
 30 | 
 31 |     {
 32 |         "api": "notebook",
 33 |         "version": 1,
 34 |         "rid": "1",
 35 |         "command": "createCell"
 36 |     }
 37 | 
 38 | Example response:
 39 | 
 40 |     {
 41 |         "rid": "1",
 42 |         "success": true,
 43 |         "cellId": "1"
 44 |     }
 45 | 
 46 | #### insertCellBefore
 47 | 
 48 | Creates a new cell before another given cell.
 49 | 
 50 | The cursor is placed at the end of the new cell.
 51 | 
 52 | + Parameters
 53 | 
 54 |     + `style` = `"Input"` (optional, `string`) ... Style of the new cell.
 55 |     + `cellId` = `null` (optional, `?string`) ... ID of the successor of the new cell. If set to `null` (the default), the cell is inserted at the end of the notebook.
 56 |     + `content` = `""` (optional, `string`) ... Textual content to populate the new cell with.
 57 | 
 58 | + Response
 59 | 
 60 |     + `cellId` (`string`) ... The ID of the created cell. That ID can be used in subsequent API calls.
 61 | 
 62 | + Errors
 63 | 
 64 |     + `"CellNotFound"` ... The cell ID given by `cellId` was not found.
 65 |     + `"InsufficientPermissions"`
 66 |     
 67 | #### removeCell
 68 | 
 69 | Removes a cell from the notebook.
 70 | 
 71 | + Parameters
 72 | 
 73 |     + `cellId` (`string`) ... ID of the cell to remove.
 74 | 
 75 | + Errors
 76 | 
 77 |     + `"CellNotFound"` ... The cell ID given by `cellId` was not found.
 78 |     + `"InsufficientPermissions"`
 79 | 
 80 | ### Cell content
 81 | 
 82 | #### setCellContent
 83 | 
 84 | Sets the content of a cell.
 85 | 
 86 | + Parameters
 87 | 
 88 |     + `cellId` (`string`) ... ID of the cell to modify.
 89 |     + `content` (`string`) ... New textual content of the cell.
 90 | 
 91 | ### Formatting
 92 | 
 93 | #### setPrimaryCellStyle
 94 | 
 95 | Sets the primary style of a cell. [Cloud 1.56]
 96 | 
 97 | + Parameters
 98 | 
 99 |     + `cellId` (`string`) — ID of the cell.
100 |     + `style` (`string`) — Primary style name of the cell.
101 | 
102 | + Errors
103 | 
104 |     + `"CellNotFound"` — The specified cell does not exist.
105 | 
106 | #### setElementOptions
107 | 
108 | Sets options of a cell, group or the notebook. [Cloud 1.56]
109 | 
110 | + Parameters
111 | 
112 |     + `id` (`?string`) — ID of the cell or group. If the parameter is omitted, the notebook is taken.
113 |     + `options` (`Object.<string, exprjson>`) — Dictionary of option names and their respective (expression) values.
114 | 
115 | + Errors
116 | 
117 |     + `"ElementNotFound"` — The specified element does not exist.
118 | 
119 | #### setSelectionOptions
120 | 
121 | Sets options of the current selection. [Cloud 1.56]
122 | 
123 | + Parameters
124 | 
125 |     + `options` (`Object.<string, exprjson>`) — Dictionary of option names and their respective (expression) values.
126 | 
127 | Example request:
128 | 
129 | ```json
130 | {
131 |     "api": "notebook",
132 |     "version": 1,
133 |     "rid": "1",
134 |     "command": "setSelectionOptions",
135 |     "options": {
136 |         "FontWeight": "Bold",
137 |         "FontSize": 20,
138 |         "FontFamily": "\"Arial\"",
139 |         "FontColor": ["RGBColor", 1, 1, 0]
140 |     }
141 | }
142 | ```
143 | 
144 | ### Evaluation
145 | 
146 | #### evaluateCell
147 | 
148 | Evaluates a cell (the same way as pressing `Shift-Enter` would).
149 | 
150 | The API responds as soon as the evaluation is initiated.
151 | 
152 | + Parameters
153 | 
154 |     + `cellId` (`string`) ... ID of the cell to read.
155 | 
156 | + Errors
157 | 
158 |     + `"CellNotFound"` ... The cell ID given by `cellId` was not found.
159 |     + `"InsufficientPermissions"`
160 |     
161 | #### evaluateElements
162 | 
163 | Evaluates a list of elements (cells or groups) in the order they appear in the notebook (the same way as pressing `Shift-Enter` would).
164 | 
165 | The API responds as soon as the evaluation is initiated.
166 | 
167 | + Parameters
168 | 
169 |     + `elements` (`Array.<{id: string}>`) ... List of IDs of elements to evaluate. Elements that cannot be found are ignored.
170 |     
171 | + Errors
172 | 
173 |     + `"InsufficientPermissions"`
174 | 
175 | #### evaluateSelection
176 | 
177 | Evaluates selected elements (the same way as pressing `Shift-Enter` would).
178 | 
179 | The API responds as soon as the evaluation is initiated.
180 | 
181 | + Errors
182 | 
183 |     + `"InsufficientPermissions"`
184 | 
185 | #### abortEvaluation
186 | 
187 | Aborts any currently running kernel evaluation.
188 | 
189 | #### isEvaluatable
190 | 
191 | Checks if a cell is evaluatable.
192 | 
193 | + Parameters
194 | 
195 |     + `cellId` (`string`) ... ID of the cell to check.
196 | 
197 | + Response
198 | 
199 |     + `isEvaluatable` (`boolean`) ... Whether the cell is evaluatable.
200 | 


--------------------------------------------------------------------------------
/website/static/img/scriptable-control.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 60"><defs><style>.grayD1{fill:#d1d1d1;}.iconCommon{fill:#fff;}.gray64{fill:#646464;}.gray89{fill:#898989;}.iconAccent{fill:#23b5ff;}.iconMain{fill:#d10;}.grayBF{fill:#bfbfbf;}</style></defs><path class="grayD1" d="M99,56H56V4H99Z"/><rect class="iconCommon" x="57" y="5" width="41" height="50"/><path class="gray64" d="M75.68359,30.04639c.65332-2.04053,1.32813-4.15039,2.67774-4.75586,3.73633-1.67383,9.49512,9.42968,9.55273,9.542l.17188-.08789A45.35933,45.35933,0,0,0,84.68359,29.29c-2.60156-3.50733-4.75879-4.91553-6.40039-4.17529-1.42871.64062-2.11718,2.792-2.7832,4.873a14.25218,14.25218,0,0,1-1.61353,3.80695c-.07086-.03607-.13977-.06622-.21362-.11115L73.583,33.832c.06659.04059.12878.06622.19336.1001-.04126.05194-.08124.10651-.12409.15485a3.77413,3.77413,0,0,1-1.09564-.5738l-.10352.14453a4.02612,4.02612,0,0,0,1.0763.56849c-.0332.03332-.07123.056-.10541.08715a4.1298,4.1298,0,0,1-1.98653-.97155l-.11131.14355a4.52761,4.52761,0,0,0,1.92291.9726c-.0213.01623-.04089.03637-.06262.05182a4.54041,4.54041,0,0,1-2.87-1.34034l-.11719.14356a5.44864,5.44864,0,0,0,2.61041,1.366c-.94641.13165-2.12756-.41626-3.61334-1.682l-.12305.14355a6.23077,6.23077,0,0,0,3.26,1.725c-1.08954.179-2.4823-.48755-4.258-2.04138l-.127.14453c1.62891,1.42578,2.96,2.12744,4.04492,2.12744a2.27428,2.27428,0,0,0,.61231-.08154,2.142,2.142,0,0,0,.4154-.18353c.02735-.00641.05768-.00379.0846-.0113a1.99117,1.99117,0,0,0,.37927-.16717c.03992-.00842.08161-.0108.12073-.02179a1.84344,1.84344,0,0,0,.38428-.16925c.03674-.00794.07769-.00159.11377-.0119a1.68255,1.68255,0,0,0,.332-.147,1.55592,1.55592,0,0,0,.16412-.02142,1.49566,1.49566,0,0,0,.20306-.09143,1.3166,1.3166,0,0,0,.295-.0531c.019-.00617.03534-.01825.054-.02521.95392.05744,1.49426-1.12042,2.02027-2.26385.48535-1.05567.9873-2.14746,1.79492-2.33789.665-.15918,1.541.42334,2.32715,1.55712.89941,1.29541,1.36914,2.8252,1.02441,3.33985l.14258.09472c.43164-.64648-.19727-2.33642-1.02735-3.53173-.83984-1.21143-1.75-1.80127-2.50586-1.626-.88867.21-1.4082,1.33984-1.91015,2.43262-.421.91662-.82843,1.78686-1.4148,2.06408a6.4718,6.4718,0,0,0,1.37769-2.36779c.499-1.18262,1.01465-2.40577,1.88769-2.666.77539-.23242,1.80664.41992,2.82032,1.79346,1.17187,1.58691,1.83886,3.4497,1.56347,3.86133l.14453.09668c.38282-.57227-.52832-2.65332-1.56836-4.06153-.62207-.84375-1.83691-2.2041-3.01074-1.85693-.95117.28418-1.48242,1.54541-1.99707,2.76514a5.45733,5.45733,0,0,1-1.50708,2.43682,7.94369,7.94369,0,0,0,1.43286-2.68634c.52344-1.33838,1.06446-2.72265,2.02149-3.05224,1.20019-.41016,2.58105,1.08154,3.29687,2.00879,1.39942,1.81347,2.34375,4.07031,2.1211,4.40429l.14843.09864c.31543-.47364-.79882-2.88721-2.1289-4.61182-1.28711-1.666-2.52149-2.40527-3.4961-2.06787-1.03418.35644-1.59082,1.7793-2.1289,3.15576a6.449,6.449,0,0,1-1.61389,2.80286l-.00049-.00013a9.11382,9.11382,0,0,0,1.52746-3.03027c.55274-1.50683,1.124-3.06494,2.17383-3.46338,1.127-.42627,2.42481.67871,3.31543,1.68164,1.9043,2.14405,3.27637,5.22168,3.13574,5.48975l.07618.0498.07519.0503c.25586-.38184-1.14258-3.2168-2.69043-5.16114-1.05664-1.32812-2.60351-2.80078-3.97656-2.28027-1.127.42822-1.71289,2.02588-2.28027,3.5708a7.38715,7.38715,0,0,1-1.73786,3.18683A10.15654,10.15654,0,0,0,76.22852,30.584c.585-1.68164,1.18945-3.41992,2.33691-3.8872a2.58526,2.58526,0,0,1,2.543.71191,19.464,19.464,0,0,1,4.93652,7.2334l.085.03467.07715.05127c.209-.313-1.51074-3.57373-3.26465-5.72266-1.7207-2.10791-3.25976-2.96435-4.44726-2.48047-1.22461.499-1.84375,2.27783-2.44141,3.99805a9.28557,9.28557,0,0,1-1.71136,3.45154c-.01276-.00324-.02637-.0091-.03925-.01264A12.0728,12.0728,0,0,0,75.957,30.3125c.61817-1.86035,1.25781-3.78369,2.50586-4.31885a2.35031,2.35031,0,0,1,2.14356.29688c3.042,1.748,6.32031,8.06347,6.36523,8.437l.09277.00537.07813.05273c.14355-.21435-1.85938-3.90771-3.8457-6.293-1.94727-2.33887-3.59961-3.23682-4.90821-2.67286-1.32619.56836-1.97949,2.53321-2.61133,4.43311a11.554,11.554,0,0,1-1.66681,3.647c-.016-.00628-.03076-.00836-.047-.01513A14.60082,14.60082,0,0,0,75.68359,30.04639ZM73.9931,34.04431c-.03015.03143-.06372.055-.09478.08447l-.03028-.00512c.02777-.03333.05573-.06641.08283-.1012C73.9646,34.02856,73.97943,34.03857,73.9931,34.04431Zm7.02936-2.618c.58887.93311.99707,2.27588.501,3.01807l-.13867-.09278c.43457-.65039.07617-1.91894-.50293-2.83642-.5586-.88623-1.25293-1.38233-1.81936-1.30176-.80467.11719-1.34471,1.22754-1.82127,2.20752-.43555.89453-.81055,1.66748-1.35156,1.76367l-.0293-.16406c.457-.08155.833-.85449,1.23145-1.67237.49414-1.01709,1.05566-2.16992,1.94726-2.2998C79.67969,29.957,80.41992,30.47217,81.02246,31.42627Zm-.43652.42139a2.49694,2.49694,0,0,1,.001,2.54l-.13476-.09082a2.33777,2.33777,0,0,0-.00977-2.37256A1.67561,1.67561,0,0,0,79.1582,30.9165h-.00293c-1.19824.0044-1.98828,2.19239-2.07617,3.36426L76.917,34.269c.0918-1.22461.94043-3.51074,2.23828-3.51562h.00293A1.80634,1.80634,0,0,1,80.58594,31.84766Zm-.7334-.06006c.20994.21191.81445,1.02-.20215,2.54345l-.13281-.08886c.6416-.96.72461-1.83545.22168-2.34229a1.06476,1.06476,0,0,0-1.335-.1499c-.63184.41455-.709,1.41162-.208,2.66748l-.14844.05859c-.78711-1.97265.00684-2.687.26953-2.85888A1.22539,1.22539,0,0,1,79.85254,31.7876Z"/><path class="gray89" d="M80.18372,40H68V38H80.18372a2.81339,2.81339,0,0,0,0,2Zm5.63256-2a2.81339,2.81339,0,0,1,0,2H88V38ZM68,43v2h2.18372a2.81339,2.81339,0,0,1,0-2Zm8,1a2.97194,2.97194,0,0,1-.18372,1H88V43H75.81628A2.97194,2.97194,0,0,1,76,44Z"/><path class="iconAccent" d="M13,9h7v2H13Zm53,5H76V12H66Zm8,1H73v4H71l2.5,3L76,19H74Zm6-3v2H90V12Zm2.5,3L80,18h2v4h1V18h2Z"/><path class="iconMain" d="M85,39a2,2,0,1,1-2-2A2,2,0,0,1,85,39ZM73,42a2,2,0,1,0,2,2A2,2,0,0,0,73,42ZM63,25V48a2.00229,2.00229,0,0,0,2,2h2V49H65a1.001,1.001,0,0,1-1-1V25a1.001,1.001,0,0,1,1-1h2V23H65A2.00229,2.00229,0,0,0,63,25Zm28-2H89v1h2a1.001,1.001,0,0,1,1,1V48a1.001,1.001,0,0,1-1,1H89v1h2a2.00229,2.00229,0,0,0,2-2V25A2.00229,2.00229,0,0,0,91,23ZM13,19H39V17H13Z"/><path class="grayBF" d="M13,33h2v2H13ZM10,15h4V13H10ZM30,43h4V41H30ZM22,31V29H20v2ZM20,21H13v2h7ZM13,31h5V29H13Zm4,6H13v2h4ZM22,9v2h4V9Zm6,32H23v2h5ZM34,9H28v2h6Zm1-4H29V7h6ZM23,33H21v2h2ZM37,15V13H33v2ZM26,29H24v2h2ZM27,5H23V7h4Zm0,28H25v2h2Zm4-20H16v2H31ZM17,35h2V33H17Zm13-6H28v2h2Zm-4-8H22v2h4ZM13,27h3V25H13ZM11,55H23V53H11ZM9,59h2V57H9ZM5,55H9V53H5Zm10-6H13v2h2Zm10,6h2V53H25ZM5,59H7V57H5ZM19,39H31V37H19Zm2,12H34V49H21ZM33,37v2h2V37Zm3,6h7V41H36ZM7,1H5V3H7ZM21,41H13v2h8ZM1,59H3V57H1ZM13,5H5V7h8ZM5,11h6V9H5ZM11,1H9V3h2ZM21,5H15V7h6ZM11,49H5v2h6ZM3,1H1V3H3ZM25,45H10v2H25Zm-6,6V49H17v2Z"/><path class="iconMain" d="M58.53418,34.87909,51.5387,31.04523l.0448,2.007a23.95344,23.95344,0,0,1-5.00055-.50989,23.79847,23.79847,0,0,1-6.043-2.08209,14.50147,14.50147,0,0,1-4.957-3.99244,11.45069,11.45069,0,0,1-2.28638-6.09075,11.96974,11.96974,0,0,0,1.44659,6.63366,15.98157,15.98157,0,0,0,4.74628,5.15143,26.27075,26.27075,0,0,0,6.2608,3.26233A26.84493,26.84493,0,0,0,51.669,36.87793l.04785,2.14343Z"/></svg>


--------------------------------------------------------------------------------
/docs/ServerSideRendering.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | id: ServerSideRendering
 3 | title: Server-Side Rendering
 4 | ---
 5 | 
 6 | In some cases, you might want to include (static) HTML for a notebook on the HTML page rendered by your server so it can be shown even before the necessary JavaScript code is loaded and executed. This reduces the time until the user sees the notebook, and it also helps search engines to index your notebook content. Once your JavaScript code executes, you can use the function [WolframNotebookEmbedder.embed](./LibraryInterface.md) as usual to embed the notebook into the same container node, and it will transition seamlessly from the static view to "live" (interactive) rendering. The same happens on [wolframcloud.com](https://www.wolframcloud.com) as well.
 7 | 
 8 | Static HTML is generated ("pre-rendered") for each cloud notebook whenever it is created or changed. You can access it through an HTTP API, by making a `GET` request to
 9 | 
10 |     https://www.wolframcloud.com/statichtml/{path}
11 |     
12 | where `{path}` is the notebook's cloud object path, which might be a UUID (e.g. `4beadfbb-84dd-4b26-87b6-bcd30b9abd65` for a cloud object at `https://www.wolframcloud.com/obj/4beadfbb-84dd-4b26-87b6-bcd30b9abd65`) or a user base URL + folder/file name (e.g. `myname/foo/bar.nb` for a cloud object at `https://www.wolframcloud.com/obj/myname/foo/bar.nb`).
13 | 
14 | This API returns a piece of static HTML that can be included right on your page by your server-side code. You might want to cache the response from the `/statichtml` API on your server, so you don't have to request it whenever a user visits your website.
15 | 
16 | ## How to integrate this API into your website or application
17 | 
18 | A typical sequence of events would be:
19 | 
20 | 1. A user makes a request to your server to open your website, which includes an embedded notebook.
21 | 2. Your server makes a request to `https://www.wolframcloud.com/statichtml/{path}` to fetch the static HTML for the embedded notebook, or it uses an existing cache for that static HTML.
22 | 3. Your server returns an HTML page to the user, which includes the static HTML of the notebook inside the HTML element where the notebook is supposed to be embedded.
23 | 4. In your JavaScript code, you call `WolframNotebookEmbedder.embed` to embed the notebook into the same HTML element, which causes the notebook to "live-render" on the client side. See [Notebook Loading Phases](./NotebookLoadingPhases.md) for more information about what happens then.
24 | 
25 | To summarize:
26 | 
27 |                  Wolfram Cloud
28 |                      ^   |
29 |                      |   | static HTML for notebook
30 |      /statichtml API |   |
31 |                      |   v
32 |                   Your server
33 |                      ^   |
34 |                      |   | your website including static notebook HTML
35 |              request |   | and JS code using WolframNotebookEmbedder
36 |                      |   v
37 |               User of your website
38 |       
39 | 
40 | If you do not have active code running on your server but just a static HTML page, you could also use this API to generate HTML for the notebook once and then include that right in your static HTML. The downsides of this approach are that the HTML will not automatically update if the notebook is changed, and it will not be kept in sync with newer Wolfram Cloud versions (potentially resulting in rendering inconsistencies).
41 | 
42 | ## Parameters
43 | 
44 | ### Waiting for HTML to be available using `maxwaitmillis`
45 | 
46 | Sometimes, there might be no HTML for a notebook available yet, e.g. when it has just been edited and the cloud server has not had a chance to pre-render it yet. In that case, the API will return an empty response. However, you can tell the API to wait up to a certain time and return static HTML once it becomes available. That's what the query parameter `maxwaitmillis` is for, e.g.
47 | 
48 |     https://www.wolframcloud.com/statichtml/4beadfbb-84dd-4b26-87b6-bcd30b9abd65?maxwaitmillis=500
49 |     
50 | would wait up to 500 milliseconds in case there is no HTML available yet and return once it becomes available. If the cloud server has not finished generating HTML after half a second, the API will return an empty response.
51 | 
52 | The maximum accepted value for `maxwaitmillis` is 20,000 (20 seconds). Typically, using rather low values (not longer than 1 second) is recommended, since this would delay the initial response from your server (while it is waiting for the cloud server to return HTML) and thus the loading of the whole page.
53 | 
54 | ### Specifying a notebook width using `width`
55 | 
56 | Parts of the static HTML might depend on the page width, e.g. to determine where to line-wrap code cells. Since the page width is not usually known on the server, it can only assume a certain notebook width and return HTML for that, which will cause text to reflow on the client side (once the actual page width is known and "live" rendering kicks in). If you do know the notebook width in advance (e.g. because you are embedding the notebook at a fixed width), you can request HTML for that particular width using the `width` parameter to the API, e.g. 
57 | 
58 |     https://www.wolframcloud.com/statichtml/4beadfbb-84dd-4b26-87b6-bcd30b9abd65?width=700
59 |     
60 | would request HTML for a notebook width of 700 pixels. There is no guarantee that you get HTML for *exactly* that width, but the API will choose the best match out of the available pre-rendered HTML.
61 | 
62 | ### Only including limited cell content using `limitcontent`
63 | 
64 | By default, the content of all visible cells in the notebook is included in the returned static HTML. This is usually fine if the notebook is not too long and is shown in its entirety on the embedding website anyway.
65 | 
66 | However, it can be a significant overhead for long notebooks, both in terms of assembling the static HTML on the cloud server (resulting in a longer response time for the `/statichtml` API) and in terms of longer download times for the client (resulting in a longer time to first paint for the viewer). To address this, you can set the parameter `limitcontent=true` to limit the content that is included in the static HTML.
67 | 
68 | If this parameter is set to `true`, only cells "above the fold" (i.e. vertically within a few thousand pixels from the notebook start) are included, plus some other simple, textual cells that do not increase the overall size of the static HTML by much. Other cells are only included as empty placeholders. At the bottom of the notebook (below any non-placeholder cell), a special background is used to indicate that the content there is no available (yet).
69 | 
70 | Once client-side rendering of the notebook starts, the static HTML for all placeholder cells will be fetched asynchronously, which is used until the client-side rendering of each cell completes.
71 | 
72 | This limited initial static HTML is what effectively happens for notebooks on [wolframcloud.com](https://www.wolframcloud.com).
73 | 
74 | This parameter is introduced in Cloud 1.56.
75 | 


--------------------------------------------------------------------------------
/website/pages/en/index.js:
--------------------------------------------------------------------------------
  1 | const React = require('react');
  2 | 
  3 | const CompLibrary = require('../../core/CompLibrary.js');
  4 | 
  5 | const MarkdownBlock = CompLibrary.MarkdownBlock; /* Used to read markdown */
  6 | const Container = CompLibrary.Container;
  7 | const GridBlock = CompLibrary.GridBlock;
  8 | 
  9 | function docUrl(siteConfig, doc) {
 10 |     const {baseUrl, docsUrl} = siteConfig;
 11 |     const docsPart = `${docsUrl ? `${docsUrl}/` : ''}`;
 12 |     // const langPart = `${language ? `${language}/` : ''}`;
 13 |     const langPart = '';
 14 |     return `${baseUrl}${docsPart}${langPart}${doc}`;
 15 | }
 16 | 
 17 | function pageUrl(siteConfig, doc) {
 18 |     const {baseUrl} = siteConfig;
 19 |     // const langPart = (language ? `${language}/` : '');
 20 |     const langPart = '';
 21 |     return baseUrl + langPart + doc;
 22 | }
 23 | 
 24 | class HomeSplash extends React.Component {
 25 |   render() {
 26 |     const {siteConfig} = this.props;
 27 |     const {baseUrl} = siteConfig;
 28 | 
 29 |     const SplashContainer = props => (
 30 |       <div className="homeContainer">
 31 |         <div className="homeSplashFade">
 32 |           <div className="wrapper homeWrapper">{props.children}</div>
 33 |         </div>
 34 |       </div>
 35 |     );
 36 | 
 37 |     const ProjectTitle = () => (
 38 |       <h2 className="projectTitle">
 39 |         {siteConfig.title}
 40 |         <small>{siteConfig.tagline}</small>
 41 |       </h2>
 42 |     );
 43 | 
 44 |     const PromoSection = props => (
 45 |       <div className="section promoSection">
 46 |         <div className="promoRow">
 47 |           <div className="pluginRowBlock">{props.children}</div>
 48 |         </div>
 49 |       </div>
 50 |     );
 51 | 
 52 |     const PrimaryButton = props => (
 53 |       <div className="pluginWrapper buttonWrapper">
 54 |         <a className="button primary" href={props.href} target={props.target}>
 55 |           {props.children}
 56 |         </a>
 57 |       </div>
 58 |     );
 59 | 
 60 |     return (
 61 |       <SplashContainer>
 62 |         <div className="inner">
 63 |           <ProjectTitle siteConfig={siteConfig} />
 64 |           <PromoSection>
 65 |             <PrimaryButton href={docUrl(siteConfig,'GettingStarted')}>Get Started</PrimaryButton>
 66 |           </PromoSection>
 67 |           <img className="heroImage" src={`${baseUrl}img/hero.png`} alt="Wolfram Notebook Embedder workflow" />
 68 |         </div>
 69 |       </SplashContainer>
 70 |     );
 71 |   }
 72 | }
 73 | 
 74 | class Index extends React.Component {
 75 |   render() {
 76 |     const {config: siteConfig, language = ''} = this.props;
 77 |     const {baseUrl} = siteConfig;
 78 | 
 79 |     const Block = props => (
 80 |       <Container
 81 |         padding={[]}
 82 |         id={props.id}
 83 |         background={props.background}>
 84 |         <GridBlock
 85 |           align={props.align || 'center'}
 86 |           contents={props.children}
 87 |           layout={props.layout}
 88 |         />
 89 |       </Container>
 90 |     );
 91 | 
 92 |     // const FeatureCallout = () => (
 93 |     //   <div
 94 |     //     className="productShowcaseSection paddingBottom"
 95 |     //     style={{textAlign: 'center'}}>
 96 |     //     <h2>Feature Callout</h2>
 97 |     //     <MarkdownBlock>
 98 |     //     </MarkdownBlock>
 99 |     //   </div>
100 |     // );
101 | 
102 |     // const TryOut = () => (
103 |     //   <Block id="try">
104 |     //     {[
105 |     //       {
106 |     //         content:
107 |     //           'To make your landing page more attractive, use illustrations! Check out ' +
108 |     //           '[**unDraw**](https://undraw.co/) which provides you with customizable illustrations which are free to use. ' +
109 |     //           'The illustrations you see on this page are from unDraw.',
110 |     //         image: `${baseUrl}img/undraw_code_review.svg`,
111 |     //         imageAlign: 'left',
112 |     //         title: 'Wonderful SVG Illustrations',
113 |     //       },
114 |     //     ]}
115 |     //   </Block>
116 |     // );
117 | 
118 |     const Description = () => (
119 |       <Block background="light" align="left" id="background">
120 |         {[
121 |           {
122 |             content:
123 |               'Wolfram Notebook Embedder takes a public notebook in the [Wolfram Cloud](https://wwww.wolframcloud.com) and renders it into a given DOM node. ' +
124 |               'It automatically fetches all required dependencies, such as further scripts, styles and fonts. ' +
125 |               'The library and any additional notebook resources only need to be fetched, even if you embed multiple notebooks on a single page.',
126 |             image: `${baseUrl}img/background.svg`,
127 |             imageAlign: 'right',
128 |             title: 'How It Works'
129 |           },
130 |         ]}
131 |       </Block>
132 |     );
133 | 
134 |     const QuickStart = () => (
135 |         <Block align="left">
136 |             {[
137 |                 {
138 |                     content: `
139 | Import the library from a CDN using a \`<script>\` tag such as
140 | \`\`\`html
141 | <script crossorigin src="https://unpkg.com/wolfram-notebook-embedder@0.1/dist/wolfram-notebook-embedder.min.js"></script>
142 | \`\`\`
143 | or install it in your JavaScript project using
144 | \`\`\`bash
145 | npm install wolfram-notebook-embedder
146 | \`\`\`
147 | in order to import it:
148 | \`\`\`js
149 | import WolframNotebookEmbedder from 'wolfram-notebook-embedder';
150 | \`\`\`
151 | Then you can call \`WolframNotebookEmbedder.embed\` to embed a public cloud notebook into a given DOM node.
152 | `,
153 |                     title: 'Quick Start'
154 |                 }
155 |             ]}
156 |         </Block>
157 |     );
158 | 
159 |     // const LearnHow = () => (
160 |     //   <Block background="light">
161 |     //     {[
162 |     //       {
163 |     //         content:
164 |     //           'Each new Docusaurus project has **randomly-generated** theme colors.',
165 |     //         image: `${baseUrl}img/undraw_youtube_tutorial.svg`,
166 |     //         imageAlign: 'right',
167 |     //         title: 'Randomly Generated Theme Colors',
168 |     //       },
169 |     //     ]}
170 |     //   </Block>
171 |     // );
172 | 
173 |     const Features = () => (
174 |       <Block layout="fourColumn" align="left">
175 |         {[
176 |           {
177 |             content: 'Embed [notebooks](http://www.wolfram.com/notebooks/) on your site more seamlessly than what would be possible with iframes. An embedded notebook\'s dimensions can grow as large as necessary, or you can constrain its width and height as you wish.',
178 |             image: `${baseUrl}img/seamless-embedding.svg`,
179 |             imageAlign: 'top',
180 |             title: 'Seamless Embedding',
181 |           },
182 |           {
183 |             content: 'Control the notebook through an extensive JavaScript API. You can, for instance, change the value of a [Manipulate](https://reference.wolfram.com/language/ref/Manipulate.html) variable, open and close cell groups or evaluate [Wolfram Language](https://www.wolfram.com/language/) expressions from your JavaScript code.',
184 |             image: `${baseUrl}img/scriptable-control.svg`,
185 |             imageAlign: 'top',
186 |             title: 'Scriptable Control',
187 |           },
188 |         ]}
189 |       </Block>
190 |     );
191 | 
192 |     const ViewExamples = () => (
193 |       <div className="mainLink">
194 |         <a href={pageUrl(siteConfig, 'examples')}>View Examples »</a>
195 |       </div>
196 |     );
197 | 
198 |     const FullDocumentation = () => (
199 |       <div className="mainLink">
200 |         <a href={docUrl(siteConfig,'LibraryInterface')}>Full Documentation »</a>
201 |       </div>
202 |     );
203 | 
204 |     // const Showcase = () => {
205 |     //   if ((siteConfig.users || []).length === 0) {
206 |     //     return null;
207 |     //   }
208 |     //
209 |     //   const showcase = siteConfig.users
210 |     //     .filter(user => user.pinned)
211 |     //     .map(user => (
212 |     //       <a href={user.infoLink} key={user.infoLink}>
213 |     //         <img src={user.image} alt={user.caption} title={user.caption} />
214 |     //       </a>
215 |     //     ));
216 |     //
217 |     //   const pageUrl = page => baseUrl + (language ? `${language}/` : '') + page;
218 |     //
219 |     //   return (
220 |     //     <div className="productShowcaseSection paddingBottom">
221 |     //       <h2>Who Is Using This?</h2>
222 |     //       <p>Notebooks are embedded on all these sites:</p>
223 |     //       <div className="logos">{showcase}</div>
224 |     //       <div className="more-users">
225 |     //         <a className="button" href={pageUrl('users.html')}>
226 |     //           More {siteConfig.title} Users
227 |     //         </a>
228 |     //       </div>
229 |     //     </div>
230 |     //   );
231 |     // };
232 | 
233 |     return (
234 |       <div>
235 |         <HomeSplash siteConfig={siteConfig} language={language} />
236 |         <div className="mainContainer">
237 |           <Features />
238 |           <ViewExamples />
239 |           {/*<FeatureCallout />*/}
240 |           {/*<LearnHow />*/}
241 |           {/*<TryOut />*/}
242 |           <Description />
243 |           <QuickStart />
244 |           <FullDocumentation />
245 |           {/*<Showcase />*/}
246 |         </div>
247 |       </div>
248 |     );
249 |   }
250 | }
251 | 
252 | module.exports = Index;
253 | 


--------------------------------------------------------------------------------
/docs/NotebookAPI-Internal.md:
--------------------------------------------------------------------------------
  1 | This is the (unofficial) documentation of some *internal* Notebook API methods and events. **Do not rely on these in production code.** We still document these methods here to have a single authoritative place for the documentation of the Notebook API in its entirety.
  2 | 
  3 | See [the main notebook API documentation](./NotebookAPI.md) for all methods and events that do work in the context of this library.
  4 | 
  5 | 
  6 | ## Methods
  7 | 
  8 | ### Selection
  9 | 
 10 | #### moveSelection [INTERNAL]
 11 | 
 12 | Moves the selection in the given direction.
 13 | 
 14 | Depending on the current selection (cell bracket or separator), the selection will be moved differently.
 15 | 
 16 | | Direction  | Bracket selected | Separator selected | Corresponds to |
 17 | |------------|------------------|--------------------|----------------|
 18 | | `up`       | separator above  | cell bracket above | Up button in mobile app   |
 19 | | `down`     | separator below  | cell bracket below | Down button in mobile app |
 20 | | `previous` | cell bracket above | start of line above | Up key   |
 21 | | `next`     | cell bracket below | start of line below | Down key |
 22 | | `left`     | end of content of the selected cell (if editable)   | end of content of cell above   | Left key  |
 23 | | `right`    | start of content of the selected cell (if editable) | start of content of cell below | Right key |
 24 | | `in`       | first cell bracket contained in the selected cell group (if a cell group is selected) | (not possible) | Left button in mobile app  |
 25 | | `out`      | cell bracket of the parent group (if any)                                             | (not possible) | Right button in mobile app |
 26 | 
 27 | If the selection is within a cell, the behavior is undefined in terms of this API (for now).
 28 | 
 29 | + Parameters
 30 | 
 31 |     + `direction` (`"up"|"down"|"left"|"right"|"previous"|"next"|"in"|"out"`) ... Direction to move the selection in.
 32 | 
 33 | + Response
 34 | 
 35 |     + `directions` (`Array.<string>`) ... New list of possible directions after the move (cf. `canMoveSelection`).
 36 |     + `elements` (`Array.<{type: "cell"|"group", id: string}>`) ... New list of selected elements (cf. `getSelection`).
 37 |     + `separator` (`?{cellBefore: ?{cellId: string}, cellAfter: ?{cellId: string}}`) ... New separator selection, if any.
 38 | 
 39 | + Errors
 40 | 
 41 |     + `"ImpossibleDirection"` ... The current selection could be moved in the given direction.
 42 |     + `"UnknownDirection"` ... The given direction was not `"up"|"down"|"left"|"right"|"previous"|"next"|"in"|"out"`.
 43 | 
 44 | #### moveSelectionDirections [INTERNAL]
 45 | 
 46 | Returns the set of possible directions the selection can be moved in.
 47 | 
 48 | This takes into account the current selection and the cell structure. For instance, if a cell (not group) bracket is selected, the selection cannot be moved to the left, so the result will not contain `"out"`.
 49 | 
 50 | + Response
 51 | 
 52 |     + `directions` (`Array.<string>`) ... List of possible directions the selection.
 53 | 
 54 | 
 55 | #### clearSelectionUponKeyboardDismissal [INTERNAL]
 56 | 
 57 | Clears the selection when keyboard is dismissed on the iOS mobile app, when the keyboard is dismissed via the "Dismiss" button.
 58 | 
 59 | + Response
 60 | 
 61 |     + `elements` (`Array.<{type: "cell"|"group", id: string}>`) ... List of elements (cells or cell groups) selected via their cell brackets. Empty array if no cell brackets are selected.
 62 |     + `separator` (`?{cellBefore: ?{cellId: string}, cellAfter: ?{cellId: string}}`) ... If the selection is between cells, this gives the cell before and the cell after the separator. Either of them or `separator` itself can be `null`.
 63 |     + `inCell` (`?{cellId: string}`) ... The cell the selection is inside (i.e. on the box level), if any. This is particularly the case when editing a cell. If the selection is on the cell (bracket) level, `inCell` is `null`.
 64 |     + `cursorPosition` (`?{left: number, top: number}`) ... Cursor position, if a cell is edited. The position is relative to the document offset. This takes into account the scroll position.
 65 | 
 66 | ### Copy and Paste
 67 | 
 68 | #### copyData [INTERNAL]
 69 | 
 70 | Returns data representing the current selection.
 71 | 
 72 | This does not actually copy something to the clipboard, it just returns data that could be stored in the clipboard.
 73 | 
 74 | If nothing (or nothing copy-able) is currently selected, `null` is returned.
 75 | 
 76 | + Response
 77 | 
 78 |     + `json` (`Object|Array|string`) ... Structural representation of the currently selected content, made for round-tripping into a notebook.
 79 |     + `text` (`string`) ... Plain-text representation of the currently selected content. This is particularly useful for pasting in other applications.
 80 | 
 81 | #### cutData [INTERNAL]
 82 | 
 83 | Like `copyData`, but also deletes the currently selected content.
 84 | 
 85 | #### pasteData [INTERNAL]
 86 | 
 87 | Pastes data at the current insertion point.
 88 | 
 89 | This does not read data from the clipboard, it just pastes the given data. Data can be given in an of the following form (from higher to lower precedence):
 90 | 
 91 | 1. Structural (JSON) data
 92 | 2. Textual data
 93 | 3. Image data
 94 | 
 95 | The current selection is replaced by the pasted content.
 96 | 
 97 | + Parameters
 98 | 
 99 |     + `json` (optional, `?Object|Array|string`) ... Structural content representation, as retrieved by the `copyData` command. This takes precedence over the `text` and `image` parameters.
100 |     + `text` (optional, `?string`) ... Textual content representation.
101 |     + `image` (optional, `?{uri: string, width: ?number, height: ?number}`) ... Image data, expected to be a base-64-encoded PNG data URI given in an object with a `uri` property. If known to the caller, the (optional) `width` and `height` properties should be set as well.
102 | 
103 | Example request:
104 | 
105 |     {
106 |         "api": "notebook",
107 |         "version": 1,
108 |         "rid": "1",
109 |         "command": "pasteData",
110 |         "image": {
111 |             "uri": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==",
112 |             "width": 5,
113 |             "height": 5
114 |         }
115 |     }
116 | 
117 | Example response:
118 | 
119 |     {
120 |         "rid": "1",
121 |         "success": true
122 |     }
123 | 
124 | ### Autocompletion
125 | 
126 | #### insertAutocompletion [INTERNAL]
127 | 
128 | Inserts a completion at current cursor position.
129 | 
130 | + Parameters
131 | 
132 |     + `completion` (`string`) ... Completion to be inserted at current cursor position.
133 | 
134 | + Errors
135 | 
136 |     + `"UnknownCompletion"` ... The completion is not in the list of completions sent previously.
137 |     + `"NoCompletionAvailable"` ... No completion is available (i.e. the autocompletion menu should have been closed.)
138 | 
139 | #### getFunctionTemplates [INTERNAL]
140 | 
141 | Retrieves the function templates for the given symbol. The symbol should be from the list of completions that would have been previously sent by the `autocompletions` event.
142 | 
143 | + Fields
144 |     + `symbol` (`string`) ... Symbol for which to fetch the function templates.
145 |     + `width` (`number`) ... Width at which to linewrap the function templates.
146 | 
147 | + Response
148 | 
149 |     + `functionTemplates` (`Array.<string>`) ... Array containing URLs or data URIs, one for each function template image. URLs may use the `http:` or `https:` scheme, or whatever scheme the cloud page was opened with; any such URL will be publicly accessible. Data URIs are indicated (as usual) by the `data:` scheme; data URIs use Base64-encoded PNGs. The PNG images would be produced at 401 PPI at a larger size, and should be resized to fit the original width by the app.
150 | 
151 | + Errors
152 | 
153 |     + `"NoFunctionTemplateAvailable"` ... No function template is available.
154 |     + `"RasterizationError"` ... Kernel call for rasterization failed.
155 | 
156 | #### insertFunctionTemplate [INTERNAL]
157 | 
158 | Inserts a function template at current cursor position based on the symbol's list of function templates sent through `getFunctionTemplates`.
159 | 
160 | + Parameters
161 |     + `symbol` (`string`) ... Symbol for which the function template should be inserted.
162 |     + `index` (`number`) ... The (0-based) array index of the chosen function template from the list for the given symbol (which can be retrieved via `getFunctionTemplates`).
163 | 
164 | + Errors
165 | 
166 |     + `"IndexOutOfBounds"` ... The array index is not within the range of the function template list for the given symbol.
167 | 
168 | ### Notebook Edit History
169 | 
170 | #### undo [INTERNAL]
171 | 
172 | Undoes the most recent action recorded in `UndoHistory`.
173 | 
174 | + Errors
175 | 
176 |     + `"NoUndoHistory"`
177 | 
178 | #### redo [INTERNAL]
179 | 
180 | Redoes the most recent undone action recorded in `UndoHistory`.
181 | 
182 | + Errors
183 | 
184 |     + `"NoRedoHistory"`
185 | 
186 | #### getUndoState [INTERNAL]
187 | 
188 | Returns a status object that indicates if undo and redo entries are available.
189 | 
190 | + Response
191 | 
192 |     + `canUndo` (`boolean`) ... Whether undo history is available.
193 |     + `canRedo` (`boolean`) ... Whether redo history is available.
194 | 
195 | ### Input Assistant
196 | 
197 | #### insertInputAssistant [INTERNAL]
198 | 
199 | Inserts an input assistant box of the given type in to a code cell at the current cursor position.
200 | 
201 | + Parameters
202 |     
203 |     + `type` (`string`) ... Type of the assistant box to be inserted. Allowed values are `"Linguistic"`, `"InputForm"` and `"TeX"`.
204 | 
205 | + Errors
206 | 
207 |     + `"UnsupportedInputAssistantType"` ... The supplied `type` is not one of the allowed values.
208 |     + `"UnsupportedSelectionType"` ... The current cursor position is not suitable for the box insertion. The insertion only works when the current selection is at a cell separator, or inside an editable code cell.
209 |     + `"CellInsertionFailure"` ... The newly-created cell insertion fails for unspeicified reasons. The new cell is needed when the cursor is at a cell separator.
210 |     + `"NoEditorAvailable"` ... The target cell of the operation does not have an associated editor.
211 |     + `"InsertionFailure"` ... A blanket error for unforseen insertion failures.
212 | 
213 | ## Events
214 | 
215 | ### Scrolling
216 | 
217 | #### activate-pull-to-refresh [INTERNAL]
218 | 
219 | Fired upon `touchmove` in a non-interactive notebook element in an unscrolled notebook (i.e. at the top of the page).
220 | 
221 | ### Code Assist
222 | 
223 | #### autocompletions [INTERNAL]
224 | 
225 | Fired when autocompletions are available for the current input text. It is case-insensitive on mobile (as compared to case-sensitive on desktop browser). The `needle` and `completions` array will be empty if no completions are available, and the automcompletions menu in the mobile app should be closed, if it is open.
226 | 
227 | + Fields
228 |     + `type` (`string`) ... "symbols" (more options later).
229 |     + `needle` (`string`) ... Text that the user typed.
230 |     + `completions` (`Array.<string>`) ... List of completions for the needle.
231 | 
232 | ### Notebook Edit History
233 | 
234 | #### undo-state-change [INTERNAL]
235 | 
236 | Fired when either undo or redo's availability status changes.
237 | 
238 | + Fields
239 | 
240 |     + `canUndo` (`boolean`) ... Whether undo history is available.
241 |     + `canRedo` (`boolean`) ... Whether redo history is available.
242 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
  1 | const installedScripts = {};
  2 | const libraryLoading = {};
  3 | let counter = 0;
  4 | let isStyleInsertionPatched = false;
  5 | const insertedStyles = [];
  6 | const styleInsertionCallbacks = [];
  7 | 
  8 | function installScript(url) {
  9 |     if (!installedScripts[url]) {
 10 |         const script = document.createElement('script');
 11 |         script.type = 'text/javascript';
 12 |         script.src = url;
 13 |         const head = document.getElementsByTagName('head')[0];
 14 |         head.appendChild(script);
 15 |         installedScripts[url] = true;
 16 |     }
 17 | }
 18 | 
 19 | function loadLibrary(libraryURL) {
 20 |     if (!libraryLoading[libraryURL]) {
 21 |         libraryLoading[libraryURL] = new Promise((resolve, reject) => {
 22 |             const script = document.createElement('script');
 23 |             script.type = 'text/javascript';
 24 |             script.onerror = reject;
 25 |             let callbackName;
 26 |             do {
 27 |                 callbackName = '_wolframNotebookEmbedderCallback' + (++counter);
 28 |             } while (window[callbackName]);
 29 |             window[callbackName] = (lib) => {
 30 |                 delete window[callbackName];
 31 |                 resolve(lib);
 32 |             };
 33 |             script.src = libraryURL + '?callback=' + callbackName;
 34 |             const head = document.getElementsByTagName('head')[0];
 35 |             head.appendChild(script);
 36 |         });
 37 |     }
 38 |     return libraryLoading[libraryURL];
 39 | }
 40 | 
 41 | /**
 42 |  * Splits a string into two parts at the first occurrence of any of the given separators.
 43 |  * @param s String to split.
 44 |  * @param separators Array of separators. Whichever separator occurs first in the string
 45 |  * is where the split happens.
 46 |  * @returns The part before the separator and the part after it.
 47 |  * If no separator occurs in the string, `[null, null]` is returned.
 48 |  */
 49 | function split(s, separators) {
 50 |     let before = null;
 51 |     let after = null;
 52 |     for (let i = 0; i < separators.length; ++i) {
 53 |         const sep = separators[i];
 54 |         const index = s.indexOf(sep);
 55 |         if (index >= 0 && (before === null || index < before.length)) {
 56 |             before = s.substring(0, index);
 57 |             after = s.substring(index + sep.length);
 58 |         }
 59 |     }
 60 |     return [before, after];
 61 | }
 62 | 
 63 | function isNotebookStyleElement(element, domains) {
 64 |     const name = element.tagName.toLowerCase();
 65 |     if (name === 'link' && (element.rel === 'stylesheet' || element.type === 'text/css')) {
 66 |         return domains.some(domain => element.href.startsWith(domain));
 67 |     } else if (name === 'style') {
 68 |         if (element.dataset.isWolframNotebookStyle || element.innerText.indexOf('._ccc') >= 0) {
 69 |             return true;
 70 |         }
 71 |         if (element.id === 'erd_scroll_detection_scrollbar_style') {
 72 |             return true;
 73 |         }
 74 |     }
 75 |     return false;
 76 | }
 77 | 
 78 | function patchShadowStyleInsertion(container, domains) {
 79 |     function callback(element, allowMove) {
 80 |         // When inserting the style element for the first time, use the original element,
 81 |         // to make sure that onload and onerror handlers are preserved.
 82 |         // For subsequent insertions (second embedded notebook and beyond), clone the element.
 83 |         const styleElement = allowMove && !element.didInsertWithoutCloning ? element : element.cloneNode(true);
 84 |         element.didInsertWithoutCloning = true;
 85 |         container.appendChild(styleElement);
 86 |     }
 87 | 
 88 |     function handleStyleElement(element, allowMove) {
 89 |         if (isNotebookStyleElement(element, domains)) {
 90 |             insertedStyles.push(element);
 91 |             styleInsertionCallbacks.forEach(cb => {
 92 |                 cb(element, allowMove);
 93 |             });
 94 |             return true;
 95 |         }
 96 |         return false;
 97 |     }
 98 | 
 99 |     if (!isStyleInsertionPatched) {
100 |         // There might be notebook-related <link> or <style> elements on the page already,
101 |         // e.g. when static HTML is already included on the page.
102 |         // These elements are not even necessarily in the document's <head>,
103 |         // but the notebook JS code will still not insert them again,
104 |         // so it's important we look for them anywhere in the document.
105 |         const existingLinks = document.getElementsByTagName('link');
106 |         for (let i = 0; i < existingLinks.length; ++i) {
107 |             handleStyleElement(existingLinks[i], false);
108 |         }
109 |         const existingStyles = document.getElementsByTagName('style');
110 |         for (let i = 0; i < existingStyles.length; ++i) {
111 |             handleStyleElement(existingStyles[i], false);
112 |         }
113 |         const head = document.getElementsByTagName('head')[0];
114 |         if (head) {
115 |             const originalAppendChild = head.appendChild;
116 |             head.appendChild = function (child) {
117 |                 if (!handleStyleElement(child, true)) {
118 |                     originalAppendChild.call(this, child);
119 |                 }
120 |             };
121 |         }
122 |         isStyleInsertionPatched = true;
123 |     }
124 | 
125 |     insertedStyles.forEach(existingStyle => {
126 |         callback(existingStyle, false);
127 |     });
128 |     styleInsertionCallbacks.push(callback);
129 |     const index = styleInsertionCallbacks.length - 1;
130 |     return () => {
131 |         styleInsertionCallbacks.splice(index, 1);
132 |     };
133 | }
134 | 
135 | function getNotebookData(source) {
136 |     let cloudBase = null;
137 |     let params = '';
138 |     let usePost = false;
139 |     let notebookExpr = null;
140 |     const notebookSource = {};
141 |     if (typeof source === 'string') {
142 |         const [domain, remainingPaths] = split(source, ['/obj/', '/objects/']);
143 |         if (!domain || !remainingPaths) {
144 |             throw new Error('InvalidCloudObjectURL');
145 |         }
146 |         cloudBase = domain;
147 |         // For now the query string is simply pruned.
148 |         const path = remainingPaths.split('?', 1)[0];
149 |         if (!path) {
150 |             throw new Error('InvalidCloudObjectURL');
151 |         }
152 |         params = 'path=' + encodeURIComponent(path);
153 |     } else if (source && typeof source === 'object') {
154 |         cloudBase = source.cloudBase || 'https://www.wolframcloud.com';
155 |         notebookSource.cloudBase = cloudBase;
156 |         const hasPath = typeof source.path !== 'undefined'
157 |         const hasExpr = typeof source.expr !== 'undefined';
158 |         const hasURL = typeof source.url !== 'undefined';
159 |         const paramCount = (hasPath ? 1 : 0) + (hasExpr ? 1 : 0) + (hasURL ? 1 : 0);
160 |         if (paramCount !== 1) {
161 |             throw new Error('InvalidSourceParameters');
162 |         }
163 | 
164 |         if (hasPath) {
165 |             params = 'path=' + encodeURIComponent(source.path);
166 |             notebookSource.path = source.path;
167 |         } else if (hasURL) {
168 |             params = 'url=' + encodeURIComponent(source.url);
169 |             notebookSource.url = source.url;
170 |         } else if (hasExpr) {
171 |             notebookExpr = source.expr;
172 |             params = 'expr=' + encodeURIComponent(source.expr);
173 |             usePost = true;
174 |             notebookSource.expr = source.expr;
175 |         }
176 |     }
177 |     if (!cloudBase) {
178 |         throw new Error('InvalidSource');
179 |     }
180 |     if (cloudBase.charAt(cloudBase.length - 1) === '/') {
181 |         // Remove trailing '/' from the cloud base, as a courtesy.
182 |         cloudBase = cloudBase.substring(0, cloudBase.length - 1);
183 |     }
184 |     let embeddingAPI = cloudBase + '/notebooks/embedding';
185 |     if (!usePost) {
186 |         embeddingAPI += '?' + params;
187 |     }
188 |     return new Promise((resolve, reject) => {
189 |         // Use XMLHttpRequest instead of fetch to be compatible with older browsers.
190 |         const req = new XMLHttpRequest();
191 |         req.addEventListener('load', () => {
192 |             if (req.status === 200) {
193 |                 const text = req.responseText;
194 |                 const data = JSON.parse(text);
195 |                 let extraData = data.extraData || [];
196 |                 extraData.notebookSource = notebookSource;
197 |                 resolve({
198 |                     notebookID: data.notebookID,
199 |                     mainScript: cloudBase + data.mainScript,
200 |                     otherScripts: (data.otherScripts || []).map(script => cloudBase + script),
201 |                     stylesheetDomains: [cloudBase, ...data.stylesheetDomains],
202 |                     notebookExpr: notebookExpr,
203 | 
204 |                     // Extra data sent by the server in response to the initial request
205 |                     // to /notebooks/embedding, which we just pass through to the `.embed`
206 |                     // call. Could contain data such as a token for load balancing or
207 |                     // to maintain a session.
208 |                     extraData: extraData
209 |                 });
210 |             } else {
211 |                 reject(new Error('ResolveError'));
212 |             }
213 |         });
214 |         req.addEventListener('error', () => {
215 |             reject(new Error('RequestError'));
216 |         });
217 |         req.addEventListener('abort', () => {
218 |             reject(new Error('RequestAborted'));
219 |         });
220 |         if (usePost) {
221 |             req.open('POST', embeddingAPI, true);
222 |             req.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
223 |         } else {
224 |             req.open('GET', embeddingAPI, true);
225 |         }
226 |         if (usePost) {
227 |             req.send(params);
228 |         } else {
229 |             req.send();
230 |         }
231 |     });
232 | }
233 | 
234 | function defaultValue(value, fallback) {
235 |     if (value === undefined) {
236 |         return fallback;
237 |     } else {
238 |         return value;
239 |     }
240 | }
241 | 
242 | export function embed(source, node, options) {
243 |     const theOptions = options || {};
244 |     const {useShadowDOM = false} = theOptions;
245 |     const useShadow = useShadowDOM && node.attachShadow;
246 |     let container;
247 |     let shadowRoot;
248 | 
249 |     // The list of nodes that have their dimensions updated
250 |     // when the notebook container dimensions are supposed to change.
251 |     // The CloudPlatform code will currently also update the node's dimensions,
252 |     // but still include it here, just to be sure.
253 |     const containerNodes = [node];
254 | 
255 |     const cleanupHandlers = [];
256 | 
257 |     function onContainerDimensionsChange({width, height}) {
258 |         containerNodes.forEach(containerNode => {
259 |             if (width != null) {
260 |                 containerNode.style.width = `${width}px`;
261 |             }
262 |             if (height != null) {
263 |                 containerNode.style.height = `${height}px`;
264 |             }
265 |         });
266 |     }
267 | 
268 |     return Promise.resolve()
269 |         .then(() => {
270 |             if (useShadow) {
271 |                 const shadowHost = document.createElement('div');
272 |                 shadowHost.style.width = '100%';
273 |                 shadowHost.style.height = '100%';
274 |                 shadowRoot = shadowHost.attachShadow({mode: 'open'});
275 |                 container = document.createElement('div');
276 |                 container.style.width = '100%';
277 |                 container.style.height = '100%';
278 |                 node.appendChild(shadowHost);
279 | 
280 |                 // Workaround to make React's event handling work,
281 |                 // as suggested in https://github.com/facebook/react/issues/9242#issuecomment-534096832
282 |                 // This makes the shadow root appear like a "normal document", so React can use it
283 |                 // for creating elements and registering event handlers.
284 |                 // Otherwise, React event handlers wouldn't fire since events don't bubble up from
285 |                 // the shadow DOM to the top document.
286 |                 Object.defineProperty(container, 'ownerDocument', { value: shadowRoot });
287 |                 shadowRoot.createElement = (...args) => document.createElement(...args);
288 |                 shadowRoot.createElementNS = (...args) => document.createElementNS(...args);
289 |                 shadowRoot.createTextNode = (...args) => document.createTextNode(...args);
290 |                 shadowRoot.createDocumentFragment = (...args) => document.createDocumentFragment(...args);
291 | 
292 |                 // Needed by jQuery, particularly $(...).offset.
293 |                 shadowRoot.documentElement = container;
294 |                 shadowRoot.defaultView = window;
295 | 
296 |                 containerNodes.push(shadowHost);
297 |                 containerNodes.push(container);
298 | 
299 |                 shadowRoot.appendChild(container);
300 |             } else {
301 |                 container = node;
302 |             }
303 |             return getNotebookData(source);
304 |         })
305 |         .then(({notebookID, mainScript, otherScripts, stylesheetDomains, notebookExpr, extraData}) => {
306 |             if (useShadow) {
307 |                 const cleanup = patchShadowStyleInsertion(shadowRoot, stylesheetDomains);
308 |                 cleanupHandlers.push(cleanup);
309 |                 // Move other children from the outer node into the container inside the shadow DOM.
310 |                 // This is important so that a potential HTML cache is picked up by the notebook.
311 |                 for (let i = 0; i < node.children.length - 1; ++i) {
312 |                     container.appendChild(node.children[i]);
313 |                 }
314 |             }
315 |             for (let i = 0; i < otherScripts.length; ++i) {
316 |                 installScript(otherScripts[i]);
317 |             }
318 |             return loadLibrary(mainScript).then(lib => [notebookID, lib, notebookExpr, extraData]);
319 |         })
320 |         .then(([theNotebookID, lib, notebookExpr, extraData]) => {
321 |             return lib.embed(theNotebookID, container, {
322 |                 width: defaultValue(theOptions.width, null),
323 |                 maxHeight: defaultValue(theOptions.maxHeight, Infinity),
324 |                 showBorder: defaultValue(theOptions.showBorder, null),
325 |                 allowInteract: defaultValue(theOptions.allowInteract, true),
326 |                 showRenderProgress: defaultValue(theOptions.showRenderProgress, true),
327 |                 // Pass in the original notebook expression string,
328 |                 // even if the CloudPlatform JS code does not currently use it.
329 |                 // (It only relies on the notebookData sent through extraData.)
330 |                 notebookExpr: notebookExpr,
331 |                 extraData: extraData,
332 |                 onContainerDimensionsChange
333 |             });
334 |         })
335 |         .then(embedding => {
336 |             return {
337 |                 ...embedding,
338 |                 detach: () => {
339 |                     embedding.detach();
340 |                     cleanupHandlers.forEach(cleanup => {
341 |                         cleanup();
342 |                     });
343 |                 },
344 |                 setAttributes: (attrs) => {
345 |                     const {width, maxHeight, showBorder, allowInteract, showRenderProgress} = attrs;
346 |                     embedding.setAttributes({width, maxHeight, showBorder, allowInteract, showRenderProgress});
347 |                 }
348 |             };
349 |         });
350 | }
351 | 
352 | // As a courtesy, also expose a default export, so consumers of the library can write
353 | //   import WolframNotebookEmbedder from 'wolfram-notebook-embedder';
354 | // even though the named-import forms
355 | //   import * as WolframNotebookEmbedder from 'wolfram-notebook-embedder';
356 | // or
357 | //   import {embed} from 'wolfram-notebook-embedder';
358 | // are preferred.
359 | export default {embed};
360 | 


--------------------------------------------------------------------------------
/docs/NotebookAPI.md:
--------------------------------------------------------------------------------
  1 | ---
  2 | id: NotebookAPI
  3 | title: Notebook API
  4 | ---
  5 | 
  6 | This is the documentation of [methods](#methods) on the object returned by [`embed`](./LibraryInterface.md) to control a notebook from JavaScript code. Each method takes a JavaScript object with *parameters* and returns a [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_promises) resolving to a *response* object. Parameters with a default value (specified as "= `...`") are optional. In case of an error, the returned promise is rejected with a standard [Error](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error) object with a `message` property; the potential error messages are listed for each command.
  7 | 
  8 | The API also exposes some [events](#events) that can be subscribed to using the API method `addEventListener(eventName, callback)`. The `callback` will receive a JavaScript object with the specified *fields* as its single argument. Event listeners can be removed with `removeEventListener(eventName, callback)`. Some events are marked as *singular*, which means that they will usually fire exactly once, and an event listener added after they have already fired will still be executed (right away).
  9 | 
 10 | 
 11 | ## Methods
 12 | 
 13 | ### Cell content
 14 | 
 15 | #### getCellContent
 16 | 
 17 | Gets the textual content of a cell.
 18 | 
 19 | + Parameters
 20 | 
 21 |     + `cellId` (`string`) — ID of the cell to read.
 22 | 
 23 | + Response
 24 | 
 25 |     + `content` (`string`) — The textual content of the cell.
 26 | 
 27 | + Errors
 28 | 
 29 |     + `"CellNotFound"` — The cell ID given by `cellId` was not found.
 30 | 
 31 | #### getCellExpression
 32 | 
 33 | Gets the contents of a cell as an expression. [Cloud 1.55]
 34 | 
 35 | + Parameters
 36 | 
 37 |     + `cellId` (`string`) — ID of the cell to read.
 38 |     + `convertDynamicToLiteral` = `false` (`?boolean`) — Whether to convert any dynamic content to literal values. [Cloud 1.56, experimental]
 39 | 
 40 | + Response
 41 | 
 42 |     + `cellExpr` (`exprjson`) — The content of the cell.    
 43 | 
 44 | + Errors
 45 | 
 46 |     + `"CellNotFound"` — The cell ID given by `cellId` was not found.
 47 | 
 48 | ### Structure
 49 | 
 50 | #### getElements
 51 | 
 52 | Retrieves the (top-level) elements in the notebook or a cell group.
 53 | 
 54 | + Parameters
 55 | 
 56 |     + `groupId` (`?string`) — ID of the cell group. If the parameter is omitted or falsy (e.g. `null` or `""`), the top-level elements in the notebook are returned.
 57 | 
 58 | + Response
 59 | 
 60 |     + `elements` (`Array.<{type: "cell"|"group", id: string}>`) — List of elements in the cell group, in the order they appear in the notebook.
 61 |     + `isClosed` (`boolean`) — Whether the cell group is closed.
 62 |     + `visibleElementIndex` (`?number`) — Index (0-based) of the visible element in case the cell group is closed. `null` if the group is not closed.
 63 | 
 64 | + Errors
 65 | 
 66 |     + `"GroupNotFound"` — The group specified by `groupId` was not found.
 67 | 
 68 | Example request:
 69 | 
 70 | ```json
 71 | {
 72 |     "api": "notebook",
 73 |     "version": 1,
 74 |     "rid": "1",
 75 |     "command": "getElements",
 76 |     "groupId": "1"
 77 | }
 78 | ```
 79 | 
 80 | Example response:
 81 | 
 82 | ```json
 83 | {
 84 |     "rid": "1",
 85 |     "success": true,
 86 |     "elements": [{"type": "cell", "id": "2"}],
 87 |     "isClosed": false,
 88 |     "visibleElementIndex": null
 89 | }
 90 | ```
 91 | 
 92 | #### getElementParent
 93 | 
 94 | Retrieves the parent cell group of a given cell or cell group.
 95 | 
 96 | + Parameters
 97 | 
 98 |     + `id` (`string`) — ID of the cell or cell group.
 99 | 
100 | + Response
101 | 
102 |     + `groupId` (`?string`) — ID of the group the given element is contained in. `null` if the element is in no group (i.e. it is on the top level of a notebook).
103 | 
104 | + Errors
105 | 
106 |     + `"ElementNotFound"` — The element specified by `id` was not found.
107 | 
108 | #### getCells
109 | 
110 | Retrieves all (potentially nested) cells in the notebook or a cell group.
111 | 
112 | + Parameters
113 | 
114 |     + `groupId` (`?string`) — ID of the cell group. If the parameter is omitted or falsy (e.g. `null` or `""`), the cells in the notebook are returned.
115 | 
116 | + Response
117 | 
118 |     + `cells` (`Array.<{type: "cell", id: string}>`) — List of cells in the order they appear in the notebook.
119 | 
120 | + Errors
121 | 
122 |     + `"GroupNotFound"` — The group specified by `groupId` was not found.
123 | 
124 | #### openGroup
125 | 
126 | Opens a cell group. If a group is already open, this has no effect.
127 | 
128 | + Parameters
129 | 
130 |     + `groupId` (`string`) — ID of the cell group.
131 | 
132 | + Errors
133 | 
134 |     + `"GroupNotFound"` — The group specified by `groupId` was not found.
135 | 
136 | #### closeGroup
137 | 
138 | Closes a cell group, only displaying one of its elements.
139 | 
140 | + Parameters
141 | 
142 |     + `groupId` (`string`) — ID of the cell group.
143 |     + `visibleElementIndex` (`?number`) — Index (0-based) of the remaining visible element. If not specified, the first element is chosen ("forward-close"); unless if there is a whole-cell group opener cell in the group, in which case that cell is chosen. If less than 0, the first element is chosen. If greater than or equal to the total number of elements in the group, the last element is chosen ("reverse-close").
144 | 
145 | + Errors
146 | 
147 |     + `"GroupNotFound"` — The group specified by `groupId` was not found.
148 | 
149 | ### Notebook options
150 | 
151 | #### setOptions
152 | 
153 | Sets outer options to be applied to the notebook. Currently, only the `"Magnification"` option is supported.
154 | 
155 | + Parameters
156 | 
157 |     + `options` (`Object.<string, string|number>`) — Dictionary of option names and their respective values.
158 | 
159 | Example request:
160 | 
161 | ```json
162 | {
163 |     "api": "notebook",
164 |     "version": 1,
165 |     "rid": "1",
166 |     "command": "setOptions",
167 |     "options": {
168 |         "Magnification": 2
169 |     }
170 | }
171 | ```
172 | 
173 | Example response:
174 | 
175 | ```json
176 | {
177 |     "rid": "1",
178 |     "success": true
179 | }
180 | ```
181 | 
182 | #### getOption
183 | 
184 | Gets the value of an outer option. Currently, only the `"Magnification"` option (which resolves to a `number`) is supported.
185 | 
186 | + Parameters
187 | 
188 |     + `option` (`string`) — Option name.
189 | 
190 | + Response
191 | 
192 |     + `option` (`string`) — Option name.
193 |     + `value` (`?string|number`) — Option value. Might be `null` if no explicit value is set.
194 | 
195 | Example request:
196 | 
197 | ```json
198 | {
199 |     "api": "notebook",
200 |     "version": 1,
201 |     "rid": "1",
202 |     "command": "getOption",
203 |     "option": "Magnification"
204 | }
205 | ```
206 | 
207 | Example response:
208 | 
209 | ```json
210 | {
211 |     "rid": "1",
212 |     "success": true,
213 |     "option": "Magnification",
214 |     "value": 2
215 | }
216 | ```
217 | 
218 | ### Formatting
219 | 
220 | #### getPrimaryCellStyle
221 | 
222 | Gets the primary style of a cell. [Cloud 1.56]
223 | 
224 | + Parameters
225 | 
226 |     + `cellId` (`string`) — ID of the cell.
227 | 
228 | + Response
229 | 
230 |     + `style` (`string`) — Primary style name of the cell.
231 | 
232 | + Errors
233 | 
234 |     + `"CellNotFound"` — The specified cell does not exist.
235 | 
236 | #### getElementOption
237 | 
238 | Gets an option value of a cell, group or the notebook. [Cloud 1.56]
239 | 
240 | + Parameters
241 | 
242 |     + `id` (`?string`) — ID of the cell or group. If the parameter is omitted, the notebook is taken.
243 |     + `name` (`string`) — Name of the option to retrieve.
244 | 
245 | + Response
246 | 
247 |     + `value` (`?exprjson`) — Option value or `null` if the option is not set.
248 | 
249 | + Errors
250 | 
251 |     + `"ElementNotFound"` — The specified element does not exist.
252 | 
253 | #### getSelectionOption
254 | 
255 | Gets the option value(s) of the current selection in the notebook. [Cloud 1.56]
256 | 
257 | + Parameters
258 | 
259 |     + `name` (`string`) — Name of the option to retrieve
260 | 
261 | + Response
262 | 
263 |     + `values` (`Array.<exprjson>`) — Array of values that occur for the given option in the current selection. Might be empty or contain only a single value.
264 | 
265 | Example request:
266 | 
267 | ```json
268 | {
269 |     "api": "notebook",
270 |     "version": 1,
271 |     "rid": "1",
272 |     "command": "getSelectionOption",
273 |     "option": "FontFamily"
274 | }
275 | ```
276 | 
277 | Example response:
278 | 
279 | ```json
280 | {
281 |     "rid": "1",
282 |     "success": true,
283 |     "values": [
284 |         "\"Source Code Pro\"",
285 |         "\"Source Sans Pro\""
286 |     ]
287 | }
288 | ```    
289 | 
290 | ### Selection
291 | 
292 | #### getSelection
293 | 
294 | Gets information about the current selection.
295 | 
296 | + Response
297 | 
298 |     + `elements` (`Array.<{type: "cell"|"group", id: string}>`) — List of elements (cells or cell groups) selected via their cell brackets. Empty array if no cell brackets are selected.
299 |     + `separator` (`?{cellBefore: ?{cellId: string}, cellAfter: ?{cellId: string}}`) — If the selection is between cells, this gives the cell before and the cell after the separator. Either of them or `separator` itself can be `null`.
300 |     + `inCell` (`?{cellId: string}`) — The cell the selection is inside (i.e. on the box level), if any. This is particularly the case when editing a cell. If the selection is on the cell (bracket) level, `inCell` is `null`.
301 |     + `cursorPosition` (`?{left: number, top: number}`) — Cursor position, if a cell is edited. The position is relative to the document offset. This takes into account the scroll position.
302 | 
303 | Example request:
304 | 
305 | ```json
306 | {
307 |     "api": "notebook",
308 |     "version": 1,
309 |     "rid": "1",
310 |     "command": "getSelection"
311 | }
312 | ```
313 | 
314 | Example response:
315 | 
316 | ```json
317 | {
318 |     "rid": "1",
319 |     "success": true,
320 |     "cells": [],
321 |     "inCell": {"cellId": "1"},
322 |     "cursorPosition": {"left": 80, "top": 300}
323 | }
324 | ```
325 | 
326 | #### selectElements
327 | 
328 | Selects elements (cell brackets).
329 | 
330 | + Parameters
331 | 
332 |     + `elements` (`Array.<{id: string}>`) — List of IDs of elements to select. Elements that cannot be found are ignored.
333 | 
334 | + Response
335 | 
336 |     + `elements` (`Array.<{type: "cell"|"group", id: string}>`) — List of elements that have been found and are selected now.
337 | 
338 | 
339 | #### selectSeparatorBeforeElement
340 | 
341 | Moves the selection to the separator before a cell or cell group.
342 | 
343 | + Parameters
344 | 
345 |     + `id` (`?string`) — ID of the element before which the separator should be. If `null`, the selection is moved to the end of the notebook.
346 | 
347 | + Errors
348 | 
349 |     + `"ElementNotFound"`
350 | 
351 | #### selectSeparatorAfterElement
352 | 
353 | Moves the selection to the separator after a cell or cell group.
354 | 
355 | + Parameters
356 | 
357 |     + `id` (`?string`) — ID of the element after which the separator should be. If `null`, the selection is moved to the beginning of the notebook.
358 | 
359 | + Errors
360 | 
361 |     + `"ElementNotFound"`
362 | 
363 | ### Dimensions
364 | 
365 | #### getDimensions
366 | 
367 | Returns the dimensions of the notebook content.
368 | 
369 | + Response
370 | 
371 |     + `width` (`number`) — The width of the notebook content (in pixels). Note that a notebook will always fill any available (maximum) width. If there is a horizontal scrollbar, the reported width may be larger than the maximum width available to the notebook. Providing the reported width as horizontal space to the notebook usually ensures that there is no horizontal scrollbar necessary.
372 |     + `height` (`number`) — The height of the notebook content (in pixels). This does not include any unused vertical space that would be available to the notebook. It does include the height of the horizontal scrollbar, in case there is one. Providing the reported height as vertical space to the notebook usually ensures that there is no vertical scrollbar necessary.
373 | 
374 | ### Scrolling
375 | 
376 | #### getScrollPosition
377 | 
378 | Returns the current scroll position in the notebook.
379 | 
380 | + Response
381 | 
382 |     + `left` (`number`) — Number of pixels scrolled in horizontal direction (increases when scrolling to the right).
383 |     + `top` (`number`) — Number of pixels scrolled in vertical direction (increases when scrolling down).
384 | 
385 | #### setScrollPosition
386 | 
387 | Scrolls to the specified position in the notebook.
388 | 
389 | + Parameters
390 | 
391 |     + `left` (`number`) — Number of pixels to scroll to in horizontal direction (increases when scrolling to the right).
392 |     + `top` (`number`) — Number of pixels to scroll to in vertical direction (increases when scrolling down).
393 | 
394 | #### scrollToElement
395 | 
396 | Scrolls the specified element into view. [Cloud 1.56]
397 | 
398 | + Parameters
399 | 
400 |     + `id` — ID of the element to scroll into view.
401 | 
402 | + Errors
403 | 
404 |     + `"ElementNotFound"` — The specified element does not exist.
405 | 
406 | #### scrollToSelection
407 | 
408 | Scrolls the currently selected element(s) into view. [Cloud 1.56]   
409 | 
410 | ### Evaluation
411 | 
412 | #### evaluateExpression
413 | 
414 | Evaluates a Wolfram Language expression.
415 | 
416 | The API responds with the resulting expression when the evaluation is finished.
417 | 
418 | + Parameters
419 | 
420 |     + `expression` (`string` or `exprjson`) — Wolfram Language expression to evaluate.
421 |     + `originatingCellId` = `null` (optional, `?string`) — ID of the cell the evaluation is supposed to be originating from (for the purpose of `EvaluationCell[]`).
422 | 
423 | + Response
424 | 
425 |     + `result` (`exprjson`) — The result of the evaluation in JSON expression representation (see below).
426 | 
427 | + Errors
428 | 
429 |     + `"EvaluationError"` — There was some error during the evaluation, e.g. the kernel was not reachable.
430 |     + `"InsufficientPermissions"`
431 | 
432 | Example request:
433 | 
434 |     {
435 |         "api": "notebook",
436 |         "version": 1,
437 |         "rid": "1",
438 |         "command": "evaluateExpression"
439 |         "expression": "f[x, 1 + 2]"
440 |     }
441 | 
442 | Example response:
443 | 
444 |     {
445 |         "rid": "1",
446 |         "success": true,
447 |         "result": {"head": "f", "args": ["x", 3]}
448 |     }
449 |     
450 | #### evaluateInDynamicModule
451 | 
452 | Evaluates a Wolfram Language expression inside a [DynamicModule](https://reference.wolfram.com/language/ref/DynamicModule.html), localizing variables as necessary. [Cloud 1.56]
453 | 
454 | + Parameters
455 | 
456 |     + `cellId` (`string`) — ID of the cell that contains the `DynamicModuleBox`.
457 |     + `boxId` (`?string`) — `BoxID` value of the `DynamicModuleBox` to search for. If not specified, the first `DynamicModuleBox` in a breadth-first search is chosen.
458 |     + `expression` (`string` or `exprjson`) — Wolfram Language expression to evaluate.
459 | 
460 | + Response
461 | 
462 |     + `result` (`exprjson`) — The result of the evaluation in JSON expression representation (see below).
463 | 
464 | + Errors
465 | 
466 |     + `"EvaluationError"` — There was some error during the evaluation, e.g. the kernel was not reachable.
467 |     + `"InsufficientPermissions"`
468 | 
469 | #### clickButton
470 | 
471 | Simulates clicking of a button, i.e. evaluates its `ButtonFunction`. [Cloud 1.56]
472 | 
473 | + Parameters
474 | 
475 |     + `cellId` (`string`) — ID of the cell that contains the `ButtonBox`.
476 |     + `boxId` (`?string`) — `BoxID` value of the `ButtonBox` to search for. If not specified, the first `ButtonBox ` in a breadth-first search is chosen.
477 | 
478 | + Errors
479 | 
480 |     + `"NoBox"` — The specified `ButtonBox` was not found.
481 | 
482 | ### DynamicModule variables
483 | 
484 | #### getDynamicModuleVariable
485 | 
486 | Retrieves the value of a [DynamicModule](https://reference.wolfram.com/language/ref/DynamicModule.html) variable.
487 | 
488 | + Parameters
489 | 
490 |     + `cellId` (`string`) — ID of the cell that contains the `DynamicModuleBox`.
491 |     + `boxId` (`?string`) — `BoxID` value of the `DynamicModuleBox` to search for. If not specified, the first `DynamicModuleBox` in a breadth-first search is chosen. [Cloud 1.56]
492 |     + `name` (`string`) — Name of the `DynamicModule` variable to retrieve.
493 |     + `useExactName` = `false` (`?boolean`) — Whether to require an exact name match. If set to `false` (the default), the provided name does not have to contain prefixes (such as ```$CellContext` ```) and suffixes (such as `$$`) that are typically added behind the scenes by `DynamicModule`.
494 | 
495 | + Response
496 | 
497 |     + `value` (`exprjson`) — The value of the variable in JSON expression representation (see [below](#expressionjson)).
498 | 
499 | + Errors
500 | 
501 |     + `"CellNotFound"` — The specified cell does not exist.
502 |     + `"NoDynamicModule"` — There is no `DynamicModuleBox` in the specified cell (with the given `BoxID`, if `boxId` is specified).
503 |     + `"UnknownVariableName"` — The `DynamicModuleBox` does not contain the specified variable.
504 | 
505 | #### setDynamicModuleVariable
506 | 
507 | Sets the value of a [DynamicModule](https://reference.wolfram.com/language/ref/DynamicModule.html) variable.
508 | 
509 | + Parameters
510 | 
511 |     + `cellId` (`string`) — ID of the cell that contains the `DynamicModuleBox`.
512 |     + `boxId` (`?string`) — `BoxID` value of the `DynamicModuleBox` to search for. If not specified, the first `DynamicModuleBox` in a breadth-first search is chosen. [Cloud 1.56]
513 |     + `name` (`string`) — Name of the DynamicModule variable to change.
514 |     + `useExactName` = `false` (`?boolean`) — Whether to require an exact name match. If set to `false` (the default), the provided name does not have to contain prefixes (such as ```$CellContext` ```) and suffixes (such as `$$`) that are typically added behind the scenes by `DynamicModule`.
515 |     + `value` (`exprjson`) — The new value of the variable in JSON expression representation (see [below](#expressionjson)).
516 | 
517 | + Errors
518 | 
519 |     + `"CellNotFound"` — The specified cell does not exist.
520 |     + `"NoDynamicModule"` — There is no `DynamicModuleBox` in the specified cell (with the given `BoxID`, if `boxId` is specified).
521 |     + `"UnknownVariableName"` — The `DynamicModuleBox` does not contain the specified variable.
522 | 
523 | Example request (setting a variable `x` to `N[Pi, 30]`):
524 | 
525 |     {
526 |         "api": "notebook",
527 |         "version": 1,
528 |         "rid": "1",
529 |         "command": "setDynamicModuleVariable"
530 |         "cellId": "42",
531 |         "name": "x",
532 |         "value": ["N", "Pi", 30]
533 |     }
534 | 
535 | ### Cell rendering
536 | 
537 | #### getCellRenderingMethod
538 | 
539 | Returns the rendering method (mode) used by a given cell.
540 | 
541 | There are currently four different rendering methods, as shown here.
542 | 
543 | | Method   | Meaning |
544 | |----------|---------|
545 | | `boxes`  | live-rendered |
546 | | `static` | rendered as static HTML, from the HTML cache |
547 | | `image`  | rendered as a rasterized image |
548 | | `none`   | rendered as a general placeholer |
549 | 
550 | + Parameters
551 | 
552 |     + `cellId` (`string`) — The ID of the cell.
553 | 
554 | + Response
555 | 
556 |     + `method` (`string`) — The method used to render the given cell.
557 | 
558 | + Errors
559 | 
560 |     + `"CellNotFound"` — The cell ID given by `cellId` was not found.
561 | 
562 | ## Events
563 | 
564 | ### Initial render progress
565 | 
566 | See [Notebook Loading Phases](./NotebookLoadingPhases.md) for more information.
567 | 
568 | #### first-paint-done (singular)
569 | 
570 | Fired when either static HTML is shown for the notebook (see [Server-Side Rendering](./ServerSideRendering.md)) or the notebook starts rendering individual cells.
571 | 
572 | + Fields
573 | 
574 |     + `showingStaticHTML` (`boolean`) — Whether the notebook is showing a piece of static HTML.
575 | 
576 | #### initial-render-progress
577 | 
578 | Fired when progress is made during the initial render phase.
579 | 
580 | + Fields
581 | 
582 |     + `cellsRendered` (`number`) — Number of cells that have already been "live-rendered".
583 |     + `cellsTotal` (`number`) — Total number of cells that are visible in the notebook.
584 | 
585 | #### initial-render-done (singular)
586 | 
587 | Fired when the initial render phase is done, i.e. all visible cells have been live-rendered.
588 | 
589 | ### Selection
590 | 
591 | #### selection-change
592 | 
593 | Fired when the notebook selection changes.
594 | 
595 | + Fields
596 | 
597 |     + `elements` (`Array.<{type: "cell"|"group", id: string}>`) — List of elements (cells or cell groups) selected via their cell brackets.
598 |     + `separator` (`?{cellBefore: ?{cellId: string}, cellAfter: ?{cellId: string}}`) — If the selection is between cells, this gives the cell before and the cell after the separator.
599 |     + `inCell` (`?{cellId: string}`) — The cell the selection is inside (i.e. on the box level), if any. This is particularly the case when editing a cell.
600 | 
601 | ### Evaluation
602 | 
603 | #### evaluation-start
604 | 
605 | Fired when an evaluation starts.
606 | 
607 | Currently, only one kernel evaluation can happen at any time. However, this might change in the future. Then this API might change as well.
608 | 
609 | + Fields
610 | 
611 |     + `isCellEvaluation` (`boolean`) — `true` if the evaluation is a whole-cell evaluation (e.g. from pressing Shift+Enter). `false` if the evaluation is triggered by a `Dynamic` or some other dynamic control (e.g. a `Button`).
612 | 
613 | #### evaluation-stop
614 | 
615 | Fired when an evaluation ends.
616 | 
617 | ### Dimensions
618 | 
619 | #### resize
620 | 
621 | Fired when the notebook dimensions change. See [`getDimensions`](#getdimensions) for details.
622 | 
623 | + Fields
624 | 
625 |     + `width` (`number`) — Width of the notebook content (in pixels).
626 |     + `height` (`number`) — Height of the notebook content (in pixels).
627 | 
628 | ### Scrolling
629 | 
630 | #### scroll-position-change
631 | 
632 | Fired when the scroll position changes.
633 | 
634 | + Fields (same as `getScrollPosition`)
635 | 
636 |     + `left` (`number`) — Number of pixels scrolled in horizontal direction (increases when scrolling to the right).
637 |     + `top` (`number`) — Number of pixels scrolled in vertical direction (increases when scrolling down).
638 | 
639 | 
640 | ## ExpressionJSON
641 | 
642 | Some API methods accept or return WL expressions in the [ExpressionJSON](https://reference.wolfram.com/language/ref/format/ExpressionJSON.html) format:
643 | 
644 | | WL | WL example | JSON | JSON example|
645 | |----|------------|------|-------------|
646 | | Symbol | `foo` | string | `"foo"` |
647 | | String | `"text"` | string with enclosing single or double quotes | `"'text'"` or `"\"text\""` |
648 | | Machine-size Integer (up to 53 bits) | `342` | number | `342` |
649 | | Double-precision Real (up to 64 bits) | `2.5`, `1.073741824*^9` | number | `2.5`, `1.073741824e9` |
650 | | Arbitrary-length Integer | `18014398509481984` | string | `"18014398509481984"` |
651 | | Arbitrary-precision Real | ```3.5074`15.65*^451``` | string | ```"3.5074`15.65*^451"``` |
652 | | Booleans | `True`, `False` | boolean | `true`, `false` |
653 | | Null | `Null` | null | `null` |
654 | | Expression | `f[x, y]` | array with head at index 0, followed by parts | `["f", "x", "y"]` |
655 | 
656 | Note that there are several ways to represent the same expression, e.g. `True` can be represented as `true` or `"True"` in ExpressionJSON and a number such as `123` can be represented as the JSON number `123` or as the JSON string `"123"`. When the Notebook API returns expression data, it usually serializes it in the shortest form. However, that is not guaranteed, and readers of the format should make sure to accept all possible forms.
657 | 
658 | As a courtesy, API methods also accept single strings containing the WL expression in [InputForm](https://reference.wolfram.com/language/ref/InputForm.html) (e.g. the string `"1+2"`) or [FullForm](https://reference.wolfram.com/language/ref/FullForm.html) (e.g. `"Plus[1,2]"`; `FullForm` is a subset of `InputForm`). A WL parser implemented in JavaScript is used to parse the given expression. However, there is some performance overhead to that and it has some limitations (e.g. not all operators might be supported), so it is generally recommended to use proper ExpressionJSON instead.
659 | 
660 | Note that there is no ambiguity between ExpressionJSON and expressions given in InputForm, since all strings in ExpressionJSON contain the InputForm of the corresponding WL expression.
661 | 


--------------------------------------------------------------------------------