@tldraw/editor 3.14.0-canary.8ea0ff8489db → 3.14.0-canary.8f303431285f

package/src/lib/primitives/Box.ts

@@ -134,33 +134,33 @@ export class Box {
 
 	// eslint-disable-next-line no-restricted-syntax
 	get center() {
-		return new Vec(this.midX, this.midY)
+		return new Vec(this.x + this.w / 2, this.y + this.h / 2)
 	}
 
 	// eslint-disable-next-line no-restricted-syntax
 	set center(v: Vec) {
-		this.minX = v.x - this.width / 2
-		this.minY = v.y - this.height / 2
+		this.x = v.x - this.w / 2
+		this.y = v.y - this.h / 2
 	}
 
 	// eslint-disable-next-line no-restricted-syntax
 	get corners() {
 		return [
-			new Vec(this.minX, this.minY),
-			new Vec(this.maxX, this.minY),
-			new Vec(this.maxX, this.maxY),
-			new Vec(this.minX, this.maxY),
+			new Vec(this.x, this.y),
+			new Vec(this.x + this.w, this.y),
+			new Vec(this.x + this.w, this.y + this.h),
+			new Vec(this.x, this.y + this.h),
 		]
 	}
 
 	// eslint-disable-next-line no-restricted-syntax
 	get cornersAndCenter() {
 		return [
-			new Vec(this.minX, this.minY),
-			new Vec(this.maxX, this.minY),
-			new Vec(this.maxX, this.maxY),
-			new Vec(this.minX, this.maxY),
-			this.center,
+			new Vec(this.x, this.y),
+			new Vec(this.x + this.w, this.y),
+			new Vec(this.x + this.w, this.y + this.h),
+			new Vec(this.x, this.y + this.h),
+			new Vec(this.x + this.w / 2, this.y + this.h / 2),
 		]
 	}
 
@@ -205,10 +205,10 @@ export class Box {
 	}
 
 	expand(A: Box) {
-		const minX = Math.min(this.minX, A.minX)
-		const minY = Math.min(this.minY, A.minY)
-		const maxX = Math.max(this.maxX, A.maxX)
-		const maxY = Math.max(this.maxY, A.maxY)
+		const minX = Math.min(this.x, A.x)
+		const minY = Math.min(this.y, A.y)
+		const maxX = Math.max(this.x + this.w, A.x + A.w)
+		const maxY = Math.max(this.y + this.h, A.y + A.h)
 
 		this.x = minX
 		this.y = minY
@@ -245,10 +245,10 @@ export class Box {
 	}
 
 	snapToGrid(size: number) {
-		const minX = Math.round(this.minX / size) * size
-		const minY = Math.round(this.minY / size) * size
-		const maxX = Math.round(this.maxX / size) * size
-		const maxY = Math.round(this.maxY / size) * size
+		const minX = Math.round(this.x / size) * size
+		const minY = Math.round(this.y / size) * size
+		const maxX = Math.round((this.x + this.w) / size) * size
+		const maxY = Math.round((this.y + this.h) / size) * size
 		this.minX = minX
 		this.minY = minY
 		this.width = Math.max(1, maxX - minX)
@@ -274,26 +274,26 @@ export class Box {
 	getHandlePoint(handle: SelectionCorner | SelectionEdge) {
 		switch (handle) {
 			case 'top_left':
-				return new Vec(this.minX, this.minY)
+				return new Vec(this.x, this.y)
 			case 'top_right':
-				return new Vec(this.maxX, this.minY)
+				return new Vec(this.x + this.w, this.y)
 			case 'bottom_left':
-				return new Vec(this.minX, this.maxY)
+				return new Vec(this.x, this.y + this.h)
 			case 'bottom_right':
-				return new Vec(this.maxX, this.maxY)
+				return new Vec(this.x + this.w, this.y + this.h)
 			case 'top':
-				return new Vec(this.midX, this.minY)
+				return new Vec(this.x + this.w / 2, this.y)
 			case 'right':
-				return new Vec(this.maxX, this.midY)
+				return new Vec(this.x + this.w, this.y + this.h / 2)
 			case 'bottom':
-				return new Vec(this.midX, this.maxY)
+				return new Vec(this.x + this.w / 2, this.y + this.h)
 			case 'left':
-				return new Vec(this.minX, this.midY)
+				return new Vec(this.x, this.y + this.h / 2)
 		}
 	}
 
 	toJson(): BoxModel {
-		return { x: this.minX, y: this.minY, w: this.w, h: this.h }
+		return { x: this.x, y: this.y, w: this.w, h: this.h }
 	}
 
 	resize(handle: SelectionCorner | SelectionEdge | string, dx: number, dy: number) {
@@ -357,10 +357,10 @@ export class Box {
 	}
 
 	union(box: BoxModel) {
-		const minX = Math.min(this.minX, box.x)
-		const minY = Math.min(this.minY, box.y)
-		const maxX = Math.max(this.maxX, box.w + box.x)
-		const maxY = Math.max(this.maxY, box.h + box.y)
+		const minX = Math.min(this.x, box.x)
+		const minY = Math.min(this.y, box.y)
+		const maxX = Math.max(this.x + this.w, box.x + box.w)
+		const maxY = Math.max(this.y + this.h, box.y + box.h)
 
 		this.x = minX
 		this.y = minY
@@ -591,14 +591,6 @@ export class Box {
 		return b.x === a.x && b.y === a.y && b.w === a.w && b.h === a.h
 	}
 
-	prettyMuchEquals(other: Box | BoxModel) {
-		return this.clone().toFixed().equals(Box.From(other).toFixed())
-	}
-
-	static PrettyMuchEquals(a: Box | BoxModel, b: Box | BoxModel) {
-		return b.x === a.x && b.y === a.y && b.w === a.w && b.h === a.h
-	}
-
 	zeroFix() {
 		this.w = Math.max(1, this.w)
 		this.h = Math.max(1, this.h)

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

@@ -44,6 +44,7 @@ export const Geometry2dFilters: {
 /** @public */
 export interface TransformedGeometry2dOptions {
 	isLabel?: boolean
+	isEmptyLabel?: boolean
 	isInternal?: boolean
 	debugColor?: string
 	ignore?: boolean
@@ -57,20 +58,24 @@ export interface Geometry2dOptions extends TransformedGeometry2dOptions {
 
 /** @public */
 export abstract class Geometry2d {
+	// todo: consider making accessors for these too, so that they can be overridden in subclasses by geometries with more complex logic
 	isFilled = false
 	isClosed = true
 	isLabel = false
+	isEmptyLabel = false
 	isInternal = false
 	debugColor?: string
 	ignore?: boolean
 
 	constructor(opts: Geometry2dOptions) {
+		const { isLabel = false, isEmptyLabel = false, isInternal = false } = opts
 		this.isFilled = opts.isFilled
 		this.isClosed = opts.isClosed
-		this.isLabel = opts.isLabel ?? false
-		this.isInternal = opts.isInternal ?? false
 		this.debugColor = opts.debugColor
 		this.ignore = opts.ignore
+		this.isLabel = isLabel
+		this.isEmptyLabel = isEmptyLabel
+		this.isInternal = isInternal
 	}
 
 	isExcludedByFilter(filters?: Geometry2dFilters) {

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

@@ -17,14 +17,20 @@ export class Group2d extends Geometry2d {
 	) {
 		super({ ...config, isClosed: true, isFilled: false })
 
-		for (const child of config.children) {
-			if (child.ignore) {
-				this.ignoredChildren.push(child)
-			} else {
-				this.children.push(child)
+		const addChildren = (children: Geometry2d[]) => {
+			for (const child of children) {
+				if (child instanceof Group2d) {
+					addChildren(child.children)
+				} else if (child.ignore) {
+					this.ignoredChildren.push(child)
+				} else {
+					this.children.push(child)
+				}
 			}
 		}
 
+		addChildren(config.children)
+
 		if (this.children.length === 0) throw Error('Group2d must have at least one child')
 	}
 

package/src/lib/utils/areShapesContentEqual.ts

@@ -1,5 +1,4 @@
 import { TLShape } from '@tldraw/tlschema'
 
-/** @public */
 export const areShapesContentEqual = (a: TLShape, b: TLShape) =>
-	a.parentId === b.parentId && a.props === b.props && a.meta === b.meta
+	a.props === b.props && a.meta === b.meta

package/src/lib/utils/dom.ts

@@ -18,7 +18,7 @@ import { debugFlags, pointerCaptureTrackingObject } from './debug-flags'
 
 /** @public */
 export function loopToHtmlElement(elm: Element): HTMLElement {
-	if (elm instanceof HTMLElement) return elm
+	if (elm.nodeType === Node.ELEMENT_NODE) return elm as HTMLElement
 	if (elm.parentElement) return loopToHtmlElement(elm.parentElement)
 	else throw Error('Could not find a parent element of an HTML type!')
 }

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>()