tldraw 4.2.0-canary.08ca3971cdee → 4.2.0-canary.0ebe44a13b81

package/src/lib/shapes/frame/components/FrameLabelInput.tsx

@@ -1,5 +1,8 @@
-import { TLFrameShape, TLShapeId, useEditor } from '@tldraw/editor'
-import { forwardRef, useCallback } from 'react'
+import { TLFrameShape, TLShapeId, useEditor, useValue } from '@tldraw/editor'
+import { forwardRef, useCallback, useEffect, useRef } from 'react'
+import { PORTRAIT_BREAKPOINT } from '../../../ui/constants'
+import { useBreakpoint } from '../../../ui/context/breakpoints'
+import { useTranslation } from '../../../ui/hooks/useTranslation/useTranslation'
 import { defaultEmptyAs } from '../FrameShapeUtil'
 
 export const FrameLabelInput = forwardRef<
@@ -7,6 +10,15 @@ export const FrameLabelInput = forwardRef<
 	{ id: TLShapeId; name: string; isEditing: boolean }
 >(({ id, name, isEditing }, ref) => {
 	const editor = useEditor()
+	const breakpoint = useBreakpoint()
+	const isCoarsePointer = useValue(
+		'isCoarsePointer',
+		() => editor.getInstanceState().isCoarsePointer,
+		[editor]
+	)
+	const shouldUseWindowPrompt = breakpoint < PORTRAIT_BREAKPOINT.TABLET_SM && isCoarsePointer
+	const promptOpen = useRef<boolean>(false)
+	const msg = useTranslation()
 
 	const handlePointerDown = useCallback(
 		(e: React.PointerEvent) => {
@@ -28,13 +40,12 @@ export const FrameLabelInput = forwardRef<
 		[editor]
 	)
 
-	const handleBlur = useCallback(
-		(e: React.FocusEvent<HTMLInputElement>) => {
+	const renameFrame = useCallback(
+		(value: string) => {
 			const shape = editor.getShape<TLFrameShape>(id)
 			if (!shape) return
 
 			const name = shape.props.name
-			const value = e.currentTarget.value.trim()
 			if (name === value) return
 
 			editor.updateShapes([
@@ -48,36 +59,49 @@ export const FrameLabelInput = forwardRef<
 		[id, editor]
 	)
 
+	const handleBlur = useCallback(
+		(e: React.FocusEvent<HTMLInputElement>) => {
+			renameFrame(e.currentTarget.value)
+		},
+		[renameFrame]
+	)
+
 	const handleChange = useCallback(
 		(e: React.ChangeEvent<HTMLInputElement>) => {
-			const shape = editor.getShape<TLFrameShape>(id)
-			if (!shape) return
-
-			const name = shape.props.name
-			const value = e.currentTarget.value
-			if (name === value) return
-
-			editor.updateShapes([
-				{
-					id,
-					type: 'frame',
-					props: { name: value },
-				},
-			])
+			renameFrame(e.currentTarget.value)
 		},
-		[id, editor]
+		[renameFrame]
 	)
 
+	/* Mobile rename uses window.prompt */
+	useEffect(() => {
+		if (!isEditing) {
+			promptOpen.current = false
+			return
+		}
+		if (isEditing && shouldUseWindowPrompt && !promptOpen.current) {
+			promptOpen.current = true
+			const shape = editor.getShape<TLFrameShape>(id)
+			const currentName = shape?.props.name ?? ''
+			const newName = window.prompt(msg('action.rename'), currentName)
+			promptOpen.current = false
+			if (newName !== null) renameFrame(newName)
+			editor.setEditingShape(null)
+		}
+	}, [isEditing, shouldUseWindowPrompt, id, msg, renameFrame, editor])
+
 	return (
-		<div className={`tl-frame-label ${isEditing ? 'tl-frame-label__editing' : ''}`}>
+		<div
+			className={`tl-frame-label ${isEditing && !shouldUseWindowPrompt ? 'tl-frame-label__editing' : ''}`}
+		>
 			<input
 				className="tl-frame-name-input"
 				ref={ref}
-				disabled={!isEditing}
-				readOnly={!isEditing}
+				disabled={!isEditing || shouldUseWindowPrompt}
+				readOnly={!isEditing || shouldUseWindowPrompt}
 				style={{ display: isEditing ? undefined : 'none' }}
 				value={name}
-				autoFocus
+				autoFocus={!shouldUseWindowPrompt}
 				onKeyDown={handleKeyDown}
 				onBlur={handleBlur}
 				onChange={handleChange}

package/src/lib/shapes/note/NoteShapeUtil.tsx

@@ -31,9 +31,9 @@ import {
 	useEditor,
 	useValue,
 } from '@tldraw/editor'
-import { useCallback } from 'react'
+import { useCallback, useContext } from 'react'
 import { startEditingShapeWithLabel } from '../../tools/SelectTool/selectHelpers'
-import { useCurrentTranslation } from '../../ui/hooks/useTranslation/useTranslation'
+import { TranslationsContext } from '../../ui/hooks/useTranslation/useTranslation'
 import {
 	isEmptyRichText,
 	renderHtmlFromRichTextForMeasurement,
@@ -493,7 +493,8 @@ function getLabelSize(editor: Editor, shape: TLNoteShape) {
 
 function useNoteKeydownHandler(id: TLShapeId) {
 	const editor = useEditor()
-	const translation = useCurrentTranslation()
+	// Try to get the translation context, but fallback to ltr if it doesn't exist
+	const translation = useContext(TranslationsContext)
 
 	return useCallback(
 		(e: KeyboardEvent) => {
@@ -512,7 +513,7 @@ function useNoteKeydownHandler(id: TLShapeId) {
 				// tab controls x axis (shift inverts direction set by RTL)
 				// cmd enter is the y axis (shift inverts direction)
 				const isRTL = !!(
-					translation.dir === 'rtl' ||
+					translation?.dir === 'rtl' ||
 					// todo: can we check a partial of the text, so that we don't have to render the whole thing?
 					isRightToLeftLanguage(renderPlaintextFromRichText(editor, shape.props.richText))
 				)
@@ -540,7 +541,7 @@ function useNoteKeydownHandler(id: TLShapeId) {
 				}
 			}
 		},
-		[id, editor, translation.dir]
+		[id, editor, translation?.dir]
 	)
 }
 

package/src/lib/ui/components/PageMenu/DefaultPageMenu.tsx

@@ -3,7 +3,6 @@ import {
 	TLPageId,
 	releasePointerCapture,
 	setPointerCapture,
-	tlenv,
 	useEditor,
 	useValue,
 } from '@tldraw/editor'
@@ -306,6 +305,8 @@ export const DefaultPageMenu = memo(function DefaultPageMenu() {
 		[editor, trackEvent]
 	)
 
+	const shouldUseWindowPrompt = breakpoint < PORTRAIT_BREAKPOINT.TABLET_SM && isCoarsePointer
+
 	return (
 		<TldrawUiPopover id="pages" onOpenChange={onOpenChange} open={isOpen}>
 			<TldrawUiPopoverTrigger data-testid="main.page-menu">
@@ -390,7 +391,7 @@ export const DefaultPageMenu = memo(function DefaultPageMenu() {
 									>
 										<TldrawUiButtonIcon icon="drag-handle-dots" />
 									</TldrawUiButton>
-									{breakpoint < PORTRAIT_BREAKPOINT.TABLET_SM && isCoarsePointer ? (
+									{shouldUseWindowPrompt ? (
 										// sigh, this is a workaround for iOS Safari
 										// because the device and the radix popover seem
 										// to be fighting over scroll position. Nothing
@@ -399,7 +400,7 @@ export const DefaultPageMenu = memo(function DefaultPageMenu() {
 											type="normal"
 											className="tlui-page-menu__item__button"
 											onClick={() => {
-												const name = window.prompt('Rename page', page.name)
+												const name = window.prompt(msg('action.rename'), page.name)
 												if (name && name !== page.name) {
 													renamePage(page.id, name)
 												}
@@ -465,8 +466,8 @@ export const DefaultPageMenu = memo(function DefaultPageMenu() {
 												item={page}
 												listSize={pages.length}
 												onRename={() => {
-													if (tlenv.isIos) {
-														const name = window.prompt('Rename page', page.name)
+													if (shouldUseWindowPrompt) {
+														const name = window.prompt(msg('action.rename'), page.name)
 														if (name && name !== page.name) {
 															renamePage(page.id, name)
 														}

package/src/lib/ui/hooks/useTranslation/useTranslation.tsx

@@ -23,7 +23,8 @@ export interface TLUiTranslationProviderProps {
 /** @public */
 export type TLUiTranslationContextType = TLUiTranslation
 
-const TranslationsContext = React.createContext<TLUiTranslationContextType | null>(null)
+/** @internal */
+export const TranslationsContext = React.createContext<TLUiTranslationContextType | null>(null)
 
 /** @public */
 export function useCurrentTranslation() {

package/src/lib/ui/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 = '4.2.0-canary.08ca3971cdee'
+export const version = '4.2.0-canary.0ebe44a13b81'
 export const publishDates = {
 	major: '2025-09-18T14:39:22.803Z',
-	minor: '2025-11-03T08:49:30.813Z',
-	patch: '2025-11-03T08:49:30.813Z',
+	minor: '2025-11-07T15:16:20.925Z',
+	patch: '2025-11-07T15:16:20.925Z',
 }

package/src/test/TldrawEditor.test.tsx

@@ -6,16 +6,17 @@ import {
 	HTMLContainer,
 	TLAssetStore,
 	TLBaseShape,
+	TLShapeId,
 	TldrawEditor,
 	createShapeId,
 	createTLStore,
 	noop,
+	toRichText,
 } from '@tldraw/editor'
 import { StrictMode } from 'react'
 import { vi } from 'vitest'
 import { defaultShapeUtils } from '../lib/defaultShapeUtils'
 import { defaultTools } from '../lib/defaultTools'
-import { GeoShapeUtil } from '../lib/shapes/geo/GeoShapeUtil'
 import { defaultAddFontsFromNode, tipTapDefaultExtensions } from '../lib/utils/text/richText'
 import {
 	renderTldrawComponent,
@@ -169,7 +170,7 @@ describe('<TldrawEditor />', () => {
 		let editor = {} as Editor
 		await renderTldrawComponent(
 			<TldrawEditor
-				shapeUtils={[GeoShapeUtil]}
+				shapeUtils={defaultShapeUtils}
 				initialState="select"
 				tools={defaultTools}
 				onMount={(editorApp) => {
@@ -185,39 +186,83 @@ describe('<TldrawEditor />', () => {
 			editor.updateInstanceState({ screenBounds: { x: 0, y: 0, w: 1080, h: 720 } })
 		})
 
-		const id = createShapeId()
-
-		await act(async () => {
-			editor.createShapes([
-				{
-					id,
-					type: 'geo',
-					props: { w: 100, h: 100 },
+		// Test all shape types except group
+		const shapeTypesToTest = [
+			{ type: 'arrow' as const, props: { start: { x: 0, y: 0 }, end: { x: 100, y: 100 } } },
+			{ type: 'bookmark' as const, props: { w: 100, h: 100, url: 'https://example.com' } },
+			{
+				type: 'draw' as const,
+				props: { segments: [{ type: 'free' as const, points: [{ x: 0, y: 0, z: 0.5 }] }] },
+			},
+			{ type: 'embed' as const, props: { w: 100, h: 100, url: 'https://example.com' } },
+			{ type: 'frame' as const, props: { w: 100, h: 100 } },
+			{ type: 'geo' as const, props: { w: 100, h: 100, geo: 'rectangle' } },
+			{
+				type: 'highlight' as const,
+				props: { segments: [{ type: 'free' as const, points: [{ x: 0, y: 0, z: 0.5 }] }] },
+			},
+			{ type: 'image' as const, props: { w: 100, h: 100 } },
+			{
+				type: 'line' as const,
+				props: {
+					points: {
+						a1: { id: 'a1', index: 'a1', x: 0, y: 0 },
+						a2: { id: 'a2', index: 'a2', x: 100, y: 100 },
+					},
 				},
-			])
-		})
+			},
+			{ type: 'note' as const, props: { richText: toRichText('test') } },
+			{ type: 'text' as const, props: { w: 100, richText: toRichText('test') } },
+			{ type: 'video' as const, props: { w: 100, h: 100 } },
+		]
+
+		const shapeIds: TLShapeId[] = []
+
+		for (let i = 0; i < shapeTypesToTest.length; i++) {
+			const shapeConfig = shapeTypesToTest[i]
+			const id = createShapeId()
+			shapeIds.push(id)
+
+			await act(async () => {
+				editor.createShapes([
+					{
+						id,
+						type: shapeConfig.type,
+						x: i * 150, // Space them out horizontally
+						y: 0,
+						props: shapeConfig.props,
+					},
+				])
+			})
+
+			// Does the shape exist?
+			const shape = editor.getShape(id)
+			expect(shape).toBeTruthy()
+			expect(shape?.type).toBe(shapeConfig.type)
+
+			// Check that all shapes rendered without error boundaries
+			expect(
+				document.querySelectorAll('.tl-shape-error-boundary'),
+				`${shapeConfig.type} had an error while rendering`
+			).toHaveLength(0)
+		}
 
-		// Does the shape exist?
-		expect(editor.getShape(id)).toMatchObject({
-			id,
-			type: 'geo',
-			x: 0,
-			y: 0,
-			opacity: 1,
-			props: { geo: 'rectangle', w: 100, h: 100 },
-		})
+		// Check that all shape components are rendering
+		expect(document.querySelectorAll('.tl-shape').length).toBeGreaterThanOrEqual(
+			shapeTypesToTest.length
+		)
 
-		// Is the shape's component rendering?
-		expect(document.querySelectorAll('.tl-shape')).toHaveLength(1)
-		// though indicator should be display none
-		expect(document.querySelectorAll('.tl-shape-indicator')).toHaveLength(1)
+		// Check that all shape indicators are present
+		expect(document.querySelectorAll('.tl-shape-indicator').length).toBeGreaterThanOrEqual(
+			shapeTypesToTest.length
+		)
 
-		// Select the shape
-		await act(async () => editor.select(id))
+		// Select one of the shapes (the note shape)
+		const noteShapeId = shapeIds[9] // note is at index 9
+		await act(async () => editor.select(noteShapeId))
 
 		expect(editor.getSelectedShapeIds().length).toBe(1)
-		// though indicator it should be visible
-		expect(document.querySelectorAll('.tl-shape-indicator')).toHaveLength(1)
+		expect(editor.getSelectedShapeIds()[0]).toBe(noteShapeId)
 
 		// Select the eraser tool...
 		await act(async () => editor.setCurrentTool('eraser'))