@tldraw/editor 4.4.0 → 4.5.0-canary.a4eece45e3d0

package/dist-esm/lib/utils/richText.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/lib/utils/richText.ts"],
-  "sourcesContent": ["import { getSchema, JSONContent, Editor as TTEditor } from '@tiptap/core'\nimport { Node, Schema } from '@tiptap/pm/model'\nimport { EditorProviderProps } from '@tiptap/react'\nimport { TLRichText } from '@tldraw/tlschema'\nimport { assert, WeakCache } from '@tldraw/utils'\nimport { Editor } from '../editor/Editor'\nimport { TLFontFace } from '../editor/managers/FontManager/FontManager'\n\n/**\n * This is the TipTap editor! Docs are {@link https://tiptap.dev/docs}.\n *\n * @public\n */\nexport type TiptapEditor = TTEditor\n\n/**\n * A TipTap node. See {@link https://tiptap.dev/docs}.\n * @public\n */\nexport type TiptapNode = Node\n\n/** @public */\nexport interface TLTextOptions {\n\ttipTapConfig?: EditorProviderProps\n\taddFontsFromNode?: RichTextFontVisitor\n}\n\n/** @public */\nexport interface RichTextFontVisitorState {\n\treadonly family: string\n\treadonly weight: string\n\treadonly style: string\n}\n\n/** @public */\nexport type RichTextFontVisitor = (\n\tnode: TiptapNode,\n\tstate: RichTextFontVisitorState,\n\taddFont: (font: TLFontFace) => void\n) => RichTextFontVisitorState\n\nconst schemaCache = new WeakCache<EditorProviderProps, Schema>()\nexport function getTipTapSchema(tipTapConfig: EditorProviderProps) {\n\treturn schemaCache.get(tipTapConfig, () => getSchema(tipTapConfig.extensions ?? []))\n}\n\n/** @public */\nexport function getFontsFromRichText(\n\teditor: Editor,\n\trichText: TLRichText,\n\tinitialState: RichTextFontVisitorState\n) {\n\tconst { tipTapConfig, addFontsFromNode } = editor.getTextOptions()\n\tassert(tipTapConfig, 'textOptions.tipTapConfig must be set to use rich text')\n\tassert(addFontsFromNode, 'textOptions.addFontsFromNode must be set to use rich text')\n\n\tconst schema = getTipTapSchema(tipTapConfig)\n\n\tconst rootNode = Node.fromJSON(schema, richText as JSONContent)\n\n\tconst fonts = new Set<TLFontFace>()\n\n\tfunction addFont(font: TLFontFace) {\n\t\tfonts.add(font)\n\t}\n\n\tfunction visit(node: TiptapNode, state: RichTextFontVisitorState) {\n\t\tstate = addFontsFromNode!(node, state, addFont)\n\n\t\tfor (const child of node.children) {\n\t\t\tvisit(child, state)\n\t\t}\n\t}\n\n\tvisit(rootNode, initialState)\n\n\treturn Array.from(fonts)\n}\n"],
+  "sourcesContent": ["import { getSchema, JSONContent, Editor as TTEditor } from '@tiptap/core'\nimport { Node, Schema } from '@tiptap/pm/model'\nimport { EditorProviderProps } from '@tiptap/react'\nimport { TLRichText } from '@tldraw/tlschema'\nimport { assert, WeakCache } from '@tldraw/utils'\nimport type { Editor } from '../editor/Editor'\nimport { TLFontFace } from '../editor/managers/FontManager/FontManager'\n\n/**\n * This is the TipTap editor! Docs are {@link https://tiptap.dev/docs}.\n *\n * @public\n */\nexport type TiptapEditor = TTEditor\n\n/**\n * A TipTap node. See {@link https://tiptap.dev/docs}.\n * @public\n */\nexport type TiptapNode = Node\n\n/** @public */\nexport interface TLTextOptions {\n\ttipTapConfig?: EditorProviderProps\n\taddFontsFromNode?: RichTextFontVisitor\n}\n\n/** @public */\nexport interface RichTextFontVisitorState {\n\treadonly family: string\n\treadonly weight: string\n\treadonly style: string\n}\n\n/** @public */\nexport type RichTextFontVisitor = (\n\tnode: TiptapNode,\n\tstate: RichTextFontVisitorState,\n\taddFont: (font: TLFontFace) => void\n) => RichTextFontVisitorState\n\nconst schemaCache = new WeakCache<EditorProviderProps, Schema>()\nexport function getTipTapSchema(tipTapConfig: EditorProviderProps) {\n\treturn schemaCache.get(tipTapConfig, () => getSchema(tipTapConfig.extensions ?? []))\n}\n\n/** @public */\nexport function getFontsFromRichText(\n\teditor: Editor,\n\trichText: TLRichText,\n\tinitialState: RichTextFontVisitorState\n) {\n\tconst { tipTapConfig, addFontsFromNode } = editor.getTextOptions()\n\tassert(tipTapConfig, 'textOptions.tipTapConfig must be set to use rich text')\n\tassert(addFontsFromNode, 'textOptions.addFontsFromNode must be set to use rich text')\n\n\tconst schema = getTipTapSchema(tipTapConfig)\n\n\tconst rootNode = Node.fromJSON(schema, richText as JSONContent)\n\n\tconst fonts = new Set<TLFontFace>()\n\n\tfunction addFont(font: TLFontFace) {\n\t\tfonts.add(font)\n\t}\n\n\tfunction visit(node: TiptapNode, state: RichTextFontVisitorState) {\n\t\tstate = addFontsFromNode!(node, state, addFont)\n\n\t\tfor (const child of node.children) {\n\t\t\tvisit(child, state)\n\t\t}\n\t}\n\n\tvisit(rootNode, initialState)\n\n\treturn Array.from(fonts)\n}\n"],
   "mappings": "AAAA,SAAS,iBAAkD;AAC3D,SAAS,YAAoB;AAG7B,SAAS,QAAQ,iBAAiB;AAqClC,MAAM,cAAc,IAAI,UAAuC;AACxD,SAAS,gBAAgB,cAAmC;AAClE,SAAO,YAAY,IAAI,cAAc,MAAM,UAAU,aAAa,cAAc,CAAC,CAAC,CAAC;AACpF;AAGO,SAAS,qBACf,QACA,UACA,cACC;AACD,QAAM,EAAE,cAAc,iBAAiB,IAAI,OAAO,eAAe;AACjE,SAAO,cAAc,uDAAuD;AAC5E,SAAO,kBAAkB,2DAA2D;AAEpF,QAAM,SAAS,gBAAgB,YAAY;AAE3C,QAAM,WAAW,KAAK,SAAS,QAAQ,QAAuB;AAE9D,QAAM,QAAQ,oBAAI,IAAgB;AAElC,WAAS,QAAQ,MAAkB;AAClC,UAAM,IAAI,IAAI;AAAA,EACf;AAEA,WAAS,MAAM,MAAkB,OAAiC;AACjE,YAAQ,iBAAkB,MAAM,OAAO,OAAO;AAE9C,eAAW,SAAS,KAAK,UAAU;AAClC,YAAM,OAAO,KAAK;AAAA,IACnB;AAAA,EACD;AAEA,QAAM,UAAU,YAAY;AAE5B,SAAO,MAAM,KAAK,KAAK;AACxB;",
   "names": []
 }

