tldraw 4.2.0-canary.e6ed9aee7fe4 → 4.2.0-canary.e7800b04c779

package/src/lib/ui/context/actions.tsx

@@ -1495,6 +1495,22 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
 					trackEvent('set-style', { source, id: style.id, value: 'fill' })
 				},
 			},
+			{
+				id: 'select-fill-lined-fill',
+				label: 'fill-style.lined-fill',
+				kbd: 'alt+shift+f',
+				onSelect(source) {
+					const style = DefaultFillStyle
+					editor.run(() => {
+						editor.markHistoryStoppingPoint('change-fill')
+						if (editor.isIn('select')) {
+							editor.setStyleForSelectedShapes(style, 'lined-fill')
+						}
+						editor.setStyleForNextShapes(style, 'lined-fill')
+					})
+					trackEvent('set-style', { source, id: style.id, value: 'lined-fill' })
+				},
+			},
 			{
 				id: 'flatten-to-image',
 				label: 'action.flatten-to-image',

package/src/lib/ui/hooks/useTranslation/TLUiTranslationKey.ts

@@ -154,6 +154,7 @@ export type TLUiTranslationKey =
 	| 'fill-style.solid'
 	| 'fill-style.pattern'
 	| 'fill-style.fill'
+	| 'fill-style.lined-fill'
 	| 'dash-style.dashed'
 	| 'dash-style.dotted'
 	| 'dash-style.draw'

package/src/lib/ui/hooks/useTranslation/defaultTranslation.ts

@@ -155,6 +155,7 @@ export const DEFAULT_TRANSLATION = {
 	'fill-style.solid': 'Solid',
 	'fill-style.pattern': 'Pattern',
 	'fill-style.fill': 'Fill',
+	'fill-style.lined-fill': 'Lined fill',
 	'dash-style.dashed': 'Dashed',
 	'dash-style.dotted': 'Dotted',
 	'dash-style.draw': 'Draw',

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.e6ed9aee7fe4'
+export const version = '4.2.0-canary.e7800b04c779'
 export const publishDates = {
 	major: '2025-09-18T14:39:22.803Z',
-	minor: '2025-10-30T15:48:19.323Z',
-	patch: '2025-10-30T15:48:19.323Z',
+	minor: '2025-11-14T14:34:54.102Z',
+	patch: '2025-11-14T14:34:54.102Z',
 }

package/src/lib/ui.css

@@ -514,12 +514,10 @@
 /* If mobile use 16px as font size */
 /* On iOS, font size under 16px in an input will make the page zoom into the input 🤦‍♂️ */
 /* https://css-tricks.com/16px-or-larger-text-prevents-ios-form-zoom/ */
-@media (max-width: 600px) {
-	@supports (-webkit-touch-callout: none) {
-		/* CSS specific to iOS devices */
-		.tlui-input {
-			font-size: 16px;
-		}
+@supports (-webkit-touch-callout: none) {
+	/* CSS specific to iOS devices */
+	.tlui-input {
+		font-size: 16px;
 	}
 }
 

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'))

package/tldraw.css

@@ -2315,12 +2315,10 @@ it from receiving any pointer events or affecting the cursor. */
 /* If mobile use 16px as font size */
 /* On iOS, font size under 16px in an input will make the page zoom into the input 🤦‍♂️ */
 /* https://css-tricks.com/16px-or-larger-text-prevents-ios-form-zoom/ */
-@media (max-width: 600px) {
-	@supports (-webkit-touch-callout: none) {
-		/* CSS specific to iOS devices */
-		.tlui-input {
-			font-size: 16px;
-		}
+@supports (-webkit-touch-callout: none) {
+	/* CSS specific to iOS devices */
+	.tlui-input {
+		font-size: 16px;
 	}
 }