@tldraw/editor 3.14.0-canary.d8a1c8c23469 → 3.14.0-canary.db789786fb06

package/src/lib/primitives/geometry/Polygon2d.ts

@@ -7,5 +7,9 @@ export class Polygon2d extends Polyline2d {
 	constructor(config: Omit<Geometry2dOptions, 'isClosed'> & { points: Vec[] }) {
 		super({ ...config })
 		this.isClosed = true
+
+		if (config.points.length < 3) {
+			throw new Error('Polygon2d: points must be an array of at least 3 points')
+		}
 	}
 }

package/src/lib/primitives/geometry/Polyline2d.ts

@@ -4,18 +4,21 @@ import { Geometry2d, Geometry2dOptions } from './Geometry2d'
 
 /** @public */
 export class Polyline2d extends Geometry2d {
-	points: Vec[]
+	private _points: Vec[]
+	private _segments?: Edge2d[]
 
 	constructor(config: Omit<Geometry2dOptions, 'isFilled' | 'isClosed'> & { points: Vec[] }) {
 		super({ isClosed: false, isFilled: false, ...config })
 		const { points } = config
-		this.points = points
-	}
+		this._points = points
 
-	_segments?: Edge2d[]
+		if (points.length < 2) {
+			throw new Error('Polyline2d: points must be an array of at least 2 points')
+		}
+	}
 
 	// eslint-disable-next-line no-restricted-syntax