package/dist-esm/lib/utils/rotation.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/lib/utils/rotation.ts"],
-  "sourcesContent": ["import { isShapeId, TLShape, TLShapeId, TLShapePartial } from '@tldraw/tlschema'\nimport { compact } from '@tldraw/utils'\nimport { Editor } from '../editor/Editor'\nimport { Mat } from '../primitives/Mat'\nimport { canonicalizeRotation } from '../primitives/utils'\nimport { Vec, VecLike } from '../primitives/Vec'\n\n/** @internal */\nexport function getRotationSnapshot({\n\teditor,\n\tids,\n}: {\n\teditor: Editor\n\tids: TLShapeId[]\n}): TLRotationSnapshot | null {\n\tconst shapes = compact(ids.map((id) => editor.getShape(id)))\n\tconst rotation = editor.getShapesSharedRotation(ids)\n\tconst rotatedPageBounds = editor.getShapesRotatedPageBounds(ids)\n\n\t// todo: this assumes we're rotating the selected shapes\n\t// if we try to rotate shapes that aren't selected, this\n\t// will produce the wrong results\n\n\t// Return null if there are no selected shapes\n\tif (!rotatedPageBounds) {\n\t\treturn null\n\t}\n\n\tconst initialPageCenter = rotatedPageBounds.center\n\t\t.clone()\n\t\t.rotWith(rotatedPageBounds.point, rotation)\n\n\treturn {\n\t\tinitialPageCenter,\n\t\tinitialCursorAngle: initialPageCenter.angle(editor.inputs.getOriginPagePoint()),\n\t\tinitialShapesRotation: rotation,\n\t\tshapeSnapshots: shapes.map((shape) => ({\n\t\t\tshape,\n\t\t\tinitialPagePoint: editor.getShapePageTransform(shape.id)!.point(),\n\t\t})),\n\t}\n}\n\n/**\n * @internal\n **/\nexport interface TLRotationSnapshot {\n\tinitialPageCenter: Vec\n\tinitialCursorAngle: number\n\tinitialShapesRotation: number\n\tshapeSnapshots: {\n\t\tshape: TLShape\n\t\tinitialPagePoint: Vec\n\t}[]\n}\n\n/** @internal */\nexport function applyRotationToSnapshotShapes({\n\tdelta,\n\teditor,\n\tsnapshot,\n\tstage,\n\tcenterOverride,\n}: {\n\tdelta: number\n\tsnapshot: TLRotationSnapshot\n\teditor: Editor\n\tstage: 'start' | 'update' | 'end' | 'one-off'\n\tcenterOverride?: VecLike\n}) {\n\tconst { initialPageCenter, shapeSnapshots } = snapshot\n\n\teditor.updateShapes(\n\t\tshapeSnapshots.map(({ shape, initialPagePoint }) => {\n\t\t\t// We need to both rotate each shape individually and rotate the shapes\n\t\t\t// around the pivot point (the average center of all rotating shapes.)\n\n\t\t\tconst parentTransform = isShapeId(shape.parentId)\n\t\t\t\t? editor.getShapePageTransform(shape.parentId)!\n\t\t\t\t: Mat.Identity()\n\n\t\t\tconst newPagePoint = Vec.RotWith(initialPagePoint, centerOverride ?? initialPageCenter, delta)\n\n\t\t\tconst newLocalPoint = Mat.applyToPoint(\n\t\t\t\t// use the current parent transform in case it has moved/resized since the start\n\t\t\t\t// (e.g. if rotating a shape at the edge of a group)\n\t\t\t\tMat.Inverse(parentTransform),\n\t\t\t\tnewPagePoint\n\t\t\t)\n\t\t\tconst newRotation = canonicalizeRotation(shape.rotation + delta)\n\n\t\t\treturn {\n\t\t\t\tid: shape.id,\n\t\t\t\ttype: shape.type,\n\t\t\t\tx: newLocalPoint.x,\n\t\t\t\ty: newLocalPoint.y,\n\t\t\t\trotation: newRotation,\n\t\t\t}\n\t\t})\n\t)\n\n\t// Handle change\n\n\tconst changes: TLShapePartial[] = []\n\n\tshapeSnapshots.forEach(({ shape }) => {\n\t\tconst current = editor.getShape(shape.id)\n\t\tif (!current) return\n\t\tconst util = editor.getShapeUtil(shape)\n\n\t\tif (stage === 'start' || stage === 'one-off') {\n\t\t\tconst changeStart = util.onRotateStart?.(shape)\n\t\t\tif (changeStart) changes.push(changeStart)\n\t\t}\n\n\t\tconst changeUpdate = util.onRotate?.(shape, current)\n\t\tif (changeUpdate) changes.push(changeUpdate)\n\n\t\tif (stage === 'end' || stage === 'one-off') {\n\t\t\tconst changeEnd = util.onRotateEnd?.(shape, current)\n\t\t\tif (changeEnd) changes.push(changeEnd)\n\t\t}\n\t})\n\n\tif (changes.length > 0) {\n\t\teditor.updateShapes(changes)\n\t}\n}\n"],
+  "sourcesContent": ["import { isShapeId, TLShape, TLShapeId, TLShapePartial } from '@tldraw/tlschema'\nimport { compact } from '@tldraw/utils'\nimport type { Editor } from '../editor/Editor'\nimport { Mat } from '../primitives/Mat'\nimport { canonicalizeRotation } from '../primitives/utils'\nimport { Vec, VecLike } from '../primitives/Vec'\n\n/** @internal */\nexport function getRotationSnapshot({\n\teditor,\n\tids,\n}: {\n\teditor: Editor\n\tids: TLShapeId[]\n}): TLRotationSnapshot | null {\n\tconst shapes = compact(ids.map((id) => editor.getShape(id)))\n\tconst rotation = editor.getShapesSharedRotation(ids)\n\tconst rotatedPageBounds = editor.getShapesRotatedPageBounds(ids)\n\n\t// todo: this assumes we're rotating the selected shapes\n\t// if we try to rotate shapes that aren't selected, this\n\t// will produce the wrong results\n\n\t// Return null if there are no selected shapes\n\tif (!rotatedPageBounds) {\n\t\treturn null\n\t}\n\n\tconst initialPageCenter = rotatedPageBounds.center\n\t\t.clone()\n\t\t.rotWith(rotatedPageBounds.point, rotation)\n\n\treturn {\n\t\tinitialPageCenter,\n\t\tinitialCursorAngle: initialPageCenter.angle(editor.inputs.getOriginPagePoint()),\n\t\tinitialShapesRotation: rotation,\n\t\tshapeSnapshots: shapes.map((shape) => ({\n\t\t\tshape,\n\t\t\tinitialPagePoint: editor.getShapePageTransform(shape.id)!.point(),\n\t\t})),\n\t}\n}\n\n/**\n * @internal\n **/\nexport interface TLRotationSnapshot {\n\tinitialPageCenter: Vec\n\tinitialCursorAngle: number\n\tinitialShapesRotation: number\n\tshapeSnapshots: {\n\t\tshape: TLShape\n\t\tinitialPagePoint: Vec\n\t}[]\n}\n\n/** @internal */\nexport function applyRotationToSnapshotShapes({\n\tdelta,\n\teditor,\n\tsnapshot,\n\tstage,\n\tcenterOverride,\n}: {\n\tdelta: number\n\tsnapshot: TLRotationSnapshot\n\teditor: Editor\n\tstage: 'start' | 'update' | 'end' | 'one-off'\n\tcenterOverride?: VecLike\n}) {\n\tconst { initialPageCenter, shapeSnapshots } = snapshot\n\n\teditor.updateShapes(\n\t\tshapeSnapshots.map(({ shape, initialPagePoint }) => {\n\t\t\t// We need to both rotate each shape individually and rotate the shapes\n\t\t\t// around the pivot point (the average center of all rotating shapes.)\n\n\t\t\tconst parentTransform = isShapeId(shape.parentId)\n\t\t\t\t? editor.getShapePageTransform(shape.parentId)!\n\t\t\t\t: Mat.Identity()\n\n\t\t\tconst newPagePoint = Vec.RotWith(initialPagePoint, centerOverride ?? initialPageCenter, delta)\n\n\t\t\tconst newLocalPoint = Mat.applyToPoint(\n\t\t\t\t// use the current parent transform in case it has moved/resized since the start\n\t\t\t\t// (e.g. if rotating a shape at the edge of a group)\n\t\t\t\tMat.Inverse(parentTransform),\n\t\t\t\tnewPagePoint\n\t\t\t)\n\t\t\tconst newRotation = canonicalizeRotation(shape.rotation + delta)\n\n\t\t\treturn {\n\t\t\t\tid: shape.id,\n\t\t\t\ttype: shape.type,\n\t\t\t\tx: newLocalPoint.x,\n\t\t\t\ty: newLocalPoint.y,\n\t\t\t\trotation: newRotation,\n\t\t\t}\n\t\t})\n\t)\n\n\t// Handle change\n\n\tconst changes: TLShapePartial[] = []\n\n\tshapeSnapshots.forEach(({ shape }) => {\n\t\tconst current = editor.getShape(shape.id)\n\t\tif (!current) return\n\t\tconst util = editor.getShapeUtil(shape)\n\n\t\tif (stage === 'start' || stage === 'one-off') {\n\t\t\tconst changeStart = util.onRotateStart?.(shape)\n\t\t\tif (changeStart) changes.push(changeStart)\n\t\t}\n\n\t\tconst changeUpdate = util.onRotate?.(shape, current)\n\t\tif (changeUpdate) changes.push(changeUpdate)\n\n\t\tif (stage === 'end' || stage === 'one-off') {\n\t\t\tconst changeEnd = util.onRotateEnd?.(shape, current)\n\t\t\tif (changeEnd) changes.push(changeEnd)\n\t\t}\n\t})\n\n\tif (changes.length > 0) {\n\t\teditor.updateShapes(changes)\n\t}\n}\n"],
   "mappings": "AAAA,SAAS,iBAAqD;AAC9D,SAAS,eAAe;AAExB,SAAS,WAAW;AACpB,SAAS,4BAA4B;AACrC,SAAS,WAAoB;AAGtB,SAAS,oBAAoB;AAAA,EACnC;AAAA,EACA;AACD,GAG8B;AAC7B,QAAM,SAAS,QAAQ,IAAI,IAAI,CAAC,OAAO,OAAO,SAAS,EAAE,CAAC,CAAC;AAC3D,QAAM,WAAW,OAAO,wBAAwB,GAAG;AACnD,QAAM,oBAAoB,OAAO,2BAA2B,GAAG;AAO/D,MAAI,CAAC,mBAAmB;AACvB,WAAO;AAAA,EACR;AAEA,QAAM,oBAAoB,kBAAkB,OAC1C,MAAM,EACN,QAAQ,kBAAkB,OAAO,QAAQ;AAE3C,SAAO;AAAA,IACN;AAAA,IACA,oBAAoB,kBAAkB,MAAM,OAAO,OAAO,mBAAmB,CAAC;AAAA,IAC9E,uBAAuB;AAAA,IACvB,gBAAgB,OAAO,IAAI,CAAC,WAAW;AAAA,MACtC;AAAA,MACA,kBAAkB,OAAO,sBAAsB,MAAM,EAAE,EAAG,MAAM;AAAA,IACjE,EAAE;AAAA,EACH;AACD;AAgBO,SAAS,8BAA8B;AAAA,EAC7C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAMG;AACF,QAAM,EAAE,mBAAmB,eAAe,IAAI;AAE9C,SAAO;AAAA,IACN,eAAe,IAAI,CAAC,EAAE,OAAO,iBAAiB,MAAM;AAInD,YAAM,kBAAkB,UAAU,MAAM,QAAQ,IAC7C,OAAO,sBAAsB,MAAM,QAAQ,IAC3C,IAAI,SAAS;AAEhB,YAAM,eAAe,IAAI,QAAQ,kBAAkB,kBAAkB,mBAAmB,KAAK;AAE7F,YAAM,gBAAgB,IAAI;AAAA;AAAA;AAAA,QAGzB,IAAI,QAAQ,eAAe;AAAA,QAC3B;AAAA,MACD;AACA,YAAM,cAAc,qBAAqB,MAAM,WAAW,KAAK;AAE/D,aAAO;AAAA,QACN,IAAI,MAAM;AAAA,QACV,MAAM,MAAM;AAAA,QACZ,GAAG,cAAc;AAAA,QACjB,GAAG,cAAc;AAAA,QACjB,UAAU;AAAA,MACX;AAAA,IACD,CAAC;AAAA,EACF;AAIA,QAAM,UAA4B,CAAC;AAEnC,iBAAe,QAAQ,CAAC,EAAE,MAAM,MAAM;AACrC,UAAM,UAAU,OAAO,SAAS,MAAM,EAAE;AACxC,QAAI,CAAC,QAAS;AACd,UAAM,OAAO,OAAO,aAAa,KAAK;AAEtC,QAAI,UAAU,WAAW,UAAU,WAAW;AAC7C,YAAM,cAAc,KAAK,gBAAgB,KAAK;AAC9C,UAAI,YAAa,SAAQ,KAAK,WAAW;AAAA,IAC1C;AAEA,UAAM,eAAe,KAAK,WAAW,OAAO,OAAO;AACnD,QAAI,aAAc,SAAQ,KAAK,YAAY;AAE3C,QAAI,UAAU,SAAS,UAAU,WAAW;AAC3C,YAAM,YAAY,KAAK,cAAc,OAAO,OAAO;AACnD,UAAI,UAAW,SAAQ,KAAK,SAAS;AAAA,IACtC;AAAA,EACD,CAAC;AAED,MAAI,QAAQ,SAAS,GAAG;AACvB,WAAO,aAAa,OAAO;AAAA,EAC5B;AACD;",
   "names": []
 }

