0.4.x: Fix markdown rendering logic (#1491)

* Fix markdown rendering logic * Iterate * Iterate * Iterate * Iterate * Iterate * Working version * Linter * Update ui-test * Fix ui-tests * Fix ui-tests for both ipywidgets 7 and 8
voila-dashboards · Oct 9, 2024 · 1ad78a3 · 1ad78a3
1 parent f68b86c
commit 1ad78a3
Show file tree

Hide file tree

Showing 12 changed files with 1,923 additions and 979 deletions.
diff --git a/.gitignore b/.gitignore
@@ -49,3 +49,5 @@ ui-tests/playwright-report
 ui-tests/test-results
 ui-tests/benchmark-results
 ui-tests/jlab_root
+
+.yarn
diff --git a/package.json b/package.json
@@ -52,6 +52,6 @@
     "prettier": "^1.19.0",
     "rimraf": "^3.0.2",
     "shell-quote": "^1.7.2",
-    "typescript": "~4.1.3"
+    "typescript": "~5"
   }
 }
diff --git a/packages/voila/package.json b/packages/voila/package.json
@@ -15,9 +15,12 @@
     "@jupyter-widgets/jupyterlab-manager": "^5.0.8",
     "@jupyterlab/application": "^3 || ^4",
     "@jupyterlab/apputils": "^3 || ^4",
+    "@jupyterlab/codemirror": "^3 || ^4",
     "@jupyterlab/coreutils": "^5 || ^6",
     "@jupyterlab/docregistry": "^3 || ^4 || ^5",
     "@jupyterlab/javascript-extension": "^3 || ^4",
+    "@jupyterlab/markedparser-extension": "^4",
+    "@jupyterlab/mathjax-extension": "^4",
     "@jupyterlab/notebook": "^3 || ^4",
     "@jupyterlab/outputarea": "^3 || ^4",
     "@jupyterlab/rendermime": "^3 || ^4",
@@ -29,8 +32,7 @@
     "@lumino/signaling": "^1.4.3 || ^2",
     "@lumino/virtualdom": "^1.8.0 || ^2",
     "@lumino/widgets": "^1.18.0 || ^2",
