@tldraw/editor 3.9.0 → 3.10.0-canary.3176429f9d1b

package/dist-esm/lib/options.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/lib/options.ts"],
-  "sourcesContent": ["import { ComponentType, Fragment } from 'react'\n\n/**\n * Options for configuring tldraw. For defaults, see {@link defaultTldrawOptions}.\n *\n * @example\n * ```tsx\n * const options: Partial<TldrawOptions> = {\n *     maxPages: 3,\n *     maxShapesPerPage: 1000,\n * }\n *\n * function MyTldrawComponent() {\n *     return <Tldraw options={options} />\n * }\n * ```\n *\n * @public\n */\nexport interface TldrawOptions {\n\treadonly maxShapesPerPage: number\n\treadonly maxFilesAtOnce: number\n\treadonly maxPages: number\n\treadonly animationMediumMs: number\n\treadonly followChaseViewportSnap: number\n\treadonly doubleClickDurationMs: number\n\treadonly multiClickDurationMs: number\n\treadonly coarseDragDistanceSquared: number\n\treadonly dragDistanceSquared: number\n\treadonly defaultSvgPadding: number\n\treadonly cameraSlideFriction: number\n\treadonly gridSteps: readonly {\n\t\treadonly min: number\n\t\treadonly mid: number\n\t\treadonly step: number\n\t}[]\n\treadonly collaboratorInactiveTimeoutMs: number\n\treadonly collaboratorIdleTimeoutMs: number\n\treadonly collaboratorCheckIntervalMs: number\n\treadonly cameraMovingTimeoutMs: number\n\treadonly hitTestMargin: number\n\treadonly edgeScrollDelay: number\n\treadonly edgeScrollEaseDuration: number\n\treadonly edgeScrollSpeed: number\n\treadonly edgeScrollDistance: number\n\treadonly coarsePointerWidth: number\n\treadonly coarseHandleRadius: number\n\treadonly handleRadius: number\n\treadonly longPressDurationMs: number\n\treadonly textShadowLod: number\n\treadonly adjacentShapeMargin: number\n\treadonly flattenImageBoundsExpand: number\n\treadonly flattenImageBoundsPadding: number\n\treadonly laserDelayMs: number\n\treadonly maxExportDelayMs: number\n\t/**\n\t * How long should previews created by {@link Editor.createTemporaryAssetPreview} last before\n\t * they expire? Defaults to 3 minutes.\n\t */\n\treadonly temporaryAssetPreviewLifetimeMs: number\n\treadonly actionShortcutsLocation: 'menu' | 'toolbar' | 'swap'\n\treadonly createTextOnCanvasDoubleClick: boolean\n\t/**\n\t * The react provider to use when exporting an image. This is useful if your shapes depend on\n\t * external context providers. By default, this is `React.Fragment`.\n\t */\n\treadonly exportProvider: ComponentType<{ children: React.ReactNode }>\n\t/**\n\t * By default, the toolbar items are accessible via number shortcuts according to their order. To disable this, set this option to false.\n\t */\n\treadonly enableToolbarKeyboardShortcuts: boolean\n}\n\n/** @public */\nexport const defaultTldrawOptions = {\n\tmaxShapesPerPage: 4000,\n\tmaxFilesAtOnce: 100,\n\tmaxPages: 40,\n\tanimationMediumMs: 320,\n\tfollowChaseViewportSnap: 2,\n\tdoubleClickDurationMs: 450,\n\tmultiClickDurationMs: 200,\n\tcoarseDragDistanceSquared: 36, // 6 squared\n\tdragDistanceSquared: 16, // 4 squared\n\tdefaultSvgPadding: 32,\n\tcameraSlideFriction: 0.09,\n\tgridSteps: [\n\t\t{ min: -1, mid: 0.15, step: 64 },\n\t\t{ min: 0.05, mid: 0.375, step: 16 },\n\t\t{ min: 0.15, mid: 1, step: 4 },\n\t\t{ min: 0.7, mid: 2.5, step: 1 },\n\t],\n\tcollaboratorInactiveTimeoutMs: 60000,\n\tcollaboratorIdleTimeoutMs: 3000,\n\tcollaboratorCheckIntervalMs: 1200,\n\tcameraMovingTimeoutMs: 64,\n\thitTestMargin: 8,\n\tedgeScrollDelay: 200,\n\tedgeScrollEaseDuration: 200,\n\tedgeScrollSpeed: 25,\n\tedgeScrollDistance: 8,\n\tcoarsePointerWidth: 12,\n\tcoarseHandleRadius: 20,\n\thandleRadius: 12,\n\tlongPressDurationMs: 500,\n\ttextShadowLod: 0.35,\n\tadjacentShapeMargin: 10,\n\tflattenImageBoundsExpand: 64,\n\tflattenImageBoundsPadding: 16,\n\tlaserDelayMs: 1200,\n\tmaxExportDelayMs: 5000,\n\ttemporaryAssetPreviewLifetimeMs: 180000,\n\tactionShortcutsLocation: 'swap',\n\tcreateTextOnCanvasDoubleClick: true,\n\texportProvider: Fragment,\n\tenableToolbarKeyboardShortcuts: true,\n} as const satisfies TldrawOptions\n"],
-  "mappings": "AAAA,SAAwB,gBAAgB;AA0EjC,MAAM,uBAAuB;AAAA,EACnC,kBAAkB;AAAA,EAClB,gBAAgB;AAAA,EAChB,UAAU;AAAA,EACV,mBAAmB;AAAA,EACnB,yBAAyB;AAAA,EACzB,uBAAuB;AAAA,EACvB,sBAAsB;AAAA,EACtB,2BAA2B;AAAA;AAAA,EAC3B,qBAAqB;AAAA;AAAA,EACrB,mBAAmB;AAAA,EACnB,qBAAqB;AAAA,EACrB,WAAW;AAAA,IACV,EAAE,KAAK,IAAI,KAAK,MAAM,MAAM,GAAG;AAAA,IAC/B,EAAE,KAAK,MAAM,KAAK,OAAO,MAAM,GAAG;AAAA,IAClC,EAAE,KAAK,MAAM,KAAK,GAAG,MAAM,EAAE;AAAA,IAC7B,EAAE,KAAK,KAAK,KAAK,KAAK,MAAM,EAAE;AAAA,EAC/B;AAAA,EACA,+BAA+B;AAAA,EAC/B,2BAA2B;AAAA,EAC3B,6BAA6B;AAAA,EAC7B,uBAAuB;AAAA,EACvB,eAAe;AAAA,EACf,iBAAiB;AAAA,EACjB,wBAAwB;AAAA,EACxB,iBAAiB;AAAA,EACjB,oBAAoB;AAAA,EACpB,oBAAoB;AAAA,EACpB,oBAAoB;AAAA,EACpB,cAAc;AAAA,EACd,qBAAqB;AAAA,EACrB,eAAe;AAAA,EACf,qBAAqB;AAAA,EACrB,0BAA0B;AAAA,EAC1B,2BAA2B;AAAA,EAC3B,cAAc;AAAA,EACd,kBAAkB;AAAA,EAClB,iCAAiC;AAAA,EACjC,yBAAyB;AAAA,EACzB,+BAA+B;AAAA,EAC/B,gBAAgB;AAAA,EAChB,gCAAgC;AACjC;",
+  "sourcesContent": ["import { ComponentType, Fragment } from 'react'\n\n/**\n * Options for configuring tldraw. For defaults, see {@link defaultTldrawOptions}.\n *\n * @example\n * ```tsx\n * const options: Partial<TldrawOptions> = {\n *     maxPages: 3,\n *     maxShapesPerPage: 1000,\n * }\n *\n * function MyTldrawComponent() {\n *     return <Tldraw options={options} />\n * }\n * ```\n *\n * @public\n */\nexport interface TldrawOptions {\n\treadonly maxShapesPerPage: number\n\treadonly maxFilesAtOnce: number\n\treadonly maxPages: number\n\treadonly animationMediumMs: number\n\treadonly followChaseViewportSnap: number\n\treadonly doubleClickDurationMs: number\n\treadonly multiClickDurationMs: number\n\treadonly coarseDragDistanceSquared: number\n\treadonly dragDistanceSquared: number\n\treadonly defaultSvgPadding: number\n\treadonly cameraSlideFriction: number\n\treadonly gridSteps: readonly {\n\t\treadonly min: number\n\t\treadonly mid: number\n\t\treadonly step: number\n\t}[]\n\treadonly collaboratorInactiveTimeoutMs: number\n\treadonly collaboratorIdleTimeoutMs: number\n\treadonly collaboratorCheckIntervalMs: number\n\treadonly cameraMovingTimeoutMs: number\n\treadonly hitTestMargin: number\n\treadonly edgeScrollDelay: number\n\treadonly edgeScrollEaseDuration: number\n\treadonly edgeScrollSpeed: number\n\treadonly edgeScrollDistance: number\n\treadonly coarsePointerWidth: number\n\treadonly coarseHandleRadius: number\n\treadonly handleRadius: number\n\treadonly longPressDurationMs: number\n\treadonly textShadowLod: number\n\treadonly adjacentShapeMargin: number\n\treadonly flattenImageBoundsExpand: number\n\treadonly flattenImageBoundsPadding: number\n\treadonly laserDelayMs: number\n\treadonly maxExportDelayMs: number\n\t/**\n\t * How long should previews created by {@link Editor.createTemporaryAssetPreview} last before\n\t * they expire? Defaults to 3 minutes.\n\t */\n\treadonly temporaryAssetPreviewLifetimeMs: number\n\treadonly actionShortcutsLocation: 'menu' | 'toolbar' | 'swap'\n\treadonly createTextOnCanvasDoubleClick: boolean\n\t/**\n\t * The react provider to use when exporting an image. This is useful if your shapes depend on\n\t * external context providers. By default, this is `React.Fragment`.\n\t */\n\treadonly exportProvider: ComponentType<{ children: React.ReactNode }>\n\t/**\n\t * By default, the toolbar items are accessible via number shortcuts according to their order. To disable this, set this option to false.\n\t */\n\treadonly enableToolbarKeyboardShortcuts: boolean\n\t/**\n\t * The maximum number of fonts that will be loaded while blocking the main rendering of the\n\t * canvas. If there are more than this number of fonts needed, we'll just show the canvas right\n\t * away and let the fonts load in in the background.\n\t */\n\treadonly maxFontsToLoadBeforeRender: number\n}\n\n/** @public */\nexport const defaultTldrawOptions = {\n\tmaxShapesPerPage: 4000,\n\tmaxFilesAtOnce: 100,\n\tmaxPages: 40,\n\tanimationMediumMs: 320,\n\tfollowChaseViewportSnap: 2,\n\tdoubleClickDurationMs: 450,\n\tmultiClickDurationMs: 200,\n\tcoarseDragDistanceSquared: 36, // 6 squared\n\tdragDistanceSquared: 16, // 4 squared\n\tdefaultSvgPadding: 32,\n\tcameraSlideFriction: 0.09,\n\tgridSteps: [\n\t\t{ min: -1, mid: 0.15, step: 64 },\n\t\t{ min: 0.05, mid: 0.375, step: 16 },\n\t\t{ min: 0.15, mid: 1, step: 4 },\n\t\t{ min: 0.7, mid: 2.5, step: 1 },\n\t],\n\tcollaboratorInactiveTimeoutMs: 60000,\n\tcollaboratorIdleTimeoutMs: 3000,\n\tcollaboratorCheckIntervalMs: 1200,\n\tcameraMovingTimeoutMs: 64,\n\thitTestMargin: 8,\n\tedgeScrollDelay: 200,\n\tedgeScrollEaseDuration: 200,\n\tedgeScrollSpeed: 25,\n\tedgeScrollDistance: 8,\n\tcoarsePointerWidth: 12,\n\tcoarseHandleRadius: 20,\n\thandleRadius: 12,\n\tlongPressDurationMs: 500,\n\ttextShadowLod: 0.35,\n\tadjacentShapeMargin: 10,\n\tflattenImageBoundsExpand: 64,\n\tflattenImageBoundsPadding: 16,\n\tlaserDelayMs: 1200,\n\tmaxExportDelayMs: 5000,\n\ttemporaryAssetPreviewLifetimeMs: 180000,\n\tactionShortcutsLocation: 'swap',\n\tcreateTextOnCanvasDoubleClick: true,\n\texportProvider: Fragment,\n\tenableToolbarKeyboardShortcuts: true,\n\tmaxFontsToLoadBeforeRender: Infinity,\n} as const satisfies TldrawOptions\n"],
+  "mappings": "AAAA,SAAwB,gBAAgB;AAgFjC,MAAM,uBAAuB;AAAA,EACnC,kBAAkB;AAAA,EAClB,gBAAgB;AAAA,EAChB,UAAU;AAAA,EACV,mBAAmB;AAAA,EACnB,yBAAyB;AAAA,EACzB,uBAAuB;AAAA,EACvB,sBAAsB;AAAA,EACtB,2BAA2B;AAAA;AAAA,EAC3B,qBAAqB;AAAA;AAAA,EACrB,mBAAmB;AAAA,EACnB,qBAAqB;AAAA,EACrB,WAAW;AAAA,IACV,EAAE,KAAK,IAAI,KAAK,MAAM,MAAM,GAAG;AAAA,IAC/B,EAAE,KAAK,MAAM,KAAK,OAAO,MAAM,GAAG;AAAA,IAClC,EAAE,KAAK,MAAM,KAAK,GAAG,MAAM,EAAE;AAAA,IAC7B,EAAE,KAAK,KAAK,KAAK,KAAK,MAAM,EAAE;AAAA,EAC/B;AAAA,EACA,+BAA+B;AAAA,EAC/B,2BAA2B;AAAA,EAC3B,6BAA6B;AAAA,EAC7B,uBAAuB;AAAA,EACvB,eAAe;AAAA,EACf,iBAAiB;AAAA,EACjB,wBAAwB;AAAA,EACxB,iBAAiB;AAAA,EACjB,oBAAoB;AAAA,EACpB,oBAAoB;AAAA,EACpB,oBAAoB;AAAA,EACpB,cAAc;AAAA,EACd,qBAAqB;AAAA,EACrB,eAAe;AAAA,EACf,qBAAqB;AAAA,EACrB,0BAA0B;AAAA,EAC1B,2BAA2B;AAAA,EAC3B,cAAc;AAAA,EACd,kBAAkB;AAAA,EAClB,iCAAiC;AAAA,EACjC,yBAAyB;AAAA,EACzB,+BAA+B;AAAA,EAC/B,gBAAgB;AAAA,EAChB,gCAAgC;AAAA,EAChC,4BAA4B;AAC7B;",
   "names": []
 }

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