package/dist-esm/lib/utils/runtime.mjs

@@ -12,7 +12,19 @@ const runtime = {
 function setRuntimeOverrides(input) {
   Object.assign(runtime, input);
 }
+function openWindow(url, target = "_blank", allowReferrer) {
+  return runtime.openWindow(url, target, allowReferrer);
+}
+function refreshPage() {
+  runtime.refreshPage();
+}
+function hardResetEditor() {
+  runtime.hardReset();
+}
 export {
+  hardResetEditor,
+  openWindow,
+  refreshPage,
   runtime,
   setRuntimeOverrides
 };

package/dist-esm/lib/utils/runtime.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/lib/utils/runtime.ts"],
-  "sourcesContent": ["/** @public */\nexport const runtime: {\n\topenWindow(url: string, target: string, allowReferrer?: boolean): void\n\trefreshPage(): void\n\thardReset(): void\n} = {\n\topenWindow(url, target, allowReferrer = false) {\n\t\treturn window.open(url, target, allowReferrer ? 'noopener' : 'noopener noreferrer')\n\t},\n\trefreshPage() {\n\t\twindow.location.reload()\n\t},\n\tasync hardReset() {\n\t\treturn await (window as any).__tldraw__hardReset?.()\n\t},\n}\n\n/** @public */\nexport function setRuntimeOverrides(input: Partial<typeof runtime>) {\n\tObject.assign(runtime, input)\n}\n"],
-  "mappings": "AACO,MAAM,UAIT;AAAA,EACH,WAAW,KAAK,QAAQ,gBAAgB,OAAO;AAC9C,WAAO,OAAO,KAAK,KAAK,QAAQ,gBAAgB,aAAa,qBAAqB;AAAA,EACnF;AAAA,EACA,cAAc;AACb,WAAO,SAAS,OAAO;AAAA,EACxB;AAAA,EACA,MAAM,YAAY;AACjB,WAAO,MAAO,OAAe,sBAAsB;AAAA,EACpD;AACD;AAGO,SAAS,oBAAoB,OAAgC;AACnE,SAAO,OAAO,SAAS,KAAK;AAC7B;",
+  "sourcesContent": ["/** @public */\nexport const runtime: {\n\topenWindow(url: string, target: string, allowReferrer?: boolean): void\n\trefreshPage(): void\n\thardReset(): Promise<void>\n} = {\n\topenWindow(url, target, allowReferrer = false) {\n\t\treturn window.open(url, target, allowReferrer ? 'noopener' : 'noopener noreferrer')\n\t},\n\trefreshPage() {\n\t\twindow.location.reload()\n\t},\n\tasync hardReset() {\n\t\treturn await (window as any).__tldraw__hardReset?.()\n\t},\n}\n\n/** @public */\nexport function setRuntimeOverrides(input: Partial<typeof runtime>) {\n\tObject.assign(runtime, input)\n}\n\n/**\n * Open a new window with the given URL and target. Prefer this to the window.open function, as it\n * will work more reliably in embedded scenarios, such as our VS Code extension. See the runtime\n * object in tldraw/editor for more details.\n *\n * @param url - The URL to open.\n * @param target - The target window to open the URL in.\n * @param allowReferrer - Whether to allow the referrer to be sent to the new window.\n * @returns The new window object.\n * @public\n */\nexport function openWindow(url: string, target = '_blank', allowReferrer?: boolean) {\n\treturn runtime.openWindow(url, target, allowReferrer)\n}\n\n/** @public */\nexport function refreshPage() {\n\truntime.refreshPage()\n}\n\n/** @public */\nexport function hardResetEditor() {\n\truntime.hardReset()\n}\n"],
+  "mappings": "AACO,MAAM,UAIT;AAAA,EACH,WAAW,KAAK,QAAQ,gBAAgB,OAAO;AAC9C,WAAO,OAAO,KAAK,KAAK,QAAQ,gBAAgB,aAAa,qBAAqB;AAAA,EACnF;AAAA,EACA,cAAc;AACb,WAAO,SAAS,OAAO;AAAA,EACxB;AAAA,EACA,MAAM,YAAY;AACjB,WAAO,MAAO,OAAe,sBAAsB;AAAA,EACpD;AACD;AAGO,SAAS,oBAAoB,OAAgC;AACnE,SAAO,OAAO,SAAS,KAAK;AAC7B;AAaO,SAAS,WAAW,KAAa,SAAS,UAAU,eAAyB;AACnF,SAAO,QAAQ,WAAW,KAAK,QAAQ,aAAa;AACrD;AAGO,SAAS,cAAc;AAC7B,UAAQ,YAAY;AACrB;AAGO,SAAS,kBAAkB;AACjC,UAAQ,UAAU;AACnB;",
   "names": []
 }

