tldraw 3.16.0-canary.5170ef6b6e20 → 3.16.0-canary.5462c7eac75a

package/dist-esm/lib/utils/export/copyAs.mjs

@@ -8,8 +8,7 @@ import {
   getAdditionalClipboardWriteType
 } from "../clipboard.mjs";
 import { exportToImagePromiseForClipboard } from "./export.mjs";
-function copyAs(...args) {
-  const [editor, ids, opts] = typeof args[2] === "string" ? [args[0], args[1], { ...args[3], format: args[2] }] : args;
+function copyAs(editor, ids, opts) {
   if (!navigator.clipboard) return Promise.reject(new Error("Copy not supported"));
   if (navigator.clipboard.write) {
     const { blobPromise, mimeType } = exportToImagePromiseForClipboard(editor, ids, opts);

package/dist-esm/lib/utils/export/copyAs.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/lib/utils/export/copyAs.ts"],
-  "sourcesContent": ["import {\n\tEditor,\n\tFileHelpers,\n\tTLImageExportOptions,\n\tTLShapeId,\n\texhaustiveSwitchError,\n} from '@tldraw/editor'\nimport {\n\tclipboardWrite,\n\tdoesClipboardSupportType,\n\tgetAdditionalClipboardWriteType,\n} from '../clipboard'\nimport { exportToImagePromiseForClipboard } from './export'\n\n/** @public */\nexport type TLCopyType = 'svg' | 'png'\n\n/** @public */\nexport interface CopyAsOptions extends TLImageExportOptions {\n\t/** The format to copy as. */\n\tformat: TLCopyType\n}\n\n/**\n * Copy the given shapes to the clipboard.\n *\n * @param editor - The editor instance.\n * @param ids - The ids of the shapes to copy.\n * @param format - The format to copy as. Defaults to png.\n * @param opts - Options for the copy.\n *\n * @public\n */\nexport function copyAs(editor: Editor, ids: TLShapeId[], opts: CopyAsOptions): Promise<void>\n/**\n * @deprecated The format parameter is now part of the opts object.\n * @public\n */\nexport function copyAs(\n\teditor: Editor,\n\tids: TLShapeId[],\n\tformat: TLCopyType,\n\topts?: TLImageExportOptions & { format?: undefined }\n): Promise<void>\nexport function copyAs(\n\t...args:\n\t\t| [editor: Editor, ids: TLShapeId[], opts: TLImageExportOptions & { format: TLCopyType }]\n\t\t| [\n\t\t\t\teditor: Editor,\n\t\t\t\tids: TLShapeId[],\n\t\t\t\tformat: TLCopyType,\n\t\t\t\topts?: TLImageExportOptions & { format?: undefined },\n\t\t  ]\n) {\n\tconst [editor, ids, opts] =\n\t\ttypeof args[2] === 'string' ? [args[0], args[1], { ...args[3], format: args[2] }] : args\n\n\t// Note:  it's important that this function itself isn't async and doesn't really use promises -\n\t// we need to create the relevant `ClipboardItem`s and call navigator.clipboard.write\n\t// synchronously to make sure safari knows that the user _wants_ to copy See\n\t// https://bugs.webkit.org/show_bug.cgi?id=222262\n\n\tif (!navigator.clipboard) return Promise.reject(new Error('Copy not supported'))\n\tif (navigator.clipboard.write as any) {\n\t\tconst { blobPromise, mimeType } = exportToImagePromiseForClipboard(editor, ids, opts)\n\n\t\tconst types: Record<string, Promise<Blob>> = { [mimeType]: blobPromise }\n\t\tconst additionalMimeType = getAdditionalClipboardWriteType(opts.format)\n\t\tif (additionalMimeType && doesClipboardSupportType(additionalMimeType)) {\n\t\t\ttypes[additionalMimeType] = blobPromise.then((blob) =>\n\t\t\t\tFileHelpers.rewriteMimeType(blob, additionalMimeType)\n\t\t\t)\n\t\t}\n\n\t\treturn clipboardWrite(types)\n\t}\n\n\tswitch (opts.format) {\n\t\tcase 'svg': {\n\t\t\treturn fallbackWriteTextAsync(async () => {\n\t\t\t\tconst result = await editor.getSvgString(ids, opts)\n\n\t\t\t\tif (!result) throw new Error('Failed to copy')\n\t\t\t\treturn result.svg\n\t\t\t})\n\t\t}\n\n\t\tcase 'png':\n\t\t\tthrow new Error('Copy not supported')\n\t\tdefault:\n\t\t\texhaustiveSwitchError(opts.format)\n\t}\n}\n\nasync function fallbackWriteTextAsync(getText: () => Promise<string>) {\n\tawait navigator.clipboard?.writeText?.(await getText())\n}\n"],
-  "mappings": "AAAA;AAAA,EAEC;AAAA,EAGA;AAAA,OACM;AACP;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,OACM;AACP,SAAS,wCAAwC;AAgC1C,SAAS,UACZ,MAQF;AACD,QAAM,CAAC,QAAQ,KAAK,IAAI,IACvB,OAAO,KAAK,CAAC,MAAM,WAAW,CAAC,KAAK,CAAC,GAAG,KAAK,CAAC,GAAG,EAAE,GAAG,KAAK,CAAC,GAAG,QAAQ,KAAK,CAAC,EAAE,CAAC,IAAI;AAOrF,MAAI,CAAC,UAAU,UAAW,QAAO,QAAQ,OAAO,IAAI,MAAM,oBAAoB,CAAC;AAC/E,MAAI,UAAU,UAAU,OAAc;AACrC,UAAM,EAAE,aAAa,SAAS,IAAI,iCAAiC,QAAQ,KAAK,IAAI;AAEpF,UAAM,QAAuC,EAAE,CAAC,QAAQ,GAAG,YAAY;AACvE,UAAM,qBAAqB,gCAAgC,KAAK,MAAM;AACtE,QAAI,sBAAsB,yBAAyB,kBAAkB,GAAG;AACvE,YAAM,kBAAkB,IAAI,YAAY;AAAA,QAAK,CAAC,SAC7C,YAAY,gBAAgB,MAAM,kBAAkB;AAAA,MACrD;AAAA,IACD;AAEA,WAAO,eAAe,KAAK;AAAA,EAC5B;AAEA,UAAQ,KAAK,QAAQ;AAAA,IACpB,KAAK,OAAO;AACX,aAAO,uBAAuB,YAAY;AACzC,cAAM,SAAS,MAAM,OAAO,aAAa,KAAK,IAAI;AAElD,YAAI,CAAC,OAAQ,OAAM,IAAI,MAAM,gBAAgB;AAC7C,eAAO,OAAO;AAAA,MACf,CAAC;AAAA,IACF;AAAA,IAEA,KAAK;AACJ,YAAM,IAAI,MAAM,oBAAoB;AAAA,IACrC;AACC,4BAAsB,KAAK,MAAM;AAAA,EACnC;AACD;AAEA,eAAe,uBAAuB,SAAgC;AACrE,QAAM,UAAU,WAAW,YAAY,MAAM,QAAQ,CAAC;AACvD;",
+  "sourcesContent": ["import {\n\tEditor,\n\tFileHelpers,\n\tTLImageExportOptions,\n\tTLShapeId,\n\texhaustiveSwitchError,\n} from '@tldraw/editor'\nimport {\n\tclipboardWrite,\n\tdoesClipboardSupportType,\n\tgetAdditionalClipboardWriteType,\n} from '../clipboard'\nimport { exportToImagePromiseForClipboard } from './export'\n\n/** @public */\nexport type TLCopyType = 'svg' | 'png'\n\n/** @public */\nexport interface CopyAsOptions extends TLImageExportOptions {\n\t/** The format to copy as. */\n\tformat: TLCopyType\n}\n\n/**\n * Copy the given shapes to the clipboard.\n *\n * @param editor - The editor instance.\n * @param ids - The ids of the shapes to copy.\n * @param format - The format to copy as. Defaults to png.\n * @param opts - Options for the copy.\n *\n * @public\n */\nexport function copyAs(editor: Editor, ids: TLShapeId[], opts: CopyAsOptions): Promise<void> {\n\t// Note:  it's important that this function itself isn't async and doesn't really use promises -\n\t// we need to create the relevant `ClipboardItem`s and call navigator.clipboard.write\n\t// synchronously to make sure safari knows that the user _wants_ to copy See\n\t// https://bugs.webkit.org/show_bug.cgi?id=222262\n\n\tif (!navigator.clipboard) return Promise.reject(new Error('Copy not supported'))\n\tif (navigator.clipboard.write as any) {\n\t\tconst { blobPromise, mimeType } = exportToImagePromiseForClipboard(editor, ids, opts)\n\n\t\tconst types: Record<string, Promise<Blob>> = { [mimeType]: blobPromise }\n\t\tconst additionalMimeType = getAdditionalClipboardWriteType(opts.format)\n\t\tif (additionalMimeType && doesClipboardSupportType(additionalMimeType)) {\n\t\t\ttypes[additionalMimeType] = blobPromise.then((blob) =>\n\t\t\t\tFileHelpers.rewriteMimeType(blob, additionalMimeType)\n\t\t\t)\n\t\t}\n\n\t\treturn clipboardWrite(types)\n\t}\n\n\tswitch (opts.format) {\n\t\tcase 'svg': {\n\t\t\treturn fallbackWriteTextAsync(async () => {\n\t\t\t\tconst result = await editor.getSvgString(ids, opts)\n\n\t\t\t\tif (!result) throw new Error('Failed to copy')\n\t\t\t\treturn result.svg\n\t\t\t})\n\t\t}\n\n\t\tcase 'png':\n\t\t\tthrow new Error('Copy not supported')\n\t\tdefault:\n\t\t\texhaustiveSwitchError(opts.format)\n\t}\n}\n\nasync function fallbackWriteTextAsync(getText: () => Promise<string>) {\n\tawait navigator.clipboard?.writeText?.(await getText())\n}\n"],
+  "mappings": "AAAA;AAAA,EAEC;AAAA,EAGA;AAAA,OACM;AACP;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,OACM;AACP,SAAS,wCAAwC;AAqB1C,SAAS,OAAO,QAAgB,KAAkB,MAAoC;AAM5F,MAAI,CAAC,UAAU,UAAW,QAAO,QAAQ,OAAO,IAAI,MAAM,oBAAoB,CAAC;AAC/E,MAAI,UAAU,UAAU,OAAc;AACrC,UAAM,EAAE,aAAa,SAAS,IAAI,iCAAiC,QAAQ,KAAK,IAAI;AAEpF,UAAM,QAAuC,EAAE,CAAC,QAAQ,GAAG,YAAY;AACvE,UAAM,qBAAqB,gCAAgC,KAAK,MAAM;AACtE,QAAI,sBAAsB,yBAAyB,kBAAkB,GAAG;AACvE,YAAM,kBAAkB,IAAI,YAAY;AAAA,QAAK,CAAC,SAC7C,YAAY,gBAAgB,MAAM,kBAAkB;AAAA,MACrD;AAAA,IACD;AAEA,WAAO,eAAe,KAAK;AAAA,EAC5B;AAEA,UAAQ,KAAK,QAAQ;AAAA,IACpB,KAAK,OAAO;AACX,aAAO,uBAAuB,YAAY;AACzC,cAAM,SAAS,MAAM,OAAO,aAAa,KAAK,IAAI;AAElD,YAAI,CAAC,OAAQ,OAAM,IAAI,MAAM,gBAAgB;AAC7C,eAAO,OAAO;AAAA,MACf,CAAC;AAAA,IACF;AAAA,IAEA,KAAK;AACJ,YAAM,IAAI,MAAM,oBAAoB;AAAA,IACrC;AACC,4BAAsB,KAAK,MAAM;AAAA,EACnC;AACD;AAEA,eAAe,uBAAuB,SAAgC;AACrE,QAAM,UAAU,WAAW,YAAY,MAAM,QAAQ,CAAC;AACvD;",
   "names": []
 }

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

@@ -23,25 +23,6 @@ async function exportToString(editor, ids, format, opts = {}) {
     }
   }
 }
