tldraw 5.2.0-next.e2b8d10bf10e → 5.2.0

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/lib/utils/embeds/embeds.ts"],
-  "sourcesContent": ["import { safeParseUrl } from '@tldraw/editor'\nimport { TLEmbedDefinition } from '../../defaultEmbedDefinitions'\n\n// https://github.com/sindresorhus/escape-string-regexp/blob/main/index.js\nfunction escapeStringRegexp(string: string) {\n\tif (typeof string !== 'string') {\n\t\tthrow new TypeError('Expected a string')\n\t}\n\n\t// Escape characters with special meaning either inside or outside character sets.\n\t// Use a simple backslash escape when it\u2019s always valid, and a `\\xnn` escape when the simpler form would be disallowed by Unicode patterns\u2019 stricter grammar.\n\treturn string.replace(/[|\\\\{}()[\\]^$+*?.]/g, '\\\\$&').replace(/-/g, '\\\\x2d')\n}\n\n/** @public */\nexport function matchEmbedUrl(definitions: readonly TLEmbedDefinition[], url: string) {\n\tconst parsed = safeParseUrl(url)\n\tif (!parsed) return undefined\n\tconst host = parsed.host.replace('www.', '')\n\tfor (const localEmbedDef of definitions) {\n\t\tif (checkHostnames(localEmbedDef.hostnames, host)) {\n\t\t\tconst originalUrl = localEmbedDef.fromEmbedUrl(url)\n\t\t\tif (originalUrl) {\n\t\t\t\treturn {\n\t\t\t\t\tdefinition: localEmbedDef,\n\t\t\t\t\turl: originalUrl,\n\t\t\t\t\tembedUrl: url,\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\treturn undefined\n}\n\nconst globlikeRegExp = (input: string) => {\n\treturn input\n\t\t.split('*')\n\t\t.map((str) => escapeStringRegexp(str))\n\t\t.join('.+')\n}\n\nconst checkHostnames = (hostnames: readonly string[], targetHostname: string) => {\n\treturn !!hostnames.find((hostname) => {\n\t\tconst re = new RegExp(globlikeRegExp(hostname))\n\t\treturn targetHostname.match(re)\n\t})\n}\n\n/** @public */\nexport function matchUrl(definitions: readonly TLEmbedDefinition[], url: string) {\n\tconst parsed = safeParseUrl(url)\n\tif (!parsed) return undefined\n\tconst host = parsed.host.replace('www.', '')\n\tfor (const localEmbedDef of definitions) {\n\t\tif (checkHostnames(localEmbedDef.hostnames, host)) {\n\t\t\tconst embedUrl = localEmbedDef.toEmbedUrl(url)\n\n\t\t\tif (embedUrl) {\n\t\t\t\treturn {\n\t\t\t\t\tdefinition: localEmbedDef,\n\t\t\t\t\tembedUrl,\n\t\t\t\t\turl,\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\treturn undefined\n}\n\n/** @public */\nexport type TLEmbedResult =\n\t| {\n\t\t\tdefinition: TLEmbedDefinition\n\t\t\turl: string\n\t\t\tembedUrl: string\n\t  }\n\t| undefined\n\n/**\n * Tests whether an URL supports embedding and returns the result. If we encounter an error, we\n * return undefined.\n *\n * @param inputUrl - The URL to match\n * @public\n */\nexport function getEmbedInfo(\n\tdefinitions: readonly TLEmbedDefinition[],\n\tinputUrl: string\n): TLEmbedResult {\n\ttry {\n\t\treturn matchUrl(definitions, inputUrl) ?? matchEmbedUrl(definitions, inputUrl)\n\t} catch {\n\t\treturn undefined\n\t}\n}\n"],
-  "mappings": "AAAA,SAAS,oBAAoB;AAI7B,SAAS,mBAAmB,QAAgB;AAC3C,MAAI,OAAO,WAAW,UAAU;AAC/B,UAAM,IAAI,UAAU,mBAAmB;AAAA,EACxC;AAIA,SAAO,OAAO,QAAQ,uBAAuB,MAAM,EAAE,QAAQ,MAAM,OAAO;AAC3E;AAGO,SAAS,cAAc,aAA2C,KAAa;AACrF,QAAM,SAAS,aAAa,GAAG;AAC/B,MAAI,CAAC,OAAQ,QAAO;AACpB,QAAM,OAAO,OAAO,KAAK,QAAQ,QAAQ,EAAE;AAC3C,aAAW,iBAAiB,aAAa;AACxC,QAAI,eAAe,cAAc,WAAW,IAAI,GAAG;AAClD,YAAM,cAAc,cAAc,aAAa,GAAG;AAClD,UAAI,aAAa;AAChB,eAAO;AAAA,UACN,YAAY;AAAA,UACZ,KAAK;AAAA,UACL,UAAU;AAAA,QACX;AAAA,MACD;AAAA,IACD;AAAA,EACD;AACA,SAAO;AACR;AAEA,MAAM,iBAAiB,CAAC,UAAkB;AACzC,SAAO,MACL,MAAM,GAAG,EACT,IAAI,CAAC,QAAQ,mBAAmB,GAAG,CAAC,EACpC,KAAK,IAAI;AACZ;AAEA,MAAM,iBAAiB,CAAC,WAA8B,mBAA2B;AAChF,SAAO,CAAC,CAAC,UAAU,KAAK,CAAC,aAAa;AACrC,UAAM,KAAK,IAAI,OAAO,eAAe,QAAQ,CAAC;AAC9C,WAAO,eAAe,MAAM,EAAE;AAAA,EAC/B,CAAC;AACF;AAGO,SAAS,SAAS,aAA2C,KAAa;AAChF,QAAM,SAAS,aAAa,GAAG;AAC/B,MAAI,CAAC,OAAQ,QAAO;AACpB,QAAM,OAAO,OAAO,KAAK,QAAQ,QAAQ,EAAE;AAC3C,aAAW,iBAAiB,aAAa;AACxC,QAAI,eAAe,cAAc,WAAW,IAAI,GAAG;AAClD,YAAM,WAAW,cAAc,WAAW,GAAG;AAE7C,UAAI,UAAU;AACb,eAAO;AAAA,UACN,YAAY;AAAA,UACZ;AAAA,UACA;AAAA,QACD;AAAA,MACD;AAAA,IACD;AAAA,EACD;AACA,SAAO;AACR;AAkBO,SAAS,aACf,aACA,UACgB;AAChB,MAAI;AACH,WAAO,SAAS,aAAa,QAAQ,KAAK,cAAc,aAAa,QAAQ;AAAA,EAC9E,QAAQ;AACP,WAAO;AAAA,EACR;AACD;",
+  "sourcesContent": ["import { safeParseUrl } from '@tldraw/editor'\nimport { TLEmbedDefinition } from '../../defaultEmbedDefinitions'\n\n// https://github.com/sindresorhus/escape-string-regexp/blob/main/index.js\nfunction escapeStringRegexp(string: string) {\n\tif (typeof string !== 'string') {\n\t\tthrow new TypeError('Expected a string')\n\t}\n\n\t// Escape characters with special meaning either inside or outside character sets.\n\t// Use a simple backslash escape when it\u2019s always valid, and a `\\xnn` escape when the simpler form would be disallowed by Unicode patterns\u2019 stricter grammar.\n\treturn string.replace(/[|\\\\{}()[\\]^$+*?.]/g, '\\\\$&').replace(/-/g, '\\\\x2d')\n}\n\n/** @public */\nexport function matchEmbedUrl(definitions: readonly TLEmbedDefinition[], url: string) {\n\tconst parsed = safeParseUrl(url)\n\tif (!parsed) return undefined\n\tconst host = parsed.host.replace('www.', '')\n\tfor (const localEmbedDef of definitions) {\n\t\tif (checkHostnames(localEmbedDef.hostnames, host)) {\n\t\t\tconst originalUrl = localEmbedDef.fromEmbedUrl(url)\n\t\t\tif (originalUrl) {\n\t\t\t\treturn {\n\t\t\t\t\tdefinition: localEmbedDef,\n\t\t\t\t\turl: originalUrl,\n\t\t\t\t\tembedUrl: url,\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\treturn undefined\n}\n\nconst globlikeRegExp = (input: string) => {\n\treturn input\n\t\t.split('*')\n\t\t.map((str) => escapeStringRegexp(str))\n\t\t.join('.+')\n}\n\nconst checkHostnames = (hostnames: readonly string[], targetHostname: string) => {\n\treturn !!hostnames.find((hostname) => {\n\t\tconst re = new RegExp(globlikeRegExp(hostname))\n\t\treturn targetHostname.match(re)\n\t})\n}\n\n/** @public */\nexport function matchUrl(\n\tdefinitions: readonly TLEmbedDefinition[],\n\turl: string,\n\tembedConfig?: Record<string, unknown>\n) {\n\tconst parsed = safeParseUrl(url)\n\tif (!parsed) return undefined\n\tconst host = parsed.host.replace('www.', '')\n\tfor (const localEmbedDef of definitions) {\n\t\tif (checkHostnames(localEmbedDef.hostnames, host)) {\n\t\t\tconst embedUrl = localEmbedDef.toEmbedUrl(url, embedConfig?.[localEmbedDef.type])\n\n\t\t\tif (embedUrl) {\n\t\t\t\treturn {\n\t\t\t\t\tdefinition: localEmbedDef,\n\t\t\t\t\tembedUrl,\n\t\t\t\t\turl,\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\treturn undefined\n}\n\n/** @public */\nexport type TLEmbedResult =\n\t| {\n\t\t\tdefinition: TLEmbedDefinition\n\t\t\turl: string\n\t\t\tembedUrl: string\n\t  }\n\t| undefined\n\n/**\n * Tests whether an URL supports embedding and returns the result. If we encounter an error, we\n * return undefined.\n *\n * @param inputUrl - The URL to match\n * @param embedConfig - Optional per-embed config, keyed by embed type, passed to `toEmbedUrl`\n * @public\n */\nexport function getEmbedInfo(\n\tdefinitions: readonly TLEmbedDefinition[],\n\tinputUrl: string,\n\tembedConfig?: Record<string, unknown>\n): TLEmbedResult {\n\ttry {\n\t\treturn matchUrl(definitions, inputUrl, embedConfig) ?? matchEmbedUrl(definitions, inputUrl)\n\t} catch {\n\t\treturn undefined\n\t}\n}\n"],
+  "mappings": "AAAA,SAAS,oBAAoB;AAI7B,SAAS,mBAAmB,QAAgB;AAC3C,MAAI,OAAO,WAAW,UAAU;AAC/B,UAAM,IAAI,UAAU,mBAAmB;AAAA,EACxC;AAIA,SAAO,OAAO,QAAQ,uBAAuB,MAAM,EAAE,QAAQ,MAAM,OAAO;AAC3E;AAGO,SAAS,cAAc,aAA2C,KAAa;AACrF,QAAM,SAAS,aAAa,GAAG;AAC/B,MAAI,CAAC,OAAQ,QAAO;AACpB,QAAM,OAAO,OAAO,KAAK,QAAQ,QAAQ,EAAE;AAC3C,aAAW,iBAAiB,aAAa;AACxC,QAAI,eAAe,cAAc,WAAW,IAAI,GAAG;AAClD,YAAM,cAAc,cAAc,aAAa,GAAG;AAClD,UAAI,aAAa;AAChB,eAAO;AAAA,UACN,YAAY;AAAA,UACZ,KAAK;AAAA,UACL,UAAU;AAAA,QACX;AAAA,MACD;AAAA,IACD;AAAA,EACD;AACA,SAAO;AACR;AAEA,MAAM,iBAAiB,CAAC,UAAkB;AACzC,SAAO,MACL,MAAM,GAAG,EACT,IAAI,CAAC,QAAQ,mBAAmB,GAAG,CAAC,EACpC,KAAK,IAAI;AACZ;AAEA,MAAM,iBAAiB,CAAC,WAA8B,mBAA2B;AAChF,SAAO,CAAC,CAAC,UAAU,KAAK,CAAC,aAAa;AACrC,UAAM,KAAK,IAAI,OAAO,eAAe,QAAQ,CAAC;AAC9C,WAAO,eAAe,MAAM,EAAE;AAAA,EAC/B,CAAC;AACF;AAGO,SAAS,SACf,aACA,KACA,aACC;AACD,QAAM,SAAS,aAAa,GAAG;AAC/B,MAAI,CAAC,OAAQ,QAAO;AACpB,QAAM,OAAO,OAAO,KAAK,QAAQ,QAAQ,EAAE;AAC3C,aAAW,iBAAiB,aAAa;AACxC,QAAI,eAAe,cAAc,WAAW,IAAI,GAAG;AAClD,YAAM,WAAW,cAAc,WAAW,KAAK,cAAc,cAAc,IAAI,CAAC;AAEhF,UAAI,UAAU;AACb,eAAO;AAAA,UACN,YAAY;AAAA,UACZ;AAAA,UACA;AAAA,QACD;AAAA,MACD;AAAA,IACD;AAAA,EACD;AACA,SAAO;AACR;AAmBO,SAAS,aACf,aACA,UACA,aACgB;AAChB,MAAI;AACH,WAAO,SAAS,aAAa,UAAU,WAAW,KAAK,cAAc,aAAa,QAAQ;AAAA,EAC3F,QAAQ;AACP,WAAO;AAAA,EACR;AACD;",
   "names": []
 }

