tldraw 4.3.0-next.f13438eb7775 → 4.3.0

package/src/lib/shapes/highlight/HighlightShapeUtil.test.ts

@@ -0,0 +1,146 @@
+import { createShapeId, TLHighlightShape } from '@tldraw/editor'
+import { TestEditor } from '../../../test/TestEditor'
+import { createDrawSegments, pointsToBase64 } from '../../utils/test-helpers'
+
+let editor: TestEditor
+
+beforeEach(() => {
+	editor = new TestEditor()
+})
+
+afterEach(() => {
+	editor?.dispose()
+})
+
+describe('HighlightShapeUtil dot detection', () => {
+	const shapeId = createShapeId('test-highlight')
+
+	function createHighlightShape(segments: TLHighlightShape['props']['segments']): TLHighlightShape {
+		editor.createShapes([
+			{
+				id: shapeId,
+				type: 'highlight',
+				props: { segments },
+			},
+		])
+		return editor.getShape(shapeId) as TLHighlightShape
+	}
+
+	describe('getIsDot behavior via hideResizeHandles', () => {
+		it('treats a shape with one segment and zero points as a dot', () => {
+			const shape = createHighlightShape([{ type: 'free', path: '' }])
+			const util = editor.getShapeUtil('highlight')
+			expect(util.hideResizeHandles(shape)).toBe(true)
+		})
+
+		it('treats a shape with one segment and one point as a dot', () => {
+			const shape = createHighlightShape(createDrawSegments([[{ x: 0, y: 0, z: 0.5 }]]))
+			const util = editor.getShapeUtil('highlight')
+			expect(util.hideResizeHandles(shape)).toBe(true)
+		})
+
+		it('treats a shape with one segment and two points as NOT a dot', () => {
+			const shape = createHighlightShape(
+				createDrawSegments([
+					[
+						{ x: 0, y: 0, z: 0.5 },
+						{ x: 10, y: 10, z: 0.5 },
+					],
+				])
+			)
+			const util = editor.getShapeUtil('highlight')
+			expect(util.hideResizeHandles(shape)).toBe(false)
+		})
+
+		it('treats a shape with one segment and many points as NOT a dot', () => {
+			const shape = createHighlightShape(
+				createDrawSegments([
+					[
+						{ x: 0, y: 0, z: 0.5 },
+						{ x: 10, y: 10, z: 0.5 },
+						{ x: 20, y: 5, z: 0.5 },
+						{ x: 30, y: 15, z: 0.5 },
+					],
+				])
+			)
+			const util = editor.getShapeUtil('highlight')
+			expect(util.hideResizeHandles(shape)).toBe(false)
+		})
+
+		it('treats a shape with multiple segments as NOT a dot', () => {
+			const shape = createHighlightShape(
+				createDrawSegments([[{ x: 0, y: 0, z: 0.5 }], [{ x: 10, y: 10, z: 0.5 }]])
+			)
+			const util = editor.getShapeUtil('highlight')
+			expect(util.hideResizeHandles(shape)).toBe(false)
+		})
+	})
+
+	describe('hideRotateHandle mirrors hideResizeHandles for dots', () => {
+		it('hides rotate handle for dots', () => {
+			const shape = createHighlightShape(createDrawSegments([[{ x: 0, y: 0, z: 0.5 }]]))
+			const util = editor.getShapeUtil('highlight')
+			expect(util.hideRotateHandle(shape)).toBe(true)
+		})
+
+		it('shows rotate handle for non-dots', () => {
+			const shape = createHighlightShape(
+				createDrawSegments([
+					[
+						{ x: 0, y: 0, z: 0.5 },
+						{ x: 10, y: 10, z: 0.5 },
+					],
+				])
+			)
+			const util = editor.getShapeUtil('highlight')
+			expect(util.hideRotateHandle(shape)).toBe(false)
+		})
+	})
+
+	describe('hideSelectionBoundsFg mirrors hideResizeHandles for dots', () => {
+		it('hides selection bounds for dots', () => {
+			const shape = createHighlightShape(createDrawSegments([[{ x: 0, y: 0, z: 0.5 }]]))
+			const util = editor.getShapeUtil('highlight')
+			expect(util.hideSelectionBoundsFg(shape)).toBe(true)
+		})
+
+		it('shows selection bounds for non-dots', () => {
+			const shape = createHighlightShape(
+				createDrawSegments([
+					[
+						{ x: 0, y: 0, z: 0.5 },
+						{ x: 10, y: 10, z: 0.5 },
+					],
+				])
+			)
+			const util = editor.getShapeUtil('highlight')
+			expect(util.hideSelectionBoundsFg(shape)).toBe(false)
+		})
+	})
+
+	describe('base64 encoding boundary conditions', () => {
+		it('correctly handles the boundary at exactly 24 base64 characters (2 points)', () => {
+			// First point is 16 base64 chars (Float32), delta points are 8 chars each (Float16)
+			// 2 points = 24 characters, which should NOT be a dot
+			const twoPointsBase64 = pointsToBase64([
+				{ x: 0, y: 0, z: 0.5 },
+				{ x: 1, y: 1, z: 0.5 },
+			])
+			expect(twoPointsBase64.length).toBe(24)
+
+			const shape = createHighlightShape([{ type: 'free', path: twoPointsBase64 }])
+			const util = editor.getShapeUtil('highlight')
+			expect(util.hideResizeHandles(shape)).toBe(false)
+		})
+
+		it('correctly handles the boundary at exactly 16 base64 characters (1 point)', () => {
+			// 1 point = 16 characters (Float32 first point), which should be a dot
+			const onePointBase64 = pointsToBase64([{ x: 0, y: 0, z: 0.5 }])
+			expect(onePointBase64.length).toBe(16)
+
+			const shape = createHighlightShape([{ type: 'free', path: onePointBase64 }])
+			const util = editor.getShapeUtil('highlight')
+			expect(util.hideResizeHandles(shape)).toBe(true)
+		})
+	})
+})

