@tldraw/editor 4.5.3 → 4.6.0-canary.0bcbb3ed5bcb

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/lib/utils/browserCanvasMaxSize.ts"],
-  "sourcesContent": ["/** @internal */\nexport interface CanvasMaxSize {\n\tmaxWidth: number\n\tmaxHeight: number\n\tmaxArea: number\n}\n\n// Cache this, only want to do this once per browser session\nlet maxCanvasSizes: CanvasMaxSize | null = null\n\nfunction getBrowserCanvasMaxSize(): CanvasMaxSize {\n\tif (!maxCanvasSizes) {\n\t\tmaxCanvasSizes = {\n\t\t\tmaxWidth: getCanvasSize('width'), // test very wide but 1 pixel tall canvases\n\t\t\tmaxHeight: getCanvasSize('height'), // test very tall but 1 pixel wide canvases\n\t\t\tmaxArea: getCanvasSize('area'), // test square canvases\n\t\t}\n\t}\n\treturn maxCanvasSizes\n}\n\n/*!\n * Extracted from https://github.com/jhildenbiddle/canvas-size\n * MIT License: https://github.com/jhildenbiddle/canvas-size/blob/master/LICENSE\n * Copyright (c) John Hildenbiddle\n */\n\nconst MAX_SAFE_CANVAS_DIMENSION = 8192\nconst MAX_SAFE_CANVAS_AREA = 4096 * 4096\n\nconst TEST_SIZES = {\n\tarea: [\n\t\t// Chrome 70 (Mac, Win)\n\t\t// Chrome 68 (Android 4.4)\n\t\t// Edge 17 (Win)\n\t\t// Safari 7-12 (Mac)\n\t\t16384,\n\t\t// Chrome 68 (Android 7.1-9)\n\t\t14188,\n\t\t// Chrome 68 (Android 5)\n\t\t11402,\n\t\t// Firefox 63 (Mac, Win)\n\t\t11180,\n\t\t// Chrome 68 (Android 6)\n\t\t10836,\n\t\t// IE 9-11 (Win)\n\t\t8192,\n\t\t// IE Mobile (Windows Phone 8.x)\n\t\t// Safari (iOS 9 - 12)\n\t\t4096,\n\t],\n\theight: [\n\t\t// Safari 7-12 (Mac)\n\t\t// Safari (iOS 9-12)\n\t\t8388607,\n\t\t// Chrome 83 (Mac, Win)\n\t\t65535,\n\t\t// Chrome 70 (Mac, Win)\n\t\t// Chrome 68 (Android 4.4-9)\n\t\t// Firefox 63 (Mac, Win)\n\t\t32767,\n\t\t// Edge 17 (Win)\n\t\t// IE11 (Win)\n\t\t16384,\n\t\t// IE 9-10 (Win)\n\t\t8192,\n\t\t// IE Mobile (Windows Phone 8.x)\n\t\t4096,\n\t],\n\twidth: [\n\t\t// Safari 7-12 (Mac)\n\t\t// Safari (iOS 9-12)\n\t\t4194303,\n\t\t// Chrome 83 (Mac, Win)\n\t\t65535,\n\t\t// Chrome 70 (Mac, Win)\n\t\t// Chrome 68 (Android 4.4-9)\n\t\t// Firefox 63 (Mac, Win)\n\t\t32767,\n\t\t// Edge 17 (Win)\n\t\t// IE11 (Win)\n\t\t16384,\n\t\t// IE 9-10 (Win)\n\t\t8192,\n\t\t// IE Mobile (Windows Phone 8.x)\n\t\t4096,\n\t],\n} as const\n\n/**\n * Tests ability to read pixel data from canvas elements of various dimensions\n * by decreasing canvas height and/or width until a test succeeds.\n * @param dimension - The dimension to test.\n * @returns The maximum size of the canvas for the given dimension.\n */\nfunction getCanvasSize(dimension: 'width' | 'height' | 'area'): number {\n\tconst cropCvs = document.createElement('canvas')\n\tcropCvs.width = 1\n\tcropCvs.height = 1\n\tconst cropCtx = cropCvs.getContext('2d')!\n\n\tfor (const size of TEST_SIZES[dimension]) {\n\t\tconst w = dimension === 'height' ? 1 : size\n\t\tconst h = dimension === 'width' ? 1 : size\n\n\t\tconst testCvs = document.createElement('canvas')\n\t\ttestCvs.width = w\n\t\ttestCvs.height = h\n\t\tconst testCtx = testCvs.getContext('2d')!\n\n\t\ttestCtx.fillRect(w - 1, h - 1, 1, 1)\n\t\tcropCtx.drawImage(testCvs, w - 1, h - 1, 1, 1, 0, 0, 1, 1)\n\n\t\tconst isTestPassed = cropCtx.getImageData(0, 0, 1, 1).data[3] !== 0\n\t\t// release memory\n\t\ttestCvs.width = 0\n\t\ttestCvs.height = 0\n\n\t\tif (isTestPassed) {\n\t\t\t// release memory\n\t\t\tcropCvs.width = 0\n\t\t\tcropCvs.height = 0\n\n\t\t\tif (dimension === 'area') {\n\t\t\t\treturn size * size\n\t\t\t} else {\n\t\t\t\treturn size\n\t\t\t}\n\t\t}\n\t}\n\n\t// didn't find a good size, release memory and error\n\tcropCvs.width = 0\n\tcropCvs.height = 0\n\n\tthrow Error('Failed to determine maximum canvas dimension')\n}\n\n/** @internal */\nexport function clampToBrowserMaxCanvasSize(width: number, height: number): [number, number] {\n\tif (\n\t\twidth <= MAX_SAFE_CANVAS_DIMENSION &&\n\t\theight <= MAX_SAFE_CANVAS_DIMENSION &&\n\t\twidth * height <= MAX_SAFE_CANVAS_AREA\n\t) {\n\t\treturn [width, height]\n\t}\n\n\tconst { maxWidth, maxHeight, maxArea } = getBrowserCanvasMaxSize()\n\tconst aspectRatio = width / height\n\n\tif (width > maxWidth) {\n\t\twidth = maxWidth\n\t\theight = width / aspectRatio\n\t}\n\n\tif (height > maxHeight) {\n\t\theight = maxHeight\n\t\twidth = height * aspectRatio\n\t}\n\n\tif (width * height > maxArea) {\n\t\tconst ratio = Math.sqrt(maxArea / (width * height))\n\t\twidth *= ratio\n\t\theight *= ratio\n\t}\n\n\treturn [width, height]\n}\n"],
-  "mappings": "AAQA,IAAI,iBAAuC;AAE3C,SAAS,0BAAyC;AACjD,MAAI,CAAC,gBAAgB;AACpB,qBAAiB;AAAA,MAChB,UAAU,cAAc,OAAO;AAAA;AAAA,MAC/B,WAAW,cAAc,QAAQ;AAAA;AAAA,MACjC,SAAS,cAAc,MAAM;AAAA;AAAA,IAC9B;AAAA,EACD;AACA,SAAO;AACR;AAEA;AAAA;AAAA;AAAA;AAAA;AAMA,MAAM,4BAA4B;AAClC,MAAM,uBAAuB,OAAO;AAEpC,MAAM,aAAa;AAAA,EAClB,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA,IAKL;AAAA;AAAA,IAEA;AAAA;AAAA,IAEA;AAAA;AAAA,IAEA;AAAA;AAAA,IAEA;AAAA;AAAA,IAEA;AAAA;AAAA;AAAA,IAGA;AAAA,EACD;AAAA,EACA,QAAQ;AAAA;AAAA;AAAA,IAGP;AAAA;AAAA,IAEA;AAAA;AAAA;AAAA;AAAA,IAIA;AAAA;AAAA;AAAA,IAGA;AAAA;AAAA,IAEA;AAAA;AAAA,IAEA;AAAA,EACD;AAAA,EACA,OAAO;AAAA;AAAA;AAAA,IAGN;AAAA;AAAA,IAEA;AAAA;AAAA;AAAA;AAAA,IAIA;AAAA;AAAA;AAAA,IAGA;AAAA;AAAA,IAEA;AAAA;AAAA,IAEA;AAAA,EACD;AACD;AAQA,SAAS,cAAc,WAAgD;AACtE,QAAM,UAAU,SAAS,cAAc,QAAQ;AAC/C,UAAQ,QAAQ;AAChB,UAAQ,SAAS;AACjB,QAAM,UAAU,QAAQ,WAAW,IAAI;AAEvC,aAAW,QAAQ,WAAW,SAAS,GAAG;AACzC,UAAM,IAAI,cAAc,WAAW,IAAI;AACvC,UAAM,IAAI,cAAc,UAAU,IAAI;AAEtC,UAAM,UAAU,SAAS,cAAc,QAAQ;AAC/C,YAAQ,QAAQ;AAChB,YAAQ,SAAS;AACjB,UAAM,UAAU,QAAQ,WAAW,IAAI;AAEvC,YAAQ,SAAS,IAAI,GAAG,IAAI,GAAG,GAAG,CAAC;AACnC,YAAQ,UAAU,SAAS,IAAI,GAAG,IAAI,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;AAEzD,UAAM,eAAe,QAAQ,aAAa,GAAG,GAAG,GAAG,CAAC,EAAE,KAAK,CAAC,MAAM;AAElE,YAAQ,QAAQ;AAChB,YAAQ,SAAS;AAEjB,QAAI,cAAc;AAEjB,cAAQ,QAAQ;AAChB,cAAQ,SAAS;AAEjB,UAAI,cAAc,QAAQ;AACzB,eAAO,OAAO;AAAA,MACf,OAAO;AACN,eAAO;AAAA,MACR;AAAA,IACD;AAAA,EACD;AAGA,UAAQ,QAAQ;AAChB,UAAQ,SAAS;AAEjB,QAAM,MAAM,8CAA8C;AAC3D;AAGO,SAAS,4BAA4B,OAAe,QAAkC;AAC5F,MACC,SAAS,6BACT,UAAU,6BACV,QAAQ,UAAU,sBACjB;AACD,WAAO,CAAC,OAAO,MAAM;AAAA,EACtB;AAEA,QAAM,EAAE,UAAU,WAAW,QAAQ,IAAI,wBAAwB;AACjE,QAAM,cAAc,QAAQ;AAE5B,MAAI,QAAQ,UAAU;AACrB,YAAQ;AACR,aAAS,QAAQ;AAAA,EAClB;AAEA,MAAI,SAAS,WAAW;AACvB,aAAS;AACT,YAAQ,SAAS;AAAA,EAClB;AAEA,MAAI,QAAQ,SAAS,SAAS;AAC7B,UAAM,QAAQ,KAAK,KAAK,WAAW,QAAQ,OAAO;AAClD,aAAS;AACT,cAAU;AAAA,EACX;AAEA,SAAO,CAAC,OAAO,MAAM;AACtB;",
+  "sourcesContent": ["import { getGlobalDocument } from './dom'\n\n/** @internal */\nexport interface CanvasMaxSize {\n\tmaxWidth: number\n\tmaxHeight: number\n\tmaxArea: number\n}\n\n// Cache this, only want to do this once per browser session\nlet maxCanvasSizes: CanvasMaxSize | null = null\n\nfunction getBrowserCanvasMaxSize(): CanvasMaxSize {\n\tif (!maxCanvasSizes) {\n\t\tmaxCanvasSizes = {\n\t\t\tmaxWidth: getCanvasSize('width'), // test very wide but 1 pixel tall canvases\n\t\t\tmaxHeight: getCanvasSize('height'), // test very tall but 1 pixel wide canvases\n\t\t\tmaxArea: getCanvasSize('area'), // test square canvases\n\t\t}\n\t}\n\treturn maxCanvasSizes\n}\n\n/*!\n * Extracted from https://github.com/jhildenbiddle/canvas-size\n * MIT License: https://github.com/jhildenbiddle/canvas-size/blob/master/LICENSE\n * Copyright (c) John Hildenbiddle\n */\n\nconst MAX_SAFE_CANVAS_DIMENSION = 8192\nconst MAX_SAFE_CANVAS_AREA = 4096 * 4096\n\nconst TEST_SIZES = {\n\tarea: [\n\t\t// Chrome 70 (Mac, Win)\n\t\t// Chrome 68 (Android 4.4)\n\t\t// Edge 17 (Win)\n\t\t// Safari 7-12 (Mac)\n\t\t16384,\n\t\t// Chrome 68 (Android 7.1-9)\n\t\t14188,\n\t\t// Chrome 68 (Android 5)\n\t\t11402,\n\t\t// Firefox 63 (Mac, Win)\n\t\t11180,\n\t\t// Chrome 68 (Android 6)\n\t\t10836,\n\t\t// IE 9-11 (Win)\n\t\t8192,\n\t\t// IE Mobile (Windows Phone 8.x)\n\t\t// Safari (iOS 9 - 12)\n\t\t4096,\n\t],\n\theight: [\n\t\t// Safari 7-12 (Mac)\n\t\t// Safari (iOS 9-12)\n\t\t8388607,\n\t\t// Chrome 83 (Mac, Win)\n\t\t65535,\n\t\t// Chrome 70 (Mac, Win)\n\t\t// Chrome 68 (Android 4.4-9)\n\t\t// Firefox 63 (Mac, Win)\n\t\t32767,\n\t\t// Edge 17 (Win)\n\t\t// IE11 (Win)\n\t\t16384,\n\t\t// IE 9-10 (Win)\n\t\t8192,\n\t\t// IE Mobile (Windows Phone 8.x)\n\t\t4096,\n\t],\n\twidth: [\n\t\t// Safari 7-12 (Mac)\n\t\t// Safari (iOS 9-12)\n\t\t4194303,\n\t\t// Chrome 83 (Mac, Win)\n\t\t65535,\n\t\t// Chrome 70 (Mac, Win)\n\t\t// Chrome 68 (Android 4.4-9)\n\t\t// Firefox 63 (Mac, Win)\n\t\t32767,\n\t\t// Edge 17 (Win)\n\t\t// IE11 (Win)\n\t\t16384,\n\t\t// IE 9-10 (Win)\n\t\t8192,\n\t\t// IE Mobile (Windows Phone 8.x)\n\t\t4096,\n\t],\n} as const\n\n/**\n * Tests ability to read pixel data from canvas elements of various dimensions\n * by decreasing canvas height and/or width until a test succeeds.\n * @param dimension - The dimension to test.\n * @returns The maximum size of the canvas for the given dimension.\n */\nfunction getCanvasSize(dimension: 'width' | 'height' | 'area'): number {\n\tconst cropCvs = getGlobalDocument().createElement('canvas')\n\tcropCvs.width = 1\n\tcropCvs.height = 1\n\tconst cropCtx = cropCvs.getContext('2d')!\n\n\tfor (const size of TEST_SIZES[dimension]) {\n\t\tconst w = dimension === 'height' ? 1 : size\n\t\tconst h = dimension === 'width' ? 1 : size\n\n\t\tconst testCvs = getGlobalDocument().createElement('canvas')\n\t\ttestCvs.width = w\n\t\ttestCvs.height = h\n\t\tconst testCtx = testCvs.getContext('2d')!\n\n\t\ttestCtx.fillRect(w - 1, h - 1, 1, 1)\n\t\tcropCtx.drawImage(testCvs, w - 1, h - 1, 1, 1, 0, 0, 1, 1)\n\n\t\tconst isTestPassed = cropCtx.getImageData(0, 0, 1, 1).data[3] !== 0\n\t\t// release memory\n\t\ttestCvs.width = 0\n\t\ttestCvs.height = 0\n\n\t\tif (isTestPassed) {\n\t\t\t// release memory\n\t\t\tcropCvs.width = 0\n\t\t\tcropCvs.height = 0\n\n\t\t\tif (dimension === 'area') {\n\t\t\t\treturn size * size\n\t\t\t} else {\n\t\t\t\treturn size\n\t\t\t}\n\t\t}\n\t}\n\n\t// didn't find a good size, release memory and error\n\tcropCvs.width = 0\n\tcropCvs.height = 0\n\n\tthrow Error('Failed to determine maximum canvas dimension')\n}\n\n/** @internal */\nexport function clampToBrowserMaxCanvasSize(width: number, height: number): [number, number] {\n\tif (\n\t\twidth <= MAX_SAFE_CANVAS_DIMENSION &&\n\t\theight <= MAX_SAFE_CANVAS_DIMENSION &&\n\t\twidth * height <= MAX_SAFE_CANVAS_AREA\n\t) {\n\t\treturn [width, height]\n\t}\n\n\tconst { maxWidth, maxHeight, maxArea } = getBrowserCanvasMaxSize()\n\tconst aspectRatio = width / height\n\n\tif (width > maxWidth) {\n\t\twidth = maxWidth\n\t\theight = width / aspectRatio\n\t}\n\n\tif (height > maxHeight) {\n\t\theight = maxHeight\n\t\twidth = height * aspectRatio\n\t}\n\n\tif (width * height > maxArea) {\n\t\tconst ratio = Math.sqrt(maxArea / (width * height))\n\t\twidth *= ratio\n\t\theight *= ratio\n\t}\n\n\treturn [width, height]\n}\n"],
+  "mappings": "AAAA,SAAS,yBAAyB;AAUlC,IAAI,iBAAuC;AAE3C,SAAS,0BAAyC;AACjD,MAAI,CAAC,gBAAgB;AACpB,qBAAiB;AAAA,MAChB,UAAU,cAAc,OAAO;AAAA;AAAA,MAC/B,WAAW,cAAc,QAAQ;AAAA;AAAA,MACjC,SAAS,cAAc,MAAM;AAAA;AAAA,IAC9B;AAAA,EACD;AACA,SAAO;AACR;AAEA;AAAA;AAAA;AAAA;AAAA;AAMA,MAAM,4BAA4B;AAClC,MAAM,uBAAuB,OAAO;AAEpC,MAAM,aAAa;AAAA,EAClB,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA,IAKL;AAAA;AAAA,IAEA;AAAA;AAAA,IAEA;AAAA;AAAA,IAEA;AAAA;AAAA,IAEA;AAAA;AAAA,IAEA;AAAA;AAAA;AAAA,IAGA;AAAA,EACD;AAAA,EACA,QAAQ;AAAA;AAAA;AAAA,IAGP;AAAA;AAAA,IAEA;AAAA;AAAA;AAAA;AAAA,IAIA;AAAA;AAAA;AAAA,IAGA;AAAA;AAAA,IAEA;AAAA;AAAA,IAEA;AAAA,EACD;AAAA,EACA,OAAO;AAAA;AAAA;AAAA,IAGN;AAAA;AAAA,IAEA;AAAA;AAAA;AAAA;AAAA,IAIA;AAAA;AAAA;AAAA,IAGA;AAAA;AAAA,IAEA;AAAA;AAAA,IAEA;AAAA,EACD;AACD;AAQA,SAAS,cAAc,WAAgD;AACtE,QAAM,UAAU,kBAAkB,EAAE,cAAc,QAAQ;AAC1D,UAAQ,QAAQ;AAChB,UAAQ,SAAS;AACjB,QAAM,UAAU,QAAQ,WAAW,IAAI;AAEvC,aAAW,QAAQ,WAAW,SAAS,GAAG;AACzC,UAAM,IAAI,cAAc,WAAW,IAAI;AACvC,UAAM,IAAI,cAAc,UAAU,IAAI;AAEtC,UAAM,UAAU,kBAAkB,EAAE,cAAc,QAAQ;AAC1D,YAAQ,QAAQ;AAChB,YAAQ,SAAS;AACjB,UAAM,UAAU,QAAQ,WAAW,IAAI;AAEvC,YAAQ,SAAS,IAAI,GAAG,IAAI,GAAG,GAAG,CAAC;AACnC,YAAQ,UAAU,SAAS,IAAI,GAAG,IAAI,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;AAEzD,UAAM,eAAe,QAAQ,aAAa,GAAG,GAAG,GAAG,CAAC,EAAE,KAAK,CAAC,MAAM;AAElE,YAAQ,QAAQ;AAChB,YAAQ,SAAS;AAEjB,QAAI,cAAc;AAEjB,cAAQ,QAAQ;AAChB,cAAQ,SAAS;AAEjB,UAAI,cAAc,QAAQ;AACzB,eAAO,OAAO;AAAA,MACf,OAAO;AACN,eAAO;AAAA,MACR;AAAA,IACD;AAAA,EACD;AAGA,UAAQ,QAAQ;AAChB,UAAQ,SAAS;AAEjB,QAAM,MAAM,8CAA8C;AAC3D;AAGO,SAAS,4BAA4B,OAAe,QAAkC;AAC5F,MACC,SAAS,6BACT,UAAU,6BACV,QAAQ,UAAU,sBACjB;AACD,WAAO,CAAC,OAAO,MAAM;AAAA,EACtB;AAEA,QAAM,EAAE,UAAU,WAAW,QAAQ,IAAI,wBAAwB;AACjE,QAAM,cAAc,QAAQ;AAE5B,MAAI,QAAQ,UAAU;AACrB,YAAQ;AACR,aAAS,QAAQ;AAAA,EAClB;AAEA,MAAI,SAAS,WAAW;AACvB,aAAS;AACT,YAAQ,SAAS;AAAA,EAClB;AAEA,MAAI,QAAQ,SAAS,SAAS;AAC7B,UAAM,QAAQ,KAAK,KAAK,WAAW,QAAQ,OAAO;AAClD,aAAS;AACT,cAAU;AAAA,EACX;AAEA,SAAO,CAAC,OAAO,MAAM;AACtB;",
   "names": []
 }

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

