@tldraw/editor 3.9.0 → 3.10.0-canary.12c0cb0549ca

package/src/lib/exports/FontEmbedder.ts

@@ -2,6 +2,8 @@ import { assert, bind, compact } from '@tldraw/utils'
 import { fetchCache, resourceToDataUrl } from './fetchCache'
 import { ParsedFontFace, parseCss, parseCssFontFaces, parseCssFontFamilyValue } from './parseCss'
 
+export const SVG_EXPORT_CLASSNAME = 'tldraw-svg-export'
+
 /**
  * Because SVGs cannot refer to external CSS/font resources, any web fonts used in the SVG must be
  * embedded as data URLs in inlined @font-face declarations. This class is responsible for
@@ -81,7 +83,17 @@ export class FontEmbedder {
 async function getCurrentDocumentFontFaces() {
 	const fontFaces: (ParsedFontFace[] | Promise<ParsedFontFace[] | null>)[] = []
 
-	for (const styleSheet of document.styleSheets) {
+	// In exportToSvg we add the exported node to the DOM temporarily.
+	// Because of this, and because we do a setTimeout to delay removing that node from the
+	// DOM, when looking at document.styleSheets the number of nodes and stylesheets
+	// can grow unbounded (especially when using "Debug svg" and moving shapes around).
+	// To avoid this, we filter out the stylesheets that are part of the SVG export.
+	const styleSheetsWithoutSvgExports = Array.from(document.styleSheets).filter(
+		(styleSheet) =>
+			!(styleSheet.ownerNode as HTMLElement | null)?.closest(`.${SVG_EXPORT_CLASSNAME}`)
+	)
+
+	for (const styleSheet of styleSheetsWithoutSvgExports) {
 		let cssRules
 		try {
 			cssRules = styleSheet.cssRules

package/src/lib/exports/StyleEmbedder.ts

@@ -242,7 +242,7 @@ function styleFromComputedStyle(
 	{ defaultStyles, parentStyles }: ReadStyleOpts
 ) {
 	const styles: Record<string, string> = {}
-	for (const property of style) {
+	for (const [property, _] of Object.entries(style)) {
 		if (!shouldIncludeCssProperty(property)) continue
 
 		const value = style.getPropertyValue(property)

package/src/lib/exports/exportToSvg.tsx

@@ -4,6 +4,7 @@ import { flushSync } from 'react-dom'
 import { createRoot } from 'react-dom/client'
 import { Editor } from '../editor/Editor'
 import { TLSvgExportOptions } from '../editor/types/misc-types'
+import { SVG_EXPORT_CLASSNAME } from './FontEmbedder'
 import { StyleEmbedder } from './StyleEmbedder'
 import { embedMedia } from './embedMedia'
 import { getSvgJsx } from './getSvgJsx'
@@ -26,7 +27,7 @@ export async function exportToSvg(
 	// <foreignObject> elements have their styles and content inlined correctly.
 	const container = editor.getContainer()
 	const renderTarget = document.createElement('div')
-	renderTarget.className = 'tldraw-svg-export'
+	renderTarget.className = SVG_EXPORT_CLASSNAME
 	// we hide the element visually, but we don't want it to be focusable or interactive in any way either
 	renderTarget.inert = true
 	renderTarget.tabIndex = -1
@@ -83,9 +84,9 @@ export async function exportToSvg(
 
 async function applyChangesToForeignObjects(svg: SVGSVGElement) {
 	// If any shapes have their own <foreignObject> elements, we don't want to mess with them. Our
-	// ones that we need to embed will have a class of `tl-shape-foreign-object`.
+	// ones that we need to embed will have a class of `tl-export-embed-styles`.
 	const foreignObjectChildren = [
-		...svg.querySelectorAll('foreignObject.tl-shape-foreign-object > *'),
+		...svg.querySelectorAll('foreignObject.tl-export-embed-styles > *'),
 	]
 	if (!foreignObjectChildren.length) return
 

package/src/lib/exports/getSvgJsx.tsx

@@ -6,7 +6,7 @@ import {
 	TLShapeId,
 	getDefaultColorTheme,
 } from '@tldraw/tlschema'
-import { hasOwnProperty, promiseWithResolve } from '@tldraw/utils'
+import { hasOwnProperty, promiseWithResolve, uniqueId } from '@tldraw/utils'
 import {
 	ComponentType,
 	Fragment,
@@ -21,6 +21,7 @@ import { flushSync } from 'react-dom'
 import { ErrorBoundary } from '../components/ErrorBoundary'
 import { InnerShape, InnerShapeBackground } from '../components/Shape'
 import { Editor, TLRenderingShape } from '../editor/Editor'
+import { TLFontFace } from '../editor/managers/FontManager'
 import { ShapeUtil } from '../editor/shapes/ShapeUtil'
 import {
 	SvgExportContext,
@@ -340,6 +341,25 @@ function SvgExport({
 		})()
 	}, [bbox, editor, exportContext, masksId, renderingShapes, singleFrameShapeId, stateAtom])
 
+	useEffect(() => {
+		const fontsInUse = new Set<TLFontFace>()
+		for (const { id } of renderingShapes) {
+			for (const font of editor.fonts.getShapeFontFaces(id)) {
+				fontsInUse.add(font)
+			}
+		}
+
+		for (const font of fontsInUse) {
+			addExportDef({
+				key: uniqueId(),
+				getElement: async () => {
+					const declaration = await editor.fonts.toEmbeddedCssDeclaration(font)
+					return <style>{declaration}</style>
+				},
+			})
+		}
+	}, [editor, renderingShapes, addExportDef])
+
 	useEffect(() => {
 		if (shapeElements === null) return
 		onMount()
@@ -408,7 +428,7 @@ function ForeignObjectShape({
 				y={bbox.minY}
 				width={bbox.w}
 				height={bbox.h}
-				className="tl-shape-foreign-object"
+				className="tl-shape-foreign-object tl-export-embed-styles"
 			>
 				<div
 					className={className}

package/src/lib/exports/parseCss.ts

@@ -134,6 +134,7 @@ const inheritedProperties = new Set([
 	'list-style-type',
 	'list-style',
 	'orphans',
+	'overflow-wrap',
 	'quotes',
 	'tab-size',
 	'text-align',

package/src/lib/hooks/useCanvasEvents.ts

@@ -100,8 +100,9 @@ export function useCanvasEvents() {
 				if (
 					e.target.tagName !== 'A' &&
 					e.target.tagName !== 'TEXTAREA' &&
+					e.target.isContentEditable &&
 					// When in EditingShape state, we are actually clicking on a 'DIV'
-					// not A/TEXTAREA element yet. So, to preserve cursor position
+					// not A/TEXTAREA/contenteditable element yet. So, to preserve cursor position
 					// for edit mode on mobile we need to not preventDefault.
 					// TODO: Find out if we still need this preventDefault in general though.
 					!(editor.getEditingShape() && e.target.className.includes('tl-text-content'))

package/src/lib/hooks/useFixSafariDoubleTapZoomPencilEvents.ts

@@ -25,6 +25,7 @@ export function useFixSafariDoubleTapZoomPencilEvents(ref: React.RefObject<HTMLE
 				// Allow events to propagate if the app is editing a shape, or if the event is occurring in a text area or input
 				if (
 					IGNORED_TAGS.includes((target as Element).tagName?.toLocaleLowerCase()) ||
+					(target as HTMLElement).isContentEditable ||
 					editor.isIn('select.editing_shape')
 				) {
 					return

package/src/lib/hooks/usePassThroughMouseOverEvents.ts

@@ -0,0 +1,29 @@
+import { RefObject, useEffect } from 'react'
+import { preventDefault } from '../utils/dom'
+import { useContainer } from './useContainer'
+
+/** @public */
+export function usePassThroughMouseOverEvents(ref: RefObject<HTMLElement>) {
+	if (!ref) throw Error('usePassThroughWheelEvents must be passed a ref')
+	const container = useContainer()
+
+	useEffect(() => {
+		function onMouseOver(e: MouseEvent) {
+			if ((e as any).isSpecialRedispatchedEvent) return
+			preventDefault(e)
+			const cvs = container.querySelector('.tl-canvas')
+			if (!cvs) return
+			const newEvent = new PointerEvent(e.type, e as any)
+			;(newEvent as any).isSpecialRedispatchedEvent = true
+			cvs.dispatchEvent(newEvent)
+		}
+
+		const elm = ref.current
+		if (!elm) return
+
+		elm.addEventListener('mouseover', onMouseOver, { passive: false })
+		return () => {
+			elm.removeEventListener('mouseover', onMouseOver)
+		}
+	}, [container, ref])
+}

