@starrykit/slides-editor 0.1.28 → 0.1.30

package/dist/index.js

@@ -11010,7 +11010,7 @@ async function renderSlideThumbnail(slide) {
     if (!root) {
       throw new Error("Slide root not found while rendering thumbnail.");
     }
-    const renderTarget = doc.body ?? root;
+    const renderTarget = createThumbnailRenderTarget(doc, doc.body ?? root, slide);
     return await renderThumbnailPng(doc, renderTarget, slide);
   } finally {
     iframe.remove();
@@ -11034,11 +11034,14 @@ async function waitForImages(doc) {
   ]);
 }
 async function renderThumbnailPng(doc, renderTarget, slide) {
+  const thumbnailSize = getThumbnailSize(slide);
   const options = {
     cacheBust: true,
     pixelRatio: THUMBNAIL_PIXEL_RATIO,
-    canvasWidth: THUMBNAIL_DISPLAY_WIDTH,
-    canvasHeight: Math.round(slide.height / slide.width * THUMBNAIL_DISPLAY_WIDTH),
+    width: thumbnailSize.width,
+    height: thumbnailSize.height,
+    canvasWidth: thumbnailSize.width,
+    canvasHeight: thumbnailSize.height,
     skipFonts: false
   };
   try {
@@ -11048,6 +11051,47 @@ async function renderThumbnailPng(doc, renderTarget, slide) {
     return await toPng(renderTarget, options);
   }
 }
+function getThumbnailSize(slide) {
+  return {
+    width: THUMBNAIL_DISPLAY_WIDTH,
+    height: Math.round(slide.height / slide.width * THUMBNAIL_DISPLAY_WIDTH)
+  };
+}
+function createThumbnailRenderTarget(doc, root, slide) {
+  const thumbnailSize = getThumbnailSize(slide);
+  const scale = Math.min(thumbnailSize.width / slide.width, thumbnailSize.height / slide.height);
+  const scaledRoot = cloneSlideRoot(root);
+  const frame = doc.createElement("div");
+  const rootStyle = doc.defaultView?.getComputedStyle(root);
+  const rootBackground = rootStyle?.background;
+  frame.style.width = `${thumbnailSize.width}px`;
+  frame.style.height = `${thumbnailSize.height}px`;
+  frame.style.position = "relative";
+  frame.style.overflow = "hidden";
+  frame.style.margin = "0";
+  frame.style.padding = "0";
+  frame.style.boxSizing = "border-box";
+  if (rootBackground && rootBackground !== "rgba(0, 0, 0, 0)" && rootBackground !== "transparent") {
+    frame.style.background = rootBackground;
+  }
+  scaledRoot.style.width = `${slide.width}px`;
+  scaledRoot.style.height = `${slide.height}px`;
+  scaledRoot.style.position = "absolute";
+  scaledRoot.style.left = "0";
+  scaledRoot.style.top = "0";
+  scaledRoot.style.margin = "0";
+  scaledRoot.style.maxWidth = "none";
+  scaledRoot.style.maxHeight = "none";
+  scaledRoot.style.boxSizing = "border-box";
+  scaledRoot.style.transform = `scale(${scale})`;
+  scaledRoot.style.transformOrigin = "top left";
+  frame.appendChild(scaledRoot);
+  doc.body.appendChild(frame);
+  return frame;
+}
+function cloneSlideRoot(root) {
+  return root.cloneNode(true);
+}
 function removeBrokenImages(doc) {
   for (const image of Array.from(doc.images)) {
     if (image.complete && image.naturalWidth > 0) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@starrykit/slides-editor",
-  "version": "0.1.28",
+  "version": "0.1.30",
   "description": "Embeddable React editor UI for Starry Slides — host-driven through props and callbacks.",
   "license": "MIT",
   "homepage": "https://github.com/StarryKit/starry-slides#readme",
@@ -30,7 +30,7 @@
     "build": "tsc -p tsconfig.json && tsup src/index.tsx --format esm --external react --external react-dom"
   },
   "dependencies": {
-    "@starrykit/slides-core": "0.1.28",
+    "@starrykit/slides-core": "0.1.30",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "html-to-image": "^1.11.11",