-    "jquery": "^3.7.0",
-    "mathjax-full": "^3.0.0"
+    "jquery": "^3.7.0"
   },
   "devDependencies": {
     "@babel/core": "^7.2.2",

diff --git a/packages/voila/src/index.ts b/packages/voila/src/index.ts
@@ -14,7 +14,16 @@ export {
   standardRendererFactories
 } from '@jupyterlab/rendermime';
 
+export { EditorLanguageRegistry } from '@jupyterlab/codemirror';
+
+export { PageConfig } from '@jupyterlab/coreutils';
+
+export { MathJaxTypesetter } from '@jupyterlab/mathjax-extension';
+
+export { createMarkdownParser } from '@jupyterlab/markedparser-extension';
+
 export { extendedRendererFactories } from './rendermime';
 export { WidgetManager } from './manager';
 export { connectKernel } from './kernel';
-export { renderMathJax } from './mathjax';
+// This is a no-op, keeping this around for backward compat
+export function renderMathJax() {}
diff --git a/packages/voila/src/manager.ts b/packages/voila/src/manager.ts
@@ -31,6 +31,7 @@ import * as LuminoVirtualdom from '@lumino/virtualdom';
 import * as LuminoAlgorithm from '@lumino/algorithm';
 import * as LuminoCommands from '@lumino/commands';
 import * as LuminoDomutils from '@lumino/domutils';
+import * as Mathjax from '@jupyterlab/mathjax-extension';
 
 import { MessageLoop } from '@lumino/messaging';
 
@@ -52,6 +53,8 @@ if (typeof window !== 'undefined' && typeof window.define !== 'undefined') {
   window.define('@jupyterlab/coreutils', CoreUtils);
   window.define('@jupyterlab/docregistry', DocRegistry);
   window.define('@jupyterlab/outputarea', OutputArea);
+  window.define('@jupyterlab/outputarea', OutputArea);
+  window.define('@jupyterlab/mathjax-extension', Mathjax);
 
   window.define('@phosphor/widgets', LuminoWidget);
   window.define('@phosphor/signaling', LuminoSignaling);

diff --git a/packages/voila/src/mathjax.ts b/packages/voila/src/mathjax.ts
diff --git a/share/jupyter/voila/templates/base/static/main.js b/share/jupyter/voila/templates/base/static/main.js
@@ -42,10 +42,32 @@ require([window.voila_js_url || 'static/voila'], function(voila) {
             saveState: false
         };
 
+        const languages = new voila.EditorLanguageRegistry();
+
+        const [urlParam, configParam] = ['fullMathjaxUrl', 'mathjaxConfig'];
+        const url = voila.PageConfig.getOption(urlParam);
+        const config = voila.PageConfig.getOption(configParam);
+        if (url !== 'null' || config !== 'null') {
+            voila.PageConfig.setOption(
+                urlParam,
+                url === 'null'
+                ? 'https://cdnjs.cloudflare.com/ajax/libs/mathjax/3.2.2/es5/latest.min.js'
+                : url
+            );
+            voila.PageConfig.setOption(
+                configParam,
+                config === 'null' ? 'TeX-AMS_CHTML-full,Safe' : config
+            );
+        }
+
         const rendermime = new voila.RenderMimeRegistry({
-            initialFactories: voila.extendedRendererFactories
+            initialFactories: voila.extendedRendererFactories,
+            latexTypesetter: new voila.MathJaxTypesetter({ url: voila.PageConfig.getOption(urlParam), config: voila.PageConfig.getOption(configParam) }),
+            markdownParser: voila.createMarkdownParser(languages)
         });
 
+        await rendermime.latexTypesetter.typeset(document.createElement('div'));
+
         var widgetManager = new voila.WidgetManager(context, rendermime, settings);
 
         async function init() {
@@ -61,7 +83,6 @@ require([window.voila_js_url || 'static/voila'], function(voila) {
                 kernel.dispose();
             });
             await widgetManager.build_widgets();
-            voila.renderMathJax();
         }
 
         if (document.readyState === 'complete') {

diff --git a/share/jupyter/voila/templates/classic/index.html.j2 b/share/jupyter/voila/templates/classic/index.html.j2
@@ -30,6 +30,10 @@
 
 {%- endblock html_head_js -%}
 
+{%- block html_head_js_mathjax -%}
+{# remove mathjax CDN #}
+{%- endblock html_head_js_mathjax -%}
+
 {%- block html_head_css -%}
   {{ resources.include_css("static/materialcolors.css") }}
   {{ resources.include_css("static/labvariables.css") }}

diff --git a/share/jupyter/voila/templates/lab/index.html.j2 b/share/jupyter/voila/templates/lab/index.html.j2
@@ -48,6 +48,10 @@
 {% endif %}
 {%- endblock html_head_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 %}

diff --git a/share/jupyter/voila/templates/reveal/index.html.j2 b/share/jupyter/voila/templates/reveal/index.html.j2
@@ -31,6 +31,10 @@
 
 {%- endblock html_head_js -%}
 
+{%- block html_head_js_mathjax -%}
+{# remove mathjax CDN #}
+{%- endblock html_head_js_mathjax -%}
+
 {%- block html_head_css -%}
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@^5/css/all.min.css" type="text/css" />
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@^5/css/v4-shims.min.css" type="text/css" />

diff --git a/ui-tests/tests/voila.test.ts b/ui-tests/tests/voila.test.ts
@@ -85,7 +85,7 @@ test.describe('Voila performance Tests', () => {
         `/voila/render/${notebookName}.ipynb?voila-template=classic`
       );
       // wait for the widgets to load
-      await page.waitForSelector('span[role="presentation"] >> text=x');
+      await page.waitForSelector('.slider-container');
     };
     await addBenchmarkToTest(notebookName, testFunction, testInfo, browserName);
 
@@ -105,7 +105,7 @@ test.describe('Voila performance Tests', () => {
     const testFunction = async () => {
       await page.goto(`/voila/render/${notebookName}.ipynb`);
       // wait for the widgets to load
-      await page.waitForSelector('span.mjx-char >> text=x');
+      await page.waitForSelector('.slider-container');
     };
     await addBenchmarkToTest(notebookName, testFunction, testInfo, browserName);
     // change the value of the slider
@@ -130,7 +130,7 @@ test.describe('Voila performance Tests', () => {
     const testFunction = async () => {
       await page.goto(`/voila/render/${notebookName}.ipynb?voila-theme=dark`);
       // wait for the widgets to load
-      await page.waitForSelector('span[role="presentation"] >> text=x');
+      await page.waitForSelector('.slider-container');
     };
     await addBenchmarkToTest(notebookName, testFunction, testInfo, browserName);
 
@@ -288,7 +288,7 @@ test.describe('Voila performance Tests', () => {
     const notebookName = 'reveal';
     const testFunction = async () => {
       await page.goto(`/voila/render/${notebookName}.ipynb`);
-      await page.waitForSelector('span[role="presentation"] >> text=x');
+      await page.waitForSelector('.slider-container');
     };
     await addBenchmarkToTest(notebookName, testFunction, testInfo, browserName);
     expect(await page.screenshot()).toMatchSnapshot(`${notebookName}.png`);