package/src/lib/shapes/highlight/HighlightShapeUtil.tsx

@@ -5,7 +5,6 @@ import {
 	Polygon2d,
 	SVGContainer,
 	ShapeUtil,
-	TLDrawShapeSegment,
 	TLHighlightShape,
 	TLHighlightShapeProps,
 	TLResizeInfo,
@@ -19,7 +18,7 @@ import {
 	useValue,
 } from '@tldraw/editor'
 
-import { getHighlightFreehandSettings, getPointsFromSegments } from '../draw/getPath'
+import { getHighlightFreehandSettings, getPointsFromDrawSegments } from '../draw/getPath'
 import { FONT_SIZES } from '../shared/default-shape-constants'
 import { getStrokeOutlinePoints } from '../shared/freehand/getStrokeOutlinePoints'
 import { getStrokePoints } from '../shared/freehand/getStrokePoints'
@@ -70,6 +69,8 @@ export class HighlightShapeUtil extends ShapeUtil<TLHighlightShape> {
 			isComplete: false,
 			isPen: false,
 			scale: 1,
+			scaleX: 1,
+			scaleY: 1,
 		}
 	}
 
@@ -130,7 +131,11 @@ export class HighlightShapeUtil extends ShapeUtil<TLHighlightShape> {
 		const strokeWidth = getStrokeWidth(shape)
 
 		const { strokePoints, sw } = getHighlightStrokePoints(shape, strokeWidth, forceSolid)
-		const allPointsFromSegments = getPointsFromSegments(shape.props.segments)
+		const allPointsFromSegments = getPointsFromDrawSegments(
+			shape.props.segments,
+			shape.props.scaleX,
+			shape.props.scaleY
+		)
 
 		let strokePath
 		if (strokePoints.length < 2) {
@@ -177,24 +182,10 @@ export class HighlightShapeUtil extends ShapeUtil<TLHighlightShape> {
 	override onResize(shape: TLHighlightShape, info: TLResizeInfo<TLHighlightShape>) {
 		const { scaleX, scaleY } = info
 
-		const newSegments: TLDrawShapeSegment[] = []
-
-		for (const segment of shape.props.segments) {
-			newSegments.push({
-				...segment,
-				points: segment.points.map(({ x, y, z }) => {
-					return {
-						x: scaleX * x,
-						y: scaleY * y,
-						z,
-					}
-				}),
-			})
-		}
-
 		return {
 			props: {
-				segments: newSegments,
+				scaleX: scaleX * shape.props.scaleX,
+				scaleY: scaleY * shape.props.scaleY,
 			},
 		}
 	}
@@ -231,7 +222,11 @@ function getHighlightStrokePoints(
 	strokeWidth: number,
 	forceSolid: boolean
 ) {
-	const allPointsFromSegments = getPointsFromSegments(shape.props.segments)
+	const allPointsFromSegments = getPointsFromDrawSegments(
+		shape.props.segments,
+		shape.props.scaleX,
+		shape.props.scaleY
+	)
 	const showAsComplete = shape.props.isComplete || last(shape.props.segments)?.type === 'straight'
 
 	let sw = strokeWidth
@@ -254,7 +249,11 @@ function getStrokeWidth(shape: TLHighlightShape) {
 }
 
 function getIsDot(shape: TLHighlightShape) {
-	return shape.props.segments.length === 1 && shape.props.segments[0].points.length < 2
+	// First point is 16 base64 chars (3 Float32s = 12 bytes)
+	// Each delta point is 8 base64 chars (3 Float16s = 6 bytes)
+	// 1 point = 16 chars, 2 points = 24 chars
+	// Check if we have less than 2 points without decoding
+	return shape.props.segments.length === 1 && shape.props.segments[0].path.length < 24
 }
 
 function HighlightRenderer({
@@ -270,7 +269,11 @@ function HighlightRenderer({
 }) {
 	const theme = useDefaultColorTheme()
 
-	const allPointsFromSegments = getPointsFromSegments(shape.props.segments)
+	const allPointsFromSegments = getPointsFromDrawSegments(
+		shape.props.segments,
+		shape.props.scaleX,
+		shape.props.scaleY
+	)
 
 	let sw = strokeWidth
 	if (!forceSolid && !shape.props.isPen && allPointsFromSegments.length === 1) {
@@ -287,7 +290,7 @@ function HighlightRenderer({
 	const solidStrokePath =
 		strokePoints.length > 1
 			? getSvgPathFromStrokePoints(strokePoints, false)
-			: getShapeDot(shape.props.segments[0].points[0])
+			: getShapeDot(allPointsFromSegments[0])
 
 	const colorSpace = useColorSpace()
 
@@ -315,7 +318,7 @@ function useHighlightForceSolid(editor: Editor, shape: TLHighlightShape) {
 		'forceSolid',
 		() => {
 			const sw = getStrokeWidth(shape)
-			const zoomLevel = editor.getZoomLevel()
+			const zoomLevel = editor.getEfficientZoomLevel()
 			if (sw / zoomLevel < 1.5) {
 				return true
 			}

package/src/lib/shapes/line/LineShapeTool.test.ts

@@ -1,4 +1,4 @@
-import { TLLineShape, assert } from '@tldraw/editor'
+import { assert } from '@tldraw/editor'
 import { TestEditor } from '../../../test/TestEditor'
 
 let editor: TestEditor
@@ -127,7 +127,7 @@ describe('When extending the line with the shift-key in tool-lock mode', () => {
 			.pointerUp(20, 10)
 
 		const line = editor.getCurrentPageShapes()[editor.getCurrentPageShapes().length - 1]
-		assert(editor.isShapeOfType<TLLineShape>(line, 'line'))
+		assert(editor.isShapeOfType(line, 'line'))
 		expect(Object.keys(line.props.points).length).toBe(3)
 	})
 
@@ -143,7 +143,7 @@ describe('When extending the line with the shift-key in tool-lock mode', () => {
 			.pointerUp(30, 10)
 
 		const line = editor.getCurrentPageShapes()[editor.getCurrentPageShapes().length - 1]
-		assert(editor.isShapeOfType<TLLineShape>(line, 'line'))
+		assert(editor.isShapeOfType(line, 'line'))
 		expect(Object.keys(line.props.points).length).toBe(2)
 	})
 
@@ -160,7 +160,7 @@ describe('When extending the line with the shift-key in tool-lock mode', () => {
 			.pointerUp(30, 10)
 
 		const line = editor.getCurrentPageShapes()[editor.getCurrentPageShapes().length - 1]
-		assert(editor.isShapeOfType<TLLineShape>(line, 'line'))
+		assert(editor.isShapeOfType(line, 'line'))
 		expect(Object.keys(line.props.points).length).toBe(3)
 	})
 
@@ -179,7 +179,7 @@ describe('When extending the line with the shift-key in tool-lock mode', () => {
 			.pointerUp(30, 10)
 
 		const line = editor.getCurrentPageShapes()[editor.getCurrentPageShapes().length - 1]
-		assert(editor.isShapeOfType<TLLineShape>(line, 'line'))
+		assert(editor.isShapeOfType(line, 'line'))
 		expect(Object.keys(line.props.points).length).toBe(3)
 	})
 
@@ -200,7 +200,7 @@ describe('When extending the line with the shift-key in tool-lock mode', () => {
 			.pointerUp(40, 10)
 
 		const line = editor.getCurrentPageShapes()[editor.getCurrentPageShapes().length - 1]
-		assert(editor.isShapeOfType<TLLineShape>(line, 'line'))
+		assert(editor.isShapeOfType(line, 'line'))
 		expect(Object.keys(line.props.points).length).toBe(3)
 	})
 })

package/src/lib/shapes/line/LineShapeUtil.test.tsx

@@ -24,7 +24,7 @@ beforeEach(() => {
 	editor
 		.selectAll()
 		.deleteShapes(editor.getSelectedShapeIds())
-		.createShapes<TLLineShape>([
+		.createShapes([
 			{
 				id: id,
 				type: 'line',
@@ -168,10 +168,10 @@ describe('Snapping', () => {
 			type: 'line',
 			props: {
 				points: {
-					a1: { id: 'a1', index: 'a1', x: 0, y: 0 },
-					a2: { id: 'a2', index: 'a2', x: 100, y: 0 },
-					a3: { id: 'a3', index: 'a3', x: 100, y: 100 },
-					a4: { id: 'a4', index: 'a4', x: 0, y: 100 },
+					a1: { id: 'a1', index: 'a1' as IndexKey, x: 0, y: 0 },
+					a2: { id: 'a2', index: 'a2' as IndexKey, x: 100, y: 0 },
+					a3: { id: 'a3', index: 'a3' as IndexKey, x: 100, y: 100 },
+					a4: { id: 'a4', index: 'a4' as IndexKey, x: 0, y: 100 },
 				},
 			},
 		})

package/src/lib/shapes/line/toolStates/Pointing.ts

@@ -23,14 +23,14 @@ export class Pointing extends StateNode {
 
 	override onEnter(info: { shapeId?: TLShapeId }) {
 		const { inputs } = this.editor
-		const { currentPagePoint } = inputs
+		const currentPagePoint = inputs.getCurrentPagePoint()
 
 		this.markId = undefined
 
 		// Previously created line shape that we might be extending
 		const shape = info.shapeId && this.editor.getShape<TLLineShape>(info.shapeId)
 
-		if (shape && inputs.shiftKey) {
+		if (shape && inputs.getShiftKey()) {
 			// Extending a previous shape
 			this.markId = this.editor.markHistoryStoppingPoint(`creating_line:${shape.id}`)
 			this.shape = shape
@@ -89,7 +89,7 @@ export class Pointing extends StateNode {
 
 			const newPoint = maybeSnapToGrid(currentPagePoint, this.editor)
 
-			this.editor.createShapes<TLLineShape>([
+			this.editor.createShapes([
 				{
 					id,
 					type: 'line',
@@ -114,7 +114,7 @@ export class Pointing extends StateNode {
 	override onPointerMove() {
 		if (!this.shape) return
 
-		if (this.editor.inputs.isDragging) {
+		if (this.editor.inputs.getIsDragging()) {
 			const handles = this.editor.getShapeHandles(this.shape)
 			if (!handles) {
 				if (this.markId) this.editor.bailToMark(this.markId)

package/src/lib/shapes/note/NoteShapeTool.test.ts

@@ -1,3 +1,4 @@
+import { TLNoteShape } from '@tldraw/editor'
 import { TestEditor } from '../../../test/TestEditor'
 import { NoteShapeTool } from './NoteShapeTool'
 
@@ -242,7 +243,7 @@ describe('Adjacent note position helpers (sticky pits)', () => {
 
 	it('Falls into correct pit below notes with growY', () => {
 		editor.createShape({ type: 'note', x: 0, y: 0 }).updateShape({
-			...editor.getLastCreatedShape(),
+			...editor.getLastCreatedShape<TLNoteShape>(),
 			props: { growY: 100 },
 		})
 

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

@@ -32,7 +32,7 @@ import {
 	useValue,
 } from '@tldraw/editor'
 import { useCallback, useContext } from 'react'
-import { startEditingShapeWithLabel } from '../../tools/SelectTool/selectHelpers'
+import { startEditingShapeWithRichText } from '../../tools/SelectTool/selectHelpers'
 import { TranslationsContext } from '../../ui/hooks/useTranslation/useTranslation'
 import {
 	isEmptyRichText,
@@ -50,6 +50,7 @@ import {
 } from '../shared/default-shape-constants'
 import { useDefaultColorTheme } from '../shared/useDefaultColorTheme'
 import { useIsReadyForEditing } from '../shared/useEditablePlainText'
+import { useEfficientZoomThreshold } from '../shared/useEfficientZoomThreshold'
 import {
 	CLONE_HANDLE_MARGIN,
 	NOTE_CENTER_OFFSET,
@@ -158,7 +159,7 @@ export class NoteShapeUtil extends ShapeUtil<TLNoteShape> {
 		const isCoarsePointer = this.editor.getInstanceState().isCoarsePointer
 		if (isCoarsePointer) return []
 
-		const zoom = this.editor.getZoomLevel()
+		const zoom = this.editor.getEfficientZoomLevel()
 		if (zoom * scale < 0.25) return []
 
 		const nh = getNoteHeight(shape)
@@ -268,15 +269,12 @@ export class NoteShapeUtil extends ShapeUtil<TLNoteShape> {
 			[this.editor]
 		)
 
-		// todo: consider hiding shadows on dark mode if they're invisible anyway
-
-		const hideShadows = useValue('zoom', () => this.editor.getZoomLevel() < 0.35 / scale, [
-			scale,
-			this.editor,
-		])
-
 		const isDarkMode = useValue('dark mode', () => this.editor.user.getIsDarkMode(), [this.editor])
 
+		// Shadows are hidden when zoomed out far enough or in dark mode
+		let hideShadows = useEfficientZoomThreshold(scale * 0.25)
+		if (isDarkMode) hideShadows = true
+
 		const isSelected = shape.id === this.editor.getOnlySelectedShapeId()
 
 		const isReadyForEditing = useIsReadyForEditing(this.editor, shape.id)
@@ -318,6 +316,7 @@ export class NoteShapeUtil extends ShapeUtil<TLNoteShape> {
 							wrap
 							padding={LABEL_PADDING * scale}
 							hasCustomTabBehavior
+							showTextOutline={false}
 							onKeyDown={handleKeyDown}
 						/>
 					)}
@@ -537,7 +536,7 @@ function useNoteKeydownHandler(id: TLShapeId) {
 				const newNote = getNoteShapeForAdjacentPosition(editor, shape, adjacentCenter, pageRotation)
 
 				if (newNote) {
-					startEditingShapeWithLabel(editor, newNote, true /* selectAll */)
+					startEditingShapeWithRichText(editor, newNote, { selectAll: true })
 				}
 			}
 		},

package/src/lib/shapes/note/noteCloning.test.ts

@@ -30,7 +30,7 @@ function testCloneHandles(x: number, y: number, rotation: number) {
 		const handleInPageSpace = editor.getShapePageTransform(shape).applyToPoint(handle)
 		editor.select(shape.id)
 		editor.pointerMove(handleInPageSpace.x, handleInPageSpace.y)
-		expect(editor.inputs.currentPagePoint).toMatchObject({
+		expect(editor.inputs.getCurrentPagePoint()).toMatchObject({
 			x: handleInPageSpace.x,
 			y: handleInPageSpace.y,
 		})
@@ -99,6 +99,7 @@ function testDragCloneHandles(x: number, y: number, rotation: number) {
 		editor.expectToBeIn('select.pointing_handle')
 
 		editor.pointerMove(handleInPageSpace.x + 30, handleInPageSpace.y + 30)
+		editor.forceTick()
 
 		editor.expectToBeIn('select.translating')
 
@@ -205,6 +206,7 @@ it('Creates an adjacent note when dragging the clone handle', () => {
 	editor.expectToBeIn('select.pointing_handle')
 
 	editor.pointerMove(handle.x + 30, handle.y + 30)
+	editor.forceTick()
 
 	const newShape = editor.getLastCreatedShape()
 

package/src/lib/shapes/note/noteHelpers.ts

@@ -104,7 +104,7 @@ export function getAvailableNoteAdjacentPositions(
 	// Get all the positions that are adjacent to the selected note shapes
 	for (const shape of editor.getCurrentPageShapes()) {
 		if (
-			!editor.isShapeOfType<TLNoteShape>(shape, 'note') ||
+			!editor.isShapeOfType(shape, 'note') ||
 			scale !== shape.props.scale ||
 			selectedShapeIds.has(shape.id)
 		) {
@@ -204,7 +204,7 @@ export function getNoteShapeForAdjacentPosition(
 
 		// We create it at the center first, so that it becomes
 		// the child of whatever parent was at that center
-		editor.createShape<TLNoteShape>({
+		editor.createShape({
 			id,
 			type: 'note',
 			x: center.x,

package/src/lib/shapes/note/toolStates/Pointing.ts

@@ -9,6 +9,7 @@ import {
 	maybeSnapToGrid,
 } from '@tldraw/editor'
 
+import { startEditingShapeWithRichText } from '../../../tools/SelectTool/selectHelpers'
 import {
 	NOTE_ADJACENT_POSITION_SNAP_RADIUS,
 	getAvailableNoteAdjacentPositions,
@@ -32,7 +33,7 @@ export class Pointing extends StateNode {
 		this.markId = editor.markHistoryStoppingPoint(`creating_note:${id}`)
 
 		// Check for note pits; if the pointer is close to one, place the note centered on the pit
-		const center = this.editor.inputs.originPagePoint.clone()
+		const center = this.editor.inputs.getOriginPagePoint().clone()
 		const offset = getNoteShapeAdjacentPositionOffset(
 			this.editor,
 			center,
@@ -52,7 +53,7 @@ export class Pointing extends StateNode {
 	}
 
 	override onPointerMove(info: TLPointerEventInfo) {
-		if (this.editor.inputs.isDragging) {
+		if (this.editor.inputs.getIsDragging()) {
 			this.editor.setCurrentTool('select.translating', {
 				...info,
 				target: 'shape',
@@ -61,8 +62,7 @@ export class Pointing extends StateNode {
 				isCreating: true,
 				creatingMarkId: this.markId,
 				onCreate: () => {
-					this.editor.setEditingShape(this.shape.id)
-					this.editor.setCurrentTool('select.editing_shape')
+					startEditingShapeWithRichText(this.editor, this.shape.id)
 				},
 			})
 		}
@@ -88,12 +88,7 @@ export class Pointing extends StateNode {
 		if (this.editor.getInstanceState().isToolLocked) {
 			this.parent.transition('idle')
 		} else {
-			this.editor.setEditingShape(this.shape.id)
-			this.editor.setCurrentTool('select.editing_shape', {
-				...this.info,
-				target: 'shape',
-				shape: this.shape,
-			})
+			startEditingShapeWithRichText(this.editor, this.shape.id, { info: this.info })
 		}
 	}
 

package/src/lib/shapes/shared/HyperlinkButton.tsx

@@ -1,16 +1,17 @@
-import { useEditor, useValue } from '@tldraw/editor'
+import { useEditor } from '@tldraw/editor'
 import classNames from 'classnames'
 import { PointerEventHandler, useCallback } from 'react'
+import { useEfficientZoomThreshold } from './useEfficientZoomThreshold'
 
 const LINK_ICON =
 	"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' fill='none'%3E%3Cpath stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M13 5H7a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6M19 5h6m0 0v6m0-6L13 17'/%3E%3C/svg%3E"
 
 export function HyperlinkButton({ url }: { url: string }) {
 	const editor = useEditor()
-	const hideButton = useValue('zoomLevel', () => editor.getZoomLevel() < 0.32, [editor])
+	const hideButton = useEfficientZoomThreshold()
 	const markAsHandledOnShiftKey = useCallback<PointerEventHandler>(
 		(e) => {
-			if (!editor.inputs.shiftKey) editor.markEventAsHandled(e)
+			if (!editor.inputs.getShiftKey()) editor.markEventAsHandled(e)
 		},
 		[editor]
 	)

package/src/lib/shapes/shared/PlainTextLabel.tsx

@@ -1,11 +1,13 @@
 import {
 	Box,
+	ExtractShapeByProps,
 	TLDefaultFillStyle,
 	TLDefaultFontStyle,
 	TLDefaultHorizontalAlignStyle,
 	TLDefaultVerticalAlignStyle,
 	TLShapeId,
 } from '@tldraw/editor'
+import classNames from 'classnames'
 import React from 'react'
 import { PlainTextArea } from '../text/PlainTextArea'
 import { TextHelpers } from './TextHelpers'
@@ -15,7 +17,7 @@ import { useEditablePlainText } from './useEditablePlainText'
 /** @public */
 export interface PlainTextLabelProps {
 	shapeId: TLShapeId
-	type: string
+	type: ExtractShapeByProps<{ text: string }>['type']
 	font: TLDefaultFontStyle
 	fontSize: number
 	lineHeight: number
@@ -33,6 +35,7 @@ export interface PlainTextLabelProps {
 	textWidth?: number
 	textHeight?: number
 	padding?: number
+	showTextOutline?: boolean
 }
 
 /**
@@ -60,6 +63,7 @@ export const PlainTextLabel = React.memo(function PlainTextLabel({
 	style,
 	textWidth,
 	textHeight,
+	showTextOutline = true,
 }: PlainTextLabelProps) {
 	const { rInput, isEmpty, isEditing, isReadyForEditing, ...editableTextRest } =
 		useEditablePlainText(shapeId, type, plaintext)
@@ -108,7 +112,13 @@ export const PlainTextLabel = React.memo(function PlainTextLabel({
 					height: textHeight ? Math.ceil(textHeight) : undefined,
 				}}
 			>
-				<div className={`${cssPrefix} tl-text tl-text-content`} dir="auto">
+				<div
+					className={classNames(
+						`${cssPrefix} tl-text tl-text-content`,
+						showTextOutline ? 'tl-text__outline' : 'tl-text__no-outline'
+					)}
+					dir="auto"
+				>
 					{finalPlainText.split('\n').map((lineOfText, index) => (
 						<div key={index} dir="auto">
 							{lineOfText}