package/dist-esm/lib/utils/test-helpers.mjs

@@ -2,8 +2,8 @@ import { b64Vecs, compressLegacySegments } from "@tldraw/editor";
 function pointsToBase64(points) {
   return b64Vecs.encodePoints(points);
 }
-function base64ToPoints(base64) {
-  return b64Vecs.decodePoints(base64);
+function base64ToPoints(base64, dim) {
+  return b64Vecs.decodePoints(base64, dim);
 }
 function createDrawSegments(pointArrays, type = "free") {
   return compressLegacySegments(

package/dist-esm/lib/utils/test-helpers.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/lib/utils/test-helpers.ts"],
-  "sourcesContent": ["import { b64Vecs, compressLegacySegments } from '@tldraw/editor'\nimport type { TLDrawShapeSegment, VecModel } from '@tldraw/editor'\n\n/**\n * Helper function to convert draw shape points from VecModel[] to base64 string.\n * Uses delta encoding for improved Float16 precision.\n * This is useful for tests that create draw shapes with the legacy array format.\n *\n * @example\n * ```ts\n * const segments = [{ type: 'free', path: pointsToBase64([{x: 0, y: 0, z: 0.5}]) }]\n * ```\n *\n * @public\n */\nexport function pointsToBase64(points: VecModel[]): string {\n\treturn b64Vecs.encodePoints(points)\n}\n\n/**\n * Helper function to convert base64 string back to VecModel[] points.\n * Decodes delta-encoded points to absolute coordinates.\n * This is useful for tests that need to inspect draw shape points.\n *\n * @example\n * ```ts\n * const points = base64ToPoints(shape.props.segments[0].path)\n * expect(points[0].x).toBe(0)\n * ```\n *\n * @public\n */\nexport function base64ToPoints(base64: string): VecModel[] {\n\treturn b64Vecs.decodePoints(base64)\n}\n\n/**\n * Helper function to create draw shape segments from legacy array format.\n * This allows tests to use the old format while the shape uses the new base64 format.\n *\n * @example\n * ```ts\n * editor.createShapes([{\n *   type: 'draw',\n *   props: {\n *     segments: createDrawSegments([[{x: 0, y: 0}, {x: 10, y: 10}]])\n *   }\n * }])\n * ```\n * @public\n */\nexport function createDrawSegments(\n\tpointArrays: VecModel[][],\n\ttype: 'free' | 'straight' = 'free'\n): TLDrawShapeSegment[] {\n\treturn compressLegacySegments(\n\t\tpointArrays.map((points) => ({\n\t\t\ttype,\n\t\t\tpoints,\n\t\t}))\n\t)\n}\n"],
-  "mappings": "AAAA,SAAS,SAAS,8BAA8B;AAezC,SAAS,eAAe,QAA4B;AAC1D,SAAO,QAAQ,aAAa,MAAM;AACnC;AAeO,SAAS,eAAe,QAA4B;AAC1D,SAAO,QAAQ,aAAa,MAAM;AACnC;AAiBO,SAAS,mBACf,aACA,OAA4B,QACL;AACvB,SAAO;AAAA,IACN,YAAY,IAAI,CAAC,YAAY;AAAA,MAC5B;AAAA,MACA;AAAA,IACD,EAAE;AAAA,EACH;AACD;",
+  "sourcesContent": ["import { b64Vecs, compressLegacySegments } from '@tldraw/editor'\nimport type { TLDrawShapeSegment, VecModel } from '@tldraw/editor'\n\n/**\n * Helper function to convert draw shape points from VecModel[] to base64 string.\n * Uses delta encoding for improved Float16 precision.\n * This is useful for tests that create draw shapes with the legacy array format.\n *\n * @example\n * ```ts\n * const segments = [{ type: 'free', path: pointsToBase64([{x: 0, y: 0, z: 0.5}]) }]\n * ```\n *\n * @public\n */\nexport function pointsToBase64(points: VecModel[]): string {\n\treturn b64Vecs.encodePoints(points)\n}\n\n/**\n * Helper function to convert base64 string back to VecModel[] points.\n * Decodes delta-encoded points to absolute coordinates.\n * This is useful for tests that need to inspect draw shape points.\n *\n * @example\n * ```ts\n * const points = base64ToPoints(shape.props.segments[0].path, shape.props.segments[0].dim)\n * expect(points[0].x).toBe(0)\n * ```\n *\n * @public\n */\nexport function base64ToPoints(base64: string, dim?: 2 | 3): VecModel[] {\n\treturn b64Vecs.decodePoints(base64, dim)\n}\n\n/**\n * Helper function to create draw shape segments from legacy array format.\n * This allows tests to use the old format while the shape uses the new base64 format.\n *\n * @example\n * ```ts\n * editor.createShapes([{\n *   type: 'draw',\n *   props: {\n *     segments: createDrawSegments([[{x: 0, y: 0}, {x: 10, y: 10}]])\n *   }\n * }])\n * ```\n * @public\n */\nexport function createDrawSegments(\n\tpointArrays: VecModel[][],\n\ttype: 'free' | 'straight' = 'free'\n): TLDrawShapeSegment[] {\n\treturn compressLegacySegments(\n\t\tpointArrays.map((points) => ({\n\t\t\ttype,\n\t\t\tpoints,\n\t\t}))\n\t)\n}\n"],
+  "mappings": "AAAA,SAAS,SAAS,8BAA8B;AAezC,SAAS,eAAe,QAA4B;AAC1D,SAAO,QAAQ,aAAa,MAAM;AACnC;AAeO,SAAS,eAAe,QAAgB,KAAyB;AACvE,SAAO,QAAQ,aAAa,QAAQ,GAAG;AACxC;AAiBO,SAAS,mBACf,aACA,OAA4B,QACL;AACvB,SAAO;AAAA,IACN,YAAY,IAAI,CAAC,YAAY;AAAA,MAC5B;AAAA,MACA;AAAA,IACD,EAAE;AAAA,EACH;AACD;",
   "names": []
 }

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

@@ -59,8 +59,10 @@ function renderHtmlFromRichTextForMeasurement(editor, richText) {
 }
 const plainTextFromRichTextCache = new WeakCache();
 function isEmptyRichText(richText) {
+  if (richText.content.length === 0) return true;
   if (richText.content.length === 1) {
-    if (!richText.content[0].content) return true;
+    const node = richText.content[0];
+    if (!node.content || node.content.length === 0) return true;
   }
   return false;
 }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/lib/utils/text/richText.ts"],
-  "sourcesContent": ["import {\n\tExtension,\n\tExtensions,\n\textensions,\n\tgenerateHTML,\n\tgenerateJSON,\n\tgenerateText,\n\tJSONContent,\n} from '@tiptap/core'\nimport { Code } from '@tiptap/extension-code'\nimport { Highlight } from '@tiptap/extension-highlight'\nimport { Node } from '@tiptap/pm/model'\nimport { StarterKit } from '@tiptap/starter-kit'\nimport {\n\tEditor,\n\tgetOwnProperty,\n\tRichTextFontVisitorState,\n\tTLFontFace,\n\tTLRichText,\n\tWeakCache,\n} from '@tldraw/editor'\nimport { DefaultFontFaces } from '../../shapes/shared/defaultFonts'\n\n/** @public */\nexport const KeyboardShiftEnterTweakExtension = Extension.create({\n\tname: 'keyboardShiftEnterHandler',\n\taddKeyboardShortcuts() {\n\t\treturn {\n\t\t\t// We don't support soft breaks, so we just use the default enter command.\n\t\t\t'Shift-Enter': ({ editor }) => editor.commands.enter(),\n\t\t}\n\t},\n})\n\n// We change the default Code to override what's in the StarterKit.\n// It allows for other attributes/extensions.\n// @ts-ignore this is fine.\nCode.config.excludes = undefined\n\n// We want the highlighting to take precedence over bolding/italics/links\n// as far as rendering is concerned. Otherwise, the highlighting\n// looks broken up.\nHighlight.config.priority = 1100\n\n/**\n * Default extensions for the TipTap editor.\n *\n * @public\n */\nexport const tipTapDefaultExtensions: Extensions = [\n\tStarterKit.configure({\n\t\tblockquote: false,\n\t\tcodeBlock: false,\n\t\thorizontalRule: false,\n\t\tlink: {\n\t\t\topenOnClick: false,\n\t\t\tautolink: true,\n\t\t},\n\t\t// Prevent trailing paragraph insertion after lists (fixes #7641)\n\t\ttrailingNode: {\n\t\t\tnotAfter: ['paragraph', 'bulletList', 'orderedList', 'listItem'],\n\t\t},\n\t}),\n\tHighlight,\n\tKeyboardShiftEnterTweakExtension,\n\n\t// N.B. We disable the text direction core extension in RichTextArea,\n\t// but we add it back in again here in our own extensions list so that\n\t// people can omit/override it if they want to.\n\textensions.TextDirection.configure({ direction: 'auto' }),\n]\n\n// todo: bust this if the editor changes, too\nconst htmlCache = new WeakCache<TLRichText, string>()\n\n/**\n * Renders HTML from a rich text string.\n *\n * @param editor - The editor instance.\n * @param richText - The rich text content.\n *\n * @public\n */\nexport function renderHtmlFromRichText(editor: Editor, richText: TLRichText) {\n\treturn htmlCache.get(richText, () => {\n\t\tconst tipTapExtensions =\n\t\t\teditor.getTextOptions().tipTapConfig?.extensions ?? tipTapDefaultExtensions\n\t\tconst html = generateHTML(richText as JSONContent, tipTapExtensions)\n\t\t// We replace empty paragraphs with a single line break to prevent the browser from collapsing them.\n\t\treturn html.replaceAll('<p dir=\"auto\"></p>', '<p><br /></p>') ?? ''\n\t})\n}\n\n/**\n * Renders HTML from a rich text string for measurement.\n * @param editor - The editor instance.\n * @param richText - The rich text content.\n *\n * @public\n */\nexport function renderHtmlFromRichTextForMeasurement(editor: Editor, richText: TLRichText) {\n\tconst html = renderHtmlFromRichText(editor, richText)\n\treturn `<div class=\"tl-rich-text\">${html}</div>`\n}\n\n// A weak cache used to store plaintext that's been extracted from rich text.\nconst plainTextFromRichTextCache = new WeakCache<TLRichText, string>()\n\nexport function isEmptyRichText(richText: TLRichText) {\n\tif (richText.content.length === 1) {\n\t\tif (!(richText.content[0] as any).content) return true\n\t}\n\treturn false\n}\n\n/**\n * Whether the editor's active rich text selection is inside a bullet or ordered list.\n * @internal\n */\nexport function isEditingRichTextList(editor: Editor) {\n\tconst textEditor = editor.getRichTextEditor()\n\treturn !!(textEditor?.isActive('bulletList') || textEditor?.isActive('orderedList'))\n}\n\n/**\n * Renders plaintext from a rich text string.\n * @param editor - The editor instance.\n * @param richText - The rich text content.\n *\n * @public\n */\nexport function renderPlaintextFromRichText(editor: Editor, richText: TLRichText) {\n\tif (isEmptyRichText(richText)) return ''\n\n\treturn plainTextFromRichTextCache.get(richText, () => {\n\t\tconst tipTapExtensions =\n\t\t\teditor.getTextOptions().tipTapConfig?.extensions ?? tipTapDefaultExtensions\n\t\treturn generateText(richText as JSONContent, tipTapExtensions, {\n\t\t\tblockSeparator: '\\n',\n\t\t})\n\t})\n}\n\n/**\n * Renders JSONContent from html.\n * @param editor - The editor instance.\n * @param richText - The rich text content.\n *\n * @public\n */\nexport function renderRichTextFromHTML(editor: Editor, html: string): TLRichText {\n\tconst tipTapExtensions =\n\t\teditor.getTextOptions().tipTapConfig?.extensions ?? tipTapDefaultExtensions\n\treturn generateJSON(html, tipTapExtensions) as TLRichText\n}\n\n/** @public */\nexport function defaultAddFontsFromNode(\n\tnode: Node,\n\tstate: RichTextFontVisitorState,\n\taddFont: (font: TLFontFace) => void\n) {\n\tfor (const mark of node.marks) {\n\t\tif (mark.type.name === 'bold' && state.weight !== 'bold') {\n\t\t\tstate = { ...state, weight: 'bold' }\n\t\t}\n\t\tif (mark.type.name === 'italic' && state.style !== 'italic') {\n\t\t\tstate = { ...state, style: 'italic' }\n\t\t}\n\t\tif (mark.type.name === 'code' && state.family !== 'tldraw_mono') {\n\t\t\tstate = { ...state, family: 'tldraw_mono' }\n\t\t}\n\t}\n\n\tconst fontsForFamily = getOwnProperty(DefaultFontFaces, state.family)\n\tif (!fontsForFamily) return state\n\n\tconst fontsForStyle = getOwnProperty(fontsForFamily, state.style)\n\tif (!fontsForStyle) return state\n\n\tconst fontsForWeight = getOwnProperty(fontsForStyle, state.weight)\n\tif (!fontsForWeight) return state\n\n\taddFont(fontsForWeight)\n\n\treturn state\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import {\n\tExtension,\n\tExtensions,\n\textensions,\n\tgenerateHTML,\n\tgenerateJSON,\n\tgenerateText,\n\tJSONContent,\n} from '@tiptap/core'\nimport { Code } from '@tiptap/extension-code'\nimport { Highlight } from '@tiptap/extension-highlight'\nimport { Node } from '@tiptap/pm/model'\nimport { StarterKit } from '@tiptap/starter-kit'\nimport {\n\tEditor,\n\tgetOwnProperty,\n\tRichTextFontVisitorState,\n\tTLFontFace,\n\tTLRichText,\n\tWeakCache,\n} from '@tldraw/editor'\nimport { DefaultFontFaces } from '../../shapes/shared/defaultFonts'\n\n/** @public */\nexport const KeyboardShiftEnterTweakExtension = Extension.create({\n\tname: 'keyboardShiftEnterHandler',\n\taddKeyboardShortcuts() {\n\t\treturn {\n\t\t\t// We don't support soft breaks, so we just use the default enter command.\n\t\t\t'Shift-Enter': ({ editor }) => editor.commands.enter(),\n\t\t}\n\t},\n})\n\n// We change the default Code to override what's in the StarterKit.\n// It allows for other attributes/extensions.\n// @ts-ignore this is fine.\nCode.config.excludes = undefined\n\n// We want the highlighting to take precedence over bolding/italics/links\n// as far as rendering is concerned. Otherwise, the highlighting\n// looks broken up.\nHighlight.config.priority = 1100\n\n/**\n * Default extensions for the TipTap editor.\n *\n * @public\n */\nexport const tipTapDefaultExtensions: Extensions = [\n\tStarterKit.configure({\n\t\tblockquote: false,\n\t\tcodeBlock: false,\n\t\thorizontalRule: false,\n\t\tlink: {\n\t\t\topenOnClick: false,\n\t\t\tautolink: true,\n\t\t},\n\t\t// Prevent trailing paragraph insertion after lists (fixes #7641)\n\t\ttrailingNode: {\n\t\t\tnotAfter: ['paragraph', 'bulletList', 'orderedList', 'listItem'],\n\t\t},\n\t}),\n\tHighlight,\n\tKeyboardShiftEnterTweakExtension,\n\n\t// N.B. We disable the text direction core extension in RichTextArea,\n\t// but we add it back in again here in our own extensions list so that\n\t// people can omit/override it if they want to.\n\textensions.TextDirection.configure({ direction: 'auto' }),\n]\n\n// todo: bust this if the editor changes, too\nconst htmlCache = new WeakCache<TLRichText, string>()\n\n/**\n * Renders HTML from a rich text string.\n *\n * @param editor - The editor instance.\n * @param richText - The rich text content.\n *\n * @public\n */\nexport function renderHtmlFromRichText(editor: Editor, richText: TLRichText) {\n\treturn htmlCache.get(richText, () => {\n\t\tconst tipTapExtensions =\n\t\t\teditor.getTextOptions().tipTapConfig?.extensions ?? tipTapDefaultExtensions\n\t\tconst html = generateHTML(richText as JSONContent, tipTapExtensions)\n\t\t// We replace empty paragraphs with a single line break to prevent the browser from collapsing them.\n\t\treturn html.replaceAll('<p dir=\"auto\"></p>', '<p><br /></p>') ?? ''\n\t})\n}\n\n/**\n * Renders HTML from a rich text string for measurement.\n * @param editor - The editor instance.\n * @param richText - The rich text content.\n *\n * @public\n */\nexport function renderHtmlFromRichTextForMeasurement(editor: Editor, richText: TLRichText) {\n\tconst html = renderHtmlFromRichText(editor, richText)\n\treturn `<div class=\"tl-rich-text\">${html}</div>`\n}\n\n// A weak cache used to store plaintext that's been extracted from rich text.\nconst plainTextFromRichTextCache = new WeakCache<TLRichText, string>()\n\nexport function isEmptyRichText(richText: TLRichText) {\n\t// An empty document has no text. It can be encoded several equally-valid ways:\n\t// an empty `content` array at the doc level, or a single paragraph whose own\n\t// `content` is missing or an empty array. The interactive editor emits the\n\t// single-paragraph / missing-`content` form; programmatic authoring (snapshot\n\t// loads, and agents/importers emitting tldraw JSON) commonly emits the\n\t// empty-array forms. Treat them all as empty.\n\tif (richText.content.length === 0) return true\n\tif (richText.content.length === 1) {\n\t\tconst node = richText.content[0] as any\n\t\tif (!node.content || node.content.length === 0) return true\n\t}\n\treturn false\n}\n\n/**\n * Whether the editor's active rich text selection is inside a bullet or ordered list.\n * @internal\n */\nexport function isEditingRichTextList(editor: Editor) {\n\tconst textEditor = editor.getRichTextEditor()\n\treturn !!(textEditor?.isActive('bulletList') || textEditor?.isActive('orderedList'))\n}\n\n/**\n * Renders plaintext from a rich text string.\n * @param editor - The editor instance.\n * @param richText - The rich text content.\n *\n * @public\n */\nexport function renderPlaintextFromRichText(editor: Editor, richText: TLRichText) {\n\tif (isEmptyRichText(richText)) return ''\n\n\treturn plainTextFromRichTextCache.get(richText, () => {\n\t\tconst tipTapExtensions =\n\t\t\teditor.getTextOptions().tipTapConfig?.extensions ?? tipTapDefaultExtensions\n\t\treturn generateText(richText as JSONContent, tipTapExtensions, {\n\t\t\tblockSeparator: '\\n',\n\t\t})\n\t})\n}\n\n/**\n * Renders JSONContent from html.\n * @param editor - The editor instance.\n * @param richText - The rich text content.\n *\n * @public\n */\nexport function renderRichTextFromHTML(editor: Editor, html: string): TLRichText {\n\tconst tipTapExtensions =\n\t\teditor.getTextOptions().tipTapConfig?.extensions ?? tipTapDefaultExtensions\n\treturn generateJSON(html, tipTapExtensions) as TLRichText\n}\n\n/** @public */\nexport function defaultAddFontsFromNode(\n\tnode: Node,\n\tstate: RichTextFontVisitorState,\n\taddFont: (font: TLFontFace) => void\n) {\n\tfor (const mark of node.marks) {\n\t\tif (mark.type.name === 'bold' && state.weight !== 'bold') {\n\t\t\tstate = { ...state, weight: 'bold' }\n\t\t}\n\t\tif (mark.type.name === 'italic' && state.style !== 'italic') {\n\t\t\tstate = { ...state, style: 'italic' }\n\t\t}\n\t\tif (mark.type.name === 'code' && state.family !== 'tldraw_mono') {\n\t\t\tstate = { ...state, family: 'tldraw_mono' }\n\t\t}\n\t}\n\n\tconst fontsForFamily = getOwnProperty(DefaultFontFaces, state.family)\n\tif (!fontsForFamily) return state\n\n\tconst fontsForStyle = getOwnProperty(fontsForFamily, state.style)\n\tif (!fontsForStyle) return state\n\n\tconst fontsForWeight = getOwnProperty(fontsForStyle, state.weight)\n\tif (!fontsForWeight) return state\n\n\taddFont(fontsForWeight)\n\n\treturn state\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "tldraw",
   "description": "A tiny little drawing editor.",
-  "version": "5.2.0-next.e2b8d10bf10e",
+  "version": "5.2.0",
   "author": {
     "name": "tldraw Inc.",
     "email": "hello@tldraw.com"
@@ -51,7 +51,9 @@
     "tldraw.css",
     "dist-esm",
     "dist-cjs",
-    "src"
+    "src",
+    "DOCS.md",
+    "RELEASE_NOTES.md"
   ],
   "dependencies": {
     "@tiptap/core": "^3.12.1",
@@ -61,9 +63,9 @@
     "@tiptap/pm": "^3.12.1",
     "@tiptap/react": "^3.12.1",
     "@tiptap/starter-kit": "^3.12.1",
-    "@tldraw/driver": "5.2.0-next.e2b8d10bf10e",
-    "@tldraw/editor": "5.2.0-next.e2b8d10bf10e",
-    "@tldraw/store": "5.2.0-next.e2b8d10bf10e",
+    "@tldraw/driver": "5.2.0",
+    "@tldraw/editor": "5.2.0",
+    "@tldraw/store": "5.2.0",
     "classnames": "^2.5.1",
     "idb": "^7.1.1",
     "lz-string": "^1.5.0",
@@ -86,7 +88,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

@@ -96,6 +96,10 @@ export {
 	ShapeHandleOverlayUtil,
 	type TLShapeHandleOverlay,
 } from './lib/overlays/ShapeHandleOverlayUtil'
+export {
+	ShapeIndicatorOverlayUtil,
+	type TLShapeIndicatorOverlay,
+} from './lib/overlays/ShapeIndicatorOverlayUtil'
 export {
 	SelectionForegroundOverlayUtil,
 	type TLSelectionForegroundOverlay,
@@ -112,8 +116,10 @@ export {
 	embedShapePermissionDefaults,
 	unknownEmbedShapePermissionOverrides,
 	type CustomEmbedDefinition,
+	type DefaultEmbedConfig,
 	type DefaultEmbedDefinitionType,
 	type EmbedDefinition,
+	type GoogleMapsEmbedConfig,
 	type TLEmbedDefinition,
 	type TLEmbedShapePermissions,
 } from './lib/defaultEmbedDefinitions'
@@ -259,7 +265,6 @@ export {
 export { getStroke } from './lib/shapes/shared/freehand/getStroke'
 export { getStrokeOutlinePoints } from './lib/shapes/shared/freehand/getStrokeOutlinePoints'
 export { getStrokePoints } from './lib/shapes/shared/freehand/getStrokePoints'
-export { setStrokePointRadii } from './lib/shapes/shared/freehand/setStrokePointRadii'
 export { getSvgPathFromStrokePoints } from './lib/shapes/shared/freehand/svg'
 export { type StrokeOptions, type StrokePoint } from './lib/shapes/shared/freehand/types'
 export {

package/src/lib/TldrawImage.tsx

@@ -163,8 +163,8 @@ export const TldrawImage = memo(function TldrawImage(props: TldrawImageProps) {
 		const shapeIds = editor.getCurrentPageShapeIds()
 
 		async function setSvg() {
-			// We have to wait for the fonts to load so that we can correctly measure text sizes
-			await editor.fonts.loadRequiredFontsForCurrentPage(editor.options.maxFontsToLoadBeforeRender)
+			// toImage waits for the required fonts to load (so text is measured correctly) before
+			// it renders, so we don't need to do it here.
 			const imageResult = await editor.toImage([...shapeIds], {
 				bounds,
 				scale,

package/src/lib/bindings/arrow/ArrowBindingUtil.ts

@@ -92,10 +92,14 @@ export class ArrowBindingUtil extends BindingUtil<TLArrowBinding> {
 		reparentArrow(this.editor, binding.fromId)
 	}
 
-	// when the arrow is isolated we need to update it's x,y positions
+	// when the arrow is isolated we need to update its (x,y) positions
 	override onBeforeIsolateFromShape({
 		binding,
 	}: BindingOnShapeIsolateOptions<TLArrowBinding>): void {
+		// during undo/redo the history diff already contains the arrow's correct
+		// state, so adjusting the terminal here would corrupt the replay
+		if (this.editor.isReplayingHistory()) return
+
 		const arrow = this.editor.getShape<TLArrowShape>(binding.fromId)
 		if (!arrow) return
 		updateArrowTerminal({

package/src/lib/defaultEmbedDefinitions.ts

@@ -111,7 +111,7 @@ export const DEFAULT_EMBED_DEFINITIONS = [
 		overridePermissions: {
 			'allow-presentation': true,
 		},
-		toEmbedUrl: (url) => {
+		toEmbedUrl: (url, config?: GoogleMapsEmbedConfig) => {
 			if (url.includes('/maps/embed?')) {
 				return url
 			} else if (url.includes('/maps/')) {
@@ -126,7 +126,9 @@ export const DEFAULT_EMBED_DEFINITIONS = [
 							? zoomOrMeters
 							: -Math.log2(parseInt(zoomOrMeters) / 14772321) / 0.8
 					const host = new URL(url).host.replace('www.', '')
-					result = `https://${host}/maps/embed/v1/view?key=${process.env.NEXT_PUBLIC_GC_API_KEY}&center=${lat},${lng}&zoom=${z}&maptype=${mapType}`
+					// TODO: remove the process.env fallback once all consumers pass `apiKey` via `embedConfig`.
+					const apiKey = config?.apiKey ?? process.env.NEXT_PUBLIC_GC_API_KEY
+					result = `https://${host}/maps/embed/v1/view?key=${apiKey}&center=${lat},${lng}&zoom=${z}&maptype=${mapType}`
 				} else {
 					result = ''
 				}
@@ -702,8 +704,28 @@ export const unknownEmbedShapePermissionOverrides: TLEmbedShapePermissions = {
 	'allow-popups': false,
 }
 
+/**
+ * Configuration for the default Google Maps embed. Provide an `apiKey` through
+ * {@link EmbedShapeUtil}'s `embedConfig` option to render Google Maps embeds.
+ *
+ * @public
+ */
+export interface GoogleMapsEmbedConfig {
+	readonly apiKey?: string
+}
+
+/**
+ * Per-embed configuration for the default embed definitions, keyed by embed type.
+ * Passed to an embed definition's `toEmbedUrl` when building its embed URL.
+ *
+ * @public
+ */
+export interface DefaultEmbedConfig {
+	readonly google_maps?: GoogleMapsEmbedConfig
+}
+
 /** @public */
-export interface EmbedDefinition {
+export interface EmbedDefinition<Config = never> {
 	readonly type: string
 	readonly title: string
 	readonly hostnames: readonly string[]
@@ -721,18 +743,18 @@ export interface EmbedDefinition {
 	// TODO: FIXME this is ugly be required because some embeds have their own border radius for example spotify embeds
 	readonly overrideOutlineRadius?: number
 	// eslint-disable-next-line tldraw/method-signature-style
-	readonly toEmbedUrl: (url: string) => string | undefined
+	readonly toEmbedUrl: (url: string, config?: Config) => string | undefined
 	// eslint-disable-next-line tldraw/method-signature-style
 	readonly fromEmbedUrl: (url: string) => string | undefined
 }
 
 /** @public */
-export interface CustomEmbedDefinition extends EmbedDefinition {
+export interface CustomEmbedDefinition<Config = never> extends EmbedDefinition<Config> {
 	readonly icon: string
 }
 
 /** @public */
-export type TLEmbedDefinition = EmbedDefinition | CustomEmbedDefinition
+export type TLEmbedDefinition = EmbedDefinition<any> | CustomEmbedDefinition<any>
 
 /** @public */
 export type DefaultEmbedDefinitionType = (typeof DEFAULT_EMBED_DEFINITIONS)[number]['type']

package/src/lib/defaultOverlayUtils.ts

@@ -1,4 +1,3 @@
-import { ShapeIndicatorOverlayUtil } from '@tldraw/editor'
 import { ArrowBindingHintOverlayUtil } from './overlays/ArrowBindingHintOverlayUtil'
 import { ArrowHintOverlayUtil } from './overlays/ArrowHintOverlayUtil'
 import { BrushOverlayUtil } from './overlays/BrushOverlayUtil'
@@ -10,23 +9,24 @@ import { CollaboratorShapeIndicatorOverlayUtil } from './overlays/CollaboratorSh
 import { ScribbleOverlayUtil } from './overlays/ScribbleOverlayUtil'
 import { SelectionForegroundOverlayUtil } from './overlays/SelectionForegroundOverlayUtil'
 import { ShapeHandleOverlayUtil } from './overlays/ShapeHandleOverlayUtil'
+import { ShapeIndicatorOverlayUtil } from './overlays/ShapeIndicatorOverlayUtil'
 import { SnapIndicatorOverlayUtil } from './overlays/SnapIndicatorOverlayUtil'
 import { ZoomBrushOverlayUtil } from './overlays/ZoomBrushOverlayUtil'
 
 /** @public */
 export const defaultOverlayUtils = [
+	ArrowBindingHintOverlayUtil,
+	ArrowHintOverlayUtil,
+	BrushOverlayUtil,
+	CollaboratorBrushOverlayUtil,
+	CollaboratorCursorOverlayUtil,
+	CollaboratorHintOverlayUtil,
+	CollaboratorScribbleOverlayUtil,
 	CollaboratorShapeIndicatorOverlayUtil,
-	ShapeIndicatorOverlayUtil,
+	ScribbleOverlayUtil,
 	SelectionForegroundOverlayUtil,
 	ShapeHandleOverlayUtil,
-	BrushOverlayUtil,
-	ZoomBrushOverlayUtil,
+	ShapeIndicatorOverlayUtil,
 	SnapIndicatorOverlayUtil,
-	ScribbleOverlayUtil,
-	CollaboratorBrushOverlayUtil,
-	CollaboratorScribbleOverlayUtil,
-	CollaboratorHintOverlayUtil,
-	ArrowHintOverlayUtil,
-	ArrowBindingHintOverlayUtil,
-	CollaboratorCursorOverlayUtil,
+	ZoomBrushOverlayUtil,
 ] as const