fix: bundle tldraw whiteboard assets

src/components/TldrawWhiteboard.test.tsx

@@ -0,0 +1,90 @@
+import { render, screen } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+import { TldrawWhiteboard } from './TldrawWhiteboard'
+
+interface MockTldrawProps {
+  assetUrls: MockAssetUrls
+}
+
+interface MockAssetUrls {
+  embedIcons: Record<string, string>
+  fonts: Record<string, string>
+  icons: Record<string, string>
+  translations: Record<string, string>
+}
+
+const tldrawMock = vi.hoisted(() => ({
+  Tldraw: vi.fn(),
+}))
+
+vi.mock('tldraw', async () => {
+  const { createElement } = await import('react')
+
+  tldrawMock.Tldraw.mockImplementation(({ assetUrls }: MockTldrawProps) =>
+    createElement('div', {
+      'data-testid': 'mock-tldraw',
+      'data-draw-font-url': assetUrls.fonts.tldraw_draw,
+    })
+  )
+
+  return {
+    Box: class Box {
+      x: number
+      y: number
+      w: number
+      h: number
+
+      constructor(x: number, y: number, w: number, h: number) {
+        this.x = x
+        this.y = y
+        this.w = w
+        this.h = h
+      }
+    },
+    Tldraw: tldrawMock.Tldraw,
+    createTLStore: vi.fn(() => ({
+      listen: vi.fn(() => vi.fn()),
+    })),
+    getSnapshot: vi.fn(() => ({ document: {} })),
+    loadSnapshot: vi.fn(),
+  }
+})
+
+function renderedTldrawAssetUrls(): MockAssetUrls {
+  const props = tldrawMock.Tldraw.mock.calls[0]?.[0] as MockTldrawProps
+  expect(props.assetUrls).toBeDefined()
+  return props.assetUrls
+}
+
+function expectNoCdnUrls(urls: Record<string, string>) {
+  Object.values(urls).forEach((url) => {
+    expect(url).not.toContain('cdn.tldraw.com')
+  })
+}
+
+function expectBundledTldrawAssetUrls(assetUrls: MockAssetUrls) {
+  expect(assetUrls.fonts.tldraw_draw).toContain('Shantell_Sans-Informal_Regular.woff2')
+  expect(assetUrls.icons['tool-pencil']).toContain('0_merged.svg#tool-pencil')
+  expect(assetUrls.translations.en).toContain('en.json')
+  expectNoCdnUrls(assetUrls.fonts)
+  expectNoCdnUrls(assetUrls.icons)
+  expectNoCdnUrls(assetUrls.translations)
+}
+
+describe('TldrawWhiteboard', () => {
+  it('uses bundled tldraw assets instead of CDN URLs', () => {
+    render(
+      <TldrawWhiteboard
+        boardId="board-1"
+        height="520"
+        snapshot=""
+        width=""
+        onSizeChange={vi.fn()}
+        onSnapshotChange={vi.fn()}
+      />
+    )
+
+    expect(screen.getByTestId('mock-tldraw')).toHaveAttribute('data-draw-font-url')
+    expectBundledTldrawAssetUrls(renderedTldrawAssetUrls())
+  })
+})

src/components/TldrawWhiteboard.tsx

@@ -1,4 +1,5 @@
 import { useEffect, useMemo, useRef, useState, type CSSProperties, type PointerEvent as ReactPointerEvent } from 'react'
+import { getAssetUrlsByImport } from '@tldraw/assets/imports.vite'
 import {
   Box,
   Tldraw,
@@ -11,6 +12,8 @@ import {
 } from 'tldraw'
 import 'tldraw/tldraw.css'
 
+const tldrawAssetUrls = getAssetUrlsByImport()
+
 interface TldrawWhiteboardProps {
   boardId: string
   height: string
@@ -274,6 +277,7 @@ export function TldrawWhiteboard({
       style={cssSize(visibleSize)}
     >
       <Tldraw
+        assetUrls={tldrawAssetUrls}
         onMount={installZoomAwareViewport}
         store={store}
       />