@marimo-team/islands 0.19.7-dev19 → 0.19.7-dev20

package/dist/main.js

@@ -60930,6 +60930,17 @@ ${r}
         VY
       ]
     }), r[18] = BY, r[19] = VY, r[20] = IY, r[21] = HY) : HY = r[21], HY;
+  }, Filenames = {
+    toMarkdown: (e) => Filenames.replace(e, "md"),
+    toHTML: (e) => Filenames.replace(e, "html"),
+    toPNG: (e) => Filenames.replace(e, "png"),
+    toPDF: (e) => Filenames.replace(e, "pdf"),
+    toPY: (e) => Filenames.replace(e, "py"),
+    withoutExtension: (e) => {
+      let r = e.split(".");
+      return r.length === 1 ? e : r.slice(0, -1).join(".");
+    },
+    replace: (e, r) => e.endsWith(`.${r}`) ? e : `${Filenames.withoutExtension(e)}.${r}`
   };
   function resolveUrl(e, r) {
     if (e.match(/^[a-z]+:\/\//i)) return e;
@@ -61370,21 +61381,27 @@ ${r}
     let { width: c, height: d } = getImageSize(e, r), f = await createImage(await toSvg(e, r)), _ = document.createElement("canvas"), v = _.getContext("2d"), y = r.pixelRatio || getPixelRatio(), S = r.canvasWidth || c, w = r.canvasHeight || d;
     return _.width = S * y, _.height = w * y, r.skipAutoScale || checkCanvasDimensions(_), _.style.width = `${S}`, _.style.height = `${w}`, r.backgroundColor && (v.fillStyle = r.backgroundColor, v.fillRect(0, 0, _.width, _.height)), v.drawImage(f, 0, 0, _.width, _.height), _;
   }
-  async function toPng(e, r = {}) {
+  async function toPng$1(e, r = {}) {
     return (await toCanvas(e, r)).toDataURL();
   }
-  const Filenames = {
-    toMarkdown: (e) => Filenames.replace(e, "md"),
-    toHTML: (e) => Filenames.replace(e, "html"),
-    toPNG: (e) => Filenames.replace(e, "png"),
-    toPDF: (e) => Filenames.replace(e, "pdf"),
-    toPY: (e) => Filenames.replace(e, "py"),
-    withoutExtension: (e) => {
-      let r = e.split(".");
-      return r.length === 1 ? e : r.slice(0, -1).join(".");
+  const defaultHtmlToImageOptions = {
+    filter: (e) => {
+      try {
+        return "classList" in e ? !e.classList.contains("mpl-toolbar") : true;
+      } catch (e2) {
+        return Logger.error("Error filtering node:", e2), true;
+      }
     },
-    replace: (e, r) => e.endsWith(`.${r}`) ? e : `${Filenames.withoutExtension(e)}.${r}`
+    onImageErrorHandler: (e) => {
+      Logger.error("Error loading image:", e);
+    }
   };
+  function toPng(e, r) {
+    return toPng$1(e, {
+      ...defaultHtmlToImageOptions,
+      ...r
+    });
+  }
   async function downloadHTMLAsImage(e) {
     let { element: r, filename: c, prepare: d } = e, f = document.getElementById("App"), _ = (f == null ? void 0 : f.scrollTop) ?? 0, v;
     d ? v = d(r) : document.body.classList.add("printing");
@@ -72896,7 +72913,7 @@ Image URL: ${r.imageUrl}`)), contextToXml({
       return Logger.warn("Failed to get version from mount config"), null;
     }
   }
-  const marimoVersionAtom = atom(getVersionFromMountConfig() || "0.19.7-dev19"), showCodeInRunModeAtom = atom(true);
+  const marimoVersionAtom = atom(getVersionFromMountConfig() || "0.19.7-dev20"), showCodeInRunModeAtom = atom(true);
   atom(null);
   var import_compiler_runtime$89 = require_compiler_runtime();
   function useKeydownOnElement(e, r) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marimo-team/islands",
-  "version": "0.19.7-dev19",
+  "version": "0.19.7-dev20",
   "main": "dist/main.js",
   "types": "dist/index.d.ts",
   "type": "module",
@@ -128,7 +128,7 @@
     "eslint-plugin-header": "^3.1.1",
     "htm": "^3.1.1",
     "html-react-parser": "^5.2.11",
-    "html-to-image": "^1.11.13",
+    "html-to-image": "1.11.13",
     "humanize-duration": "^3.33.2",
     "iconify-icon": "^2.3.0",
     "jotai": "^2.16.1",

package/src/core/ai/context/providers/cell-output.ts

@@ -2,7 +2,6 @@
 
 import type { Completion } from "@codemirror/autocomplete";
 import type { FileUIPart } from "ai";
-import { toPng } from "html-to-image";
 import { processOutput } from "@/components/editor/output/console/process-output";
 import { type NotebookState, notebookAtom } from "@/core/cells/cells";
 import { type CellId, CellOutputId } from "@/core/cells/ids";
@@ -10,6 +9,7 @@ import { displayCellName } from "@/core/cells/names";
 import { isOutputEmpty } from "@/core/cells/outputs";
 import type { OutputMessage } from "@/core/kernel/messages";
 import type { JotaiStore } from "@/core/state/jotai";
+import { toPng } from "@/utils/html-to-image";
 import { Logger } from "@/utils/Logger";
 import { type AIContextItem, AIContextProvider } from "../registry";
 import { contextToXml } from "../utils";

package/src/core/export/__tests__/hooks.test.ts

@@ -137,7 +137,13 @@ describe("useEnrichCellOutputs", () => {
     expect(document.getElementById).toHaveBeenCalledWith(
       CellOutputId.create(cellId),
     );
-    expect(toPng).toHaveBeenCalledWith(mockElement);
+    expect(toPng).toHaveBeenCalledWith(
+      mockElement,
+      expect.objectContaining({
+        filter: expect.any(Function),
+        onImageErrorHandler: expect.any(Function),
+      }),
+    );
     expect(output).toEqual({
       [cellId]: ["image/png", mockDataUrl],
     });

package/src/utils/__tests__/download.test.tsx

@@ -155,7 +155,13 @@ describe("getImageDataUrlForCell", () => {
     const result = await getImageDataUrlForCell("cell-1" as CellId);
 
     expect(result).toBe(mockDataUrl);
-    expect(toPng).toHaveBeenCalledWith(mockElement);
+    expect(toPng).toHaveBeenCalledWith(
+      mockElement,
+      expect.objectContaining({
+        filter: expect.any(Function),
+        onImageErrorHandler: expect.any(Function),
+      }),
+    );
   });
 
   it("should add printing classes before capture when enablePrintMode is true", async () => {
@@ -352,7 +358,13 @@ describe("downloadHTMLAsImage", () => {
 
     await downloadHTMLAsImage({ element: mockElement, filename: "test" });
 
-    expect(toPng).toHaveBeenCalledWith(mockElement);
+    expect(toPng).toHaveBeenCalledWith(
+      mockElement,
+      expect.objectContaining({
+        filter: expect.any(Function),
+        onImageErrorHandler: expect.any(Function),
+      }),
+    );
     expect(mockAnchor.href).toBe(mockDataUrl);
     expect(mockAnchor.download).toBe("test.png");
     expect(mockAnchor.click).toHaveBeenCalled();
@@ -488,7 +500,13 @@ describe("downloadCellOutputAsImage", () => {
 
     await downloadCellOutputAsImage("cell-1" as CellId, "result");
 
-    expect(toPng).toHaveBeenCalledWith(mockElement);
+    expect(toPng).toHaveBeenCalledWith(
+      mockElement,
+      expect.objectContaining({
+        filter: expect.any(Function),
+        onImageErrorHandler: expect.any(Function),
+      }),
+    );
     expect(mockAnchor.download).toBe("result.png");
   });
 

package/src/utils/download.ts

@@ -1,11 +1,12 @@
 /* Copyright 2026 Marimo. All rights reserved. */
-import { toPng } from "html-to-image";
+
 import { toast } from "@/components/ui/use-toast";
 import { type CellId, CellOutputId } from "@/core/cells/ids";
 import { getRequestClient } from "@/core/network/requests";
 import { Filenames } from "@/utils/filenames";
 import { Paths } from "@/utils/paths";
 import { prettyError } from "./errors";
+import { toPng } from "./html-to-image";
 import { Logger } from "./Logger";
 
 /**

package/src/utils/html-to-image.ts

@@ -0,0 +1,41 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+import { toPng as htmlToImageToPng } from "html-to-image";
+import { Logger } from "./Logger";
+
+export type HtmlToImageOptions = Parameters<typeof htmlToImageToPng>[1];
+
+/**
+ * Default options for html-to-image conversions.
+ * These handle common edge cases like filtering out toolbars and logging errors.
+ */
+export const defaultHtmlToImageOptions: HtmlToImageOptions = {
+  filter: (node) => {
+    try {
+      if ("classList" in node) {
+        // Filter out matplotlib toolbars
+        return !node.classList.contains("mpl-toolbar");
+      }
+      return true;
+    } catch (error) {
+      Logger.error("Error filtering node:", error);
+      return true;
+    }
+  },
+  onImageErrorHandler: (event) => {
+    Logger.error("Error loading image:", event);
+  },
+};
+
+/**
+ * Convert an HTML element to a PNG data URL.
+ * This is a wrapper around html-to-image's toPng with default options applied.
+ */
+export function toPng(
+  element: HTMLElement,
+  options?: HtmlToImageOptions,
+): Promise<string> {
+  return htmlToImageToPng(element, {
+    ...defaultHtmlToImageOptions,
+    ...options,
+  });
+}