-	get segments() {
+	protected get segments() {
 		if (!this._segments) {
 			this._segments = []
 			const { vertices } = this
@@ -38,12 +41,12 @@ export class Polyline2d extends Geometry2d {
 	}
 
 	getVertices() {
-		return this.points
+		return this._points
 	}
 
 	nearestPoint(A: VecLike): Vec {
 		const { segments } = this
-		let nearest = this.points[0]
+		let nearest = this._points[0]
 		let dist = Infinity
 		let p: Vec // current point on segment
 		let d: number // distance from A to p

package/src/lib/primitives/geometry/Rectangle2d.ts

@@ -5,10 +5,10 @@ import { Polygon2d } from './Polygon2d'
 
 /** @public */
 export class Rectangle2d extends Polygon2d {
-	x: number
-	y: number
-	w: number
-	h: number
+	private _x: number
+	private _y: number
+	private _w: number
+	private _h: number
 
 	constructor(
 		config: Omit<Geometry2dOptions, 'isClosed'> & {
@@ -28,18 +28,31 @@ export class Rectangle2d extends Polygon2d {
 				new Vec(x, y + height),
 			],
 		})
-		this.x = x
-		this.y = y
-		this.w = width
-		this.h = height
+		this._x = x
+		this._y = y
+		this._w = width
+		this._h = height
 	}
 
 	getBounds() {
-		return new Box(this.x, this.y, this.w, this.h)
+		return new Box(this._x, this._y, this._w, this._h)
 	}
 
 	getSvgPathData(): string {
-		const { x, y, w, h } = this
-		return `M${x},${y} h${w} v${h} h-${w}z`
+		const { _x: x, _y: y, _w: w, _h: h } = this
+		this.negativeZeroFix()
+		return `M${x},${y} h${w} v${h} h${-w}z`
 	}
+
+	private negativeZeroFix() {
+		this._x = zeroFix(this._x)
+		this._y = zeroFix(this._y)
+		this._w = zeroFix(this._w)
+		this._h = zeroFix(this._h)
+	}
+}
+
+function zeroFix(value: number) {
+	if (Object.is(value, -0)) return 0
+	return value
 }

package/src/lib/primitives/geometry/Stadium2d.ts

@@ -7,13 +7,12 @@ import { Geometry2d, Geometry2dOptions } from './Geometry2d'
 
 /** @public */
 export class Stadium2d extends Geometry2d {
-	w: number
-	h: number
-
-	a: Arc2d
-	b: Edge2d
-	c: Arc2d
-	d: Edge2d
+	private _w: number
+	private _h: number
+	private _a: Arc2d
+	private _b: Edge2d
+	private _c: Arc2d
+	private _d: Edge2d
 
 	constructor(
 		public config: Omit<Geometry2dOptions, 'isClosed'> & {
@@ -23,45 +22,45 @@ export class Stadium2d extends Geometry2d {
 	) {
 		super({ ...config, isClosed: true })
 		const { width: w, height: h } = config
-		this.w = w
-		this.h = h
+		this._w = w
+		this._h = h
 
 		if (h > w) {
 			const r = w / 2
-			this.a = new Arc2d({
+			this._a = new Arc2d({
 				start: new Vec(0, r),
 				end: new Vec(w, r),
 				center: new Vec(w / 2, r),
 				sweepFlag: 1,
 				largeArcFlag: 1,
 			})
-			this.b = new Edge2d({ start: new Vec(w, r), end: new Vec(w, h - r) })
-			this.c = new Arc2d({
+			this._b = new Edge2d({ start: new Vec(w, r), end: new Vec(w, h - r) })
+			this._c = new Arc2d({
 				start: new Vec(w, h - r),
 				end: new Vec(0, h - r),
 				center: new Vec(w / 2, h - r),
 				sweepFlag: 1,
 				largeArcFlag: 1,
 			})
-			this.d = new Edge2d({ start: new Vec(0, h - r), end: new Vec(0, r) })
+			this._d = new Edge2d({ start: new Vec(0, h - r), end: new Vec(0, r) })
 		} else {
 			const r = h / 2
-			this.a = new Arc2d({
+			this._a = new Arc2d({
 				start: new Vec(r, h),
 				end: new Vec(r, 0),
 				center: new Vec(r, r),
 				sweepFlag: 1,
 				largeArcFlag: 1,
 			})
-			this.b = new Edge2d({ start: new Vec(r, 0), end: new Vec(w - r, 0) })
-			this.c = new Arc2d({
+			this._b = new Edge2d({ start: new Vec(r, 0), end: new Vec(w - r, 0) })
+			this._c = new Arc2d({
 				start: new Vec(w - r, 0),
 				end: new Vec(w - r, h),
 				center: new Vec(w - r, r),
 				sweepFlag: 1,
 				largeArcFlag: 1,
 			})
-			this.d = new Edge2d({ start: new Vec(w - r, h), end: new Vec(r, h) })
+			this._d = new Edge2d({ start: new Vec(w - r, h), end: new Vec(r, h) })
 		}
 	}
 
@@ -71,7 +70,7 @@ export class Stadium2d extends Geometry2d {
 		let _d: number
 		let p: Vec
 
-		const { a, b, c, d } = this
+		const { _a: a, _b: b, _c: c, _d: d } = this
 		for (const part of [a, b, c, d]) {
 			p = part.nearestPoint(A)
 			_d = Vec.Dist2(p, A)
@@ -85,12 +84,12 @@ export class Stadium2d extends Geometry2d {
 	}
 
 	hitTestLineSegment(A: VecLike, B: VecLike): boolean {
-		const { a, b, c, d } = this
+		const { _a: a, _b: b, _c: c, _d: d } = this
 		return [a, b, c, d].some((edge) => edge.hitTestLineSegment(A, B))
 	}
 
 	getVertices() {
-		const { a, b, c, d } = this
+		const { _a: a, _b: b, _c: c, _d: d } = this
 		return [a, b, c, d].reduce<Vec[]>((a, p) => {
 			a.push(...p.vertices)
 			return a
@@ -98,17 +97,17 @@ export class Stadium2d extends Geometry2d {
 	}
 
 	getBounds() {
-		return new Box(0, 0, this.w, this.h)
+		return new Box(0, 0, this._w, this._h)
 	}
 
 	getLength() {
-		const { h, w } = this
+		const { _h: h, _w: w } = this
 		if (h > w) return (PI * (w / 2) + (h - w)) * 2
 		else return (PI * (h / 2) + (w - h)) * 2
 	}
 
 	getSvgPathData() {
-		const { a, b, c, d } = this
+		const { _a: a, _b: b, _c: c, _d: d } = this
 		return [a, b, c, d].map((p, i) => p.getSvgPathData(i === 0)).join(' ') + ' Z'
 	}
 }

package/src/lib/utils/reorderShapes.ts

@@ -1,8 +1,6 @@
 import { TLParentId, TLShape, TLShapeId, TLShapePartial } from '@tldraw/tlschema'
 import { IndexKey, compact, getIndicesBetween, sortByIndex } from '@tldraw/utils'
 import { Editor } from '../editor/Editor'
-import { Vec } from '../primitives/Vec'
-import { polygonsIntersect } from '../primitives/intersect'
 
 export function getReorderingShapesChanges(
 	editor: Editor,
@@ -155,19 +153,18 @@ function reorderToFront(moving: Set<TLShape>, children: TLShape[], changes: TLSh
 }
 
 function getOverlapChecker(editor: Editor, moving: Set<TLShape>) {
-	const movingVertices = Array.from(moving)
-		.map((shape) => {
-			const vertices = editor.getShapePageGeometry(shape).vertices
-			if (!vertices) return null
-			return { shape, vertices }
+	const movingBounds = compact(
+		Array.from(moving).map((shape) => {
+			const bounds = editor.getShapePageBounds(shape)
+			if (!bounds) return null
+			return { shape, bounds }
 		})
-		.filter(Boolean) as { shape: TLShape; vertices: Vec[] }[]
-
+	)
 	const isOverlapping = (child: TLShape) => {
-		const vertices = editor.getShapePageGeometry(child).vertices
-		if (!vertices) return false
-		return movingVertices.some((other) => {
-			return polygonsIntersect(other.vertices, vertices)
+		const bounds = editor.getShapePageBounds(child)
+		if (!bounds) return false
+		return movingBounds.some((other) => {
+			return other.bounds.includes(bounds)
 		})
 	}
 

package/src/lib/utils/reparenting.ts

@@ -0,0 +1,383 @@
+import { EMPTY_ARRAY } from '@tldraw/state'
+import { TLGroupShape, TLParentId, TLShape, TLShapeId } from '@tldraw/tlschema'
+import { IndexKey, compact, getIndexAbove, getIndexBetween } from '@tldraw/utils'
+import { Editor } from '../editor/Editor'
+import { Vec } from '../primitives/Vec'
+import { Geometry2d } from '../primitives/geometry/Geometry2d'
+import { Group2d } from '../primitives/geometry/Group2d'
+import {
+	intersectPolygonPolygon,
+	polygonIntersectsPolyline,
+	polygonsIntersect,
+} from '../primitives/intersect'
+import { pointInPolygon } from '../primitives/utils'
+
+/**
+ * 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.
+ * @param opts - Optional options, including a callback to filter out certain parents, such as when removing a frame.
+ *
+ * @public
+ */
+export function kickoutOccludedShapes(
+	editor: Editor,
+	shapeIds: TLShapeId[],
+	opts?: { filter?(parent: TLShape): boolean }
+) {
+	const parentsToCheck = new Set<TLShape>()
+
+	for (const id of shapeIds) {
+		const shape = editor.getShape(id)
+
+		if (!shape) continue
+		parentsToCheck.add(shape)
+
+		const parent = editor.getShape(shape.parentId)
+		if (!parent) continue
+		parentsToCheck.add(parent)
+	}
+
+	// Check all of the parents and gather up parents who have lost children
+	const parentsToLostChildren = new Map<TLShape, TLShapeId[]>()
+
+	for (const parent of parentsToCheck) {
+		const childIds = editor.getSortedChildIdsForParent(parent)
+		if (opts?.filter && !opts.filter(parent)) {
+			// If the shape is filtered out, we kick out all of its children
+			parentsToLostChildren.set(parent, childIds)
+		} else {
+			const overlappingChildren = getOverlappingShapes(editor, parent.id, childIds)
+			if (overlappingChildren.length < childIds.length) {
+				parentsToLostChildren.set(
+					parent,
+					childIds.filter((id) => !overlappingChildren.includes(id))
+				)
+			}
+		}
+	}
+
+	// Get all of the shapes on the current page, sorted by their index
+	const sortedShapeIds = editor.getCurrentPageShapesSorted().map((s) => s.id)
+
+	const parentsToNewChildren: Record<
+		TLParentId,
+		{ parentId: TLParentId; shapeIds: TLShapeId[]; index?: IndexKey }
+	> = {}
+
+	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(
+			editor,
+			lostChildren,
+			(shape, maybeNewParent) => {
+				// If we're filtering out a potential parent, don't reparent shapes to the filtered out shape
+				if (opts?.filter && !opts.filter(maybeNewParent)) return false
+				return (
+					maybeNewParent.id !== prevParent.id &&
+					sortedShapeIds.indexOf(maybeNewParent.id) < sortedShapeIds.indexOf(shape.id)
+				)
+			}
+		)
+
+		reparenting.forEach((childrenToReparent, newParentId) => {
+			if (childrenToReparent.length === 0) return
+			if (!parentsToNewChildren[newParentId]) {
+				parentsToNewChildren[newParentId] = {
+					parentId: newParentId,
+					shapeIds: [],
+				}
+			}
+			parentsToNewChildren[newParentId].shapeIds.push(...childrenToReparent.map((s) => s.id))
+		})
+
+		// Reparent the rest to the page (or containing group)
+		if (remainingShapesToReparent.size > 0) {
+			// The remaining shapes are going to be reparented to the old parent's containing group, if there was one, or else to the page
+			const newParentId =
+				editor.findShapeAncestor(prevParent, (s) => editor.isShapeOfType<TLGroupShape>(s, 'group'))
+					?.id ?? editor.getCurrentPageId()
+
+			remainingShapesToReparent.forEach((shape) => {
+				if (!parentsToNewChildren[newParentId]) {
+					let insertIndexKey: IndexKey | undefined
+
+					const oldParentSiblingIds = editor.getSortedChildIdsForParent(newParentId)
+					const oldParentIndex = oldParentSiblingIds.indexOf(prevParent.id)
+					if (oldParentIndex > -1) {
+						// If the old parent is a direct child of the new parent, then we'll add them above the old parent but below the next sibling.
+						const siblingsIndexAbove = oldParentSiblingIds[oldParentIndex + 1]
+						const indexKeyAbove = siblingsIndexAbove
+							? editor.getShape(siblingsIndexAbove)!.index
+							: getIndexAbove(prevParent.index)
+						insertIndexKey = getIndexBetween(prevParent.index, indexKeyAbove)
+					} else {
+						// If the old parent is not a direct child of the new parent, then we'll add them to the "top" of the new parent's children.
+						// This is done automatically if we leave the index undefined, so let's do that.
+					}
+
+					parentsToNewChildren[newParentId] = {
+						parentId: newParentId,
+						shapeIds: [],
+						index: insertIndexKey,
+					}
+				}
+
+				parentsToNewChildren[newParentId].shapeIds.push(shape.id)
+			})
+		}
+	}
+
+	editor.run(() => {
+		Object.values(parentsToNewChildren).forEach(({ parentId, shapeIds, index }) => {
+			if (shapeIds.length === 0) return
+			// Before we reparent, sort the new shape ids by their place in the original absolute order on the page
+			shapeIds.sort((a, b) => (sortedShapeIds.indexOf(a) < sortedShapeIds.indexOf(b) ? -1 : 1))
+			editor.reparentShapes(shapeIds, parentId, index)
+		})
+	})
+}
+
+/**
+ * Get the shapes that overlap with a given shape.
+ *
+ * @param editor - The editor instance.
+ * @param shape - The shapes or shape IDs to check against.
+ * @param otherShapes - The shapes or shape IDs to check for overlap.
+ * @returns An array of shapes or shape IDs that overlap with the given shape.
+ */
+function getOverlappingShapes<T extends TLShape[] | TLShapeId[]>(
+	editor: Editor,
+	shape: T[number],
+	otherShapes: T
+) {
+	if (otherShapes.length === 0) {
+		return EMPTY_ARRAY
+	}
+
+	const parentPageBounds = editor.getShapePageBounds(shape)
+	if (!parentPageBounds) return EMPTY_ARRAY
+
+	const parentGeometry = editor.getShapeGeometry(shape)
+	const parentPageTransform = editor.getShapePageTransform(shape)
+	const parentPageCorners = parentPageTransform.applyToPoints(parentGeometry.vertices)
+
+	const parentPageMaskVertices = editor.getShapeMask(shape)
+	const parentPagePolygon = parentPageMaskVertices
+		? intersectPolygonPolygon(parentPageMaskVertices, parentPageCorners)
+		: parentPageCorners
+
+	if (!parentPagePolygon) return EMPTY_ARRAY
+
+	return otherShapes.filter((childId) => {
+		const shapePageBounds = editor.getShapePageBounds(childId)
+		if (!shapePageBounds || !parentPageBounds.includes(shapePageBounds)) return false
+
+		const parentPolygonInShapeShape = editor
+			.getShapePageTransform(childId)
+			.clone()
+			.invert()
+			.applyToPoints(parentPagePolygon)
+
+		const geometry = editor.getShapeGeometry(childId)
+
+		return doesGeometryOverlapPolygon(geometry, parentPolygonInShapeShape)
+	})
+}
+
+/**
+ * @public
+ */
+export function doesGeometryOverlapPolygon(
+	geometry: Geometry2d,
+	parentCornersInShapeSpace: Vec[]
+): boolean {
+	// If the child is a group, check if any of its children overlap the box
+	if (geometry instanceof Group2d) {
+		return geometry.children.some((childGeometry) =>
+			doesGeometryOverlapPolygon(childGeometry, parentCornersInShapeSpace)
+		)
+	}
+
+	// Otherwise, check if the geometry overlaps the box
+	const { vertices, center, isFilled, isEmptyLabel, isClosed } = geometry
+
+	// We'll do things in order of cheapest to most expensive checks
+
+	// Skip empty labels
+	if (isEmptyLabel) return false
+
+	// If any of the shape's vertices are inside the occluder, it's inside
+	if (vertices.some((v) => pointInPolygon(v, parentCornersInShapeSpace))) {
+		return true
+	}
+
+	// If the shape is filled and closed and its center is inside the parent, it's inside
+	if (isClosed) {
+		if (isFilled) {
+			// If closed and filled, check if the center is inside the parent
+			if (pointInPolygon(center, parentCornersInShapeSpace)) {
+				return true
+			}
+
+			// ..then, slightly more expensive check, see the shape covers the entire parent but not its center
+			if (parentCornersInShapeSpace.every((v) => pointInPolygon(v, vertices))) {
+				return true
+			}
+		}
+
+		// If any the shape's vertices intersect the edge of the occluder, it's inside.
+		// for example when a rotated rectangle is moved over the corner of a parent rectangle
+		// If the child shape is closed, intersect as a polygon
+		if (polygonsIntersect(parentCornersInShapeSpace, vertices)) {
+			return true
+		}
+	} else {
+		// if the child shape is not closed, intersect as a polyline
+		if (polygonIntersectsPolyline(parentCornersInShapeSpace, vertices)) {
+			return true
+		}
+	}
+
+	// If none of the above checks passed, the shape is outside the parent
+	return false
+}
+
+/**
+ * Get the shapes that will be reparented to new parents when the shapes are dropped.
+ *
+ * @param editor - The editor instance.
+ * @param shapes - The shapes to check.
+ * @param cb - A callback to filter out certain shapes.
+ * @returns An object with the shapes that will be reparented to new parents and the shapes that will be reparented to the page or their ancestral group.
+ *
+ * @public
+ */
+export function getDroppedShapesToNewParents(
+	editor: Editor,
+	shapes: Set<TLShape> | TLShape[],
+	cb?: (shape: TLShape, parent: TLShape) => boolean
+) {
+	const shapesToActuallyCheck = new Set<TLShape>(shapes)
+	const movingGroups = new Set<TLGroupShape>()
+
+	for (const shape of shapes) {
+		const parent = editor.getShapeParent(shape)
+		if (parent && editor.isShapeOfType<TLGroupShape>(parent, 'group')) {
+			if (!movingGroups.has(parent)) {
+				movingGroups.add(parent)
+			}
+		}
+	}
+
+	// If all of a group's children are moving, then move the group instead
+	for (const movingGroup of movingGroups) {
+		const children = compact(
+			editor.getSortedChildIdsForParent(movingGroup).map((id) => editor.getShape(id))
+		)
+		for (const child of children) {
+			shapesToActuallyCheck.delete(child)
+		}
+		shapesToActuallyCheck.add(movingGroup)
+	}
+
+	// this could be cached and passed in
+	const shapeGroupIds = new Map<TLShapeId, TLShapeId | undefined>()
+
+	const reparenting = new Map<TLShapeId, TLShape[]>()
+
+	const remainingShapesToReparent = new Set(shapesToActuallyCheck)
+
+	const potentialParentShapes = editor
+		.getCurrentPageShapesSorted()
+		// filter out any shapes that aren't frames or that are included among the provided shapes
+		.filter(
+			(s) =>
+				editor.getShapeUtil(s).canReceiveNewChildrenOfType?.(s, s.type) &&
+				!remainingShapesToReparent.has(s)
+		)
+
+	parentCheck: for (let i = potentialParentShapes.length - 1; i >= 0; i--) {
+		const parentShape = potentialParentShapes[i]
+		const parentShapeContainingGroupId = editor.findShapeAncestor(parentShape, (s) =>
+			editor.isShapeOfType<TLGroupShape>(s, 'group')
+		)?.id
+
+		const parentGeometry = editor.getShapeGeometry(parentShape)
+		const parentPageTransform = editor.getShapePageTransform(parentShape)
+		const parentPageMaskVertices = editor.getShapeMask(parentShape)
+		const parentPageCorners = parentPageTransform.applyToPoints(parentGeometry.vertices)
+		const parentPagePolygon = parentPageMaskVertices
+			? intersectPolygonPolygon(parentPageMaskVertices, parentPageCorners)
+			: parentPageCorners
+
+		if (!parentPagePolygon) continue parentCheck
+
+		const childrenToReparent = []
+
+		// For each of the dropping shapes...
+		shapeCheck: for (const shape of remainingShapesToReparent) {
+			// Don't reparent a frame to itself
+			if (parentShape.id === shape.id) continue shapeCheck
+
+			// Use the callback to filter out certain shapes
+			if (cb && !cb(shape, parentShape)) continue shapeCheck
+
+			if (!shapeGroupIds.has(shape.id)) {
+				shapeGroupIds.set(
+					shape.id,
+					editor.findShapeAncestor(shape, (s) => editor.isShapeOfType<TLGroupShape>(s, 'group'))?.id
+				)
+			}
+
+			const shapeGroupId = shapeGroupIds.get(shape.id)
+
+			// 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?
+			if (editor.findShapeAncestor(parentShape, (s) => shape.id === s.id)) continue shapeCheck
+
+			// Convert the parent polygon to the shape's space
+			const parentPolygonInShapeSpace = editor
+				.getShapePageTransform(shape)
+				.clone()
+				.invert()
+				.applyToPoints(parentPagePolygon)
+
+			// If the shape overlaps the parent polygon, reparent it to that parent
+			if (doesGeometryOverlapPolygon(editor.getShapeGeometry(shape), parentPolygonInShapeSpace)) {
+				// Use the util to check if the shape can be reparented to the parent
+				if (
+					!editor.getShapeUtil(parentShape).canReceiveNewChildrenOfType?.(parentShape, shape.type)
+				)
+					continue shapeCheck
+
+				if (shape.parentId !== parentShape.id) {
+					childrenToReparent.push(shape)
+				}
+				remainingShapesToReparent.delete(shape)
+				continue shapeCheck
+			}
+		}
+
+		if (childrenToReparent.length) {
+			reparenting.set(parentShape.id, childrenToReparent)
+		}
+	}
+
+	return {
+		// these are the shapes that will be reparented to new parents
+		reparenting,
+		// these are the shapes that will be reparented to the page or their ancestral group
+		remainingShapesToReparent,
+	}
+}

package/src/lib/utils/richText.ts

@@ -1,10 +1,10 @@
 import { getSchema, JSONContent, Editor as TTEditor } from '@tiptap/core'
-import { Node } from '@tiptap/pm/model'
+import { Node, Schema } from '@tiptap/pm/model'
 import { EditorProviderProps } from '@tiptap/react'
 import { TLRichText } from '@tldraw/tlschema'
-import { assert } from '@tldraw/utils'
+import { assert, WeakCache } from '@tldraw/utils'
 import { Editor } from '../editor/Editor'
-import { TLFontFace } from '../editor/managers/FontManager'
+import { TLFontFace } from '../editor/managers/FontManager/FontManager'
 
 /**
  * This is the TipTap editor! Docs are {@link https://tiptap.dev/docs}.
@@ -39,6 +39,11 @@ export type RichTextFontVisitor = (
 	addFont: (font: TLFontFace) => void
 ) => RichTextFontVisitorState
 
+const schemaCache = new WeakCache<EditorProviderProps, Schema>()
+export function getTipTapSchema(tipTapConfig: EditorProviderProps) {
+	return schemaCache.get(tipTapConfig, () => getSchema(tipTapConfig.extensions ?? []))
+}
+
 /** @public */
 export function getFontsFromRichText(
 	editor: Editor,
@@ -49,7 +54,8 @@ export function getFontsFromRichText(
 	assert(tipTapConfig, 'textOptions.tipTapConfig must be set to use rich text')
 	assert(addFontsFromNode, 'textOptions.addFontsFromNode must be set to use rich text')
 
-	const schema = getSchema(tipTapConfig.extensions ?? [])
+	const schema = getTipTapSchema(tipTapConfig)
+
 	const rootNode = Node.fromJSON(schema, richText as JSONContent)
 
 	const fonts = new Set<TLFontFace>()