update text tests (strange)

apps/examples/e2e/tests/test-text.spec.ts

@@ -107,94 +107,6 @@ test.describe('text measurement', () => {
 		expect(formatLines(spans)).toEqual([['tes'], ['ting']])
 	})
 
-	test('for auto-font-sizing shapes, should do normal font size for text that does not have long words', async () => {
-		const shape = await page.evaluate(() => {
-			const id = 'shape:testShape' as TLShapeId
-			editor.createShapes([
-				{
-					id,
-					type: 'note',
-					x: 0,
-					y: 0,
-					props: {
-						text: 'this is just some regular text',
-						size: 'xl',
-					},
-				},
-			])
-
-			return editor.getShape(id) as TLNoteShape
-		})
-
-		expect(shape.props.fontSizeAdjustment).toEqual(32)
-	})
-
-	test('for auto-font-sizing shapes, should auto-size text that have slightly long words', async () => {
-		const shape = await page.evaluate(() => {
-			const id = 'shape:testShape' as TLShapeId
-			editor.createShapes([
-				{
-					id,
-					type: 'note',
-					x: 0,
-					y: 0,
-					props: {
-						text: 'Amsterdam',
-						size: 'xl',
-					},
-				},
-			])
-
-			return editor.getShape(id) as TLNoteShape
-		})
-
-		expect(shape.props.fontSizeAdjustment).toEqual(27)
-	})
-
-	test('for auto-font-sizing shapes, should auto-size text that have long words', async () => {
-		const shape = await page.evaluate(() => {
-			const id = 'shape:testShape' as TLShapeId
-			editor.createShapes([
-				{
-					id,
-					type: 'note',
-					x: 0,
-					y: 0,
-					props: {
-						text: 'this is a tentoonstelling',
-						size: 'xl',
-					},
-				},
-			])
-
-			return editor.getShape(id) as TLNoteShape
-		})
-
-		expect(shape.props.fontSizeAdjustment).toEqual(20)
-	})
-
-	test('for auto-font-sizing shapes, should wrap text that has words that are way too long', async () => {
-		const shape = await page.evaluate(() => {
-			const id = 'shape:testShape' as TLShapeId
-			editor.createShapes([
-				{
-					id,
-					type: 'note',
-					x: 0,
-					y: 0,
-					props: {
-						text: 'a very long dutch word like ziekenhuisinrichtingsmaatschappij',
-						size: 'xl',
-					},
-				},
-			])
-
-			return editor.getShape(id) as TLNoteShape
-		})
-
-		expect(shape.props.fontSizeAdjustment).toEqual(14)
-	})
-
 	test('should preserve whitespace at line breaks', async () => {
 		const spans = await page.evaluate<
 			{ text: string; box: BoxModel }[],
@@ -245,7 +157,7 @@ test.describe('text measurement', () => {
 			measureTextSpansOptions
 		)
 
-		expect(formatLines(spans)).toEqual([['  ', 'testing', ' ', 'testing']])
+		expect(formatLines(spans)).toEqual([['  ', 'testing', ' '], ['testing']])
 	})
 
 	test('should place starting whitespace on its own line if it has to', async () => {
@@ -330,4 +242,92 @@ test.describe('text measurement', () => {
 
 		expect(formatLines(spans)).toEqual([[' \n'], [' \n'], [' \n'], [' ']])
 	})
+
+	test('for auto-font-sizing shapes, should do normal font size for text that does not have long words', async () => {
+		const shape = await page.evaluate(() => {
+			const id = 'shape:testShape' as TLShapeId
+			editor.createShapes([
+				{
+					id,
+					type: 'note',
+					x: 0,
+					y: 0,
+					props: {
+						text: 'this is just some regular text',
+						size: 'xl',
+					},
+				},
+			])
+
+			return editor.getShape(id) as TLNoteShape
+		})
+
+		expect(shape.props.fontSizeAdjustment).toEqual(32)
+	})
+
+	test('for auto-font-sizing shapes, should auto-size text that have slightly long words', async () => {
+		const shape = await page.evaluate(() => {
+			const id = 'shape:testShape' as TLShapeId
+			editor.createShapes([
+				{
+					id,
+					type: 'note',
+					x: 0,
+					y: 0,
+					props: {
+						text: 'Amsterdam',
+						size: 'xl',
+					},
+				},
+			])
+
+			return editor.getShape(id) as TLNoteShape
+		})
+
+		expect(shape.props.fontSizeAdjustment).toEqual(28)
+	})
+
+	test('for auto-font-sizing shapes, should auto-size text that have long words', async () => {
+		const shape = await page.evaluate(() => {
+			const id = 'shape:testShape' as TLShapeId
+			editor.createShapes([
+				{
+					id,
+					type: 'note',
+					x: 0,
+					y: 0,
+					props: {
+						text: 'this is a tentoonstelling',
+						size: 'xl',
+					},
+				},
+			])
+
+			return editor.getShape(id) as TLNoteShape
+		})
+
+		expect(shape.props.fontSizeAdjustment).toEqual(21)
+	})
+
+	test('for auto-font-sizing shapes, should wrap text that has words that are way too long', async () => {
+		const shape = await page.evaluate(() => {
+			const id = 'shape:testShape' as TLShapeId
+			editor.createShapes([
+				{
+					id,
+					type: 'note',
+					x: 0,
+					y: 0,
+					props: {
+						text: 'a very long dutch word like ziekenhuisinrichtingsmaatschappij',
+						size: 'xl',
+					},
+				},
+			])
+
+			return editor.getShape(id) as TLNoteShape
+		})
+
+		expect(shape.props.fontSizeAdjustment).toEqual(14)
+	})
 })

packages/editor/editor.css

@@ -1184,13 +1184,6 @@ input,
 	color: currentColor;
 }
 