@@ -43,7 +43,7 @@ const setStyleProperty = (elm, property, value) => {
 const INPUTS = ["input", "select", "button", "textarea"];
 function activeElementShouldCaptureKeys() {
   const { activeElement } = document;
-  return !!(activeElement && (activeElement.getAttribute("contenteditable") || INPUTS.indexOf(activeElement.tagName.toLowerCase()) > -1));
+  return !!(activeElement && (activeElement.isContentEditable || INPUTS.indexOf(activeElement.tagName.toLowerCase()) > -1));
 }
 export {
   activeElementShouldCaptureKeys,

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 elemnets 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 React from 'react'\nimport { debugFlags, pointerCaptureTrackingObject } from './debug-flags'\n\n/** @public */\nexport function loopToHtmlElement(elm: Element): HTMLElement {\n\tif (elm instanceof HTMLElement) return elm\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 * Beacuase 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 unfortuantly 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/** @public */\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, value as string)\n}\n\nconst INPUTS = ['input', 'select', 'button', 'textarea']\n\n/** @internal */\nexport function activeElementShouldCaptureKeys() {\n\tconst { activeElement } = document\n\treturn !!(\n\t\tactiveElement &&\n\t\t(activeElement.getAttribute('contenteditable') ||\n\t\t\tINPUTS.indexOf(activeElement.tagName.toLowerCase()) > -1)\n\t)\n}\n"],
-  "mappings": "AAgBA,SAAS,YAAY,oCAAoC;AAGlD,SAAS,kBAAkB,KAA2B;AAC5D,MAAI,eAAe,YAAa,QAAO;AACvC,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;AAGO,MAAM,uBAAuB,CAAC,MAAW,EAAE,gBAAgB;AAG3D,MAAM,mBAAmB,CAC/B,KACA,UACA,UACI;AACJ,MAAI,CAAC,IAAK;AACV,MAAI,MAAM,YAAY,UAAU,KAAe;AAChD;AAEA,MAAM,SAAS,CAAC,SAAS,UAAU,UAAU,UAAU;AAGhD,SAAS,iCAAiC;AAChD,QAAM,EAAE,cAAc,IAAI;AAC1B,SAAO,CAAC,EACP,kBACC,cAAc,aAAa,iBAAiB,KAC5C,OAAO,QAAQ,cAAc,QAAQ,YAAY,CAAC,IAAI;AAEzD;",
+  "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 elemnets 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 React from 'react'\nimport { debugFlags, pointerCaptureTrackingObject } from './debug-flags'\n\n/** @public */\nexport function loopToHtmlElement(elm: Element): HTMLElement {\n\tif (elm instanceof HTMLElement) return elm\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 * Beacuase 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 unfortuantly 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/** @public */\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, value as string)\n}\n\nconst INPUTS = ['input', 'select', 'button', 'textarea']\n\n/** @internal */\nexport function activeElementShouldCaptureKeys() {\n\tconst { activeElement } = document\n\treturn !!(\n\t\tactiveElement &&\n\t\t((activeElement as HTMLElement).isContentEditable ||\n\t\t\tINPUTS.indexOf(activeElement.tagName.toLowerCase()) > -1)\n\t)\n}\n"],
+  "mappings": "AAgBA,SAAS,YAAY,oCAAoC;AAGlD,SAAS,kBAAkB,KAA2B;AAC5D,MAAI,eAAe,YAAa,QAAO;AACvC,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;AAGO,MAAM,uBAAuB,CAAC,MAAW,EAAE,gBAAgB;AAG3D,MAAM,mBAAmB,CAC/B,KACA,UACA,UACI;AACJ,MAAI,CAAC,IAAK;AACV,MAAI,MAAM,YAAY,UAAU,KAAe;AAChD;AAEA,MAAM,SAAS,CAAC,SAAS,UAAU,UAAU,UAAU;AAGhD,SAAS,iCAAiC;AAChD,QAAM,EAAE,cAAc,IAAI;AAC1B,SAAO,CAAC,EACP,kBACE,cAA8B,qBAC/B,OAAO,QAAQ,cAAc,QAAQ,YAAY,CAAC,IAAI;AAEzD;",
   "names": []
 }

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

