@tldraw/tlschema 4.3.0-next.2d181ae353a2 → 4.3.0-next.40e4536afc8e

package/src/shapes/TLArrowShape.ts

@@ -1,9 +1,10 @@
 import { createMigrationSequence } from '@tldraw/store'
+import { structuredClone } from '@tldraw/utils'
 import { T } from '@tldraw/validate'
 import { TLRichText, richTextValidator, toRichText } from '../misc/TLRichText'
 import { VecModel, vecModelValidator } from '../misc/geometry-types'
 import { createBindingId } from '../records/TLBinding'
-import { TLShapeId, createShapePropsMigrationIds } from '../records/TLShape'
+import { TLShape, TLShapeId, createShapePropsMigrationIds } from '../records/TLShape'
 import { RecordProps, TLPropsMigration, createPropsMigration } from '../recordsWithProps'
 import { StyleProp } from '../styles/StyleProp'
 import {
@@ -276,6 +277,7 @@ export const arrowShapeVersions = createShapePropsMigrationIds('arrow', {
 	AddScale: 5,
 	AddElbow: 6,
 	AddRichText: 7,
+	AddRichTextAttrs: 8,
 })
 
 function propsMigration(migration: TLPropsMigration) {
@@ -341,8 +343,8 @@ export const arrowShapeMigrations = createMigrationSequence({
 
 		{
 			id: arrowShapeVersions.ExtractBindings,
-			scope: 'store',
-			up: (oldStore) => {
+			scope: 'storage',
+			up: (storage) => {
 				type OldArrowTerminal =
 					| {
 							type: 'point'
@@ -361,11 +363,15 @@ export const arrowShapeMigrations = createMigrationSequence({
 
 				type OldArrow = TLBaseShape<'arrow', { start: OldArrowTerminal; end: OldArrowTerminal }>
 
-				const arrows = Object.values(oldStore).filter(
-					(r: any): r is OldArrow => r.typeName === 'shape' && r.type === 'arrow'
-				)
+				// Collect all updates during iteration, then apply them after.
+				// This avoids issues with live iterators (e.g., SQLite) where updating
+				// records during iteration can cause them to be visited multiple times.
+				const updates: [string, unknown][] = []
 
-				for (const arrow of arrows) {
+				for (const record of storage.values()) {
+					if (record.typeName !== 'shape' || (record as TLShape).type !== 'arrow') continue
+					const arrow = record as OldArrow
+					const newArrow = structuredClone(arrow)
 					const { start, end } = arrow.props
 					if (start.type === 'binding') {
 						const id = createBindingId()
@@ -384,10 +390,10 @@ export const arrowShapeMigrations = createMigrationSequence({
 							},
 						}
 
-						oldStore[id] = binding
-						arrow.props.start = { x: 0, y: 0 }
+						updates.push([id, binding])
+						newArrow.props.start = { x: 0, y: 0 }
 					} else {
-						delete arrow.props.start.type
+						delete newArrow.props.start.type
 					}
 					if (end.type === 'binding') {
 						const id = createBindingId()
@@ -406,11 +412,16 @@ export const arrowShapeMigrations = createMigrationSequence({
 							},
 						}
 
-						oldStore[id] = binding
-						arrow.props.end = { x: 0, y: 0 }
+						updates.push([id, binding])
+						newArrow.props.end = { x: 0, y: 0 }
 					} else {
-						delete arrow.props.end.type
+						delete newArrow.props.end.type
 					}
+					updates.push([arrow.id, newArrow])
+				}
+
+				for (const [id, record] of updates) {
+					storage.set(id, record as any)
 				}
 			},
 		},
@@ -445,5 +456,17 @@ export const arrowShapeMigrations = createMigrationSequence({
 			// 	delete props.richText
 			// },
 		}),
+		propsMigration({
+			id: arrowShapeVersions.AddRichTextAttrs,
+			up: (_props) => {
+				// noop - attrs is optional so old records are valid
+			},
+			down: (props) => {
+				// Remove attrs from richText when migrating down
+				if (props.richText && 'attrs' in props.richText) {
+					delete props.richText.attrs
+				}
+			},
+		}),
 	],
 })

package/src/shapes/TLDrawShape.ts

@@ -1,5 +1,6 @@
 import { T } from '@tldraw/validate'
-import { VecModel, vecModelValidator } from '../misc/geometry-types'
+import { b64Vecs } from '../misc/b64Vecs'
+import { VecModel } from '../misc/geometry-types'
 import { createShapePropsMigrationIds, createShapePropsMigrationSequence } from '../records/TLShape'
 import { RecordProps } from '../recordsWithProps'
 import { DefaultColorStyle, TLDefaultColorStyle } from '../styles/TLColorStyle'
@@ -16,26 +17,18 @@ import { TLBaseShape } from './TLBaseShape'
 export interface TLDrawShapeSegment {
 	/** Type of drawing segment - 'free' for freehand curves, 'straight' for line segments */
 	type: 'free' | 'straight'
-	/** Array of points defining the segment path with x, y coordinates and pressure (z) */
-	points: VecModel[]
+	/** Base64-encoded points (x, y, z triplets stored as Float16) */
+	points: string
 }
 
 /**
  * Validator for draw shape segments ensuring proper structure and data types.
  *
  * @public
- * @example
- * ```ts
- * const segment: TLDrawShapeSegment = {
- *   type: 'free',
- *   points: [{ x: 0, y: 0, z: 0.5 }, { x: 10, y: 10, z: 0.7 }]
- * }
- * const isValid = DrawShapeSegment.isValid(segment)
- * ```
  */
 export const DrawShapeSegment: T.ObjectValidator<TLDrawShapeSegment> = T.object({
 	type: T.literalEnum('free', 'straight'),
-	points: T.arrayOf(vecModelValidator),
+	points: T.string,
 })
 
 /**
@@ -62,6 +55,10 @@ export interface TLDrawShapeProps {
 	isPen: boolean
 	/** Scale factor applied to the drawing */
 	scale: number
+	/** Horizontal scale factor for lazy resize */
+	scaleX: number
+	/** Vertical scale factor for lazy resize */
+	scaleY: number
 }
 
 /**
@@ -118,6 +115,7 @@ export type TLDrawShape = TLBaseShape<'draw', TLDrawShapeProps>
  * const isValid = drawShapeProps.color.isValid(props.color)
  * ```
  */
+/** @public */
 export const drawShapeProps: RecordProps<TLDrawShape> = {
 	color: DefaultColorStyle,
 	fill: DefaultFillStyle,
@@ -128,11 +126,14 @@ export const drawShapeProps: RecordProps<TLDrawShape> = {
 	isClosed: T.boolean,
 	isPen: T.boolean,
 	scale: T.nonZeroNumber,
+	scaleX: T.nonZeroFiniteNumber,
+	scaleY: T.nonZeroFiniteNumber,
 }
 
 const Versions = createShapePropsMigrationIds('draw', {
 	AddInPen: 1,
 	AddScale: 2,
+	Base64: 3,
 })
 
 /**
@@ -184,5 +185,51 @@ export const drawShapeMigrations = createShapePropsMigrationSequence({
 				delete props.scale
 			},
 		},
+		{
+			id: Versions.Base64,
+			up: (props) => {
+				props.segments = props.segments.map((segment: any) => {
+					return {
+						...segment,
+						// Only encode if points is an array (not already base64 string)
+						points:
+							typeof segment.points === 'string'
+								? segment.points
+								: b64Vecs.encodePoints(segment.points),
+					}
+				})
+				props.scaleX = props.scaleX ?? 1
+				props.scaleY = props.scaleY ?? 1
+			},
+			down: (props) => {
+				props.segments = props.segments.map((segment: any) => ({
+					...segment,
+					// Only decode if points is a string (not already VecModel[])
+					points: Array.isArray(segment.points)
+						? segment.points
+						: b64Vecs.decodePoints(segment.points),
+				}))
+				delete props.scaleX
+				delete props.scaleY
+			},
+		},
 	],
 })
+
+/**
+ * Compress legacy draw shape segments by converting VecModel[] points to base64 format.
+ * This function is useful for converting old draw shape data to the new compressed format.
+ *
+ * @public
+ */
+export function compressLegacySegments(
+	segments: {
+		type: 'free' | 'straight'
+		points: VecModel[]
+	}[]
+): TLDrawShapeSegment[] {
+	return segments.map((segment) => ({
+		...segment,
+		points: b64Vecs.encodePoints(segment.points),
+	}))
+}

package/src/shapes/TLEmbedShape.ts

@@ -10,6 +10,7 @@ const TLDRAW_APP_RE = /(^\/r\/[^/]+\/?$)/
 const EMBED_DEFINITIONS = [
 	{
 		hostnames: ['beta.tldraw.com', 'tldraw.com', 'localhost:3000'],
+		canEditWhileLocked: true,
 		fromEmbedUrl: (url: string) => {
 			const urlObj = safeParseUrl(url)
 			if (urlObj && urlObj.pathname.match(TLDRAW_APP_RE)) {
@@ -20,6 +21,7 @@ const EMBED_DEFINITIONS = [
 	},
 	{
 		hostnames: ['figma.com'],
+		canEditWhileLocked: true,
 		fromEmbedUrl: (url: string) => {
 			const urlObj = safeParseUrl(url)
 			if (urlObj && urlObj.pathname.match(/^\/embed\/?$/)) {
@@ -33,6 +35,7 @@ const EMBED_DEFINITIONS = [
 	},
 	{
 		hostnames: ['google.*'],
+		canEditWhileLocked: true,
 		fromEmbedUrl: (url: string) => {
 			const urlObj = safeParseUrl(url)
 			if (!urlObj) return
@@ -48,6 +51,7 @@ const EMBED_DEFINITIONS = [
 	},
 	{
 		hostnames: ['val.town'],
+		canEditWhileLocked: true,
 		fromEmbedUrl: (url: string) => {
 			const urlObj = safeParseUrl(url)
 			// e.g. extract "steveruizok/mathFact" from https://www.val.town/v/steveruizok/mathFact
@@ -60,6 +64,7 @@ const EMBED_DEFINITIONS = [
 	},
 	{
 		hostnames: ['codesandbox.io'],
+		canEditWhileLocked: true,
 		fromEmbedUrl: (url: string) => {
 			const urlObj = safeParseUrl(url)
 			const matches = urlObj && urlObj.pathname.match(/\/embed\/([^/]+)\/?/)
@@ -71,6 +76,7 @@ const EMBED_DEFINITIONS = [
 	},
 	{
 		hostnames: ['codepen.io'],
+		canEditWhileLocked: true,
 		fromEmbedUrl: (url: string) => {
 			const CODEPEN_EMBED_REGEXP = /https:\/\/codepen.io\/([^/]+)\/embed\/([^/]+)/
 			const matches = url.match(CODEPEN_EMBED_REGEXP)
@@ -83,6 +89,7 @@ const EMBED_DEFINITIONS = [
 	},
 	{
 		hostnames: ['scratch.mit.edu'],
+		canEditWhileLocked: true,
 		fromEmbedUrl: (url: string) => {
 			const SCRATCH_EMBED_REGEXP = /https:\/\/scratch.mit.edu\/projects\/embed\/([^/]+)/
 			const matches = url.match(SCRATCH_EMBED_REGEXP)
@@ -95,6 +102,7 @@ const EMBED_DEFINITIONS = [
 	},
 	{
 		hostnames: ['*.youtube.com', 'youtube.com', 'youtu.be'],
+		canEditWhileLocked: true,
 		fromEmbedUrl: (url: string) => {
 			const urlObj = safeParseUrl(url)
 			if (!urlObj) return
@@ -111,6 +119,7 @@ const EMBED_DEFINITIONS = [
 	},
 	{
 		hostnames: ['calendar.google.*'],
+		canEditWhileLocked: true,
 		fromEmbedUrl: (url: string) => {
 			const urlObj = safeParseUrl(url)
 			const srcQs = urlObj?.searchParams.get('src')
@@ -129,6 +138,7 @@ const EMBED_DEFINITIONS = [
 	},
 	{
 		hostnames: ['docs.google.*'],
+		canEditWhileLocked: true,
 		fromEmbedUrl: (url: string) => {
 			const urlObj = safeParseUrl(url)
 
@@ -145,6 +155,7 @@ const EMBED_DEFINITIONS = [
 	},
 	{
 		hostnames: ['gist.github.com'],
+		canEditWhileLocked: true,
 		fromEmbedUrl: (url: string) => {
 			const urlObj = safeParseUrl(url)
 			if (urlObj && urlObj.pathname.match(/\/([^/]+)\/([^/]+)/)) {
@@ -156,6 +167,7 @@ const EMBED_DEFINITIONS = [
 	},
 	{
 		hostnames: ['replit.com'],
+		canEditWhileLocked: true,
 		fromEmbedUrl: (url: string) => {
 			const urlObj = safeParseUrl(url)
 			if (
@@ -171,6 +183,7 @@ const EMBED_DEFINITIONS = [
 	},
 	{
 		hostnames: ['felt.com'],
+		canEditWhileLocked: true,
 		fromEmbedUrl: (url: string) => {
 			const urlObj = safeParseUrl(url)
 			if (urlObj && urlObj.pathname.match(/^\/embed\/map\//)) {
@@ -182,6 +195,7 @@ const EMBED_DEFINITIONS = [
 	},
 	{
 		hostnames: ['open.spotify.com'],
+		canEditWhileLocked: true,
 		fromEmbedUrl: (url: string) => {
 			const urlObj = safeParseUrl(url)
 			if (urlObj && urlObj.pathname.match(/^\/embed\/(artist|album)\//)) {
@@ -192,6 +206,7 @@ const EMBED_DEFINITIONS = [
 	},
 	{
 		hostnames: ['vimeo.com', 'player.vimeo.com'],
+		canEditWhileLocked: true,
 		fromEmbedUrl: (url: string) => {
 			const urlObj = safeParseUrl(url)
 			if (urlObj && urlObj.hostname === 'player.vimeo.com') {
@@ -205,6 +220,7 @@ const EMBED_DEFINITIONS = [
 	},
 	{
 		hostnames: ['observablehq.com'],
+		canEditWhileLocked: true,
 		fromEmbedUrl: (url: string) => {
 			const urlObj = safeParseUrl(url)
 			if (urlObj && urlObj.pathname.match(/^\/embed\/@([^/]+)\/([^/]+)\/?$/)) {
@@ -219,6 +235,7 @@ const EMBED_DEFINITIONS = [
 	},
 	{
 		hostnames: ['desmos.com'],
+		canEditWhileLocked: true,
 		fromEmbedUrl: (url: string) => {
 			const urlObj = safeParseUrl(url)
 			if (

package/src/shapes/TLGeoShape.ts

@@ -193,6 +193,7 @@ const geoShapeVersions = createShapePropsMigrationIds('geo', {
 	MakeUrlsValid: 8,
 	AddScale: 9,
 	AddRichText: 10,
+	AddRichTextAttrs: 11,
 })
 
 /**
@@ -205,7 +206,7 @@ export { geoShapeVersions as geoShapeVersions }
 /**
  * Migration sequence for geo shape properties across different schema versions.
  * Handles evolution of geo shapes including URL support, label colors, alignment changes,
- * and the transition from plain text to rich text.
+ * the transition from plain text to rich text, and support for attrs property on richText.
  *
  * @public
  */
@@ -305,5 +306,17 @@ export const geoShapeMigrations = createShapePropsMigrationSequence({
 			// 	delete props.richText
 			// },
 		},
+		{
+			id: geoShapeVersions.AddRichTextAttrs,
+			up: (_props) => {
+				// noop - attrs is optional so old records are valid
+			},
+			down: (props) => {
+				// Remove attrs from richText when migrating down
+				if (props.richText && 'attrs' in props.richText) {
+					delete props.richText.attrs
+				}
+			},
+		},
 	],
 })

package/src/shapes/TLHighlightShape.ts

@@ -1,4 +1,5 @@
 import { T } from '@tldraw/validate'
+import { b64Vecs } from '../misc/b64Vecs'
 import { createShapePropsMigrationIds, createShapePropsMigrationSequence } from '../records/TLShape'
 import { RecordProps } from '../recordsWithProps'
 import { DefaultColorStyle, TLDefaultColorStyle } from '../styles/TLColorStyle'
@@ -36,6 +37,10 @@ export interface TLHighlightShapeProps {
 	isPen: boolean
 	/** Scale factor applied to the highlight shape for display */
 	scale: number
+	/** Horizontal scale factor for lazy resize */
+	scaleX: number
+	/** Vertical scale factor for lazy resize */
+	scaleY: number
 }
 
 /**
@@ -84,6 +89,7 @@ export type TLHighlightShape = TLBaseShape<'highlight', TLHighlightShapeProps>
  * const validatedProps = validator.validate(someHighlightProps)
  * ```
  */
+/** @public */
 export const highlightShapeProps: RecordProps<TLHighlightShape> = {
 	color: DefaultColorStyle,
 	size: DefaultSizeStyle,
@@ -91,10 +97,13 @@ export const highlightShapeProps: RecordProps<TLHighlightShape> = {
 	isComplete: T.boolean,
 	isPen: T.boolean,
 	scale: T.nonZeroNumber,
+	scaleX: T.nonZeroFiniteNumber,
+	scaleY: T.nonZeroFiniteNumber,
 }
 
 const Versions = createShapePropsMigrationIds('highlight', {
 	AddScale: 1,
+	Base64: 2,
 })
 
 /**
@@ -122,5 +131,33 @@ export const highlightShapeMigrations = createShapePropsMigrationSequence({
 				delete props.scale
 			},
 		},
+		{
+			id: Versions.Base64,
+			up: (props) => {
+				props.segments = props.segments.map((segment: any) => {
+					return {
+						...segment,
+						// Only encode if points is an array (not already base64 string)
+						points:
+							typeof segment.points === 'string'
+								? segment.points
+								: b64Vecs.encodePoints(segment.points),
+					}
+				})
+				props.scaleX = props.scaleX ?? 1
+				props.scaleY = props.scaleY ?? 1
+			},
+			down: (props) => {
+				props.segments = props.segments.map((segment: any) => ({
+					...segment,
+					// Only decode if points is a string (not already VecModel[])
+					points: Array.isArray(segment.points)
+						? segment.points
+						: b64Vecs.decodePoints(segment.points),
+				}))
+				delete props.scaleX
+				delete props.scaleY
+			},
+		},
 	],
 })

package/src/shapes/TLNoteShape.ts

@@ -142,6 +142,7 @@ const Versions = createShapePropsMigrationIds('note', {
 	AddScale: 7,
 	AddLabelColor: 8,
 	AddRichText: 9,
+	AddRichTextAttrs: 10,
 })
 
 /**
@@ -156,7 +157,8 @@ export { Versions as noteShapeVersions }
  * Migration sequence for note shapes. Handles schema evolution over time by defining
  * how to upgrade and downgrade note shape data between different versions. Includes
  * migrations for URL properties, text alignment changes, vertical alignment addition,
- * font size adjustments, scaling support, label color, and the transition from plain text to rich text.
+ * font size adjustments, scaling support, label color, the transition from plain text to rich text,
+ * and support for attrs property on richText.
  *
  * @public
  */
@@ -251,5 +253,17 @@ export const noteShapeMigrations = createShapePropsMigrationSequence({
 			// 	delete props.richText
 			// },
 		},
+		{
+			id: Versions.AddRichTextAttrs,
+			up: (_props) => {
+				// noop - attrs is optional so old records are valid
+			},
+			down: (props) => {
+				// Remove attrs from richText when migrating down
+				if (props.richText && 'attrs' in props.richText) {
+					delete props.richText.attrs
+				}
+			},
+		},
 	],
 })

package/src/shapes/TLTextShape.ts

@@ -104,6 +104,7 @@ const Versions = createShapePropsMigrationIds('text', {
 	RemoveJustify: 1,
 	AddTextAlign: 2,
 	AddRichText: 3,
+	AddRichTextAttrs: 4,
 })
 
 /**
@@ -116,8 +117,8 @@ const Versions = createShapePropsMigrationIds('text', {
  * import { textShapeVersions } from '@tldraw/tlschema'
  *
  * // Check if shape data needs migration
- * if (shapeVersion < textShapeVersions.AddRichText) {
- *   // Apply rich text migration
+ * if (shapeVersion < textShapeVersions.AddRichTextAttrs) {
+ *   // Apply rich text attrs migration
  * }
  * ```
  */
@@ -131,6 +132,7 @@ export { Versions as textShapeVersions }
  * - RemoveJustify: Replaced 'justify' alignment with 'start'
  * - AddTextAlign: Migrated from 'align' to 'textAlign' property
  * - AddRichText: Converted plain text to rich text format
+ * - AddRichTextAttrs: Added support for attrs property on richText
  *
  * @public
  */
@@ -167,5 +169,17 @@ export const textShapeMigrations = createShapePropsMigrationSequence({
 			// 	delete props.richText
 			// },
 		},
+		{
+			id: Versions.AddRichTextAttrs,
+			up: (_props) => {
+				// noop - attrs is optional so old records are valid
+			},
+			down: (props) => {
+				// Remove attrs from richText when migrating down
+				if (props.richText && 'attrs' in props.richText) {
+					delete props.richText.attrs
+				}
+			},
+		},
 	],
 })

package/src/store-migrations.ts

@@ -67,36 +67,36 @@ export const storeMigrations = createMigrationSequence({
 	sequence: [
 		{
 			id: Versions.RemoveCodeAndIconShapeTypes,
-			scope: 'store',
-			up: (store) => {
-				for (const [id, record] of objectMapEntries(store)) {
+			scope: 'storage',
+			up: (storage) => {
+				for (const [id, record] of storage.entries()) {
 					if (
 						record.typeName === 'shape' &&
 						'type' in record &&
 						(record.type === 'icon' || record.type === 'code')
 					) {
-						delete store[id]
+						storage.delete(id)
 					}
 				}
 			},
 		},
 		{
 			id: Versions.AddInstancePresenceType,
-			scope: 'store',
-			up(_store) {
+			scope: 'storage',
+			up(_storage) {
 				// noop
 				// there used to be a down migration for this but we made down migrations optional
-				// and we don't use them on store-level migrations so we can just remove it
+				// and we don't use them on storage-level migrations so we can just remove it
 			},
 		},
 		{
 			// remove user and presence records and add pointer records
 			id: Versions.RemoveTLUserAndPresenceAndAddPointer,
-			scope: 'store',
-			up: (store) => {
-				for (const [id, record] of objectMapEntries(store)) {
+			scope: 'storage',
+			up: (storage) => {
+				for (const [id, record] of storage.entries()) {
 					if (record.typeName.match(/^(user|user_presence)$/)) {
-						delete store[id]
+						storage.delete(id)
 					}
 				}
 			},
@@ -104,11 +104,11 @@ export const storeMigrations = createMigrationSequence({
 		{
 			// remove user document records
 			id: Versions.RemoveUserDocument,
-			scope: 'store',
-			up: (store) => {
-				for (const [id, record] of objectMapEntries(store)) {
+			scope: 'storage',
+			up: (storage) => {
+				for (const [id, record] of storage.entries()) {
 					if (record.typeName.match('user_document')) {
-						delete store[id]
+						storage.delete(id)
 					}
 				}
 			},