fix: text shapes in preview

tldraw/apps/tldraw-logseq/src/lib/preview-manager.tsx

@@ -87,7 +87,7 @@ export class PreviewManager {
               const transformArr = [`translate(${tx}, ${ty})`, `rotate(${r}, ${rdx}, ${rdy})`]
               return (
                 <g transform={transformArr.join(' ')} key={s.id}>
-                  {s.getShapeSVGJsx()}
+                  {s.getShapeSVGJsx(true)}
                 </g>
               )
             })}

tldraw/apps/tldraw-logseq/src/lib/shapes/LineShape.tsx

@@ -146,26 +146,47 @@ export class LineShape extends TLLineShape<LineShapeProps> {
     return withClampedStyles(props)
   }
 
-  getShapeSVGJsx() {
+  getShapeSVGJsx(preview = false) {
     const {
       stroke,
       fill,
       strokeWidth,
       decorations,
+      label,
       handles: { start, end },
     } = this.props
+    const midPoint = Vec.med(start.point, end.point)
     return (
-      <Arrow
-        style={{
-          stroke,
-          fill,
-          strokeWidth,
-        }}
-        start={start.point}
-        end={end.point}
-        decorationStart={decorations?.start}
-        decorationEnd={decorations?.end}
-      />
+      <>
+        <Arrow
+          style={{
+            stroke,
+            fill,
+            strokeWidth,
+          }}
+          start={start.point}
+          end={end.point}
+          decorationStart={decorations?.start}
+          decorationEnd={decorations?.end}
+        />
+        {preview && (
+          <>
+            <text
+              style={{
+                transformOrigin: 'top left',
+              }}
+              fontFamily="Inter"
+              fontSize={20}
+              transform={`translate(${midPoint[0]}, ${midPoint[1]})`}
+              textAnchor="middle"
+              stroke={stroke}
+              fill={stroke}
+            >
+              {label}
+            </text>
+          </>
+        )}
+      </>
     )
   }
 }

tldraw/apps/tldraw-logseq/src/lib/shapes/TextShape.tsx

@@ -272,8 +272,25 @@ export class TextShape extends TLTextShape<TextShapeProps> {
 
   getShapeSVGJsx() {
     const {
-      props: { text, stroke },
+      props: { text, stroke, fontSize, fontFamily },
     } = this
-    return <text stroke={stroke} fill={stroke}>{text}</text>
+    // Stretch to the bound size 
+    const bounds = this.getBounds()
+
+    return (
+      <text
+        style={{
+          transformOrigin: 'top left',
+        }}
+        transform={`translate(${bounds.width / 2}, ${bounds.height / 2})`}
+        textAnchor="middle"
+        fontFamily={fontFamily}
+        fontSize={fontSize}
+        stroke={stroke}
+        fill={stroke}
+      >
+        {text}
+      </text>
+    )
   }
 }

tldraw/packages/core/src/lib/shapes/TLShape/TLShape.tsx

@@ -345,7 +345,7 @@ export abstract class TLShape<P extends TLShapeProps = TLShapeProps, M = any> {
    * Get a svg group element that can be used to render the shape with only the props data. In the
    * base, draw any shape as a box. Can be overridden by subclasses.
    */
-  getShapeSVGJsx() {
+  getShapeSVGJsx(preview = false) {
     // Do not need to consider the original point here
     const bounds = this.getBounds()
     return (