Merge branch 'main' into stickies-rc

packages/editor/editor.css

@@ -703,7 +703,8 @@ input,
 	padding: 0px;
 	margin: 0px;
 	border: none;
-	height: 100%;
+	width: fit-content;
+	height: fit-content;
 	font-variant: normal;
 	font-style: normal;
 	pointer-events: all;
@@ -812,6 +813,17 @@ input,
 	outline: none;
 }
 
+.tl-text-content__wrapper {
+	position: relative;
+	width: fit-content;
+	height: fit-content;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	pointer-events: none;
+	min-height: auto;
+}
+
 .tl-text-content {
 	pointer-events: none;
 }
@@ -1028,17 +1040,6 @@ input,
 	pointer-events: all;
 }
 
-.tl-text-label__inner {
-	position: relative;
-	width: fit-content;
-	height: fit-content;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	pointer-events: none;
-	min-height: auto;
-}
-
 .tl-text-label__inner > .tl-text-content {
 	position: relative;
 	top: 0px;
@@ -1127,17 +1128,7 @@ input,
 
 .tl-arrow-label textarea {
 	z-index: 3;
-	margin: 0px;
 	padding: 4px;
-	height: 100%;
-	width: 100%;
-	position: absolute;
-	resize: none;
-	border: 0px;
-	user-select: all;
-	-webkit-user-select: text;
-	caret-color: var(--color-text);
-	border-image: none;
 	/* Don't allow textarea to be zero width */
 	min-width: 4px;
 }

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

@@ -101,7 +101,7 @@ export const TextLabel = React.memo(function TextLabel({
 			}}
 		>
 			<div
-				className={`${cssPrefix}-label__inner`}
+				className={`${cssPrefix}-label__inner tl-text-content__wrapper`}
 				style={{
 					fontSize,
 					lineHeight: fontSize * lineHeight + 'px',

packages/tldraw/src/lib/shapes/text/TextShapeUtil.tsx

@@ -71,9 +71,6 @@ export class TextShapeUtil extends ShapeUtil<TLTextShape> {
 
 		const { width, height } = this.getMinDimensions(shape)
 
-		const transformOrigin =
-			align === 'start' ? 'top left' : align === 'end' ? 'top right' : 'top center'
-
 		return (
 			<HTMLContainer id={shape.id}>
 				<TextLabel
@@ -91,7 +88,7 @@ export class TextShapeUtil extends ShapeUtil<TLTextShape> {
 					textHeight={height}
 					style={{
 						transform: `scale(${scale})`,
-						transformOrigin: transformOrigin,
+						transformOrigin: 'top left',
 					}}
 					wrap
 				/>