Backport PR #1333 on branch 0.4.x (Add nbconvert version check)

.github/workflows/main.yml

@@ -54,6 +54,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
 
     - name: Flake8
       shell: bash -l {0}

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,10 +21,16 @@
 from nbconvert.exporters.html import HTMLExporter
 from nbconvert.exporters.templateexporter import TemplateExporter
 from nbconvert.filters.highlight import Highlight2HTML
-
 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"""
@@ -32,14 +39,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 = 'data:{mime_type};base64,{data}'.format(mime_type=mime_type, data=data)
-        return super().image(src, title, text)
+            src = f"data:{mime_type};base64,{data}"
+        if NB_CONVERT_760:
+            return super().image(text, src, title)
+        else:
+            return super().image(src, url, title)
 
 
 class VoilaExporter(HTMLExporter):