@tldraw/editor 5.1.1 → 5.2.0-canary.019da1aa690a

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\tif ('cancelable' in event && !event.cancelable) return\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,MAAI,gBAAgB,SAAS,CAAC,MAAM,WAAY;AAChD,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;",
+  "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\tif ('cancelable' in event && !event.cancelable) return\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 function stopEventPropagation(e: any) {\n\treturn e.stopPropagation()\n}\n\n/** @internal */\nexport function 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,MAAI,gBAAgB,SAAS,CAAC,MAAM,WAAY;AAChD,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,SAAS,qBAAqB,GAAQ;AAC5C,SAAO,EAAE,gBAAgB;AAC1B;AAGO,SAAS,iBACf,KACA,UACA,OACC;AACD,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/lib/utils/getPointerInfo.mjs

@@ -1,4 +1,5 @@
 import { isAccelKey } from "./keyboard.mjs";
+import { getPointerEventButton } from "./pointer.mjs";
 function getPointerInfo(editor, e) {
   editor.markEventAsHandled(e);
   return {
@@ -13,7 +14,7 @@ function getPointerInfo(editor, e) {
     metaKey: e.metaKey,
     accelKey: isAccelKey(e),
     pointerId: e.pointerId,
-    button: e.button,
+    button: getPointerEventButton(e),
     isPen: e.pointerType === "pen"
   };
 }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/lib/utils/getPointerInfo.ts"],
-  "sourcesContent": ["import type React from 'react'\nimport { Editor } from '../editor/Editor'\nimport { isAccelKey } from './keyboard'\n\n/** @public */\nexport function getPointerInfo(editor: Editor, e: React.PointerEvent | PointerEvent) {\n\teditor.markEventAsHandled(e)\n\n\treturn {\n\t\tpoint: {\n\t\t\tx: e.clientX,\n\t\t\ty: e.clientY,\n\t\t\tz: e.pressure,\n\t\t},\n\t\tshiftKey: e.shiftKey,\n\t\taltKey: e.altKey,\n\t\tctrlKey: e.metaKey || e.ctrlKey,\n\t\tmetaKey: e.metaKey,\n\t\taccelKey: isAccelKey(e),\n\t\tpointerId: e.pointerId,\n\t\tbutton: e.button,\n\t\tisPen: e.pointerType === 'pen',\n\t}\n}\n"],
-  "mappings": "AAEA,SAAS,kBAAkB;AAGpB,SAAS,eAAe,QAAgB,GAAsC;AACpF,SAAO,mBAAmB,CAAC;AAE3B,SAAO;AAAA,IACN,OAAO;AAAA,MACN,GAAG,EAAE;AAAA,MACL,GAAG,EAAE;AAAA,MACL,GAAG,EAAE;AAAA,IACN;AAAA,IACA,UAAU,EAAE;AAAA,IACZ,QAAQ,EAAE;AAAA,IACV,SAAS,EAAE,WAAW,EAAE;AAAA,IACxB,SAAS,EAAE;AAAA,IACX,UAAU,WAAW,CAAC;AAAA,IACtB,WAAW,EAAE;AAAA,IACb,QAAQ,EAAE;AAAA,IACV,OAAO,EAAE,gBAAgB;AAAA,EAC1B;AACD;",
+  "sourcesContent": ["import type React from 'react'\nimport { Editor } from '../editor/Editor'\nimport { isAccelKey } from './keyboard'\nimport { getPointerEventButton } from './pointer'\n\n/** @public */\nexport function getPointerInfo(editor: Editor, e: React.PointerEvent | PointerEvent) {\n\teditor.markEventAsHandled(e)\n\n\treturn {\n\t\tpoint: {\n\t\t\tx: e.clientX,\n\t\t\ty: e.clientY,\n\t\t\tz: e.pressure,\n\t\t},\n\t\tshiftKey: e.shiftKey,\n\t\taltKey: e.altKey,\n\t\tctrlKey: e.metaKey || e.ctrlKey,\n\t\tmetaKey: e.metaKey,\n\t\taccelKey: isAccelKey(e),\n\t\tpointerId: e.pointerId,\n\t\tbutton: getPointerEventButton(e),\n\t\tisPen: e.pointerType === 'pen',\n\t}\n}\n"],
+  "mappings": "AAEA,SAAS,kBAAkB;AAC3B,SAAS,6BAA6B;AAG/B,SAAS,eAAe,QAAgB,GAAsC;AACpF,SAAO,mBAAmB,CAAC;AAE3B,SAAO;AAAA,IACN,OAAO;AAAA,MACN,GAAG,EAAE;AAAA,MACL,GAAG,EAAE;AAAA,MACL,GAAG,EAAE;AAAA,IACN;AAAA,IACA,UAAU,EAAE;AAAA,IACZ,QAAQ,EAAE;AAAA,IACV,SAAS,EAAE,WAAW,EAAE;AAAA,IACxB,SAAS,EAAE;AAAA,IACX,UAAU,WAAW,CAAC;AAAA,IACtB,WAAW,EAAE;AAAA,IACb,QAAQ,sBAAsB,CAAC;AAAA,IAC/B,OAAO,EAAE,gBAAgB;AAAA,EAC1B;AACD;",
   "names": []
 }

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