-.tl-note-svg {
-	box-shadow:
-		0px 4px 5px -5px rgba(15, 23, 31, 0.6),
-		0px 11px 13px -10px rgba(15, 23, 31, 0.4),
-		0px 48px 10px -10px inset rgba(15, 23, 44, 0.03);
-}
-
 /* --------------------- Loading -------------------- */
 
 .tl-loading {

packages/tldraw/src/lib/shapes/note/NoteShapeUtil.tsx

@@ -35,7 +35,7 @@ import {
 } from '../shared/default-shape-constants'
 import { getFontDefForExport } from '../shared/defaultStyleDefs'
 
-import { startEditingShapeWithLabel } from '../shared/TextHelpers'
+import { startEditingShapeWithLabel } from '../../tools/SelectTool/selectHelpers'
 import { useForceSolid } from '../shared/useForceSolid'
 import {
 	ADJACENT_NOTE_MARGIN,

packages/tldraw/src/lib/shapes/note/noteHelpers.ts

@@ -1,5 +1,5 @@
 import { Editor, TLNoteShape, TLShape, Vec, compact, createShapeId } from '@tldraw/editor'
-import { zoomToShapeIfOffscreen } from '../shared/TextHelpers'
+import { zoomToShapeIfOffscreen } from '../../tools/SelectTool/selectHelpers'
 
 /** @internal */
 export const ADJACENT_NOTE_MARGIN = 20

packages/tldraw/src/lib/shapes/shared/TextHelpers.ts

@@ -4,8 +4,6 @@
  * Copyright (c) Federico Brigante <opensource@bfred.it> (bfred.it)
  */
 
-import { ANIMATION_MEDIUM_MS, Editor, TLShape } from '@tldraw/editor'
-
 // TODO: Most of this file can be moved into a DOM utils library.
 
 /** @internal */
@@ -292,42 +290,3 @@ function getCaretIndex(element: HTMLElement) {
 	}
 	return position
 }
-
-/** @internal */
-export function startEditingShapeWithLabel(editor: Editor, shape: TLShape, selectAll = false) {
-	// Finish this shape and start editing the next one
-	editor.select(shape)
-	editor.setEditingShape(shape)
-	editor.setCurrentTool('select.editing_shape', {
-		target: 'shape',
-		shape: shape,
-	})
-	if (selectAll) {
-		editor.emit('select-all-text', { shapeId: shape.id })
-	}
-	zoomToShapeIfOffscreen(editor)
-}
-
-const ZOOM_TO_SHAPE_PADDING = 16
-export function zoomToShapeIfOffscreen(editor: Editor) {
-	const selectionPageBounds = editor.getSelectionPageBounds()
-	const viewportPageBounds = editor.getViewportPageBounds()
-	if (selectionPageBounds && !viewportPageBounds.contains(selectionPageBounds)) {
-		const eb = selectionPageBounds
-			.clone()
-			// Expand the bounds by the padding
-			.expandBy(ZOOM_TO_SHAPE_PADDING / editor.getZoomLevel())
-			// then expand the bounds to include the viewport bounds
-			.expand(viewportPageBounds)
-
-		// then use the difference between the centers to calculate the offset
-		const nextBounds = viewportPageBounds.clone().translate({
-			x: (eb.center.x - viewportPageBounds.center.x) * 2,
-			y: (eb.center.y - viewportPageBounds.center.y) * 2,
-		})
-		editor.zoomToBounds(nextBounds, {
-			duration: ANIMATION_MEDIUM_MS,
-			inset: 0,
-		})
-	}
-}

packages/tldraw/src/lib/tools/SelectTool/childStates/Idle.ts

@@ -16,12 +16,11 @@ import {
 	debugFlags,
 	pointInPolygon,
 } from '@tldraw/editor'
-import { startEditingShapeWithLabel } from '../../../shapes/shared/TextHelpers'
 import { getHitShapeOnCanvasPointerDown } from '../../selection-logic/getHitShapeOnCanvasPointerDown'
 import { getShouldEnterCropMode } from '../../selection-logic/getShouldEnterCropModeOnPointerDown'
 import { selectOnCanvasPointerUp } from '../../selection-logic/selectOnCanvasPointerUp'
 import { updateHoveredId } from '../../selection-logic/updateHoveredId'
-import { kickoutOccludedShapes } from '../selectHelpers'
+import { kickoutOccludedShapes, startEditingShapeWithLabel } from '../selectHelpers'
 
 const SKIPPED_KEYS_FOR_AUTO_EDITING = [
 	'Delete',

packages/tldraw/src/lib/tools/SelectTool/childStates/PointingHandle.ts

@@ -13,7 +13,7 @@ import {
 	getNoteAdjacentPositions,
 	getNoteShapeForAdjacentPosition,
 } from '../../../shapes/note/noteHelpers'
-import { startEditingShapeWithLabel } from '../../../shapes/shared/TextHelpers'
+import { startEditingShapeWithLabel } from '../selectHelpers'
 
 export class PointingHandle extends StateNode {
 	static override id = 'pointing_handle'

packages/tldraw/src/lib/tools/SelectTool/selectHelpers.ts

@@ -1,4 +1,5 @@
 import {
+	ANIMATION_MEDIUM_MS,
 	Editor,
 	Geometry2d,
 	Mat,
@@ -113,3 +114,42 @@ export function getOccludedChildren(editor: Editor, parent: TLShape) {
 
 	return results
 }
+
+/** @internal */
+export function startEditingShapeWithLabel(editor: Editor, shape: TLShape, selectAll = false) {
+	// Finish this shape and start editing the next one
+	editor.select(shape)
+	editor.setEditingShape(shape)
+	editor.setCurrentTool('select.editing_shape', {
+		target: 'shape',
+		shape: shape,
+	})
+	if (selectAll) {
+		editor.emit('select-all-text', { shapeId: shape.id })
+	}
+	zoomToShapeIfOffscreen(editor)
+}
+
+const ZOOM_TO_SHAPE_PADDING = 16
+export function zoomToShapeIfOffscreen(editor: Editor) {
+	const selectionPageBounds = editor.getSelectionPageBounds()
+	const viewportPageBounds = editor.getViewportPageBounds()
+	if (selectionPageBounds && !viewportPageBounds.contains(selectionPageBounds)) {
+		const eb = selectionPageBounds
+			.clone()
+			// Expand the bounds by the padding
+			.expandBy(ZOOM_TO_SHAPE_PADDING / editor.getZoomLevel())
+			// then expand the bounds to include the viewport bounds
+			.expand(viewportPageBounds)
+
+		// then use the difference between the centers to calculate the offset
+		const nextBounds = viewportPageBounds.clone().translate({
+			x: (eb.center.x - viewportPageBounds.center.x) * 2,
+			y: (eb.center.y - viewportPageBounds.center.y) * 2,
+		})
+		editor.zoomToBounds(nextBounds, {
+			duration: ANIMATION_MEDIUM_MS,
+			inset: 0,
+		})
+	}
+}