@marimo-team/islands 0.21.2-dev0 → 0.21.2-dev12
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/main.js +18 -9
- package/dist/style.css +1 -1
- package/package.json +1 -1
- package/src/css/md.css +7 -0
- package/src/utils/__tests__/download.test.tsx +2 -2
- package/src/utils/download.ts +4 -3
- package/src/utils/html-to-image.ts +6 -0
package/package.json
CHANGED
package/src/css/md.css
CHANGED
|
@@ -374,6 +374,13 @@ button .prose.prose {
|
|
|
374
374
|
@apply p-4 pt-0;
|
|
375
375
|
}
|
|
376
376
|
|
|
377
|
+
/* Restore proper list indentation inside details blocks.
|
|
378
|
+
The p-4 above overrides prose's padding-inline-start for bullet space.
|
|
379
|
+
This ensures bullets render correctly with list-style-position: outside. */
|
|
380
|
+
.markdown details > :is(ul, ol) {
|
|
381
|
+
padding-inline-start: 2.5rem;
|
|
382
|
+
}
|
|
383
|
+
|
|
377
384
|
.markdown .codehilite {
|
|
378
385
|
background-color: var(--slate-2);
|
|
379
386
|
border-radius: 4px;
|
|
@@ -437,8 +437,8 @@ describe("downloadHTMLAsImage", () => {
|
|
|
437
437
|
await downloadHTMLAsImage({ element: mockElement, filename: "test" });
|
|
438
438
|
|
|
439
439
|
expect(toast).toHaveBeenCalledWith({
|
|
440
|
-
title: "
|
|
441
|
-
description: "Failed
|
|
440
|
+
title: "Failed to download as PNG",
|
|
441
|
+
description: "Failed",
|
|
442
442
|
variant: "danger",
|
|
443
443
|
});
|
|
444
444
|
});
|
package/src/utils/download.ts
CHANGED
|
@@ -156,10 +156,11 @@ export async function downloadHTMLAsImage(opts: {
|
|
|
156
156
|
// Get screenshot
|
|
157
157
|
const dataUrl = await toPng(element);
|
|
158
158
|
downloadByURL(dataUrl, Filenames.toPNG(filename));
|
|
159
|
-
} catch {
|
|
159
|
+
} catch (error) {
|
|
160
|
+
Logger.error("Error downloading as PNG", error);
|
|
160
161
|
toast({
|
|
161
|
-
title: "
|
|
162
|
-
description:
|
|
162
|
+
title: "Failed to download as PNG",
|
|
163
|
+
description: prettyError(error),
|
|
163
164
|
variant: "danger",
|
|
164
165
|
});
|
|
165
166
|
} finally {
|
|
@@ -140,6 +140,11 @@ export const necessaryStyleProperties = [
|
|
|
140
140
|
"cursor",
|
|
141
141
|
];
|
|
142
142
|
|
|
143
|
+
// 1x1 transparent PNG as a fallback for images that fail to embed (e.g., cross-origin).
|
|
144
|
+
// Without this, failed embeds leave external URLs in the cloned DOM, which taints the canvas.
|
|
145
|
+
const TRANSPARENT_PIXEL =
|
|
146
|
+
"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAC0lEQVQI12NgAAIABQABNjN9GQAAAAlwSFlzAAAWJQAAFiUBSVIk8AAAAA0lEQVQI12P4z8BQDwAEgAF/QualIQAAAABJRU5ErkJggg==";
|
|
147
|
+
|
|
143
148
|
/**
|
|
144
149
|
* Default options for html-to-image conversions.
|
|
145
150
|
* These handle common edge cases like filtering out toolbars and logging errors.
|
|
@@ -162,6 +167,7 @@ export const defaultHtmlToImageOptions: HtmlToImageOptions = {
|
|
|
162
167
|
return true;
|
|
163
168
|
}
|
|
164
169
|
},
|
|
170
|
+
imagePlaceholder: TRANSPARENT_PIXEL,
|
|
165
171
|
onImageErrorHandler: (event) => {
|
|
166
172
|
Logger.error("Error loading image:", event);
|
|
167
173
|
},
|