-async function exportToBlob({
-  editor,
-  ids,
-  format,
-  opts = {}
-}) {
-  const idsToUse = ids?.length ? ids : [...editor.getCurrentPageShapeIds()];
-  switch (format) {
-    case "jpeg":
-    case "png":
-    case "webp":
-    case "svg": {
-      return (await editor.toImage(idsToUse, { ...opts, format })).blob;
-    }
-    default: {
-      exhaustiveSwitchError(format);
-    }
-  }
-}
 const clipboardMimeTypesByFormat = {
   jpeg: "image/jpeg",
   png: "image/png",
@@ -59,7 +40,6 @@ function exportToImagePromiseForClipboard(editor, ids, opts = {}) {
   };
 }
 export {
-  exportToBlob,
   exportToImagePromiseForClipboard,
   exportToString
 };

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/lib/utils/export/export.ts"],
-  "sourcesContent": ["import {\n\tEditor,\n\tFileHelpers,\n\tTLExportType,\n\tTLImageExportOptions,\n\tTLShapeId,\n\texhaustiveSwitchError,\n} from '@tldraw/editor'\n\nasync function getSvgString(editor: Editor, ids: TLShapeId[], opts: TLImageExportOptions) {\n\tconst svg = await editor.getSvgString(ids, opts)\n\tif (!svg) {\n\t\tthrow new Error('Could not construct SVG.')\n\t}\n\treturn svg\n}\n\nexport async function exportToString(\n\teditor: Editor,\n\tids: TLShapeId[],\n\tformat: 'svg' | 'json',\n\topts: TLImageExportOptions = {}\n) {\n\tswitch (format) {\n\t\tcase 'svg': {\n\t\t\treturn (await getSvgString(editor, ids, opts))?.svg\n\t\t}\n\t\tcase 'json': {\n\t\t\tconst data = await editor.resolveAssetsInContent(editor.getContentFromCurrentPage(ids))\n\t\t\treturn JSON.stringify(data)\n\t\t}\n\t\tdefault: {\n\t\t\texhaustiveSwitchError(format)\n\t\t}\n\t}\n}\n\n/**\n * Export the given shapes as a blob.\n * @param editor - The editor instance.\n * @param ids - The ids of the shapes to export.\n * @param format - The format to export as.\n * @param opts - Rendering options.\n * @returns A promise that resolves to a blob.\n * @deprecated Use {@link @tldraw/editor#Editor.toImage} instead.\n * @public\n */\nexport async function exportToBlob({\n\teditor,\n\tids,\n\tformat,\n\topts = {},\n}: {\n\teditor: Editor\n\tids: TLShapeId[]\n\tformat: TLExportType\n\topts?: TLImageExportOptions\n}): Promise<Blob> {\n\tconst idsToUse = ids?.length ? ids : [...editor.getCurrentPageShapeIds()]\n\tswitch (format) {\n\t\tcase 'jpeg':\n\t\tcase 'png':\n\t\tcase 'webp':\n\t\tcase 'svg': {\n\t\t\treturn (await editor.toImage(idsToUse, { ...opts, format })).blob\n\t\t}\n\t\tdefault: {\n\t\t\texhaustiveSwitchError(format)\n\t\t}\n\t}\n}\n\nconst clipboardMimeTypesByFormat = {\n\tjpeg: 'image/jpeg',\n\tpng: 'image/png',\n\twebp: 'image/webp',\n\tsvg: 'text/plain',\n}\n\nexport function exportToImagePromiseForClipboard(\n\teditor: Editor,\n\tids: TLShapeId[],\n\topts: TLImageExportOptions = {}\n): { blobPromise: Promise<Blob>; mimeType: string } {\n\tconst idsToUse = ids?.length ? ids : [...editor.getCurrentPageShapeIds()]\n\tconst format = opts.format ?? 'png'\n\treturn {\n\t\tblobPromise: editor\n\t\t\t.toImage(idsToUse, opts)\n\t\t\t.then((result) =>\n\t\t\t\tFileHelpers.rewriteMimeType(result.blob, clipboardMimeTypesByFormat[format])\n\t\t\t),\n\t\tmimeType: clipboardMimeTypesByFormat[format],\n\t}\n}\n"],
-  "mappings": "AAAA;AAAA,EAEC;AAAA,EAIA;AAAA,OACM;AAEP,eAAe,aAAa,QAAgB,KAAkB,MAA4B;AACzF,QAAM,MAAM,MAAM,OAAO,aAAa,KAAK,IAAI;AAC/C,MAAI,CAAC,KAAK;AACT,UAAM,IAAI,MAAM,0BAA0B;AAAA,EAC3C;AACA,SAAO;AACR;AAEA,eAAsB,eACrB,QACA,KACA,QACA,OAA6B,CAAC,GAC7B;AACD,UAAQ,QAAQ;AAAA,IACf,KAAK,OAAO;AACX,cAAQ,MAAM,aAAa,QAAQ,KAAK,IAAI,IAAI;AAAA,IACjD;AAAA,IACA,KAAK,QAAQ;AACZ,YAAM,OAAO,MAAM,OAAO,uBAAuB,OAAO,0BAA0B,GAAG,CAAC;AACtF,aAAO,KAAK,UAAU,IAAI;AAAA,IAC3B;AAAA,IACA,SAAS;AACR,4BAAsB,MAAM;AAAA,IAC7B;AAAA,EACD;AACD;AAYA,eAAsB,aAAa;AAAA,EAClC;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO,CAAC;AACT,GAKkB;AACjB,QAAM,WAAW,KAAK,SAAS,MAAM,CAAC,GAAG,OAAO,uBAAuB,CAAC;AACxE,UAAQ,QAAQ;AAAA,IACf,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK,OAAO;AACX,cAAQ,MAAM,OAAO,QAAQ,UAAU,EAAE,GAAG,MAAM,OAAO,CAAC,GAAG;AAAA,IAC9D;AAAA,IACA,SAAS;AACR,4BAAsB,MAAM;AAAA,IAC7B;AAAA,EACD;AACD;AAEA,MAAM,6BAA6B;AAAA,EAClC,MAAM;AAAA,EACN,KAAK;AAAA,EACL,MAAM;AAAA,EACN,KAAK;AACN;AAEO,SAAS,iCACf,QACA,KACA,OAA6B,CAAC,GACqB;AACnD,QAAM,WAAW,KAAK,SAAS,MAAM,CAAC,GAAG,OAAO,uBAAuB,CAAC;AACxE,QAAM,SAAS,KAAK,UAAU;AAC9B,SAAO;AAAA,IACN,aAAa,OACX,QAAQ,UAAU,IAAI,EACtB;AAAA,MAAK,CAAC,WACN,YAAY,gBAAgB,OAAO,MAAM,2BAA2B,MAAM,CAAC;AAAA,IAC5E;AAAA,IACD,UAAU,2BAA2B,MAAM;AAAA,EAC5C;AACD;",
+  "sourcesContent": ["import {\n\tEditor,\n\tFileHelpers,\n\tTLImageExportOptions,\n\tTLShapeId,\n\texhaustiveSwitchError,\n} from '@tldraw/editor'\n\nasync function getSvgString(editor: Editor, ids: TLShapeId[], opts: TLImageExportOptions) {\n\tconst svg = await editor.getSvgString(ids, opts)\n\tif (!svg) {\n\t\tthrow new Error('Could not construct SVG.')\n\t}\n\treturn svg\n}\n\nexport async function exportToString(\n\teditor: Editor,\n\tids: TLShapeId[],\n\tformat: 'svg' | 'json',\n\topts: TLImageExportOptions = {}\n) {\n\tswitch (format) {\n\t\tcase 'svg': {\n\t\t\treturn (await getSvgString(editor, ids, opts))?.svg\n\t\t}\n\t\tcase 'json': {\n\t\t\tconst data = await editor.resolveAssetsInContent(editor.getContentFromCurrentPage(ids))\n\t\t\treturn JSON.stringify(data)\n\t\t}\n\t\tdefault: {\n\t\t\texhaustiveSwitchError(format)\n\t\t}\n\t}\n}\n\nconst clipboardMimeTypesByFormat = {\n\tjpeg: 'image/jpeg',\n\tpng: 'image/png',\n\twebp: 'image/webp',\n\tsvg: 'text/plain',\n}\n\nexport function exportToImagePromiseForClipboard(\n\teditor: Editor,\n\tids: TLShapeId[],\n\topts: TLImageExportOptions = {}\n): { blobPromise: Promise<Blob>; mimeType: string } {\n\tconst idsToUse = ids?.length ? ids : [...editor.getCurrentPageShapeIds()]\n\tconst format = opts.format ?? 'png'\n\treturn {\n\t\tblobPromise: editor\n\t\t\t.toImage(idsToUse, opts)\n\t\t\t.then((result) =>\n\t\t\t\tFileHelpers.rewriteMimeType(result.blob, clipboardMimeTypesByFormat[format])\n\t\t\t),\n\t\tmimeType: clipboardMimeTypesByFormat[format],\n\t}\n}\n"],
+  "mappings": "AAAA;AAAA,EAEC;AAAA,EAGA;AAAA,OACM;AAEP,eAAe,aAAa,QAAgB,KAAkB,MAA4B;AACzF,QAAM,MAAM,MAAM,OAAO,aAAa,KAAK,IAAI;AAC/C,MAAI,CAAC,KAAK;AACT,UAAM,IAAI,MAAM,0BAA0B;AAAA,EAC3C;AACA,SAAO;AACR;AAEA,eAAsB,eACrB,QACA,KACA,QACA,OAA6B,CAAC,GAC7B;AACD,UAAQ,QAAQ;AAAA,IACf,KAAK,OAAO;AACX,cAAQ,MAAM,aAAa,QAAQ,KAAK,IAAI,IAAI;AAAA,IACjD;AAAA,IACA,KAAK,QAAQ;AACZ,YAAM,OAAO,MAAM,OAAO,uBAAuB,OAAO,0BAA0B,GAAG,CAAC;AACtF,aAAO,KAAK,UAAU,IAAI;AAAA,IAC3B;AAAA,IACA,SAAS;AACR,4BAAsB,MAAM;AAAA,IAC7B;AAAA,EACD;AACD;AAEA,MAAM,6BAA6B;AAAA,EAClC,MAAM;AAAA,EACN,KAAK;AAAA,EACL,MAAM;AAAA,EACN,KAAK;AACN;AAEO,SAAS,iCACf,QACA,KACA,OAA6B,CAAC,GACqB;AACnD,QAAM,WAAW,KAAK,SAAS,MAAM,CAAC,GAAG,OAAO,uBAAuB,CAAC;AACxE,QAAM,SAAS,KAAK,UAAU;AAC9B,SAAO;AAAA,IACN,aAAa,OACX,QAAQ,UAAU,IAAI,EACtB;AAAA,MAAK,CAAC,WACN,YAAY,gBAAgB,OAAO,MAAM,2BAA2B,MAAM,CAAC;AAAA,IAC5E;AAAA,IACD,UAAU,2BAA2B,MAAM;AAAA,EAC5C;AACD;",
   "names": []
 }

