Use mathjax-extension to render latex in markdown cells (#1410)

* use mathjax-extension

* Support both mathjax 2 and 3

* Fix eslint

* Test only Mathjax2

* Load mathjax manually

.github/workflows/main.yml

@@ -31,7 +31,7 @@ jobs:
 
       - name: Create the conda environment
         shell: bash -l {0}
-        run: mamba install -q python=${{ matrix.python_version }} pip jupyterlab_pygments==0.1.0 pytest-cov pytest-rerunfailures nodejs=18 yarn ipywidgets matplotlib xeus-cling  "traitlets>=5.0.3,<6" ipykernel
+        run: mamba install -q python=${{ matrix.python_version }} pip jupyterlab_pygments==0.1.0 pytest-cov pytest-rerunfailures nodejs=18 yarn=3 ipywidgets matplotlib xeus-cling  "traitlets>=5.0.3,<6" ipykernel
 
       - name: Install dependencies
         shell: bash -l {0}
@@ -85,7 +85,7 @@ jobs:
       - name: Create the conda environment
         shell: bash -l {0}
         # TODO unpin pyzmq
-        run: mamba install -q python=${{ matrix.python_version }} pip jupyterlab_pygments==0.1.0 pytest-cov pytest-rerunfailures nodejs=18 yarn ipywidgets matplotlib xeus-cling "traitlets>=5.0.3,<6" ipykernel pyzmq==25.1.0
+        run: mamba install -q python=${{ matrix.python_version }} pip jupyterlab_pygments==0.1.0 pytest-cov pytest-rerunfailures nodejs=18 yarn=3 ipywidgets matplotlib xeus-cling "traitlets>=5.0.3,<6" ipykernel pyzmq==25.1.0
 
       - name: Install dependencies
         shell: bash -l {0}

docs/contribute.md

@@ -25,7 +25,7 @@ First, you need to fork the project. Then setup your environment:
 
 ```bash
 # create a new conda environment
-conda create -n voila -c conda-forge notebook jupyterlab nodejs "yarn<3" pip
+conda create -n voila -c conda-forge notebook jupyterlab nodejs "yarn<4" pip
 conda activate voila
 
 # download voila from your GitHub fork

lerna.json

@@ -1,5 +1,4 @@
 {
   "npmClient": "yarn",
-  "version": "independent",
-  "useWorkspaces": true
+  "version": "independent"
 }

package.json

@@ -29,22 +29,21 @@
     "test": "lerna run test"
   },
   "devDependencies": {
-    "@typescript-eslint/eslint-plugin": "^4.2.0",
-    "@typescript-eslint/parser": "^4.2.0",
-    "eslint": "^7.10.0",
-    "eslint-config-prettier": "^6.15.0",
-    "eslint-plugin-jest": "^24.1.3",
-    "eslint-plugin-prettier": "^3.1.4",
-    "eslint-plugin-react": "^7.21.5",
+    "@typescript-eslint/eslint-plugin": "^5.56.0",
+    "@typescript-eslint/parser": "^5.56.0",
+    "eslint": "^8.36.0",
+    "eslint-config-prettier": "^8.8.0",
+    "eslint-plugin-jest": "^27.2.1",
+    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-react": "^7.32.2",
     "jest": "^26.4.2",
     "jest-junit": "^11.1.0",
     "jest-raw-loader": "^1.0.1",
     "jest-summary-reporter": "^0.0.2",
-    "lerna": "^4.0.0",
+    "lerna": "^7.0.0",
     "npm-run-all": "^4.1.5",
-    "prettier": "^2.1.0",
+    "prettier": "^2.8.6",
     "rimraf": "^3.0.2",
-    "shell-quote": "^1.7.2",
-    "typescript": "~4.1.3"
+    "shell-quote": "^1.7.2"
   }
 }

packages/jupyterlab-preview/src/preview.tsx

@@ -59,22 +59,26 @@ export class VoilaPreview extends DocumentWidget<IFrame, INotebookModel> {
 
     window.onmessage = (event: any) => {
       //console.log("EVENT: ", event);
-
-      switch (event.data?.level) {
+      const level = event?.data?.level;
+      const msg = event?.data?.msg;
+      if (!level || !msg) {
+        return;
+      }
+      switch (level) {
         case 'debug':
-          console.debug(...event.data?.msg);
+          console.debug(msg);
           break;
 
         case 'info':
-          console.info(...event.data?.msg);
+          console.info(msg);
           break;
 
         case 'warn':
-          console.warn(...event.data?.msg);
+          console.warn(msg);
           break;
 
         case 'error':
-          console.error(...event.data?.msg);
+          console.error(msg);
           break;
 
         default:

packages/voila/package.json

@@ -20,8 +20,8 @@
     "@jupyterlab/json-extension": "^4.0.0",
     "@jupyterlab/logconsole": "^4.0.0",
     "@jupyterlab/mainmenu": "^4.0.0",
-    "@jupyterlab/markdownviewer-extension": "^4.0.0",
     "@jupyterlab/markedparser-extension": "^4.0.0",
+    "@jupyterlab/mathjax-extension": "^4.0.0",
     "@jupyterlab/mathjax2-extension": "^4.0.0",
     "@jupyterlab/nbformat": "^4.0.0",
     "@jupyterlab/notebook": "^4.0.0",

packages/voila/src/index.ts

@@ -14,3 +14,4 @@ export * from './tools';
 export * from './plugins/tree/browser';
 export * from './plugins/tree/listing';
 export * from './plugins/themes/thememanager';
+export * from './plugins/widget/renderedcells';

packages/voila/src/main.ts

@@ -20,7 +20,8 @@ import {
   IFederatedExtensionData,
   activePlugins,
   createModule,
-  loadComponent
+  loadComponent,
+  shouldUseMathJax2
 } from './tools';
 
 //Inspired by: https://github.com/jupyterlab/jupyterlab/blob/master/dev_mode/index.js
@@ -35,7 +36,6 @@ async function main() {
       (p: any) => p.id === '@jupyterlab/codemirror-extension:languages'
     ),
     require('@jupyterlab/markedparser-extension'),
-    require('@jupyterlab/mathjax2-extension'),
     require('@jupyterlab/rendermime-extension'),
     require('@jupyterlab/theme-light-extension'),
     require('@jupyterlab/theme-dark-extension'),
@@ -45,12 +45,17 @@ async function main() {
     plugins
   ];
 
+  if (shouldUseMathJax2()) {
+    mods.push(require('@jupyterlab/mathjax2-extension'));
+  } else {
+    mods.push(require('@jupyterlab/mathjax-extension'));
+  }
+
   const mimeExtensions = [
     require('@jupyterlab/javascript-extension'),
     require('@jupyterlab/json-extension'),
     require('@jupyterlab/vega5-extension')
   ];
-
   const extensionData: IFederatedExtensionData[] = JSON.parse(
     PageConfig.getOption('federated_extensions')
   );

packages/voila/src/plugins/widget.ts → packages/voila/src/plugins/widget/index.ts

@@ -30,9 +30,10 @@ import {
   IWidgetRegistryData
 } from '@jupyter-widgets/base';
 
-import { VoilaApp } from '../app';
+import { VoilaApp } from '../../app';
 
 import { Widget } from '@lumino/widgets';
+import { RenderedCells } from './renderedcells';
 
 const WIDGET_MIMETYPE = 'application/vnd.jupyter.widget-view+json';
 
@@ -78,7 +79,6 @@ export const widgetManager: JupyterFrontEndPlugin<IJupyterWidgetRegistry> = {
       },
       -10
     );
-
     window.addEventListener('beforeunload', (e) => {
       const data = new FormData();
       // it seems if we attach this to early, it will not be called
@@ -113,7 +113,16 @@ export const renderOutputsPlugin: JupyterFrontEndPlugin<void> = {
     app: JupyterFrontEnd,
     rendermime: IRenderMimeRegistry
   ): Promise<void> => {
-    // Render outputs
+    // TODO: Typeset a fake element to get MathJax loaded, remove this hack once
+    // MathJax 2 is removed.
+    await rendermime.latexTypesetter?.typeset(document.createElement('div'));
+
+    // Render latex in markdown cells
+    const mdOutput = document.body.querySelectorAll('div.jp-MarkdownOutput');
+    mdOutput.forEach((md) => {
+      rendermime.latexTypesetter?.typeset(md as HTMLElement);
+    });
+    // Render code cell
     const cellOutputs = document.body.querySelectorAll(
       'script[type="application/vnd.voila.cell-output+json"]'
     );
@@ -150,7 +159,7 @@ export const renderOutputsPlugin: JupyterFrontEndPlugin<void> = {
     });
     const node = document.getElementById('rendered_cells');
     if (node) {
-      const cells = new Widget({ node });
+      const cells = new RenderedCells({ node });
       app.shell.add(cells, 'main');
     }
   }

packages/voila/src/plugins/widget/renderedcells.ts

@@ -0,0 +1,22 @@
+import { Message } from '@lumino/messaging';
+import { Widget } from '@lumino/widgets';
+
+/**
+ * Wrapper widget of rendered cells, this class converts the Lumino resize
+ * message to a window event. It helps fix the zero-heigh issue of some
+ * widgets
+ *
+ */
+export class RenderedCells extends Widget {
+  processMessage(msg: Message): void {
+    super.processMessage(msg);
+    switch (msg.type) {
+      case 'resize':
+        window.dispatchEvent(new Event('resize'));
+        break;
+
+      default:
+        break;
+    }
+  }
+}

packages/voila/src/tools.ts

@@ -77,3 +77,27 @@ export interface IFederatedExtensionData {
   style?: string;
   mimeExtension?: string;
 }
+
+/**
+ * Check if Voila app should use MathJax 2 or MathJax 3
+ * @TODO remove in 1.0.0
+ */
+export function shouldUseMathJax2() {
+  const [urlParam, configParam] = ['fullMathjaxUrl', 'mathjaxConfig'];
+  const url = PageConfig.getOption(urlParam);
+  const config = PageConfig.getOption(configParam);
+  if (url !== 'null' || config !== 'null') {
+    PageConfig.setOption(
+      urlParam,
+      url === 'null'
+        ? 'https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.7/MathJax.js'
+        : url
+    );
+    PageConfig.setOption(
+      configParam,
+      config === 'null' ? 'TeX-AMS_CHTML-full,Safe' : config
+    );
+    return true;
+  }
+  return false;
+}

packages/voila/style/index.js

@@ -5,4 +5,5 @@ import '@jupyterlab/rendermime/style/index.js';
 import '@jupyterlab/docregistry/style/index.js';
 import '@jupyterlab/markedparser-extension/style/index.js';
 import '@jupyterlab/filebrowser/style/index.js';
+import '@jupyterlab/mathjax-extension/style/index.js';
 import './base.css';

share/jupyter/voila/templates/classic/index.html.j2

@@ -53,6 +53,10 @@
   {{ super() }}
 {%- endblock notebook_css -%}
 
+{%- block html_head_js_mathjax -%}
+{# remove mathjax CDN #}
+{%- endblock html_head_js_mathjax -%}
+
 {% block body_header %}
 <body data-base-url="{{resources.base_url}}voila/">
   {{ spinner.html() }}

share/jupyter/voila/templates/lab/index.html.j2

@@ -48,6 +48,10 @@
   {{ super() }}
 {%- endblock notebook_css -%}
 
+{%- block html_head_js_mathjax -%}
+{# remove mathjax CDN #}
+{%- endblock html_head_js_mathjax -%}
+
 {# this overrides the default behaviour of rendering static widgets #}
 {% block jupyter_widgets %}
 {% endblock jupyter_widgets %}

share/jupyter/voila/templates/reveal/index.html.j2

@@ -58,6 +58,10 @@
   {{ super() }}
 {%- endblock notebook_css -%}
 
+{%- block html_head_js_mathjax -%}
+{# remove mathjax CDN #}
+{%- endblock html_head_js_mathjax -%}
+
 {% block body_header %}
 {% if resources.theme == 'dark' %}
 <body class="jp-Notebook" data-base-url="{{resources.base_url}}voila/" data-jp-theme-light="false" data-jp-theme-name="JupyterLab Dark">

tsconfig.eslint.json

@@ -1,5 +1,7 @@
 {
   "extends": "./tsconfigbase",
   "include": ["packages/**/*", "ui-tests"],
-  "types": ["jest"]
+  "compilerOptions": {
+    "types": ["jest"]
+  }
 }

ui-tests/package.json

@@ -4,7 +4,7 @@
   "description": "Voila UI Tests",
   "private": true,
   "scripts": {
-    "start": "voila ../notebooks --no-browser --show_tracebacks True",
+    "start": "voila ../notebooks --no-browser --show_tracebacks True --Voila.mathjax_url=https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.7/MathJax.js",
     "start:detached": "yarn run start&",
     "test": "npx playwright test",
     "test:debug": "PWDEBUG=1 playwright test",