Load mathjax manually

voila-dashboards · Oct 30, 2023 · ca53840 · ca53840
1 parent 5555c21
commit ca53840
Show file tree

Hide file tree

Showing 4 changed files with 4,164 additions and 2,700 deletions.
diff --git a/packages/voila/src/index.ts b/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';
diff --git a/packages/voila/src/plugins/widget.ts → packages/voila/src/plugins/widget/index.ts b/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';
 
@@ -112,6 +113,10 @@ export const renderOutputsPlugin: JupyterFrontEndPlugin<void> = {
     app: JupyterFrontEnd,
     rendermime: IRenderMimeRegistry
   ): Promise<void> => {
+    // 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) => {
@@ -154,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');
     }
   }

diff --git a/packages/voila/src/plugins/widget/renderedcells.ts b/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;
+    }
+  }
+}