@tldraw/editor 4.4.0 → 4.5.0-canary.034ea85352da

package/src/lib/hooks/useEditor.tsx

@@ -1,5 +1,5 @@
 import React, { createContext } from 'react'
-import { Editor } from '../editor/Editor'
+import type { Editor } from '../editor/Editor'
 import { IdProvider } from './useSafeId'
 
 /** @public */

package/src/lib/hooks/useEditorComponents.tsx

@@ -1,90 +1,30 @@
-import { ComponentType, ReactNode, RefAttributes, createContext, useContext, useMemo } from 'react'
+import { ReactNode, useMemo } from 'react'
 import { DefaultBackground } from '../components/default-components/DefaultBackground'
-import { DefaultBrush, TLBrushProps } from '../components/default-components/DefaultBrush'
-import {
-	DefaultCanvas,
-	TLCanvasComponentProps,
-} from '../components/default-components/DefaultCanvas'
-import {
-	DefaultCollaboratorHint,
-	TLCollaboratorHintProps,
-} from '../components/default-components/DefaultCollaboratorHint'
-import { DefaultCursor, TLCursorProps } from '../components/default-components/DefaultCursor'
-import {
-	DefaultErrorFallback,
-	TLErrorFallbackComponent,
-} from '../components/default-components/DefaultErrorFallback'
-import { DefaultGrid, TLGridProps } from '../components/default-components/DefaultGrid'
-import { DefaultHandle, TLHandleProps } from '../components/default-components/DefaultHandle'
-import { DefaultHandles, TLHandlesProps } from '../components/default-components/DefaultHandles'
+import { DefaultBrush } from '../components/default-components/DefaultBrush'
+import { DefaultCanvas } from '../components/default-components/DefaultCanvas'
+import { DefaultCollaboratorHint } from '../components/default-components/DefaultCollaboratorHint'
+import { DefaultCursor } from '../components/default-components/DefaultCursor'
+import { DefaultErrorFallback } from '../components/default-components/DefaultErrorFallback'
+import { DefaultGrid } from '../components/default-components/DefaultGrid'
+import { DefaultHandle } from '../components/default-components/DefaultHandle'
+import { DefaultHandles } from '../components/default-components/DefaultHandles'
 import { DefaultLoadingScreen } from '../components/default-components/DefaultLoadingScreen'
-import { DefaultScribble, TLScribbleProps } from '../components/default-components/DefaultScribble'
-import { TLSelectionBackgroundProps } from '../components/default-components/DefaultSelectionBackground'
-import {
-	DefaultSelectionForeground,
-	TLSelectionForegroundProps,
-} from '../components/default-components/DefaultSelectionForeground'
-import {
-	DefaultShapeErrorFallback,
-	TLShapeErrorFallbackComponent,
-} from '../components/default-components/DefaultShapeErrorFallback'
-import {
-	DefaultShapeIndicator,
-	TLShapeIndicatorProps,
-} from '../components/default-components/DefaultShapeIndicator'
-import {
-	DefaultShapeIndicatorErrorFallback,
-	TLShapeIndicatorErrorFallbackComponent,
-} from '../components/default-components/DefaultShapeIndicatorErrorFallback'
+import { DefaultScribble } from '../components/default-components/DefaultScribble'
+import { DefaultSelectionForeground } from '../components/default-components/DefaultSelectionForeground'
+import { DefaultShapeErrorFallback } from '../components/default-components/DefaultShapeErrorFallback'
+import { DefaultShapeIndicator } from '../components/default-components/DefaultShapeIndicator'
+import { DefaultShapeIndicatorErrorFallback } from '../components/default-components/DefaultShapeIndicatorErrorFallback'
 import { DefaultShapeIndicators } from '../components/default-components/DefaultShapeIndicators'
-import {
-	DefaultShapeWrapper,
-	TLShapeWrapperProps,
-} from '../components/default-components/DefaultShapeWrapper'
-import {
-	DefaultSnapIndicator,
-	TLSnapIndicatorProps,
-} from '../components/default-components/DefaultSnapIndictor'
+import { DefaultShapeWrapper } from '../components/default-components/DefaultShapeWrapper'
+import { DefaultSnapIndicator } from '../components/default-components/DefaultSnapIndictor'
 import { DefaultSpinner } from '../components/default-components/DefaultSpinner'
 import { DefaultSvgDefs } from '../components/default-components/DefaultSvgDefs'
