fix(web): improve Word document previews

apps/web/package.json

@@ -15,7 +15,7 @@
   },
   "dependencies": {
     "@base-ui/react": "^1.9.0",
-    "@betteroffice/docx": "0.4.3",
+    "@betteroffice/docx": "0.5.1",
     "@betteroffice/fonts": "0.4.0",
     "@betteroffice/fonts-cjk": "0.4.0",
     "@betteroffice/pptx": "0.5.1",

apps/web/src/components/files/office/Presentation.tsx

@@ -8,12 +8,8 @@ import {
 } from "../fileSurfaceChrome";
 import { OfficePages, type PaintPage } from "./OfficePages";
 import { createWorkerClient } from "./worker-rpc";
-import {
-  maxImageSide,
-  type SlideMethods,
-  type SlideSummary,
-  type VectorRequest,
-} from "./slide-protocol";
+import type { SlideMethods, SlideSummary } from "./slide-protocol";
+import { rasterize } from "./vector-pictures";
 
 type Opened = { slides: readonly SlideSummary[]; paint: PaintPage };
 export default function Presentation(props: {
@@ -160,28 +156,3 @@ export default function Presentation(props: {
     </div>
   );
 }
-async function rasterize(request: VectorRequest) {
-  const url = URL.createObjectURL(request.blob);
-  const image = new Image();
-  image.src = url;
-  try {
-    await image.decode();
-    const shrink = Math.min(1, maxImageSide / Math.max(image.naturalWidth, image.naturalHeight));
-    const size = request.size ?? {
-      width: Math.max(1, Math.round(image.naturalWidth * shrink)),
-      height: Math.max(1, Math.round(image.naturalHeight * shrink)),
-    };
-    return {
-      asset: request.asset,
-      bitmap: await createImageBitmap(image, {
-        resizeWidth: size.width,
-        resizeHeight: size.height,
-        resizeQuality: "high",
-      }),
-    };
-  } catch {
-    return { asset: request.asset, bitmap: undefined };
-  } finally {
-    URL.revokeObjectURL(url);
-  }
-}

apps/web/src/components/files/office/WordDocument.tsx

@@ -4,6 +4,7 @@ import { Tooltip, TooltipTrigger, TooltipPopup } from "~/components/ui/tooltip";
 import { Fragment, useEffect, useRef, useState } from "react";
 import { FileSurfaceLoading } from "../fileSurfaceChrome";
 import { OfficePages, type PaintPage } from "./OfficePages";
+import { rasterize } from "./vector-pictures";
 import { createWorkerClient } from "./worker-rpc";
 import {
   layerFont,
@@ -39,24 +40,41 @@ export default function WordDocument(props: {
     worker.addEventListener("error", fail);
     worker.addEventListener("messageerror", fail);
     const buffer = bytes.slice(0);
-    const paint: PaintPage = async (index, canvas, scale, signal) => {
-      const bitmap = await engine.call(
+    const paint = async (
+      index: number,
+      canvas: HTMLCanvasElement,
+      scale: number,
+      signal: AbortSignal,
+      again = false,
+    ): Promise<void> => {
+      const painted = await engine.call(
         "paint",
         { index, scale, ratio: window.devicePixelRatio || 1 },
         { key: `paint:${index}`, signal },
       );
       void engine
         .call("build", { index: index + 1 }, { key: "build", signal })
         .catch(() => undefined);
-      if (!bitmap) return;
+      if (!painted) return;
       const context = canvas.getContext("bitmaprenderer");
       if (!context || signal.aborted) {
-        bitmap.close();
+        painted.bitmap.close();
         return;
       }
-      canvas.width = bitmap.width;
-      canvas.height = bitmap.height;
-      context.transferFromImageBitmap(bitmap);
+      canvas.width = painted.bitmap.width;
+      canvas.height = painted.bitmap.height;
+      context.transferFromImageBitmap(painted.bitmap);
+      if (again || !painted.vectors.length) return;
+      const bitmaps = await Promise.all(painted.vectors.map(rasterize));
+      if (signal.aborted) {
+        bitmaps.forEach((value) => value.bitmap?.close());
+        return;
+      }
+      await engine.call("vectors", bitmaps, {
+        transfer: bitmaps.flatMap((value) => (value.bitmap ? [value.bitmap] : [])),
+        signal,
+      });
+      if (!signal.aborted) await paint(index, canvas, scale, signal, true);
     };
     void engine
       .call("open", { bytes: buffer }, { transfer: [buffer], signal: controller.signal })