@@ -0,0 +1,26 @@
+import { getSchema } from "@tiptap/core";
+import { Node } from "@tiptap/pm/model";
+import { assert } from "@tldraw/utils";
+function getFontsFromRichText(editor, richText, initialState) {
+  const { tipTapConfig, addFontsFromNode } = editor.getTextOptions();
+  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 rootNode = Node.fromJSON(schema, richText);
+  const fonts = /* @__PURE__ */ new Set();
+  function addFont(font) {
+    fonts.add(font);
+  }
+  function visit(node, state) {
+    state = addFontsFromNode(node, state, addFont);
+    for (const child of node.children) {
+      visit(child, state);
+    }
+  }
+  visit(rootNode, initialState);
+  return Array.from(fonts);
+}
+export {
+  getFontsFromRichText
+};
+//# sourceMappingURL=richText.mjs.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/lib/utils/richText.ts"],
+  "sourcesContent": ["import { getSchema, JSONContent, Editor as TTEditor } from '@tiptap/core'\nimport { Node } from '@tiptap/pm/model'\nimport { EditorProviderProps } from '@tiptap/react'\nimport { TLRichText } from '@tldraw/tlschema'\nimport { assert } from '@tldraw/utils'\nimport { Editor } from '../editor/Editor'\nimport { TLFontFace } from '../editor/managers/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\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 = getSchema(tipTapConfig.extensions ?? [])\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,YAAY;AAGrB,SAAS,cAAc;AAsChB,SAAS,qBACf,QACA,UACA,cACC;AACD,QAAM,EAAE,cAAc,iBAAiB,IAAI,OAAO,eAAe;AACjE,SAAO,cAAc,uDAAuD;AAC5E,SAAO,kBAAkB,2DAA2D;AAEpF,QAAM,SAAS,UAAU,aAAa,cAAc,CAAC,CAAC;AACtD,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/version.mjs

@@ -1,8 +1,8 @@
-const version = "3.9.0";
+const version = "3.10.0-canary.3176429f9d1b";
 const publishDates = {
   major: "2024-09-13T14:36:29.063Z",
-  minor: "2025-03-03T11:42:22.746Z",
-  patch: "2025-03-03T11:42:22.746Z"
+  minor: "2025-03-04T14:05:00.041Z",
+  patch: "2025-03-04T14:05:00.041Z"
 };
 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 = '3.9.0'\nexport const publishDates = {\n\tmajor: '2024-09-13T14:36:29.063Z',\n\tminor: '2025-03-03T11:42:22.746Z',\n\tpatch: '2025-03-03T11:42:22.746Z',\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 = '3.10.0-canary.3176429f9d1b'\nexport const publishDates = {\n\tmajor: '2024-09-13T14:36:29.063Z',\n\tminor: '2025-03-04T14:05:00.041Z',\n\tpatch: '2025-03-04T14:05:00.041Z',\n}\n"],
   "mappings": "AAGO,MAAM,UAAU;AAChB,MAAM,eAAe;AAAA,EAC3B,OAAO;AAAA,EACP,OAAO;AAAA,EACP,OAAO;AACR;",
   "names": []
 }

package/editor.css

@@ -156,6 +156,8 @@
 	--color-text-1: hsl(0, 0%, 18%);
 	--color-text-3: hsl(220, 2%, 65%);
 	--color-text-shadow: hsl(0, 0%, 100%);
+	--color-text-highlight: hsl(52, 100%, 50%);
+	--color-text-highlight-p3: color(display-p3 0.972 0.8205 0.05);
 	--color-primary: hsl(214, 84%, 56%);
 	--color-success: hsl(123, 46%, 34%);
 	--color-info: hsl(201, 98%, 41%);
@@ -202,6 +204,8 @@
 	--color-text-1: hsl(0, 0%, 85%);
 	--color-text-3: hsl(210, 6%, 45%);
 	--color-text-shadow: hsl(210, 13%, 18%);
+	--color-text-highlight: hsl(52, 100%, 41%);
+	--color-text-highlight-p3: color(display-p3 0.8078 0.6225 0.0312);
 	--color-primary: hsl(214, 84%, 56%);
 	--color-success: hsl(123, 38%, 57%);
 	--color-info: hsl(199, 92%, 56%);
@@ -248,7 +252,7 @@
 input,
 *[contenteditable],
 *[contenteditable] * {
-	-webkit-user-select: text;
+	user-select: text;
 }
 
 /* -------------------------------------------------- */
@@ -722,17 +726,14 @@ input,
 	opacity: 0.7;
 }
 
