@tldraw/editor 3.9.0-internal.7f0e15f4f7d9 → 3.9.0

package/src/lib/editor/managers/TextManager.ts

@@ -65,57 +65,32 @@ export class TextManager {
 			padding: string
 			disableOverflowWrapBreaking?: boolean
 		}
-	): BoxModel & { scrollWidth: number } {
-		const div = document.createElement('div')
-		div.textContent = normalizeTextForDom(textToMeasure)
-		return this.measureHtml(div.innerHTML, opts)
-	}
-
-	measureHtml(
-		html: string,
-		opts: {
-			fontStyle: string
-			fontWeight: string
-			fontFamily: string
-			fontSize: number
-			lineHeight: number
-			/**
-			 * When maxWidth is a number, the text will be wrapped to that maxWidth. When maxWidth
-			 * is null, the text will be measured without wrapping, but explicit line breaks and
-			 * space are preserved.
-			 */
-			maxWidth: null | number
-			minWidth?: null | number
-			padding: string
-			disableOverflowWrapBreaking?: boolean
-		}
 	): BoxModel & { scrollWidth: number } {
 		// Duplicate our base element; we don't need to clone deep
-		const wrapperElm = this.baseElem.cloneNode() as HTMLDivElement
-		this.editor.getContainer().appendChild(wrapperElm)
-		wrapperElm.innerHTML = html
-		this.baseElem.insertAdjacentElement('afterend', wrapperElm)
+		const elm = this.baseElem.cloneNode() as HTMLDivElement
+		this.editor.getContainer().appendChild(elm)
 
-		wrapperElm.setAttribute('dir', 'auto')
+		elm.setAttribute('dir', 'auto')
 		// N.B. This property, while discouraged ("intended for Document Type Definition (DTD) designers")
 		// is necessary for ensuring correct mixed RTL/LTR behavior when exporting SVGs.
-		wrapperElm.style.setProperty('unicode-bidi', 'plaintext')
-		wrapperElm.style.setProperty('font-family', opts.fontFamily)
-		wrapperElm.style.setProperty('font-style', opts.fontStyle)
-		wrapperElm.style.setProperty('font-weight', opts.fontWeight)
-		wrapperElm.style.setProperty('font-size', opts.fontSize + 'px')
-		wrapperElm.style.setProperty('line-height', opts.lineHeight * opts.fontSize + 'px')
-		wrapperElm.style.setProperty('max-width', opts.maxWidth === null ? null : opts.maxWidth + 'px')
-		wrapperElm.style.setProperty('min-width', opts.minWidth === null ? null : opts.minWidth + 'px')
-		wrapperElm.style.setProperty('padding', opts.padding)
-		wrapperElm.style.setProperty(
+		elm.style.setProperty('unicode-bidi', 'plaintext')
+		elm.style.setProperty('font-family', opts.fontFamily)
+		elm.style.setProperty('font-style', opts.fontStyle)
+		elm.style.setProperty('font-weight', opts.fontWeight)
+		elm.style.setProperty('font-size', opts.fontSize + 'px')
+		elm.style.setProperty('line-height', opts.lineHeight * opts.fontSize + 'px')
+		elm.style.setProperty('max-width', opts.maxWidth === null ? null : opts.maxWidth + 'px')
+		elm.style.setProperty('min-width', opts.minWidth === null ? null : opts.minWidth + 'px')
+		elm.style.setProperty('padding', opts.padding)
+		elm.style.setProperty(
 			'overflow-wrap',
 			opts.disableOverflowWrapBreaking ? 'normal' : 'break-word'
 		)
 
-		const scrollWidth = wrapperElm.scrollWidth
-		const rect = wrapperElm.getBoundingClientRect()
-		wrapperElm.remove()
+		elm.textContent = normalizeTextForDom(textToMeasure)
+		const scrollWidth = elm.scrollWidth
+		const rect = elm.getBoundingClientRect()
+		elm.remove()
 
 		return {
 			x: 0,

package/src/lib/editor/shapes/ShapeUtil.ts

@@ -1,5 +1,4 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
-import { EMPTY_ARRAY } from '@tldraw/state'
 import { LegacyMigrations, MigrationSequence } from '@tldraw/store'
 import {
 	RecordProps,
@@ -15,7 +14,6 @@ import { Box, SelectionHandle } from '../../primitives/Box'
 import { Vec } from '../../primitives/Vec'
 import { Geometry2d } from '../../primitives/geometry/Geometry2d'
 import type { Editor } from '../Editor'
-import { TLFontFace } from '../managers/FontManager'
 import { BoundsSnapGeometry } from '../managers/SnapManager/BoundsSnaps'
 import { HandleSnapGeometry } from '../managers/SnapManager/HandleSnaps'
 import { SvgExportContext } from '../types/SvgExportContext'
@@ -38,7 +36,7 @@ export interface TLShapeUtilConstructor<
  *
  * @public
  */
-export interface TLShapeUtilCanBindOpts<Shape extends TLUnknownShape = TLShape> {
+export interface TLShapeUtilCanBindOpts<Shape extends TLUnknownShape = TLUnknownShape> {
 	/** The type of shape referenced by the `fromId` of the binding. */
 	fromShapeType: string
 	/** The type of shape referenced by the `toId` of the binding. */
@@ -47,6 +45,27 @@ export interface TLShapeUtilCanBindOpts<Shape extends TLUnknownShape = TLShape>
 	bindingType: string
 }
 
+/**
+ * Options passed to {@link ShapeUtil.canBeLaidOut}.
+ *
+ * @public
+ */
+export interface TLShapeUtilCanBeLaidOutOpts {
+	/** The type of action causing the layout. */
+	type?: 'align' | 'distribute' | 'pack' | 'stack' | 'flip' | 'stretch'
+	/** The other shapes being laid out */
+	shapes?: TLShape[]
+}
+
+/** Additional options for the {@link ShapeUtil.getGeometry} method.
+ *
+ * @public
+ */
+export interface TLGeometryOpts {
+	/** The context in which the geometry is being requested. */
+	context?: string
+}
+
 /** @public */
 export interface TLShapeUtilCanvasSvgDef {
 	key: string
@@ -130,9 +149,10 @@ export abstract class ShapeUtil<Shape extends TLUnknownShape = TLUnknownShape> {
 	 * Get the shape's geometry.
 	 *
 	 * @param shape - The shape.
+	 * @param opts - Additional options for the request.
 	 * @public
 	 */
-	abstract getGeometry(shape: Shape): Geometry2d
+	abstract getGeometry(shape: Shape, opts?: TLGeometryOpts): Geometry2d
 
 	/**
 	 * Get a JSX element for the shape (as an HTML element).
@@ -150,20 +170,10 @@ export abstract class ShapeUtil<Shape extends TLUnknownShape = TLUnknownShape> {
 	 */
 	abstract indicator(shape: Shape): any
 
-	/**
-	 * Get the font faces that should be rendered in the document in order for this shape to render
-	 * correctly.
-	 *
-	 * @param shape - The shape.
-	 * @public
-	 */
-	getFontFaces(shape: Shape): TLFontFace[] {
-		return EMPTY_ARRAY
-	}
-
 	/**
 	 * Whether the shape can be snapped to by another shape.
 	 *
+	 * @param shape - The shape.
 	 * @public
 	 */
 	canSnap(_shape: Shape): boolean {
@@ -184,7 +194,7 @@ export abstract class ShapeUtil<Shape extends TLUnknownShape = TLUnknownShape> {
 	 *
 	 * @public
 	 */
-	canBind(_opts: TLShapeUtilCanBindOpts<Shape>): boolean {
+	canBind(_opts: TLShapeUtilCanBindOpts): boolean {
 		return true
 	}
 
@@ -225,11 +235,15 @@ export abstract class ShapeUtil<Shape extends TLUnknownShape = TLUnknownShape> {
 	}
 
 	/**
-	 * Whether the shape participates in stacking, aligning, and distributing.
+	 * Whether the shape can participate in layout functions such as alignment or distribution.
+	 *
+	 * @param shape - The shape.
+	 * @param info - Additional context information: the type of action causing the layout and the
+	 * @public
 	 *
 	 * @public
 	 */
-	canBeLaidOut(_shape: Shape): boolean {
+	canBeLaidOut(_shape: Shape, _info: TLShapeUtilCanBeLaidOutOpts): boolean {
 		return true
 	}
 

package/src/lib/editor/types/emit-types.ts

@@ -17,7 +17,6 @@ export interface TLEventMap {
 	tick: [number]
 	frame: [number]
 	'select-all-text': [{ shapeId: TLShapeId }]
-	'place-caret': [{ shapeId: TLShapeId; point: { x: number; y: number } }]
 }
 
 /** @public */

package/src/lib/editor/types/external-content.ts

@@ -45,7 +45,6 @@ export interface TLBaseExternalContent {
 export interface TLTextExternalContent extends TLBaseExternalContent {
 	type: 'text'
 	text: string
-	html?: string
 }
 
 /** @public */

package/src/lib/exports/FontEmbedder.ts

@@ -2,8 +2,6 @@ import { assert, bind, compact } from '@tldraw/utils'
 import { fetchCache, resourceToDataUrl } from './fetchCache'
 import { ParsedFontFace, parseCss, parseCssFontFaces, parseCssFontFamilyValue } from './parseCss'
 
-export const SVG_EXPORT_CLASSNAME = 'tldraw-svg-export'
-
 /**
  * Because SVGs cannot refer to external CSS/font resources, any web fonts used in the SVG must be
  * embedded as data URLs in inlined @font-face declarations. This class is responsible for
@@ -83,17 +81,7 @@ export class FontEmbedder {
 async function getCurrentDocumentFontFaces() {
 	const fontFaces: (ParsedFontFace[] | Promise<ParsedFontFace[] | null>)[] = []
 
-	// In exportToSvg we add the exported node to the DOM temporarily.
-	// Because of this, and because we do a setTimeout to delay removing that node from the
-	// DOM, when looking at document.styleSheets the number of nodes and stylesheets
-	// can grow unbounded (especially when using "Debug svg" and moving shapes around).
-	// To avoid this, we filter out the stylesheets that are part of the SVG export.
-	const styleSheetsWithoutSvgExports = Array.from(document.styleSheets).filter(
-		(styleSheet) =>
-			!(styleSheet.ownerNode as HTMLElement | null)?.closest(`.${SVG_EXPORT_CLASSNAME}`)
-	)
-
-	for (const styleSheet of styleSheetsWithoutSvgExports) {
+	for (const styleSheet of document.styleSheets) {
 		let cssRules
 		try {
 			cssRules = styleSheet.cssRules

package/src/lib/exports/StyleEmbedder.ts

@@ -242,7 +242,7 @@ function styleFromComputedStyle(
 	{ defaultStyles, parentStyles }: ReadStyleOpts
 ) {
 	const styles: Record<string, string> = {}
-	for (const [property, _] of Object.entries(style)) {
+	for (const property of style) {
 		if (!shouldIncludeCssProperty(property)) continue
 
 		const value = style.getPropertyValue(property)

package/src/lib/exports/exportToSvg.tsx

@@ -4,7 +4,6 @@ import { flushSync } from 'react-dom'
 import { createRoot } from 'react-dom/client'
 import { Editor } from '../editor/Editor'
 import { TLSvgExportOptions } from '../editor/types/misc-types'
-import { SVG_EXPORT_CLASSNAME } from './FontEmbedder'
 import { StyleEmbedder } from './StyleEmbedder'
 import { embedMedia } from './embedMedia'
 import { getSvgJsx } from './getSvgJsx'
@@ -27,7 +26,7 @@ export async function exportToSvg(
 	// <foreignObject> elements have their styles and content inlined correctly.
 	const container = editor.getContainer()
 	const renderTarget = document.createElement('div')
-	renderTarget.className = SVG_EXPORT_CLASSNAME
+	renderTarget.className = 'tldraw-svg-export'
 	// we hide the element visually, but we don't want it to be focusable or interactive in any way either
 	renderTarget.inert = true
 	renderTarget.tabIndex = -1
@@ -84,9 +83,9 @@ export async function exportToSvg(
 
 async function applyChangesToForeignObjects(svg: SVGSVGElement) {
 	// If any shapes have their own <foreignObject> elements, we don't want to mess with them. Our
-	// ones that we need to embed will have a class of `tl-export-embed-styles`.
+	// ones that we need to embed will have a class of `tl-shape-foreign-object`.
 	const foreignObjectChildren = [
-		...svg.querySelectorAll('foreignObject.tl-export-embed-styles > *'),
+		...svg.querySelectorAll('foreignObject.tl-shape-foreign-object > *'),
 	]
 	if (!foreignObjectChildren.length) return
 

package/src/lib/exports/getSvgJsx.tsx

@@ -6,7 +6,7 @@ import {
 	TLShapeId,
 	getDefaultColorTheme,
 } from '@tldraw/tlschema'
-import { hasOwnProperty, promiseWithResolve, uniqueId } from '@tldraw/utils'
+import { hasOwnProperty, promiseWithResolve } from '@tldraw/utils'
 import {
 	ComponentType,
 	Fragment,
@@ -21,7 +21,6 @@ import { flushSync } from 'react-dom'
 import { ErrorBoundary } from '../components/ErrorBoundary'
 import { InnerShape, InnerShapeBackground } from '../components/Shape'
 import { Editor, TLRenderingShape } from '../editor/Editor'
-import { TLFontFace } from '../editor/managers/FontManager'
 import { ShapeUtil } from '../editor/shapes/ShapeUtil'
 import {
 	SvgExportContext,
@@ -206,6 +205,7 @@ function SvgExport({
 		;(async () => {
 			const shapeDefs: Record<string, { pending: false; element: ReactElement }> = {}
 
+			// Then render everything. The shapes with assets should all hit the cache
 			const unorderedShapeElementPromises = renderingShapes.map(
 				async ({ id, opacity, index, backgroundIndex }) => {
 					// Don't render the frame if we're only exporting a single frame and it's children
@@ -340,25 +340,6 @@ function SvgExport({
 		})()
 	}, [bbox, editor, exportContext, masksId, renderingShapes, singleFrameShapeId, stateAtom])
 
-	useEffect(() => {
-		const fontsInUse = new Set<TLFontFace>()
-		for (const { id } of renderingShapes) {
-			for (const font of editor.fonts.getShapeFontFaces(id)) {
-				fontsInUse.add(font)
-			}
-		}
-
-		for (const font of fontsInUse) {
-			addExportDef({
-				key: uniqueId(),
-				getElement: async () => {
-					const declaration = await editor.fonts.toEmbeddedCssDeclaration(font)
-					return <style>{declaration}</style>
-				},
-			})
-		}
-	}, [editor, renderingShapes, addExportDef])
-
 	useEffect(() => {
 		if (shapeElements === null) return
 		onMount()
@@ -427,7 +408,7 @@ function ForeignObjectShape({
 				y={bbox.minY}
 				width={bbox.w}
 				height={bbox.h}
-				className="tl-shape-foreign-object tl-export-embed-styles"
+				className="tl-shape-foreign-object"
 			>
 				<div
 					className={className}

package/src/lib/exports/parseCss.ts

@@ -134,7 +134,6 @@ const inheritedProperties = new Set([
 	'list-style-type',
 	'list-style',
 	'orphans',
-	'overflow-wrap',
 	'quotes',
 	'tab-size',
 	'text-align',

package/src/lib/hooks/useCanvasEvents.ts

@@ -100,9 +100,8 @@ export function useCanvasEvents() {
 				if (
 					e.target.tagName !== 'A' &&
 					e.target.tagName !== 'TEXTAREA' &&
-					e.target.isContentEditable &&
 					// When in EditingShape state, we are actually clicking on a 'DIV'
-					// not A/TEXTAREA/contenteditable element yet. So, to preserve cursor position
+					// not A/TEXTAREA element yet. So, to preserve cursor position
 					// for edit mode on mobile we need to not preventDefault.
 					// TODO: Find out if we still need this preventDefault in general though.
 					!(editor.getEditingShape() && e.target.className.includes('tl-text-content'))

package/src/lib/hooks/useFixSafariDoubleTapZoomPencilEvents.ts

@@ -25,7 +25,6 @@ export function useFixSafariDoubleTapZoomPencilEvents(ref: React.RefObject<HTMLE
 				// Allow events to propagate if the app is editing a shape, or if the event is occurring in a text area or input
 				if (
 					IGNORED_TAGS.includes((target as Element).tagName?.toLocaleLowerCase()) ||
-					(target as HTMLElement).isContentEditable ||
 					editor.isIn('select.editing_shape')
 				) {
 					return

package/src/lib/hooks/usePassThroughWheelEvents.ts

@@ -5,6 +5,7 @@ import { useContainer } from './useContainer'
 /** @public */
 export function usePassThroughWheelEvents(ref: RefObject<HTMLElement>) {
 	if (!ref) throw Error('usePassThroughWheelEvents must be passed a ref')
+
 	const container = useContainer()
 
 	useEffect(() => {

package/src/lib/options.ts

@@ -69,12 +69,6 @@ export interface TldrawOptions {
 	 * By default, the toolbar items are accessible via number shortcuts according to their order. To disable this, set this option to false.
 	 */
 	readonly enableToolbarKeyboardShortcuts: boolean
-	/**
-	 * The maximum number of fonts that will be loaded while blocking the main rendering of the
-	 * canvas. If there are more than this number of fonts needed, we'll just show the canvas right
-	 * away and let the fonts load in in the background.
-	 */
-	readonly maxFontsToLoadBeforeRender: number
 }
 
 /** @public */
@@ -120,5 +114,4 @@ export const defaultTldrawOptions = {
 	createTextOnCanvasDoubleClick: true,
 	exportProvider: Fragment,
 	enableToolbarKeyboardShortcuts: true,
-	maxFontsToLoadBeforeRender: Infinity,
 } as const satisfies TldrawOptions

package/src/lib/utils/dom.ts

@@ -98,7 +98,7 @@ export function activeElementShouldCaptureKeys() {
 	const { activeElement } = document
 	return !!(
 		activeElement &&
-		((activeElement as HTMLElement).isContentEditable ||
+		(activeElement.getAttribute('contenteditable') ||
 			INPUTS.indexOf(activeElement.tagName.toLowerCase()) > -1)
 	)
 }

package/src/version.ts

@@ -1,9 +1,9 @@
 // This file is automatically generated by internal/scripts/refresh-assets.ts.
 // Do not edit manually. Or do, I'm a comment, not a cop.
 
-export const version = '3.9.0-internal.7f0e15f4f7d9'
+export const version = '3.9.0'
 export const publishDates = {
 	major: '2024-09-13T14:36:29.063Z',
-	minor: '2025-02-25T14:10:40.799Z',
-	patch: '2025-02-25T14:10:40.799Z',
+	minor: '2025-03-03T11:42:22.746Z',
+	patch: '2025-03-03T11:42:22.746Z',
 }

package/dist-cjs/lib/editor/managers/FontManager.js

@@ -1,167 +0,0 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var FontManager_exports = {};
-__export(FontManager_exports, {
-  FontManager: () => FontManager
-});
-module.exports = __toCommonJS(FontManager_exports);
-var import_state = require("@tldraw/state");
-var import_utils = require("@tldraw/utils");
-class FontManager {
-  constructor(editor, assetUrls) {
-    this.editor = editor;
-    this.assetUrls = assetUrls;
-    this.shapeFontFacesCache = editor.store.createComputedCache(
-      "shape font faces",
-      (shape) => {
-        const shapeUtil = this.editor.getShapeUtil(shape);
-        return shapeUtil.getFontFaces(shape);
-      },
-      { areResultsEqual: import_utils.areArraysShallowEqual }
-    );
-    this.shapeFontLoadStateCache = editor.store.createComputedCache(
-      "shape font load state",
-      (shape) => {
-        const states = this.getShapeFontFaces(shape).map((face) => this.getFontState(face));
-        return states;
-      },
-      { areResultsEqual: import_utils.areArraysShallowEqual }
-    );
-  }
-  shapeFontFacesCache;
-  shapeFontLoadStateCache;
-  getShapeFontFaces(shape) {
-    const shapeId = typeof shape === "string" ? shape : shape.id;
-    return this.shapeFontFacesCache.get(shapeId) ?? import_state.EMPTY_ARRAY;
-  }
-  trackFontsForShape(shape) {
-    const shapeId = typeof shape === "string" ? shape : shape.id;
-    this.shapeFontLoadStateCache.get(shapeId);
-  }
-  async loadRequiredFontsForCurrentPage(limit = Infinity) {
-    const neededFonts = /* @__PURE__ */ new Set();
-    for (const shapeId of this.editor.getCurrentPageShapeIds()) {
-      for (const font of this.getShapeFontFaces(this.editor.getShape(shapeId))) {
-        neededFonts.add(font);
-      }
-    }
-    if (neededFonts.size > limit) {
-      return;
-    }
-    const promises = Array.from(neededFonts, (font) => this.ensureFontIsLoaded(font));
-    await Promise.all(promises);
-  }
-  fontStates = (0, import_state.atom)(
-    "font states",
-    /* @__PURE__ */ new Map()
-  );
-  getFontState(font) {
-    return this.fontStates.get().get(font)?.get() ?? null;
-  }
-  ensureFontIsLoaded(font) {
-    const state = this.getFontState(font);
-    if (state) return state.loadingPromise;
-    const instance = this.findOrCreateFontFace(font);
-    const stateAtom = (0, import_state.atom)("font state", {
-      state: "loading",
-      instance,
-      loadingPromise: instance.load().then(() => {
-        document.fonts.add(instance);
-        stateAtom.update((s) => ({ ...s, state: "ready" }));
-      }).catch((err) => {
-        console.error(err);
-        stateAtom.update((s) => ({ ...s, state: "error" }));
-      })
-    });
-    this.fontStates.update((map) => {
-      const newMap = new Map(map);
-      newMap.set(font, stateAtom);
-      return newMap;
-    });
-    return stateAtom.get().loadingPromise;
-  }
-  fontsToLoad = /* @__PURE__ */ new Set();
-  requestFonts(fonts) {
-    if (!this.fontsToLoad.size) {
-      queueMicrotask(() => {
-        if (this.editor.isDisposed) return;
-        const toLoad = this.fontsToLoad;
-        this.fontsToLoad = /* @__PURE__ */ new Set();
-        (0, import_state.transact)(() => {
-          for (const font of toLoad) {
-            this.ensureFontIsLoaded(font);
-          }
-        });
-      });
-    }
-    for (const font of fonts) {
-      this.fontsToLoad.add(font);
-    }
-  }
-  findOrCreateFontFace(font) {
-    for (const existing of document.fonts) {
-      if (existing.family === font.family && (0, import_utils.objectMapEntries)(defaultFontFaceDescriptors).every(
-        ([key, defaultValue]) => existing[key] === (font[key] ?? defaultValue)
-      )) {
-        return existing;
-      }
-    }
-    const url = this.assetUrls?.[font.src.url] ?? font.src.url;
-    const instance = new FontFace(font.family, `url(${JSON.stringify(url)})`, {
-      ...(0, import_utils.mapObjectMapValues)(defaultFontFaceDescriptors, (key) => font[key]),
-      display: "swap"
-    });
-    document.fonts.add(instance);
-    return instance;
-  }
-  async toEmbeddedCssDeclaration(font) {
-    const url = this.assetUrls?.[font.src.url] ?? font.src.url;
-    const dataUrl = await import_utils.FileHelpers.urlToDataUrl(url);
-    const src = (0, import_utils.compact)([
-      `url("${dataUrl}")`,
-      font.src.format ? `format(${font.src.format})` : null,
-      font.src.tech ? `tech(${font.src.tech})` : null
-    ]).join(" ");
-    return (0, import_utils.compact)([
-      `@font-face {`,
-      `  font-family: ${font.family};`,
-      `  src: ${src};`,
-      font.ascentOverride ? `  ascent-override: ${font.ascentOverride};` : null,
-      font.descentOverride ? `  descent-override: ${font.descentOverride};` : null,
-      font.stretch ? `  font-stretch: ${font.stretch};` : null,
-      font.style ? `  font-style: ${font.style};` : null,
-      font.weight ? `  font-weight: ${font.weight};` : null,
-      font.featureSettings ? `  font-feature-settings: ${font.featureSettings};` : null,
-      font.lineGapOverride ? `  line-gap-override: ${font.lineGapOverride};` : null,
-      font.unicodeRange ? `  unicode-range: ${font.unicodeRange};` : null,
-      `}`
-    ]).join("\n");
-  }
-}
-const defaultFontFaceDescriptors = {
-  style: "normal",
-  weight: "normal",
-  stretch: "normal",
-  unicodeRange: "U+0-10FFFF",
-  featureSettings: "normal",
-  ascentOverride: "normal",
-  descentOverride: "normal",
-  lineGapOverride: "normal"
-};
-//# sourceMappingURL=FontManager.js.map

package/dist-cjs/lib/editor/managers/FontManager.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../../src/lib/editor/managers/FontManager.ts"],
-  "sourcesContent": ["import { atom, Atom, EMPTY_ARRAY, transact } from '@tldraw/state'\nimport { TLShape, TLShapeId } from '@tldraw/tlschema'\nimport {\n\tareArraysShallowEqual,\n\tcompact,\n\tFileHelpers,\n\tmapObjectMapValues,\n\tobjectMapEntries,\n} from '@tldraw/utils'\nimport { Editor } from '../Editor'\n\n/**\n * Represents the `src` property of a {@link TLFontFace}.\n * See {@link https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/src | `src`} for details of the properties here.\n * @public\n */\nexport interface TLFontFaceSource {\n\t/**\n\t * A URL from which to load the font. If the value here is a key in\n\t * {@link tldraw#TLEditorAssetUrls.fonts}, the value from there will be used instead.\n\t */\n\turl: string\n\tformat?: string\n\ttech?: string\n}\n\n/**\n * A font face that can be used in the editor. The properties of this are largely the same as the\n * ones in the\n * {@link https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face | css `@font-face` rule}.\n * @public\n */\nexport interface TLFontFace {\n\t/**\n\t * How this font can be referred to in CSS.\n\t * See {@link https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-family | `font-family`}.\n\t */\n\treadonly family: string\n\t/**\n\t * The source of the font. This\n\t * See {@link https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/src | `src`}.\n\t */\n\treadonly src: TLFontFaceSource\n\t/**\n\t * See {@link https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/ascent-override | `ascent-override`}.\n\t */\n\treadonly ascentOverride?: string\n\t/**\n\t * See {@link https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/descent-override | `descent-override`}.\n\t */\n\treadonly descentOverride?: string\n\t/**\n\t * See {@link https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-stretch | `font-stretch`}.\n\t */\n\treadonly stretch?: string\n\t/**\n\t * See {@link https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-style | `font-style`}.\n\t */\n\treadonly style?: string\n\t/**\n\t * See {@link https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-weight | `font-weight`}.\n\t */\n\treadonly weight?: string\n\t/**\n\t * See {@link https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-feature-settings | `font-feature-settings`}.\n\t */\n\treadonly featureSettings?: string\n\t/**\n\t * See {@link https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/line-gap-override | `line-gap-override`}.\n\t */\n\treadonly lineGapOverride?: string\n\t/**\n\t * See {@link https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/unicode-range | `unicode-range`}.\n\t */\n\treadonly unicodeRange?: string\n}\n\ninterface FontState {\n\treadonly state: 'loading' | 'ready' | 'error'\n\treadonly instance: FontFace\n\treadonly loadingPromise: Promise<void>\n}\n\n/** @public */\nexport class FontManager {\n\tconstructor(\n\t\tprivate readonly editor: Editor,\n\t\tprivate readonly assetUrls?: { [key: string]: string | undefined }\n\t) {\n\t\tthis.shapeFontFacesCache = editor.store.createComputedCache(\n\t\t\t'shape font faces',\n\t\t\t(shape: TLShape) => {\n\t\t\t\tconst shapeUtil = this.editor.getShapeUtil(shape)\n\t\t\t\treturn shapeUtil.getFontFaces(shape)\n\t\t\t},\n\t\t\t{ areResultsEqual: areArraysShallowEqual }\n\t\t)\n\n\t\tthis.shapeFontLoadStateCache = editor.store.createComputedCache(\n\t\t\t'shape font load state',\n\t\t\t(shape: TLShape) => {\n\t\t\t\tconst states = this.getShapeFontFaces(shape).map((face) => this.getFontState(face))\n\t\t\t\treturn states\n\t\t\t},\n\t\t\t{ areResultsEqual: areArraysShallowEqual }\n\t\t)\n\t}\n\n\tprivate readonly shapeFontFacesCache\n\tprivate readonly shapeFontLoadStateCache\n\n\tgetShapeFontFaces(shape: TLShape | TLShapeId): TLFontFace[] {\n\t\tconst shapeId = typeof shape === 'string' ? shape : shape.id\n\t\treturn this.shapeFontFacesCache.get(shapeId) ?? EMPTY_ARRAY\n\t}\n\n\ttrackFontsForShape(shape: TLShape | TLShapeId) {\n\t\tconst shapeId = typeof shape === 'string' ? shape : shape.id\n\t\tthis.shapeFontLoadStateCache.get(shapeId)\n\t}\n\n\tasync loadRequiredFontsForCurrentPage(limit = Infinity) {\n\t\tconst neededFonts = new Set<TLFontFace>()\n\t\tfor (const shapeId of this.editor.getCurrentPageShapeIds()) {\n\t\t\tfor (const font of this.getShapeFontFaces(this.editor.getShape(shapeId)!)) {\n\t\t\t\tneededFonts.add(font)\n\t\t\t}\n\t\t}\n\n\t\tif (neededFonts.size > limit) {\n\t\t\treturn\n\t\t}\n\n\t\tconst promises = Array.from(neededFonts, (font) => this.ensureFontIsLoaded(font))\n\t\tawait Promise.all(promises)\n\t}\n\n\tprivate readonly fontStates = atom<ReadonlyMap<TLFontFace, Atom<FontState>>>(\n\t\t'font states',\n\t\tnew Map()\n\t)\n\tprivate getFontState(font: TLFontFace): FontState | null {\n\t\treturn this.fontStates.get().get(font)?.get() ?? null\n\t}\n\n\tensureFontIsLoaded(font: TLFontFace): Promise<void> {\n\t\tconst state = this.getFontState(font)\n\t\tif (state) return state.loadingPromise\n\n\t\tconst instance = this.findOrCreateFontFace(font)\n\t\tconst stateAtom = atom<FontState>('font state', {\n\t\t\tstate: 'loading',\n\t\t\tinstance,\n\t\t\tloadingPromise: instance\n\t\t\t\t.load()\n\t\t\t\t.then(() => {\n\t\t\t\t\tdocument.fonts.add(instance)\n\t\t\t\t\tstateAtom.update((s) => ({ ...s, state: 'ready' }))\n\t\t\t\t})\n\t\t\t\t.catch((err) => {\n\t\t\t\t\tconsole.error(err)\n\t\t\t\t\tstateAtom.update((s) => ({ ...s, state: 'error' }))\n\t\t\t\t}),\n\t\t})\n\t\tthis.fontStates.update((map) => {\n\t\t\tconst newMap = new Map(map)\n\t\t\tnewMap.set(font, stateAtom)\n\t\t\treturn newMap\n\t\t})\n\n\t\treturn stateAtom.get().loadingPromise\n\t}\n\n\tprivate fontsToLoad = new Set<TLFontFace>()\n\trequestFonts(fonts: TLFontFace[]) {\n\t\tif (!this.fontsToLoad.size) {\n\t\t\tqueueMicrotask(() => {\n\t\t\t\tif (this.editor.isDisposed) return\n\t\t\t\tconst toLoad = this.fontsToLoad\n\t\t\t\tthis.fontsToLoad = new Set()\n\t\t\t\ttransact(() => {\n\t\t\t\t\tfor (const font of toLoad) {\n\t\t\t\t\t\tthis.ensureFontIsLoaded(font)\n\t\t\t\t\t}\n\t\t\t\t})\n\t\t\t})\n\t\t}\n\t\tfor (const font of fonts) {\n\t\t\tthis.fontsToLoad.add(font)\n\t\t}\n\t}\n\n\tprivate findOrCreateFontFace(font: TLFontFace) {\n\t\tfor (const existing of document.fonts) {\n\t\t\tif (\n\t\t\t\texisting.family === font.family &&\n\t\t\t\tobjectMapEntries(defaultFontFaceDescriptors).every(\n\t\t\t\t\t([key, defaultValue]) => existing[key] === (font[key] ?? defaultValue)\n\t\t\t\t)\n\t\t\t) {\n\t\t\t\treturn existing\n\t\t\t}\n\t\t}\n\n\t\tconst url = this.assetUrls?.[font.src.url] ?? font.src.url\n\t\tconst instance = new FontFace(font.family, `url(${JSON.stringify(url)})`, {\n\t\t\t...mapObjectMapValues(defaultFontFaceDescriptors, (key) => font[key]),\n\t\t\tdisplay: 'swap',\n\t\t})\n\n\t\tdocument.fonts.add(instance)\n\n\t\treturn instance\n\t}\n\n\tasync toEmbeddedCssDeclaration(font: TLFontFace) {\n\t\tconst url = this.assetUrls?.[font.src.url] ?? font.src.url\n\t\tconst dataUrl = await FileHelpers.urlToDataUrl(url)\n\n\t\tconst src = compact([\n\t\t\t`url(\"${dataUrl}\")`,\n\t\t\tfont.src.format ? `format(${font.src.format})` : null,\n\t\t\tfont.src.tech ? `tech(${font.src.tech})` : null,\n\t\t]).join(' ')\n\t\treturn compact([\n\t\t\t`@font-face {`,\n\t\t\t`  font-family: ${font.family};`,\n\t\t\t`  src: ${src};`,\n\t\t\tfont.ascentOverride ? `  ascent-override: ${font.ascentOverride};` : null,\n\t\t\tfont.descentOverride ? `  descent-override: ${font.descentOverride};` : null,\n\t\t\tfont.stretch ? `  font-stretch: ${font.stretch};` : null,\n\t\t\tfont.style ? `  font-style: ${font.style};` : null,\n\t\t\tfont.weight ? `  font-weight: ${font.weight};` : null,\n\t\t\tfont.featureSettings ? `  font-feature-settings: ${font.featureSettings};` : null,\n\t\t\tfont.lineGapOverride ? `  line-gap-override: ${font.lineGapOverride};` : null,\n\t\t\tfont.unicodeRange ? `  unicode-range: ${font.unicodeRange};` : null,\n\t\t\t`}`,\n\t\t]).join('\\n')\n\t}\n}\n\n// From https://drafts.csswg.org/css-font-loading/#fontface-interface\nconst defaultFontFaceDescriptors = {\n\tstyle: 'normal',\n\tweight: 'normal',\n\tstretch: 'normal',\n\tunicodeRange: 'U+0-10FFFF',\n\tfeatureSettings: 'normal',\n\tascentOverride: 'normal',\n\tdescentOverride: 'normal',\n\tlineGapOverride: 'normal',\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkD;AAElD,mBAMO;AA4EA,MAAM,YAAY;AAAA,EACxB,YACkB,QACA,WAChB;AAFgB;AACA;AAEjB,SAAK,sBAAsB,OAAO,MAAM;AAAA,MACvC;AAAA,MACA,CAAC,UAAmB;AACnB,cAAM,YAAY,KAAK,OAAO,aAAa,KAAK;AAChD,eAAO,UAAU,aAAa,KAAK;AAAA,MACpC;AAAA,MACA,EAAE,iBAAiB,mCAAsB;AAAA,IAC1C;AAEA,SAAK,0BAA0B,OAAO,MAAM;AAAA,MAC3C;AAAA,MACA,CAAC,UAAmB;AACnB,cAAM,SAAS,KAAK,kBAAkB,KAAK,EAAE,IAAI,CAAC,SAAS,KAAK,aAAa,IAAI,CAAC;AAClF,eAAO;AAAA,MACR;AAAA,MACA,EAAE,iBAAiB,mCAAsB;AAAA,IAC1C;AAAA,EACD;AAAA,EAEiB;AAAA,EACA;AAAA,EAEjB,kBAAkB,OAA0C;AAC3D,UAAM,UAAU,OAAO,UAAU,WAAW,QAAQ,MAAM;AAC1D,WAAO,KAAK,oBAAoB,IAAI,OAAO,KAAK;AAAA,EACjD;AAAA,EAEA,mBAAmB,OAA4B;AAC9C,UAAM,UAAU,OAAO,UAAU,WAAW,QAAQ,MAAM;AAC1D,SAAK,wBAAwB,IAAI,OAAO;AAAA,EACzC;AAAA,EAEA,MAAM,gCAAgC,QAAQ,UAAU;AACvD,UAAM,cAAc,oBAAI,IAAgB;AACxC,eAAW,WAAW,KAAK,OAAO,uBAAuB,GAAG;AAC3D,iBAAW,QAAQ,KAAK,kBAAkB,KAAK,OAAO,SAAS,OAAO,CAAE,GAAG;AAC1E,oBAAY,IAAI,IAAI;AAAA,MACrB;AAAA,IACD;AAEA,QAAI,YAAY,OAAO,OAAO;AAC7B;AAAA,IACD;AAEA,UAAM,WAAW,MAAM,KAAK,aAAa,CAAC,SAAS,KAAK,mBAAmB,IAAI,CAAC;AAChF,UAAM,QAAQ,IAAI,QAAQ;AAAA,EAC3B;AAAA,EAEiB,iBAAa;AAAA,IAC7B;AAAA,IACA,oBAAI,IAAI;AAAA,EACT;AAAA,EACQ,aAAa,MAAoC;AACxD,WAAO,KAAK,WAAW,IAAI,EAAE,IAAI,IAAI,GAAG,IAAI,KAAK;AAAA,EAClD;AAAA,EAEA,mBAAmB,MAAiC;AACnD,UAAM,QAAQ,KAAK,aAAa,IAAI;AACpC,QAAI,MAAO,QAAO,MAAM;AAExB,UAAM,WAAW,KAAK,qBAAqB,IAAI;AAC/C,UAAM,gBAAY,mBAAgB,cAAc;AAAA,MAC/C,OAAO;AAAA,MACP;AAAA,MACA,gBAAgB,SACd,KAAK,EACL,KAAK,MAAM;AACX,iBAAS,MAAM,IAAI,QAAQ;AAC3B,kBAAU,OAAO,CAAC,OAAO,EAAE,GAAG,GAAG,OAAO,QAAQ,EAAE;AAAA,MACnD,CAAC,EACA,MAAM,CAAC,QAAQ;AACf,gBAAQ,MAAM,GAAG;AACjB,kBAAU,OAAO,CAAC,OAAO,EAAE,GAAG,GAAG,OAAO,QAAQ,EAAE;AAAA,MACnD,CAAC;AAAA,IACH,CAAC;AACD,SAAK,WAAW,OAAO,CAAC,QAAQ;AAC/B,YAAM,SAAS,IAAI,IAAI,GAAG;AAC1B,aAAO,IAAI,MAAM,SAAS;AAC1B,aAAO;AAAA,IACR,CAAC;AAED,WAAO,UAAU,IAAI,EAAE;AAAA,EACxB;AAAA,EAEQ,cAAc,oBAAI,IAAgB;AAAA,EAC1C,aAAa,OAAqB;AACjC,QAAI,CAAC,KAAK,YAAY,MAAM;AAC3B,qBAAe,MAAM;AACpB,YAAI,KAAK,OAAO,WAAY;AAC5B,cAAM,SAAS,KAAK;AACpB,aAAK,cAAc,oBAAI,IAAI;AAC3B,mCAAS,MAAM;AACd,qBAAW,QAAQ,QAAQ;AAC1B,iBAAK,mBAAmB,IAAI;AAAA,UAC7B;AAAA,QACD,CAAC;AAAA,MACF,CAAC;AAAA,IACF;AACA,eAAW,QAAQ,OAAO;AACzB,WAAK,YAAY,IAAI,IAAI;AAAA,IAC1B;AAAA,EACD;AAAA,EAEQ,qBAAqB,MAAkB;AAC9C,eAAW,YAAY,SAAS,OAAO;AACtC,UACC,SAAS,WAAW,KAAK,cACzB,+BAAiB,0BAA0B,EAAE;AAAA,QAC5C,CAAC,CAAC,KAAK,YAAY,MAAM,SAAS,GAAG,OAAO,KAAK,GAAG,KAAK;AAAA,MAC1D,GACC;AACD,eAAO;AAAA,MACR;AAAA,IACD;AAEA,UAAM,MAAM,KAAK,YAAY,KAAK,IAAI,GAAG,KAAK,KAAK,IAAI;AACvD,UAAM,WAAW,IAAI,SAAS,KAAK,QAAQ,OAAO,KAAK,UAAU,GAAG,CAAC,KAAK;AAAA,MACzE,OAAG,iCAAmB,4BAA4B,CAAC,QAAQ,KAAK,GAAG,CAAC;AAAA,MACpE,SAAS;AAAA,IACV,CAAC;AAED,aAAS,MAAM,IAAI,QAAQ;AAE3B,WAAO;AAAA,EACR;AAAA,EAEA,MAAM,yBAAyB,MAAkB;AAChD,UAAM,MAAM,KAAK,YAAY,KAAK,IAAI,GAAG,KAAK,KAAK,IAAI;AACvD,UAAM,UAAU,MAAM,yBAAY,aAAa,GAAG;AAElD,UAAM,UAAM,sBAAQ;AAAA,MACnB,QAAQ,OAAO;AAAA,MACf,KAAK,IAAI,SAAS,UAAU,KAAK,IAAI,MAAM,MAAM;AAAA,MACjD,KAAK,IAAI,OAAO,QAAQ,KAAK,IAAI,IAAI,MAAM;AAAA,IAC5C,CAAC,EAAE,KAAK,GAAG;AACX,eAAO,sBAAQ;AAAA,MACd;AAAA,MACA,kBAAkB,KAAK,MAAM;AAAA,MAC7B,UAAU,GAAG;AAAA,MACb,KAAK,iBAAiB,sBAAsB,KAAK,cAAc,MAAM;AAAA,MACrE,KAAK,kBAAkB,uBAAuB,KAAK,eAAe,MAAM;AAAA,MACxE,KAAK,UAAU,mBAAmB,KAAK,OAAO,MAAM;AAAA,MACpD,KAAK,QAAQ,iBAAiB,KAAK,KAAK,MAAM;AAAA,MAC9C,KAAK,SAAS,kBAAkB,KAAK,MAAM,MAAM;AAAA,MACjD,KAAK,kBAAkB,4BAA4B,KAAK,eAAe,MAAM;AAAA,MAC7E,KAAK,kBAAkB,wBAAwB,KAAK,eAAe,MAAM;AAAA,MACzE,KAAK,eAAe,oBAAoB,KAAK,YAAY,MAAM;AAAA,MAC/D;AAAA,IACD,CAAC,EAAE,KAAK,IAAI;AAAA,EACb;AACD;AAGA,MAAM,6BAA6B;AAAA,EAClC,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,cAAc;AAAA,EACd,iBAAiB;AAAA,EACjB,gBAAgB;AAAA,EAChB,iBAAiB;AAAA,EACjB,iBAAiB;AAClB;",
-  "names": []
-}

package/dist-cjs/lib/hooks/usePassThroughMouseOverEvents.js

@@ -1,48 +0,0 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var usePassThroughMouseOverEvents_exports = {};
-__export(usePassThroughMouseOverEvents_exports, {
-  usePassThroughMouseOverEvents: () => usePassThroughMouseOverEvents
-});
-module.exports = __toCommonJS(usePassThroughMouseOverEvents_exports);
-var import_react = require("react");
-var import_dom = require("../utils/dom");
-var import_useContainer = require("./useContainer");
-function usePassThroughMouseOverEvents(ref) {
-  if (!ref) throw Error("usePassThroughWheelEvents must be passed a ref");
-  const container = (0, import_useContainer.useContainer)();
-  (0, import_react.useEffect)(() => {
-    function onMouseOver(e) {
-      if (e.isSpecialRedispatchedEvent) return;
-      (0, import_dom.preventDefault)(e);
-      const cvs = container.querySelector(".tl-canvas");
-      if (!cvs) return;
-      const newEvent = new PointerEvent(e.type, e);
-      newEvent.isSpecialRedispatchedEvent = true;
-      cvs.dispatchEvent(newEvent);
-    }
-    const elm = ref.current;
-    if (!elm) return;
-    elm.addEventListener("mouseover", onMouseOver, { passive: false });
-    return () => {
-      elm.removeEventListener("mouseover", onMouseOver);
-    };
-  }, [container, ref]);
-}
-//# sourceMappingURL=usePassThroughMouseOverEvents.js.map