fix(whiteboard): do not show image preview on Safari (including ios & ipad)

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

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import * as React from 'react'
 import { HTMLContainer, TLComponentProps } from '@tldraw/react'
-import { TLAsset, TLImageShape, TLImageShapeProps } from '@tldraw/core'
+import { isSafari, TLAsset, TLImageShape, TLImageShapeProps } from '@tldraw/core'
 import { observer } from 'mobx-react-lite'
 import { LogseqContext } from '../logseq-context'
 import { BindingIndicator } from './BindingIndicator'
@@ -80,6 +80,10 @@ export class ImageShape extends TLImageShape<ImageShapeProps> {
   })
 
   getShapeSVGJsx({ assets }: { assets: TLAsset[] }) {
+    if (isSafari()) {
+      // Safari doesn't support foreignObject well
+      return super.getShapeSVGJsx(null);
+    }
     // Do not need to consider the original point here
     const bounds = this.getBounds()
     const {
@@ -97,22 +101,24 @@ export class ImageShape extends TLImageShape<ImageShapeProps> {
       const make_asset_url = window.logseq?.api?.make_asset_url
 
       return (
-        <foreignObject width={bounds.width} height={bounds.height}>
-          <img
-            src={make_asset_url ? make_asset_url(asset.src) : asset.src}
-            draggable={false}
-            loading="lazy"
-            style={{
-              position: 'relative',
-              top: -t,
-              left: -l,
-              width: w + (l - r),
-              height: h + (t - b),
-              objectFit: this.props.objectFit,
-              pointerEvents: 'all',
-            }}
-          />
-        </foreignObject>
+        <g>
+          <foreignObject width={bounds.width} height={bounds.height}>
+            <img
+              src={make_asset_url ? make_asset_url(asset.src) : asset.src}
+              draggable={false}
+              loading="lazy"
+              style={{
+                position: 'relative',
+                top: -t,
+                left: -l,
+                width: w + (l - r),
+                height: h + (t - b),
+                objectFit: this.props.objectFit,
+                pointerEvents: 'all',
+              }}
+            />
+          </foreignObject>
+        </g>
       )
     } else {
       return super.getShapeSVGJsx({})

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

@@ -7,6 +7,7 @@ import {
   TLTextShape,
   TLTextShapeProps,
   getComputedColor,
+  isSafari,
 } from '@tldraw/core'
 import { HTMLContainer, TLComponentProps } from '@tldraw/react'
 import { action, computed } from 'mobx'
@@ -306,6 +307,10 @@ export class TextShape extends TLTextShape<TextShapeProps> {
   }
 
   getShapeSVGJsx() {
+    if (isSafari()) {
+      // Safari doesn't support foreignObject well
+      return super.getShapeSVGJsx(null);
+    }
     const {
       props: { text, stroke, fontSize, fontFamily },
     } = this
@@ -319,6 +324,7 @@ export class TextShape extends TLTextShape<TextShapeProps> {
             color: getComputedColor(stroke, 'text'),
             fontSize,
             fontFamily,
+            display: 'contents',
           }}
         >
           {text}

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

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { TLBoxShape, TLBoxShapeProps } from '@tldraw/core'
+import { isSafari, TLBoxShape, TLBoxShapeProps } from '@tldraw/core'
 import { HTMLContainer, TLComponentProps } from '@tldraw/react'
 import { action, computed } from 'mobx'
 import { observer } from 'mobx-react-lite'
@@ -131,17 +131,26 @@ export class YouTubeShape extends TLBoxShape<YouTubeShapeProps> {
   }
 
   getShapeSVGJsx() {
+    if (isSafari()) {
+      // Safari doesn't support foreignObject well
+      return super.getShapeSVGJsx(null);
+    }
     // Do not need to consider the original point here
     const bounds = this.getBounds()
     const embedId = this.embedId
 
     if (embedId) {
       return (
-        <>
+        <g>
           <foreignObject width={bounds.width} height={bounds.height}>
             <img
               src={`https://img.youtube.com/vi/${embedId}/mqdefault.jpg`}
               draggable={false}
+              style={{
+                display: 'contents',
+                width: bounds.width,
+                height: bounds.height,
+              }}
               loading="lazy"
               className="rounded-lg relative pointer-events-none w-full h-full grayscale-[50%]"
             />
@@ -162,7 +171,7 @@ export class YouTubeShape extends TLBoxShape<YouTubeShapeProps> {
               </svg>
             </div>
           </foreignObject>
-        </>
+        </g>
       )
     }
     return super.getShapeSVGJsx({})

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

@@ -363,7 +363,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(opts: any) {
+  getShapeSVGJsx(_?: any) {
     // Do not need to consider the original point here
     const bounds = this.getBounds()
     const { stroke, strokeWidth, strokeType, opacity, fill, noFill, borderRadius } = this

tldraw/packages/core/src/utils/index.ts

@@ -81,6 +81,14 @@ export function isDarwin(): boolean {
   return /Mac|iPod|iPhone|iPad/.test(window.navigator.platform)
 }
 
+/**
+ * Migrated from frontend.util/safari?
+ */
+export function isSafari(): boolean {
+  const ua = window.navigator.userAgent.toLowerCase()
+  return ua.includes('webkit') && !ua.includes('chrome')
+}
+
 /**
  * Get whether an event is command (mac) or control (pc).
  *