-/* -------------------------------------------------- */
-/*                       Spinner                      */
-/* -------------------------------------------------- */
-
+/* --------------------- Spinner -------------------- */
 @keyframes spinner {
 	to {
 		transform: rotate(360deg);
 	}
 }
 
-/* ------------------- Text Shape ------------------- */
+/* ---------------------- Text ---------------------- */
 
 .tl-text-shape-label {
 	position: relative;
@@ -782,10 +783,14 @@ input,
 	text-align: right;
 }
 
-.tl-text-wrapper[data-isediting='true'] .tl-text-content {
+.tl-plain-text-wrapper[data-isediting='true'] .tl-text-content {
 	opacity: 0;
 }
 
+.tl-rich-text-wrapper[data-isediting='true'] .tl-text-content {
+	display: none;
+}
+
 .tl-text {
 	/* remove overflow from textarea on windows */
 	margin: 0px;
@@ -852,7 +857,6 @@ input,
 	width: 100%;
 	min-width: 1px;
 	min-height: 1px;
-	overflow: visible;
 	outline: none;
 }
 
@@ -868,6 +872,7 @@ input,
 }
 
 .tl-text-content {
+	overflow: visible;
 	pointer-events: none;
 }
 
@@ -875,10 +880,17 @@ input,
 	resize: none;
 	user-select: all;
 	-webkit-user-select: text;
