tldraw 4.3.0-canary.fd6b7f2a8adc → 4.3.0-canary.fda2775019a1

package/src/lib/tools/SelectTool/selectHelpers.ts

@@ -1,15 +1,50 @@
-import { Editor, TLShape } from '@tldraw/editor'
+import {
+	Editor,
+	ExtractShapeByProps,
+	richTextValidator,
+	TLEventInfo,
+	TLRichText,
+	TLShape,
+	TLShapeId,
+} from '@tldraw/editor'
 
 /** @internal */
-export function startEditingShapeWithLabel(editor: Editor, shape: TLShape, selectAll = false) {
+export function hasRichText(
+	shape: TLShape
+): shape is ExtractShapeByProps<{ richText: TLRichText }> {
+	return 'richText' in shape.props && richTextValidator.isValid(shape.props.richText)
+}
+/**
+ * Start editing a shape that has rich text, such as text, note, geo, or arrow shapes.
+ * This will enter the editing state for the shape and optionally select all the text.
+ *
+ * @param editor - The editor instance.
+ * @param shapeOrId - The shape to start editing. This shape must have a richText property with a TLRichText value.
+ * @param options - Options: selectAll or info (TLEventInfo)
+ *
+ * @public
+ */
+export function startEditingShapeWithRichText(
+	editor: Editor,
+	shapeOrId: TLShape | TLShapeId,
+	options: { selectAll?: boolean; info?: TLEventInfo } = {}
+) {
+	const shape = typeof shapeOrId === 'string' ? editor.getShape(shapeOrId) : shapeOrId
+	if (!shape) return
+
+	if (!editor.canEditShape(shape)) return
+
+	if (!hasRichText(shape)) {
+		throw new Error('Shape does not have rich text')
+	}
 	// Finish this shape and start editing the next one
-	editor.select(shape)
 	editor.setEditingShape(shape)
 	editor.setCurrentTool('select.editing_shape', {
+		...options.info,
 		target: 'shape',
 		shape: shape,
 	})
-	if (selectAll) {
+	if (options.selectAll) {
 		editor.emit('select-all-text', { shapeId: shape.id })
 	}
 }

package/src/lib/tools/ZoomTool/ZoomTool.ts

@@ -57,7 +57,7 @@ export class ZoomTool extends StateNode {
 	}
 
 	private updateCursor() {
-		if (this.editor.inputs.altKey) {
+		if (this.editor.inputs.getAltKey()) {
 			this.editor.setCursor({ type: 'zoom-out', rotation: 0 })
 		} else {
 			this.editor.setCursor({ type: 'zoom-in', rotation: 0 })

package/src/lib/tools/ZoomTool/childStates/Pointing.ts

@@ -14,7 +14,7 @@ export class Pointing extends StateNode {
 	}
 
 	override onPointerMove() {
-		if (this.editor.inputs.isDragging) {
+		if (this.editor.inputs.getIsDragging()) {
 			this.parent.transition('zoom_brushing', this.info)
 		}
 	}
@@ -24,8 +24,8 @@ export class Pointing extends StateNode {
 	}
 
 	private complete() {
-		const { currentScreenPoint } = this.editor.inputs
-		if (this.editor.inputs.altKey) {
+		const currentScreenPoint = this.editor.inputs.getCurrentScreenPoint()
+		if (this.editor.inputs.getAltKey()) {
 			this.editor.zoomOut(currentScreenPoint, { animation: { duration: 220 } })
 		} else {
 			this.editor.zoomIn(currentScreenPoint, { animation: { duration: 220 } })

package/src/lib/tools/ZoomTool/childStates/ZoomBrushing.ts

@@ -29,9 +29,8 @@ export class ZoomBrushing extends StateNode {
 	}
 
 	private update() {
-		const {
-			inputs: { originPagePoint, currentPagePoint },
-		} = this.editor
+		const originPagePoint = this.editor.inputs.getOriginPagePoint()
+		const currentPagePoint = this.editor.inputs.getCurrentPagePoint()
 
 		this.zoomBrush.setTo(Box.FromPoints([originPagePoint, currentPagePoint]))
 		this.editor.updateInstanceState({ zoomBrush: this.zoomBrush.toJson() })
@@ -46,14 +45,14 @@ export class ZoomBrushing extends StateNode {
 		const threshold = 8 / this.editor.getZoomLevel()
 		// If the selected area is small then treat it as a click
 		if (zoomBrush.width < threshold && zoomBrush.height < threshold) {
-			const point = this.editor.inputs.currentScreenPoint
-			if (this.editor.inputs.altKey) {
+			const point = this.editor.inputs.getCurrentScreenPoint()
+			if (this.editor.inputs.getAltKey()) {
 				this.editor.zoomOut(point, { animation: { duration: 220 } })
 			} else {
 				this.editor.zoomIn(point, { animation: { duration: 220 } })
 			}
 		} else {
-			const targetZoom = this.editor.inputs.altKey ? this.editor.getZoomLevel() / 2 : undefined
+			const targetZoom = this.editor.inputs.getAltKey() ? this.editor.getZoomLevel() / 2 : undefined
 			this.editor.zoomToBounds(zoomBrush, { targetZoom, animation: { duration: 220 } })
 		}
 

package/src/lib/tools/selection-logic/getHitShapeOnCanvasPointerDown.ts

@@ -6,9 +6,7 @@ export function getHitShapeOnCanvasPointerDown(
 	hitLabels = false
 ): TLShape | undefined {
 	const zoomLevel = editor.getZoomLevel()
-	const {
-		inputs: { currentPagePoint },
-	} = editor
+	const currentPagePoint = editor.inputs.getCurrentPagePoint()
 
 	return (
 		// hovered shape at point

package/src/lib/tools/selection-logic/selectOnCanvasPointerUp.ts

@@ -5,7 +5,7 @@ export function selectOnCanvasPointerUp(
 	info: TLPointerEventInfo | TLClickEventInfo
 ) {
 	const selectedShapeIds = editor.getSelectedShapeIds()
-	const { currentPagePoint } = editor.inputs
+	const currentPagePoint = editor.inputs.getCurrentPagePoint()
 	const { shiftKey, altKey, accelKey } = info
 	const additiveSelectionKey = shiftKey || accelKey
 

package/src/lib/tools/selection-logic/updateHoveredShapeId.ts

@@ -2,7 +2,7 @@ import { Editor, TLShape, throttle } from '@tldraw/editor'
 
 function _updateHoveredShapeId(editor: Editor) {
 	// todo: consider replacing `get hoveredShapeId` with this; it would mean keeping hoveredShapeId in memory rather than in the store and possibly re-computing it more often than necessary
-	const hitShape = editor.getShapeAtPoint(editor.inputs.currentPagePoint, {
+	const hitShape = editor.getShapeAtPoint(editor.inputs.getCurrentPagePoint(), {
 		hitInside: false,
 		hitLabels: false,
 		margin: editor.options.hitTestMargin / editor.getZoomLevel(),

package/src/lib/ui/TldrawUi.tsx

@@ -81,6 +81,11 @@ const TldrawUiInner = React.memo(function TldrawUiInner({
 	// If we ever need want the UI to mount and preserve state, then
 	// we should change this behavior and hide the UI via CSS instead.
 
+	// Keyboard shortcuts and clipboard events should always be mounted,
+	// even when the UI is hidden.
+	useKeyboardShortcuts()
+	useNativeClipboardEvents()
+
 	return (
 		<>
 			{children}
@@ -112,8 +117,6 @@ const TldrawUiContent = React.memo(function TldrawUI() {
 		A11y,
 	} = useTldrawUiComponents()
 
-	useKeyboardShortcuts()
-	useNativeClipboardEvents()
 	useEditorEvents()
 
 	const rIsEditingAnything = useRef(false)

package/src/lib/ui/components/ActionsMenu/DefaultActionsMenuContent.tsx

@@ -1,4 +1,3 @@
-import { useEditor, useValue } from '@tldraw/editor'
 import { PORTRAIT_BREAKPOINT } from '../../constants'
 import { useBreakpoint } from '../../context/breakpoints'
 import {
@@ -9,6 +8,7 @@ import {
 	useThreeStackableItems,
 	useUnlockedSelectedShapesCount,
 } from '../../hooks/menu-hooks'
+import { ZoomTo100MenuItem } from '../menu-items'
 import { TldrawUiMenuActionItem } from '../primitives/menus/TldrawUiMenuActionItem'
 
 /** @public @react */
@@ -99,14 +99,6 @@ export function ZoomOrRotateMenuItem() {
 }
 /** @public @react */
 
-export function ZoomTo100MenuItem() {
-	const editor = useEditor()
-	const isZoomedTo100 = useValue('zoom is 1', () => editor.getZoomLevel() === 1, [editor])
-
-	return <TldrawUiMenuActionItem actionId="zoom-to-100" disabled={isZoomedTo100} />
-}
-/** @public @react */
-
 export function RotateCCWMenuItem() {
 	const oneSelected = useUnlockedSelectedShapesCount(1)
 	const isInSelectState = useIsInSelectState()

package/src/lib/ui/components/ContextMenu/DefaultContextMenu.tsx

@@ -66,9 +66,7 @@ export const DefaultContextMenu = memo(function DefaultContextMenu({
 				// Weird route: selecting locked shapes on long press
 				if (editor.getInstanceState().isCoarsePointer) {
 					const selectedShapes = editor.getSelectedShapes()
-					const {
-						inputs: { currentPagePoint },
-					} = editor
+					const currentPagePoint = editor.inputs.getCurrentPagePoint()
 
 					// get all of the shapes under the current pointer
 					const shapesAtPoint = editor.getShapesAtPoint(currentPagePoint)

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

@@ -46,14 +46,14 @@ export const CursorChatBubble = track(function CursorChatBubble() {
 	return chatMessage.trim() ? <NotEditingChatMessage chatMessage={chatMessage} /> : null
 })
 
-function usePositionBubble(ref: RefObject<HTMLInputElement>) {
+function usePositionBubble(ref: RefObject<HTMLInputElement | null>) {
 	const editor = useEditor()
 
 	useLayoutEffect(() => {
 		const elm = ref.current
 		if (!elm) return
 
-		const { x, y } = editor.inputs.currentScreenPoint
+		const { x, y } = editor.inputs.getCurrentScreenPoint()
 		ref.current?.style.setProperty('transform', `translate(${x}px, ${y}px)`)
 
 		// Positioning the chat bubble

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

@@ -1,12 +1,5 @@
-import {
-	debugFlags,
-	track,
-	useEditor,
-	usePassThroughWheelEvents,
-	useValue,
-	Vec,
-} from '@tldraw/editor'
-import { memo, useEffect, useRef, useState } from 'react'
+import { debugFlags, track, useEditor, usePassThroughWheelEvents, useValue } from '@tldraw/editor'
+import { memo, useEffect, useRef } from 'react'
 import { useTldrawUiComponents } from '../context/components'
 
 /** @internal */
@@ -25,42 +18,10 @@ export const DefaultDebugPanel = memo(function DefaultDebugPanel() {
 	)
 })
 
-function useTick(isEnabled = true) {
-	const [_, setTick] = useState(0)
-	const editor = useEditor()
-	useEffect(() => {
-		if (!isEnabled) return
-		const update = () => setTick((tick) => tick + 1)
-		editor.on('tick', update)
-		return () => {
-			editor.off('tick', update)
-		}
-	}, [editor, isEnabled])
-}
-
 const CurrentState = track(function CurrentState() {
-	useTick()
-
 	const editor = useEditor()
-
 	const path = editor.getPath()
-	const hoverShape = editor.getHoveredShape()
-	const selectedShape = editor.getOnlySelectedShape()
-	const shape = path === 'select.idle' || !path.includes('select.') ? hoverShape : selectedShape
-	const shapeInfo =
-		shape && path.includes('select.')
-			? ` / ${shape.type || ''}${
-					'geo' in shape.props ? ' / ' + shape.props.geo : ''
-				} / [${Vec.ToInt(editor.getPointInShapeSpace(shape, editor.inputs.currentPagePoint))}]`
-			: ''
-	const ruler =
-		path.startsWith('select.') && !path.includes('.idle')
-			? ` / [${Vec.ToInt(editor.inputs.originPagePoint)}] → [${Vec.ToInt(
-					editor.inputs.currentPagePoint
-				)}] = ${Vec.Dist(editor.inputs.originPagePoint, editor.inputs.currentPagePoint).toFixed(0)}`
-			: ''
-
-	return <div className="tlui-debug-panel__current-state">{`${path}${shapeInfo}${ruler}`}</div>
+	return <div className="tlui-debug-panel__current-state">{`${path}`}</div>
 })
 
 function FPS() {

package/src/lib/ui/components/HelperButtons/BackToContent.tsx

@@ -18,7 +18,7 @@ export function BackToContent() {
 			const shapeIds = editor.getCurrentPageShapeIds()
 			let showBackToContentNow = false
 			if (shapeIds.size) {
-				showBackToContentNow = shapeIds.size === editor.getCulledShapes().size
+				showBackToContentNow = shapeIds.size === editor.getNotVisibleShapes().size
 			}
 
 			if (showBackToContentPrev !== showBackToContentNow) {

package/src/lib/ui/components/HelperButtons/StopFollowing.tsx

@@ -1,6 +1,6 @@
 import { useEditor, useValue } from '@tldraw/editor'
 import { useActions } from '../../context/actions'
-import { TldrawUiMenuItem } from '../primitives/menus/TldrawUiMenuItem'
+import { TldrawUiMenuItem, type TLUiMenuItemProps } from '../primitives/menus/TldrawUiMenuItem'
 
 export function StopFollowing() {
 	const editor = useEditor()
@@ -13,5 +13,5 @@ export function StopFollowing() {
 	)
 	if (!followingUser) return null
 
-	return <TldrawUiMenuItem {...actions['stop-following']} />
+	return <TldrawUiMenuItem {...(actions['stop-following'] as TLUiMenuItemProps)} />
 }

package/src/lib/ui/components/Minimap/DefaultMinimap.tsx

@@ -24,7 +24,7 @@ export function DefaultMinimap() {
 	const rCanvas = React.useRef<HTMLCanvasElement>(null!)
 	const rPointing = React.useRef(false)
 
-	const minimapRef = React.useRef<MinimapManager>()
+	const minimapRef = React.useRef<MinimapManager | undefined>(undefined)
 
 	React.useEffect(() => {
 		try {

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

@@ -1,15 +1,16 @@
-import classNames from 'classnames'
 import { useTranslation } from '../../hooks/useTranslation/useTranslation'
 import { TldrawUiIcon } from '../primitives/TldrawUiIcon'
+import { TldrawUiTooltip } from '../primitives/TldrawUiTooltip'
 
 /** @public @react */
 export function OfflineIndicator() {
 	const msg = useTranslation()
 
 	return (
-		<div className={classNames('tlui-offline-indicator')}>
-			{msg('status.offline')}
-			<TldrawUiIcon label={msg('status.offline')} icon="status-offline" small />
-		</div>
+		<TldrawUiTooltip content={msg('status.offline')}>
+			<div className="tlui-offline-indicator">
+				<TldrawUiIcon icon="status-offline" label={msg('status.offline')} small />
+			</div>
+		</TldrawUiTooltip>
 	)
 }

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

@@ -48,7 +48,9 @@ export const PageItemInput = function PageItemInput({
 	return (
 		<TldrawUiInput
 			className="tlui-page-menu__item__input"
-			ref={(el) => (rInput.current = el)}
+			ref={(el) => {
+				rInput.current = el
+			}}
 			defaultValue={name}
 			onValueChange={handleChange}
 			onComplete={onComplete}

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/menu-items.tsx

@@ -182,7 +182,9 @@ export function UnlockAllMenuItem() {
 /** @public @react */
 export function ZoomTo100MenuItem() {
 	const editor = useEditor()
-	const isZoomedTo100 = useValue('zoomed to 100', () => editor.getZoomLevel() === 1, [editor])
+	const isZoomedTo100 = useValue('zoomed to 100', () => editor.getEfficientZoomLevel() === 1, [
+		editor,
+	])
 
 	return <TldrawUiMenuActionItem actionId="zoom-to-100" noClose disabled={isZoomedTo100} />
 }

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/TldrawUiSlider.tsx

@@ -3,7 +3,7 @@ import { Slider as _Slider } from 'radix-ui'
 import React, { useCallback, useEffect, useState } from 'react'
 import { TLUiTranslationKey } from '../../hooks/useTranslation/TLUiTranslationKey'
 import { useTranslation } from '../../hooks/useTranslation/useTranslation'
-import { TldrawUiTooltip, tooltipManager } from './TldrawUiTooltip'
+import { hideAllTooltips, TldrawUiTooltip } from './TldrawUiTooltip'
 
 /** @public */
 export interface TLUiSliderProps {
@@ -52,7 +52,7 @@ export const TldrawUiSlider = React.forwardRef<HTMLDivElement, TLUiSliderProps>(
 	)
 
 	const handlePointerDown = useCallback(() => {
-		tooltipManager.hideAllTooltips()
+		hideAllTooltips()
 		onHistoryMark?.('click slider')
 	}, [onHistoryMark])