@@ -45,12 +45,25 @@ function elementShouldCaptureKeys(el, includeButtonsAndMenus = true) {
   const tagName = el.tagName.toLowerCase();
   return el.isContentEditable || tagName === "input" || tagName === "textarea" || includeButtonsAndMenus && tagName === "select" || includeButtonsAndMenus && tagName === "button" || el.classList.contains("tlui-slider__thumb");
 }
-function activeElementShouldCaptureKeys(includeButtonsAndMenus = true) {
-  return elementShouldCaptureKeys(document.activeElement, includeButtonsAndMenus);
+function getGlobalDocument() {
+  if (typeof document !== "undefined") return document;
+  return globalThis.document;
+}
+function getGlobalWindow() {
+  if (typeof window !== "undefined") return window;
+  return globalThis;
+}
+function activeElementShouldCaptureKeys(includeButtonsAndMenus = true, doc) {
+  return elementShouldCaptureKeys(
+    (doc ?? getGlobalDocument()).activeElement,
+    includeButtonsAndMenus
+  );
 }
 export {
   activeElementShouldCaptureKeys,
   elementShouldCaptureKeys,
+  getGlobalDocument,
+  getGlobalWindow,
   loopToHtmlElement,
   preventDefault,
   releasePointerCapture,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/lib/utils/dom.ts"],
-  "sourcesContent": ["/*\nThis is used to facilitate double clicking and pointer capture on elements.\n\nThe events in this file are possibly set on individual SVG elements, \nsuch as handles or corner handles, rather than on HTML elements or \nSVGSVGElements. Raw SVG elements do not support pointerCapture in\nmost cases, meaning that in order for pointer capture to work, we \nneed to crawl up the DOM tree to find the nearest HTML element. Then,\nin order for that element to also call the `onPointerUp` event from\nthis file, we need to manually set that event on that element and\nlater remove it when the pointerup occurs. This is a potential leak\nif the user clicks on a handle but the pointerup does not fire for\nwhatever reason.\n*/\n\nimport { debugFlags, pointerCaptureTrackingObject } from './debug-flags'\n\n/** @public */\nexport function loopToHtmlElement(elm: Element): HTMLElement {\n\tif (elm.nodeType === Node.ELEMENT_NODE) return elm as HTMLElement\n\tif (elm.parentElement) return loopToHtmlElement(elm.parentElement)\n\telse throw Error('Could not find a parent element of an HTML type!')\n}\n\n/**\n * This function calls `event.preventDefault()` for you. Why is that useful?\n *\n * Because if you enable `window.preventDefaultLogging = true` it'll log out a message when it\n * happens. Because we use console.warn rather than (log) you'll get a stack trace in the inspector\n * telling you exactly where it happened. This is important because `e.preventDefault()` is the\n * source of many bugs, but unfortunately it can't be avoided because it also stops a lot of default\n * behaviour which doesn't make sense in our UI\n *\n * @param event - To prevent default on\n * @public\n */\nexport function preventDefault(event: React.BaseSyntheticEvent | Event) {\n\tevent.preventDefault()\n\tif (debugFlags.logPreventDefaults.get()) {\n\t\tconsole.warn('preventDefault called on event:', event)\n\t}\n}\n\n/** @public */\nexport function setPointerCapture(\n\telement: Element,\n\tevent: React.PointerEvent<Element> | PointerEvent\n) {\n\telement.setPointerCapture(event.pointerId)\n\tif (debugFlags.logPointerCaptures.get()) {\n\t\tconst trackingObj = pointerCaptureTrackingObject.get()\n\t\ttrackingObj.set(element, (trackingObj.get(element) ?? 0) + 1)\n\t\tconsole.warn('setPointerCapture called on element:', element, event)\n\t}\n}\n\n/** @public */\nexport function releasePointerCapture(\n\telement: Element,\n\tevent: React.PointerEvent<Element> | PointerEvent\n) {\n\tif (!element.hasPointerCapture(event.pointerId)) {\n\t\treturn\n\t}\n\n\telement.releasePointerCapture(event.pointerId)\n\tif (debugFlags.logPointerCaptures.get()) {\n\t\tconst trackingObj = pointerCaptureTrackingObject.get()\n\t\tif (trackingObj.get(element) === 1) {\n\t\t\ttrackingObj.delete(element)\n\t\t} else if (trackingObj.has(element)) {\n\t\t\ttrackingObj.set(element, trackingObj.get(element)! - 1)\n\t\t} else {\n\t\t\tconsole.warn('Release without capture')\n\t\t}\n\t\tconsole.warn('releasePointerCapture called on element:', element, event)\n\t}\n}\n\n/**\n * Calls `event.stopPropagation()`.\n *\n * @deprecated Use {@link Editor.markEventAsHandled} instead, or manually call `event.stopPropagation()` if\n * that's what you really want.\n *\n * @public\n */\nexport const stopEventPropagation = (e: any) => e.stopPropagation()\n\n/** @internal */\nexport const setStyleProperty = (\n\telm: HTMLElement | null,\n\tproperty: string,\n\tvalue: string | number\n) => {\n\tif (!elm) return\n\telm.style.setProperty(property, String(value))\n}\n\n/** @internal */\nexport function elementShouldCaptureKeys(el: Element | null, includeButtonsAndMenus = true) {\n\tif (!el) return false\n\n\tconst tagName = el.tagName.toLowerCase()\n\treturn (\n\t\t(el as HTMLElement).isContentEditable ||\n\t\ttagName === 'input' ||\n\t\ttagName === 'textarea' ||\n\t\t(includeButtonsAndMenus && tagName === 'select') ||\n\t\t(includeButtonsAndMenus && tagName === 'button') ||\n\t\tel.classList.contains('tlui-slider__thumb')\n\t)\n}\n\n/** @internal */\nexport function activeElementShouldCaptureKeys(includeButtonsAndMenus = true) {\n\treturn elementShouldCaptureKeys(document.activeElement, includeButtonsAndMenus)\n}\n"],
-  "mappings": "AAeA,SAAS,YAAY,oCAAoC;AAGlD,SAAS,kBAAkB,KAA2B;AAC5D,MAAI,IAAI,aAAa,KAAK,aAAc,QAAO;AAC/C,MAAI,IAAI,cAAe,QAAO,kBAAkB,IAAI,aAAa;AAAA,MAC5D,OAAM,MAAM,kDAAkD;AACpE;AAcO,SAAS,eAAe,OAAyC;AACvE,QAAM,eAAe;AACrB,MAAI,WAAW,mBAAmB,IAAI,GAAG;AACxC,YAAQ,KAAK,mCAAmC,KAAK;AAAA,EACtD;AACD;AAGO,SAAS,kBACf,SACA,OACC;AACD,UAAQ,kBAAkB,MAAM,SAAS;AACzC,MAAI,WAAW,mBAAmB,IAAI,GAAG;AACxC,UAAM,cAAc,6BAA6B,IAAI;AACrD,gBAAY,IAAI,UAAU,YAAY,IAAI,OAAO,KAAK,KAAK,CAAC;AAC5D,YAAQ,KAAK,wCAAwC,SAAS,KAAK;AAAA,EACpE;AACD;AAGO,SAAS,sBACf,SACA,OACC;AACD,MAAI,CAAC,QAAQ,kBAAkB,MAAM,SAAS,GAAG;AAChD;AAAA,EACD;AAEA,UAAQ,sBAAsB,MAAM,SAAS;AAC7C,MAAI,WAAW,mBAAmB,IAAI,GAAG;AACxC,UAAM,cAAc,6BAA6B,IAAI;AACrD,QAAI,YAAY,IAAI,OAAO,MAAM,GAAG;AACnC,kBAAY,OAAO,OAAO;AAAA,IAC3B,WAAW,YAAY,IAAI,OAAO,GAAG;AACpC,kBAAY,IAAI,SAAS,YAAY,IAAI,OAAO,IAAK,CAAC;AAAA,IACvD,OAAO;AACN,cAAQ,KAAK,yBAAyB;AAAA,IACvC;AACA,YAAQ,KAAK,4CAA4C,SAAS,KAAK;AAAA,EACxE;AACD;AAUO,MAAM,uBAAuB,CAAC,MAAW,EAAE,gBAAgB;AAG3D,MAAM,mBAAmB,CAC/B,KACA,UACA,UACI;AACJ,MAAI,CAAC,IAAK;AACV,MAAI,MAAM,YAAY,UAAU,OAAO,KAAK,CAAC;AAC9C;AAGO,SAAS,yBAAyB,IAAoB,yBAAyB,MAAM;AAC3F,MAAI,CAAC,GAAI,QAAO;AAEhB,QAAM,UAAU,GAAG,QAAQ,YAAY;AACvC,SACE,GAAmB,qBACpB,YAAY,WACZ,YAAY,cACX,0BAA0B,YAAY,YACtC,0BAA0B,YAAY,YACvC,GAAG,UAAU,SAAS,oBAAoB;AAE5C;AAGO,SAAS,+BAA+B,yBAAyB,MAAM;AAC7E,SAAO,yBAAyB,SAAS,eAAe,sBAAsB;AAC/E;",
+  "sourcesContent": ["/*\nThis is used to facilitate double clicking and pointer capture on elements.\n\nThe events in this file are possibly set on individual SVG elements, \nsuch as handles or corner handles, rather than on HTML elements or \nSVGSVGElements. Raw SVG elements do not support pointerCapture in\nmost cases, meaning that in order for pointer capture to work, we \nneed to crawl up the DOM tree to find the nearest HTML element. Then,\nin order for that element to also call the `onPointerUp` event from\nthis file, we need to manually set that event on that element and\nlater remove it when the pointerup occurs. This is a potential leak\nif the user clicks on a handle but the pointerup does not fire for\nwhatever reason.\n*/\n\nimport { debugFlags, pointerCaptureTrackingObject } from './debug-flags'\n\n/** @public */\nexport function loopToHtmlElement(elm: Element): HTMLElement {\n\tif (elm.nodeType === Node.ELEMENT_NODE) return elm as HTMLElement\n\tif (elm.parentElement) return loopToHtmlElement(elm.parentElement)\n\telse throw Error('Could not find a parent element of an HTML type!')\n}\n\n/**\n * This function calls `event.preventDefault()` for you. Why is that useful?\n *\n * Because if you enable `window.preventDefaultLogging = true` it'll log out a message when it\n * happens. Because we use console.warn rather than (log) you'll get a stack trace in the inspector\n * telling you exactly where it happened. This is important because `e.preventDefault()` is the\n * source of many bugs, but unfortunately it can't be avoided because it also stops a lot of default\n * behaviour which doesn't make sense in our UI\n *\n * @param event - To prevent default on\n * @public\n */\nexport function preventDefault(event: React.BaseSyntheticEvent | Event) {\n\tevent.preventDefault()\n\tif (debugFlags.logPreventDefaults.get()) {\n\t\tconsole.warn('preventDefault called on event:', event)\n\t}\n}\n\n/** @public */\nexport function setPointerCapture(\n\telement: Element,\n\tevent: React.PointerEvent<Element> | PointerEvent\n) {\n\telement.setPointerCapture(event.pointerId)\n\tif (debugFlags.logPointerCaptures.get()) {\n\t\tconst trackingObj = pointerCaptureTrackingObject.get()\n\t\ttrackingObj.set(element, (trackingObj.get(element) ?? 0) + 1)\n\t\tconsole.warn('setPointerCapture called on element:', element, event)\n\t}\n}\n\n/** @public */\nexport function releasePointerCapture(\n\telement: Element,\n\tevent: React.PointerEvent<Element> | PointerEvent\n) {\n\tif (!element.hasPointerCapture(event.pointerId)) {\n\t\treturn\n\t}\n\n\telement.releasePointerCapture(event.pointerId)\n\tif (debugFlags.logPointerCaptures.get()) {\n\t\tconst trackingObj = pointerCaptureTrackingObject.get()\n\t\tif (trackingObj.get(element) === 1) {\n\t\t\ttrackingObj.delete(element)\n\t\t} else if (trackingObj.has(element)) {\n\t\t\ttrackingObj.set(element, trackingObj.get(element)! - 1)\n\t\t} else {\n\t\t\tconsole.warn('Release without capture')\n\t\t}\n\t\tconsole.warn('releasePointerCapture called on element:', element, event)\n\t}\n}\n\n/**\n * Calls `event.stopPropagation()`.\n *\n * @deprecated Use {@link Editor.markEventAsHandled} instead, or manually call `event.stopPropagation()` if\n * that's what you really want.\n *\n * @public\n */\nexport const stopEventPropagation = (e: any) => e.stopPropagation()\n\n/** @internal */\nexport const setStyleProperty = (\n\telm: HTMLElement | null,\n\tproperty: string,\n\tvalue: string | number\n) => {\n\tif (!elm) return\n\telm.style.setProperty(property, String(value))\n}\n\n/** @internal */\nexport function elementShouldCaptureKeys(el: Element | null, includeButtonsAndMenus = true) {\n\tif (!el) return false\n\n\tconst tagName = el.tagName.toLowerCase()\n\treturn (\n\t\t(el as HTMLElement).isContentEditable ||\n\t\ttagName === 'input' ||\n\t\ttagName === 'textarea' ||\n\t\t(includeButtonsAndMenus && tagName === 'select') ||\n\t\t(includeButtonsAndMenus && tagName === 'button') ||\n\t\tel.classList.contains('tlui-slider__thumb')\n\t)\n}\n\n/**\n * Returns the global `document`. Use this instead of bare `document` to satisfy lint rules.\n *\n * When you have a DOM node or editor instance, prefer the scoped versions instead:\n * - `getOwnerDocument(node)` \u2013 the document that owns a specific DOM node\n * - `editor.getContainerDocument()` \u2013 the document where the editor is mounted\n *\n * @internal\n */\nexport function getGlobalDocument(): Document {\n\t// eslint-disable-next-line no-restricted-globals\n\tif (typeof document !== 'undefined') return document\n\treturn globalThis.document\n}\n\n/**\n * Returns the global `window`. Use this instead of bare `window` to satisfy lint rules.\n *\n * When you have a DOM node or editor instance, prefer the scoped versions instead:\n * - `getOwnerWindow(node)` \u2013 the window that owns a specific DOM node\n * - `editor.getContainerWindow()` \u2013 the window where the editor is mounted\n *\n * @internal\n */\nexport function getGlobalWindow(): Window & typeof globalThis {\n\tif (typeof window !== 'undefined') return window as Window & typeof globalThis\n\treturn globalThis as Window & typeof globalThis\n}\n\n/** @internal */\nexport function activeElementShouldCaptureKeys(includeButtonsAndMenus = true, doc?: Document) {\n\treturn elementShouldCaptureKeys(\n\t\t(doc ?? getGlobalDocument()).activeElement,\n\t\tincludeButtonsAndMenus\n\t)\n}\n"],
+  "mappings": "AAeA,SAAS,YAAY,oCAAoC;AAGlD,SAAS,kBAAkB,KAA2B;AAC5D,MAAI,IAAI,aAAa,KAAK,aAAc,QAAO;AAC/C,MAAI,IAAI,cAAe,QAAO,kBAAkB,IAAI,aAAa;AAAA,MAC5D,OAAM,MAAM,kDAAkD;AACpE;AAcO,SAAS,eAAe,OAAyC;AACvE,QAAM,eAAe;AACrB,MAAI,WAAW,mBAAmB,IAAI,GAAG;AACxC,YAAQ,KAAK,mCAAmC,KAAK;AAAA,EACtD;AACD;AAGO,SAAS,kBACf,SACA,OACC;AACD,UAAQ,kBAAkB,MAAM,SAAS;AACzC,MAAI,WAAW,mBAAmB,IAAI,GAAG;AACxC,UAAM,cAAc,6BAA6B,IAAI;AACrD,gBAAY,IAAI,UAAU,YAAY,IAAI,OAAO,KAAK,KAAK,CAAC;AAC5D,YAAQ,KAAK,wCAAwC,SAAS,KAAK;AAAA,EACpE;AACD;AAGO,SAAS,sBACf,SACA,OACC;AACD,MAAI,CAAC,QAAQ,kBAAkB,MAAM,SAAS,GAAG;AAChD;AAAA,EACD;AAEA,UAAQ,sBAAsB,MAAM,SAAS;AAC7C,MAAI,WAAW,mBAAmB,IAAI,GAAG;AACxC,UAAM,cAAc,6BAA6B,IAAI;AACrD,QAAI,YAAY,IAAI,OAAO,MAAM,GAAG;AACnC,kBAAY,OAAO,OAAO;AAAA,IAC3B,WAAW,YAAY,IAAI,OAAO,GAAG;AACpC,kBAAY,IAAI,SAAS,YAAY,IAAI,OAAO,IAAK,CAAC;AAAA,IACvD,OAAO;AACN,cAAQ,KAAK,yBAAyB;AAAA,IACvC;AACA,YAAQ,KAAK,4CAA4C,SAAS,KAAK;AAAA,EACxE;AACD;AAUO,MAAM,uBAAuB,CAAC,MAAW,EAAE,gBAAgB;AAG3D,MAAM,mBAAmB,CAC/B,KACA,UACA,UACI;AACJ,MAAI,CAAC,IAAK;AACV,MAAI,MAAM,YAAY,UAAU,OAAO,KAAK,CAAC;AAC9C;AAGO,SAAS,yBAAyB,IAAoB,yBAAyB,MAAM;AAC3F,MAAI,CAAC,GAAI,QAAO;AAEhB,QAAM,UAAU,GAAG,QAAQ,YAAY;AACvC,SACE,GAAmB,qBACpB,YAAY,WACZ,YAAY,cACX,0BAA0B,YAAY,YACtC,0BAA0B,YAAY,YACvC,GAAG,UAAU,SAAS,oBAAoB;AAE5C;AAWO,SAAS,oBAA8B;AAE7C,MAAI,OAAO,aAAa,YAAa,QAAO;AAC5C,SAAO,WAAW;AACnB;AAWO,SAAS,kBAA8C;AAC7D,MAAI,OAAO,WAAW,YAAa,QAAO;AAC1C,SAAO;AACR;AAGO,SAAS,+BAA+B,yBAAyB,MAAM,KAAgB;AAC7F,SAAO;AAAA,KACL,OAAO,kBAAkB,GAAG;AAAA,IAC7B;AAAA,EACD;AACD;",
   "names": []
 }

package/dist-esm/version.mjs

@@ -1,8 +1,8 @@
-const version = "4.5.3";
+const version = "4.6.0-canary.0bcbb3ed5bcb";
 const publishDates = {
   major: "2025-09-18T14:39:22.803Z",
-  minor: "2026-03-18T11:05:13.340Z",
-  patch: "2026-03-18T15:57:06.790Z"
+  minor: "2026-03-18T17:26:38.671Z",
+  patch: "2026-03-18T17:26:38.671Z"
 };
 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.5.3'\nexport const publishDates = {\n\tmajor: '2025-09-18T14:39:22.803Z',\n\tminor: '2026-03-18T11:05:13.340Z',\n\tpatch: '2026-03-18T15:57:06.790Z',\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.6.0-canary.0bcbb3ed5bcb'\nexport const publishDates = {\n\tmajor: '2025-09-18T14:39:22.803Z',\n\tminor: '2026-03-18T17:26:38.671Z',\n\tpatch: '2026-03-18T17:26:38.671Z',\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.5.3",
+  "version": "4.6.0-canary.0bcbb3ed5bcb",
   "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.5.3",
-    "@tldraw/state-react": "4.5.3",
-    "@tldraw/store": "4.5.3",
-    "@tldraw/tlschema": "4.5.3",
-    "@tldraw/utils": "4.5.3",
-    "@tldraw/validate": "4.5.3",
+    "@tldraw/state": "4.6.0-canary.0bcbb3ed5bcb",
+    "@tldraw/state-react": "4.6.0-canary.0bcbb3ed5bcb",
+    "@tldraw/store": "4.6.0-canary.0bcbb3ed5bcb",
+    "@tldraw/tlschema": "4.6.0-canary.0bcbb3ed5bcb",
+    "@tldraw/utils": "4.6.0-canary.0bcbb3ed5bcb",
+    "@tldraw/validate": "4.6.0-canary.0bcbb3ed5bcb",
     "@use-gesture/react": "^10.3.1",
     "classnames": "^2.5.1",
     "eventemitter3": "^4.0.7",

package/src/index.ts

@@ -282,6 +282,7 @@ export {
 	type SvgExportContext,
 	type SvgExportDef,
 } from './lib/editor/types/SvgExportContext'
+export { getOwnerDocument, getOwnerWindow } from './lib/exports/domUtils'
 export { getSvgAsImage } from './lib/exports/getSvgAsImage'
 export { tlenv, tlenvReactive } from './lib/globals/environment'
 export { tlmenus } from './lib/globals/menus'
@@ -448,6 +449,8 @@ export {
 export {
 	activeElementShouldCaptureKeys,
 	elementShouldCaptureKeys,
+	getGlobalDocument,
+	getGlobalWindow,
 	loopToHtmlElement,
 	preventDefault,
 	releasePointerCapture,

package/src/lib/TldrawEditor.tsx

@@ -42,6 +42,7 @@ import { LicenseProvider } from './license/LicenseProvider'
 import { Watermark } from './license/Watermark'
 import { TldrawOptions } from './options'
 import { TLDeepLinkOptions } from './utils/deepLinks'
+import { getGlobalDocument } from './utils/dom'
 import { TLTextOptions } from './utils/richText'
 import { TLStoreWithStatus } from './utils/sync/StoreWithStatus'
 
@@ -405,7 +406,7 @@ const TldrawEditorWithLoadingStore = memo(function TldrawEditorBeforeLoading({
 	return <TldrawEditorWithReadyStore {...rest} store={store.store} user={user} />
 })
 
-const noAutoFocus = () => document.location.search.includes('tldraw_preserve_focus') // || !document.hasFocus() // breaks in nextjs
+const noAutoFocus = () => getGlobalDocument().location.search.includes('tldraw_preserve_focus')
 
 function TldrawEditorWithReadyStore({
 	onMount,
@@ -572,12 +573,13 @@ function TldrawEditorWithReadyStore({
 			}
 
 			if (autoFocus && noAutoFocus()) {
-				editor.getContainer().addEventListener('pointerdown', handleFocusOnPointerDown)
-				document.body.addEventListener('pointerdown', handleBlurOnPointerDown)
+				const container = editor.getContainer()
+				container.addEventListener('pointerdown', handleFocusOnPointerDown)
+				container.ownerDocument.body.addEventListener('pointerdown', handleBlurOnPointerDown)
 
 				return () => {
-					editor.getContainer()?.removeEventListener('pointerdown', handleFocusOnPointerDown)
-					document.body.removeEventListener('pointerdown', handleBlurOnPointerDown)
+					container.removeEventListener('pointerdown', handleFocusOnPointerDown)
+					container.ownerDocument.body.removeEventListener('pointerdown', handleBlurOnPointerDown)
 				}
 			}
 		},

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

@@ -5,6 +5,7 @@ import { dedupe } from '@tldraw/utils'
 import { memo, useEffect, useRef } from 'react'
 import { Editor } from '../../editor/Editor'
 import { TLIndicatorPath } from '../../editor/shapes/ShapeUtil'
+import { getComputedStyle } from '../../exports/domUtils'
 import { useEditor } from '../../hooks/useEditor'
 import { useIsDarkMode } from '../../hooks/useIsDarkMode'
 import { useActivePeerIds$ } from '../../hooks/usePeerIds'
@@ -223,7 +224,7 @@ export const CanvasShapeIndicators = memo(function CanvasShapeIndicators() {
 				$renderData.get()
 
 			const { w, h } = editor.getViewportScreenBounds()
-			const dpr = window.devicePixelRatio || 1
+			const dpr = editor.getInstanceState().devicePixelRatio
 			const { x: cx, y: cy, z: zoom } = editor.getCamera()
 
 			const canvasWidth = Math.ceil(w * dpr)

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

@@ -427,7 +427,7 @@ function ReflowIfNeeded() {
 			if (culledShapesRef.current === culledShapes) return
 
 			culledShapesRef.current = culledShapes
-			const canvas = document.getElementsByClassName('tl-canvas')
+			const canvas = editor.getContainerDocument().getElementsByClassName('tl-canvas')
 			if (canvas.length === 0) return
 			// This causes a reflow
 			// https://gist.github.com/paulirish/5d52fb081b3570c81e3a

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

@@ -3,8 +3,10 @@ import { noop } from '@tldraw/utils'
 import classNames from 'classnames'
 import { ComponentType, useEffect, useLayoutEffect, useRef, useState } from 'react'
 import { Editor } from '../../editor/Editor'
+import { getOwnerDocument } from '../../exports/domUtils'
 import { useEditorComponents } from '../../hooks/EditorComponentsContext'
 import { EditorProvider } from '../../hooks/useEditor'
+import { getGlobalWindow } from '../../utils/dom'
 import { hardResetEditor, refreshPage } from '../../utils/runtime'
 import { ErrorBoundary } from '../ErrorBoundary'
 
@@ -74,8 +76,8 @@ export const DefaultErrorFallback: TLErrorFallbackComponent = ({ error, editor }
 
 		// if we can't find a theme class from the app or from a parent, we have
 		// to fall back on using a media query:
-		if (typeof window !== 'undefined' && window.matchMedia) {
-			setIsDarkMode(window.matchMedia('(prefers-color-scheme: dark)').matches)
+		if (typeof window !== 'undefined' && getGlobalWindow().matchMedia) {
+			setIsDarkMode(getGlobalWindow().matchMedia('(prefers-color-scheme: dark)').matches)
 		}
 	}, [isDarkModeFromApp])
 
@@ -89,12 +91,13 @@ export const DefaultErrorFallback: TLErrorFallbackComponent = ({ error, editor }
 	}, [didCopy, editor])
 
 	const copyError = () => {
-		const textarea = document.createElement('textarea')
+		const doc = getOwnerDocument(containerRef.current)
+		const textarea = doc.createElement('textarea')
 		textarea.value = errorStack ?? errorMessage
-		document.body.appendChild(textarea)
+		doc.body.appendChild(textarea)
 		textarea.select()
 		// eslint-disable-next-line @typescript-eslint/no-deprecated
-		document.execCommand('copy')
+		doc.execCommand('copy')
 		textarea.remove()
 		setDidCopy(true)
 	}

package/src/lib/config/TLSessionStateSnapshot.ts

@@ -21,6 +21,7 @@ import {
 } from '@tldraw/utils'
 import { T } from '@tldraw/validate'
 import { tlenv } from '../globals/environment'
+import { getGlobalDocument, getGlobalWindow } from '../utils/dom'
 
 const tabIdKey = 'TLDRAW_TAB_ID_v2' as const
 
@@ -38,10 +39,10 @@ function iOS() {
 	return (
 		['iPad Simulator', 'iPhone Simulator', 'iPod Simulator', 'iPad', 'iPhone', 'iPod'].includes(
 			// eslint-disable-next-line @typescript-eslint/no-deprecated
-			window.navigator.platform
+			getGlobalWindow().navigator.platform
 		) ||
 		// iPad on iOS 13 detection
-		(tlenv.isDarwin && 'ontouchend' in document)
+		(tlenv.isDarwin && 'ontouchend' in getGlobalDocument())
 	)
 }
 
@@ -69,9 +70,11 @@ if (window) {
 	}
 }
 
-window?.addEventListener('beforeunload', () => {
-	setInSessionStorage(tabIdKey, TAB_ID)
-})
+if (typeof window !== 'undefined') {
+	getGlobalWindow().addEventListener('beforeunload', () => {
+		setInSessionStorage(tabIdKey, TAB_ID)
+	})
+}
 
 const Versions = {
 	Initial: 0,

package/src/lib/config/TLUserPreferences.ts

@@ -2,6 +2,7 @@ import { atom } from '@tldraw/state'
 import { getDefaultTranslationLocale } from '@tldraw/tlschema'
 import { getFromLocalStorage, setInLocalStorage, structuredClone, uniqueId } from '@tldraw/utils'
 import { T } from '@tldraw/validate'
+import { getGlobalWindow } from '../utils/dom'
 
 const USER_DATA_KEY = 'TLDRAW_USER_DATA_v3'
 
@@ -154,8 +155,8 @@ function getRandomColor() {
 
 /** @internal */
 export function userPrefersReducedMotion() {
-	if (typeof window !== 'undefined' && window.matchMedia) {
-		return window.matchMedia?.('(prefers-reduced-motion: reduce)')?.matches ?? false
+	if (typeof window !== 'undefined' && getGlobalWindow().matchMedia) {
+		return getGlobalWindow().matchMedia?.('(prefers-reduced-motion: reduce)')?.matches ?? false
 	}
 
 	return false

package/src/lib/config/createTLStore.ts

@@ -1,6 +1,7 @@
 import { Signal } from '@tldraw/state'
 import { HistoryEntry, MigrationSequence, SerializedStore, Store, StoreSchema } from '@tldraw/store'
 import {
+	CustomRecordInfo,
 	SchemaPropsInfo,
 	TLAssetStore,
 	TLRecord,
@@ -42,6 +43,7 @@ export type TLStoreSchemaOptions =
 			shapeUtils?: readonly TLAnyShapeUtilConstructor[]
 			migrations?: readonly MigrationSequence[]
 			bindingUtils?: readonly TLAnyBindingUtilConstructor[]
+			records?: Record<string, CustomRecordInfo>
 	  }
 
 /** @public */
@@ -88,6 +90,7 @@ export function createTLSchemaFromUtils(
 			'bindingUtils' in opts && opts.bindingUtils
 				? utilsToMap(checkBindings(opts.bindingUtils))
 				: undefined,
+		records: 'records' in opts ? opts.records : undefined,
 		migrations: 'migrations' in opts ? opts.migrations : undefined,
 	})
 }

package/src/lib/editor/Editor.ts

@@ -108,8 +108,9 @@ import {
 	RIGHT_MOUSE_BUTTON,
 	STYLUS_ERASER_BUTTON,
 } from '../constants'
+import { getOwnerWindow } from '../exports/domUtils'
 import { exportToSvg } from '../exports/exportToSvg'
-import { getSvgAsImage } from '../exports/getSvgAsImage'
+import { getSvgAsImageWithOptions, trimSvgToContent } from '../exports/getSvgAsImage'
 import { tlmenus } from '../globals/menus'
 import { tltime } from '../globals/time'
 import { TldrawOptions, defaultTldrawOptions } from '../options'
@@ -999,6 +1000,26 @@ export class Editor extends EventEmitter<TLEventMap> {
 	 */
 	getContainer: () => HTMLElement
 
+	/**
+	 * The document that the editor's container element belongs to.
+	 * Use this instead of the global `document` to support cross-window embedding.
+	 *
+	 * @internal
+	 */
+	getContainerDocument(): Document {
+		return this.getContainer().ownerDocument
+	}
+
+	/**
+	 * The window that the editor's container element belongs to.
+	 * Use this instead of the global `window` to support cross-window embedding.
+	 *
+	 * @internal
+	 */
+	getContainerWindow(): Window & typeof globalThis {
+		return getOwnerWindow(this.getContainer())
+	}
+
 	/**
 	 * Dispose the editor.
 	 *
@@ -3774,13 +3795,14 @@ export class Editor extends EventEmitter<TLEventMap> {
 			screenBounds.height = Math.max(screenBounds.height, 1)
 		}
 
+		const doc = this.getContainerDocument()
 		const insets = [
 			// top
 			screenBounds.minY !== 0,
 			// right
-			!approximately(document.body.scrollWidth, screenBounds.maxX, 1),
+			!approximately(doc.body.scrollWidth, screenBounds.maxX, 1),
 			// bottom
-			!approximately(document.body.scrollHeight, screenBounds.maxY, 1),
+			!approximately(doc.body.scrollHeight, screenBounds.maxY, 1),
 			// left
 			screenBounds.minX !== 0,
 		]
@@ -9593,6 +9615,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 			svg: serializer.serializeToString(result.svg),
 			width: result.width,
 			height: result.height,
+			trimPadding: result.trimPadding,
 		}
 	}
 
@@ -9616,30 +9639,45 @@ export class Editor extends EventEmitter<TLEventMap> {
 		if (!result) throw new Error('Could not create SVG')
 
 		switch (withDefaults.format) {
-			case 'svg':
+			case 'svg': {
+				let svg = result.svg
+				let w = result.width
+				let h = result.height
+				if (result.trimPadding > 0) {
+					const trimmed = await trimSvgToContent(svg, {
+						width: w,
+						height: h,
+						trimPadding: result.trimPadding,
+						scale: withDefaults.scale,
+					})
+					if (trimmed) {
+						svg = trimmed.svg
+						w = trimmed.width
+						h = trimmed.height
+					}
+				}
 				return {
-					blob: new Blob([result.svg], { type: 'image/svg+xml' }),
-					width: result.width,
-					height: result.height,
+					blob: new Blob([svg], { type: 'image/svg+xml' }),
+					width: w,
+					height: h,
 				}
+			}
 			case 'jpeg':
 			case 'png':
 			case 'webp': {
-				const blob = await getSvgAsImage(result.svg, {
+				const imageResult = await getSvgAsImageWithOptions(result.svg, {
 					type: withDefaults.format,
 					quality: withDefaults.quality,
 					pixelRatio: withDefaults.pixelRatio,
 					width: result.width,
 					height: result.height,
+					trimPadding: result.trimPadding,
+					scale: withDefaults.scale,
 				})
-				if (!blob) {
+				if (!imageResult) {
 					throw new Error('Could not construct image.')
 				}
-				return {
-					blob,
-					width: result.width,
-					height: result.height,
-				}
+				return imageResult
 			}
 			default: {
 				exhaustiveSwitchError(withDefaults.format)
@@ -10078,7 +10116,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 					to: opts?.getTarget?.(this),
 				})
 
-				window.history.replaceState({}, document.title, url.toString())
+				window.history.replaceState({}, this.getContainerDocument().title, url.toString())
 			})
 
 		const scheduleEffect = debounce((execute: () => void) => execute(), opts?.debounceMs ?? 500)

package/src/lib/editor/managers/FocusManager/FocusManager.test.ts

@@ -36,6 +36,12 @@ describe('FocusManager', () => {
 		// Create mock dispose function
 		mockDispose = vi.fn()
 
+		// Mock document.body event listeners
+		originalAddEventListener = document.body.addEventListener
+		originalRemoveEventListener = document.body.removeEventListener
+		document.body.addEventListener = vi.fn()
+		document.body.removeEventListener = vi.fn()
+
 		// Mock editor
 		editor = {
 			sideEffects: {
@@ -44,16 +50,11 @@ describe('FocusManager', () => {
 			getInstanceState: vi.fn(() => ({ isFocused: false })),
 			updateInstanceState: vi.fn(),
 			getContainer: vi.fn(() => mockContainer),
+			getContainerDocument: vi.fn(() => document),
 			isIn: vi.fn(() => false),
 			getSelectedShapeIds: vi.fn(() => []),
 			complete: vi.fn(),
 		} as any
-
-		// Mock document.body event listeners
-		originalAddEventListener = document.body.addEventListener
-		originalRemoveEventListener = document.body.removeEventListener
-		document.body.addEventListener = vi.fn()
-		document.body.removeEventListener = vi.fn()
 	})
 
 	afterEach(() => {

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

@@ -1,3 +1,4 @@
+import { bind } from '@tldraw/utils'
 import type { Editor } from '../../Editor'
 
 /**
@@ -31,8 +32,9 @@ export class FocusManager {
 		}
 		this.updateContainerClass()
 
-		document.body.addEventListener('keydown', this.handleKeyDown.bind(this))
-		document.body.addEventListener('mousedown', this.handleMouseDown.bind(this))
+		const body = editor.getContainerDocument().body
+		body.addEventListener('keydown', this.handleKeyDown)
+		body.addEventListener('mousedown', this.handleMouseDown)
 	}
 
 	/**
@@ -56,9 +58,9 @@ export class FocusManager {
 		container.classList.add('tl-container__no-focus-ring')
 	}
 
-	private handleKeyDown(keyEvent: KeyboardEvent) {
+	@bind private handleKeyDown(keyEvent: KeyboardEvent) {
 		const container = this.editor.getContainer()
-		const activeEl = document.activeElement
+		const activeEl = container.ownerDocument.activeElement
 		// Edit mode should remove the focus ring, however if the active element's
 		// parent is the contextual toolbar, then allow it.
 		if (this.editor.isIn('select.editing_shape') && !activeEl?.closest('.tlui-contextual-toolbar'))
@@ -69,7 +71,7 @@ export class FocusManager {
 		}
 	}
 
-	private handleMouseDown() {
+	@bind private handleMouseDown() {
 		const container = this.editor.getContainer()
 		container.classList.add('tl-container__no-focus-ring')
 	}
@@ -84,8 +86,9 @@ export class FocusManager {
 	}
 
 	dispose() {
-		document.body.removeEventListener('keydown', this.handleKeyDown.bind(this))
-		document.body.removeEventListener('mousedown', this.handleMouseDown.bind(this))
+		const body = this.editor.getContainerDocument().body
+		body.removeEventListener('keydown', this.handleKeyDown)
+		body.removeEventListener('mousedown', this.handleMouseDown)
 		this.disposeSideEffectListener?.()
 	}
 }

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

@@ -85,6 +85,7 @@ describe('FontManager', () => {
 			getShapeUtil: vi.fn(() => mockShapeUtil),
 			getCurrentPageShapeIds: vi.fn(() => new Set()),
 			getShape: vi.fn(),
+			getContainerDocument: vi.fn(() => document),
 			isDisposed: false,
 		} as any
 

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

@@ -160,7 +160,7 @@ export class FontManager {
 			loadingPromise: instance
 				.load()
 				.then(() => {
-					document.fonts.add(instance)
+					this.editor.getContainerDocument().fonts.add(instance)
 					this.fontStates.update(font, (s) => ({ ...s, state: 'ready' }))
 				})
 				.catch((err) => {
@@ -193,7 +193,8 @@ export class FontManager {
 	}
 
 	private findOrCreateFontFace(font: TLFontFace) {
-		for (const existing of document.fonts) {
+		const fonts = this.editor.getContainerDocument().fonts
+		for (const existing of fonts) {
 			if (
 				existing.family === font.family &&
 				objectMapEntries(defaultFontFaceDescriptors).every(
@@ -210,7 +211,7 @@ export class FontManager {
 			display: 'swap',
 		})
 
-		document.fonts.add(instance)
+		fonts.add(instance)
 
 		return instance
 	}

package/src/lib/editor/managers/HistoryManager/HistoryManager.test.ts

@@ -736,6 +736,22 @@ describe('HistoryManager error scenarios and edge cases', () => {
 			expect(store.get(ids.a)!.value).toBe(originalValue)
 		})
 
+		it('should preserve pending diff when mark is not found', () => {
+			manager._mark('real-mark')
+			store.update(ids.a, (s) => ({ ...s, value: 1 }))
+
+			// bail to a mark that doesn't exist
+			manager.bailToMark('non-existent-mark')
+
+			// the pending diff should still be intact
+			expect(store.get(ids.a)!.value).toBe(1)
+			expect(manager.getNumUndos()).toBeGreaterThan(0)
+
+			// a subsequent bail to the real mark should still work
+			manager.bailToMark('real-mark')
+			expect(store.get(ids.a)!.value).toBe(0)
+		})
+
 		it('should find mark correctly when it exists', () => {
 			manager._mark('existing-mark')
 			store.update(ids.a, (s) => ({ ...s, value: 1 }))