-	overflow: hidden;
 	cursor: var(--tl-cursor-text);
 }
 
+.tl-text-input:not(.tl-rich-text) {
+	/*
+	 * Note: this `overflow: hidden` is key for scrollbars to not show up
+	 * plaintext/<textarea> editors.
+	 */
+	overflow: hidden;
+}
+
 .tl-text-wrapper[data-isediting='false'] .tl-text-input,
 .tl-arrow-label[data-isediting='false'] .tl-text-input {
 	opacity: 0;
@@ -891,6 +903,109 @@ input,
 	text-shadow: none;
 }
 
+.tl-rich-text[data-iseditinganything='true'] {
+	cursor: var(--tl-cursor-text);
+}
+
+.tl-rich-text .ProseMirror {
+	word-wrap: break-word;
+	overflow-wrap: break-word;
+	white-space: pre-wrap;
+
+	/**
+	 * Note: ProseMirror disables this in https://github.com/ProseMirror/prosemirror-view/commit/6b3b2205e2f3029cb8e8e86c55a190a22491df31
+	 * However, that was from 8 years ago and the browser caret issue
+	 * it mentions seems to be fixed. So, we're re-enabling it.
+	 * We'll tell ProseMirror maybe to get rid of this on their end.
+	 */
+	-webkit-font-variant-ligatures: inherit;
+	font-variant-ligatures: inherit;
+	font-feature-settings: inherit;
+
+	/**
+	 * N.B. This following CSS Rule comes standard with the tiptap editor.
+	 * Combined with the above rule that it supersedes, it allows for
+	 * the auto-linking to work in text. Say, when typing example.com
+	 * this helps it automatically turn that bit of text into a link.
+	 *
+	 * However, specifically, the break-spaces features seems to cause
+	 * rendering differences when going in-and-out of edit mode. For example,
+	 * the statically rendered text 'the rain in spain falls mainly on the plain'
+	 * in a note shape will render differently when going in-and-out of edit mode.
+	 *
+	 * So, this is commented out to help make both the autolinking work (which now
+	 * relies on the white-space: pre-wrap to work and to make the static/edit-mode
+	 * rendering consistent.
+	 * In the future, we might consider just making the static rendering just use
+	 * white-space: break-spaces to make it consistent with the edit mode if need be.
+	 *
+	 * Also, the amount of ink I've spilt in my career writing comments explaining
+	 * white-space in contenteditable is incredible.
+	 *
+	/* white-space: break-spaces; */
+}
+
+.tl-rich-text p {
+	margin: 0;
+}
+
+.tl-rich-text ul,
+.tl-rich-text ol {
+	text-align: left;
+	margin: 0;
+}
+
+.tl-rich-text h1,
+.tl-rich-text h2,
+.tl-rich-text h3,
+.tl-rich-text h4,
+.tl-rich-text h5,
+.tl-rich-text h6 {
+	margin-top: 5px;
+	margin-bottom: 10px;
+}
+
+.tl-rich-text a {
+	color: var(--color-primary);
+	text-decoration: underline;
+}
+
+.tl-rich-text code {
+	font-family: var(--tl-font-mono);
+}
+
+.tl-rich-text mark {
+	background-color: #fddd00;
+	color: currentColor;
+	border-radius: 2px;
+}
+
+.tl-theme__light .tl-rich-text mark {
+	text-shadow: none;
+}
+
+.tl-theme__dark .tl-rich-text mark {
+	background-color: var(--color-text-highlight);
+	color: currentColor;
+}
+
+@supports (color: color(display-p3 1 1 1)) {
+	@media (color-gamut: p3) {
+		.tl-container:not(.tl-theme__force-sRGB) .tl-rich-text mark {
+			background-color: var(--color-text-highlight-p3);
+		}
+	}
+}
+
+.tl-text-label__inner > .tl-text-input.tl-rich-text {
+	display: none;
+	position: static;
+}
+
+.tl-text-wrapper[data-isediting='true'] .tl-rich-text {
+	display: block;
+}
+
 /* ------------------- Snap Lines ------------------- */
 
 .tl-snap-indicator {
@@ -1175,10 +1290,6 @@ input,
 	min-height: auto;
 }
 
