Add nbconvert version check (#1333)

* Add mistune version check

* check nbconvert version

* Update test

Author: trungleduc

.github/workflows/main.yml

@@ -58,6 +58,9 @@ jobs:
           voila tests/notebooks/sleep10seconds.ipynb --port=8878 --VoilaConfiguration.http_keep_alive_timeout=2 &
           sleep 2
           wget --read-timeout=5 --tries=1 http://localhost:8878
+          # Test nbconvert < 7.6.0
+          python -m pip install "nbconvert<7.6.0"
+          VOILA_TEST_XEUS_CLING=1 py.test tests/app/image_inlining_test.py
 
   test-osx:
     runs-on: ${{ matrix.os }}

ui-tests/playwright.config.js

@@ -16,5 +16,10 @@ module.exports = {
     video: 'retain-on-failure'
   },
   // Try one retry as some tests are flaky
-  retries: 1
+  retries: 1,
+  expect: {
+    toMatchSnapshot: {
+      maxDiffPixelRatio: 0.05
+    }
+  }
 };

ui-tests/tests/voila.test.ts

@@ -105,12 +105,13 @@ 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[role="presentation"] >> text=x');
+      await page.waitForSelector('span.mjx-char >> text=x');
     };
     await addBenchmarkToTest(notebookName, testFunction, testInfo, browserName);
     // change the value of the slider
     await page.fill('text=4.00', '8.00');
     await page.keyboard.down('Enter');
+    await page.waitForTimeout(500);
     // fetch the value of the label
     const value = await page.$eval('input', (el) => el.value);
 

voila/exporter.py

@@ -8,6 +8,7 @@
 #############################################################################
 
 import mimetypes
+from typing import Optional
 
 import traitlets
 from traitlets.config import Config
@@ -20,11 +21,20 @@
 from nbconvert.exporters.html import HTMLExporter
 from nbconvert.exporters.templateexporter import TemplateExporter
 from nbconvert.filters.highlight import Highlight2HTML
-from nbconvert.filters.markdown_mistune import IPythonRenderer, MarkdownWithMath
-
+from nbconvert.filters.markdown_mistune import (
+    IPythonRenderer,
+    MarkdownWithMath,
+)
 from .static_file_handler import TemplateStaticFileHandler
 from .utils import create_include_assets_functions
 
+try:
+    from nbconvert.filters.markdown_mistune import MISTUNE_V3  # noqa
+
+    NB_CONVERT_760 = True
+except ImportError:
+    NB_CONVERT_760 = False
+
 
 class VoilaMarkdownRenderer(IPythonRenderer):
     """Custom markdown renderer that inlines images"""
@@ -33,14 +43,20 @@ def __init__(self, contents_manager, *args, **kwargs):
         self.contents_manager = contents_manager
         super().__init__(*args, **kwargs)
 
-    def image(self, src, title, text):
+    def image(self, text: str, url: str, title: Optional[str] = None):
         contents_manager = self.contents_manager
+        # for nbconvert <7.6.0, the first argument is the URL
+        src = url if NB_CONVERT_760 else text
+
         if contents_manager.file_exists(src):
             content = contents_manager.get(src, format="base64")
             data = content["content"].replace("\n", "")  # remove the newline
             mime_type, encoding = mimetypes.guess_type(src)
             src = f"data:{mime_type};base64,{data}"
-        return super().image(src, title, text)
+        if NB_CONVERT_760:
+            return super().image(text, src, title)
+        else:
+            return super().image(src, url, title)
 
 
 class VoilaExporter(HTMLExporter):