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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tldraw/editor",
   "description": "A tiny little drawing app (editor).",
-  "version": "3.9.0-internal.7f0e15f4f7d9",
+  "version": "3.10.0-canary.d4dfa96478a4",
   "author": {
     "name": "tldraw Inc.",
     "email": "hello@tldraw.com"
@@ -45,15 +45,12 @@
     "lint": "yarn run -T tsx ../../internal/scripts/lint.ts"
   },
   "dependencies": {
-    "@tiptap/core": "^2.9.1",
-    "@tiptap/pm": "^2.9.1",
-    "@tiptap/react": "^2.9.1",
-    "@tldraw/state": "3.9.0-internal.7f0e15f4f7d9",
-    "@tldraw/state-react": "3.9.0-internal.7f0e15f4f7d9",
-    "@tldraw/store": "3.9.0-internal.7f0e15f4f7d9",
-    "@tldraw/tlschema": "3.9.0-internal.7f0e15f4f7d9",
-    "@tldraw/utils": "3.9.0-internal.7f0e15f4f7d9",
-    "@tldraw/validate": "3.9.0-internal.7f0e15f4f7d9",
+    "@tldraw/state": "3.10.0-canary.d4dfa96478a4",
+    "@tldraw/state-react": "3.10.0-canary.d4dfa96478a4",
+    "@tldraw/store": "3.10.0-canary.d4dfa96478a4",
+    "@tldraw/tlschema": "3.10.0-canary.d4dfa96478a4",
+    "@tldraw/utils": "3.10.0-canary.d4dfa96478a4",
+    "@tldraw/validate": "3.10.0-canary.d4dfa96478a4",
     "@types/core-js": "^2.5.8",
     "@use-gesture/react": "^10.3.1",
     "classnames": "^2.5.1",

package/src/index.ts

@@ -26,14 +26,6 @@ export {
 	useValue,
 } from '@tldraw/state-react'
 export { resizeScaled } from './lib/editor/shapes/shared/resizeScaled'
-export {
-	getFontsFromRichText,
-	type RichTextFontVisitor,
-	type RichTextFontVisitorState,
-	type TLTextOptions,
-	type TiptapEditor,
-	type TiptapNode,
-} from './lib/utils/richText'
 export { LocalIndexedDb, Table, type StoreName } from './lib/utils/sync/LocalIndexedDb'
 // eslint-disable-next-line local/no-export-star
 export * from '@tldraw/store'
@@ -171,11 +163,6 @@ export {
 } from './lib/editor/bindings/BindingUtil'
 export { ClickManager, type TLClickState } from './lib/editor/managers/ClickManager'
 export { EdgeScrollManager } from './lib/editor/managers/EdgeScrollManager'
-export {
-	FontManager,
-	type TLFontFace,
-	type TLFontFaceSource,
-} from './lib/editor/managers/FontManager'
 export { HistoryManager } from './lib/editor/managers/HistoryManager'
 export { ScribbleManager, type ScribbleItem } from './lib/editor/managers/ScribbleManager'
 export {
@@ -197,9 +184,11 @@ export { BaseBoxShapeUtil, type TLBaseBoxShape } from './lib/editor/shapes/BaseB
 export {
 	ShapeUtil,
 	type TLCropInfo,
+	type TLGeometryOpts,
 	type TLHandleDragInfo,
 	type TLResizeInfo,
 	type TLResizeMode,
+	type TLShapeUtilCanBeLaidOutOpts,
 	type TLShapeUtilCanBindOpts,
 	type TLShapeUtilCanvasSvgDef,
 	type TLShapeUtilConstructor,
@@ -310,7 +299,6 @@ export { useIsCropping } from './lib/hooks/useIsCropping'
 export { useIsDarkMode } from './lib/hooks/useIsDarkMode'
 export { useIsEditing } from './lib/hooks/useIsEditing'
 export { useLocalStore } from './lib/hooks/useLocalStore'
-export { usePassThroughMouseOverEvents } from './lib/hooks/usePassThroughMouseOverEvents'
 export { usePassThroughWheelEvents } from './lib/hooks/usePassThroughWheelEvents'
 export { usePeerIds } from './lib/hooks/usePeerIds'
 export { usePresence } from './lib/hooks/usePresence'
@@ -325,7 +313,6 @@ export {
 export { useSelectionEvents } from './lib/hooks/useSelectionEvents'
 export { useTLSchemaFromUtils, useTLStore } from './lib/hooks/useTLStore'
 export { useTransform } from './lib/hooks/useTransform'
-export { useViewportHeight } from './lib/hooks/useViewportHeight'
 export {
 	LicenseManager,
 	type InvalidLicenseKeyResult,

package/src/lib/TldrawEditor.tsx

@@ -14,6 +14,7 @@ import React, {
 } from 'react'
 
 import classNames from 'classnames'
+import { TLDeepLinkOptions } from '..'
 import { version } from '../version'
 import { OptionalErrorBoundary } from './components/ErrorBoundary'
 import { DefaultErrorFallback } from './components/default-components/DefaultErrorFallback'
@@ -43,9 +44,7 @@ import { useZoomCss } from './hooks/useZoomCss'
 import { LicenseProvider } from './license/LicenseProvider'
 import { Watermark } from './license/Watermark'
 import { TldrawOptions } from './options'
-import { TLDeepLinkOptions } from './utils/deepLinks'
 import { stopEventPropagation } from './utils/dom'
-import { TLTextOptions } from './utils/richText'
 import { TLStoreWithStatus } from './utils/sync/StoreWithStatus'
 
 /**
@@ -168,11 +167,6 @@ export interface TldrawEditorBaseProps {
 	 */
 	cameraOptions?: Partial<TLCameraOptions>
 
-	/**
-	 * Text options for the editor.
-	 */
-	textOptions?: TLTextOptions
-
 	/**
 	 * Options for the editor.
 	 */
@@ -196,11 +190,6 @@ export interface TldrawEditorBaseProps {
 	 * remain in the store and participate in all other operations.
 	 */
 	isShapeHidden?(shape: TLShape, editor: Editor): boolean
-
-	/**
-	 * The URLs for the fonts to use in the editor.
-	 */
-	assetUrls?: { fonts?: { [key: string]: string | undefined } }
 }
 
 /**
@@ -383,12 +372,10 @@ function TldrawEditorWithReadyStore({
 	autoFocus = true,
 	inferDarkMode,
 	cameraOptions,
-	textOptions,
 	options,
 	licenseKey,
 	deepLinks: _deepLinks,
 	isShapeHidden,
-	assetUrls,
 }: Required<
 	TldrawEditorProps & {
 		store: TLStore
@@ -443,11 +430,9 @@ function TldrawEditorWithReadyStore({
 				autoFocus,
 				inferDarkMode,
 				cameraOptions,
-				textOptions,
 				options,
 				licenseKey,
 				isShapeHidden,
-				fontAssetUrls: assetUrls?.fonts,
 			})
 
 			editor.updateViewportScreenBounds(canvasRef.current ?? container)
@@ -482,8 +467,6 @@ function TldrawEditorWithReadyStore({
 			setEditor,
 			licenseKey,
 			isShapeHidden,
-			textOptions,
-			assetUrls,
 		]
 	)
 
@@ -549,41 +532,10 @@ function TldrawEditorWithReadyStore({
 		[editor, autoFocus]
 	)
 
-	const [_fontLoadingState, setFontLoadingState] = useState<{
-		editor: Editor
-		isLoaded: boolean
-	} | null>(null)
-	let fontLoadingState = _fontLoadingState
-	if (editor !== fontLoadingState?.editor) {
-		const newFontLoadingState = editor ? { editor, isLoaded: false } : null
-		if (fontLoadingState !== newFontLoadingState) setFontLoadingState(newFontLoadingState)
-		fontLoadingState = newFontLoadingState
-	}
-	useEffect(() => {
-		if (!editor) return
-		let isCancelled = false
+	const { Canvas } = useEditorComponents()
 
-		editor.fonts
-			.loadRequiredFontsForCurrentPage(editor.options.maxFontsToLoadBeforeRender)
-			.finally(() => {
-				if (isCancelled) return
-				setFontLoadingState({ editor, isLoaded: true })
-			})
-
-		return () => {
-			isCancelled = true
-		}
-	}, [editor])
-
-	const { Canvas, LoadingScreen } = useEditorComponents()
-
-	if (!editor || !fontLoadingState?.isLoaded) {
-		return (
-			<>
-				{LoadingScreen && <LoadingScreen />}
-				<div className="tl-canvas" ref={canvasRef} />
-			</>
-		)
+	if (!editor) {
+		return <div className="tl-canvas" ref={canvasRef} />
 	}
 
 	return (

package/src/lib/components/LiveCollaborators.tsx

@@ -92,6 +92,7 @@ const Collaborator = track(function Collaborator({
 				<CollaboratorBrush
 					className="tl-collaborator__brush"
 					key={userId + '_brush'}
+					userId={userId}
 					brush={brush}
 					color={color}
 					opacity={0.1}
@@ -101,6 +102,7 @@ const Collaborator = track(function Collaborator({
 				<CollaboratorCursor
 					className="tl-collaborator__cursor"
 					key={userId + '_cursor'}
+					userId={userId}
 					point={cursor}
 					color={color}
 					zoom={zoomLevel}
@@ -111,6 +113,7 @@ const Collaborator = track(function Collaborator({
 				<CollaboratorHint
 					className="tl-collaborator__cursor-hint"
 					key={userId + '_cursor_hint'}
+					userId={userId}
 					point={cursor}
 					color={color}
 					zoom={zoomLevel}
@@ -123,6 +126,7 @@ const Collaborator = track(function Collaborator({
 						<CollaboratorScribble
 							key={userId + '_scribble_' + scribble.id}
 							className="tl-collaborator__scribble"
+							userId={userId}
 							scribble={scribble}
 							color={color}
 							zoom={zoomLevel}
@@ -138,6 +142,7 @@ const Collaborator = track(function Collaborator({
 						<CollaboratorShapeIndicator
 							className="tl-collaborator__shape-indicator"
 							key={userId + '_' + shapeId}
+							userId={userId}
 							shapeId={shapeId}
 							color={color}
 							opacity={0.5}

package/src/lib/components/Shape.tsx

@@ -1,7 +1,6 @@
-import { react } from '@tldraw/state'
 import { useQuickReactor, useStateTracking } from '@tldraw/state-react'
 import { TLShape, TLShapeId } from '@tldraw/tlschema'
-import { memo, useCallback, useEffect, useRef } from 'react'
+import { memo, useCallback, useRef } from 'react'
 import { ShapeUtil } from '../editor/shapes/ShapeUtil'
 import { useEditor } from '../hooks/useEditor'
 import { useEditorComponents } from '../hooks/useEditorComponents'
@@ -42,13 +41,6 @@ export const Shape = memo(function Shape({
 	const containerRef = useRef<HTMLDivElement>(null)
 	const bgContainerRef = useRef<HTMLDivElement>(null)
 
-	useEffect(() => {
-		return react('load fonts', () => {
-			const fonts = editor.fonts.getShapeFontFaces(shape)
-			editor.fonts.requestFonts(fonts)
-		})
-	}, [editor, shape])
-
 	const memoizedStuffRef = useRef({
 		transform: '',
 		clipPath: 'none',

package/src/lib/components/default-components/DefaultBrush.tsx

@@ -5,6 +5,7 @@ import { toDomPrecision } from '../../primitives/utils'
 
 /** @public */
 export interface TLBrushProps {
+	userId?: string
 	brush: BoxModel
 	color?: string
 	opacity?: number

package/src/lib/components/default-components/DefaultCollaboratorHint.tsx

@@ -9,6 +9,7 @@ import { clamp } from '../../primitives/utils'
 
 /** @public */
 export interface TLCollaboratorHintProps {
+	userId: string
 	className?: string
 	point: VecModel
 	viewport: Box

package/src/lib/components/default-components/DefaultCursor.tsx

@@ -6,6 +6,7 @@ import { useTransform } from '../../hooks/useTransform'
 
 /** @public */
 export interface TLCursorProps {
+	userId: string
 	className?: string
 	point: VecModel | null
 	zoom: number

package/src/lib/components/default-components/DefaultErrorFallback.tsx

@@ -170,9 +170,11 @@ My browser: ${navigator.userAgent}`
 						<p>
 							If you keep seeing this screen, you can create a{' '}
 							<a href={url.toString()}>GitHub issue</a> or ask for help on{' '}
-							<a href="https://discord.gg/Cq6cPsTfNy">Discord</a>. If you are still stuck, you can
-							reset the tldraw data on your machine. This may erase the project you were working on,
-							so try to get help first.
+							<a href="https://discord.tldraw.com/?utm_source=sdk&utm_medium=organic&utm_campaign=error-screen">
+								Discord
+							</a>
+							. If you are still stuck, you can reset the tldraw data on your machine. This may
+							erase the project you were working on, so try to get help first.
 						</p>
 						{shouldShowError && (
 							<>

package/src/lib/components/default-components/DefaultScribble.tsx

@@ -4,6 +4,7 @@ import { getSvgPathFromPoints } from '../../utils/getSvgPathFromPoints'
 
 /** @public */
 export interface TLScribbleProps {
+	userId?: string
 	scribble: TLScribble
 	zoom: number
 	color?: string

package/src/lib/components/default-components/DefaultShapeIndicator.tsx

@@ -38,6 +38,7 @@ const InnerIndicator = ({ editor, id }: { editor: Editor; id: TLShapeId }) => {
 
 /** @public */
 export interface TLShapeIndicatorProps {
+	userId?: string
 	shapeId: TLShapeId
 	color?: string | undefined
 	opacity?: number