Stickies: restore tab in text shape (#3422)

This PR restores the tab key for the text shape.

apps/examples/src/examples/speech-bubble/SpeechBubble/SpeechBubbleUtil.tsx

@@ -203,6 +203,7 @@ export class SpeechBubbleUtil extends ShapeUtil<SpeechBubbleShape> {
 					text={text}
 					labelColor={theme[color].solid}
 					isSelected={isSelected}
+					disableTab
 					wrap
 				/>
 			</>

packages/tldraw/api-report.md

@@ -2509,7 +2509,9 @@ export function useDefaultHelpers(): {
 export function useDialogs(): TLUiDialogsContextType;
 
 // @public (undocumented)
-export function useEditableText(id: TLShapeId, type: string, text: string): {
+export function useEditableText(id: TLShapeId, type: string, text: string, opts?: {
+    disableTab: boolean;
+}): {
     rInput: React_2.RefObject<HTMLTextAreaElement>;
     isEditing: boolean;
     handleFocus: typeof noop;

packages/tldraw/api/api.json

@@ -27526,6 +27526,14 @@
               "kind": "Content",
               "text": "string"
             },
+            {
+              "kind": "Content",
+              "text": ", opts?: "
+            },
+            {
+              "kind": "Content",
+              "text": "{\n    disableTab: boolean;\n}"
+            },
             {
               "kind": "Content",
               "text": "): "
@@ -27613,8 +27621,8 @@
           ],
           "fileUrlPath": "packages/tldraw/src/lib/shapes/shared/useEditableText.ts",
           "returnTypeTokenRange": {
-            "startIndex": 7,
-            "endIndex": 24
+            "startIndex": 9,
+            "endIndex": 26
           },
           "releaseTag": "Public",
           "overloadIndex": 1,
@@ -27642,6 +27650,14 @@
                 "endIndex": 6
               },
               "isOptional": false
+            },
+            {
+              "parameterName": "opts",
+              "parameterTypeTokenRange": {
+                "startIndex": 7,
+                "endIndex": 8
+              },
+              "isOptional": true
             }
           ],
           "name": "useEditableText"

packages/tldraw/src/lib/shapes/arrow/components/ArrowTextLabel.tsx

@@ -35,6 +35,7 @@ export const ArrowTextLabel = React.memo(function ArrowTextLabel({
 			labelColor={theme[labelColor].solid}
 			textWidth={width}
 			isSelected={isSelected}
+			disableTab
 			style={{
 				transform: `translate(${position.x}px, ${position.y}px)`,
 			}}

packages/tldraw/src/lib/shapes/geo/GeoShapeUtil.tsx

@@ -420,6 +420,7 @@ export class GeoShapeUtil extends BaseBoxShapeUtil<TLGeoShape> {
 							text={text}
 							isSelected={isSelected}
 							labelColor={theme[props.labelColor].solid}
+							disableTab
 							wrap
 						/>
 					</HTMLContainer>

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

@@ -201,6 +201,7 @@ export class NoteShapeUtil extends ShapeUtil<TLNoteShape> {
 						isNote
 						isSelected={isSelected}
 						labelColor={theme[color].note.text}
+						disableTab
 						wrap
 						onKeyDown={handleKeyDown}
 					/>

packages/tldraw/src/lib/shapes/shared/TextLabel.tsx

@@ -27,6 +27,7 @@ type TextLabelProps = {
 	bounds?: Box
 	isNote?: boolean
 	isSelected: boolean
+	disableTab?: boolean
 	onKeyDown?: (e: React.KeyboardEvent<HTMLTextAreaElement>) => void
 	classNamePrefix?: string
 	style?: React.CSSProperties
@@ -50,13 +51,15 @@ export const TextLabel = React.memo(function TextLabel({
 	onKeyDown: handleKeyDownCustom,
 	classNamePrefix,
 	style,
+	disableTab = false,
 	textWidth,
 	textHeight,
 }: TextLabelProps) {
 	const { rInput, isEmpty, isEditing, isEditingAnything, ...editableTextRest } = useEditableText(
 		id,
 		type,
-		text
+		text,
+		{ disableTab }
 	)
 
 	const [initialText, setInitialText] = useState(text)

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

@@ -4,6 +4,7 @@ import {
 	TLShapeId,
 	TLUnknownShape,
 	getPointerInfo,
+	preventDefault,
 	setPointerCapture,
 	stopEventPropagation,
 	useEditor,
@@ -13,7 +14,12 @@ import React, { useCallback, useEffect, useRef } from 'react'
 import { INDENT, TextHelpers } from './TextHelpers'
 
 /** @public */
-export function useEditableText(id: TLShapeId, type: string, text: string) {
+export function useEditableText(
+	id: TLShapeId,
+	type: string,
+	text: string,
+	opts = { disableTab: false } as { disableTab: boolean }
+) {
 	const editor = useEditor()
 
 	const rInput = useRef<HTMLTextAreaElement>(null)
@@ -99,6 +105,17 @@ export function useEditableText(id: TLShapeId, type: string, text: string) {
 					}
 					break
 				}
+				case 'Tab': {
+					if (opts.disableTab) {
+						preventDefault(e)
+						if (e.shiftKey) {
+							TextHelpers.unindent(e.currentTarget)
+						} else {
+							TextHelpers.indent(e.currentTarget)
+						}
+					}
+					break
+				}
 			}
 		},
 		[editor, isEditing]