@@ -0,0 +1,12 @@
+import { tlenv } from "../globals/environment.mjs";
+function isSecondaryClickEvent(e) {
+  return e.button === 2 || tlenv.isDarwin && e.button === 0 && e.ctrlKey && !e.metaKey;
+}
+function getPointerEventButton(e) {
+  return isSecondaryClickEvent(e) ? 2 : e.button;
+}
+export {
+  getPointerEventButton,
+  isSecondaryClickEvent
+};
+//# sourceMappingURL=pointer.mjs.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/lib/utils/pointer.ts"],
+  "sourcesContent": ["import { tlenv } from '../globals/environment'\n\n/** @internal */\ninterface PointerLike {\n\tbutton: number\n\tctrlKey: boolean\n\tmetaKey: boolean\n}\n\n/** @internal */\nexport function isSecondaryClickEvent(e: PointerLike) {\n\treturn e.button === 2 || (tlenv.isDarwin && e.button === 0 && e.ctrlKey && !e.metaKey)\n}\n\n/** @internal */\nexport function getPointerEventButton(e: PointerLike) {\n\treturn isSecondaryClickEvent(e) ? 2 : e.button\n}\n"],
+  "mappings": "AAAA,SAAS,aAAa;AAUf,SAAS,sBAAsB,GAAgB;AACrD,SAAO,EAAE,WAAW,KAAM,MAAM,YAAY,EAAE,WAAW,KAAK,EAAE,WAAW,CAAC,EAAE;AAC/E;AAGO,SAAS,sBAAsB,GAAgB;AACrD,SAAO,sBAAsB,CAAC,IAAI,IAAI,EAAE;AACzC;",
+  "names": []
+}

package/dist-esm/version.mjs

@@ -1,8 +1,8 @@
-const version = "5.1.1";
+const version = "5.2.0-canary.019da1aa690a";
 const publishDates = {
   major: "2026-05-06T16:28:18.473Z",
-  minor: "2026-06-03T10:26:13.606Z",
-  patch: "2026-06-12T16:33:21.130Z"
+  minor: "2026-06-18T15:57:15.608Z",
+  patch: "2026-06-18T15:57:15.608Z"
 };
 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 = '5.1.1'\nexport const publishDates = {\n\tmajor: '2026-05-06T16:28:18.473Z',\n\tminor: '2026-06-03T10:26:13.606Z',\n\tpatch: '2026-06-12T16:33:21.130Z',\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 = '5.2.0-canary.019da1aa690a'\nexport const publishDates = {\n\tmajor: '2026-05-06T16:28:18.473Z',\n\tminor: '2026-06-18T15:57:15.608Z',\n\tpatch: '2026-06-18T15:57:15.608Z',\n}\n"],
   "mappings": "AAGO,MAAM,UAAU;AAChB,MAAM,eAAe;AAAA,EAC3B,OAAO;AAAA,EACP,OAAO;AAAA,EACP,OAAO;AACR;",
   "names": []
 }

