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).

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
+)