From 08a930f59c8620486b8772f07976584fc50f4d0d Mon Sep 17 00:00:00 2001
From: Steve Ruiz <steveruizok@gmail.com>
Date: Fri, 14 Jan 2022 20:35:11 +0000
Subject: [PATCH] [fix] fix text shapes bugs (#509)

* cleanup

* Fix text size, and slash

* Remove console.log
---
 packages/tldraw/src/state/TLDR.ts                           | 6 +++++-
 packages/tldraw/src/state/TldrawApp.ts                      | 3 +--
 packages/tldraw/src/state/shapes/TextUtil/TextUtil.tsx      | 5 ++---
 packages/tldraw/src/state/shapes/shared/getTextSize.ts      | 4 ++--
 .../tldraw/src/state/shapes/shared/transformRectangle.ts    | 3 ---
 5 files changed, 10 insertions(+), 11 deletions(-)

diff --git a/packages/tldraw/src/state/TLDR.ts b/packages/tldraw/src/state/TLDR.ts
index 73c876f8b..12c997dd0 100644
--- a/packages/tldraw/src/state/TLDR.ts
+++ b/packages/tldraw/src/state/TLDR.ts
@@ -878,7 +878,11 @@ export class TLDR {
   static fixNewLines = /\r?\n|\r/g
 
   static normalizeText(text: string) {
-    return text.replace(TLDR.fixNewLines, '\n')
+    return text
+      .replace(TLDR.fixNewLines, '\n')
+      .split('\n')
+      .map((x) => x || ' ')
+      .join('\n')
   }
 
   /* -------------------------------------------------- */
diff --git a/packages/tldraw/src/state/TldrawApp.ts b/packages/tldraw/src/state/TldrawApp.ts
index 9598a566d..b180e9aef 100644
--- a/packages/tldraw/src/state/TldrawApp.ts
+++ b/packages/tldraw/src/state/TldrawApp.ts
@@ -2920,7 +2920,7 @@ export class TldrawApp extends StateManager<TDSnapshot> {
   onKeyDown: TLKeyboardEventHandler = (key, info, e) => {
     switch (e.key) {
       case '/': {
-        if (this.status === 'idle') {
+        if (this.status === 'idle' && !this.pageState.editingId) {
           const { shiftKey, metaKey, altKey, ctrlKey, spaceKey } = this
 
           this.onPointerDown(
@@ -3562,7 +3562,6 @@ export class TldrawApp extends StateManager<TDSnapshot> {
       isZoomSnap: false,
       isFocusMode: false,
       isSnapping: false,
-      //@ts-ignore
       isDebugMode: process.env.NODE_ENV === 'development',
       isReadonlyMode: false,
       nudgeDistanceLarge: 16,
diff --git a/packages/tldraw/src/state/shapes/TextUtil/TextUtil.tsx b/packages/tldraw/src/state/shapes/TextUtil/TextUtil.tsx
index 2a9fc6a00..27aa8ff24 100644
--- a/packages/tldraw/src/state/shapes/TextUtil/TextUtil.tsx
+++ b/packages/tldraw/src/state/shapes/TextUtil/TextUtil.tsx
@@ -3,7 +3,6 @@ import * as React from 'react'
 import { Utils, HTMLContainer, TLBounds } from '@tldraw/core'
 import { defaultTextStyle, getShapeStyle, getFontStyle } from '../shared/shape-styles'
 import { TextShape, TDMeta, TDShapeType, TransformInfo, AlignStyle } from '~types'
-import { TextAreaUtils } from '../shared'
 import { BINDING_DISTANCE, GHOSTED_OPACITY, LETTER_SPACING } from '~constants'
 import { TDShapeUtil } from '../TDShapeUtil'
 import { styled } from '~styles'
@@ -219,7 +218,7 @@ export class TextUtil extends TDShapeUtil<T, E> {
         return { minX: 0, minY: 0, maxX: 10, maxY: 10, width: 10, height: 10 }
       }
 
-      melm.innerHTML = `${shape.text}&zwj;`
+      melm.textContent = shape.text
       melm.style.font = getFontStyle(shape.style)
 
       // In tests, offsetWidth and offsetHeight will be 0
@@ -334,7 +333,7 @@ function getMeasurementDiv() {
     border: '1px solid transparent',
     padding: '4px',
     margin: '0px',
-    letterSpacing: `${LETTER_SPACING}px`,
+    letterSpacing: LETTER_SPACING,
     opacity: '0',
     position: 'absolute',
     top: '-500px',
diff --git a/packages/tldraw/src/state/shapes/shared/getTextSize.ts b/packages/tldraw/src/state/shapes/shared/getTextSize.ts
index be22b196f..4dd238c20 100644
--- a/packages/tldraw/src/state/shapes/shared/getTextSize.ts
+++ b/packages/tldraw/src/state/shapes/shared/getTextSize.ts
@@ -16,7 +16,7 @@ function getMeasurementDiv() {
     border: '1px solid transparent',
     padding: '4px',
     margin: '0px',
-    letterSpacing: `${LETTER_SPACING}px`,
+    letterSpacing: LETTER_SPACING,
     opacity: '0',
     position: 'absolute',
     top: '-500px',
@@ -59,7 +59,7 @@ export function getTextLabelSize(text: string, font: string) {
   prevText = text
   prevFont = font
 
-  melm.innerHTML = `${text}&zwj;`
+  melm.textContent = `${text}`
   melm.style.font = font
 
   // In tests, offsetWidth and offsetHeight will be 0
diff --git a/packages/tldraw/src/state/shapes/shared/transformRectangle.ts b/packages/tldraw/src/state/shapes/shared/transformRectangle.ts
index 51fd7b052..49cc2c48a 100644
--- a/packages/tldraw/src/state/shapes/shared/transformRectangle.ts
+++ b/packages/tldraw/src/state/shapes/shared/transformRectangle.ts
@@ -16,7 +16,6 @@ export function transformRectangle<T extends TLShape & { size: number[] }>(
     const size = Vec.toFixed(
       Vec.mul(initialShape.size, Math.min(Math.abs(scaleX), Math.abs(scaleY)))
     )
-
     const point = Vec.toFixed([
       bounds.minX +
         (bounds.width - shape.size[0]) * (scaleX < 0 ? 1 - transformOrigin[0] : transformOrigin[0]),
@@ -24,14 +23,12 @@ export function transformRectangle<T extends TLShape & { size: number[] }>(
         (bounds.height - shape.size[1]) *
           (scaleY < 0 ? 1 - transformOrigin[1] : transformOrigin[1]),
     ])
-
     const rotation =
       (scaleX < 0 && scaleY >= 0) || (scaleY < 0 && scaleX >= 0)
         ? initialShape.rotation
           ? -initialShape.rotation
           : 0
         : initialShape.rotation
-
     return {
       size,
       point,