Fixes text

packages/tldraw/src/shape/shapes/text/text.tsx

@@ -14,42 +14,42 @@ function normalizeText(text: string) {
 }
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-// let melm: any
+let melm: any
 
-// function getMeasurementDiv() {
+function getMeasurementDiv() {
-//   // A div used for measurement
+  // A div used for measurement
-//   document.getElementById('__textMeasure')?.remove()
+  document.getElementById('__textMeasure')?.remove()
 
-//   const pre = document.createElement('pre')
+  const pre = document.createElement('pre')
-//   pre.id = '__textMeasure'
+  pre.id = '__textMeasure'
 
-//   Object.assign(pre.style, {
+  Object.assign(pre.style, {
-//     whiteSpace: 'pre',
+    whiteSpace: 'pre',
-//     width: 'auto',
+    width: 'auto',
-//     border: '1px solid red',
+    border: '1px solid red',
-//     padding: '4px',
+    padding: '4px',
-//     margin: '0px',
+    margin: '0px',
-//     letterSpacing: `${LETTER_SPACING}px`,
+    letterSpacing: `${LETTER_SPACING}px`,
-//     opacity: '0',
+    opacity: '0',
-//     position: 'absolute',
+    position: 'absolute',
-//     top: '-500px',
+    top: '-500px',
-//     left: '0px',
+    left: '0px',
-//     zIndex: '9999',
+    zIndex: '9999',
-//     pointerEvents: 'none',
+    pointerEvents: 'none',
-//     userSelect: 'none',
+    userSelect: 'none',
-//     alignmentBaseline: 'mathematical',
+    alignmentBaseline: 'mathematical',
-//     dominantBaseline: 'mathematical',
+    dominantBaseline: 'mathematical',
-//   })
+  })
 
-//   pre.tabIndex = -1
+  pre.tabIndex = -1
 
-//   document.body.appendChild(pre)
+  document.body.appendChild(pre)
-//   return pre
+  return pre
-// }
+}
 
-// if (typeof window !== 'undefined') {
+if (typeof window !== 'undefined') {
-//   melm = getMeasurementDiv()
+  melm = getMeasurementDiv()
-// }
+}
 
 export const Text = new ShapeUtil<TextShape, HTMLDivElement, TLDrawMeta>(() => ({
   type: TLDrawShapeType.Text,
@@ -193,40 +193,28 @@ export const Text = new ShapeUtil<TextShape, HTMLDivElement, TLDrawMeta>(() => (
   },
 
   getBounds(shape): TLBounds {
-    const ref = this.getRef(shape)
+    const bounds = Utils.getFromCache(this.boundsCache, shape, () => {
-    const elm = ref.current
+      if (!melm) {
+        // We're in SSR
+        return { minX: 0, minY: 0, maxX: 10, maxY: 10, width: 10, height: 10 }
+      }
 
-    const bounds = {
+      melm.innerHTML = `${shape.text}&zwj;`
-      minX: 0,
+      melm.style.font = getFontStyle(shape.style)
-      minY: 0,
-      maxX: elm?.offsetWidth || 32,
-      maxY: elm?.offsetHeight || 32,
-      width: elm?.offsetWidth || 32,
-      height: elm?.offsetHeight || 32,
-    }
 
-    // const bounds = Utils.getFromCache(this.boundsCache, shape, () => {
+      // In tests, offsetWidth and offsetHeight will be 0
-    //   if (!melm) {
+      const width = melm.offsetWidth || 1
-    //     // We're in SSR
+      const height = melm.offsetHeight || 1
-    //     return { minX: 0, minY: 0, maxX: 10, maxY: 10, width: 10, height: 10 }
-    //   }
 
-    //   melm.innerHTML = `${shape.text}&zwj;`
+      return {
-    //   melm.style.font = getFontStyle(shape.style)
+        minX: 0,
-
+        maxX: width,
-    //   // In tests, offsetWidth and offsetHeight will be 0
+        minY: 0,
-    //   const width = melm.offsetWidth || 1
+        maxY: height,
-    //   const height = melm.offsetHeight || 1
+        width,
-
+        height,
-    //   return {
+      }
-    //     minX: 0,
+    })
-    //     maxX: width,
-    //     minY: 0,
-    //     maxY: height,
-    //     width,
-    //     height,
-    //   }
-    // })
 
     return Utils.translateBounds(bounds, shape.point)
   },