package/editor.css

@@ -182,6 +182,7 @@
 	--tl-color-text-0: hsl(0, 0%, 11%);
 	--tl-color-text-1: hsl(0, 0%, 18%);
 	--tl-color-text-3: hsl(204, 4%, 45%);
+	--tl-color-text-disabled: hsl(204, 4%, 55%);
 	--tl-color-text-shadow: hsl(0, 0%, 100%);
 	--tl-color-text-highlight: hsl(52, 100%, 50%);
 	--tl-color-text-highlight-p3: color(display-p3 0.972 0.8205 0.05);
@@ -236,6 +237,7 @@
 	--tl-color-text-0: hsl(0, 9%, 94%);
 	--tl-color-text-1: hsl(0, 0%, 85%);
 	--tl-color-text-3: hsl(204, 4%, 75%);
+	--tl-color-text-disabled: hsl(204, 4%, 50%);
 	--tl-color-text-shadow: hsl(210, 13%, 18%);
 	--tl-color-text-highlight: hsl(52, 100%, 41%);
 	--tl-color-text-highlight-p3: color(display-p3 0.8078 0.6225 0.0312);
@@ -762,17 +764,17 @@ input,
 .tl-rich-text ol {
 	text-align: left;
 	margin: 0;
-	padding-left: 3.25ch;
+	padding-left: 1.625ch;
 	/* Some resets, like Tailwind, nix the list styling. */
 	list-style: revert;
 }
 
 .tl-rich-text ol:has(> li:nth-child(10)) {
-	padding-left: 4.25ch;
+	padding-left: 2.625ch;
 }
 
 .tl-rich-text ol:has(> li:nth-child(100)) {
-	padding-left: 5.25ch;
+	padding-left: 3.625ch;
 }
 
 .tl-rich-text h1,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tldraw/editor",
   "description": "tldraw infinite canvas SDK (editor).",
-  "version": "5.1.1",
+  "version": "5.2.0-canary.019da1aa690a",
   "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": "5.1.1",
-    "@tldraw/state-react": "5.1.1",
-    "@tldraw/store": "5.1.1",
-    "@tldraw/tlschema": "5.1.1",
-    "@tldraw/utils": "5.1.1",
-    "@tldraw/validate": "5.1.1",
+    "@tldraw/state": "5.2.0-canary.019da1aa690a",
+    "@tldraw/state-react": "5.2.0-canary.019da1aa690a",
+    "@tldraw/store": "5.2.0-canary.019da1aa690a",
+    "@tldraw/tlschema": "5.2.0-canary.019da1aa690a",
+    "@tldraw/utils": "5.2.0-canary.019da1aa690a",
+    "@tldraw/validate": "5.2.0-canary.019da1aa690a",
     "classnames": "^2.5.1",
     "eventemitter3": "^4.0.7",
     "idb": "^7.1.1",
@@ -80,7 +80,10 @@
     "react": "^19.2.1",
     "react-dom": "^19.2.1",
     "resize-observer-polyfill": "^1.5.1",
-    "vitest": "^3.2.4"
+    "vitest": "^4.1.7"
+  },
+  "engines": {
+    "node": ">=22.12.0"
   },
   "module": "dist-esm/index.mjs",
   "source": "src/index.ts",

package/src/index.ts

