export asset stuff (#1829)

This PR adds several new exports related to assets.

### Change Type

- [x] `minor` — New feature

apps/examples/src/examples/HostedImagesExample.tsx

@@ -6,9 +6,9 @@ import {
 	TLAssetId,
 	Tldraw,
 	getHashForString,
+	isGifAnimated,
 	uniqueId,
 } from '@tldraw/tldraw'
-import { getIsGifAnimated } from '@tldraw/tldraw/src/lib/utils/assets'
 import '@tldraw/tldraw/tldraw.css'
 import { useCallback } from 'react'
 
@@ -40,11 +40,7 @@ export default function AssetPropsExample() {
 			if (['image/jpeg', 'image/png', 'image/gif', 'image/svg+xml'].includes(file.type)) {
 				shapeType = 'image'
 				size = await MediaHelpers.getImageSizeFromSrc(url)
-				if (file.type === 'image/gif') {
+				isAnimated = file.type === 'image/gif' && (await isGifAnimated(file))
-					isAnimated = await getIsGifAnimated(file)
-				} else {
-					isAnimated = false
-				}
 			} else {
 				shapeType = 'video'
 				isAnimated = true

packages/tldraw/api-report.md

@@ -248,6 +248,9 @@ function CloseButton(): JSX.Element;
 // @public (undocumented)
 export function compactMenuItems<T>(arr: T[]): Exclude<T, false | null | undefined>[];
 
+// @public
+export function containBoxSize(originalSize: BoxWidthHeight, containBoxSize: BoxWidthHeight): BoxWidthHeight;
+
 // @public (undocumented)
 function Content({ side, align, sideOffset, alignOffset, children, }: {
     children: any;
@@ -610,6 +613,9 @@ export class GeoShapeUtil extends BaseBoxShapeUtil<TLGeoShape> {
 // @public
 export function getEmbedInfo(inputUrl: string): TLEmbedResult;
 
+// @public
+export function getResizedImageDataUrl(dataURLForImage: string, width: number, height: number): Promise<string>;
+
 // @public (undocumented)
 function Group({ children, size, }: {
     children: any;
@@ -726,6 +732,9 @@ function Indicator(): JSX.Element;
 // @public (undocumented)
 export const Input: React_3.ForwardRefExoticComponent<TLUiInputProps & React_3.RefAttributes<HTMLInputElement>>;
 
+// @public (undocumented)
+export function isGifAnimated(file: File): Promise<boolean>;
+
 // @public (undocumented)
 function Item({ noClose, ...props }: DropdownMenuItemProps): JSX.Element;
 

packages/tldraw/src/index.ts

@@ -129,7 +129,13 @@ export {
 export { type TLUiIconType } from './lib/ui/icon-types'
 export { useDefaultHelpers, type TLUiOverrides } from './lib/ui/overrides'
 export { setDefaultEditorAssetUrls } from './lib/utils/assetUrls'
-export { DEFAULT_ACCEPTED_IMG_TYPE, DEFAULT_ACCEPTED_VID_TYPE } from './lib/utils/assets'
+export {
+	DEFAULT_ACCEPTED_IMG_TYPE,
+	DEFAULT_ACCEPTED_VID_TYPE,
+	containBoxSize,
+	getResizedImageDataUrl,
+	isGifAnimated,
+} from './lib/utils/assets'
 export { buildFromV1Document, type LegacyTldrawDocument } from './lib/utils/buildFromV1Document'
 export { getEmbedInfo } from './lib/utils/embeds'
 export {

packages/tldraw/src/lib/useRegisterExternalContentHandlers.ts

@@ -17,7 +17,7 @@ import {
 } from '@tldraw/editor'
 import { useEffect } from 'react'
 import { FONT_FAMILIES, FONT_SIZES, TEXT_PROPS } from './shapes/shared/default-shape-constants'
-import { containBoxSize, getIsGifAnimated, getResizedImageDataUrl } from './utils/assets'
+import { containBoxSize, getResizedImageDataUrl, isGifAnimated } from './utils/assets'
 import { getEmbedInfo } from './utils/embeds'
 import { cleanupText, isRightToLeftLanguage, truncateStringWithEllipsis } from './utils/text'
 
@@ -82,11 +82,7 @@ export function useRegisterExternalContentHandlers({
 
 					if (isImageType) {
 						size = await MediaHelpers.getImageSizeFromSrc(dataUrl)
-						if (file.type === 'image/gif') {
+						isAnimated = file.type === 'image/gif' && (await isGifAnimated(file))
-							isAnimated = await getIsGifAnimated(file)
-						} else {
-							isAnimated = false
-						}
 					} else {
 						isAnimated = true
 						size = await MediaHelpers.getVideoSizeFromSrc(dataUrl)

packages/tldraw/src/lib/utils/assets.ts

@@ -35,18 +35,6 @@ export function containBoxSize(
 	}
 }
 
-/** @public */
-export async function getIsGifAnimated(file: File): Promise<boolean> {
-	return await new Promise((resolve, reject) => {
-		const reader = new FileReader()
-		reader.onerror = () => reject(reader.error)
-		reader.onload = () => {
-			resolve(reader.result ? isAnimated(reader.result as ArrayBuffer) : false)
-		}
-		reader.readAsArrayBuffer(file)
-	})
-}
-
 /**
  * Get the size of an image from its source.
  *
@@ -89,3 +77,15 @@ export async function getResizedImageDataUrl(
 export const DEFAULT_ACCEPTED_IMG_TYPE = ['image/jpeg', 'image/png', 'image/gif', 'image/svg+xml']
 /** @public */
 export const DEFAULT_ACCEPTED_VID_TYPE = ['video/mp4', 'video/quicktime']
+
+/** @public */
+export async function isGifAnimated(file: File): Promise<boolean> {
+	return await new Promise((resolve, reject) => {
+		const reader = new FileReader()
+		reader.onerror = () => reject(reader.error)
+		reader.onload = () => {
+			resolve(reader.result ? isAnimated(reader.result as ArrayBuffer) : false)
+		}
+		reader.readAsArrayBuffer(file)
+	})
+}