@tldraw/editor 3.9.0-canary.fae364b5aba5 → 3.9.0-internal.7f0e15f4f7d9

package/src/lib/license/LicenseManager.ts

@@ -110,8 +110,8 @@ export class LicenseManager {
 		if (testEnvironment === 'development') return true
 		if (testEnvironment === 'production') return false
 
-		// If we are using https we assume it's a production env and a development one otherwise
-		return window.location.protocol !== 'https:'
+		// If we are using https on a non-localhost domain we assume it's a production env and a development one otherwise
+		return window.location.protocol !== 'https:' || window.location.hostname === 'localhost'
 	}
 
 	private async extractLicenseKey(licenseKey: string): Promise<LicenseInfo> {

package/src/lib/options.ts

@@ -69,6 +69,12 @@ export interface TldrawOptions {
 	 * By default, the toolbar items are accessible via number shortcuts according to their order. To disable this, set this option to false.
 	 */
 	readonly enableToolbarKeyboardShortcuts: boolean
+	/**
+	 * The maximum number of fonts that will be loaded while blocking the main rendering of the
+	 * canvas. If there are more than this number of fonts needed, we'll just show the canvas right
+	 * away and let the fonts load in in the background.
+	 */
+	readonly maxFontsToLoadBeforeRender: number
 }
 
 /** @public */
@@ -114,4 +120,5 @@ export const defaultTldrawOptions = {
 	createTextOnCanvasDoubleClick: true,
 	exportProvider: Fragment,
 	enableToolbarKeyboardShortcuts: true,
+	maxFontsToLoadBeforeRender: Infinity,
 } as const satisfies TldrawOptions

package/src/lib/utils/browserCanvasMaxSize.ts

@@ -1,5 +1,3 @@
-import canvasSize from 'canvas-size'
-
 /** @internal */
 export interface CanvasMaxSize {
 	maxWidth: number
@@ -7,33 +5,135 @@ export interface CanvasMaxSize {
 	maxArea: number
 }
 
-let maxSizePromise: Promise<CanvasMaxSize> | null = null
+// Cache this, only want to do this once per browser session
+let maxCanvasSizes: CanvasMaxSize | null = null
 
-function getBrowserCanvasMaxSize() {
-	if (!maxSizePromise) {
-		maxSizePromise = calculateBrowserCanvasMaxSize()
+function getBrowserCanvasMaxSize(): CanvasMaxSize {
+	if (!maxCanvasSizes) {
+		maxCanvasSizes = {
+			maxWidth: getCanvasSize('width'), // test very wide but 1 pixel tall canvases
+			maxHeight: getCanvasSize('height'), // test very tall but 1 pixel wide canvases
+			maxArea: getCanvasSize('area'), // test square canvases
+		}
 	}
-
-	return maxSizePromise
+	return maxCanvasSizes
 }
 
-async function calculateBrowserCanvasMaxSize(): Promise<CanvasMaxSize> {
-	const maxWidth = await canvasSize.maxWidth({ usePromise: true })
-	const maxHeight = await canvasSize.maxHeight({ usePromise: true })
-	const maxArea = await canvasSize.maxArea({ usePromise: true })
-	return {
-		maxWidth: maxWidth.width,
-		maxHeight: maxHeight.height,
-		maxArea: maxArea.width * maxArea.height,
-	}
-}
+// Extracted from https://github.com/jhildenbiddle/canvas-size
+// MIT License: https://github.com/jhildenbiddle/canvas-size/blob/master/LICENSE
+// Copyright (c) John Hildenbiddle
 
-// https://github.com/jhildenbiddle/canvas-size?tab=readme-ov-file#test-results
 const MAX_SAFE_CANVAS_DIMENSION = 8192
 const MAX_SAFE_CANVAS_AREA = 4096 * 4096
 
+const TEST_SIZES = {
+	area: [
+		// Chrome 70 (Mac, Win)
+		// Chrome 68 (Android 4.4)
+		// Edge 17 (Win)
+		// Safari 7-12 (Mac)
+		16384,
+		// Chrome 68 (Android 7.1-9)
+		14188,
+		// Chrome 68 (Android 5)
+		11402,
+		// Firefox 63 (Mac, Win)
+		11180,
+		// Chrome 68 (Android 6)
+		10836,
+		// IE 9-11 (Win)
+		8192,
+		// IE Mobile (Windows Phone 8.x)
+		// Safari (iOS 9 - 12)
+		4096,
+	],
+	height: [
+		// Safari 7-12 (Mac)
+		// Safari (iOS 9-12)
+		8388607,
+		// Chrome 83 (Mac, Win)
+		65535,
+		// Chrome 70 (Mac, Win)
+		// Chrome 68 (Android 4.4-9)
+		// Firefox 63 (Mac, Win)
+		32767,
+		// Edge 17 (Win)
+		// IE11 (Win)
+		16384,
+		// IE 9-10 (Win)
+		8192,
+		// IE Mobile (Windows Phone 8.x)
+		4096,
+	],
+	width: [
+		// Safari 7-12 (Mac)
+		// Safari (iOS 9-12)
+		4194303,
+		// Chrome 83 (Mac, Win)
+		65535,
+		// Chrome 70 (Mac, Win)
+		// Chrome 68 (Android 4.4-9)
+		// Firefox 63 (Mac, Win)
+		32767,
+		// Edge 17 (Win)
+		// IE11 (Win)
+		16384,
+		// IE 9-10 (Win)
+		8192,
+		// IE Mobile (Windows Phone 8.x)
+		4096,
+	],
+} as const
+
+/**
+ * Tests ability to read pixel data from canvas elements of various dimensions
+ * by decreasing canvas height and/or width until a test succeeds.
+ */
+export function getCanvasSize(dimension: 'width' | 'height' | 'area') {
+	const cropCvs = document.createElement('canvas')
+	cropCvs.width = 1
+	cropCvs.height = 1
+	const cropCtx = cropCvs.getContext('2d')!
+
+	for (const size of TEST_SIZES[dimension]) {
+		const w = dimension === 'height' ? 1 : size
+		const h = dimension === 'width' ? 1 : size
+
+		const testCvs = document.createElement('canvas')
+		testCvs.width = w
+		testCvs.height = h
+		const testCtx = testCvs.getContext('2d')!
+
+		testCtx.fillRect(w - 1, h - 1, 1, 1)
+		cropCtx.drawImage(testCvs, w - 1, h - 1, 1, 1, 0, 0, 1, 1)
+
+		const isTestPassed = cropCtx.getImageData(0, 0, 1, 1).data[3] !== 0
+		// release memory
+		testCvs.width = 0
+		testCvs.height = 0
+
+		if (isTestPassed) {
+			// release memory
+			cropCvs.width = 0
+			cropCvs.height = 0
+
+			if (dimension === 'area') {
+				return size * size
+			} else {
+				return size
+			}
+		}
+	}
+
+	// didn't find a good size, release memory and error
+	cropCvs.width = 0
+	cropCvs.height = 0
+
+	throw Error('Failed to determine maximum canvas dimension')
+}
+
 /** @internal */
-export async function clampToBrowserMaxCanvasSize(width: number, height: number) {
+export function clampToBrowserMaxCanvasSize(width: number, height: number) {
 	if (
 		width <= MAX_SAFE_CANVAS_DIMENSION &&
 		height <= MAX_SAFE_CANVAS_DIMENSION &&
@@ -42,7 +142,7 @@ export async function clampToBrowserMaxCanvasSize(width: number, height: number)
 		return [width, height]
 	}
 
-	const { maxWidth, maxHeight, maxArea } = await getBrowserCanvasMaxSize()
+	const { maxWidth, maxHeight, maxArea } = getBrowserCanvasMaxSize()
 	const aspectRatio = width / height
 
 	if (width > maxWidth) {

package/src/lib/utils/dom.ts

@@ -98,7 +98,7 @@ export function activeElementShouldCaptureKeys() {
 	const { activeElement } = document
 	return !!(
 		activeElement &&
-		(activeElement.getAttribute('contenteditable') ||
+		((activeElement as HTMLElement).isContentEditable ||
 			INPUTS.indexOf(activeElement.tagName.toLowerCase()) > -1)
 	)
 }

package/src/lib/utils/richText.ts

@@ -0,0 +1,72 @@
+import { getSchema, JSONContent, Editor as TTEditor } from '@tiptap/core'
+import { Node } from '@tiptap/pm/model'
+import { EditorProviderProps } from '@tiptap/react'
+import { TLRichText } from '@tldraw/tlschema'
+import { assert } from '@tldraw/utils'
+import { Editor } from '../editor/Editor'
+import { TLFontFace } from '../editor/managers/FontManager'
+
+/**
+ * This is the TipTap editor! Docs are {@link https://tiptap.dev/docs}.
+ *
+ * @public
+ */
+export type TiptapEditor = TTEditor
+
+/**
+ * A TipTap node. See {@link https://tiptap.dev/docs}.
+ * @public
+ */
+export type TiptapNode = Node
+
+/** @public */
+export interface TLTextOptions {
+	tipTapConfig?: EditorProviderProps
+	addFontsFromNode?: RichTextFontVisitor
+}
+
+/** @public */
+export interface RichTextFontVisitorState {
+	readonly family: string
+	readonly weight: string
+	readonly style: string
+}
+
+/** @public */
+export type RichTextFontVisitor = (
+	node: TiptapNode,
+	state: RichTextFontVisitorState,
+	addFont: (font: TLFontFace) => void
+) => RichTextFontVisitorState
+
+/** @public */
+export function getFontsFromRichText(
+	editor: Editor,
+	richText: TLRichText,
+	initialState: RichTextFontVisitorState
+) {
+	const { tipTapConfig, addFontsFromNode } = editor.getTextOptions()
+	assert(tipTapConfig, 'textOptions.tipTapConfig must be set to use rich text')
+	assert(addFontsFromNode, 'textOptions.addFontsFromNode must be set to use rich text')
+
+	const schema = getSchema(tipTapConfig.extensions ?? [])
+	const rootNode = Node.fromJSON(schema, richText as JSONContent)
+
+	const fonts = new Set<TLFontFace>()
+
+	function addFont(font: TLFontFace) {
+		fonts.add(font)
+	}
+
+	function visit(node: TiptapNode, state: RichTextFontVisitorState) {
+		state = addFontsFromNode!(node, state, addFont)
+
+		for (const child of node.children) {
+			visit(child, state)
+		}
+	}
+
+	visit(rootNode, initialState)
+
+	return Array.from(fonts)
+}

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.9.0-canary.fae364b5aba5'
+export const version = '3.9.0-internal.7f0e15f4f7d9'
 export const publishDates = {
 	major: '2024-09-13T14:36:29.063Z',
-	minor: '2025-02-21T10:19:16.590Z',
-	patch: '2025-02-21T10:19:16.590Z',
+	minor: '2025-02-25T14:10:40.799Z',
+	patch: '2025-02-25T14:10:40.799Z',
 }