[fix] fix text shapes bugs (#509)

* cleanup

* Fix text size, and slash

* Remove console.log

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')
   }
 
   /* -------------------------------------------------- */

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,

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',

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}‍`
+  melm.textContent = `${text}`
   melm.style.font = font
 
   // In tests, offsetWidth and offsetHeight will be 0

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,