-.tl-text-label[data-isediting='true'] p {
-	opacity: 0;
-}
-
 .tl-arrow-hint {
 	stroke: var(--color-text-1);
 	fill: none;
@@ -1270,6 +1381,9 @@ input,
 	opacity: 0;
 	animation: fade-in 0.2s ease-in-out forwards;
 	animation-delay: 0.2s;
+	position: absolute;
+	inset: 0px;
+	z-index: var(--layer-canvas-blocker);
 }
 
 @keyframes fade-in {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tldraw/editor",
   "description": "A tiny little drawing app (editor).",
-  "version": "3.9.0",
+  "version": "3.10.0-canary.3176429f9d1b",
   "author": {
     "name": "tldraw Inc.",
     "email": "hello@tldraw.com"
@@ -45,12 +45,15 @@
     "lint": "yarn run -T tsx ../../internal/scripts/lint.ts"
   },
   "dependencies": {
-    "@tldraw/state": "3.9.0",
-    "@tldraw/state-react": "3.9.0",
-    "@tldraw/store": "3.9.0",
-    "@tldraw/tlschema": "3.9.0",
-    "@tldraw/utils": "3.9.0",
-    "@tldraw/validate": "3.9.0",
+    "@tiptap/core": "^2.9.1",
+    "@tiptap/pm": "^2.9.1",
+    "@tiptap/react": "^2.9.1",
+    "@tldraw/state": "3.10.0-canary.3176429f9d1b",
+    "@tldraw/state-react": "3.10.0-canary.3176429f9d1b",
+    "@tldraw/store": "3.10.0-canary.3176429f9d1b",
+    "@tldraw/tlschema": "3.10.0-canary.3176429f9d1b",
+    "@tldraw/utils": "3.10.0-canary.3176429f9d1b",
+    "@tldraw/validate": "3.10.0-canary.3176429f9d1b",
     "@types/core-js": "^2.5.8",
     "@use-gesture/react": "^10.3.1",
     "classnames": "^2.5.1",

package/src/index.ts

@@ -26,6 +26,14 @@ export {
 	useValue,
 } from '@tldraw/state-react'
 export { resizeScaled } from './lib/editor/shapes/shared/resizeScaled'
+export {
+	getFontsFromRichText,
+	type RichTextFontVisitor,
+	type RichTextFontVisitorState,
+	type TLTextOptions,
+	type TiptapEditor,
+	type TiptapNode,
+} from './lib/utils/richText'
 export { LocalIndexedDb, Table, type StoreName } from './lib/utils/sync/LocalIndexedDb'
 // eslint-disable-next-line local/no-export-star
 export * from '@tldraw/store'
@@ -163,6 +171,11 @@ export {
 } from './lib/editor/bindings/BindingUtil'
 export { ClickManager, type TLClickState } from './lib/editor/managers/ClickManager'
 export { EdgeScrollManager } from './lib/editor/managers/EdgeScrollManager'
+export {
+	FontManager,
+	type TLFontFace,
+	type TLFontFaceSource,
+} from './lib/editor/managers/FontManager'
 export { HistoryManager } from './lib/editor/managers/HistoryManager'
 export { ScribbleManager, type ScribbleItem } from './lib/editor/managers/ScribbleManager'
 export {
@@ -299,6 +312,7 @@ export { useIsCropping } from './lib/hooks/useIsCropping'
 export { useIsDarkMode } from './lib/hooks/useIsDarkMode'
 export { useIsEditing } from './lib/hooks/useIsEditing'
 export { useLocalStore } from './lib/hooks/useLocalStore'
+export { usePassThroughMouseOverEvents } from './lib/hooks/usePassThroughMouseOverEvents'
 export { usePassThroughWheelEvents } from './lib/hooks/usePassThroughWheelEvents'
 export { usePeerIds } from './lib/hooks/usePeerIds'
 export { usePresence } from './lib/hooks/usePresence'
@@ -313,6 +327,7 @@ export {
 export { useSelectionEvents } from './lib/hooks/useSelectionEvents'
 export { useTLSchemaFromUtils, useTLStore } from './lib/hooks/useTLStore'
 export { useTransform } from './lib/hooks/useTransform'
+export { useViewportHeight } from './lib/hooks/useViewportHeight'
 export {
 	LicenseManager,
 	type InvalidLicenseKeyResult,

package/src/lib/TldrawEditor.tsx

@@ -14,7 +14,6 @@ import React, {
 } from 'react'
 
 import classNames from 'classnames'
-import { TLDeepLinkOptions } from '..'
 import { version } from '../version'
 import { OptionalErrorBoundary } from './components/ErrorBoundary'
 import { DefaultErrorFallback } from './components/default-components/DefaultErrorFallback'
@@ -44,7 +43,9 @@ import { useZoomCss } from './hooks/useZoomCss'
 import { LicenseProvider } from './license/LicenseProvider'
 import { Watermark } from './license/Watermark'
 import { TldrawOptions } from './options'
+import { TLDeepLinkOptions } from './utils/deepLinks'
 import { stopEventPropagation } from './utils/dom'
+import { TLTextOptions } from './utils/richText'
 import { TLStoreWithStatus } from './utils/sync/StoreWithStatus'
 
 /**
@@ -167,6 +168,11 @@ export interface TldrawEditorBaseProps {
 	 */
 	cameraOptions?: Partial<TLCameraOptions>
 
+	/**
+	 * Text options for the editor.
+	 */
+	textOptions?: TLTextOptions
+
 	/**
 	 * Options for the editor.
 	 */
@@ -190,6 +196,11 @@ export interface TldrawEditorBaseProps {
 	 * remain in the store and participate in all other operations.
 	 */
 	isShapeHidden?(shape: TLShape, editor: Editor): boolean
+
+	/**
+	 * The URLs for the fonts to use in the editor.
+	 */
+	assetUrls?: { fonts?: { [key: string]: string | undefined } }
 }
 
 /**
@@ -372,10 +383,12 @@ function TldrawEditorWithReadyStore({
 	autoFocus = true,
 	inferDarkMode,
 	cameraOptions,
+	textOptions,
 	options,
 	licenseKey,
 	deepLinks: _deepLinks,
 	isShapeHidden,
+	assetUrls,
 }: Required<
 	TldrawEditorProps & {
 		store: TLStore
@@ -430,9 +443,11 @@ function TldrawEditorWithReadyStore({
 				autoFocus,
 				inferDarkMode,
 				cameraOptions,
+				textOptions,
 				options,
 				licenseKey,
 				isShapeHidden,
+				fontAssetUrls: assetUrls?.fonts,
 			})
 
 			editor.updateViewportScreenBounds(canvasRef.current ?? container)
@@ -467,6 +482,8 @@ function TldrawEditorWithReadyStore({
 			setEditor,
 			licenseKey,
 			isShapeHidden,
+			textOptions,
+			assetUrls,
 		]
 	)
 
@@ -532,10 +549,41 @@ function TldrawEditorWithReadyStore({
 		[editor, autoFocus]
 	)
 
-	const { Canvas } = useEditorComponents()
+	const [_fontLoadingState, setFontLoadingState] = useState<{
+		editor: Editor
+		isLoaded: boolean
+	} | null>(null)
+	let fontLoadingState = _fontLoadingState
+	if (editor !== fontLoadingState?.editor) {
+		fontLoadingState = null
+	}
+	useEffect(() => {
+		if (!editor) return
+		let isCancelled = false
+
+		setFontLoadingState({ editor, isLoaded: false })
+
+		editor.fonts
+			.loadRequiredFontsForCurrentPage(editor.options.maxFontsToLoadBeforeRender)
+			.finally(() => {
+				if (isCancelled) return
+				setFontLoadingState({ editor, isLoaded: true })
+			})
+
+		return () => {
+			isCancelled = true
+		}
+	}, [editor])
 
-	if (!editor) {
-		return <div className="tl-canvas" ref={canvasRef} />
+	const { Canvas, LoadingScreen } = useEditorComponents()
+
+	if (!editor || !fontLoadingState?.isLoaded) {
+		return (
+			<>
+				{LoadingScreen && <LoadingScreen />}
+				<div className="tl-canvas" ref={canvasRef} />
+			</>
+		)
 	}
 
 	return (

package/src/lib/components/LiveCollaborators.tsx

@@ -92,6 +92,7 @@ const Collaborator = track(function Collaborator({
 				<CollaboratorBrush
 					className="tl-collaborator__brush"
 					key={userId + '_brush'}
+					userId={userId}
 					brush={brush}
 					color={color}
 					opacity={0.1}
@@ -101,6 +102,7 @@ const Collaborator = track(function Collaborator({
 				<CollaboratorCursor
 					className="tl-collaborator__cursor"
 					key={userId + '_cursor'}
+					userId={userId}
 					point={cursor}
 					color={color}
 					zoom={zoomLevel}
@@ -111,6 +113,7 @@ const Collaborator = track(function Collaborator({
 				<CollaboratorHint
 					className="tl-collaborator__cursor-hint"
 					key={userId + '_cursor_hint'}
+					userId={userId}
 					point={cursor}
 					color={color}
 					zoom={zoomLevel}
@@ -123,6 +126,7 @@ const Collaborator = track(function Collaborator({
 						<CollaboratorScribble
 							key={userId + '_scribble_' + scribble.id}
 							className="tl-collaborator__scribble"
+							userId={userId}
 							scribble={scribble}
 							color={color}
 							zoom={zoomLevel}
@@ -138,6 +142,7 @@ const Collaborator = track(function Collaborator({
 						<CollaboratorShapeIndicator
 							className="tl-collaborator__shape-indicator"
 							key={userId + '_' + shapeId}
+							userId={userId}
 							shapeId={shapeId}
 							color={color}
 							opacity={0.5}

package/src/lib/components/Shape.tsx

@@ -1,6 +1,7 @@
+import { react } from '@tldraw/state'
 import { useQuickReactor, useStateTracking } from '@tldraw/state-react'
 import { TLShape, TLShapeId } from '@tldraw/tlschema'
-import { memo, useCallback, useRef } from 'react'
+import { memo, useCallback, useEffect, useRef } from 'react'
 import { ShapeUtil } from '../editor/shapes/ShapeUtil'
 import { useEditor } from '../hooks/useEditor'
 import { useEditorComponents } from '../hooks/useEditorComponents'
@@ -41,6 +42,13 @@ export const Shape = memo(function Shape({
 	const containerRef = useRef<HTMLDivElement>(null)
 	const bgContainerRef = useRef<HTMLDivElement>(null)
 
+	useEffect(() => {
+		return react('load fonts', () => {
+			const fonts = editor.fonts.getShapeFontFaces(shape)
+			editor.fonts.requestFonts(fonts)
+		})
+	}, [editor, shape])
+
 	const memoizedStuffRef = useRef({
 		transform: '',
 		clipPath: 'none',

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

@@ -5,6 +5,7 @@ import { toDomPrecision } from '../../primitives/utils'
 
 /** @public */
 export interface TLBrushProps {
+	userId?: string
 	brush: BoxModel
 	color?: string
 	opacity?: number

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

@@ -9,6 +9,7 @@ import { clamp } from '../../primitives/utils'
 
 /** @public */
 export interface TLCollaboratorHintProps {
+	userId: string
 	className?: string
 	point: VecModel
 	viewport: Box

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

@@ -6,6 +6,7 @@ import { useTransform } from '../../hooks/useTransform'
 
 /** @public */
 export interface TLCursorProps {
+	userId: string
 	className?: string
 	point: VecModel | null
 	zoom: number

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

@@ -4,6 +4,7 @@ import { getSvgPathFromPoints } from '../../utils/getSvgPathFromPoints'
 
 /** @public */
 export interface TLScribbleProps {
+	userId?: string
 	scribble: TLScribble
 	zoom: number
 	color?: string

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

@@ -38,6 +38,7 @@ const InnerIndicator = ({ editor, id }: { editor: Editor; id: TLShapeId }) => {
 
 /** @public */
 export interface TLShapeIndicatorProps {
+	userId?: string
 	shapeId: TLShapeId
 	color?: string | undefined
 	opacity?: number