package/dist-esm/lib/utils/export/exportAs.mjs

@@ -1,8 +1,7 @@
 import {
   sanitizeId
 } from "@tldraw/editor";
-async function exportAs(...args) {
-  const [editor, ids, opts] = typeof args[2] === "object" ? args : [args[0], args[1], { ...args[4], format: args[2] ?? "png", name: args[3] }];
+async function exportAs(editor, ids, opts) {
   let name = opts.name;
   if (!name) {
     name = `shapes at ${getTimestamp()}`;

package/dist-esm/lib/utils/export/exportAs.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/lib/utils/export/exportAs.ts"],
-  "sourcesContent": ["import {\n\tEditor,\n\tsanitizeId,\n\tTLExportType,\n\tTLFrameShape,\n\tTLImageExportOptions,\n\tTLShapeId,\n} from '@tldraw/editor'\n\n/** @public */\nexport interface ExportAsOptions extends TLImageExportOptions {\n\t/** {@inheritdoc @tldraw/editor#TLImageExportOptions.format} */\n\tformat: TLExportType\n\t/** Name of the exported file. If undefined a predefined name, based on the selection, will be used. */\n\tname?: string\n}\n\n/**\n * Export the given shapes as files.\n *\n * @param editor - The editor instance.\n * @param ids - The ids of the shapes to export.\n * @param opts - Options for the export.\n *\n * @public\n */\nexport async function exportAs(\n\teditor: Editor,\n\tids: TLShapeId[],\n\topts: ExportAsOptions\n): Promise<void>\n/**\n * @deprecated The format & name parameters are now part of the opts object.\n * @public\n */\nexport async function exportAs(\n\teditor: Editor,\n\tids: TLShapeId[],\n\tformat?: TLExportType,\n\tname?: string,\n\topts?: TLImageExportOptions\n): Promise<void>\nexport async function exportAs(\n\t...args:\n\t\t| [\n\t\t\t\teditor: Editor,\n\t\t\t\tids: TLShapeId[],\n\t\t\t\topts: TLImageExportOptions & { format: TLExportType; name?: string },\n\t\t  ]\n\t\t| [\n\t\t\t\teditor: Editor,\n\t\t\t\tids: TLShapeId[],\n\t\t\t\tformat?: TLExportType,\n\t\t\t\tname?: string,\n\t\t\t\topts?: TLImageExportOptions,\n\t\t  ]\n) {\n\tconst [editor, ids, opts] =\n\t\ttypeof args[2] === 'object'\n\t\t\t? args\n\t\t\t: [args[0], args[1], { ...args[4], format: args[2] ?? 'png', name: args[3] }]\n\n\t// If we don't get name then use a predefined one\n\tlet name = opts.name\n\tif (!name) {\n\t\tname = `shapes at ${getTimestamp()}`\n\t\tif (ids.length === 1) {\n\t\t\tconst first = editor.getShape(ids[0])!\n\t\t\tif (editor.isShapeOfType<TLFrameShape>(first, 'frame')) {\n\t\t\t\tname = first.props.name || 'frame'\n\t\t\t} else {\n\t\t\t\tname = `${sanitizeId(first.id)} at ${getTimestamp()}`\n\t\t\t}\n\t\t}\n\t}\n\tname += `.${opts.format}`\n\n\tconst { blob } = await editor.toImage(ids, opts)\n\tconst file = new File([blob], name, { type: blob.type })\n\tdownloadFile(file)\n}\n\nfunction getTimestamp() {\n\tconst now = new Date()\n\n\tconst year = String(now.getFullYear()).slice(2)\n\tconst month = String(now.getMonth() + 1).padStart(2, '0')\n\tconst day = String(now.getDate()).padStart(2, '0')\n\tconst hours = String(now.getHours()).padStart(2, '0')\n\tconst minutes = String(now.getMinutes()).padStart(2, '0')\n\tconst seconds = String(now.getSeconds()).padStart(2, '0')\n\n\treturn `${year}-${month}-${day} ${hours}.${minutes}.${seconds}`\n}\n\n/** @internal */\nexport function downloadFile(file: File) {\n\tconst link = document.createElement('a')\n\tconst url = URL.createObjectURL(file)\n\tlink.href = url\n\tlink.download = file.name\n\tlink.click()\n\tURL.revokeObjectURL(url)\n}\n"],
-  "mappings": "AAAA;AAAA,EAEC;AAAA,OAKM;AAmCP,eAAsB,YAClB,MAaF;AACD,QAAM,CAAC,QAAQ,KAAK,IAAI,IACvB,OAAO,KAAK,CAAC,MAAM,WAChB,OACA,CAAC,KAAK,CAAC,GAAG,KAAK,CAAC,GAAG,EAAE,GAAG,KAAK,CAAC,GAAG,QAAQ,KAAK,CAAC,KAAK,OAAO,MAAM,KAAK,CAAC,EAAE,CAAC;AAG9E,MAAI,OAAO,KAAK;AAChB,MAAI,CAAC,MAAM;AACV,WAAO,aAAa,aAAa,CAAC;AAClC,QAAI,IAAI,WAAW,GAAG;AACrB,YAAM,QAAQ,OAAO,SAAS,IAAI,CAAC,CAAC;AACpC,UAAI,OAAO,cAA4B,OAAO,OAAO,GAAG;AACvD,eAAO,MAAM,MAAM,QAAQ;AAAA,MAC5B,OAAO;AACN,eAAO,GAAG,WAAW,MAAM,EAAE,CAAC,OAAO,aAAa,CAAC;AAAA,MACpD;AAAA,IACD;AAAA,EACD;AACA,UAAQ,IAAI,KAAK,MAAM;AAEvB,QAAM,EAAE,KAAK,IAAI,MAAM,OAAO,QAAQ,KAAK,IAAI;AAC/C,QAAM,OAAO,IAAI,KAAK,CAAC,IAAI,GAAG,MAAM,EAAE,MAAM,KAAK,KAAK,CAAC;AACvD,eAAa,IAAI;AAClB;AAEA,SAAS,eAAe;AACvB,QAAM,MAAM,oBAAI,KAAK;AAErB,QAAM,OAAO,OAAO,IAAI,YAAY,CAAC,EAAE,MAAM,CAAC;AAC9C,QAAM,QAAQ,OAAO,IAAI,SAAS,IAAI,CAAC,EAAE,SAAS,GAAG,GAAG;AACxD,QAAM,MAAM,OAAO,IAAI,QAAQ,CAAC,EAAE,SAAS,GAAG,GAAG;AACjD,QAAM,QAAQ,OAAO,IAAI,SAAS,CAAC,EAAE,SAAS,GAAG,GAAG;AACpD,QAAM,UAAU,OAAO,IAAI,WAAW,CAAC,EAAE,SAAS,GAAG,GAAG;AACxD,QAAM,UAAU,OAAO,IAAI,WAAW,CAAC,EAAE,SAAS,GAAG,GAAG;AAExD,SAAO,GAAG,IAAI,IAAI,KAAK,IAAI,GAAG,IAAI,KAAK,IAAI,OAAO,IAAI,OAAO;AAC9D;AAGO,SAAS,aAAa,MAAY;AACxC,QAAM,OAAO,SAAS,cAAc,GAAG;AACvC,QAAM,MAAM,IAAI,gBAAgB,IAAI;AACpC,OAAK,OAAO;AACZ,OAAK,WAAW,KAAK;AACrB,OAAK,MAAM;AACX,MAAI,gBAAgB,GAAG;AACxB;",
+  "sourcesContent": ["import {\n\tEditor,\n\tsanitizeId,\n\tTLExportType,\n\tTLFrameShape,\n\tTLImageExportOptions,\n\tTLShapeId,\n} from '@tldraw/editor'\n\n/** @public */\nexport interface ExportAsOptions extends TLImageExportOptions {\n\t/** {@inheritdoc @tldraw/editor#TLImageExportOptions.format} */\n\tformat: TLExportType\n\t/** Name of the exported file. If undefined a predefined name, based on the selection, will be used. */\n\tname?: string\n}\n\n/**\n * Export the given shapes as files.\n *\n * @param editor - The editor instance.\n * @param ids - The ids of the shapes to export.\n * @param opts - Options for the export.\n *\n * @public\n */\nexport async function exportAs(\n\teditor: Editor,\n\tids: TLShapeId[],\n\topts: ExportAsOptions\n): Promise<void> {\n\t// If we don't get name then use a predefined one\n\tlet name = opts.name\n\tif (!name) {\n\t\tname = `shapes at ${getTimestamp()}`\n\t\tif (ids.length === 1) {\n\t\t\tconst first = editor.getShape(ids[0])!\n\t\t\tif (editor.isShapeOfType<TLFrameShape>(first, 'frame')) {\n\t\t\t\tname = first.props.name || 'frame'\n\t\t\t} else {\n\t\t\t\tname = `${sanitizeId(first.id)} at ${getTimestamp()}`\n\t\t\t}\n\t\t}\n\t}\n\tname += `.${opts.format}`\n\n\tconst { blob } = await editor.toImage(ids, opts)\n\tconst file = new File([blob], name, { type: blob.type })\n\tdownloadFile(file)\n}\n\nfunction getTimestamp() {\n\tconst now = new Date()\n\n\tconst year = String(now.getFullYear()).slice(2)\n\tconst month = String(now.getMonth() + 1).padStart(2, '0')\n\tconst day = String(now.getDate()).padStart(2, '0')\n\tconst hours = String(now.getHours()).padStart(2, '0')\n\tconst minutes = String(now.getMinutes()).padStart(2, '0')\n\tconst seconds = String(now.getSeconds()).padStart(2, '0')\n\n\treturn `${year}-${month}-${day} ${hours}.${minutes}.${seconds}`\n}\n\n/** @internal */\nexport function downloadFile(file: File) {\n\tconst link = document.createElement('a')\n\tconst url = URL.createObjectURL(file)\n\tlink.href = url\n\tlink.download = file.name\n\tlink.click()\n\tURL.revokeObjectURL(url)\n}\n"],
+  "mappings": "AAAA;AAAA,EAEC;AAAA,OAKM;AAmBP,eAAsB,SACrB,QACA,KACA,MACgB;AAEhB,MAAI,OAAO,KAAK;AAChB,MAAI,CAAC,MAAM;AACV,WAAO,aAAa,aAAa,CAAC;AAClC,QAAI,IAAI,WAAW,GAAG;AACrB,YAAM,QAAQ,OAAO,SAAS,IAAI,CAAC,CAAC;AACpC,UAAI,OAAO,cAA4B,OAAO,OAAO,GAAG;AACvD,eAAO,MAAM,MAAM,QAAQ;AAAA,MAC5B,OAAO;AACN,eAAO,GAAG,WAAW,MAAM,EAAE,CAAC,OAAO,aAAa,CAAC;AAAA,MACpD;AAAA,IACD;AAAA,EACD;AACA,UAAQ,IAAI,KAAK,MAAM;AAEvB,QAAM,EAAE,KAAK,IAAI,MAAM,OAAO,QAAQ,KAAK,IAAI;AAC/C,QAAM,OAAO,IAAI,KAAK,CAAC,IAAI,GAAG,MAAM,EAAE,MAAM,KAAK,KAAK,CAAC;AACvD,eAAa,IAAI;AAClB;AAEA,SAAS,eAAe;AACvB,QAAM,MAAM,oBAAI,KAAK;AAErB,QAAM,OAAO,OAAO,IAAI,YAAY,CAAC,EAAE,MAAM,CAAC;AAC9C,QAAM,QAAQ,OAAO,IAAI,SAAS,IAAI,CAAC,EAAE,SAAS,GAAG,GAAG;AACxD,QAAM,MAAM,OAAO,IAAI,QAAQ,CAAC,EAAE,SAAS,GAAG,GAAG;AACjD,QAAM,QAAQ,OAAO,IAAI,SAAS,CAAC,EAAE,SAAS,GAAG,GAAG;AACpD,QAAM,UAAU,OAAO,IAAI,WAAW,CAAC,EAAE,SAAS,GAAG,GAAG;AACxD,QAAM,UAAU,OAAO,IAAI,WAAW,CAAC,EAAE,SAAS,GAAG,GAAG;AAExD,SAAO,GAAG,IAAI,IAAI,KAAK,IAAI,GAAG,IAAI,KAAK,IAAI,OAAO,IAAI,OAAO;AAC9D;AAGO,SAAS,aAAa,MAAY;AACxC,QAAM,OAAO,SAAS,cAAc,GAAG;AACvC,QAAM,MAAM,IAAI,gBAAgB,IAAI;AACpC,OAAK,OAAO;AACZ,OAAK,WAAW,KAAK;AACrB,OAAK,MAAM;AACX,MAAI,gBAAgB,GAAG;AACxB;",
   "names": []
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "tldraw",
   "description": "A tiny little drawing editor.",
-  "version": "3.16.0-canary.5170ef6b6e20",
+  "version": "3.16.0-canary.5462c7eac75a",
   "author": {
     "name": "tldraw Inc.",
     "email": "hello@tldraw.com"
@@ -55,8 +55,8 @@
     "@tiptap/pm": "^2.9.1",
     "@tiptap/react": "^2.9.1",
     "@tiptap/starter-kit": "^2.9.1",
-    "@tldraw/editor": "3.16.0-canary.5170ef6b6e20",
-    "@tldraw/store": "3.16.0-canary.5170ef6b6e20",
+    "@tldraw/editor": "3.16.0-canary.5462c7eac75a",
+    "@tldraw/store": "3.16.0-canary.5462c7eac75a",
     "classnames": "^2.5.1",
     "hotkeys-js": "^3.13.9",
     "idb": "^7.1.1",

package/src/index.ts

@@ -171,11 +171,7 @@ export {
 export { getStrokePoints } from './lib/shapes/shared/freehand/getStrokePoints'
 export { getSvgPathFromStrokePoints } from './lib/shapes/shared/freehand/svg'
 export { type StrokeOptions, type StrokePoint } from './lib/shapes/shared/freehand/types'
-export {
-	PlainTextLabel,
-	TextLabel,
-	type PlainTextLabelProps,
-} from './lib/shapes/shared/PlainTextLabel'
+export { PlainTextLabel, type PlainTextLabelProps } from './lib/shapes/shared/PlainTextLabel'
 export {
 	RichTextLabel,
 	RichTextSVG,
@@ -183,10 +179,9 @@ export {
 	type RichTextSVGProps,
 } from './lib/shapes/shared/RichTextLabel'
 export { useDefaultColorTheme } from './lib/shapes/shared/useDefaultColorTheme'
-export { useEditablePlainText, useEditableText } from './lib/shapes/shared/useEditablePlainText'
+export { useEditablePlainText } from './lib/shapes/shared/useEditablePlainText'
 export { useEditableRichText } from './lib/shapes/shared/useEditableRichText'
 export {
-	useAsset,
 	useImageOrVideoAsset,
 	type UseImageOrVideoAssetOptions,
 } from './lib/shapes/shared/useImageOrVideoAsset'
@@ -365,10 +360,6 @@ export {
 	TldrawUiMenuSubmenu,
 	type TLUiMenuSubmenuProps,
 } from './lib/ui/components/primitives/menus/TldrawUiMenuSubmenu'
-export {
-	TldrawUiButtonPicker,
-	type TLUiButtonPickerProps,
-} from './lib/ui/components/primitives/TldrawUiButtonPicker'
 export {
 	TldrawUiContextualToolbar,
 	type TLUiContextualToolbarProps,
@@ -448,17 +439,44 @@ export {
 	type TLUiStylePanelProps,
 } from './lib/ui/components/StylePanel/DefaultStylePanel'
 export {
-	ArrowheadStylePickerSet,
-	CommonStylePickerSet,
 	DefaultStylePanelContent,
-	GeoStylePickerSet,
-	OpacitySlider,
-	SplineStylePickerSet,
-	TextStylePickerSet,
-	type StylePickerSetProps,
-	type ThemeStylePickerSetProps,
-	type TLUiStylePanelContentProps,
+	StylePanelArrowheadPicker,
+	StylePanelArrowKindPicker,
+	StylePanelColorPicker,
+	StylePanelDashPicker,
+	StylePanelFillPicker,
+	StylePanelFontPicker,
+	StylePanelGeoShapePicker,
+	StylePanelLabelAlignPicker,
+	StylePanelOpacityPicker,
+	StylePanelSection,
+	StylePanelSizePicker,
+	StylePanelSplinePicker,
+	StylePanelTextAlignPicker,
+	type StylePanelSectionProps,
 } from './lib/ui/components/StylePanel/DefaultStylePanelContent'
+export {
+	StylePanelButtonPicker,
+	type StylePanelButtonPickerProps,
+} from './lib/ui/components/StylePanel/StylePanelButtonPicker'
+export {
+	StylePanelContextProvider,
+	useStylePanelContext,
+	type StylePanelContext,
+	type StylePanelContextProviderProps,
+} from './lib/ui/components/StylePanel/StylePanelContext'
+export {
+	StylePanelDoubleDropdownPicker,
+	type StylePanelDoubleDropdownPickerProps,
+} from './lib/ui/components/StylePanel/StylePanelDoubleDropdownPicker'
+export {
+	StylePanelDropdownPicker,
+	type StylePanelDropdownPickerProps,
+} from './lib/ui/components/StylePanel/StylePanelDropdownPicker'
+export {
+	StylePanelSubheading,
+	type StylePanelSubheadingProps,
+} from './lib/ui/components/StylePanel/StylePanelSubheading'
 export {
 	DefaultImageToolbar,
 	type TLUiImageToolbarProps,
@@ -636,7 +654,6 @@ export { preloadFont, type TLTypeFace } from './lib/utils/assets/preload-font'
 export { getEmbedInfo, type TLEmbedResult } from './lib/utils/embeds/embeds'
 export { putExcalidrawContent } from './lib/utils/excalidraw/putExcalidrawContent'
 export { copyAs, type CopyAsOptions, type TLCopyType } from './lib/utils/export/copyAs'
-export { exportToBlob } from './lib/utils/export/export'
 export { downloadFile, exportAs, type ExportAsOptions } from './lib/utils/export/exportAs'
 export { fitFrameToContent, removeFrame } from './lib/utils/frames/frames'
 export {

package/src/lib/defaultExternalContentHandlers.ts

@@ -901,8 +901,22 @@ export function notifyIfFileNotAllowed(file: File, options: TLDefaultExternalCon
 	}
 
 	if (file.size > maxAssetSize) {
+		const formatBytes = (bytes: number): string => {
+			if (bytes === 0) return '0 bytes'
+
+			const units = ['bytes', 'KB', 'MB', 'GB', 'TB', 'PB']
+			const base = 1024
+			const unitIndex = Math.floor(Math.log(bytes) / Math.log(base))
+
+			const value = bytes / Math.pow(base, unitIndex)
+			const formatted = value % 1 === 0 ? value.toString() : value.toFixed(1)
+
+			return `${formatted} ${units[unitIndex]}`
+		}
+
 		toasts.addToast({
 			title: msg('assets.files.size-too-big'),
+			description: msg('assets.files.maximum-size').replace('{size}', formatBytes(maxAssetSize)),
 			severity: 'error',
 		})
 		return false

package/src/lib/shapes/arrow/ArrowShapeTool.test.ts

@@ -569,12 +569,12 @@ describe('reparenting issue', () => {
 		const arrow1BoundIndex = editor.getShape(arrow1Id)!.index
 		const arrow2BoundIndex = editor.getShape(arrow2Id)!.index
 		expect(arrow1BoundIndex).toBe('a1V')
-		expect(arrow2BoundIndex).toBe('a1F')
+		expect(arrow2BoundIndex).toBe('a1G')
 
 		// nudge everything around and make sure we all stay in the right order
 		editor.selectAll().nudgeShapes(editor.getSelectedShapeIds(), { x: -1, y: 0 })
 		expect(editor.getShape(arrow1Id)!.index).toBe('a1V')
-		expect(editor.getShape(arrow2Id)!.index).toBe('a1F')
+		expect(editor.getShape(arrow2Id)!.index).toBe('a1G')
 	})
 })
 

package/src/lib/shapes/arrow/ArrowShapeUtil.test.ts

@@ -579,3 +579,44 @@ describe("an arrow's parents", () => {
 		})
 	})
 })
+
+describe('Arrow export bounds', () => {
+	it('excludes labels from shape bounds for export', () => {
+		editor.selectAll().deleteShapes(editor.getSelectedShapeIds())
+
+		// Create shapes for the arrow to bind to
+		editor.createShapes([
+			{ id: ids.box1, type: 'geo', x: 100, y: 100, props: { w: 100, h: 100 } },
+			{ id: ids.box2, type: 'geo', x: 300, y: 100, props: { w: 100, h: 100 } },
+		])
+
+		// Create an arrow with a label
+		editor.createShapes([
+			{
+				id: ids.arrow1,
+				type: 'arrow',
+				x: 0,
+				y: 0,
+				props: {
+					start: { x: 0, y: 0 },
+					end: { x: 0, y: 100 },
+					richText: toRichText('Test Label'),
+				},
+			},
+		])
+
+		// Get the page bounds (should exclude labels due to excludeFromShapeBounds flag)
+		const pageBounds = editor.getShapePageBounds(ids.arrow1)
+		expect(pageBounds).toBeDefined()
+
+		// The bounds should be smaller than if labels were included
+		// Since the arrow has a label that's excluded, the bounds should be minimal
+		expect(pageBounds!.width).toBeLessThan(200) // Should not include label width
+		expect(pageBounds!.height).toBeLessThan(200) // Should not include label height
+
+		// Verify that the arrow has a label (which should be excluded from shape bounds)
+		const arrow = editor.getShape(ids.arrow1) as TLArrowShape
+		expect(arrow.props.richText).toBeDefined()
+		expect(arrow.props.richText).not.toBeNull()
+	})
+})

package/src/lib/shapes/arrow/arrowLabel.ts

@@ -227,6 +227,14 @@ interface ArrowheadInfo {
 	hasEndArrowhead: boolean
 }
 export function getArrowLabelPosition(editor: Editor, shape: TLArrowShape) {
+	const isEditing = editor.getEditingShapeId() === shape.id
+	if (!isEditing && isEmptyRichText(shape.props.richText)) {
+		// Short-circuit for empty labels.
+		const bodyGeom = getArrowBodyGeometry(editor, shape)
+		const labelCenter = bodyGeom.interpolateAlongEdge(0.5)
+		return { box: Box.FromCenter(labelCenter, new Vec(0, 0)), debugGeom: [] }
+	}
+
 	const debugGeom: Geometry2d[] = []
 	const info = getArrowInfo(editor, shape)!
 

package/src/lib/shapes/bookmark/BookmarkShapeUtil.tsx

@@ -13,7 +13,7 @@ import {
 	debounce,
 	getHashForString,
 	lerp,
-	stopEventPropagation,
+	markEventAsHandled,
 	tlenv,
 	toDomPrecision,
 	useEditor,
@@ -132,9 +132,9 @@ function BookmarkShapeComponent({ shape }: { shape: TLBookmarkShape }) {
 	const [isFaviconValid, setIsFaviconValid] = useState(true)
 	const onFaviconError = () => setIsFaviconValid(false)
 
-	const useStopPropagationOnShiftKey = useCallback<PointerEventHandler>(
+	const markAsHandledOnShiftKey = useCallback<PointerEventHandler>(
 		(e) => {
-			if (!editor.inputs.shiftKey) stopEventPropagation(e)
+			if (!editor.inputs.shiftKey) markEventAsHandled(e)
 		},
 		[editor]
 	)
@@ -182,8 +182,8 @@ function BookmarkShapeComponent({ shape }: { shape: TLBookmarkShape }) {
 						target="_blank"
 						rel="noopener noreferrer"
 						draggable={false}
-						onPointerDown={useStopPropagationOnShiftKey}
-						onPointerUp={useStopPropagationOnShiftKey}
+						onPointerDown={markAsHandledOnShiftKey}
+						onPointerUp={markAsHandledOnShiftKey}
 					>
 						{isFaviconValid && asset?.props.favicon ? (
 							<img

package/src/lib/shapes/frame/FrameShapeUtil.tsx

@@ -196,6 +196,7 @@ export class FrameShapeUtil extends BaseBoxShapeUtil<TLFrameShape> {
 					height,
 					isFilled: true,
 					isLabel: true,
+					excludeFromShapeBounds: true,
 				}),
 			],
 		})

package/src/lib/shapes/frame/components/FrameLabelInput.tsx

@@ -1,4 +1,4 @@
-import { TLFrameShape, TLShapeId, stopEventPropagation, useEditor } from '@tldraw/editor'
+import { TLFrameShape, TLShapeId, markEventAsHandled, useEditor } from '@tldraw/editor'
 import { forwardRef, useCallback } from 'react'
 import { defaultEmptyAs } from '../FrameShapeUtil'
 
@@ -13,7 +13,7 @@ export const FrameLabelInput = forwardRef<
 			if (e.key === 'Enter' && !e.nativeEvent.isComposing) {
 				// need to prevent the enter keydown making it's way up to the Idle state
 				// and sending us back into edit mode
-				stopEventPropagation(e)
+				markEventAsHandled(e)
 				e.currentTarget.blur()
 				editor.setEditingShape(null)
 			}
@@ -74,7 +74,7 @@ export const FrameLabelInput = forwardRef<
 				onKeyDown={handleKeyDown}
 				onBlur={handleBlur}
 				onChange={handleChange}
-				onPointerDown={isEditing ? stopEventPropagation : undefined}
+				onPointerDown={isEditing ? markEventAsHandled : undefined}
 				draggable={false}
 			/>
 			{defaultEmptyAs(name, 'Frame') + String.fromCharCode(8203)}

package/src/lib/shapes/geo/GeoShapeUtil.tsx

@@ -126,6 +126,7 @@ export class GeoShapeUtil extends BaseBoxShapeUtil<TLGeoShape> {
 					height: unscaledLabelHeight * shape.props.scale,
 					isFilled: true,
 					isLabel: true,
+					excludeFromShapeBounds: true,
 					isEmptyLabel: isEmptyRichText(shape.props.richText),
 				}),
 			],

package/src/lib/shapes/note/NoteShapeUtil.tsx

@@ -147,6 +147,7 @@ export class NoteShapeUtil extends ShapeUtil<TLNoteShape> {
 					height: lh,
 					isFilled: true,
 					isLabel: true,
+					excludeFromShapeBounds: true,
 				}),
 			],
 		})

package/src/lib/shapes/shared/HyperlinkButton.tsx

@@ -1,4 +1,4 @@
-import { stopEventPropagation, useEditor, useValue } from '@tldraw/editor'
+import { markEventAsHandled, useEditor, useValue } from '@tldraw/editor'
 import classNames from 'classnames'
 import { PointerEventHandler, useCallback } from 'react'
 
@@ -8,9 +8,9 @@ const LINK_ICON =
 export function HyperlinkButton({ url }: { url: string }) {
 	const editor = useEditor()
 	const hideButton = useValue('zoomLevel', () => editor.getZoomLevel() < 0.32, [editor])
-	const useStopPropagationOnShiftKey = useCallback<PointerEventHandler>(
+	const markAsHandledOnShiftKey = useCallback<PointerEventHandler>(
 		(e) => {
-			if (!editor.inputs.shiftKey) stopEventPropagation(e)
+			if (!editor.inputs.shiftKey) markEventAsHandled(e)
 		},
 		[editor]
 	)
@@ -22,8 +22,8 @@ export function HyperlinkButton({ url }: { url: string }) {
 			href={url}
 			target="_blank"
 			rel="noopener noreferrer"
-			onPointerDown={useStopPropagationOnShiftKey}
-			onPointerUp={useStopPropagationOnShiftKey}
+			onPointerDown={markAsHandledOnShiftKey}
+			onPointerUp={markAsHandledOnShiftKey}
 			title={url}
 			draggable={false}
 		>

package/src/lib/shapes/shared/PlainTextLabel.tsx

@@ -130,9 +130,3 @@ export const PlainTextLabel = React.memo(function PlainTextLabel({
 		</div>
 	)
 })
-
-/**
- * @deprecated Use `PlainTextLabel` instead.
- * @public
- */
-export const TextLabel = PlainTextLabel

package/src/lib/shapes/shared/useEditablePlainText.ts

@@ -3,9 +3,9 @@ import {
 	TLShapeId,
 	TLUnknownShape,
 	getPointerInfo,
+	markEventAsHandled,
 	noop,
 	preventDefault,
-	stopEventPropagation,
 	tlenv,
 	useEditor,
 	useValue,
@@ -136,7 +136,7 @@ export function useEditableTextCommon(shapeId: TLShapeId) {
 				shape: editor.getShape(shapeId)!,
 			})
 
-			stopEventPropagation(e) // we need to prevent blurring the input
+			e.stopPropagation() // we need to prevent blurring the input
 		},
 		[editor, shapeId]
 	)
@@ -157,19 +157,15 @@ export function useEditableTextCommon(shapeId: TLShapeId) {
 		[editor, shapeId]
 	)
 
+	const handleDoubleClick: (e: React.MouseEvent) => void = markEventAsHandled
+
 	return {
 		handleFocus: noop,
 		handleBlur: noop,
 		handleInputPointerDown,
-		handleDoubleClick: stopEventPropagation,
+		handleDoubleClick,
 		handlePaste,
 		isEditing,
 		isReadyForEditing,
 	}
 }
-
-/**
- * @deprecated Use `useEditablePlainText` instead.
- * @public
- */
-export const useEditableText = useEditablePlainText

package/src/lib/shapes/shared/useImageOrVideoAsset.ts

@@ -158,10 +158,3 @@ function resolveAssetUrl(
 			callback(url)
 		})
 }
