Fix block bug

Author: choldgraf

.github/workflows/docs.yml

@@ -23,7 +23,7 @@ jobs:
         with:
           node-version: 22
       - name: Build docs
-        run: npx -y mystmd build --html
+        run: npx -y mystmd build --html --execute
         env:
           BASE_URL: /myst-lightbox/
         working-directory: docs

docs/myst.yml

@@ -3,10 +3,14 @@ project:
   id: myst-lightbox
   title: myst-lightbox
   github: https://github.com/choldgraf/myst-lightbox
+  jupyter:
+    binder:
+      repo: https://github.com/executablebooks/thebe-binder-base
   plugins:
     - ../src/index.mjs
   toc:
     - file: index.md
+    - file: reference.md
 
 site:
   template: book-theme

docs/reference.md

@@ -0,0 +1,27 @@
+---
+title: Reference example with Binder
+jupyter:
+  kernelspec:
+    display_name: Python 3
+    language: python
+    name: python3
+---
+
+# Reference example with Binder
+
+This page demonstrates that the lightbox plugin coexists with executable code cells and a Binder kernel.
+
+```{code-cell} python
+from matplotlib import pyplot as plt
+fig, ax = plt.subplots()
+ax.scatter([1, 2, 3], [1, 3, 2])
+```
+
+The figure below remains a clickable lightbox while compute is enabled:
+
+:::{figure} https://images.unsplash.com/photo-1501785888041-af3ef285b470?w=1600
+:alt: A mountain lake at dusk
+:width: 80%
+
+A mountain lake at dusk.
+:::

docs/requirements.txt

@@ -0,0 +1,2 @@
+jupyter
+matplotlib

src/index.mjs

@@ -48,11 +48,18 @@ const injectWidgetTransform = {
       utils.selectAll('image', tree).length > 0 ||
       utils.selectAll('container[kind="figure"]', tree).length > 0;
     if (!hasImages) return;
+    // Wrap in a `block` because thebe execution seems to assume that everything
+    // is a block-level item
     tree.children.push({
-      type: 'anywidget',
-      esm: pathMod.relative(pathMod.dirname(file.path), PLUGIN_PATH),
-      model: {},
-      id: crypto.randomUUID(),
+      type: 'block',
+      children: [
+        {
+          type: 'anywidget',
+          esm: pathMod.relative(pathMod.dirname(file.path), PLUGIN_PATH),
+          model: {},
+          id: crypto.randomUUID(),
+        },
+      ],
     });
   },
 };