From 7ac003cc0589161d664c6d64a346dab224dc8d5d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mitja=20Bezen=C5=A1ek?= <mitja.bezensek@gmail.com>
Date: Tue, 30 Jan 2024 11:11:10 +0100
Subject: [PATCH] Fix svg exporting for images with not fully qualified url
 (`/tldraw.png` or `./tldraw.png`) (#2676)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Local images (like in our Local images example) could not be exported as
svg. We need to base64 encode them, but our check only matched images
with a `http` prefix, which local images like `/tldraw.png` don't have.

Fixes an issue reported here

https://discord.com/channels/859816885297741824/1198343938155745280/1198343938155745280

### Change Type

- [x] `patch` — Bug fix
- [ ] `minor` — New feature
- [ ] `major` — Breaking change
- [ ] `dependencies` — Changes to package dependencies[^1]
- [ ] `documentation` — Changes to the documentation only[^2]
- [ ] `tests` — Changes to any test code only[^2]
- [ ] `internal` — Any other changes that don't affect the published
package[^2]
- [ ] I don't know

[^1]: publishes a `patch` release, for devDependencies use `internal`
[^2]: will not publish a new version

### Test Plan

1. Use our Local images example.
2. Export as svg.
3. The export should correctly show the image.

- [ ] Unit Tests
- [ ] End to end tests

### Release Notes

- Fix the svg export for images that have a local url.

Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
---
 packages/tldraw/api-report.md                 |  2 +
 packages/tldraw/api/api.json                  | 48 +++++++++++++++++++
 .../src/lib/shapes/image/ImageShapeUtil.tsx   |  6 ++-
 3 files changed, 55 insertions(+), 1 deletion(-)

diff --git a/packages/tldraw/api-report.md b/packages/tldraw/api-report.md
index 0c6a85b01..8f504a08a 100644
--- a/packages/tldraw/api-report.md
+++ b/packages/tldraw/api-report.md
@@ -830,6 +830,8 @@ export class ImageShapeUtil extends BaseBoxShapeUtil<TLImageShape> {
         } | null>;
     };
     // (undocumented)
+    shouldGetDataURI(src: string): "" | boolean;
+    // (undocumented)
     toSvg(shape: TLImageShape): Promise<SVGGElement>;
     // (undocumented)
     static type: "image";
diff --git a/packages/tldraw/api/api.json b/packages/tldraw/api/api.json
index 58c5f2d98..4f99dbe77 100644
--- a/packages/tldraw/api/api.json
+++ b/packages/tldraw/api/api.json
@@ -9756,6 +9756,54 @@
               "isProtected": false,
               "isAbstract": false
             },
+            {
+              "kind": "Method",
+              "canonicalReference": "@tldraw/tldraw!ImageShapeUtil#shouldGetDataURI:member(1)",
+              "docComment": "",
+              "excerptTokens": [
+                {
+                  "kind": "Content",
+                  "text": "shouldGetDataURI(src: "
+                },
+                {
+                  "kind": "Content",
+                  "text": "string"
+                },
+                {
+                  "kind": "Content",
+                  "text": "): "
+                },
+                {
+                  "kind": "Content",
+                  "text": "\"\" | boolean"
+                },
+                {
+                  "kind": "Content",
+                  "text": ";"
+                }
+              ],
+              "isStatic": false,
+              "returnTypeTokenRange": {
+                "startIndex": 3,
+                "endIndex": 4
+              },
+              "releaseTag": "Public",
+              "isProtected": false,
+              "overloadIndex": 1,
+              "parameters": [
+                {
+                  "parameterName": "src",
+                  "parameterTypeTokenRange": {
+                    "startIndex": 1,
+                    "endIndex": 2
+                  },
+                  "isOptional": false
+                }
+              ],
+              "isOptional": false,
+              "isAbstract": false,
+              "name": "shouldGetDataURI"
+            },
             {
               "kind": "Method",
               "canonicalReference": "@tldraw/tldraw!ImageShapeUtil#toSvg:member(1)",
diff --git a/packages/tldraw/src/lib/shapes/image/ImageShapeUtil.tsx b/packages/tldraw/src/lib/shapes/image/ImageShapeUtil.tsx
index 7ab4c26b2..7f2656952 100644
--- a/packages/tldraw/src/lib/shapes/image/ImageShapeUtil.tsx
+++ b/packages/tldraw/src/lib/shapes/image/ImageShapeUtil.tsx
@@ -170,12 +170,16 @@ export class ImageShapeUtil extends BaseBoxShapeUtil<TLImageShape> {
 		return <rect width={toDomPrecision(shape.props.w)} height={toDomPrecision(shape.props.h)} />
 	}
 
+	shouldGetDataURI(src: string) {
+		return src && (src.startsWith('http') || src.startsWith('/') || src.startsWith('./'))
+	}
+
 	override async toSvg(shape: TLImageShape) {
 		const g = document.createElementNS('http://www.w3.org/2000/svg', 'g')
 		const asset = shape.props.assetId ? this.editor.getAsset(shape.props.assetId) : null
 
 		let src = asset?.props.src || ''
-		if (src && src.startsWith('http')) {
+		if (this.shouldGetDataURI(src)) {
 			// If it's a remote image, we need to fetch it and convert it to a data URI
 			src = (await getDataURIFromURL(src)) || ''
 		}