package/src/lib/hooks/usePassThroughWheelEvents.ts

@@ -5,7 +5,6 @@ import { useContainer } from './useContainer'
 /** @public */
 export function usePassThroughWheelEvents(ref: RefObject<HTMLElement>) {
 	if (!ref) throw Error('usePassThroughWheelEvents must be passed a ref')
-
 	const container = useContainer()
 
 	useEffect(() => {

package/src/lib/hooks/usePeerIds.ts

@@ -5,7 +5,7 @@ import { useEditor } from './useEditor'
 // TODO: maybe move this to a computed property on the App class?
 /**
  * @returns The list of peer UserIDs
- * @internal
+ * @public
  */
 export function usePeerIds() {
 	const editor = useEditor()

package/src/lib/hooks/usePresence.ts

@@ -4,8 +4,8 @@ import { useEditor } from './useEditor'
 
 // TODO: maybe move this to a computed property on the App class?
 /**
- * @returns The list of peer UserIDs
- * @internal
+ * @returns The latest presence of the user matching userId
+ * @public
  */
 export function usePresence(userId: string): TLInstancePresence | null {
 	const editor = useEditor()

package/src/lib/hooks/useViewportHeight.ts

@@ -0,0 +1,37 @@
+import { useLayoutEffect, useState } from 'react'
+
+/*!
+ * BSD License: https://github.com/outline/rich-markdown-editor/blob/main/LICENSE
+ * Copyright (c) 2020 General Outline, Inc (https://www.getoutline.com/) and individual contributors.
+ *
+ * Returns the height of the viewport.
+ * This is mainly to account for virtual keyboards on mobile devices.
+ *
+ * N.B. On iOS, you have to take into account the offsetTop as well so that you get an accurate position
+ * while using the virtual keyboard.
+ */
+/** @public */
+export function useViewportHeight(): number {
+	const visualViewport = window.visualViewport
+	const [height, setHeight] = useState<number>(() =>
+		visualViewport ? visualViewport.height + visualViewport.offsetTop : window.innerHeight
+	)
+
+	useLayoutEffect(() => {
+		const handleResize = () => {
+			const visualViewport = window.visualViewport
+			setHeight(() =>
+				visualViewport ? visualViewport.height + visualViewport.offsetTop : window.innerHeight
+			)
+		}
+
+		window.visualViewport?.addEventListener('resize', handleResize)
+		window.visualViewport?.addEventListener('scroll', handleResize)
+
+		return () => {
+			window.visualViewport?.removeEventListener('resize', handleResize)
+			window.visualViewport?.removeEventListener('scroll', handleResize)
+		}
+	}, [])
+	return height
+}

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

@@ -19,9 +19,11 @@ function getBrowserCanvasMaxSize(): CanvasMaxSize {
 	return maxCanvasSizes
 }
 
-// Extracted from https://github.com/jhildenbiddle/canvas-size
-// MIT License: https://github.com/jhildenbiddle/canvas-size/blob/master/LICENSE
-// Copyright (c) John Hildenbiddle
+/*!
+ * Extracted from https://github.com/jhildenbiddle/canvas-size
+ * MIT License: https://github.com/jhildenbiddle/canvas-size/blob/master/LICENSE
+ * Copyright (c) John Hildenbiddle
+ */
 
 const MAX_SAFE_CANVAS_DIMENSION = 8192
 const MAX_SAFE_CANVAS_AREA = 4096 * 4096

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'
+export const version = '3.10.0-canary.12c0cb0549ca'
 export const publishDates = {
 	major: '2024-09-13T14:36:29.063Z',
-	minor: '2025-03-03T11:42:22.746Z',
-	patch: '2025-03-03T11:42:22.746Z',
+	minor: '2025-03-06T09:01:02.970Z',
+	patch: '2025-03-06T09:01:02.970Z',
 }