-
-/**
- * @deprecated Use {@link useImageOrVideoAsset} instead.
- *
- * @public
- */
-export const useAsset = useImageOrVideoAsset

package/src/lib/shapes/text/PlainTextArea.tsx

@@ -1,4 +1,4 @@
-import { preventDefault, stopEventPropagation } from '@tldraw/editor'
+import { markEventAsHandled, preventDefault } from '@tldraw/editor'
 import React from 'react'
 import { TextAreaProps } from './RichTextArea'
 
@@ -46,8 +46,8 @@ export const PlainTextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps
 			onChange={onChange}
 			onKeyDown={(e) => handleKeyDown(e.nativeEvent)}
 			onBlur={handleBlur}
-			onTouchEnd={stopEventPropagation}
-			onContextMenu={isEditing ? stopEventPropagation : undefined}
+			onTouchEnd={markEventAsHandled}
+			onContextMenu={isEditing ? (e) => e.stopPropagation() : undefined}
 			onPointerDown={handleInputPointerDown}
 			onPaste={handlePaste}
 			onDoubleClick={handleDoubleClick}

package/src/lib/shapes/text/RichTextArea.tsx

@@ -10,7 +10,6 @@ import {
 	TLRichText,
 	TLShapeId,
 	preventDefault,
-	stopEventPropagation,
 	useEditor,
 	useEvent,
 	useUniqueSafeId,
@@ -233,13 +232,13 @@ export const RichTextArea = React.forwardRef<HTMLDivElement, TextAreaProps>(func
 			tabIndex={-1}
 			data-testid="rich-text-area"
 			className="tl-rich-text tl-text tl-text-input"
-			onContextMenu={isEditing ? stopEventPropagation : undefined}
+			onContextMenu={isEditing ? (e) => e.stopPropagation() : undefined}
 			// N.B. When PointerStateExtension was introduced, this was moved there.
 			// However, that caused selecting over list items to break.
 			// The handleDOMEvents in TipTap don't seem to support the pointerDownCapture event.
-			onPointerDownCapture={stopEventPropagation}
+			onPointerDownCapture={(e) => e.stopPropagation()}
 			// This onTouchEnd is important for Android to be able to change selection on text.
-			onTouchEnd={stopEventPropagation}
+			onTouchEnd={(e) => e.stopPropagation()}
 			// On FF, there's a behavior where dragging a selection will grab that selection into
 			// the drag event. However, once the drag is over, and you select away from the textarea,
 			// starting a drag over the textarea will restart a selection drag instead of a shape drag.

package/src/lib/ui/components/A11y.tsx

@@ -1,7 +1,7 @@
 import {
 	debugFlags,
 	Editor,
-	stopEventPropagation,
+	markEventAsHandled,
 	TLGeoShape,
 	TLShapeId,
 	unsafe__withoutCapture,
@@ -23,7 +23,7 @@ export function SkipToMainContent() {
 
 	const handleNavigateToFirstShape = useCallback(
 		(e: MouseEvent | KeyboardEvent) => {
-			stopEventPropagation(e)
+			markEventAsHandled(e)
 			button.current?.blur()
 			const shapes = editor.getCurrentPageShapesInReadingOrder()
 			if (!shapes.length) return

package/src/lib/ui/components/LanguageMenu.tsx

@@ -18,6 +18,7 @@ export function LanguageMenu() {
 				{LANGUAGES.map(({ locale, label }) => (
 					<TldrawUiMenuCheckboxItem
 						id={`language-${locale}`}
+						lang={locale}
 						key={locale}
 						title={locale}
 						label={label}

package/src/lib/ui/components/Minimap/DefaultMinimap.tsx

@@ -204,6 +204,7 @@ export function DefaultMinimap() {
 			<canvas
 				role="img"
 				aria-label={msg('navigation-zone.minimap')}
+				data-testid="minimap.canvas"
 				ref={rCanvas}
 				className="tlui-minimap__canvas"
 				onDoubleClick={onDoubleClick}

package/src/lib/ui/components/PageMenu/DefaultPageMenu.tsx

@@ -1,9 +1,9 @@
 import {
 	PageRecordType,
 	TLPageId,
+	markEventAsHandled,
 	releasePointerCapture,
 	setPointerCapture,
-	stopEventPropagation,
 	tlenv,
 	useEditor,
 	useValue,
@@ -451,7 +451,7 @@ export const DefaultPageMenu = memo(function DefaultPageMenu() {
 											if (e.key === 'Enter') {
 												if (page.id === currentPage.id) {
 													toggleEditing()
-													stopEventPropagation(e)
+													markEventAsHandled(e)
 												}
 											}
 										}}