+import type { TLEditorComponents } from './EditorComponentsContext'
+import { EditorComponentsContext } from './EditorComponentsContext'
 import { useShallowObjectIdentity } from './useIdentity'
 
-/** @public */
-export interface TLEditorComponents {
-	Background?: ComponentType | null
-	Brush?: ComponentType<TLBrushProps> | null
-	Canvas?: ComponentType<TLCanvasComponentProps> | null
-	CollaboratorBrush?: ComponentType<TLBrushProps> | null
-	CollaboratorCursor?: ComponentType<TLCursorProps> | null
-	CollaboratorHint?: ComponentType<TLCollaboratorHintProps> | null
-	CollaboratorScribble?: ComponentType<TLScribbleProps> | null
-	CollaboratorShapeIndicator?: ComponentType<TLShapeIndicatorProps> | null
-	Cursor?: ComponentType<TLCursorProps> | null
-	Grid?: ComponentType<TLGridProps> | null
-	Handle?: ComponentType<TLHandleProps> | null
-	Handles?: ComponentType<TLHandlesProps> | null
-	InFrontOfTheCanvas?: ComponentType | null
-	LoadingScreen?: ComponentType | null
-	OnTheCanvas?: ComponentType | null
-	Overlays?: ComponentType | null
-	Scribble?: ComponentType<TLScribbleProps> | null
-	SelectionBackground?: ComponentType<TLSelectionBackgroundProps> | null
-	SelectionForeground?: ComponentType<TLSelectionForegroundProps> | null
-	ShapeIndicator?: ComponentType<TLShapeIndicatorProps> | null
-	ShapeIndicators?: ComponentType | null
-	ShapeWrapper?: ComponentType<TLShapeWrapperProps & RefAttributes<HTMLDivElement>> | null
-	SnapIndicator?: ComponentType<TLSnapIndicatorProps> | null
-	Spinner?: ComponentType<React.SVGProps<SVGSVGElement>> | null
-	SvgDefs?: ComponentType | null
-	ZoomBrush?: ComponentType<TLBrushProps> | null
-
-	// These will always have defaults
-	ErrorFallback?: TLErrorFallbackComponent
-	ShapeErrorFallback?: TLShapeErrorFallbackComponent
-	ShapeIndicatorErrorFallback?: TLShapeIndicatorErrorFallbackComponent
-}
-
-const EditorComponentsContext = createContext<null | Required<TLEditorComponents>>(null)
+export { useEditorComponents } from './EditorComponentsContext'
+export type { TLEditorComponents } from './EditorComponentsContext'
 
 interface ComponentsContextProviderProps {
 	overrides?: TLEditorComponents
@@ -138,12 +78,3 @@ export function EditorComponentsProvider({
 		<EditorComponentsContext.Provider value={value}>{children}</EditorComponentsContext.Provider>
 	)
 }
-
-/** @public */
-export function useEditorComponents() {
-	const components = useContext(EditorComponentsContext)
-	if (!components) {
-		throw new Error('useEditorComponents must be used inside of <EditorComponentsProvider />')
-	}
-	return components
-}

package/src/lib/options.ts

@@ -1,6 +1,7 @@
 import { ComponentType, Fragment } from 'react'
 import { DEFAULT_CAMERA_OPTIONS } from './constants'
 import { TLCameraOptions } from './editor/types/misc-types'
+import { VecLike } from './primitives/Vec'
 import { TLDeepLinkOptions } from './utils/deepLinks'
 import { TLTextOptions } from './utils/richText'
 
@@ -155,6 +156,15 @@ export interface TldrawOptions {
 	 * viewport's page dimensions regardless of overview zoom changes.
 	 */
 	readonly quickZoomPreservesScreenBounds: boolean
+	/**
+	 * Called when content is dropped on the canvas. Provides the page position
+	 * where the drop occurred and the underlying drag event object.
+	 * Return true to prevent default drop handling (files, URLs, etc.)
+	 */
+	experimental__onDropOnCanvas?(options: {
+		point: VecLike
+		event: React.DragEvent<Element>
+	}): boolean
 }
 
 /** @public */
@@ -217,4 +227,5 @@ export const defaultTldrawOptions = {
 	text: {},
 	deepLinks: undefined,
 	quickZoomPreservesScreenBounds: true,
+	experimental__onDropOnCanvas: undefined,
 } as const satisfies TldrawOptions

package/src/lib/primitives/Vec.ts

@@ -1,6 +1,12 @@
 import { VecModel } from '@tldraw/tlschema'
 import { EASINGS } from './easings'
-import { clamp, toFixed } from './utils'
+function clamp(n: number, min: number, max?: number): number {
+	return Math.max(min, typeof max !== 'undefined' ? Math.min(n, max) : n)
+}
+
+function toFixed(v: number) {
+	return Math.round(v * 1e2) / 1e2
+}
 
 /** @public */
 export type VecLike = Vec | VecModel

package/src/lib/utils/areShapesContentEqual.ts

@@ -1,4 +1,11 @@
 import { TLShape } from '@tldraw/tlschema'
 
-export const areShapesContentEqual = (a: TLShape, b: TLShape) =>
-	a.props === b.props && a.meta === b.meta
+/**
+ * Checks if two shapes are equal by comparing their props and meta.
+ * @param a - The first shape.
+ * @param b - The second shape.
+ * @returns True if the shapes are equal, false otherwise.
+ */
+export function areShapesContentEqual(a: TLShape, b: TLShape) {
+	return a.props === b.props && a.meta === b.meta
+}

package/src/lib/utils/assets.ts

@@ -1,21 +1,26 @@
 import { fetch } from '@tldraw/utils'
 import { version } from '../../version'
 
-/** @public */
-export function dataUrlToFile(url: string, filename: string, mimeType: string) {
-	return fetch(url)
-		.then(function (res) {
-			return res.arrayBuffer()
-		})
-		.then(function (buf) {
-			return new File([buf], filename, { type: mimeType })
-		})
+/**
+ * Converts a data URL to a file.
+ * @param url - The data URL to convert.
+ * @param filename - The name of the file.
+ * @param mimeType - The MIME type of the file.
+ * @returns A promise that resolves to a file.
+ * @public */
+export async function dataUrlToFile(url: string, filename: string, mimeType: string) {
+	const res = await fetch(url)
+	const buf = await res.arrayBuffer()
+	return new File([buf], filename, { type: mimeType })
 }
 
 /** @internal */
 const CDN_BASE_URL = 'https://cdn.tldraw.com'
 
-/** @public */
+/**
+ * Gets the default CDN base URL.
+ * @returns The default CDN base URL.
+ * @public */
 export function getDefaultCdnBaseUrl() {
 	return `${CDN_BASE_URL}/${version}`
 }

package/src/lib/utils/browserCanvasMaxSize.ts

@@ -90,8 +90,10 @@ const TEST_SIZES = {
 /**
  * Tests ability to read pixel data from canvas elements of various dimensions
  * by decreasing canvas height and/or width until a test succeeds.
+ * @param dimension - The dimension to test.
+ * @returns The maximum size of the canvas for the given dimension.
  */
-export function getCanvasSize(dimension: 'width' | 'height' | 'area') {
+function getCanvasSize(dimension: 'width' | 'height' | 'area'): number {
 	const cropCvs = document.createElement('canvas')
 	cropCvs.width = 1
 	cropCvs.height = 1
@@ -135,7 +137,7 @@ export function getCanvasSize(dimension: 'width' | 'height' | 'area') {
 }
 
 /** @internal */
-export function clampToBrowserMaxCanvasSize(width: number, height: number) {
+export function clampToBrowserMaxCanvasSize(width: number, height: number): [number, number] {
 	if (
 		width <= MAX_SAFE_CANVAS_DIMENSION &&
 		height <= MAX_SAFE_CANVAS_DIMENSION &&

package/src/lib/utils/debug-flags.ts

@@ -57,12 +57,6 @@ export const debugFlags = {
 	debugElbowArrows: createDebugValue('debugElbowArrows', { defaults: { all: false } }),
 } as const
 
-declare global {
-	interface Window {
-		tldrawLog(message: any): void
-	}
-}
-
 // --- 2. USE ---
 // In normal code, read from debug flags directly by calling .value on them:
 //    if (debugFlags.preventDefaultLogging.value) { ... }
@@ -107,20 +101,6 @@ export function createDebugValue<T>(
 	})
 }
 
-// function createFeatureFlag<T>(
-// 	name: string,
-// 	{
-// 		defaults,
-// 		shouldStoreForSession = true,
-// 	}: { defaults: DebugFlagDefaults<T>; shouldStoreForSession?: boolean }
-// ) {
-// 	return createDebugValueBase({
-// 		name,
-// 		defaults,
-// 		shouldStoreForSession,
-// 	})
-// }
-
 function createDebugValueBase<T>(def: DebugFlagDef<T>): DebugFlag<T> {
 	const defaultValue = getDefaultValue(def)
 	const storedValue = def.shouldStoreForSession

package/src/lib/utils/deepLinks.ts

@@ -1,6 +1,6 @@
 import { BoxModel, PageRecordType, TLPageId, TLShapeId, createShapeId } from '@tldraw/tlschema'
 import { exhaustiveSwitchError } from '@tldraw/utils'
-import { Editor } from '../editor/Editor'
+import type { Editor } from '../editor/Editor'
 import { Box } from '../primitives/Box'
 
 /** @public */

package/src/lib/utils/dom.ts

@@ -3,7 +3,7 @@ This is used to facilitate double clicking and pointer capture on elements.
 
 The events in this file are possibly set on individual SVG elements, 
 such as handles or corner handles, rather than on HTML elements or 
-SVGSVGElements. Raw SVG elemnets do not support pointerCapture in 
+SVGSVGElements. Raw SVG elements do not support pointerCapture in
 most cases, meaning that in order for pointer capture to work, we 
 need to crawl up the DOM tree to find the nearest HTML element. Then,
 in order for that element to also call the `onPointerUp` event from
@@ -13,7 +13,6 @@ if the user clicks on a handle but the pointerup does not fire for
 whatever reason.
 */
 
-import React from 'react'
 import { debugFlags, pointerCaptureTrackingObject } from './debug-flags'
 
 /** @public */
@@ -26,10 +25,10 @@ export function loopToHtmlElement(elm: Element): HTMLElement {
 /**
  * This function calls `event.preventDefault()` for you. Why is that useful?
  *
- * Beacuase if you enable `window.preventDefaultLogging = true` it'll log out a message when it
+ * Because if you enable `window.preventDefaultLogging = true` it'll log out a message when it
  * happens. Because we use console.warn rather than (log) you'll get a stack trace in the inspector
  * telling you exactly where it happened. This is important because `e.preventDefault()` is the
- * source of many bugs, but unfortuantly it can't be avoided because it also stops a lot of default
+ * source of many bugs, but unfortunately it can't be avoided because it also stops a lot of default
  * behaviour which doesn't make sense in our UI
  *
  * @param event - To prevent default on
@@ -95,13 +94,13 @@ export const setStyleProperty = (
 	value: string | number
 ) => {
 	if (!elm) return
-	elm.style.setProperty(property, value as string)
+	elm.style.setProperty(property, String(value))
 }
 
 /** @internal */
-export function activeElementShouldCaptureKeys(allowButtons = false) {
+export function activeElementShouldCaptureKeys(ignoreButtons = false) {
 	const { activeElement } = document
-	const elements = allowButtons ? ['input', 'textarea'] : ['input', 'select', 'button', 'textarea']
+	const elements = ignoreButtons ? ['input', 'textarea'] : ['input', 'select', 'button', 'textarea']
 	return !!(
 		activeElement &&
 		((activeElement as HTMLElement).isContentEditable ||

package/src/lib/utils/getIncrementedName.ts

@@ -12,7 +12,7 @@ export function getIncrementedName(name: string, others: string[]) {
 
 	while (set.has(result)) {
 		result = /^.*(\d+)$/.exec(result)?.[1]
-			? result.replace(/(\d+)(?=\D?)$/, (m) => {
+			? result.replace(/(\d+)$/, (m) => {
 					return (+m + 1).toString()
 				})
 			: `${result} 1`

package/src/lib/utils/getPointerInfo.ts

@@ -1,3 +1,4 @@
+import type React from 'react'
 import { Editor } from '../editor/Editor'
 import { isAccelKey } from './keyboard'
 

package/src/lib/utils/getSvgPathFromPoints.ts

@@ -2,7 +2,7 @@ import { VecLike } from '../primitives/Vec'
 import { average, precise } from '../primitives/utils'
 
 /**
- * Turn an array of points into a path of quadradic curves.
+ * Turn an array of points into a path of quadratic curves.
  *
  * @param points - The points returned from perfect-freehand
  * @param closed - Whether the stroke is closed

package/src/lib/utils/keyboard.ts

@@ -1,8 +1,10 @@
 import { tlenv } from '../globals/environment'
 
-/** @internal */
-export const isAccelKey = <InputType extends { metaKey: boolean; ctrlKey: boolean }>(
-	e: InputType
-) => {
+/**
+ * Checks if the accelerator key is pressed.
+ * @param e - The event to check.
+ * @returns True if the accelerator key is pressed, false otherwise.
+ * @internal */
+export function isAccelKey(e: { metaKey: boolean; ctrlKey: boolean }) {
 	return tlenv.isDarwin ? e.metaKey : e.ctrlKey || e.metaKey
 }

package/src/lib/utils/normalizeWheel.ts

@@ -1,12 +1,12 @@
-// Reasonable defaults
+import { tlenv } from '../globals/environment'
+
 const MAX_ZOOM_STEP = 10
-const IS_DARWIN = /Mac|iPod|iPhone|iPad/.test(
-	// eslint-disable-next-line @typescript-eslint/no-deprecated
-	typeof window === 'undefined' ? 'node' : window.navigator.platform
-)
 
-// Adapted from https://stackoverflow.com/a/13650579
-/** @internal */
+/**
+ * Normalizes a wheel event, so that the delta values are consistent across different browsers or devices. Adapted from https://stackoverflow.com/a/13650579.
+ * @param event - The wheel event to normalize.
+ * @returns The normalized wheel event.
+ * @internal */
 export function normalizeWheel(event: WheelEvent | React.WheelEvent<HTMLElement>) {
 	let { deltaY, deltaX } = event
 	let deltaZ = 0
@@ -15,7 +15,7 @@ export function normalizeWheel(event: WheelEvent | React.WheelEvent<HTMLElement>
 	if (event.ctrlKey || event.altKey || event.metaKey) {
 		deltaZ = (Math.abs(deltaY) > MAX_ZOOM_STEP ? MAX_ZOOM_STEP * Math.sign(deltaY) : deltaY) / 100
 	} else {
-		if (event.shiftKey && !IS_DARWIN) {
+		if (event.shiftKey && !tlenv.isDarwin && !tlenv.isIos) {
 			deltaX = deltaY
 			deltaY = 0
 		}

package/src/lib/utils/reorderShapes.ts

@@ -1,7 +1,16 @@
 import { TLParentId, TLShape, TLShapeId, TLShapePartial } from '@tldraw/tlschema'
 import { IndexKey, compact, getIndicesBetween, sortByIndex } from '@tldraw/utils'
-import { Editor } from '../editor/Editor'
+import type { Editor } from '../editor/Editor'
 
+/**
+ * Gets the changes for reordering shapes.
+ * @param editor - The editor.
+ * @param operation - The operation to perform.
+ * @param ids - The ids of the shapes to reorder.
+ * @param opts - The options.
+ * @returns The changes.
+ * @public
+ */
 export function getReorderingShapesChanges(
 	editor: Editor,
 	operation: 'toBack' | 'toFront' | 'forward' | 'backward',
@@ -160,7 +169,7 @@ function getOverlapChecker(editor: Editor, moving: Set<TLShape>) {
 			return { shape, bounds }
 		})
 	)
-	const isOverlapping = (child: TLShape) => {
+	const isContaining = (child: TLShape) => {
 		const bounds = editor.getShapePageBounds(child)
 		if (!bounds) return false
 		return movingBounds.some((other) => {
@@ -168,7 +177,7 @@ function getOverlapChecker(editor: Editor, moving: Set<TLShape>) {
 		})
 	}
 
-	return isOverlapping
+	return isContaining
 }
 
 /**
@@ -187,7 +196,7 @@ function reorderForward(
 	changes: TLShapePartial[],
 	opts?: { considerAllShapes?: boolean }
 ) {
-	const isOverlapping = getOverlapChecker(editor, moving)
+	const isContaining = getOverlapChecker(editor, moving)
 
 	const len = children.length
 
@@ -211,7 +220,7 @@ function reorderForward(
 			}
 			case 'selecting': {
 				if (isMoving) continue
-				if (!opts?.considerAllShapes && !isOverlapping(children[i])) continue
+				if (!opts?.considerAllShapes && !isContaining(children[i])) continue
 				// if we find a non-moving and overlapping shape while selecting, move all selected
 				// shapes in front of the not moving shape; and start skipping
 				const { selectIndex } = state
@@ -246,7 +255,7 @@ function reorderBackward(
 	changes: TLShapePartial[],
 	opts?: { considerAllShapes?: boolean }
 ) {
-	const isOverlapping = getOverlapChecker(editor, moving)
+	const isContaining = getOverlapChecker(editor, moving)
 
 	const len = children.length
 
@@ -269,9 +278,9 @@ function reorderBackward(
 			}
 			case 'selecting': {
 				if (isMoving) continue
-				if (!opts?.considerAllShapes && !isOverlapping(children[i])) continue
+				if (!opts?.considerAllShapes && !isContaining(children[i])) continue
 				// if we find a non-moving and overlapping shape while selecting, move all selected
-				// shapes in behind of the not moving shape; and start skipping
+				// shapes behind the non-moving shape; and start skipping
 				getIndicesBetween(children[i - 1]?.index, children[i].index, state.selectIndex - i).forEach(
 					(index, k) => {
 						const child = children[i + k + 1]

package/src/lib/utils/reparenting.ts

@@ -6,7 +6,6 @@ import { intersectPolygonPolygon } from '../primitives/intersect'
 
 /**
  * Reparents shapes that are no longer contained within their parent shapes.
- * todo: rename me to something more descriptive, like `reparentOccludedShapes` or `reparentAutoDroppedShapes`
  *
  * @param editor - The editor instance.
  * @param shapeIds - The IDs of the shapes to reparent.
@@ -62,9 +61,6 @@ export function kickoutOccludedShapes(
 	for (const [prevParent, lostChildrenIds] of parentsToLostChildren) {
 		const lostChildren = compact(lostChildrenIds.map((id) => editor.getShape(id)))
 
-		// Don't fall "up" into frames in front of the shape
-		// if (pageShapes.indexOf(shape) < frameSortPosition) continue shapeCheck
-
 		// Otherwise, we have no next dropping shape under the cursor, so go find
 		// all the frames on the page where the moving shapes will fall into
 		const { reparenting, remainingShapesToReparent } = getDroppedShapesToNewParents(
@@ -158,17 +154,16 @@ function getOverlappingShapes<T extends TLShape[] | TLShapeId[]>(
 	const parentPageBounds = editor.getShapePageBounds(shape)
 	if (!parentPageBounds) return EMPTY_ARRAY
 
+	const _shape = editor.getShape(shape)
+	if (!_shape) return EMPTY_ARRAY
+
 	const parentGeometry = editor.getShapeGeometry(shape)
 	const parentPageTransform = editor.getShapePageTransform(shape)
 	const parentPageCorners = parentPageTransform.applyToPoints(parentGeometry.vertices)
 
-	const _shape = editor.getShape(shape)
-	if (!_shape) return EMPTY_ARRAY
-
-	const pageTransform = editor.getShapePageTransform(shape)
 	const clipPath = editor.getShapeUtil(_shape.type).getClipPath?.(_shape)
 
-	const parentPageMaskVertices = clipPath ? pageTransform.applyToPoints(clipPath) : undefined
+	const parentPageMaskVertices = clipPath ? parentPageTransform.applyToPoints(clipPath) : undefined
 	const parentPagePolygon = parentPageMaskVertices
 		? intersectPolygonPolygon(parentPageMaskVertices, parentPageCorners)
 		: parentPageCorners
@@ -283,7 +278,7 @@ export function getDroppedShapesToNewParents(
 			// Are the shape and the parent part of different groups?
 			if (shapeGroupId !== parentShapeContainingGroupId) continue shapeCheck
 
-			// Is the shape is actually the ancestor of the parent?
+			// Is the shape actually the ancestor of the parent?
 			if (editor.findShapeAncestor(parentShape, (s) => shape.id === s.id)) continue shapeCheck
 
 			// Convert the parent polygon to the shape's space

package/src/lib/utils/richText.ts

@@ -3,7 +3,7 @@ import { Node, Schema } from '@tiptap/pm/model'
 import { EditorProviderProps } from '@tiptap/react'
 import { TLRichText } from '@tldraw/tlschema'
 import { assert, WeakCache } from '@tldraw/utils'
-import { Editor } from '../editor/Editor'
+import type { Editor } from '../editor/Editor'
 import { TLFontFace } from '../editor/managers/FontManager/FontManager'
 
 /**

package/src/lib/utils/rotation.ts

@@ -1,6 +1,6 @@
 import { isShapeId, TLShape, TLShapeId, TLShapePartial } from '@tldraw/tlschema'
 import { compact } from '@tldraw/utils'
-import { Editor } from '../editor/Editor'
+import type { Editor } from '../editor/Editor'
 import { Mat } from '../primitives/Mat'
 import { canonicalizeRotation } from '../primitives/utils'
 import { Vec, VecLike } from '../primitives/Vec'

package/src/lib/utils/runtime.ts

@@ -2,7 +2,7 @@
 export const runtime: {
 	openWindow(url: string, target: string, allowReferrer?: boolean): void
 	refreshPage(): void
-	hardReset(): void
+	hardReset(): Promise<void>
 } = {
 	openWindow(url, target, allowReferrer = false) {
 		return window.open(url, target, allowReferrer ? 'noopener' : 'noopener noreferrer')
@@ -19,3 +19,28 @@ export const runtime: {
 export function setRuntimeOverrides(input: Partial<typeof runtime>) {
 	Object.assign(runtime, input)
 }
+
+/**
+ * Open a new window with the given URL and target. Prefer this to the window.open function, as it
+ * will work more reliably in embedded scenarios, such as our VS Code extension. See the runtime
+ * object in tldraw/editor for more details.
+ *
+ * @param url - The URL to open.
+ * @param target - The target window to open the URL in.
+ * @param allowReferrer - Whether to allow the referrer to be sent to the new window.
+ * @returns The new window object.
+ * @public
+ */
+export function openWindow(url: string, target = '_blank', allowReferrer?: boolean) {
+	return runtime.openWindow(url, target, allowReferrer)
+}
+
+/** @public */
+export function refreshPage() {
+	runtime.refreshPage()
+}
+
+/** @public */
+export function hardResetEditor() {
+	runtime.hardReset()
+}

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 = '4.4.0'
+export const version = '4.5.0-canary.034ea85352da'
 export const publishDates = {
 	major: '2025-09-18T14:39:22.803Z',
-	minor: '2026-02-18T12:03:50.380Z',
-	patch: '2026-02-18T12:03:50.380Z',
+	minor: '2026-02-19T10:36:24.329Z',
+	patch: '2026-02-19T10:36:24.329Z',
 }

package/dist-cjs/lib/utils/hardResetEditor.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/lib/utils/hardResetEditor.ts"],
-  "sourcesContent": ["import { runtime } from './runtime'\n\n/** @public */\nexport function hardResetEditor() {\n\truntime.hardReset()\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAAwB;AAGjB,SAAS,kBAAkB;AACjC,yBAAQ,UAAU;AACnB;",
-  "names": []
-}

package/dist-cjs/lib/utils/refreshPage.js

@@ -1,28 +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 refreshPage_exports = {};
-__export(refreshPage_exports, {
-  refreshPage: () => refreshPage
-});
-module.exports = __toCommonJS(refreshPage_exports);
-var import_runtime = require("./runtime");
-function refreshPage() {
-  import_runtime.runtime.refreshPage();
-}
-//# sourceMappingURL=refreshPage.js.map