@formicoidea/labre-core 0.30.1 → 0.32.0

package/dist/_pkgs/affine-shared/types/index.js

@@ -1 +1 @@
-export * from './uni-component';
+export * from './uni-component.js';

package/dist/_pkgs/affine-shared/utils/computing.js

@@ -1,5 +1,5 @@
-import groupBy from 'lodash-es/groupBy';
-import maxBy from 'lodash-es/maxBy';
+import groupBy from 'lodash-es/groupBy.js';
+import maxBy from 'lodash-es/maxBy.js';
 export function getMostCommonValue(records, field) {
     const grouped = groupBy(records, record => record[field]);
     const values = Object.values(grouped);

package/dist/_pkgs/affine-shared/utils/dom/point-to-range.d.ts

@@ -13,4 +13,8 @@ declare global {
 export declare function caretRangeFromPoint(clientX: number, clientY: number): Range | null;
 export declare function resetNativeSelection(range: Range | null): void;
 export declare function getCurrentNativeRange(selection?: Selection | null): Range | null;
+export declare const api: {
+    caretRangeFromPoint: typeof caretRangeFromPoint;
+    resetNativeSelection: typeof resetNativeSelection;
+};
 export declare function handleNativeRangeAtPoint(x: number, y: number): void;

package/dist/_pkgs/affine-shared/utils/dom/point-to-range.js

@@ -63,11 +63,67 @@ export function getCurrentNativeRange(selection = window.getSelection()) {
     }
     return selection.getRangeAt(0);
 }
+// Indirection so that unit tests can mock these two browser-bound functions.
+export const api = {
+    caretRangeFromPoint,
+    resetNativeSelection,
+};
 export function handleNativeRangeAtPoint(x, y) {
-    const range = caretRangeFromPoint(x, y);
+    const range = api.caretRangeFromPoint(x, y);
+    if (range) {
+        normalizeCaretRange(range);
+    }
     const startContainer = range?.startContainer;
     // click on rich text
     if (startContainer instanceof Node) {
-        resetNativeSelection(range);
+        api.resetNativeSelection(range);
+    }
+}
+function lastMeaningfulTextNode(node) {
+    const walker = document.createTreeWalker(node, NodeFilter.SHOW_TEXT, {
+        acceptNode(node) {
+            return node.textContent && node.textContent.trim().length > 0
+                ? NodeFilter.FILTER_ACCEPT
+                : NodeFilter.FILTER_REJECT;
+        },
+    });
+    let last = null;
+    while (walker.nextNode()) {
+        last = walker.currentNode;
+    }
+    return last;
+}
+/**
+ * Clicking past the end of a line gives back a caret anchored on an *element*
+ * rather than on a text node. Such a range paints a caret for a frame and then
+ * loses it, because the editor only tracks carets that live inside text. Move
+ * the caret to the nearest meaningful text node so that it survives.
+ */
+function normalizeCaretRange(range) {
+    const { startContainer, startOffset } = range;
+    if (startContainer.nodeType === Node.TEXT_NODE)
+        return;
+    // Try to find text in the element at `startOffset`
+    const offsetEl = startOffset > 0
+        ? startContainer.childNodes[startOffset - 1]
+        : startContainer.childNodes[0];
+    if (offsetEl) {
+        if (offsetEl.nodeType === Node.TEXT_NODE) {
+            range.setStart(offsetEl, startOffset > 0 ? (offsetEl.textContent?.length ?? 0) : 0);
+            range.collapse(true);
+            return;
+        }
+        const text = lastMeaningfulTextNode(offsetEl);
+        if (text) {
+            range.setStart(text, text.textContent?.length ?? 0);
+            range.collapse(true);
+            return;
+        }
+    }
+    // Fallback, try to find text in startContainer
+    const text = lastMeaningfulTextNode(startContainer);
+    if (text) {
+        range.setStart(text, text.textContent?.length ?? 0);
+        range.collapse(true);
     }
 }

package/dist/_pkgs/affine-shared/utils/dom/viewport.d.ts

@@ -11,3 +11,63 @@ import type { EditorHost } from '../../../std/index.js';
  * ```
  */
 export declare function getViewportElement(editorHost: EditorHost): HTMLElement | null;
+/**
+ * Where a model point lands, in CSS pixels, for an overlay drawn *inside* the
+ * edgeless container: the selection rectangle, the resize handles, the remote
+ * cursors, the text editors mounted over an element.
+ *
+ * `Viewport.toViewCoord` answers in real screen pixels, so it multiplies by
+ * `viewScale` — the CSS scale an outer container puts on the whole editor,
+ * which is not 1 in a nested editor such as an embedded synced edgeless doc.
+ * An overlay lives *inside* that container, so its placement has to be stated
+ * in the container's already scaled space, exactly the way
+ * `GfxBlockComponent.getCSSTransform` states a block's. Positioning an overlay
+ * from `toViewCoord` lets the container apply its scale a second time, and the
+ * overlay drifts away from the element it decorates as soon as
+ * `viewScale !== 1`.
+ */
+export declare function toOverlayCoord(viewport: {
+    viewportX: number;
+    viewportY: number;
+    zoom: number;
+    viewScale: number;
+}, modelX: number, modelY: number): [number, number];
+/**
+ * The scale an overlay drawn inside the edgeless container has to wear so that
+ * it ends up painted at the viewport zoom. Counterpart of
+ * {@link toOverlayCoord}; same reasoning about `viewScale`.
+ */
+export declare function overlayScale(viewport: {
+    zoom: number;
+    viewScale: number;
+}): number;
+/**
+ * How wide and tall the visible viewport is *in the same units as*
+ * {@link toOverlayCoord}, so an overlay can tell whether it is about to run off
+ * the edge.
+ *
+ * `Viewport.width` / `Viewport.height` are the bounding client rect, i.e. real
+ * screen pixels. Comparing an overlay coordinate against them mixes two spaces
+ * and the flip or the clamp fires at the wrong moment under a scaled host.
+ */
+export declare function overlayViewportSize(viewport: {
+    width: number;
+    height: number;
+    viewScale: number;
+}): [number, number];
+/**
+ * Where a model point lands in *client* coordinates — what
+ * `document.caretRangeFromPoint`, `elementFromPoint` and a `PointerEvent`'s
+ * `clientX`/`clientY` speak.
+ *
+ * `Viewport.toViewCoord` answers relative to the viewport element's own top
+ * left corner, so handing its result to a client-coordinate API drops the
+ * viewport's offset in the window: the caret lands elsewhere as soon as the
+ * editor is not flush against the window origin — a sidebar, a header, or the
+ * editor embedded in a panel. Inverse of `Viewport.toViewCoordFromClientCoord`.
+ */
+export declare function toClientCoord(viewport: {
+    left: number;
+    top: number;
+    toViewCoord: (modelX: number, modelY: number) => number[];
+}, modelX: number, modelY: number): [number, number];

package/dist/_pkgs/affine-shared/utils/dom/viewport.js

@@ -13,3 +13,61 @@ export function getViewportElement(editorHost) {
     return (editorHost.closest('.affine-page-viewport') ??
         editorHost.closest('.affine-edgeless-viewport'));
 }
+/**
+ * Where a model point lands, in CSS pixels, for an overlay drawn *inside* the
+ * edgeless container: the selection rectangle, the resize handles, the remote
+ * cursors, the text editors mounted over an element.
+ *
+ * `Viewport.toViewCoord` answers in real screen pixels, so it multiplies by
+ * `viewScale` — the CSS scale an outer container puts on the whole editor,
+ * which is not 1 in a nested editor such as an embedded synced edgeless doc.
+ * An overlay lives *inside* that container, so its placement has to be stated
+ * in the container's already scaled space, exactly the way
+ * `GfxBlockComponent.getCSSTransform` states a block's. Positioning an overlay
+ * from `toViewCoord` lets the container apply its scale a second time, and the
+ * overlay drifts away from the element it decorates as soon as
+ * `viewScale !== 1`.
+ */
+export function toOverlayCoord(viewport, modelX, modelY) {
+    const { viewportX, viewportY, zoom, viewScale } = viewport;
+    return [
+        ((modelX - viewportX) * zoom) / viewScale,
+        ((modelY - viewportY) * zoom) / viewScale,
+    ];
+}
+/**
+ * The scale an overlay drawn inside the edgeless container has to wear so that
+ * it ends up painted at the viewport zoom. Counterpart of
+ * {@link toOverlayCoord}; same reasoning about `viewScale`.
+ */
+export function overlayScale(viewport) {
+    return viewport.zoom / viewport.viewScale;
+}
+/**
+ * How wide and tall the visible viewport is *in the same units as*
+ * {@link toOverlayCoord}, so an overlay can tell whether it is about to run off
+ * the edge.
+ *
+ * `Viewport.width` / `Viewport.height` are the bounding client rect, i.e. real
+ * screen pixels. Comparing an overlay coordinate against them mixes two spaces
+ * and the flip or the clamp fires at the wrong moment under a scaled host.
+ */
+export function overlayViewportSize(viewport) {
+    const { width, height, viewScale } = viewport;
+    return [width / viewScale, height / viewScale];
+}
+/**
+ * Where a model point lands in *client* coordinates — what
+ * `document.caretRangeFromPoint`, `elementFromPoint` and a `PointerEvent`'s
+ * `clientX`/`clientY` speak.
+ *
+ * `Viewport.toViewCoord` answers relative to the viewport element's own top
+ * left corner, so handing its result to a client-coordinate API drops the
+ * viewport's offset in the window: the caret lands elsewhere as soon as the
+ * editor is not flush against the window origin — a sidebar, a header, or the
+ * editor embedded in a panel. Inverse of `Viewport.toViewCoordFromClientCoord`.
+ */
+export function toClientCoord(viewport, modelX, modelY) {
+    const [x, y] = viewport.toViewCoord(modelX, modelY);
+    return [x + viewport.left, y + viewport.top];
+}

package/dist/_pkgs/affine-shared/utils/drag-helper/cell-select.d.ts

@@ -1,4 +1,4 @@
-import type { OffsetList } from './types';
+import type { OffsetList } from './types.js';
 type CellOffsets = {
     rows: OffsetList;
     columns: OffsetList;

package/dist/_pkgs/affine-shared/utils/drag-helper/index.d.ts

@@ -1,3 +1,3 @@
-export * from './cell-select';
-export * from './linear-move';
-export * from './types';
+export * from './cell-select.js';
+export * from './linear-move.js';
+export * from './types.js';

package/dist/_pkgs/affine-shared/utils/drag-helper/index.js

@@ -1,3 +1,3 @@
-export * from './cell-select';
-export * from './linear-move';
-export * from './types';
+export * from './cell-select.js';
+export * from './linear-move.js';
+export * from './types.js';

package/dist/_pkgs/affine-shared/utils/drag-helper/linear-move.d.ts

@@ -1,4 +1,4 @@
-import type { OffsetList } from './types';
+import type { OffsetList } from './types.js';
 export declare const getTargetIndexByDraggingOffset: (offsets: OffsetList, draggingIndex: number, indicatorLeft: number) => {
     targetIndex: number;
     isForward: true;

package/dist/_pkgs/affine-shared/utils/index.d.ts

@@ -1,28 +1,28 @@
-export * from './auto-scroll';
-export * from './button-popper';
-export * from './collapsed';
-export * from './computing';
-export * from './dnd';
-export * from './dom';
-export * from './drag-helper';
-export * from './edgeless';
-export * from './event';
-export { getSvgPath as getFigmaSquircleSvgPath } from './figma-squircle';
-export * from './file';
-export * from './fractional-indexing';
-export * from './image';
-export * from './insert';
-export * from './is-abort-error';
-export * from './math';
-export * from './model';
-export * from './popper-position';
-export * from './print-to-pdf';
-export * from './reference';
-export * from './reordering';
-export * from './signal';
-export * from './string';
-export * from './title';
-export * from './url';
-export * from './virtual-padding';
-export * from './zod-schema';
+export * from './auto-scroll.js';
+export * from './button-popper.js';
+export * from './collapsed/index.js';
+export * from './computing.js';
+export * from './dnd/index.js';
+export * from './dom/index.js';
+export * from './drag-helper/index.js';
+export * from './edgeless.js';
+export * from './event.js';
+export { getSvgPath as getFigmaSquircleSvgPath } from './figma-squircle/index.js';
+export * from './file/index.js';
+export * from './fractional-indexing.js';
+export * from './image.js';
+export * from './insert.js';
+export * from './is-abort-error.js';
+export * from './math.js';
+export * from './model/index.js';
+export * from './popper-position.js';
+export * from './print-to-pdf.js';
+export * from './reference.js';
+export * from './reordering.js';
+export * from './signal.js';
+export * from './string.js';
+export * from './title.js';
+export * from './url.js';
+export * from './virtual-padding.js';
+export * from './zod-schema.js';
 export { default as formatSize } from 'bytes';

package/dist/_pkgs/affine-shared/utils/index.js

@@ -1,28 +1,28 @@
-export * from './auto-scroll';
-export * from './button-popper';
-export * from './collapsed';
-export * from './computing';
-export * from './dnd';
-export * from './dom';
-export * from './drag-helper';
-export * from './edgeless';
-export * from './event';
-export { getSvgPath as getFigmaSquircleSvgPath } from './figma-squircle';
-export * from './file';
-export * from './fractional-indexing';
-export * from './image';
-export * from './insert';
-export * from './is-abort-error';
-export * from './math';
-export * from './model';
-export * from './popper-position';
-export * from './print-to-pdf';
-export * from './reference';
-export * from './reordering';
-export * from './signal';
-export * from './string';
-export * from './title';
-export * from './url';
-export * from './virtual-padding';
-export * from './zod-schema';
+export * from './auto-scroll.js';
+export * from './button-popper.js';
+export * from './collapsed/index.js';
+export * from './computing.js';
+export * from './dnd/index.js';
+export * from './dom/index.js';
+export * from './drag-helper/index.js';
+export * from './edgeless.js';
+export * from './event.js';
+export { getSvgPath as getFigmaSquircleSvgPath } from './figma-squircle/index.js';
+export * from './file/index.js';
+export * from './fractional-indexing.js';
+export * from './image.js';
+export * from './insert.js';
+export * from './is-abort-error.js';
+export * from './math.js';
+export * from './model/index.js';
+export * from './popper-position.js';
+export * from './print-to-pdf.js';
+export * from './reference.js';
+export * from './reordering.js';
+export * from './signal.js';
+export * from './string.js';
+export * from './title.js';
+export * from './url.js';
+export * from './virtual-padding.js';
+export * from './zod-schema.js';
 export { default as formatSize } from 'bytes';

package/dist/_pkgs/affine-shared/utils/popper-position.js

@@ -1,4 +1,4 @@
-import clamp from 'lodash-es/clamp';
+import clamp from 'lodash-es/clamp.js';
 function calcSafeCoordinate({ positioningPoint, objRect = { width: 0, height: 0 }, boundaryRect = document.body.getBoundingClientRect(), offsetX = 0, offsetY = 0, edgeGap = 20, }) {
     const safeX = clamp(positioningPoint.x + offsetX, edgeGap, boundaryRect.width - objRect.width - edgeGap);
     const y = positioningPoint.y + offsetY;

package/dist/_pkgs/affine-shared/utils/print-to-pdf.d.ts

@@ -1,3 +1,24 @@
+/**
+ * Styles injected into the print iframe.
+ *
+ * The printed document is always rendered on white paper, so the whole
+ * palette is pinned to a light one: a document read in the dark theme would
+ * otherwise print light text on a background the printer leaves white, and
+ * every one of those elements would come out invisible.
+ *
+ * Exported so the print-fidelity rules can be asserted in unit tests.
+ */
+export declare const printToPdfStyles = "@media print {\n              html, body {\n                height: initial !important;\n                overflow: initial !important;\n                print-color-adjust: exact;\n                -webkit-print-color-adjust: exact;\n                color: #000 !important;\n                background: #fff !important;\n                color-scheme: light !important;\n              }\n              ::-webkit-scrollbar {\n                display: none;\n              }\n              :root, body {\n                --affine-text-primary: #000 !important;\n                --affine-text-secondary: #111 !important;\n                --affine-text-tertiary: #333 !important;\n                --affine-background-primary: #fff !important;\n                --affine-background-secondary: #fff !important;\n                --affine-background-tertiary: #fff !important;\n                --affine-background-code-block: #f5f5f5 !important;\n                --affine-quote-color: #e3e3e3 !important;\n                --affine-border-color: #e3e3e3 !important;\n              }\n              body, [data-theme='dark'] {\n                color: #000 !important;\n                background: #fff !important;\n              }\n              body * {\n                color: #000 !important;\n                -webkit-text-fill-color: #000 !important;\n              }\n              :root {\n                --affine-note-shadow-box: none !important;\n                --affine-note-shadow-sticker: none !important;\n              }\n            }";
+/**
+ * Waits until every image inside `container` — shadow roots included — has
+ * either decoded or given up.
+ *
+ * A print dialog opened while images are still in flight prints their empty
+ * frames, so this is awaited before handing the document to the printer. An
+ * image that fails to load resolves too: a broken picture must not hang the
+ * print for ever.
+ */
+export declare function waitForImages(container: HTMLElement): Promise<void>;
 export declare function printToPdf(rootElement?: HTMLElement | null, options?: {
     /**
      * Callback that is called when ready to print.

package/dist/_pkgs/affine-shared/utils/print-to-pdf.js

@@ -1,8 +1,102 @@
+/**
+ * Styles injected into the print iframe.
+ *
+ * The printed document is always rendered on white paper, so the whole
+ * palette is pinned to a light one: a document read in the dark theme would
+ * otherwise print light text on a background the printer leaves white, and
+ * every one of those elements would come out invisible.
+ *
+ * Exported so the print-fidelity rules can be asserted in unit tests.
+ */
+export const printToPdfStyles = `@media print {
+              html, body {
+                height: initial !important;
+                overflow: initial !important;
+                print-color-adjust: exact;
+                -webkit-print-color-adjust: exact;
+                color: #000 !important;
+                background: #fff !important;
+                color-scheme: light !important;
+              }
+              ::-webkit-scrollbar {
+                display: none;
+              }
+              :root, body {
+                --affine-text-primary: #000 !important;
+                --affine-text-secondary: #111 !important;
+                --affine-text-tertiary: #333 !important;
+                --affine-background-primary: #fff !important;
+                --affine-background-secondary: #fff !important;
+                --affine-background-tertiary: #fff !important;
+                --affine-background-code-block: #f5f5f5 !important;
+                --affine-quote-color: #e3e3e3 !important;
+                --affine-border-color: #e3e3e3 !important;
+              }
+              body, [data-theme='dark'] {
+                color: #000 !important;
+                background: #fff !important;
+              }
+              body * {
+                color: #000 !important;
+                -webkit-text-fill-color: #000 !important;
+              }
+              :root {
+                --affine-note-shadow-box: none !important;
+                --affine-note-shadow-sticker: none !important;
+              }
+            }`;
+/**
+ * Waits until every image inside `container` — shadow roots included — has
+ * either decoded or given up.
+ *
+ * A print dialog opened while images are still in flight prints their empty
+ * frames, so this is awaited before handing the document to the printer. An
+ * image that fails to load resolves too: a broken picture must not hang the
+ * print for ever.
+ */
+export async function waitForImages(container) {
+    const images = [];
+    const view = container.ownerDocument.defaultView;
+    if (!view)
+        return;
+    const findImages = (root) => {
+        if (root instanceof view.HTMLImageElement) {
+            images.push(root);
+        }
+        if (root instanceof view.HTMLElement || root instanceof view.ShadowRoot) {
+            root.childNodes.forEach(findImages);
+        }
+        if (root instanceof view.HTMLElement && root.shadowRoot) {
+            findImages(root.shadowRoot);
+        }
+    };
+    findImages(container);
+    await Promise.all(images.map(img => {
+        if (img.complete) {
+            if (img.naturalWidth === 0) {
+                console.warn('Image failed to load:', img.src);
+            }
+            return Promise.resolve();
+        }
+        return new Promise(resolve => {
+            img.onload = resolve;
+            img.onerror = resolve;
+        });
+    }));
+}
 export async function printToPdf(rootElement = document.querySelector('.affine-page-viewport'), options = {}) {
     return new Promise((resolve, reject) => {
         const iframe = document.createElement('iframe');
         document.body.append(iframe);
-        iframe.style.display = 'none';
+        // hidden, but still laid out and painted: a `display: none` iframe never
+        // loads the images it contains, so they would be missing from the print
+        Object.assign(iframe.style, {
+            visibility: 'hidden',
+            position: 'absolute',
+            width: '0',
+            height: '0',
+            border: 'none',
+        });
         iframe.srcdoc = '<!DOCTYPE html>';
         iframe.onload = async () => {
             if (!iframe.contentWindow) {
@@ -13,27 +107,14 @@ export async function printToPdf(rootElement = document.querySelector('.affine-p
                 reject(new Error('Root element not defined, unable to print pdf'));
                 return;
             }
-            iframe.contentWindow.document
-                .write(`<!DOCTYPE html><html><head><style>@media print {
-              html, body {
-                height: initial !important;
-                overflow: initial !important;
-                print-color-adjust: exact;
-                -webkit-print-color-adjust: exact;
-              }
-              ::-webkit-scrollbar {
-                display: none;
-              }
-              :root {
-                --affine-note-shadow-box: none !important;
-                --affine-note-shadow-sticker: none !important;
-              }
-            }</style></head><body></body></html>`);
+            const doc = iframe.contentWindow.document;
+            doc.write(`<!DOCTYPE html><html><head><style>${printToPdfStyles}</style></head><body></body></html>`);
+            doc.close();
             // copy all styles to iframe
             for (const element of document.styleSheets) {
                 try {
                     for (const cssRule of element.cssRules) {
-                        const target = iframe.contentWindow.document.styleSheets[0];
+                        const target = doc.styleSheets[0];
                         target.insertRule(cssRule.cssText, target.cssRules.length);
                     }
                 }
@@ -46,12 +127,31 @@ export async function printToPdf(rootElement = document.querySelector('.affine-p
                     }
                 }
             }
+            // find every canvas, including the ones sitting inside a shadow root
+            const findAllCanvases = (root) => {
+                const canvases = [];
+                const traverse = (node) => {
+                    if (node instanceof HTMLCanvasElement) {
+                        canvases.push(node);
+                    }
+                    if (node instanceof HTMLElement || node instanceof ShadowRoot) {
+                        node.childNodes.forEach(traverse);
+                    }
+                    if (node instanceof HTMLElement && node.shadowRoot) {
+                        traverse(node.shadowRoot);
+                    }
+                };
+                traverse(root);
+                return canvases;
+            };
             // convert all canvas to image
             const canvasImgObjectUrlMap = new Map();
-            const allCanvas = rootElement.getElementsByTagName('canvas');
+            const allCanvas = findAllCanvases(rootElement);
+            const canvasToKeyMap = new Map();
             let canvasKey = 1;
             for (const canvas of allCanvas) {
-                canvas.dataset['printToPdfCanvasKey'] = canvasKey.toString();
+                const key = canvasKey.toString();
+                canvasToKeyMap.set(canvas, key);
                 canvasKey++;
                 const canvasImgObjectUrl = await new Promise(resolve => {
                     try {
@@ -65,9 +165,35 @@ export async function printToPdf(rootElement = document.querySelector('.affine-p
                     console.warn('canvas cannot be converted to image when printing pdf, this may be because of CORS policy');
                     continue;
                 }
-                canvasImgObjectUrlMap.set(canvas.dataset['printToPdfCanvasKey'], URL.createObjectURL(canvasImgObjectUrl));
+                canvasImgObjectUrlMap.set(key, URL.createObjectURL(canvasImgObjectUrl));
             }
-            const importedRoot = iframe.contentWindow.document.importNode(rootElement, true);
+            // deep clone that flattens shadow DOM into light DOM, so what the
+            // printer sees is what the reader sees
+            const deepCloneWithShadows = (node) => {
+                const clone = doc.importNode(node, false);
+                if (clone instanceof HTMLCanvasElement &&
+                    node instanceof HTMLCanvasElement) {
+                    const key = canvasToKeyMap.get(node);
+                    if (key) {
+                        clone.dataset['printToPdfCanvasKey'] = key;
+                    }
+                }
+                const appendChildren = (source) => {
+                    source.childNodes.forEach(child => {
+                        clone.append(deepCloneWithShadows(child));
+                    });
+                };
+                if (node instanceof HTMLElement && node.shadowRoot) {
+                    appendChildren(node.shadowRoot);
+                }
+                appendChildren(node);
+                return clone;
+            };
+            const importedRoot = deepCloneWithShadows(rootElement);
+            // force light theme in print iframe
+            doc.documentElement.dataset.theme = 'light';
+            doc.body.dataset.theme = 'light';
+            importedRoot.dataset.theme = 'light';
             // draw saved canvas image to canvas
             const allImportedCanvas = importedRoot.getElementsByTagName('canvas');
             for (const importedCanvas of allImportedCanvas) {
@@ -83,21 +209,29 @@ export async function printToPdf(rootElement = document.querySelector('.affine-p
                     }
                 }
             }
+            // a lazily loaded image would still be waiting for a scroll that never
+            // happens in the print iframe: ask for it now
+            const allImages = importedRoot.querySelectorAll('img');
+            allImages.forEach(img => {
+                img.removeAttribute('loading');
+                const src = img.getAttribute('src');
+                if (src)
+                    img.setAttribute('src', src);
+            });
             // append to iframe and print
-            iframe.contentWindow.document.body.append(importedRoot);
+            doc.body.append(importedRoot);
             await options.beforeprint?.(iframe);
-            // browser may take some time to load font
-            await new Promise(resolve => {
-                setTimeout(() => {
-                    resolve();
-                }, 1000);
-            });
+            await waitForImages(importedRoot);
+            // browser may take some time to load font or other resources
+            await (doc.fonts?.ready ??
+                new Promise(resolve => {
+                    setTimeout(() => {
+                        resolve();
+                    }, 1000);
+                }));
             iframe.contentWindow.onafterprint = async () => {
                 iframe.remove();
                 // clean up
-                for (const canvas of allCanvas) {
-                    delete canvas.dataset['printToPdfCanvasKey'];
-                }
                 for (const [_, url] of canvasImgObjectUrlMap) {
                     URL.revokeObjectURL(url);
                 }

package/dist/_pkgs/affine-shared/utils/reference.js

@@ -1,4 +1,4 @@
-import cloneDeep from 'lodash-es/cloneDeep';
+import cloneDeep from 'lodash-es/cloneDeep.js';
 /**
  * Clones reference info.
  */

package/dist/_pkgs/affine-shared/utils/virtual-padding.js

@@ -1,6 +1,6 @@
 import { autoUpdate } from '@floating-ui/dom';
 import { signal } from '@preact/signals-core';
-import { DocModeProvider } from '../services/doc-mode-service';
+import { DocModeProvider } from '../services/doc-mode-service.js';
 export class VirtualPaddingController {
     constructor(block) {
         this.block = block;