@tldraw/editor 3.7.0-canary.d87af567ddf9 → 3.7.0-canary.db18f4c24992

package/dist-esm/lib/editor/managers/TextManager.mjs

@@ -14,21 +14,15 @@ const spaceCharacterRegex = /\s/;
 class TextManager {
   constructor(editor) {
     this.editor = editor;
-    const container = this.editor.getContainer();
-    const elm = document.createElement("div");
-    elm.classList.add("tl-text");
-    elm.classList.add("tl-text-measure");
-    elm.tabIndex = -1;
-    container.appendChild(elm);
-    this.baseElm = elm;
-    editor.disposables.add(() => {
-      elm.remove();
-    });
+    this.baseElem = document.createElement("div");
+    this.baseElem.classList.add("tl-text");
+    this.baseElem.classList.add("tl-text-measure");
+    this.baseElem.tabIndex = -1;
   }
-  baseElm;
+  baseElem;
   measureText(textToMeasure, opts) {
-    const elm = this.baseElm?.cloneNode();
-    this.baseElm.insertAdjacentElement("afterend", elm);
+    const elm = this.baseElem.cloneNode();
+    this.editor.getContainer().appendChild(elm);
     elm.setAttribute("dir", "auto");
     elm.style.setProperty("unicode-bidi", "plaintext");
     elm.style.setProperty("font-family", opts.fontFamily);
@@ -132,8 +126,8 @@ class TextManager {
    */
   measureTextSpans(textToMeasure, opts) {
     if (textToMeasure === "") return [];
-    const elm = this.baseElm?.cloneNode();
-    this.baseElm.insertAdjacentElement("afterend", elm);
+    const elm = this.baseElem.cloneNode();
+    this.editor.getContainer().appendChild(elm);
     const elementWidth = Math.ceil(opts.width - opts.padding * 2);
     elm.setAttribute("dir", "auto");
     elm.style.setProperty("unicode-bidi", "plaintext");

package/dist-esm/lib/editor/managers/TextManager.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/lib/editor/managers/TextManager.ts"],
-  "sourcesContent": ["import { BoxModel, TLDefaultHorizontalAlignStyle } from '@tldraw/tlschema'\nimport { Editor } from '../Editor'\n\nconst fixNewLines = /\\r?\\n|\\r/g\n\nfunction normalizeTextForDom(text: string) {\n\treturn text\n\t\t.replace(fixNewLines, '\\n')\n\t\t.split('\\n')\n\t\t.map((x) => x || ' ')\n\t\t.join('\\n')\n}\n\nconst textAlignmentsForLtr = {\n\tstart: 'left',\n\t'start-legacy': 'left',\n\tmiddle: 'center',\n\t'middle-legacy': 'center',\n\tend: 'right',\n\t'end-legacy': 'right',\n}\n\n/** @public */\nexport interface TLMeasureTextSpanOpts {\n\toverflow: 'wrap' | 'truncate-ellipsis' | 'truncate-clip'\n\twidth: number\n\theight: number\n\tpadding: number\n\tfontSize: number\n\tfontWeight: string\n\tfontFamily: string\n\tfontStyle: string\n\tlineHeight: number\n\ttextAlign: TLDefaultHorizontalAlignStyle\n}\n\nconst spaceCharacterRegex = /\\s/\n\n/** @public */\nexport class TextManager {\n\tbaseElm: HTMLDivElement\n\n\tconstructor(public editor: Editor) {\n\t\tconst container = this.editor.getContainer()\n\n\t\tconst elm = document.createElement('div')\n\t\telm.classList.add('tl-text')\n\t\telm.classList.add('tl-text-measure')\n\t\telm.tabIndex = -1\n\t\tcontainer.appendChild(elm)\n\n\t\tthis.baseElm = elm\n\t\teditor.disposables.add(() => {\n\t\t\telm.remove()\n\t\t})\n\t}\n\n\tmeasureText(\n\t\ttextToMeasure: string,\n\t\topts: {\n\t\t\tfontStyle: string\n\t\t\tfontWeight: string\n\t\t\tfontFamily: string\n\t\t\tfontSize: number\n\t\t\tlineHeight: number\n\t\t\t/**\n\t\t\t * When maxWidth is a number, the text will be wrapped to that maxWidth. When maxWidth\n\t\t\t * is null, the text will be measured without wrapping, but explicit line breaks and\n\t\t\t * space are preserved.\n\t\t\t */\n\t\t\tmaxWidth: null | number\n\t\t\tminWidth?: null | number\n\t\t\tpadding: string\n\t\t\tdisableOverflowWrapBreaking?: boolean\n\t\t}\n\t): BoxModel & { scrollWidth: number } {\n\t\t// Duplicate our base element; we don't need to clone deep\n\t\tconst elm = this.baseElm?.cloneNode() as HTMLDivElement\n\t\tthis.baseElm.insertAdjacentElement('afterend', elm)\n\n\t\telm.setAttribute('dir', 'auto')\n\t\t// N.B. This property, while discouraged (\"intended for Document Type Definition (DTD) designers\")\n\t\t// is necessary for ensuring correct mixed RTL/LTR behavior when exporting SVGs.\n\t\telm.style.setProperty('unicode-bidi', 'plaintext')\n\t\telm.style.setProperty('font-family', opts.fontFamily)\n\t\telm.style.setProperty('font-style', opts.fontStyle)\n\t\telm.style.setProperty('font-weight', opts.fontWeight)\n\t\telm.style.setProperty('font-size', opts.fontSize + 'px')\n\t\telm.style.setProperty('line-height', opts.lineHeight * opts.fontSize + 'px')\n\t\telm.style.setProperty('max-width', opts.maxWidth === null ? null : opts.maxWidth + 'px')\n\t\telm.style.setProperty('min-width', opts.minWidth === null ? null : opts.minWidth + 'px')\n\t\telm.style.setProperty('padding', opts.padding)\n\t\telm.style.setProperty(\n\t\t\t'overflow-wrap',\n\t\t\topts.disableOverflowWrapBreaking ? 'normal' : 'break-word'\n\t\t)\n\n\t\telm.textContent = normalizeTextForDom(textToMeasure)\n\t\tconst scrollWidth = elm.scrollWidth\n\t\tconst rect = elm.getBoundingClientRect()\n\t\telm.remove()\n\n\t\treturn {\n\t\t\tx: 0,\n\t\t\ty: 0,\n\t\t\tw: rect.width,\n\t\t\th: rect.height,\n\t\t\tscrollWidth,\n\t\t}\n\t}\n\n\t/**\n\t * Given an html element, measure the position of each span of unbroken\n\t * word/white-space characters within any text nodes it contains.\n\t */\n\tmeasureElementTextNodeSpans(\n\t\telement: HTMLElement,\n\t\t{ shouldTruncateToFirstLine = false }: { shouldTruncateToFirstLine?: boolean } = {}\n\t): { spans: { box: BoxModel; text: string }[]; didTruncate: boolean } {\n\t\tconst spans = []\n\n\t\t// Measurements of individual spans are relative to the containing element\n\t\tconst elmBounds = element.getBoundingClientRect()\n\t\tconst offsetX = -elmBounds.left\n\t\tconst offsetY = -elmBounds.top\n\n\t\t// we measure by creating a range that spans each character in the elements text node\n\t\tconst range = new Range()\n\t\tconst textNode = element.childNodes[0]\n\t\tlet idx = 0\n\n\t\tlet currentSpan = null\n\t\tlet prevCharWasSpaceCharacter = null\n\t\tlet prevCharTop = 0\n\t\tlet prevCharLeftForRTLTest = 0\n\t\tlet didTruncate = false\n\t\tfor (const childNode of element.childNodes) {\n\t\t\tif (childNode.nodeType !== Node.TEXT_NODE) continue\n\n\t\t\tfor (const char of childNode.textContent ?? '') {\n\t\t\t\t// place the range around the characters we're interested in\n\t\t\t\trange.setStart(textNode, idx)\n\t\t\t\trange.setEnd(textNode, idx + char.length)\n\t\t\t\t// measure the range. some browsers return multiple rects for the\n\t\t\t\t// first char in a new line - one for the line break, and one for\n\t\t\t\t// the character itself. we're only interested in the character.\n\t\t\t\tconst rects = range.getClientRects()\n\t\t\t\tconst rect = rects[rects.length - 1]!\n\n\t\t\t\t// calculate the position of the character relative to the element\n\t\t\t\tconst top = rect.top + offsetY\n\t\t\t\tconst left = rect.left + offsetX\n\t\t\t\tconst right = rect.right + offsetX\n\t\t\t\tconst isRTL = left < prevCharLeftForRTLTest\n\n\t\t\t\tconst isSpaceCharacter = spaceCharacterRegex.test(char)\n\t\t\t\tif (\n\t\t\t\t\t// If we're at a word boundary...\n\t\t\t\t\tisSpaceCharacter !== prevCharWasSpaceCharacter ||\n\t\t\t\t\t// ...or we're on a different line...\n\t\t\t\t\ttop !== prevCharTop ||\n\t\t\t\t\t// ...or we're at the start of the text and haven't created a span yet...\n\t\t\t\t\t!currentSpan\n\t\t\t\t) {\n\t\t\t\t\t// ...then we're at a span boundary!\n\n\t\t\t\t\tif (currentSpan) {\n\t\t\t\t\t\t// if we're truncating to a single line & we just finished the first line, stop there\n\t\t\t\t\t\tif (shouldTruncateToFirstLine && top !== prevCharTop) {\n\t\t\t\t\t\t\tdidTruncate = true\n\t\t\t\t\t\t\tbreak\n\t\t\t\t\t\t}\n\t\t\t\t\t\t// otherwise add the span to the list ready to start a new one\n\t\t\t\t\t\tspans.push(currentSpan)\n\t\t\t\t\t}\n\n\t\t\t\t\t// start a new span\n\t\t\t\t\tcurrentSpan = {\n\t\t\t\t\t\tbox: { x: left, y: top, w: rect.width, h: rect.height },\n\t\t\t\t\t\ttext: char,\n\t\t\t\t\t}\n\t\t\t\t\tprevCharLeftForRTLTest = left\n\t\t\t\t} else {\n\t\t\t\t\t// Looks like we're in RTL mode, so we need to adjust the left position.\n\t\t\t\t\tif (isRTL) {\n\t\t\t\t\t\tcurrentSpan.box.x = left\n\t\t\t\t\t}\n\n\t\t\t\t\t// otherwise we just need to extend the current span with the next character\n\t\t\t\t\tcurrentSpan.box.w = isRTL ? currentSpan.box.w + rect.width : right - currentSpan.box.x\n\t\t\t\t\tcurrentSpan.text += char\n\t\t\t\t}\n\n\t\t\t\tif (char === '\\n') {\n\t\t\t\t\tprevCharLeftForRTLTest = 0\n\t\t\t\t}\n\n\t\t\t\tprevCharWasSpaceCharacter = isSpaceCharacter\n\t\t\t\tprevCharTop = top\n\t\t\t\tidx += char.length\n\t\t\t}\n\t\t}\n\n\t\t// Add the last span\n\t\tif (currentSpan) {\n\t\t\tspans.push(currentSpan)\n\t\t}\n\n\t\treturn { spans, didTruncate }\n\t}\n\n\t/**\n\t * Measure text into individual spans. Spans are created by rendering the\n\t * text, then dividing it up according to line breaks and word boundaries.\n\t *\n\t * It works by having the browser render the text, then measuring the\n\t * position of each character. You can use this to replicate the text-layout\n\t * algorithm of the current browser in e.g. an SVG export.\n\t */\n\tmeasureTextSpans(\n\t\ttextToMeasure: string,\n\t\topts: TLMeasureTextSpanOpts\n\t): { text: string; box: BoxModel }[] {\n\t\tif (textToMeasure === '') return []\n\n\t\tconst elm = this.baseElm?.cloneNode() as HTMLDivElement\n\t\tthis.baseElm.insertAdjacentElement('afterend', elm)\n\n\t\tconst elementWidth = Math.ceil(opts.width - opts.padding * 2)\n\t\telm.setAttribute('dir', 'auto')\n\t\t// N.B. This property, while discouraged (\"intended for Document Type Definition (DTD) designers\")\n\t\t// is necessary for ensuring correct mixed RTL/LTR behavior when exporting SVGs.\n\t\telm.style.setProperty('unicode-bidi', 'plaintext')\n\t\telm.style.setProperty('width', `${elementWidth}px`)\n\t\telm.style.setProperty('height', 'min-content')\n\t\telm.style.setProperty('font-size', `${opts.fontSize}px`)\n\t\telm.style.setProperty('font-family', opts.fontFamily)\n\t\telm.style.setProperty('font-weight', opts.fontWeight)\n\t\telm.style.setProperty('line-height', `${opts.lineHeight * opts.fontSize}px`)\n\t\telm.style.setProperty('text-align', textAlignmentsForLtr[opts.textAlign])\n\n\t\tconst shouldTruncateToFirstLine =\n\t\t\topts.overflow === 'truncate-ellipsis' || opts.overflow === 'truncate-clip'\n\n\t\tif (shouldTruncateToFirstLine) {\n\t\t\telm.style.setProperty('overflow-wrap', 'anywhere')\n\t\t\telm.style.setProperty('word-break', 'break-all')\n\t\t}\n\n\t\tconst normalizedText = normalizeTextForDom(textToMeasure)\n\n\t\t// Render the text into the measurement element:\n\t\telm.textContent = normalizedText\n\n\t\t// actually measure the text:\n\t\tconst { spans, didTruncate } = this.measureElementTextNodeSpans(elm, {\n\t\t\tshouldTruncateToFirstLine,\n\t\t})\n\n\t\tif (opts.overflow === 'truncate-ellipsis' && didTruncate) {\n\t\t\t// we need to measure the ellipsis to know how much space it takes up\n\t\t\telm.textContent = '\u2026'\n\t\t\tconst ellipsisWidth = Math.ceil(this.measureElementTextNodeSpans(elm).spans[0].box.w)\n\n\t\t\t// then, we need to subtract that space from the width we have and measure again:\n\t\t\telm.style.setProperty('width', `${elementWidth - ellipsisWidth}px`)\n\t\t\telm.textContent = normalizedText\n\t\t\tconst truncatedSpans = this.measureElementTextNodeSpans(elm, {\n\t\t\t\tshouldTruncateToFirstLine: true,\n\t\t\t}).spans\n\n\t\t\t// Finally, we add in our ellipsis at the end of the last span. We\n\t\t\t// have to do this after measuring, not before, because adding the\n\t\t\t// ellipsis changes how whitespace might be getting collapsed by the\n\t\t\t// browser.\n\t\t\tconst lastSpan = truncatedSpans[truncatedSpans.length - 1]!\n\t\t\ttruncatedSpans.push({\n\t\t\t\ttext: '\u2026',\n\t\t\t\tbox: {\n\t\t\t\t\tx: Math.min(lastSpan.box.x + lastSpan.box.w, opts.width - opts.padding - ellipsisWidth),\n\t\t\t\t\ty: lastSpan.box.y,\n\t\t\t\t\tw: ellipsisWidth,\n\t\t\t\t\th: lastSpan.box.h,\n\t\t\t\t},\n\t\t\t})\n\t\t\treturn truncatedSpans\n\t\t}\n\n\t\telm.remove()\n\n\t\treturn spans\n\t}\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { BoxModel, TLDefaultHorizontalAlignStyle } from '@tldraw/tlschema'\nimport { Editor } from '../Editor'\n\nconst fixNewLines = /\\r?\\n|\\r/g\n\nfunction normalizeTextForDom(text: string) {\n\treturn text\n\t\t.replace(fixNewLines, '\\n')\n\t\t.split('\\n')\n\t\t.map((x) => x || ' ')\n\t\t.join('\\n')\n}\n\nconst textAlignmentsForLtr = {\n\tstart: 'left',\n\t'start-legacy': 'left',\n\tmiddle: 'center',\n\t'middle-legacy': 'center',\n\tend: 'right',\n\t'end-legacy': 'right',\n}\n\n/** @public */\nexport interface TLMeasureTextSpanOpts {\n\toverflow: 'wrap' | 'truncate-ellipsis' | 'truncate-clip'\n\twidth: number\n\theight: number\n\tpadding: number\n\tfontSize: number\n\tfontWeight: string\n\tfontFamily: string\n\tfontStyle: string\n\tlineHeight: number\n\ttextAlign: TLDefaultHorizontalAlignStyle\n}\n\nconst spaceCharacterRegex = /\\s/\n\n/** @public */\nexport class TextManager {\n\tprivate baseElem: HTMLDivElement\n\n\tconstructor(public editor: Editor) {\n\t\tthis.baseElem = document.createElement('div')\n\t\tthis.baseElem.classList.add('tl-text')\n\t\tthis.baseElem.classList.add('tl-text-measure')\n\t\tthis.baseElem.tabIndex = -1\n\t}\n\n\tmeasureText(\n\t\ttextToMeasure: string,\n\t\topts: {\n\t\t\tfontStyle: string\n\t\t\tfontWeight: string\n\t\t\tfontFamily: string\n\t\t\tfontSize: number\n\t\t\tlineHeight: number\n\t\t\t/**\n\t\t\t * When maxWidth is a number, the text will be wrapped to that maxWidth. When maxWidth\n\t\t\t * is null, the text will be measured without wrapping, but explicit line breaks and\n\t\t\t * space are preserved.\n\t\t\t */\n\t\t\tmaxWidth: null | number\n\t\t\tminWidth?: null | number\n\t\t\tpadding: string\n\t\t\tdisableOverflowWrapBreaking?: boolean\n\t\t}\n\t): BoxModel & { scrollWidth: number } {\n\t\t// Duplicate our base element; we don't need to clone deep\n\t\tconst elm = this.baseElem.cloneNode() as HTMLDivElement\n\t\tthis.editor.getContainer().appendChild(elm)\n\n\t\telm.setAttribute('dir', 'auto')\n\t\t// N.B. This property, while discouraged (\"intended for Document Type Definition (DTD) designers\")\n\t\t// is necessary for ensuring correct mixed RTL/LTR behavior when exporting SVGs.\n\t\telm.style.setProperty('unicode-bidi', 'plaintext')\n\t\telm.style.setProperty('font-family', opts.fontFamily)\n\t\telm.style.setProperty('font-style', opts.fontStyle)\n\t\telm.style.setProperty('font-weight', opts.fontWeight)\n\t\telm.style.setProperty('font-size', opts.fontSize + 'px')\n\t\telm.style.setProperty('line-height', opts.lineHeight * opts.fontSize + 'px')\n\t\telm.style.setProperty('max-width', opts.maxWidth === null ? null : opts.maxWidth + 'px')\n\t\telm.style.setProperty('min-width', opts.minWidth === null ? null : opts.minWidth + 'px')\n\t\telm.style.setProperty('padding', opts.padding)\n\t\telm.style.setProperty(\n\t\t\t'overflow-wrap',\n\t\t\topts.disableOverflowWrapBreaking ? 'normal' : 'break-word'\n\t\t)\n\n\t\telm.textContent = normalizeTextForDom(textToMeasure)\n\t\tconst scrollWidth = elm.scrollWidth\n\t\tconst rect = elm.getBoundingClientRect()\n\t\telm.remove()\n\n\t\treturn {\n\t\t\tx: 0,\n\t\t\ty: 0,\n\t\t\tw: rect.width,\n\t\t\th: rect.height,\n\t\t\tscrollWidth,\n\t\t}\n\t}\n\n\t/**\n\t * Given an html element, measure the position of each span of unbroken\n\t * word/white-space characters within any text nodes it contains.\n\t */\n\tmeasureElementTextNodeSpans(\n\t\telement: HTMLElement,\n\t\t{ shouldTruncateToFirstLine = false }: { shouldTruncateToFirstLine?: boolean } = {}\n\t): { spans: { box: BoxModel; text: string }[]; didTruncate: boolean } {\n\t\tconst spans = []\n\n\t\t// Measurements of individual spans are relative to the containing element\n\t\tconst elmBounds = element.getBoundingClientRect()\n\t\tconst offsetX = -elmBounds.left\n\t\tconst offsetY = -elmBounds.top\n\n\t\t// we measure by creating a range that spans each character in the elements text node\n\t\tconst range = new Range()\n\t\tconst textNode = element.childNodes[0]\n\t\tlet idx = 0\n\n\t\tlet currentSpan = null\n\t\tlet prevCharWasSpaceCharacter = null\n\t\tlet prevCharTop = 0\n\t\tlet prevCharLeftForRTLTest = 0\n\t\tlet didTruncate = false\n\t\tfor (const childNode of element.childNodes) {\n\t\t\tif (childNode.nodeType !== Node.TEXT_NODE) continue\n\n\t\t\tfor (const char of childNode.textContent ?? '') {\n\t\t\t\t// place the range around the characters we're interested in\n\t\t\t\trange.setStart(textNode, idx)\n\t\t\t\trange.setEnd(textNode, idx + char.length)\n\t\t\t\t// measure the range. some browsers return multiple rects for the\n\t\t\t\t// first char in a new line - one for the line break, and one for\n\t\t\t\t// the character itself. we're only interested in the character.\n\t\t\t\tconst rects = range.getClientRects()\n\t\t\t\tconst rect = rects[rects.length - 1]!\n\n\t\t\t\t// calculate the position of the character relative to the element\n\t\t\t\tconst top = rect.top + offsetY\n\t\t\t\tconst left = rect.left + offsetX\n\t\t\t\tconst right = rect.right + offsetX\n\t\t\t\tconst isRTL = left < prevCharLeftForRTLTest\n\n\t\t\t\tconst isSpaceCharacter = spaceCharacterRegex.test(char)\n\t\t\t\tif (\n\t\t\t\t\t// If we're at a word boundary...\n\t\t\t\t\tisSpaceCharacter !== prevCharWasSpaceCharacter ||\n\t\t\t\t\t// ...or we're on a different line...\n\t\t\t\t\ttop !== prevCharTop ||\n\t\t\t\t\t// ...or we're at the start of the text and haven't created a span yet...\n\t\t\t\t\t!currentSpan\n\t\t\t\t) {\n\t\t\t\t\t// ...then we're at a span boundary!\n\n\t\t\t\t\tif (currentSpan) {\n\t\t\t\t\t\t// if we're truncating to a single line & we just finished the first line, stop there\n\t\t\t\t\t\tif (shouldTruncateToFirstLine && top !== prevCharTop) {\n\t\t\t\t\t\t\tdidTruncate = true\n\t\t\t\t\t\t\tbreak\n\t\t\t\t\t\t}\n\t\t\t\t\t\t// otherwise add the span to the list ready to start a new one\n\t\t\t\t\t\tspans.push(currentSpan)\n\t\t\t\t\t}\n\n\t\t\t\t\t// start a new span\n\t\t\t\t\tcurrentSpan = {\n\t\t\t\t\t\tbox: { x: left, y: top, w: rect.width, h: rect.height },\n\t\t\t\t\t\ttext: char,\n\t\t\t\t\t}\n\t\t\t\t\tprevCharLeftForRTLTest = left\n\t\t\t\t} else {\n\t\t\t\t\t// Looks like we're in RTL mode, so we need to adjust the left position.\n\t\t\t\t\tif (isRTL) {\n\t\t\t\t\t\tcurrentSpan.box.x = left\n\t\t\t\t\t}\n\n\t\t\t\t\t// otherwise we just need to extend the current span with the next character\n\t\t\t\t\tcurrentSpan.box.w = isRTL ? currentSpan.box.w + rect.width : right - currentSpan.box.x\n\t\t\t\t\tcurrentSpan.text += char\n\t\t\t\t}\n\n\t\t\t\tif (char === '\\n') {\n\t\t\t\t\tprevCharLeftForRTLTest = 0\n\t\t\t\t}\n\n\t\t\t\tprevCharWasSpaceCharacter = isSpaceCharacter\n\t\t\t\tprevCharTop = top\n\t\t\t\tidx += char.length\n\t\t\t}\n\t\t}\n\n\t\t// Add the last span\n\t\tif (currentSpan) {\n\t\t\tspans.push(currentSpan)\n\t\t}\n\n\t\treturn { spans, didTruncate }\n\t}\n\n\t/**\n\t * Measure text into individual spans. Spans are created by rendering the\n\t * text, then dividing it up according to line breaks and word boundaries.\n\t *\n\t * It works by having the browser render the text, then measuring the\n\t * position of each character. You can use this to replicate the text-layout\n\t * algorithm of the current browser in e.g. an SVG export.\n\t */\n\tmeasureTextSpans(\n\t\ttextToMeasure: string,\n\t\topts: TLMeasureTextSpanOpts\n\t): { text: string; box: BoxModel }[] {\n\t\tif (textToMeasure === '') return []\n\n\t\tconst elm = this.baseElem.cloneNode() as HTMLDivElement\n\t\tthis.editor.getContainer().appendChild(elm)\n\n\t\tconst elementWidth = Math.ceil(opts.width - opts.padding * 2)\n\t\telm.setAttribute('dir', 'auto')\n\t\t// N.B. This property, while discouraged (\"intended for Document Type Definition (DTD) designers\")\n\t\t// is necessary for ensuring correct mixed RTL/LTR behavior when exporting SVGs.\n\t\telm.style.setProperty('unicode-bidi', 'plaintext')\n\t\telm.style.setProperty('width', `${elementWidth}px`)\n\t\telm.style.setProperty('height', 'min-content')\n\t\telm.style.setProperty('font-size', `${opts.fontSize}px`)\n\t\telm.style.setProperty('font-family', opts.fontFamily)\n\t\telm.style.setProperty('font-weight', opts.fontWeight)\n\t\telm.style.setProperty('line-height', `${opts.lineHeight * opts.fontSize}px`)\n\t\telm.style.setProperty('text-align', textAlignmentsForLtr[opts.textAlign])\n\n\t\tconst shouldTruncateToFirstLine =\n\t\t\topts.overflow === 'truncate-ellipsis' || opts.overflow === 'truncate-clip'\n\n\t\tif (shouldTruncateToFirstLine) {\n\t\t\telm.style.setProperty('overflow-wrap', 'anywhere')\n\t\t\telm.style.setProperty('word-break', 'break-all')\n\t\t}\n\n\t\tconst normalizedText = normalizeTextForDom(textToMeasure)\n\n\t\t// Render the text into the measurement element:\n\t\telm.textContent = normalizedText\n\n\t\t// actually measure the text:\n\t\tconst { spans, didTruncate } = this.measureElementTextNodeSpans(elm, {\n\t\t\tshouldTruncateToFirstLine,\n\t\t})\n\n\t\tif (opts.overflow === 'truncate-ellipsis' && didTruncate) {\n\t\t\t// we need to measure the ellipsis to know how much space it takes up\n\t\t\telm.textContent = '\u2026'\n\t\t\tconst ellipsisWidth = Math.ceil(this.measureElementTextNodeSpans(elm).spans[0].box.w)\n\n\t\t\t// then, we need to subtract that space from the width we have and measure again:\n\t\t\telm.style.setProperty('width', `${elementWidth - ellipsisWidth}px`)\n\t\t\telm.textContent = normalizedText\n\t\t\tconst truncatedSpans = this.measureElementTextNodeSpans(elm, {\n\t\t\t\tshouldTruncateToFirstLine: true,\n\t\t\t}).spans\n\n\t\t\t// Finally, we add in our ellipsis at the end of the last span. We\n\t\t\t// have to do this after measuring, not before, because adding the\n\t\t\t// ellipsis changes how whitespace might be getting collapsed by the\n\t\t\t// browser.\n\t\t\tconst lastSpan = truncatedSpans[truncatedSpans.length - 1]!\n\t\t\ttruncatedSpans.push({\n\t\t\t\ttext: '\u2026',\n\t\t\t\tbox: {\n\t\t\t\t\tx: Math.min(lastSpan.box.x + lastSpan.box.w, opts.width - opts.padding - ellipsisWidth),\n\t\t\t\t\ty: lastSpan.box.y,\n\t\t\t\t\tw: ellipsisWidth,\n\t\t\t\t\th: lastSpan.box.h,\n\t\t\t\t},\n\t\t\t})\n\t\t\treturn truncatedSpans\n\t\t}\n\n\t\telm.remove()\n\n\t\treturn spans\n\t}\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/dist-esm/lib/hooks/useEvent.mjs

@@ -1,3 +1,4 @@
+import { useAtom } from "@tldraw/state-react";
 import { assert } from "@tldraw/utils";
 import { useCallback, useDebugValue, useLayoutEffect, useRef } from "react";
 function useEvent(handler) {
@@ -12,7 +13,23 @@ function useEvent(handler) {
     return fn(...args);
   }, []);
 }
+function useReactiveEvent(handler) {
+  const handlerAtom = useAtom("useReactiveEvent", () => handler);
+  useLayoutEffect(() => {
+    handlerAtom.set(handler);
+  });
+  useDebugValue(handler);
+  return useCallback(
+    (...args) => {
+      const fn = handlerAtom.get();
+      assert(fn, "fn does not exist");
+      return fn(...args);
+    },
+    [handlerAtom]
+  );
+}
 export {
-  useEvent
+  useEvent,
+  useReactiveEvent
 };
 //# sourceMappingURL=useEvent.mjs.map

package/dist-esm/lib/hooks/useEvent.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/lib/hooks/useEvent.tsx"],
-  "sourcesContent": ["import { assert } from '@tldraw/utils'\nimport { useCallback, useDebugValue, useLayoutEffect, useRef } from 'react'\n\n/**\n * Allows you to define event handlers that can read the latest props/state but has a stable\n * function identity.\n *\n * These event callbacks may not be called in React render functions! An error won't be thrown, but\n * in the real implementation it would be!\n *\n * Uses a modified version of the user-land implementation included in the [`useEvent()` RFC][1].\n * Our version until such a hook is available natively.\n *\n * The RFC was closed on 27 September 2022, the React team plans to come up with a new RFC to\n * provide similar functionality in the future. We will migrate to this functionality when\n * available.\n *\n * IMPORTANT CAVEAT: You should not call event callbacks in layout effects of React component\n * children! Internally this hook uses a layout effect and parent component layout effects run after\n * child component layout effects. Use this hook responsibly.\n *\n * [1]: https://github.com/reactjs/rfcs/pull/220\n *\n * @internal\n */\nexport function useEvent<Args extends Array<unknown>, Result>(\n\thandler: (...args: Args) => Result\n): (...args: Args) => Result {\n\tconst handlerRef = useRef<(...args: Args) => Result>()\n\n\t// In a real implementation, this would run before layout effects\n\tuseLayoutEffect(() => {\n\t\thandlerRef.current = handler\n\t})\n\n\tuseDebugValue(handler)\n\n\treturn useCallback((...args: Args) => {\n\t\t// In a real implementation, this would throw if called during render\n\t\tconst fn = handlerRef.current\n\t\tassert(fn, 'fn does not exist')\n\t\treturn fn(...args)\n\t}, [])\n}\n"],
-  "mappings": "AAAA,SAAS,cAAc;AACvB,SAAS,aAAa,eAAe,iBAAiB,cAAc;AAwB7D,SAAS,SACf,SAC4B;AAC5B,QAAM,aAAa,OAAkC;AAGrD,kBAAgB,MAAM;AACrB,eAAW,UAAU;AAAA,EACtB,CAAC;AAED,gBAAc,OAAO;AAErB,SAAO,YAAY,IAAI,SAAe;AAErC,UAAM,KAAK,WAAW;AACtB,WAAO,IAAI,mBAAmB;AAC9B,WAAO,GAAG,GAAG,IAAI;AAAA,EAClB,GAAG,CAAC,CAAC;AACN;",
+  "sourcesContent": ["import { useAtom } from '@tldraw/state-react'\nimport { assert } from '@tldraw/utils'\nimport { useCallback, useDebugValue, useLayoutEffect, useRef } from 'react'\n\n/**\n * Allows you to define event handlers that can read the latest props/state but has a stable\n * function identity.\n *\n * These event callbacks may not be called in React render functions! An error won't be thrown, but\n * in the real implementation it would be!\n *\n * Uses a modified version of the user-land implementation included in the [`useEvent()` RFC][1].\n * Our version until such a hook is available natively.\n *\n * The RFC was closed on 27 September 2022, the React team plans to come up with a new RFC to\n * provide similar functionality in the future. We will migrate to this functionality when\n * available.\n *\n * IMPORTANT CAVEAT: You should not call event callbacks in layout effects of React component\n * children! Internally this hook uses a layout effect and parent component layout effects run after\n * child component layout effects. Use this hook responsibly.\n *\n * [1]: https://github.com/reactjs/rfcs/pull/220\n *\n * @internal\n */\nexport function useEvent<Args extends Array<unknown>, Result>(\n\thandler: (...args: Args) => Result\n): (...args: Args) => Result {\n\tconst handlerRef = useRef<(...args: Args) => Result>()\n\n\t// In a real implementation, this would run before layout effects\n\tuseLayoutEffect(() => {\n\t\thandlerRef.current = handler\n\t})\n\n\tuseDebugValue(handler)\n\n\treturn useCallback((...args: Args) => {\n\t\t// In a real implementation, this would throw if called during render\n\t\tconst fn = handlerRef.current\n\t\tassert(fn, 'fn does not exist')\n\t\treturn fn(...args)\n\t}, [])\n}\n\n/**\n * like {@link useEvent}, but for use in reactive contexts - when the handler function changes, it\n * will invalidate any reactive contexts that call it.\n * @internal\n */\nexport function useReactiveEvent<Args extends Array<unknown>, Result>(\n\thandler: (...args: Args) => Result\n): (...args: Args) => Result {\n\tconst handlerAtom = useAtom<(...args: Args) => Result>('useReactiveEvent', () => handler)\n\n\t// In a real implementation, this would run before layout effects\n\tuseLayoutEffect(() => {\n\t\thandlerAtom.set(handler)\n\t})\n\n\tuseDebugValue(handler)\n\n\treturn useCallback(\n\t\t(...args: Args) => {\n\t\t\t// In a real implementation, this would throw if called during render\n\t\t\tconst fn = handlerAtom.get()\n\t\t\tassert(fn, 'fn does not exist')\n\t\t\treturn fn(...args)\n\t\t},\n\t\t[handlerAtom]\n\t)\n}\n"],
+  "mappings": "AAAA,SAAS,eAAe;AACxB,SAAS,cAAc;AACvB,SAAS,aAAa,eAAe,iBAAiB,cAAc;AAwB7D,SAAS,SACf,SAC4B;AAC5B,QAAM,aAAa,OAAkC;AAGrD,kBAAgB,MAAM;AACrB,eAAW,UAAU;AAAA,EACtB,CAAC;AAED,gBAAc,OAAO;AAErB,SAAO,YAAY,IAAI,SAAe;AAErC,UAAM,KAAK,WAAW;AACtB,WAAO,IAAI,mBAAmB;AAC9B,WAAO,GAAG,GAAG,IAAI;AAAA,EAClB,GAAG,CAAC,CAAC;AACN;AAOO,SAAS,iBACf,SAC4B;AAC5B,QAAM,cAAc,QAAmC,oBAAoB,MAAM,OAAO;AAGxF,kBAAgB,MAAM;AACrB,gBAAY,IAAI,OAAO;AAAA,EACxB,CAAC;AAED,gBAAc,OAAO;AAErB,SAAO;AAAA,IACN,IAAI,SAAe;AAElB,YAAM,KAAK,YAAY,IAAI;AAC3B,aAAO,IAAI,mBAAmB;AAC9B,aAAO,GAAG,GAAG,IAAI;AAAA,IAClB;AAAA,IACA,CAAC,WAAW;AAAA,EACb;AACD;",
   "names": []
 }

package/dist-esm/version.mjs

@@ -1,8 +1,8 @@
-const version = "3.7.0-canary.d87af567ddf9";
+const version = "3.7.0-canary.db18f4c24992";
 const publishDates = {
   major: "2024-09-13T14:36:29.063Z",
-  minor: "2024-12-09T11:51:17.582Z",
-  patch: "2024-12-09T11:51:17.582Z"
+  minor: "2024-12-16T16:10:25.781Z",
+  patch: "2024-12-16T16:10:25.781Z"
 };
 export {
   publishDates,

package/dist-esm/version.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../src/version.ts"],
-  "sourcesContent": ["// This file is automatically generated by internal/scripts/refresh-assets.ts.\n// Do not edit manually. Or do, I'm a comment, not a cop.\n\nexport const version = '3.7.0-canary.d87af567ddf9'\nexport const publishDates = {\n\tmajor: '2024-09-13T14:36:29.063Z',\n\tminor: '2024-12-09T11:51:17.582Z',\n\tpatch: '2024-12-09T11:51:17.582Z',\n}\n"],
+  "sourcesContent": ["// This file is automatically generated by internal/scripts/refresh-assets.ts.\n// Do not edit manually. Or do, I'm a comment, not a cop.\n\nexport const version = '3.7.0-canary.db18f4c24992'\nexport const publishDates = {\n\tmajor: '2024-09-13T14:36:29.063Z',\n\tminor: '2024-12-16T16:10:25.781Z',\n\tpatch: '2024-12-16T16:10:25.781Z',\n}\n"],
   "mappings": "AAGO,MAAM,UAAU;AAChB,MAAM,eAAe;AAAA,EAC3B,OAAO;AAAA,EACP,OAAO;AAAA,EACP,OAAO;AACR;",
   "names": []
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tldraw/editor",
   "description": "A tiny little drawing app (editor).",
-  "version": "3.7.0-canary.d87af567ddf9",
+  "version": "3.7.0-canary.db18f4c24992",
   "author": {
     "name": "tldraw Inc.",
     "email": "hello@tldraw.com"
@@ -45,12 +45,12 @@
     "lint": "yarn run -T tsx ../../internal/scripts/lint.ts"
   },
   "dependencies": {
-    "@tldraw/state": "3.7.0-canary.d87af567ddf9",
-    "@tldraw/state-react": "3.7.0-canary.d87af567ddf9",
-    "@tldraw/store": "3.7.0-canary.d87af567ddf9",
-    "@tldraw/tlschema": "3.7.0-canary.d87af567ddf9",
-    "@tldraw/utils": "3.7.0-canary.d87af567ddf9",
-    "@tldraw/validate": "3.7.0-canary.d87af567ddf9",
+    "@tldraw/state": "3.7.0-canary.db18f4c24992",
+    "@tldraw/state-react": "3.7.0-canary.db18f4c24992",
+    "@tldraw/store": "3.7.0-canary.db18f4c24992",
+    "@tldraw/tlschema": "3.7.0-canary.db18f4c24992",
+    "@tldraw/utils": "3.7.0-canary.db18f4c24992",
+    "@tldraw/validate": "3.7.0-canary.db18f4c24992",
     "@types/core-js": "^2.5.5",
     "@use-gesture/react": "^10.2.27",
     "classnames": "^2.3.2",

package/src/index.ts

@@ -271,7 +271,7 @@ export { getCursor } from './lib/hooks/useCursor'
 export { EditorContext, useEditor, useMaybeEditor } from './lib/hooks/useEditor'
 export { useEditorComponents } from './lib/hooks/useEditorComponents'
 export type { TLEditorComponents } from './lib/hooks/useEditorComponents'
-export { useEvent } from './lib/hooks/useEvent'
+export { useEvent, useReactiveEvent } from './lib/hooks/useEvent'
 export { useGlobalMenuIsOpen } from './lib/hooks/useGlobalMenuIsOpen'
 export { useShallowArrayIdentity, useShallowObjectIdentity } from './lib/hooks/useIdentity'
 export { useIsCropping } from './lib/hooks/useIsCropping'

package/src/lib/TldrawEditor.tsx

@@ -554,7 +554,7 @@ function TldrawEditorWithReadyStore({
 			) : (
 				<EditorProvider editor={editor}>
 					<Layout onMount={onMount}>
-						{children ?? (Canvas ? <Canvas /> : null)}
+						{children ?? (Canvas ? <Canvas key={editor.contextId} /> : null)}
 						<Watermark />
 					</Layout>
 				</EditorProvider>

package/src/lib/components/LiveCollaborators.tsx

@@ -75,6 +75,8 @@ const Collaborator = track(function Collaborator({
 	const { userId, chatMessage, brush, scribbles, selectedShapeIds, userName, cursor, color } =
 		latestPresence
 
+	if (!cursor) return null
+
 	// Add a little padding to the top-left of the viewport
 	// so that the cursor doesn't get cut off
 	const isCursorInViewport = !(
@@ -171,7 +173,7 @@ function useCollaboratorState(editor: Editor, latestPresence: TLInstancePresence
 	if (latestPresence) {
 		// We can do this on every render, it's free and cheaper than an effect
 		// remember, there can be lots and lots of cursors moving around all the time
-		rLastActivityTimestamp.current = latestPresence.lastActivityTimestamp
+		rLastActivityTimestamp.current = latestPresence.lastActivityTimestamp ?? Infinity
 	}
 
 	return state

package/src/lib/components/Shape.tsx

@@ -171,13 +171,19 @@ export const Shape = memo(function Shape({
 
 export const InnerShape = memo(
 	function InnerShape<T extends TLShape>({ shape, util }: { shape: T; util: ShapeUtil<T> }) {
-		return useStateTracking('InnerShape:' + shape.type, () =>
-			// always fetch the latest shape from the store even if the props/meta have not changed, to avoid
-			// calling the render method with stale data.
-			util.component(util.editor.store.unsafeGetWithoutCapture(shape.id) as T)
+		return useStateTracking(
+			'InnerShape:' + shape.type,
+			() =>
+				// always fetch the latest shape from the store even if the props/meta have not changed, to avoid
+				// calling the render method with stale data.
+				util.component(util.editor.store.unsafeGetWithoutCapture(shape.id) as T),
+			[util, shape.id]
 		)
 	},
-	(prev, next) => prev.shape.props === next.shape.props && prev.shape.meta === next.shape.meta
+	(prev, next) =>
+		prev.shape.props === next.shape.props &&
+		prev.shape.meta === next.shape.meta &&
+		prev.util === next.util
 )
 
 export const InnerShapeBackground = memo(
@@ -188,11 +194,17 @@ export const InnerShapeBackground = memo(
 		shape: T
 		util: ShapeUtil<T>
 	}) {
-		return useStateTracking('InnerShape:' + shape.type, () =>
-			// always fetch the latest shape from the store even if the props/meta have not changed, to avoid
-			// calling the render method with stale data.
-			util.backgroundComponent?.(util.editor.store.unsafeGetWithoutCapture(shape.id) as T)
+		return useStateTracking(
+			'InnerShape:' + shape.type,
+			() =>
+				// always fetch the latest shape from the store even if the props/meta have not changed, to avoid
+				// calling the render method with stale data.
+				util.backgroundComponent?.(util.editor.store.unsafeGetWithoutCapture(shape.id) as T),
+			[util, shape.id]
 		)
 	},
-	(prev, next) => prev.shape.props === next.shape.props && prev.shape.meta === next.shape.meta
+	(prev, next) =>
+		prev.shape.props === next.shape.props &&
+		prev.shape.meta === next.shape.meta &&
+		prev.util === next.util
 )

package/src/lib/editor/Editor.ts

@@ -77,6 +77,7 @@ import {
 	hasOwnProperty,
 	last,
 	lerp,
+	maxBy,
 	sortById,
 	sortByIndex,
 	structuredClone,
@@ -2264,6 +2265,8 @@ export class Editor extends EventEmitter<TLEventMap> {
 		const leaderPresence = this.getCollaborators().find((c) => c.userId === followingUserId)
 		if (!leaderPresence) return null
 
+		if (!leaderPresence.camera || !leaderPresence.screenBounds) return null
+
 		// Fit their viewport inside of our screen bounds
 		// 1. calculate their viewport in page space
 		const { w: lw, h: lh } = leaderPresence.screenBounds
@@ -3161,6 +3164,9 @@ export class Editor extends EventEmitter<TLEventMap> {
 
 		if (!presence) return this
 
+		const cursor = presence.cursor
+		if (!cursor) return this
+
 		this.run(() => {
 			// If we're following someone, stop following them
 			if (this.getInstanceState().followingUserId !== null) {
@@ -3178,7 +3184,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 				opts.animation = undefined
 			}
 
-			this.centerOnPoint(presence.cursor, opts)
+			this.centerOnPoint(cursor, opts)
 
 			// Highlight the user's cursor
 			const { highlightedUserIds } = this.getInstanceState()
@@ -3389,10 +3395,11 @@ export class Editor extends EventEmitter<TLEventMap> {
 		if (!allPresenceRecords.length) return EMPTY_ARRAY
 		const userIds = [...new Set(allPresenceRecords.map((c) => c.userId))].sort()
 		return userIds.map((id) => {
-			const latestPresence = allPresenceRecords
-				.filter((c) => c.userId === id)
-				.sort((a, b) => b.lastActivityTimestamp - a.lastActivityTimestamp)[0]
-			return latestPresence
+			const latestPresence = maxBy(
+				allPresenceRecords.filter((c) => c.userId === id),
+				(p) => p.lastActivityTimestamp ?? 0
+			)
+			return latestPresence!
 		})
 	}
 

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

@@ -38,21 +38,13 @@ const spaceCharacterRegex = /\s/
 
 /** @public */
 export class TextManager {
-	baseElm: HTMLDivElement
+	private baseElem: HTMLDivElement
 
 	constructor(public editor: Editor) {
-		const container = this.editor.getContainer()
-
-		const elm = document.createElement('div')
-		elm.classList.add('tl-text')
-		elm.classList.add('tl-text-measure')
-		elm.tabIndex = -1
-		container.appendChild(elm)
-
-		this.baseElm = elm
-		editor.disposables.add(() => {
-			elm.remove()
-		})
+		this.baseElem = document.createElement('div')
+		this.baseElem.classList.add('tl-text')
+		this.baseElem.classList.add('tl-text-measure')
+		this.baseElem.tabIndex = -1
 	}
 
 	measureText(
@@ -75,8 +67,8 @@ export class TextManager {
 		}
 	): BoxModel & { scrollWidth: number } {
 		// Duplicate our base element; we don't need to clone deep
-		const elm = this.baseElm?.cloneNode() as HTMLDivElement
-		this.baseElm.insertAdjacentElement('afterend', elm)
+		const elm = this.baseElem.cloneNode() as HTMLDivElement
+		this.editor.getContainer().appendChild(elm)
 
 		elm.setAttribute('dir', 'auto')
 		// N.B. This property, while discouraged ("intended for Document Type Definition (DTD) designers")
@@ -223,8 +215,8 @@ export class TextManager {
 	): { text: string; box: BoxModel }[] {
 		if (textToMeasure === '') return []
 
-		const elm = this.baseElm?.cloneNode() as HTMLDivElement
-		this.baseElm.insertAdjacentElement('afterend', elm)
+		const elm = this.baseElem.cloneNode() as HTMLDivElement
+		this.editor.getContainer().appendChild(elm)
 
 		const elementWidth = Math.ceil(opts.width - opts.padding * 2)
 		elm.setAttribute('dir', 'auto')

package/src/lib/hooks/useEvent.tsx

@@ -1,3 +1,4 @@
+import { useAtom } from '@tldraw/state-react'
 import { assert } from '@tldraw/utils'
 import { useCallback, useDebugValue, useLayoutEffect, useRef } from 'react'
 
@@ -42,3 +43,31 @@ export function useEvent<Args extends Array<unknown>, Result>(
 		return fn(...args)
 	}, [])
 }
+
+/**
+ * like {@link useEvent}, but for use in reactive contexts - when the handler function changes, it
+ * will invalidate any reactive contexts that call it.
+ * @internal
+ */
+export function useReactiveEvent<Args extends Array<unknown>, Result>(
+	handler: (...args: Args) => Result
+): (...args: Args) => Result {
+	const handlerAtom = useAtom<(...args: Args) => Result>('useReactiveEvent', () => handler)
+
+	// In a real implementation, this would run before layout effects
+	useLayoutEffect(() => {
+		handlerAtom.set(handler)
+	})
+
+	useDebugValue(handler)
+
+	return useCallback(
+		(...args: Args) => {
+			// In a real implementation, this would throw if called during render
+			const fn = handlerAtom.get()
+			assert(fn, 'fn does not exist')
+			return fn(...args)
+		},
+		[handlerAtom]
+	)
+}

package/src/version.ts

@@ -1,9 +1,9 @@
 // This file is automatically generated by internal/scripts/refresh-assets.ts.
 // Do not edit manually. Or do, I'm a comment, not a cop.
 
-export const version = '3.7.0-canary.d87af567ddf9'
+export const version = '3.7.0-canary.db18f4c24992'
 export const publishDates = {
 	major: '2024-09-13T14:36:29.063Z',
-	minor: '2024-12-09T11:51:17.582Z',
-	patch: '2024-12-09T11:51:17.582Z',
+	minor: '2024-12-16T16:10:25.781Z',
+	patch: '2024-12-16T16:10:25.781Z',
 }