package/dist-esm/version.mjs

@@ -1,8 +1,8 @@
-const version = "4.4.0";
+const version = "4.5.0-canary.a4eece45e3d0";
 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-18T16:41:31.064Z",
+  patch: "2026-02-18T16:41:31.064Z"
 };
 export {
   publishDates,

package/dist-esm/version.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../src/version.ts"],
-  "sourcesContent": ["// This file is automatically generated by internal/scripts/refresh-assets.ts.\n// Do not edit manually. Or do, I'm a comment, not a cop.\n\nexport const version = '4.4.0'\nexport const publishDates = {\n\tmajor: '2025-09-18T14:39:22.803Z',\n\tminor: '2026-02-18T12:03:50.380Z',\n\tpatch: '2026-02-18T12:03:50.380Z',\n}\n"],
+  "sourcesContent": ["// This file is automatically generated by internal/scripts/refresh-assets.ts.\n// Do not edit manually. Or do, I'm a comment, not a cop.\n\nexport const version = '4.5.0-canary.a4eece45e3d0'\nexport const publishDates = {\n\tmajor: '2025-09-18T14:39:22.803Z',\n\tminor: '2026-02-18T16:41:31.064Z',\n\tpatch: '2026-02-18T16:41:31.064Z',\n}\n"],
   "mappings": "AAGO,MAAM,UAAU;AAChB,MAAM,eAAe;AAAA,EAC3B,OAAO;AAAA,EACP,OAAO;AAAA,EACP,OAAO;AACR;",
   "names": []
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tldraw/editor",
   "description": "tldraw infinite canvas SDK (editor).",
-  "version": "4.4.0",
+  "version": "4.5.0-canary.a4eece45e3d0",
   "author": {
     "name": "tldraw Inc.",
     "email": "hello@tldraw.com"
@@ -49,12 +49,12 @@
     "@tiptap/core": "^3.12.1",
     "@tiptap/pm": "^3.12.1",
     "@tiptap/react": "^3.12.1",
-    "@tldraw/state": "4.4.0",
-    "@tldraw/state-react": "4.4.0",
-    "@tldraw/store": "4.4.0",
-    "@tldraw/tlschema": "4.4.0",
-    "@tldraw/utils": "4.4.0",
-    "@tldraw/validate": "4.4.0",
+    "@tldraw/state": "4.5.0-canary.a4eece45e3d0",
+    "@tldraw/state-react": "4.5.0-canary.a4eece45e3d0",
+    "@tldraw/store": "4.5.0-canary.a4eece45e3d0",
+    "@tldraw/tlschema": "4.5.0-canary.a4eece45e3d0",
+    "@tldraw/utils": "4.5.0-canary.a4eece45e3d0",
+    "@tldraw/validate": "4.5.0-canary.a4eece45e3d0",
     "@use-gesture/react": "^10.3.1",
     "classnames": "^2.5.1",
     "eventemitter3": "^4.0.7",

package/src/index.ts

@@ -457,10 +457,8 @@ export { EditorAtom } from './lib/utils/EditorAtom'
 export { getIncrementedName } from './lib/utils/getIncrementedName'
 export { getPointerInfo } from './lib/utils/getPointerInfo'
 export { getSvgPathFromPoints } from './lib/utils/getSvgPathFromPoints'
-export { hardResetEditor } from './lib/utils/hardResetEditor'
 export { isAccelKey } from './lib/utils/keyboard'
 export { normalizeWheel } from './lib/utils/normalizeWheel'
-export { refreshPage } from './lib/utils/refreshPage'
 export { getDroppedShapesToNewParents, kickoutOccludedShapes } from './lib/utils/reparenting'
 export {
 	getFontsFromRichText,
@@ -475,7 +473,13 @@ export {
 	getRotationSnapshot,
 	type TLRotationSnapshot,
 } from './lib/utils/rotation'
-export { runtime, setRuntimeOverrides } from './lib/utils/runtime'
+export {
+	hardResetEditor,
+	openWindow,
+	refreshPage,
+	runtime,
+	setRuntimeOverrides,
+} from './lib/utils/runtime'
 export {
 	ReadonlySharedStyleMap,
 	SharedStyleMap,
@@ -485,7 +489,6 @@ export { hardReset } from './lib/utils/sync/hardReset'
 export { LocalIndexedDb, Table, type StoreName } from './lib/utils/sync/LocalIndexedDb'
 export { type TLStoreWithStatus } from './lib/utils/sync/StoreWithStatus'
 export { uniq } from './lib/utils/uniq'
-export { openWindow } from './lib/utils/window-open'
 
 registerTldrawLibraryVersion(
 	(globalThis as any).TLDRAW_LIBRARY_NAME,

package/src/lib/TldrawEditor.tsx

@@ -24,15 +24,13 @@ import { TLEditorSnapshot } from './config/TLEditorSnapshot'
 import { Editor } from './editor/Editor'
 import { TLStateNodeConstructor } from './editor/tools/StateNode'
 import { TLCameraOptions } from './editor/types/misc-types'
+import type { TLEditorComponents } from './hooks/EditorComponentsContext'
+import { useEditorComponents } from './hooks/EditorComponentsContext'
 import { ContainerProvider, useContainer } from './hooks/useContainer'
 import { useCursor } from './hooks/useCursor'
 import { useDarkMode } from './hooks/useDarkMode'
 import { EditorProvider, useEditor } from './hooks/useEditor'
-import {
-	EditorComponentsProvider,
-	TLEditorComponents,
-	useEditorComponents,
-} from './hooks/useEditorComponents'
+import { EditorComponentsProvider } from './hooks/useEditorComponents'
 import { useEvent } from './hooks/useEvent'
 import { useForceUpdate } from './hooks/useForceUpdate'
 import { useShallowObjectIdentity } from './hooks/useIdentity'

package/src/lib/components/ErrorBoundary.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { TLErrorFallbackComponent } from './default-components/DefaultErrorFallback'
+import type { TLErrorFallbackComponent } from './default-components/DefaultErrorFallback'
 
 /** @public */
 export interface TLErrorBoundaryProps {

package/src/lib/components/LiveCollaborators.tsx

@@ -2,8 +2,8 @@ import { track } from '@tldraw/state-react'
 import { TLInstancePresence } from '@tldraw/tlschema'
 import { useEffect, useRef, useState } from 'react'
 import { Editor } from '../editor/Editor'
+import { useEditorComponents } from '../hooks/EditorComponentsContext'
 import { useEditor } from '../hooks/useEditor'
-import { useEditorComponents } from '../hooks/useEditorComponents'
 import { usePeerIds } from '../hooks/usePeerIds'
 import { usePresence } from '../hooks/usePresence'
 import {

package/src/lib/components/Shape.tsx

@@ -3,8 +3,8 @@ import { useQuickReactor, useStateTracking } from '@tldraw/state-react'
 import { TLShape, TLShapeId } from '@tldraw/tlschema'
 import { memo, useCallback, useEffect, useLayoutEffect, useRef } from 'react'
 import { ShapeUtil } from '../editor/shapes/ShapeUtil'
+import { useEditorComponents } from '../hooks/EditorComponentsContext'
 import { useEditor } from '../hooks/useEditor'
-import { useEditorComponents } from '../hooks/useEditorComponents'
 import { useShapeCulling } from '../hooks/useShapeCulling'
 import { Mat } from '../primitives/Mat'
 import { areShapesContentEqual } from '../utils/areShapesContentEqual'

package/src/lib/components/default-components/DefaultCanvas.tsx

@@ -5,12 +5,12 @@ import { dedupe, modulate, objectMapValues } from '@tldraw/utils'
 import classNames from 'classnames'
 import { Fragment, JSX, useEffect, useRef, useState } from 'react'
 import { tlenv } from '../../globals/environment'
+import { useEditorComponents } from '../../hooks/EditorComponentsContext'
 import { useCanvasEvents } from '../../hooks/useCanvasEvents'
 import { useCoarsePointer } from '../../hooks/useCoarsePointer'
 import { useContainer } from '../../hooks/useContainer'
 import { useDocumentEvents } from '../../hooks/useDocumentEvents'
 import { useEditor } from '../../hooks/useEditor'
-import { useEditorComponents } from '../../hooks/useEditorComponents'
 import { useFixSafariDoubleTapZoomPencilEvents } from '../../hooks/useFixSafariDoubleTapZoomPencilEvents'
 import { useGestureEvents } from '../../hooks/useGestureEvents'
 import { useHandleEvents } from '../../hooks/useHandleEvents'

package/src/lib/components/default-components/DefaultErrorFallback.tsx

@@ -3,10 +3,9 @@ import { noop } from '@tldraw/utils'
 import classNames from 'classnames'
 import { ComponentType, useEffect, useLayoutEffect, useRef, useState } from 'react'
 import { Editor } from '../../editor/Editor'
+import { useEditorComponents } from '../../hooks/EditorComponentsContext'
 import { EditorProvider } from '../../hooks/useEditor'
-import { useEditorComponents } from '../../hooks/useEditorComponents'
-import { hardResetEditor } from '../../utils/hardResetEditor'
-import { refreshPage } from '../../utils/refreshPage'
+import { hardResetEditor, refreshPage } from '../../utils/runtime'
 import { ErrorBoundary } from '../ErrorBoundary'
 
 const BASE_ERROR_URL = 'https://github.com/tldraw/tldraw/issues/new'

package/src/lib/components/default-components/DefaultLoadingScreen.tsx

@@ -1,8 +1,11 @@
-import { LoadingScreen } from '../../TldrawEditor'
-import { useEditorComponents } from '../../hooks/useEditorComponents'
+import { useEditorComponents } from '../../hooks/EditorComponentsContext'
 
 /** @public @react */
 export const DefaultLoadingScreen = () => {
 	const { Spinner } = useEditorComponents()
-	return <LoadingScreen>{Spinner ? <Spinner /> : null}</LoadingScreen>
+	return (
+		<div className="tl-loading" aria-busy="true" tabIndex={0}>
+			{Spinner ? <Spinner /> : null}
+		</div>
+	)
 }

package/src/lib/components/default-components/DefaultShapeIndicator.tsx

@@ -4,8 +4,8 @@ import classNames from 'classnames'
 import { memo, useLayoutEffect, useRef } from 'react'
 import type { Editor } from '../../editor/Editor'
 import { ShapeUtil } from '../../editor/shapes/ShapeUtil'
+import { useEditorComponents } from '../../hooks/EditorComponentsContext'
 import { useEditor } from '../../hooks/useEditor'
-import { useEditorComponents } from '../../hooks/useEditorComponents'
 import { OptionalErrorBoundary } from '../ErrorBoundary'
 
 // need an extra layer of indirection here to allow hooks to be used inside the indicator render

package/src/lib/components/default-components/DefaultShapeIndicators.tsx

@@ -1,8 +1,8 @@
 import { useValue } from '@tldraw/state-react'
 import { TLShapeId } from '@tldraw/tlschema'
 import { memo, useRef } from 'react'
+import { useEditorComponents } from '../../hooks/EditorComponentsContext'
 import { useEditor } from '../../hooks/useEditor'
-import { useEditorComponents } from '../../hooks/useEditorComponents'
 
 /** @public */
 export interface TLShapeIndicatorsProps {

package/src/lib/config/TLSessionStateSnapshot.ts

@@ -230,7 +230,8 @@ export function loadSessionStateSnapshotIntoStore(
 	const res = migrateAndValidateSessionStateSnapshot(snapshot)
 	if (!res) return
 
-	const preserved = pluckPreservingValues(store.get(TLINSTANCE_ID))
+	const existingInstance = store.get(TLINSTANCE_ID)
+	const preserved = pluckPreservingValues(existingInstance)
 	const primary = opts?.forceOverwrite ? res : preserved
 	const secondary = opts?.forceOverwrite ? preserved : res
 
@@ -238,7 +239,7 @@ export function loadSessionStateSnapshotIntoStore(
 		id: TLINSTANCE_ID,
 		...preserved,
 		// the integrity checker will ensure that the currentPageId is valid
-		currentPageId: res.currentPageId,
+		currentPageId: res.currentPageId ?? existingInstance?.currentPageId,
 		isDebugMode: primary?.isDebugMode ?? secondary?.isDebugMode,
 		isFocusMode: primary?.isFocusMode ?? secondary?.isFocusMode,
 		isToolLocked: primary?.isToolLocked ?? secondary?.isToolLocked,

package/src/lib/editor/Editor.ts

@@ -134,6 +134,7 @@ import {
 } from '../utils/deepLinks'
 import { getIncrementedName } from '../utils/getIncrementedName'
 import { getReorderingShapesChanges } from '../utils/reorderShapes'
+import { getDroppedShapesToNewParents } from '../utils/reparenting'
 import { TLTextOptions, TiptapEditor } from '../utils/richText'
 import { applyRotationToSnapshotShapes, getRotationSnapshot } from '../utils/rotation'
 import { BindingOnDeleteOptions, BindingUtil } from './bindings/BindingUtil'
@@ -821,6 +822,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 	}
 
 	private readonly _getShapeVisibility?: TLEditorOptions['getShapeVisibility']
+
 	@computed
 	private getIsShapeHiddenCache() {
 		if (!this._getShapeVisibility) return null
@@ -9631,6 +9633,20 @@ export class Editor extends EventEmitter<TLEventMap> {
 					return { id: s.id, type: s.type, x: s.x + localDelta.x, y: s.y + localDelta.y }
 				})
 			)
+
+			// If shapes were pasted onto the page (not into a specific parent),
+			// check whether they landed inside a frame and reparent if so.
+			if (isPageId(pasteParentId)) {
+				const currentRootShapes = compact(rootShapes.map((s) => this.getShape(s.id)))
+				const { reparenting } = getDroppedShapesToNewParents(this, currentRootShapes)
+				reparenting.forEach((childrenToReparent, newParentId) => {
+					if (childrenToReparent.length === 0) return
+					this.reparentShapes(
+						childrenToReparent.map((s) => s.id),
+						newParentId
+					)
+				})
+			}
 		})
 
 		return this

package/src/lib/editor/bindings/BindingUtil.ts

@@ -5,7 +5,7 @@ import {
 	TLShape,
 	TLUnknownBinding,
 } from '@tldraw/tlschema'
-import { Editor } from '../Editor'
+import type { Editor } from '../Editor'
 
 /** @public */
 export interface TLBindingUtilConstructor<

package/src/lib/editor/derivations/bindingsIndex.ts

@@ -1,7 +1,7 @@
 import { Computed, RESET_VALUE, computed, isUninitialized } from '@tldraw/state'
 import { TLBinding, TLShapeId } from '@tldraw/tlschema'
 import { objectMapValues } from '@tldraw/utils'
-import { Editor } from '../Editor'
+import type { Editor } from '../Editor'
 
 type TLBindingsIndex = Map<TLShapeId, TLBinding[]>
 

package/src/lib/editor/derivations/notVisibleShapes.ts

@@ -1,6 +1,6 @@
 import { computed, isUninitialized } from '@tldraw/state'
 import { TLShape, TLShapeId } from '@tldraw/tlschema'
-import { Editor } from '../Editor'
+import type { Editor } from '../Editor'
 
 /**
  * Non visible shapes are shapes outside of the viewport page bounds.

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

@@ -1,6 +1,6 @@
 import { Vec } from '../../../primitives/Vec'
 import { EASINGS } from '../../../primitives/easings'
-import { Editor } from '../../Editor'
+import type { Editor } from '../../Editor'
 
 /** @public */
 export class EdgeScrollManager {

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

@@ -8,7 +8,7 @@ import {
 	mapObjectMapValues,
 	objectMapEntries,
 } from '@tldraw/utils'
-import { Editor } from '../../Editor'
+import type { Editor } from '../../Editor'
 
 /**
  * Represents the `src` property of a {@link TLFontFace}.

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

@@ -4,7 +4,7 @@ import { TLINSTANCE_ID, TLPOINTER_ID } from '@tldraw/tlschema'
 import { INTERNAL_POINTER_IDS } from '../../../constants'
 import { Vec } from '../../../primitives/Vec'
 import { isAccelKey } from '../../../utils/keyboard'
-import { Editor } from '../../Editor'
+import type { Editor } from '../../Editor'
 import { TLPinchEventInfo, TLPointerEventInfo, TLWheelEventInfo } from '../../types/event-types'
 
 /** @public */

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

@@ -1,7 +1,7 @@
 import { TLScribble, VecModel } from '@tldraw/tlschema'
 import { uniqueId } from '@tldraw/utils'
 import { Vec } from '../../../primitives/Vec'
-import { Editor } from '../../Editor'
+import type { Editor } from '../../Editor'
 
 /** @public */
 export interface ScribbleItem {

package/src/lib/editor/managers/SnapManager/BoundsSnaps.ts

@@ -12,8 +12,8 @@ import {
 import { Mat } from '../../../primitives/Mat'
 import { Vec } from '../../../primitives/Vec'
 import { rangeIntersection, rangesOverlap } from '../../../primitives/utils'
-import { Editor } from '../../Editor'
-import {
+import type { Editor } from '../../Editor'
+import type {
 	GapsSnapIndicator,
 	PointsSnapIndicator,
 	SnapData,

package/src/lib/editor/managers/SnapManager/HandleSnaps.ts

@@ -3,8 +3,8 @@ import { TLHandle, TLShape, TLShapeId, VecModel } from '@tldraw/tlschema'
 import { assertExists, uniqueId } from '@tldraw/utils'
 import { Vec } from '../../../primitives/Vec'
 import { Geometry2d } from '../../../primitives/geometry/Geometry2d'
-import { Editor } from '../../Editor'
-import { PointsSnapIndicator, SnapData, SnapManager } from './SnapManager'
+import type { Editor } from '../../Editor'
+import type { PointsSnapIndicator, SnapData, SnapManager } from './SnapManager'
 
 /**
  * When dragging a handle, users can snap the handle to key geometry on other nearby shapes.

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

@@ -1,6 +1,6 @@
 import { BoxModel, TLDefaultHorizontalAlignStyle } from '@tldraw/tlschema'
 import { objectMapKeys } from '@tldraw/utils'
-import { Editor } from '../../Editor'
+import type { Editor } from '../../Editor'
 
 const fixNewLines = /\r?\n|\r/g
 

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

@@ -1,5 +1,5 @@
 import { throttleToNextFrame as _throttleToNextFrame, bind } from '@tldraw/utils'
-import { Editor } from '../../Editor'
+import type { Editor } from '../../Editor'
 
 const throttleToNextFrame =
 	typeof process !== 'undefined' && process.env.NODE_ENV === 'test'

package/src/lib/editor/shapes/shared/resizeBox.ts

@@ -2,7 +2,7 @@ import { VecModel } from '@tldraw/tlschema'
 import { Box } from '../../../primitives/Box'
 import { Vec } from '../../../primitives/Vec'
 import { TLResizeHandle } from '../../types/selection-types'
-import { TLBaseBoxShape } from '../BaseBoxShapeUtil'
+import type { TLBaseBoxShape } from '../BaseBoxShapeUtil'
 import { TLResizeMode } from '../ShapeUtil'
 
 /** @public */

package/src/lib/editor/tools/BaseBoxShapeTool/children/Pointing.ts

@@ -1,11 +1,11 @@
 import { TLShape, createShapeId } from '@tldraw/tlschema'
 import { structuredClone } from '@tldraw/utils'
 import { Vec } from '../../../../primitives/Vec'
-import { Editor } from '../../../Editor'
+import type { Editor } from '../../../Editor'
 import { TLBaseBoxShape } from '../../../shapes/BaseBoxShapeUtil'
 import { TLPointerEventInfo } from '../../../types/event-types'
 import { StateNode } from '../../StateNode'
-import { BaseBoxShapeTool } from '../BaseBoxShapeTool'
+import type { BaseBoxShapeTool } from '../BaseBoxShapeTool'
 
 export class Pointing extends StateNode {
 	static override id = 'pointing'

package/src/lib/editor/types/SvgExportContext.tsx

@@ -4,7 +4,7 @@ import { ReactElement, ReactNode, createContext, useContext, useEffect, useState
 import { ContainerProvider } from '../../hooks/useContainer'
 import { EditorProvider } from '../../hooks/useEditor'
 import { useEvent } from '../../hooks/useEvent'
-import { Editor } from '../Editor'
+import type { Editor } from '../Editor'
 
 /** @public */
 export interface SvgExportDef {

package/src/lib/exports/exportToSvg.tsx

@@ -2,7 +2,7 @@ import { TLShapeId } from '@tldraw/tlschema'
 import { assert } from '@tldraw/utils'
 import { flushSync } from 'react-dom'
 import { createRoot } from 'react-dom/client'
-import { Editor } from '../editor/Editor'
+import type { Editor } from '../editor/Editor'
 import { TLSvgExportOptions } from '../editor/types/misc-types'
 import { SVG_EXPORT_CLASSNAME } from './FontEmbedder'
 import { StyleEmbedder } from './StyleEmbedder'

package/src/lib/exports/getSvgJsx.tsx

@@ -20,7 +20,7 @@ import {
 import { flushSync } from 'react-dom'
 import { ErrorBoundary } from '../components/ErrorBoundary'
 import { InnerShape, InnerShapeBackground } from '../components/Shape'
-import { Editor, TLRenderingShape } from '../editor/Editor'
+import type { Editor, TLRenderingShape } from '../editor/Editor'
 import { TLFontFace } from '../editor/managers/FontManager/FontManager'
 import { ShapeUtil } from '../editor/shapes/ShapeUtil'
 import {

package/src/lib/hooks/EditorComponentsContext.tsx

@@ -0,0 +1,63 @@
+import { ComponentType, RefAttributes, createContext, useContext } from 'react'
+import type { TLBrushProps } from '../components/default-components/DefaultBrush'
+import type { TLCanvasComponentProps } from '../components/default-components/DefaultCanvas'
+import type { TLCollaboratorHintProps } from '../components/default-components/DefaultCollaboratorHint'
+import type { TLCursorProps } from '../components/default-components/DefaultCursor'
+import type { TLErrorFallbackComponent } from '../components/default-components/DefaultErrorFallback'
+import type { TLGridProps } from '../components/default-components/DefaultGrid'
+import type { TLHandleProps } from '../components/default-components/DefaultHandle'
+import type { TLHandlesProps } from '../components/default-components/DefaultHandles'
+import type { TLScribbleProps } from '../components/default-components/DefaultScribble'
+import type { TLSelectionBackgroundProps } from '../components/default-components/DefaultSelectionBackground'
+import type { TLSelectionForegroundProps } from '../components/default-components/DefaultSelectionForeground'
+import type { TLShapeErrorFallbackComponent } from '../components/default-components/DefaultShapeErrorFallback'
+import type { TLShapeIndicatorProps } from '../components/default-components/DefaultShapeIndicator'
+import type { TLShapeIndicatorErrorFallbackComponent } from '../components/default-components/DefaultShapeIndicatorErrorFallback'
+import type { TLShapeWrapperProps } from '../components/default-components/DefaultShapeWrapper'
+import type { TLSnapIndicatorProps } from '../components/default-components/DefaultSnapIndictor'
+
+/** @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
+}
+
+export const EditorComponentsContext = createContext<null | Required<TLEditorComponents>>(null)
+
+/** @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/hooks/useCanvasEvents.ts

@@ -102,13 +102,24 @@ export function useCanvasEvents() {
 				preventDefault(e)
 				e.stopPropagation()
 
+				const pagePoint = editor.screenToPage({ x: e.clientX, y: e.clientY })
+
+				// Call the custom onDropOnCanvas callback if provided
+				if (editor.options.experimental__onDropOnCanvas) {
+					const handled = editor.options.experimental__onDropOnCanvas({
+						point: pagePoint,
+						event: e,
+					})
+					if (handled) return
+				}
+
 				if (e.dataTransfer?.files?.length) {
 					const files = Array.from(e.dataTransfer.files)
 
 					await editor.putExternalContent({
 						type: 'files',
 						files,
-						point: editor.screenToPage({ x: e.clientX, y: e.clientY }),
+						point: pagePoint,
 					})
 					return
 				}
@@ -118,7 +129,7 @@ export function useCanvasEvents() {
 					await editor.putExternalContent({
 						type: 'url',
 						url,
-						point: editor.screenToPage({ x: e.clientX, y: e.clientY }),
+						point: pagePoint,
 					})
 					return
 				}