From 03e4c8575c6c62535ff69eb10b77c17d3c7fc1fa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mime=20=C4=8Cuvalo?= <mimecuvalo@gmail.com>
Date: Wed, 3 Apr 2024 11:01:04 +0100
Subject: [PATCH] textfields: fix regression with Text shape and resizing
 (#3333)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The refactor of the textfields in this PR
https://github.com/tldraw/tldraw/pull/3050 caused a regression in
resizing Text shapes. (as demonstrated in this PR's video:
https://github.com/tldraw/tldraw/pull/3327)
We reverted that PR and now this PR updates the CSS to fix the gap that
was introduced when it was refactored.

### Change Type

<!-- ❗ Please select a 'Scope' label ❗️ -->

- [x] `sdk` — Changes the tldraw SDK
- [ ] `dotcom` — Changes the tldraw.com web app
- [ ] `docs` — Changes to the documentation, examples, or templates.
- [ ] `vs code` — Changes to the vscode plugin
- [ ] `internal` — Does not affect user-facing stuff

<!-- ❗ Please select a 'Type' label ❗️ -->

- [x] `bugfix` — Bug fix
- [ ] `feature` — New feature
- [ ] `improvement` — Improving existing features
- [ ] `chore` — Updating dependencies, other boring stuff
- [ ] `galaxy brain` — Architectural changes
- [ ] `tests` — Changes to any test code
- [ ] `tools` — Changes to infrastructure, CI, internal scripts,
debugging tools, etc.
- [ ] `dunno` — I don't know
---
 packages/editor/editor.css                    | 35 +++++++------------
 .../src/lib/shapes/shared/TextLabel.tsx       |  2 +-
 2 files changed, 14 insertions(+), 23 deletions(-)

diff --git a/packages/editor/editor.css b/packages/editor/editor.css
index a5ecddfd5..7ed918505 100644
--- a/packages/editor/editor.css
+++ b/packages/editor/editor.css
@@ -697,7 +697,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;
@@ -806,6 +807,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;
 }
@@ -1015,17 +1027,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;
@@ -1114,17 +1115,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;
 }
diff --git a/packages/tldraw/src/lib/shapes/shared/TextLabel.tsx b/packages/tldraw/src/lib/shapes/shared/TextLabel.tsx
index 926bd6150..62a7fd4c4 100644
--- a/packages/tldraw/src/lib/shapes/shared/TextLabel.tsx
+++ b/packages/tldraw/src/lib/shapes/shared/TextLabel.tsx
@@ -90,7 +90,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',