@@ -128,6 +128,7 @@ export {
 export { SpatialIndexManager } from './lib/editor/managers/SpatialIndexManager/SpatialIndexManager'
 export {
 	TextManager,
+	resolveLineHeightPx,
 	type BatchMeasurementRequest,
 	type TLMeasuredTextSize,
 	type TLMeasureTextOpts,
@@ -185,11 +186,7 @@ export {
 	type TLOverlay,
 	type TLOverlayUtilConstructor,
 } from './lib/editor/overlays/OverlayUtil'
-export {
-	ShapeIndicatorOverlayUtil,
-	strokeShapeIndicators,
-	type TLShapeIndicatorOverlay,
-} from './lib/editor/overlays/ShapeIndicatorOverlayUtil'
+export { strokeShapeIndicators } from './lib/editor/overlays/strokeShapeIndicators'
 export {
 	getPerfectDashProps,
 	type PerfectDashTerminal,

package/src/lib/components/MenuClickCapture.tsx

@@ -6,6 +6,7 @@ import { useEditor } from '../hooks/useEditor'
 import { Vec } from '../primitives/Vec'
 import { releasePointerCapture, setPointerCapture } from '../utils/dom'
 import { getPointerInfo } from '../utils/getPointerInfo'
+import { getPointerEventButton } from '../utils/pointer'
 
 /**
  * When a menu is open, this component prevents the user from interacting with the canvas.
@@ -68,18 +69,19 @@ export function MenuClickCapture() {
 
 	const handlePointerDown = useCallback(
 		(e: PointerEvent) => {
-			if (e.button !== 0 && e.button !== 2) return
+			const button = getPointerEventButton(e)
+			if (button !== 0 && button !== 2) return
 
 			flushSync(() => setIsPointing(true))
 			setPointerCapture(e.currentTarget, e)
 			rPointerState.current = {
 				isDown: true,
 				isDragging: false,
-				button: e.button,
+				button,
 				start: new Vec(e.clientX, e.clientY),
 			}
 
-			if (e.button === 2) {
+			if (button === 2) {
 				if (!editor.options.rightClickPanning) {
 					// Right-click panning off: close the open menu and swallow the native
 					// contextmenu that would otherwise briefly open a new one (causing a flash).
@@ -141,13 +143,15 @@ export function MenuClickCapture() {
 
 	const handlePointerUp = useCallback(
 		(e: PointerEvent) => {
-			const isStaticRightClick = e.button === 2 && !rPointerState.current.isDragging
+			const isStaticRightClick =
+				rPointerState.current.button === 2 && !rPointerState.current.isDragging
 
 			editor.dispatch({
 				type: 'pointer',
 				target: 'canvas',
 				name: 'pointer_up',
 				...getPointerInfo(editor, e),
+				button: rPointerState.current.button === 2 ? 2 : getPointerEventButton(e),
 			})
 
 			if (isStaticRightClick && editor.options.rightClickPanning) {

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

@@ -16,7 +16,10 @@ const BASE_ERROR_URL = 'https://github.com/tldraw/tldraw/issues/new'
 export type TLErrorFallbackComponent = ComponentType<{ error: unknown; editor?: Editor }>
 
 /** @public @react */
-export const DefaultErrorFallback: TLErrorFallbackComponent = ({ error, editor }) => {
+export const DefaultErrorFallback: TLErrorFallbackComponent = function DefaultErrorFallback({
+	error,
+	editor,
+}) {
 	const containerRef = useRef<HTMLDivElement>(null)
 	const [shouldShowError, setShouldShowError] = useState(process.env.NODE_ENV === 'development')
 	const [didCopy, setDidCopy] = useState(false)

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

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

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

@@ -4,6 +4,7 @@ import { ComponentType } from 'react'
 export type TLShapeErrorFallbackComponent = ComponentType<{ error: any }>
 
 /** @internal */
-export const DefaultShapeErrorFallback: TLShapeErrorFallbackComponent = () => {
-	return <div className="tl-shape-error-boundary" />
-}
+export const DefaultShapeErrorFallback: TLShapeErrorFallbackComponent =
+	function DefaultShapeErrorFallback() {
+		return <div className="tl-shape-error-boundary" />
+	}

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

@@ -1,4 +1,4 @@
 /** @public @react */
-export const DefaultSvgDefs = () => {
+export function DefaultSvgDefs() {
 	return null
 }