tldraw 4.3.0-canary.9c474ef3fad5 → 4.3.0-canary.a2419250444e

package/src/lib/ui/components/SharePanel/PeopleMenu.tsx

@@ -3,8 +3,10 @@ import { Popover as _Popover } from 'radix-ui'
 import { ReactNode } from 'react'
 import { PORTRAIT_BREAKPOINT } from '../../constants'
 import { useBreakpoint } from '../../context/breakpoints'
+import { useCollaborationStatus } from '../../hooks/useCollaborationStatus'
 import { useMenuIsOpen } from '../../hooks/useMenuIsOpen'
 import { useTranslation } from '../../hooks/useTranslation/useTranslation'
+import { OfflineIndicator } from '../OfflineIndicator/OfflineIndicator'
 import { PeopleMenuAvatar } from './PeopleMenuAvatar'
 import { PeopleMenuItem } from './PeopleMenuItem'
 import { PeopleMenuMore } from './PeopleMenuMore'
@@ -30,6 +32,12 @@ export function PeopleMenu({ children }: PeopleMenuProps) {
 	const breakpoint = useBreakpoint()
 	const maxAvatars = breakpoint <= PORTRAIT_BREAKPOINT.MOBILE_XS ? 1 : 5
 
+	const collaborationStatus = useCollaborationStatus()
+
+	if (collaborationStatus === 'offline') {
+		return <OfflineIndicator />
+	}
+
 	if (!userIds.length) return null
 
 	return (

package/src/lib/ui/components/Toolbar/DefaultImageToolbar.tsx

@@ -63,7 +63,7 @@ function ContextualToolbarInner({
 	)
 	const camera = useValue('camera', () => editor.getCamera(), [editor])
 	const isInCropTool = useValue('editor path', () => editor.isIn('select.crop.'), [editor])
-	const previousSelectionBounds = useRef<Box | undefined>()
+	const previousSelectionBounds = useRef<Box | undefined>(undefined)
 	const handleManipulatingEnd = useCallback(() => {
 		editor.setCroppingShape(null)
 		editor.setCurrentTool('select.idle')

package/src/lib/ui/components/Toolbar/DefaultRichTextToolbar.tsx

@@ -38,7 +38,7 @@ function ContextualToolbarInner({
 }) {
 	const { isEditingLink, onEditLinkStart, onEditLinkClose } = useEditingLinkBehavior(textEditor)
 	const [currentSelection, setCurrentSelection] = useState<Range | null>(null)
-	const previousSelectionBounds = useRef<Box | undefined>()
+	const previousSelectionBounds = useRef<Box | undefined>(undefined)
 	const isMousingDown = useIsMousingDownOnTextEditor(textEditor)
 	const msg = useTranslation()
 

package/src/lib/ui/components/TopPanel/CenteredTopPanelContainer.tsx

@@ -3,7 +3,7 @@ import { useBreakpoint } from '../../context/breakpoints'
 
 /** @public */
 export interface CenteredTopPanelContainerProps {
-	children: ReactNode
+	children?: ReactNode
 	maxWidth?: number
 	ignoreRightWidth?: number
 	stylePanelWidth?: number

package/src/lib/ui/components/ZoomMenu/DefaultZoomMenu.tsx

@@ -48,7 +48,7 @@ export const DefaultZoomMenu = memo(function DefaultZoomMenu({ children }: TLUiZ
 const ZoomTriggerButton = () => {
 	const editor = useEditor()
 	const breakpoint = useBreakpoint()
-	const zoom = useValue('zoom', () => editor.getEfficientZoomLevel(), [editor])
+	const zoom = useValue('zoom', () => editor.getZoomLevel(), [editor])
 	const msg = useTranslation()
 
 	const handleDoubleClick = useCallback(() => {

package/src/lib/ui/components/primitives/TldrawUiContextualToolbar.tsx

@@ -52,8 +52,8 @@ export const TldrawUiContextualToolbar = ({
 	const editor = useEditor()
 	const toolbarRef = useRef<HTMLDivElement>(null)
 
-	usePassThroughWheelEvents(toolbarRef as RefObject<HTMLDivElement>)
-	usePassThroughMouseOverEvents(toolbarRef as RefObject<HTMLDivElement>)
+	usePassThroughWheelEvents(toolbarRef as RefObject<HTMLDivElement | null>)
+	usePassThroughMouseOverEvents(toolbarRef as RefObject<HTMLDivElement | null>)
 
 	const { isVisible, isInteractive, hide, show, position, move } =
 		useToolbarVisibilityStateMachine(changeOnlyWhenYChanges)
@@ -105,7 +105,9 @@ export const TldrawUiContextualToolbar = ({
 					// to have the last updated position in page space, so that we could convert
 					// it to screen space and update it here
 					const elm = toolbarRef.current
-					elm.style.setProperty('transform', `translate(${position.x}px, ${position.y}px)`)
+					if (elm) {
+						elm.style.setProperty('transform', `translate(${position.x}px, ${position.y}px)`)
+					}
 				} else {
 					const moveImmediately = lastContentSizeUpdateCounter !== nextContentSizeUpdateCounter
 					// Schedule a move to its next location

package/src/lib/ui/components/primitives/TldrawUiTooltip.tsx

@@ -410,8 +410,15 @@ export const TldrawUiTooltip = forwardRef<HTMLButtonElement, TldrawUiTooltipProp
 		const child = React.Children.only(children)
 		assert(React.isValidElement(child), 'TldrawUiTooltip children must be a single element')
 
+		const childElement = child as React.ReactElement<{
+			onMouseEnter?(event: React.MouseEvent<HTMLElement>): void
+			onMouseLeave?(event: React.MouseEvent<HTMLElement>): void
+			onFocus?(event: React.FocusEvent<HTMLElement>): void
+			onBlur?(event: React.FocusEvent<HTMLElement>): void
+		}>
+
 		const handleMouseEnter = (event: React.MouseEvent<HTMLElement>) => {
-			child.props.onMouseEnter?.(event)
+			childElement.props.onMouseEnter?.(event)
 			tooltipManager.handleEvent({
 				type: 'show',
 				tooltip: {
@@ -427,7 +434,7 @@ export const TldrawUiTooltip = forwardRef<HTMLButtonElement, TldrawUiTooltipProp
 		}
 
 		const handleMouseLeave = (event: React.MouseEvent<HTMLElement>) => {
-			child.props.onMouseLeave?.(event)
+			childElement.props.onMouseLeave?.(event)
 			tooltipManager.handleEvent({
 				type: 'hide',
 				tooltipId: tooltipId.current,
@@ -437,7 +444,7 @@ export const TldrawUiTooltip = forwardRef<HTMLButtonElement, TldrawUiTooltipProp
 		}
 
 		const handleFocus = (event: React.FocusEvent<HTMLElement>) => {
-			child.props.onFocus?.(event)
+			childElement.props.onFocus?.(event)
 			tooltipManager.handleEvent({
 				type: 'show',
 				tooltip: {
@@ -453,7 +460,7 @@ export const TldrawUiTooltip = forwardRef<HTMLButtonElement, TldrawUiTooltipProp
 		}
 
 		const handleBlur = (event: React.FocusEvent<HTMLElement>) => {
-			child.props.onBlur?.(event)
+			childElement.props.onBlur?.(event)
 			tooltipManager.handleEvent({
 				type: 'hide',
 				tooltipId: tooltipId.current,
@@ -462,7 +469,7 @@ export const TldrawUiTooltip = forwardRef<HTMLButtonElement, TldrawUiTooltipProp
 			})
 		}
 
-		const childrenWithHandlers = React.cloneElement(children as React.ReactElement, {
+		const childrenWithHandlers = React.cloneElement(childElement, {
 			onMouseEnter: handleMouseEnter,
 			onMouseLeave: handleMouseLeave,
 			onFocus: handleFocus,

package/src/lib/ui/components/primitives/menus/TldrawUiMenuActionCheckboxItem.tsx

@@ -17,5 +17,5 @@ export function TldrawUiMenuActionCheckboxItem({
 	const actions = useActions()
 	const action = actions[actionId]
 	if (!action) return null
-	return <TldrawUiMenuCheckboxItem {...action} {...rest} />
+	return <TldrawUiMenuCheckboxItem {...(action as TLUiMenuCheckboxItemProps)} {...rest} />
 }

package/src/lib/ui/components/primitives/menus/TldrawUiMenuActionItem.tsx

@@ -11,5 +11,5 @@ export function TldrawUiMenuActionItem({ actionId = '', ...rest }: TLUiMenuActio
 	const actions = useActions()
 	const action = actions[actionId]
 	if (!action) return null
-	return <TldrawUiMenuItem {...action} {...rest} />
+	return <TldrawUiMenuItem {...(action as TLUiMenuItemProps)} {...rest} />
 }

package/src/lib/ui/components/primitives/menus/TldrawUiMenuItem.tsx

@@ -134,7 +134,6 @@ export function TldrawUiMenuItem<
 						{iconLeft && <TldrawUiButtonIcon icon={iconLeft} small />}
 						<TldrawUiButtonLabel>{labelStr}</TldrawUiButtonLabel>
 						{kbd && <TldrawUiKbd>{kbd}</TldrawUiKbd>}
-						{icon && <TldrawUiButtonIcon icon={icon} small />}
 					</TldrawUiButton>
 				</TldrawUiDropdownMenuItem>
 			)
@@ -200,7 +199,11 @@ export function TldrawUiMenuItem<
 		}
 		case 'helper-buttons': {
 			return (
-				<TldrawUiButton type="low" onClick={() => onSelect(sourceId)}>
+				<TldrawUiButton
+					type="low"
+					data-testid={`${sourceId}.${id}`}
+					onClick={() => onSelect(sourceId)}
+				>
 					<TldrawUiButtonIcon icon={icon!} />
 					<TldrawUiButtonLabel>{labelStr}</TldrawUiButtonLabel>
 				</TldrawUiButton>

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

@@ -375,7 +375,7 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
 					if (editor.root.getCurrent()?.id === 'zoom') return
 
 					trackEvent('zoom-tool', { source })
-					if (!(editor.inputs.shiftKey || editor.inputs.ctrlKey)) {
+					if (!(editor.inputs.getShiftKey() || editor.inputs.getCtrlKey())) {
 						const currentTool = editor.root.getCurrent()
 						if (currentTool && currentTool.getCurrent()?.id === 'idle') {
 							editor.setCurrentTool('zoom', { onInteractionEnd: currentTool.id, maskAs: 'zoom' })
@@ -973,7 +973,7 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
 							helpers.paste(
 								clipboardItems,
 								source,
-								source === 'context-menu' ? editor.inputs.currentPagePoint : undefined
+								source === 'context-menu' ? editor.inputs.getCurrentPagePoint() : undefined
 							)
 						})
 						.catch(() => {
@@ -1037,7 +1037,7 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
 					if (!canApplySelectionAction()) return
 					if (mustGoBackToSelectToolFirst()) return
 
-					const isFine = editor.inputs.altKey
+					const isFine = editor.inputs.getAltKey()
 					trackEvent('rotate-cw', { source, fine: isFine })
 					editor.markHistoryStoppingPoint('rotate-cw')
 					editor.run(() => {
@@ -1060,7 +1060,7 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
 					if (!canApplySelectionAction()) return
 					if (mustGoBackToSelectToolFirst()) return
 
-					const isFine = editor.inputs.altKey
+					const isFine = editor.inputs.getAltKey()
 					trackEvent('rotate-ccw', { source, fine: isFine })
 					editor.markHistoryStoppingPoint('rotate-ccw')
 					editor.run(() => {
@@ -1092,7 +1092,7 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
 				readonlyOk: true,
 				onSelect(source) {
 					trackEvent('zoom-in', { source, towardsCursor: true })
-					editor.zoomIn(editor.inputs.currentScreenPoint, {
+					editor.zoomIn(editor.inputs.getCurrentScreenPoint(), {
 						animation: { duration: editor.options.animationMediumMs },
 					})
 				},
@@ -1116,7 +1116,7 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
 				readonlyOk: true,
 				onSelect(source) {
 					trackEvent('zoom-out', { source, towardsCursor: true })
-					editor.zoomOut(editor.inputs.currentScreenPoint, {
+					editor.zoomOut(editor.inputs.getCurrentScreenPoint(), {
 						animation: { duration: editor.options.animationMediumMs },
 					})
 				},

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

@@ -42,7 +42,6 @@ import {
 } from '../components/Toolbar/DefaultRichTextToolbar'
 import { DefaultToolbar } from '../components/Toolbar/DefaultToolbar'
 import { DefaultVideoToolbar } from '../components/Toolbar/DefaultVideoToolbar'
-import { DefaultTopPanel } from '../components/TopPanel/DefaultTopPanel'
 import { DefaultZoomMenu, TLUiZoomMenuProps } from '../components/ZoomMenu/DefaultZoomMenu'
 import { useShowCollaborationUi } from '../hooks/useCollaborationStatus'
 
@@ -117,7 +116,7 @@ export function TldrawUiComponentsProvider({
 					MenuPanel: DefaultMenuPanel,
 					SharePanel: showCollaborationUi ? DefaultSharePanel : null,
 					CursorChatBubble: showCollaborationUi ? CursorChatBubble : null,
-					TopPanel: showCollaborationUi ? DefaultTopPanel : null,
+					TopPanel: null,
 					Dialogs: DefaultDialogs,
 					Toasts: DefaultToasts,
 					A11y: DefaultA11yAnnouncer,

package/src/lib/ui/hooks/useClipboardEvents.ts

@@ -783,9 +783,9 @@ export function useNativeClipboardEvents() {
 			// |    Y 		|         N            |       Y 				 |
 			// |    N 		|         Y            |       Y 				 |
 			// |    Y 		|         Y            |       N 				 |
-			if (editor.inputs.shiftKey) pasteAtCursor = true
+			if (editor.inputs.getShiftKey()) pasteAtCursor = true
 			if (editor.user.getIsPasteAtCursorMode()) pasteAtCursor = !pasteAtCursor
-			if (pasteAtCursor) point = editor.inputs.currentPagePoint
+			if (pasteAtCursor) point = editor.inputs.getCurrentPagePoint()
 
 			const pasteFromEvent = () => {
 				if (e.clipboardData) {

package/src/lib/ui/hooks/useKeyboardShortcuts.ts

@@ -93,7 +93,7 @@ export function useKeyboardShortcuts() {
 
 			editor.inputs.keys.add('Comma')
 
-			const { x, y, z } = editor.inputs.currentPagePoint
+			const { x, y, z } = editor.inputs.getCurrentPagePoint()
 			const screenpoints = editor.pageToScreen({ x, y })
 
 			const info: TLPointerEventInfo = {
@@ -120,7 +120,7 @@ export function useKeyboardShortcuts() {
 
 			editor.inputs.keys.delete('Comma')
 
-			const { x, y, z } = editor.inputs.currentScreenPoint
+			const { x, y, z } = editor.inputs.getCurrentScreenPoint()
 			const info: TLPointerEventInfo = {
 				type: 'pointer',
 				name: 'pointer_up',

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

@@ -10,6 +10,7 @@ import {
 	useMaybeEditor,
 } from '@tldraw/editor'
 import * as React from 'react'
+import { startEditingShapeWithRichText } from '../../tools/SelectTool/selectHelpers'
 import { EmbedDialog } from '../components/EmbedDialog'
 import { TLUiIconJsx } from '../components/primitives/TldrawUiIcon'
 import { useA11y } from '../context/a11y'
@@ -239,8 +240,7 @@ export function ToolsProvider({ overrides, children }: TLUiToolsProviderProps) {
 						createShape: (id) =>
 							editor.createShape({ id, type: 'text', props: { richText: toRichText('Text') } }),
 						onDragEnd: (id) => {
-							editor.setEditingShape(id)
-							editor.emit('select-all-text', { shapeId: id })
+							startEditingShapeWithRichText(editor, id, { selectAll: true })
 						},
 					})
 					trackEvent('drag-tool', { source, id: 'text' })
@@ -269,8 +269,7 @@ export function ToolsProvider({ overrides, children }: TLUiToolsProviderProps) {
 					onDragFromToolbarToCreateShape(editor, info, {
 						createShape: (id) => editor.createShape({ id, type: 'note' }),
 						onDragEnd: (id) => {
-							editor.setEditingShape(id)
-							editor.emit('select-all-text', { shapeId: id })
+							startEditingShapeWithRichText(editor, id, { selectAll: true })
 						},
 					})
 					trackEvent('drag-tool', { source, id: 'note' })
@@ -360,7 +359,7 @@ export function onDragFromToolbarToCreateShape(
 	info: TLPointerEventInfo,
 	opts: OnDragFromToolbarToCreateShapesOpts
 ) {
-	const { x, y } = editor.inputs.currentPagePoint
+	const { x, y } = editor.inputs.getCurrentPagePoint()
 
 	const stoppingPoint = editor.markHistoryStoppingPoint('drag shape tool')
 	editor.setCurrentTool('select.translating')

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.3.0-canary.9c474ef3fad5'
+export const version = '4.3.0-canary.a2419250444e'
 export const publishDates = {
 	major: '2025-09-18T14:39:22.803Z',
-	minor: '2025-12-07T21:52:48.186Z',
-	patch: '2025-12-07T21:52:48.186Z',
+	minor: '2026-01-07T11:52:01.977Z',
+	patch: '2026-01-07T11:52:01.977Z',
 }

package/src/lib/ui.css

@@ -609,25 +609,31 @@
 
 /* Submenu triggers */
 
-.tlui-menu__submenu__trigger[data-state='open']::after {
-	opacity: 1;
-	background: linear-gradient(90deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);
+.tlui-menu__submenu__trigger {
+	--gradient-angle: 90deg;
 }
 
-.tlui-menu__submenu__trigger[data-direction='left'][data-state='open']::after {
+.tlui-menu__submenu__trigger[data-direction='left'] {
+	--gradient-angle: 270deg;
+}
+
+.tlui-menu__submenu__trigger[data-state='open']::after {
 	opacity: 1;
-	background: linear-gradient(270deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);
+	background: linear-gradient(
+		var(--gradient-angle),
+		rgba(144, 144, 144, 0) 0%,
+		var(--tl-color-muted-2) 100%
+	);
 }
 
 @media (hover: hover) {
-	.tlui-menu__submenu__trigger[data-state='open']:not(:hover)::after {
+	.tlui-menu__submenu__trigger:is(:hover, [data-state='open'])::after {
 		opacity: 1;
-		background: linear-gradient(90deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);
-	}
-
-	.tlui-menu__submenu__trigger[data-direction='left'][data-state='open']:not(:hover)::after {
-		opacity: 1;
-		background: linear-gradient(270deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);
+		background: linear-gradient(
+			var(--gradient-angle),
+			rgba(144, 144, 144, 0) 0%,
+			var(--tl-color-muted-2) 100%
+		);
 	}
 }
 
@@ -906,10 +912,8 @@
 	}
 }
 
-@media (any-pointer: coarse) {
-	.tlui-page_menu__item__submenu > .tlui-button {
-		opacity: 1;
-	}
+.tl-container[data-coarse='true'] .tlui-page_menu__item__submenu > .tlui-button {
+	opacity: 1;
 }
 
 .tlui-button__icon {
@@ -948,16 +952,15 @@
 
 .tlui-offline-indicator {
 	display: flex;
-	flex-direction: row;
-	gap: var(--tl-space-3);
-	color: var(--tl-color-text);
-	background-color: var(--tl-color-low);
-	border: 3px solid var(--tl-color-background);
-	padding: 0px var(--tl-space-5);
-	height: 42px;
+	color: var(--tl-color-background);
+	background-color: var(--tl-color-text);
+	border: none;
+	width: 32px;
+	height: 32px;
 	align-items: center;
 	justify-content: center;
 	border-radius: 99px;
+	cursor: default;
 	opacity: 0;
 	animation: tl-fade-in;
 	animation-duration: 0.12s;
@@ -1275,6 +1278,7 @@ tldraw? probably.
 	position: relative;
 	background: var(--tl-color-panel);
 	box-shadow: var(--tl-shadow-2);
+	contain: layout style paint;
 }
 
 .tlui-main-toolbar--horizontal .tlui-main-toolbar__mobile-style-panel {

package/src/lib/utils/excalidraw/__snapshots__/putExcalidrawContent.test.tsx.snap

@@ -730,20 +730,11 @@ exports[`putExcalidrawContent test fixtures > line-drawing.json 1`] = `
       "isComplete": false,
       "isPen": false,
       "scale": 1,
+      "scaleX": 1,
+      "scaleY": 1,
       "segments": [
         {
-          "points": [
-            {
-              "x": 0,
-              "y": 0,
-              "z": 0.5,
-            },
-            {
-              "x": 0.0001,
-              "y": 0.0001,
-              "z": 0.5,
-            },
-          ],
+          "points": "AAAAAAA4jgaOBgA4",
           "type": "free",
         },
       ],
@@ -770,20 +761,11 @@ exports[`putExcalidrawContent test fixtures > line-drawing.json 1`] = `
       "isComplete": false,
       "isPen": false,
       "scale": 1,
+      "scaleX": 1,
+      "scaleY": 1,
       "segments": [
         {
-          "points": [
-            {
-              "x": 0,
-              "y": 0,
-              "z": 0.5,
-            },
-            {
-              "x": 0.0001,
-              "y": 0.0001,
-              "z": 0.5,
-            },
-          ],
+          "points": "AAAAAAA4jgaOBgA4",
           "type": "free",
         },
       ],
@@ -1393,20 +1375,11 @@ exports[`putExcalidrawContent test fixtures > line-drawing.json 1`] = `
       "isComplete": false,
       "isPen": false,
       "scale": 1,
+      "scaleX": 1,
+      "scaleY": 1,
       "segments": [
         {
-          "points": [
-            {
-              "x": 0,
-              "y": 0,
-              "z": 0.5,
-            },
-            {
-              "x": 0.0001,
-              "y": 0.0001,
-              "z": 0.5,
-            },
-          ],
+          "points": "AAAAAAA4jgaOBgA4",
           "type": "free",
         },
       ],
@@ -1433,20 +1406,11 @@ exports[`putExcalidrawContent test fixtures > line-drawing.json 1`] = `
       "isComplete": false,
       "isPen": false,
       "scale": 1,
+      "scaleX": 1,
+      "scaleY": 1,
       "segments": [
         {
-          "points": [
-            {
-              "x": 0,
-              "y": 0,
-              "z": 0.5,
-            },
-            {
-              "x": 0.0001,
-              "y": 0.0001,
-              "z": 0.5,
-            },
-          ],
+          "points": "AAAAAAA4jgaOBgA4",
           "type": "free",
         },
       ],

package/src/lib/utils/excalidraw/putExcalidrawContent.ts

@@ -16,7 +16,9 @@ import {
 	TLShapeId,
 	Vec,
 	VecLike,
+	VecModel,
 	ZERO_INDEX_KEY,
+	b64Vecs,
 	compact,
 	createBindingId,
 	createShapeId,
@@ -149,6 +151,13 @@ export async function putExcalidrawContent(
 				break
 			}
 			case 'freedraw': {
+				const points: VecModel[] = element.points.map(([x, y, z = 0.5]: number[]) => ({
+					x,
+					y,
+					z,
+				}))
+				const base64Points = b64Vecs.encodePoints(points)
+
 				tldrawContent.shapes.push({
 					...base,
 					type: 'draw',
@@ -160,11 +169,7 @@ export async function putExcalidrawContent(
 						segments: [
 							{
 								type: 'free',
-								points: element.points.map(([x, y, z = 0.5]: number[]) => ({
-									x,
-									y,
-									z,
-								})),
+								points: base64Points,
 							},
 						],
 					},
@@ -329,7 +334,7 @@ export async function putExcalidrawContent(
 		index = getIndexAbove(index)
 	}
 
-	const p = point ?? (editor.inputs.shiftKey ? editor.inputs.currentPagePoint : undefined)
+	const p = point ?? (editor.inputs.getShiftKey() ? editor.inputs.getCurrentPagePoint() : undefined)
 
 	editor.putContentOntoCurrentPage(tldrawContent, {
 		point: p,

package/src/lib/utils/test-helpers.ts

@@ -0,0 +1,60 @@
+import type { TLDrawShapeSegment, VecModel } from '@tldraw/editor'
+import { b64Vecs, compressLegacySegments } from '@tldraw/editor'
+
+/**
+ * Helper function to convert draw shape points from VecModel[] to base64 string.
+ * This is useful for tests that create draw shapes with the legacy array format.
+ *
+ * @example
+ * ```ts
+ * const segments = [{ type: 'free', points: pointsToBase64([{x: 0, y: 0, z: 0.5}]) }]
+ * ```
+ *
+ * @public
+ */
+export function pointsToBase64(points: VecModel[]): string {
+	return b64Vecs.encodePoints(points)
+}
+
+/**
+ * Helper function to convert base64 string back to VecModel[] points.
+ * This is useful for tests that need to inspect draw shape points.
+ *
+ * @example
+ * ```ts
+ * const points = base64ToPoints(shape.props.segments[0].points)
+ * expect(points[0].x).toBe(0)
+ * ```
+ *
+ * @public
+ */
+export function base64ToPoints(base64: string): VecModel[] {
+	return b64Vecs.decodePoints(base64)
+}
+
+/**
+ * Helper function to create draw shape segments from legacy array format.
+ * This allows tests to use the old format while the shape uses the new base64 format.
+ *
+ * @example
+ * ```ts
+ * editor.createShapes([{
+ *   type: 'draw',
+ *   props: {
+ *     segments: createDrawSegments([[{x: 0, y: 0}, {x: 10, y: 10}]])
+ *   }
+ * }])
+ * ```
+ * @public
+ */
+export function createDrawSegments(
+	pointArrays: VecModel[][],
+	type: 'free' | 'straight' = 'free'
+): TLDrawShapeSegment[] {
+	return compressLegacySegments(
+		pointArrays.map((points) => ({
+			type,
+			points,
+		}))
+	)
+}

package/src/lib/utils/text/richText.ts

@@ -1,6 +1,7 @@
 import {
 	Extension,
 	Extensions,
+	extensions,
 	generateHTML,
 	generateJSON,
 	generateText,
@@ -19,7 +20,6 @@ import {
 	WeakCache,
 } from '@tldraw/editor'
 import { DefaultFontFaces } from '../../shapes/shared/defaultFonts'
-import { TextDirection } from './textDirection'
 
 /** @public */
 export const KeyboardShiftEnterTweakExtension = Extension.create({
@@ -59,7 +59,11 @@ export const tipTapDefaultExtensions: Extensions = [
 	}),
 	Highlight,
 	KeyboardShiftEnterTweakExtension,
-	TextDirection,
+
+	// N.B. We disable the text direction core extension in RichTextArea,
+	// but we add it back in again here in our own extensions list so that
+	// people can omit/override it if they want to.
+	extensions.TextDirection.configure({ direction: 'auto' }),
 ]
 
 // todo: bust this if the editor changes, too
@@ -88,7 +92,6 @@ export function renderHtmlFromRichText(editor: Editor, richText: TLRichText) {
  * @param editor - The editor instance.
  * @param richText - The rich text content.
  *
- *
  * @public
  */
 export function renderHtmlFromRichTextForMeasurement(editor: Editor, richText: TLRichText) {
@@ -111,7 +114,6 @@ export function isEmptyRichText(richText: TLRichText) {
  * @param editor - The editor instance.
  * @param richText - The rich text content.
  *
- *
  * @public
  */
 export function renderPlaintextFromRichText(editor: Editor, richText: TLRichText) {
@@ -131,7 +133,6 @@ export function renderPlaintextFromRichText(editor: Editor, richText: TLRichText
  * @param editor - The editor instance.
  * @param richText - The rich text content.
  *
- *
  * @public
  */
 export function renderRichTextFromHTML(editor: Editor, html: string): TLRichText {