From efbded7a06ba7f52dd159c1e7d71d337bcdaa689 Mon Sep 17 00:00:00 2001
From: Tom Hicks <tomhicks@users.noreply.github.com>
Date: Fri, 22 Oct 2021 00:41:32 +0200
Subject: [PATCH] Fix stickes: line wrap mismatch between display/edit (#189)

The 'fake' textarea used to edit text in a sticky had a different
overflow-wrap style than the component that renders the text.

By forcing the display and edit components to use the same wrapping
strategy, the caret from the textarea and the rendered text should
remain in sync.

There is a chance there are more styles which affect the wrapping of
text that could still result in various mismatches, and even moreso
when we consider more browsers (I tested this in Chrome alone).
---
 .../tldraw/src/shape/shapes/sticky/sticky.tsx | 74 +++++++++++--------
 1 file changed, 42 insertions(+), 32 deletions(-)

diff --git a/packages/tldraw/src/shape/shapes/sticky/sticky.tsx b/packages/tldraw/src/shape/shapes/sticky/sticky.tsx
index 1a9896adb..146effaa7 100644
--- a/packages/tldraw/src/shape/shapes/sticky/sticky.tsx
+++ b/packages/tldraw/src/shape/shapes/sticky/sticky.tsx
@@ -261,40 +261,50 @@ const styledStickyContainer = css({
   },
 })
 
-const styledText = css({
-  position: 'absolute',
-  top: PADDING,
-  left: PADDING,
-  width: `calc(100% - ${PADDING * 2}px)`,
-  height: 'fit-content',
-  font: 'inherit',
-  pointerEvents: 'none',
+const commonTextWrapping = css({
   whiteSpace: 'pre-wrap',
-  userSelect: 'none',
-  variants: {
-    isEditing: {
-      true: {
-        opacity: 1,
-      },
-      false: {
-        opacity: 1,
+  overflowWrap: 'break-word',
+})
+
+const styledText = css(
+  {
+    position: 'absolute',
+    top: PADDING,
+    left: PADDING,
+    width: `calc(100% - ${PADDING * 2}px)`,
+    height: 'fit-content',
+    font: 'inherit',
+    pointerEvents: 'none',
+    userSelect: 'none',
+    variants: {
+      isEditing: {
+        true: {
+          opacity: 1,
+        },
+        false: {
+          opacity: 1,
+        },
       },
     },
   },
-})
+  commonTextWrapping
+)
 
-const styledTextArea = css({
-  width: '100%',
-  height: '100%',
-  border: 'none',
-  overflow: 'hidden',
-  background: 'none',
-  outline: 'none',
-  textAlign: 'left',
-  font: 'inherit',
-  padding: 0,
-  color: 'transparent',
-  verticalAlign: 'top',
-  resize: 'none',
-  caretColor: 'black',
-})
+const styledTextArea = css(
+  {
+    width: '100%',
+    height: '100%',
+    border: 'none',
+    overflow: 'hidden',
+    background: 'none',
+    outline: 'none',
+    textAlign: 'left',
+    font: 'inherit',
+    padding: 0,
+    color: 'transparent',
+    verticalAlign: 'top',
+    resize: 'none',
+    caretColor: 'black',
+  },
+  commonTextWrapping
+)